/* =============================================
   BEAUTY BALM — інформаційні сторінки

   Макети 5A «Доставка й оплата» і 5B «Повернення
   товару». Обидві сторінки складені з тих самих
   блоків, тож і файл один: два майже однакових
   CSS завжди розʼїжджаються.

   Підключається на page-delivery.php і
   page-returns.php. Хлібні крихти, кнопки й
   .bb-rows — спільні, з components.css.
   ============================================= */

.bb-info {
    padding-top: 32px;
    padding-bottom: var(--bb-section);
}


/* ── Hero ─────────────────────────────────────── */

.bb-info__hero {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-top: 18px;
}

/* Обмежуємо рядок, а не контейнер: сам .bb-container тримає
   бокові поля, і max-width на ньому зсунув би сітку вліво. */
.bb-info__hero > * {
    max-width: 760px;
}

.bb-info__title {
    margin: 0;
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-h1);
    font-weight: var(--bb-fw-medium);
    line-height: var(--bb-lh-h1);
    letter-spacing: var(--bb-ls-h1);
    color: var(--bb-ink);
}

.bb-info__lead {
    margin: 0;
    font-size: var(--bb-fs-lead);
    line-height: var(--bb-lh-lead);
    color: var(--bb-body);
}


/* ── Секція ───────────────────────────────────── */

.bb-info__section {
    padding-top: 56px;
}

.bb-info__section--tight {
    padding-top: 44px;
}

.bb-info__h2 {
    margin: 0 0 22px;
    font-family: var(--bb-font-display);
    font-size: var(--bb-fs-h2);
    font-weight: var(--bb-fw-medium);
    line-height: var(--bb-lh-h2);
    color: var(--bb-ink);
}


/* ── Картки ───────────────────────────────────── */

.bb-info__cards {
    display: grid;
    gap: 20px;
}

.bb-info__cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bb-info__cards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bb-info__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius-lg);
    background: var(--bb-surface);
}

/* Виділена картка (у макеті — самовивіз). Рамка тонша за 1.5px
   не береться, тож компенсуємо внутрішній відступ, щоб вміст
   не стрибав відносно сусідів. */
.bb-info__card--accent {
    border: 2px solid var(--bb-indigo);
    padding: 25px;
}

.bb-info__card-title {
    font-family: var(--bb-font-display);
    font-size: 24px;
    font-weight: var(--bb-fw-semibold);
    line-height: 1.2;
    color: var(--bb-ink);
}

.bb-info__card-text {
    flex: 1;
    font-size: var(--bb-fs-ui);
    line-height: 1.6;
    color: var(--bb-body);
}


/* ── Термін / вартість усередині картки ───────── */

.bb-info__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--bb-line-soft);
}

.bb-info__meta-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
}

.bb-info__meta-row dt {
    margin: 0;
    color: var(--bb-muted);
}

.bb-info__meta-row dd {
    margin: 0;
    text-align: right;
    color: var(--bb-ink);
}

.bb-info__meta-value {
    font-weight: var(--bb-fw-medium);
}


/* ── Плашка «ЄС» ──────────────────────────────── */

.bb-info__note {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 20px 24px;
    border-radius: var(--bb-radius-lg);
    background: var(--bb-photo-bg);
}

.bb-info__note-mark {
    flex: none;
    font-family: var(--bb-font-display);
    font-size: 22px;
    color: var(--bb-periwinkle);
}

.bb-info__note-text {
    font-size: var(--bb-fs-ui);
    line-height: 1.6;
    color: var(--bb-body);
}


/* ── Списки «Приймаємо» / «Не приймаємо» ──────── */

.bb-info__flag {
    font-size: var(--bb-fs-ui);
    font-weight: var(--bb-fw-medium);
}

.bb-info__flag--yes {
    color: var(--bb-success);
}

/* Не червоний: у палітрі немає кольору помилки, а рожевий
   бейдж знижки тут читався б як акція. Беремо приглушений
   відтінок того ж рожевого, що й на бейджі. */
.bb-info__flag--no {
    color: #B4436F;
}

.bb-info__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--bb-body);
}

.bb-info__list li {
    position: relative;
    padding-left: 18px;
}

.bb-info__list li::before {
    content: "";
    position: absolute;
    top: .6em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bb-line-button);
}


/* ── Кроки ────────────────────────────────────── */

.bb-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}

.bb-steps__item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
    border-top: 2px solid var(--bb-periwinkle);
}

/* Градієнт по кроках — від синього до мʼятного, як у макеті.
   Прописані вручну, бо це не токени палітри, а один декоративний
   перехід, який більше ніде не використовується. */
.bb-steps__item:nth-child(1) { border-top-color: #8E93E0; }
.bb-steps__item:nth-child(2) { border-top-color: #A88FD6; }
.bb-steps__item:nth-child(3) { border-top-color: #C79AD6; }
.bb-steps__item:nth-child(4) { border-top-color: #8FDCC4; }

.bb-steps__num {
    font-size: 13px;
    letter-spacing: var(--bb-ls-eyebrow);
    color: var(--bb-periwinkle);
}

.bb-steps__title {
    font-size: 16px;
    font-weight: var(--bb-fw-medium);
    color: var(--bb-ink);
}

.bb-steps__text {
    font-size: var(--bb-fs-ui);
    line-height: 1.55;
    color: var(--bb-body);
}


/* ── Часті питання ────────────────────────────── */

/* Проміжок 1px на кольоровому фоні дає розділювачі без рамок. */
.bb-faq {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-radius: var(--bb-radius-lg);
    background: var(--bb-line);
    overflow: hidden;
}

.bb-faq__item {
    background: var(--bb-surface);
}

.bb-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    font-size: 15.5px;
    font-weight: var(--bb-fw-medium);
    color: var(--bb-ink);
    cursor: pointer;
    list-style: none;
}

/* Стандартний трикутник <details> прибираємо — свій шеврон нижче. */
.bb-faq__q::-webkit-details-marker {
    display: none;
}

.bb-faq__chevron {
    flex: none;
    color: var(--bb-muted);
    transition: transform .2s;
}

.bb-faq__item[open] .bb-faq__chevron {
    transform: rotate(180deg);
}

.bb-faq__a {
    max-width: 800px;
    margin: 0;
    padding: 0 24px 20px;
    font-size: var(--bb-fs-ui);
    line-height: 1.6;
    color: var(--bb-body);
}


/* ── Рядки умов (5B) ──────────────────────────── */

/* Спільний .bb-rows має підпис у 100px — сюди не влазить
   «Хто платить за пересилку». */
.bb-rows--wide .bb-row__label {
    flex: 0 0 220px;
}


/* ── Блок «Залишилось питання?» ───────────────── */

.bb-info__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-top: 56px;
    padding: 36px 44px;
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-radius-lg);
    background: var(--bb-surface);
}

.bb-info__cta-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bb-info__cta-title {
    font-family: var(--bb-font-display);
    font-size: 26px;
    font-weight: var(--bb-fw-semibold);
    color: var(--bb-ink);
}

.bb-info__cta-sub {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--bb-secondary);
}

.bb-info__cta .bb-btn {
    flex: none;
}


/* ── Планшет ──────────────────────────────────── */

@media (max-width: 1023.98px) {

    .bb-info__cards--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bb-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}


/* ── Мобільна ─────────────────────────────────── */

@media (max-width: 767.98px) {

    .bb-info {
        padding-top: 20px;
        padding-bottom: var(--bb-section-m);
    }

    .bb-info__section {
        padding-top: var(--bb-section-m);
    }

    .bb-info__section--tight {
        padding-top: 28px;
    }

    .bb-info__title {
        font-size: var(--bb-fs-h1-m);
    }

    .bb-info__h2 {
        font-size: var(--bb-fs-h2-m);
    }

    .bb-info__cards--3,
    .bb-info__cards--2,
    .bb-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .bb-info__card {
        padding: 22px;
    }

    .bb-info__card--accent {
        padding: 21px;
    }

    .bb-faq__q {
        padding: 16px 18px;
        font-size: 15px;
    }

    .bb-faq__a {
        padding: 0 18px 16px;
    }

    /* Підпис над значенням: у 320px два стовпці не живуть. */
    .bb-rows--wide .bb-row {
        flex-direction: column;
        gap: 4px;
    }

    .bb-rows--wide .bb-row__label {
        flex: none;
    }

    .bb-info__cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
        margin-top: var(--bb-section-m);
        padding: 26px 22px;
    }

    .bb-info__cta .bb-btn {
        width: 100%;
    }
}