/* pay-guide-lottie.css — Lottie илюстрациите на /pay-by-bank-transfer/.
 *
 * Работи ВЪРХУ inline `.pppay` стиловете в съдържанието на страницата (те са в
 * post_content, писан от _prod/_payguide_apply.php) — затова тук няма нищо, което
 * да ги пренаписва, само собствен `ppl-` namespace.
 *
 * Всяка кутия има фиксирани width+height ПРЕДИ JS да е стартирал: контейнерът се
 * рендерира от сървъра с готовите размери, така че зареждането на анимацията не
 * мести текста (нула CLS).
 */

.ppl-anim {
    display: block;
    line-height: 0;
    flex: 0 0 auto;
}

.ppl-anim svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* --- Hero над увода ------------------------------------------------------ */
.pppay .ppl-hero {
    width: 224px;
    height: 224px;
    margin: 4px auto 10px;
}

/* --- Икона до заглавие на секция ----------------------------------------- */
/* Плава вдясно, текстът на h2 + параграфите се увиват около нея. */
.pppay .ppl-section {
    width: 116px;
    height: 116px;
    float: right;
    clear: right;          /* къса секция да не блъсне иконата на следващата */
    margin: 4px 0 6px 24px;
    shape-outside: circle(50%);
}

/* h2 след плаваща икона не бива да залепва за нея. */
.pppay .ppl-section + h2 {
    margin-top: 30px;
}

/* Картата с банковите сметки е `margin:auto` центрирана: ако остане до плаващата
   икона на "Our bank details", auto центрира в СТЕСНЕНАТА линия и картата увисва
   вляво от оста на текста. Затова я пускаме под иконата. */
.pppay .ppcro-bankcard,
.pppay .ppcro-bankcard-note {
    clear: right;
}

/* --- Икона в номерирана стъпка ------------------------------------------- */
/* flow-root задържа плаващата икона вътре в <li> — иначе тя изтича в следващата
   стъпка. Абсолютно позиционираният брояч (li:before) не се влияе. */
.pppay .pppay-steps > li {
    display: flow-root;
}

.pppay .ppl-step {
    width: 68px;
    height: 68px;
    float: right;
    margin: -6px 0 4px 18px;
}

/* --- Мобилно ------------------------------------------------------------- */
@media (max-width: 640px) {
    .pppay .ppl-hero   { width: 176px; height: 176px; }
    .pppay .ppl-section{ float: none; width: 92px; height: 92px; margin: 0 auto 2px; }
    .pppay .ppl-section + h2 { margin-top: 14px; }
    /* По-малка от десктопната: на 390px иконата и текстът си делят един ред,
       а 46px оставяха стъпката с ~200px текстова колона (нечетимо накъсване). */
    .pppay .ppl-step   { width: 38px; height: 38px; margin: -1px 0 2px 10px; }
}

/* Ако плеърът или JSON-ът не се заредят, кутията не бива да оставя дупка. */
.ppl-anim.is-failed { display: none; }

@media print {
    .ppl-anim { display: none; }
}