/* pay-guide-design.css — оформлението на /pay-by-bank-transfer/ гайда.
 *
 * САМО CSS. Съдържанието живее в post_content на 8 WPML копия и НЕ се пипа —
 * затова тук няма нито една дума текст и нито един псевдо-елемент с буква:
 * всичко е геометрия и цвят, значи важи еднакво за en/de/fr/it/ro/bg/el/es,
 * независимо колко по-дълъг е немският.
 *
 * ЗАЩО ДВОЕН КЛАС (`.pppay.pppay`): страницата носи СОБСТВЕН <style> блок вътре
 * в post_content, който стои СЛЕД този файл в документа — при равна специфичност
 * печели той. Удвояването на класа вдига специфичността с точно един клас, без
 * `!important` и без да се закача за маркъп на темата.
 *
 * ПОЗИЦИЯ: това е страница за ЧЕТЕНЕ по време на действие (човекът е с отворен
 * банков app в другия таб). Значи: една ясна колона, силна типографска йерархия,
 * и кутии САМО там, където съдържанието наистина е паралелно (петте услуги).
 * Стъпките са релса, не карти — последователност, не колекция.
 *
 * Палитра: #5D4F89 (бранд) · #3A2F63 (заглавия) · #EDEAF6 / #F7F5FB (тихи фонове).
 */

/* --- колоната ------------------------------------------------------------- */
/* 720px при 16px = ~72 знака на ред — в четимия диапазон, и оставя място на
   плаващите икони отдясно, без текстът да се смачка. */
.pppay.pppay {
    max-width: 720px;
}

/* Йерархията е типографска: повече въздух НАД заглавието, отколкото под него,
   и ясна стъпка в размера. Без декоративни чертички над всяка секция. */
.pppay.pppay h2 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.012em;
    margin: 52px 0 12px;
    text-wrap: balance;
}

.pppay.pppay p {
    margin: 0 0 15px;
}

/* --- увод ---------------------------------------------------------------- */
.pppay.pppay .pppay-lead {
    font-size: 20px;
    line-height: 1.6;
    text-align: center;
    text-wrap: balance;
    max-width: 620px;
    margin: 0 auto;
}

/* Единственият декоративен щрих на страницата — затваря hero блока и отваря
   четенето. Точно затова не се повтаря никъде другаде. */
.pppay.pppay .pppay-lead::after {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    margin: 28px auto 0;
    background: linear-gradient(90deg, rgba(201, 191, 228, 0), #C9BFE4, rgba(201, 191, 228, 0));
}

.pppay.pppay .pppay-lead + h2 {
    margin-top: 44px;
}

/* --- препоръчани услуги --------------------------------------------------- */
/* Тук кутиите са заслужени: пет паралелни опции, които се сравняват една с
   друга. Решетката прави сравнението възможно с един поглед. */
.pppay.pppay .pppay-svc {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0 18px;
}

.pppay.pppay .pppay-svc > li {
    margin: 0;
    padding: 16px 18px;
    font-size: 15px;
    line-height: 1.6;
    background: #fff;
    border: 1px solid #EDEAF6;
    border-radius: 14px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* Нашата препоръка (първата) заема целия ред и се различава по ТОН, не по
   цветна лента: пълнеж + по-плътен ръб. */
.pppay.pppay .pppay-svc > li:first-child {
    grid-column: 1 / -1;
    background: #F8F6FD;
    border-color: #D9D2EE;
}

.pppay.pppay .pppay-svc > li:hover {
    transform: translateY(-2px);
    border-color: #C9BFE4;
    box-shadow: 0 8px 20px -6px rgba(58, 47, 99, .16);
}

/* В картите подчертаването е по-леко от глобалното — иначе решетката се шуми. */
.pppay.pppay .pppay-svc a {
    text-decoration: none;
    border-bottom: 1px solid rgba(93, 79, 137, .35);
}

.pppay.pppay .pppay-svc a:hover {
    border-bottom-color: #5D4F89;
}

/* --- стъпките: релса, не карти -------------------------------------------- */
/* Петте стъпки са ЕДНА последователност. Кутия около всяка ги прави пет отделни
   неща; непрекъснатата линия през номерата ги прави един път. */
.pppay.pppay .pppay-steps {
    margin: 26px 0 30px;
}

.pppay.pppay .pppay-steps > li {
    min-height: 0;
    margin: 0 0 26px;
    padding-left: 56px;
}

.pppay.pppay .pppay-steps > li:last-child {
    margin-bottom: 0;
}

.pppay.pppay .pppay-steps > li::before {
    top: 0;
    box-shadow: 0 2px 6px rgba(93, 79, 137, .26);
}

/* Релсата тръгва под кръгчето и стига до следващото (затова минава и през
   разстоянието между стъпките). */
.pppay.pppay .pppay-steps > li::after {
    content: "";
    position: absolute;
    left: 16px;
    top: 42px;
    bottom: -26px;
    width: 2px;
    border-radius: 1px;
    background: linear-gradient(#DED6EF, #E9E4F5);
}

.pppay.pppay .pppay-steps > li:last-child::after {
    display: none;
}

/* Водещото изречение на стъпката е заглавието ѝ. НЕ `:first-child` — когато
   анимациите са включени, Lottie кутията е първото дете на <li>. */
.pppay.pppay .pppay-steps > li > strong {
    color: #3A2F63;
}

/* --- банковите карти ------------------------------------------------------ */
.pppay.pppay .ppcro-bankcard {
    max-width: 560px;
    box-shadow: 0 4px 16px -6px rgba(58, 47, 99, .18);
}

.pppay.pppay .ppcro-bankcard-note {
    max-width: 560px;
}

/* --- важната бележка ------------------------------------------------------ */
/* Разграничава се с тон и въздух, не с лента отстрани. */
.pppay.pppay .pppay-callout {
    max-width: 560px;
    margin: 26px auto 8px;
    padding: 20px 24px;
    background: #F4F1FB;
    border-color: #DCD5EF;
}

/* --- съветите: точки -> отметки ------------------------------------------ */
/* `:not(.pppay-svc)` пази решетката по-горе — тя е единственият друг <ul>. */
.pppay.pppay ul:not(.pppay-svc) {
    list-style: none;
    padding-left: 0;
    margin-top: 16px;
}

.pppay.pppay ul:not(.pppay-svc) > li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 30px;
}

/* Отметката е нарисувана с два ръба — без шрифт, без глиф, без език. */
.pppay.pppay ul:not(.pppay-svc) > li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .48em;
    width: 9px;
    height: 5px;
    border-left: 2px solid #5D4F89;
    border-bottom: 2px solid #5D4F89;
    border-radius: 1px;
    transform: rotate(-45deg);
}

/* --- мобилно -------------------------------------------------------------- */
@media (max-width: 640px) {
    .pppay.pppay h2 {
        font-size: 22px;
        margin-top: 40px;
    }

    .pppay.pppay .pppay-lead {
        font-size: 18px;
        text-align: left;
    }

    .pppay.pppay .pppay-lead::after {
        margin-left: 0;
    }

    .pppay.pppay .pppay-svc {
        grid-template-columns: 1fr;
    }

    .pppay.pppay .pppay-steps > li {
        padding-left: 46px;
        margin-bottom: 22px;
    }

    .pppay.pppay .pppay-steps > li::before {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .pppay.pppay .pppay-steps > li::after {
        left: 14px;
        top: 38px;
        bottom: -22px;
    }

    .pppay.pppay .pppay-callout,
    .pppay.pppay .ppcro-bankcard,
    .pppay.pppay .ppcro-bankcard-note {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pppay.pppay .pppay-svc > li {
        transition: none;
    }

    .pppay.pppay .pppay-svc > li:hover {
        transform: none;
    }
}