/* Информационные страницы витрины ЭПЛ X (/check-code/, /delivery/, /payment/): секции «код ЭПЛ»,
   «доставка» и «оплата», вынесенные с главной, и общий заголовок секции (подключается и на главной вместе с main.css). */

/* ---------- страница ---------- */
.eplx-container.eplx-info { display: flex; flex-direction: column; gap: var(--eplx-section-gap); padding-top: 40px; }
.eplx-info__crumbs { display: flex; flex-wrap: wrap; gap: 6px; color: var(--eplx-gray-2); font: 400 var(--eplx-caption) var(--eplx-font); }
.eplx-info__crumbs a:hover { color: var(--eplx-white); }
.eplx-info__crumbs b { color: var(--eplx-white); font-weight: 400; }

/* ---------- заголовок секции (главная + информационные страницы) ---------- */
.eplx-sec { scroll-margin-top: 20px; }
.eplx-sec-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.eplx-sec-head__label { opacity: .4; font: 400 var(--eplx-body-m) var(--eplx-font); }
.eplx-sec-head__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.eplx-sec-head__title { max-width: 760px; font: 400 var(--eplx-h4) var(--eplx-font); }
.eplx-sec-head__title b { font-weight: 600; }
.eplx-sec-head__link { flex: none; }
.eplx-sec-head__text { margin-top: 4px; opacity: .8; font: 400 var(--eplx-body-m) var(--eplx-font); }
/* ссылка справа от абзаца (код ЭПЛ) */
.eplx-sec-head__row--text .eplx-sec-head__text { max-width: 980px; }
.eplx-sec-head__row--text .eplx-sec-head__link { margin-top: 4px; }
@media (max-width: 767px) {
    .eplx-container.eplx-info { gap: 60px; padding-top: 24px; }
    .eplx-sec-head { gap: 8px; margin-bottom: 20px; }
    .eplx-sec-head__label { font: 400 var(--eplx-caption) var(--eplx-font); }
    .eplx-sec-head__row { flex-direction: column; gap: 8px; }
    .eplx-sec-head__title { font: 400 var(--eplx-body-s) var(--eplx-font); }
    .eplx-sec-head__text { margin-top: 0; font: 400 var(--eplx-body-xs) var(--eplx-font); }
    .eplx-sec-head__link { font: 400 var(--eplx-body-xs) var(--eplx-font); text-decoration: underline; }
    /* mobile, как в макете: метка, заголовок, абзац, ссылка */
    .eplx-sec-head__row { display: contents; }
    .eplx-sec-head__text { order: 2; }
    .eplx-sec-head__link { order: 3; align-self: flex-start; }
    .eplx-sec-head__row--text .eplx-sec-head__link { margin-top: 0; }
}

/* ---------- код ЭПЛ ---------- */
.eplx-code-cards { display: grid; grid-template-columns: 755fr 505fr; gap: 20px; margin-bottom: 20px; }
.eplx-code-card {
    position: relative;
    min-height: 180px;
    padding: 32px;
    border-radius: var(--eplx-radius);
    overflow: hidden;
    background: var(--eplx-card);
}
.eplx-code-card__text { position: relative; z-index: 1; max-width: 513px; display: flex; flex-direction: column; gap: 4px; }
.eplx-code-card__text b { font: 600 var(--eplx-body-m) var(--eplx-font); }
.eplx-code-card__text span { opacity: .8; font: 400 var(--eplx-body-s) var(--eplx-font); }
.eplx-code-card--wide .eplx-code-card__text { max-width: 513px; }
.eplx-code-card:not(.eplx-code-card--wide) .eplx-code-card__text { max-width: 315px; }
.eplx-code-card__img { position: absolute; width: 452px; max-width: none; left: 427px; top: -38px; }
.eplx-code-card:not(.eplx-code-card--wide) .eplx-code-card__img { width: 473px; left: 170px; top: -97px; }
/* специфичнее правила .eplx-code-card:not(.eplx-code-card--wide) .eplx-code-card__img выше */
.eplx-code-card .eplx-code-card__img.eplx-code-card__img--flower,
.eplx-code-card .eplx-code-card__img.eplx-code-card__img--studs { left: auto; right: 0; top: 0; width: auto; height: 180px; }
.eplx-code-card__img--flower { mix-blend-mode: screen; }
.eplx-code-card__img--studs { mix-blend-mode: plus-lighter; }
.eplx-code { display: grid; grid-template-columns: 484px 1fr; gap: 60px; align-items: center; }
.eplx-code__form { display: flex; flex-direction: column; gap: 8px; padding: 32px; border-radius: var(--eplx-radius); background: var(--eplx-card); }
.eplx-code__title { margin-bottom: 4px; font: 600 var(--eplx-body-m) var(--eplx-font); }
.eplx-code__error { color: var(--eplx-red); font: 400 var(--eplx-body-xs) var(--eplx-font); text-align: center; }
.eplx-code__error:empty { display: none; }
.eplx-code__promo-title { font: 400 var(--eplx-h4) var(--eplx-font); }
.eplx-code__promo-title b, .eplx-code__promo-text b { font-weight: 600; }
.eplx-code__promo-text { margin-top: 8px; opacity: .8; font: 400 var(--eplx-body-m) var(--eplx-font); }
@media (max-width: 1023px) {
    .eplx-code-cards { grid-template-columns: 1fr; gap: 12px; }
    .eplx-code { grid-template-columns: 1fr; gap: 20px; }
    .eplx-code__promo { order: -1; }
}
@media (max-width: 767px) {
    .eplx-code-card { min-height: 180px; padding: 24px; }
    .eplx-code-card__text { max-width: 60% !important; }
    .eplx-code-card__text b { font: 600 var(--eplx-body-s) var(--eplx-font); }
    .eplx-code-card__text span { font: 400 var(--eplx-body-xs) var(--eplx-font); }
    .eplx-code-card .eplx-code-card__img.eplx-code-card__img--flower,
    .eplx-code-card .eplx-code-card__img.eplx-code-card__img--studs { height: 100%; }
    .eplx-code__form { padding: 32px 24px; }
    .eplx-code__title { font: 600 var(--eplx-body-s) var(--eplx-font); }
    .eplx-code__promo { order: 0; text-align: center; }
    .eplx-code__promo-title { font: 400 var(--eplx-body-s) var(--eplx-font); }
    .eplx-code__promo-text { font: 400 var(--eplx-body-xs) var(--eplx-font); }
}

/* попап результата */
.eplx-popup__dialog.eplx-code-popup { max-width: 853px; padding: 40px; }
.eplx-code-res__top { display: grid; grid-template-columns: 294px 1fr; gap: 16px; }
.eplx-code-res__top.is-no-photo { grid-template-columns: 1fr; }
.eplx-code-res__photo { aspect-ratio: 294 / 294; background: #000; display: flex; align-items: center; justify-content: center; }
.eplx-code-res__photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.eplx-code-res__title { margin-bottom: 20px; font: 600 var(--eplx-h5) var(--eplx-font); }
.eplx-code-res__sub { margin-bottom: 12px; font: 600 var(--eplx-body-m) var(--eplx-font); }
.eplx-code-res__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 32px; }
@media (max-width: 767px) {
    .eplx-popup__dialog.eplx-code-popup { padding: 40px 16px 24px; }
    .eplx-code-res__top { grid-template-columns: 1fr; }
    .eplx-code-res__title { margin-bottom: 12px; font: 600 var(--eplx-body-m) var(--eplx-font); }
    .eplx-code-res__rows, .eplx-code-res__table { font: 400 var(--eplx-body-xs) var(--eplx-font); }
    .eplx-code-res__btns { grid-template-columns: 1fr; }
}

/* ---------- доставка ---------- */
.eplx-delivery { display: flex; flex-direction: column; gap: 20px; }
.eplx-delivery__row { display: grid; grid-template-columns: 484fr 776fr; gap: 20px; align-items: start; }
.eplx-delivery__head, .eplx-delivery__body { padding: 32px; border-radius: var(--eplx-radius); background: var(--eplx-card); }
.eplx-delivery__title { font: 400 var(--eplx-body-m) var(--eplx-font); }
.eplx-delivery__title b { font-weight: 600; }
.eplx-delivery__more { display: none; }
.eplx-delivery__body { display: flex; flex-direction: column; gap: 20px; font: 400 var(--eplx-body-s) var(--eplx-font); }
.eplx-delivery__body p { opacity: .8; }
.eplx-delivery__body p:not(:last-of-type) { padding-bottom: 20px; border-bottom: 1px solid var(--eplx-line); }
.eplx-delivery__track { font: 400 var(--eplx-body-s) var(--eplx-font); }
@media (max-width: 767px) {
    .eplx-delivery { gap: 12px; }
    .eplx-delivery__row { grid-template-columns: 1fr; gap: 0; border-radius: var(--eplx-radius); background: var(--eplx-card); }
    .eplx-delivery__head { padding: 32px 32px 24px; }
    .eplx-delivery__title { font: 400 var(--eplx-body-s) var(--eplx-font); }
    .eplx-delivery__more {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
        font: 400 var(--eplx-body-s) var(--eplx-font);
        text-decoration: underline;
    }
    .eplx-delivery__more .eplx-icon { transition: transform .2s; }
    .eplx-delivery__row.is-open .eplx-delivery__more .eplx-icon { transform: rotate(90deg); }
    .eplx-delivery__body { display: none; padding:  0 32px 32px; font: 400 var(--eplx-body-xs) var(--eplx-font); }
    .eplx-delivery__row.is-open .eplx-delivery__body { display: flex; }
}

/* ---------- оплата ---------- */
.eplx-pay { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.eplx-pay__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    padding: 0 12px;
    border-radius: var(--eplx-radius);
    background: var(--eplx-card);
    transition: background-color .2s;
}
.eplx-pay__item:hover { background: #1c1c1c; }
.eplx-pay__logo { max-width: 141px; max-height: 24px; }
.eplx-pay__label { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--eplx-body-s) var(--eplx-font); white-space: nowrap; }
.eplx-popup__dialog.eplx-pay-popup { max-width: 876px; padding: 40px 48px; }
.eplx-pay-popup .eplx-popup__title { text-align: left; }
.eplx-pay-popup__text { font: 400 var(--eplx-body-s) var(--eplx-font); }
.eplx-pay-popup__text .eplx-pay-popup__subtitle { margin: 32px 0 8px; font: 600 var(--eplx-body-m) var(--eplx-font); }
.eplx-pay-popup__text p + p { margin-top: 8px; }
.eplx-pay-popup__text ul { list-style: disc; padding-left: 22px; }
.eplx-pay-popup__link { margin-top: 40px; }
@media (max-width: 1023px) {
    .eplx-pay { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .eplx-pay { grid-template-columns: 1fr; gap: 8px; }
    .eplx-pay__item { height: 60px; }
    .eplx-popup__dialog.eplx-pay-popup { padding: 40px 16px 24px; }
    .eplx-pay-popup__text { font: 400 var(--eplx-body-xs) var(--eplx-font); }
    .eplx-pay-popup__text .eplx-pay-popup__subtitle { margin-top: 20px; font: 600 var(--eplx-body-s) var(--eplx-font); }
    .eplx-pay-popup__link { margin-top: 24px; }
}