/* ============================================================
 * rules-changed.css
 * Balla Ingatlan — Kiegészítő stílusok a landing page-hez
 * (A formázás oroszlánrésze a style.css-ből és a property-sell.css-ből jön)
 * ============================================================ */

/* Extra padding a szekciók közé */
.section-padding {
    padding-top: 20px;
    padding-bottom: 40px;
}

/* Flexbox segédosztály az egyforma magas oszlopokhoz (Bootstrap 3-ban nincs alapból) */
.display-flex-wrap {
    display: flex;
    flex-wrap: wrap;
}
.display-flex-wrap > [class*='col-'] {
    display: flex;
    flex-direction: column;
}
.display-flex-wrap .feature-card,
.display-flex-wrap .meaning-box,
.display-flex-wrap .stats-perk {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Egyenletes eloszlás a kártyán belül */
}

/* Hover effektek: zoom, árnyék + körvonal (box-shadow trükkel) és x-tengelyű elmozdulás (enyhe translateX) */
.stats-perk, .meaning-box, .feature-card {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.stats-perk:hover {
    transform: translateX(4px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.meaning-box.box-red:hover {
    transform: translateX(4px) scale(1.02);
    box-shadow: 0 15px 30px rgba(178, 7, 27, 0.15), 0 0 0 1px #b2071b;
}

.meaning-box.box-blue:hover {
    transform: translateX(4px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 76, 147, 0.15), 0 0 0 1px #004c93;
}

.feature-card:hover {
    transform: translateX(4px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 76, 147, 0.1), 0 0 0 1px #004c93;
}

/* Statisztika kártyák a perkcontainer-hez hasonlóan */
.stats-perk {
    min-height: 220px;
    background: linear-gradient(135deg, #004c93 0%, #001e3a 100%);
    color: white;
    padding: 30px 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    text-align: center;
}

.stats-perk.red {
    background: linear-gradient(135deg, #b2071b 0%, #660b15 100%);
}

.stats-perk.amber {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stats-perk h3 {
    color: white;
    font-weight: 700;
    font-size: 18px;
    margin-top: 15px;
    margin-bottom: 10px;
}

.stats-perk p {
    font-size: 14px;
    color: #e8f0fa;
    margin: 0;
}

/* Megoldás / Kockázat dobozok */
.meaning-box {
    background: white;
    padding: 40px 30px;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-top: 5px solid #bbb;
    height: 100%;
}

.meaning-box.box-red {
    border-top-color: #b2071b;
}

.meaning-box.box-blue {
    border-top-color: #004c93;
}

.meaning-box h3 {
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 15px;
}

.box-red h3 { color: #b2071b; }
.box-blue h3 { color: #004c93; }

/* Új dizájn a "Miért a Balla" kártyáknak */
.feature-card {
    background: white;
    padding: 40px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    height: 100%;
}

.feature-card i {
    transition: transform 0.3s ease;
}

.feature-card:hover i {
    transform: scale(1.2);
}


/* Záró szekció sötét */
.final-cta-section {
    background: linear-gradient(135deg, #004c93 0%, #001e3a 100%);
    color: white;
    padding: 80px 0;
    text-align: center;
}

.final-cta-section h2 {
    color: white;
    font-weight: 800;
    font-size: 36px;
    margin-bottom: 20px;
}

.final-cta-section p {
    font-size: 18px;
    color: #c5d9f0;
    margin-bottom: 40px;
}