/* ═══════════════════════════════════════════════════════════
   page-giftcard.css — /giftcard
   Полноэкранные «страницы»-экраны (паттерн kuchenland, дизайн наш):
   hero с вращающимся кольцом карт → конфигуратор → «Ваши карты»
   → баланс → о картах. Модалки только у входа/профиля.
   ═══════════════════════════════════════════════════════════ */

/* ─── Шрифты поздравления (self-hosted, cyrillic+latin; грузятся лениво при выборе) ───
   Серифные курсивы зарегистрированы как italic (текст письма курсивный — без синтеза),
   рукописные (Caveat/Marck/Bad Script) — normal, курсив им выключает JS. */
@font-face { font-family: 'GC Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url(/public/fonts/gc-lora-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'GC Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url(/public/fonts/gc-lora-lat.woff2) format('woff2'); }
@font-face { font-family: 'GC Cormorant'; font-style: italic; font-weight: 500; font-display: swap; src: url(/public/fonts/gc-cormorant-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'GC Cormorant'; font-style: italic; font-weight: 500; font-display: swap; src: url(/public/fonts/gc-cormorant-lat.woff2) format('woff2'); }
@font-face { font-family: 'GC Playfair'; font-style: italic; font-weight: 400; font-display: swap; src: url(/public/fonts/gc-playfair-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'GC Playfair'; font-style: italic; font-weight: 400; font-display: swap; src: url(/public/fonts/gc-playfair-lat.woff2) format('woff2'); }
@font-face { font-family: 'GC PT Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/public/fonts/gc-ptserif-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'GC PT Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/public/fonts/gc-ptserif-lat.woff2) format('woff2'); }
@font-face { font-family: 'GC Vollkorn'; font-style: italic; font-weight: 400; font-display: swap; src: url(/public/fonts/gc-vollkorn-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'GC Vollkorn'; font-style: italic; font-weight: 400; font-display: swap; src: url(/public/fonts/gc-vollkorn-lat.woff2) format('woff2'); }
@font-face { font-family: 'GC Alegreya'; font-style: italic; font-weight: 400; font-display: swap; src: url(/public/fonts/gc-alegreya-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'GC Alegreya'; font-style: italic; font-weight: 400; font-display: swap; src: url(/public/fonts/gc-alegreya-lat.woff2) format('woff2'); }
@font-face { font-family: 'GC Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url(/public/fonts/gc-caveat-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'GC Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url(/public/fonts/gc-caveat-lat.woff2) format('woff2'); }
@font-face { font-family: 'GC Marck Script'; font-style: normal; font-weight: 400; font-display: swap; src: url(/public/fonts/gc-marck-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'GC Marck Script'; font-style: normal; font-weight: 400; font-display: swap; src: url(/public/fonts/gc-marck-lat.woff2) format('woff2'); }
@font-face { font-family: 'GC Bad Script'; font-style: normal; font-weight: 400; font-display: swap; src: url(/public/fonts/gc-badscript-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'GC Bad Script'; font-style: normal; font-weight: 400; font-display: swap; src: url(/public/fonts/gc-badscript-lat.woff2) format('woff2'); }

/* Oranienbaum (self-hosted) — надписи на карте. cyrillic + latin (latin держит цифры + ₽). */
@font-face {
    font-family: 'Oranienbaum'; font-style: normal; font-weight: 400; font-display: swap;
    src: url(/fonts/oranienbaum-cyrillic.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Oranienbaum'; font-style: normal; font-weight: 400; font-display: swap;
    src: url(/fonts/oranienbaum-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Отступ под фикс-шапку: .topmenu ~73px, компактная ≤950px ~45px (брейкпоинт topmenu.css = 950) */
body.giftcard-page {
    margin: 0;
    padding: 0;
    padding-top: 78px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text-primary, #222);
    background: var(--page-bg, #fff);
    -webkit-font-smoothing: antialiased;
}
@media (max-width: 950px) { body.giftcard-page { padding-top: 48px; } }

.giftcard-wrap {
    max-width: min(1200px, 92vw);
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}
@media (max-width: 1024px) {
    .giftcard-wrap { max-width: 100%; }
}

.giftcard-main { background: var(--page-bg, #fff); }

/* ─── Breadcrumb (поверх hero, тонкий) ─────────────────────── */
.giftcard-breadcrumb {
    padding: 14px 0 8px;
    font-size: 0.82rem;
    color: var(--text-muted, #999);
    position: relative;
    z-index: 5;
}
.giftcard-breadcrumb a { color: var(--text-muted, #767676); text-decoration: none; transition: color .2s; }
.giftcard-breadcrumb a:hover { color: var(--text-primary, #222); }
.giftcard-breadcrumb__sep { margin: 0 6px; color: var(--text-muted, #ccc); }
.giftcard-breadcrumb__current { color: var(--text-secondary, #555); }

/* ─── Кнопки ───────────────────────────────────────────────── */
.giftcard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    padding: 16px 32px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, transform .1s;
    border: 1px solid transparent;
    box-sizing: border-box;
}
.giftcard-btn:active { transform: translateY(1px); }

.giftcard-btn--primary {
    background: #2b2b2b;
    color: #fff;
    border-color: #2b2b2b;
}
.giftcard-btn--primary:hover { background: #000; border-color: #000; }

.giftcard-btn--secondary {
    background: var(--surface-bg, #fff);
    color: var(--text-primary, #2b2b2b);
    border-color: var(--border-default, #d9d9d9);
}
.giftcard-btn--secondary:hover { border-color: var(--text-primary, #2b2b2b); }

/* ═══ Каркас экранов ══════════════════════════════════════════ */
.gc-screen[hidden], .gch-ring[hidden], .gcw-overlay[hidden], .gcw-sched[hidden],
.giftcard-balance__result[hidden], .giftcard-btn[hidden], .gcf-cancel[hidden],
.gcc-agree[hidden], .gcc-actions[hidden], .gcc-addmore[hidden] { display: none !important; }

.gc-screen {
    min-height: calc(100vh - 78px);
    min-height: calc(100svh - 78px); /* iOS/Android: малый вьюпорт (тулбары видимы), фолбэк выше */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
@media (max-width: 950px) {
    .gc-screen { min-height: calc(100vh - 48px); min-height: calc(100svh - 48px); }
}

/* появление экрана после «улёта» карт */
.gc-screen--enter { animation: gcs-enter .5s ease both; }
@keyframes gcs-enter {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

/* шапка внутреннего экрана: круглая «назад» + заголовок по центру */
.gcs-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 0 10px;
    min-height: 48px;
}
.gcs-title {
    font-size: 2rem;
    font-weight: 400;
    color: var(--text-primary, #222);
    margin: 0;
    letter-spacing: 0.3px;
    text-align: center;
    /* резерв под absolute-кнопку «назад» (48px) на ВСЕХ ширинах: длинный
       центрированный заголовок не наезжает на кнопку слева */
    padding: 0 56px;
    max-width: 100%;
    box-sizing: border-box;
}
@media (max-width: 900px) {
    .gcs-title { font-size: 1.35rem; }
}
.gcs-back {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px; border-radius: 999px;
    border: 1px solid var(--border-default, #d9d9d9);
    background: var(--surface-bg, #fff);
    font-size: 22px; line-height: 1; color: var(--text-secondary, #555); cursor: pointer;
    transition: border-color .2s, color .2s;
}
.gcs-back:hover { border-color: var(--brand-action, #2b2b2b); color: var(--text-primary, #222); }
@media (max-width: 640px) { .gcs-back { width: 40px; height: 40px; font-size: 19px; } }

/* ═══ Экран 1: HERO — кольцо летающих карт ════════════════════ */
.gch {
    position: relative;
    overflow: hidden;
    justify-content: flex-start;
    /* геометрия кольца (пропорции reference: mobile 99/363, tablet 124/454, desktop 216/784) */
    --gch-card: clamp(118px, 16vw, 220px);   /* ширина карты в кольце */
    --gch-r: clamp(420px, 58vw, 790px);      /* радиус кольца */
    --gch-apex: 56%;                          /* вершина дуги, % высоты hero */
    --gch-speed: 120s;                        /* полный оборот (как у референса) */
}
@media (max-width: 640px) {
    .gch { --gch-card: 102px; --gch-r: 368px; --gch-apex: 62%; }
}
/* короткие вьюпорты (ландшафт-телефоны, низкие ноутбуки): компактное кольцо + дуга ниже,
   чтобы не лезла под CTA (ландшафт-телефон широкий, max-width-гейт не срабатывает) */
@media (max-height: 640px) {
    .gch { --gch-apex: 68%; --gch-card: 96px; --gch-r: 340px; }
}

/* центр-блок не должен перехватывать тапы по картам в прозрачных зонах по бокам */
.gch-center { pointer-events: none; }
.gch-center .gch-cta { pointer-events: auto; }

/* центральный блок: заголовок + CTA */
.gch-center {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    text-align: center;
    padding: 11vh 16px 0;
}
@media (max-height: 700px) { .gch-center { padding-top: 7vh; } }
.gch-title {
    font-size: clamp(2.2rem, 5.4vw, 3.9rem);
    font-weight: 400;
    color: var(--text-primary, #222);
    margin: 0;
    letter-spacing: 0.3px;
}
.gch-sub {
    margin: -12px 0 0;
    font-size: 0.98rem;
    color: var(--text-secondary, #8c8372);
    max-width: 480px;
    line-height: 1.55;
}
.gch-cta { min-width: 224px; }

/* ссылки внизу hero */
.gch-links {
    position: absolute;
    left: 0; right: 0;
    bottom: 4.5vh;
    bottom: calc(4.5svh + env(safe-area-inset-bottom, 0px)); /* не прятаться под тулбар iOS Safari */
    z-index: 3;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 30px;
    padding: 0 16px;
}
.gch-link {
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.93rem;
    color: var(--text-primary, #222);
    padding: 10px 2px;
    text-decoration: underline dotted;
    text-underline-offset: 5px;
    text-decoration-color: var(--text-muted, #bbb);
    transition: text-decoration-color .2s, color .2s;
}
.gch-link:hover { text-decoration-color: #E30613; color: var(--text-primary, #000); }

/* кольцо: элемент-«слот» размером с карту, центр кольца ниже вершины дуги на радиус */
.gch-ring-zone {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.gch-ring {
    position: absolute;
    left: 50%;
    top: calc(var(--gch-apex) + var(--gch-r));
    width: var(--gch-card);
    height: calc(var(--gch-card) * 0.556); /* явная высота: старые WebView без aspect-ratio */
    margin-left: calc(var(--gch-card) / -2);
    transform: translateY(-50%);
    animation: gch-spin var(--gch-speed) linear infinite;
    will-change: transform;
}
@keyframes gch-spin {
    from { transform: translateY(-50%) rotate(0deg); }
    to   { transform: translateY(-50%) rotate(360deg); }
}
.gch-card {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: all;
    transform: rotate(var(--a)) translateY(calc(var(--gch-r) * -1));
    transition: transform .25s ease, opacity .6s ease;
    /* will-change только на .gch-ring: 18 промоутнутых слоёв = зря жжёт GPU на мобиле */
}
.gch-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7% / 12%;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
    background: #eee;
}
@media (hover: hover) {
    .gch-card:hover { transform: rotate(var(--a)) translateY(calc(var(--gch-r) * -1)) scale(1.09); z-index: 2; }
}

/* улёт карт при переходе на внутренний экран */
.gch.is-leaving .gch-card {
    opacity: 0;
    transform: rotate(var(--a)) translateY(calc(var(--gch-r) * -1 - 130vh));
    transition: transform .75s ease, opacity .75s ease;
}
.gch.is-leaving .gch-center {
    opacity: 0;
    transform: translateY(-60px);
    transition: transform .6s ease, opacity .6s ease;
}
.gch.is-leaving .gch-links {
    opacity: 0;
    transform: translateY(60px);
    transition: transform .6s ease, opacity .6s ease;
}
/* возврат на hero */
.gch--enter .gch-center, .gch--enter .gch-links { animation: gcs-enter .5s ease both; }
/* Вращение кольца НЕ отключаем под prefers-reduced-motion: карты должны ехать всегда,
   как у референса (Windows с урезанными анимациями иначе показывал статичное кольцо). */

/* ═══ Экран 2: конфигуратор карты ═════════════════════════════ */
.gcf {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(300px, 460px) minmax(0, 540px);
    justify-content: center;
    gap: clamp(28px, 6vw, 96px);
    align-items: start;
    padding: 14px 0 72px;
}
/* десктоп: форма занимает правую колонку на 2 ряда, письмо-превью — под дизайнами той же ширины */
.gcf-preview { grid-column: 1; grid-row: 1; }
.gcf-form    { grid-column: 2; grid-row: 1 / span 2; }
.gcm         { grid-column: 1; grid-row: 2; }
@media (max-width: 900px) {
    .gcf { grid-template-columns: 1fr; gap: 26px; padding-bottom: 48px; }
    .gcf-preview, .gcf-form, .gcm { grid-column: 1; grid-row: auto; }
}

/* НЕ sticky: в левой колонке под дизайнами теперь письмо-превью — липкая карта
   при скролле наезжала на него. Колонка скроллится обычным потоком. */
@media (max-width: 900px) { .gcf-preview { width: 100%; max-width: 420px; margin: 0 auto; } }

/* превью карты — утверждённый дизайн (фото 1000×556, сумма поверх) */
.gcw-card {
    position: relative; aspect-ratio: 1000 / 556; border-radius: 14px; overflow: hidden; color: #fff;
    background: #222; box-shadow: 0 14px 30px rgba(0,0,0,.22);
}
.gcw-card::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: var(--gc-photo, none) center / cover no-repeat;
    filter: blur(16px) brightness(.82); transform: scale(1.15);
}
.gcw-card::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: var(--gc-photo, none) center / cover no-repeat;
}
.gcw-card__amount {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    color: #fff; font-family: Times, Georgia, serif; font-weight: 400;
    font-size: 1.35rem; line-height: 1.1; letter-spacing: .03em;
    text-shadow: 0 1px 6px rgba(0,0,0,.55);
}
.gcw-card.gcw-card--amt-right .gcw-card__amount { right: 7%; text-align: right; }
.gcw-card.gcw-card--amt-left  .gcw-card__amount { left: 7%;  text-align: left; }

/* лента дизайнов под превью */
.gcw-designs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.gcw-design {
    aspect-ratio: 1063 / 591; border-radius: 10px; cursor: pointer; border: 2px solid transparent;
    background-size: cover; background-position: center; position: relative; overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.gcw-design.is-active { border-color: #E30613; box-shadow: 0 0 0 2px rgba(227,6,19,.25); }

/* форма справа */
.gcf-form { min-width: 0; }
.gcf-block { margin: 0 0 34px; }
.gcw-h { font-size: 1.35rem; font-weight: 400; margin: 0 0 10px; color: var(--text-primary, #222); }
.gcw-sub { color: var(--text-secondary, #8c8372); font-size: .9rem; margin: 0 0 16px; }

.gcw-amount-field { position: relative; max-width: 320px; }
.gcw-amount-field input {
    width: 100%; height: 52px; padding: 0 36px 0 18px; border: 1px solid var(--border-default, #d9d9d9); border-radius: 12px;
    font-size: 1.1rem; outline: none; box-sizing: border-box; font-family: inherit;
    background: var(--surface-bg, #fff); color: var(--text-primary, #222);
}
.gcw-amount-field input:focus { border-color: var(--brand-action, #2b2b2b); }
.gcw-amount-cur { position: absolute; right: 16px; top: 14px; color: var(--text-muted, #999); }
.gcw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.gcw-chip {
    padding: 11px 16px; border-radius: 999px; border: 1px solid var(--border-default, #d9d9d9); background: var(--surface-bg, #fff);
    cursor: pointer; font-size: .9rem; transition: all .15s; color: var(--text-primary, #222);
}
.gcw-chip:hover { border-color: var(--brand-action, #2b2b2b); }
.gcw-chip.is-active { background: #2b2b2b; color: #fff; border-color: #2b2b2b; }

.gcw-label { display: block; margin: 0 0 14px; font-size: .86rem; color: var(--text-secondary, #555); }
.gcw-label input, .gcw-label textarea, .gcw-label select, .gcw-sched input, .gcw-sched select,
.gcw-msg-field textarea {
    display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid var(--border-default, #d9d9d9);
    border-radius: 10px; font-size: .95rem; font-family: inherit; outline: none; box-sizing: border-box;
    background: var(--surface-bg, #fff); color: var(--text-primary, #222);
}
.gcw-label select { cursor: pointer; }
.gcw-label[hidden] { display: none !important; }
/* Поле поздравления вынесено из label (между ним и полем — ссылка генератора) */
.gcw-msg-caption { margin-bottom: 2px; }
.gcw-msg-field { margin: 0 0 14px; }
.gcw-msg-field textarea { margin-top: 0; }
.gcw-msg-field textarea:focus { border-color: var(--brand-action, #2b2b2b); }
.gcw-label input:focus, .gcw-label textarea:focus { border-color: var(--brand-action, #2b2b2b); }
.gcw-counter { display: block; text-align: right; font-size: .76rem; color: var(--text-muted, #aaa); margin-top: 4px; }
.gcw-hint { display: block; font-size: .78rem; color: var(--text-muted, #999); margin-top: 4px; }
.gcw-req { color: #E30613; }
.gcw-opt { color: var(--text-muted, #999); font-size: .8em; font-weight: 400; }

/* ─── Генератор поздравлений (между подписью поля и самим полем) ─── */
.gcg { margin: 0 0 8px; }
.gcg-toggle {
    border: 0; background: none; padding: 6px 0; cursor: pointer;
    font-family: inherit; font-size: .88rem; color: var(--text-primary, #222);
    text-decoration: underline dotted; text-underline-offset: 4px;
    text-decoration-color: var(--text-muted, #bbb);
    transition: text-decoration-color .2s;
}
.gcg-toggle:hover { text-decoration-color: #E30613; }
.gcg-toggle.is-open { text-decoration: none; color: var(--text-secondary, #777); }
.gcg-toggle__icon { margin-right: 4px; }
.gcg-panel {
    margin-top: 10px; padding: 16px;
    border: 1px solid var(--border-default, #eee); border-radius: 12px;
    background: var(--surface-bg, #faf7f1);
}
.gcg-panel[hidden] { display: none !important; }
.gcg-row { display: flex; gap: 12px; flex-wrap: wrap; }
.gcg-field { flex: 1 1 180px; margin-bottom: 10px; }
.gcg-field select {
    display: block; width: 100%; margin-top: 6px; padding: 11px 12px;
    border: 1px solid var(--border-default, #d9d9d9); border-radius: 10px;
    font-size: .93rem; font-family: inherit; outline: none; box-sizing: border-box;
    background: var(--surface-bg, #fff); color: var(--text-primary, #222); cursor: pointer;
}
.gcg-suggest { min-width: 0; padding: 12px 24px; font-size: .78rem; }

.gcw-radio { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 6px; padding: 7px 0; font-size: .9rem; color: var(--text-secondary, #333); cursor: pointer; }
.gcw-radio input { margin-top: 3px; }
.gcw-radio small { color: var(--text-muted, #999); }
.gcw-sched { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 0 26px; }
.gcw-sched input, .gcw-sched select { width: auto; margin-top: 0; }

.gcw-err { color: #c0392b; font-size: .84rem; margin-top: 10px; }
.gcw-loading { color: var(--text-muted, #999); font-size: .9rem; padding: 20px; }

.gcf-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 640px) { .gcf-actions .giftcard-btn { flex: 1 1 100%; } }

/* ─── Превью письма получателю ─────────────────────────────── */
.gcm { margin-top: 4px; min-width: 0; scroll-margin-top: 90px; }
.gcm-caption {
    font-size: .8rem; color: var(--text-muted, #999);
    text-align: center; margin: 0 0 10px;
    text-transform: uppercase; letter-spacing: .08em;
}
.gcm-mail {
    border: 1px solid var(--border-default, #e6e0d4);
    border-radius: 14px; overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}
.gcm-mail__head {
    background: var(--surface-bg, #faf7f1);
    border-bottom: 1px solid var(--border-default, #eee);
    padding: 12px 18px;
}
.gcm-mail__meta { font-size: .78rem; color: #444; line-height: 1.5; overflow-wrap: anywhere; }
.gcm-muted { color: var(--text-muted, #999); }
.gcm-mail__subject { font-size: .92rem; font-weight: 600; color: #1E1E1E; margin-top: 6px; }
/* тело письма — поздравительный стиль (Georgia, центр, воздух), НЕ банковское уведомление */
.gcm-mail__body { padding: 26px 20px 22px; font-family: Georgia, 'Times New Roman', serif; color: #222; text-align: center; }
.gcm-logo { font-size: 1.25rem; letter-spacing: 3px; color: #8c8372; margin-bottom: 4px; }
.gcm-card { margin: 16px 0 20px; box-shadow: 0 8px 22px rgba(0, 0, 0, .16); }
.gcm-quote { padding: 0 6px; margin: 0 0 10px; }
.gcm-quote[hidden] { display: none !important; }
.gcm-quote__text {
    font-style: italic; font-size: .98rem; line-height: 1.7; color: #3d3a34;
    margin: 0; overflow-wrap: break-word;
}
/* подпись отправителя — в самом конце; курсив и кегль РОВНО как у поздравления */
.gcm-sign {
    font-style: italic; font-size: .98rem; line-height: 1.7; color: #3d3a34;
    margin: 0 0 20px; overflow-wrap: break-word;
}
.gcm-sign[hidden] { display: none !important; }
.gcm-panel {
    background: #faf7f1; border-radius: 14px;
    padding: 16px 18px; margin: 0 0 20px;
}
.gcm-label { font-size: .66rem; color: #9a927f; text-transform: uppercase; letter-spacing: 2px; font-family: Arial, Helvetica, sans-serif; }
.gcm-code { font-size: 1.2rem; letter-spacing: 3px; color: #1e1e1e; margin: 4px 0 2px; }
.gcm-code-note { font-size: .72rem; color: var(--text-muted, #aaa); font-style: italic; margin-bottom: 12px; }
.gcm-balance { font-size: 1.35rem; color: #E30613; margin-top: 4px; }
.gcm-cta { margin: 0 0 12px; }
.gcm-cta__btn { pointer-events: none; min-width: 0; padding: 13px 34px; font-size: .74rem; }
.gcm-link { color: #8c8372; font-size: .84rem; text-decoration: underline; text-underline-offset: 3px; font-family: Arial, Helvetica, sans-serif; }
.gcm-foot { color: #b5ad9c; font-size: .76rem; margin: 14px 0 0; font-family: Arial, Helvetica, sans-serif; }

/* мобайл: письмо скрыто, раскрывается кнопкой (появляется при заполненных полях) */
.gcm-toggle { margin-bottom: 14px; }
@media (min-width: 901px) { .gcm-toggle { display: none !important; } }
@media (max-width: 900px) {
    .gcm:not(.is-open) { display: none; }
}

/* ═══ Экран 3: «Ваши карты» ═══════════════════════════════════ */
.gcc-wrap { max-width: 680px; margin: 0 auto; width: 100%; flex: 1; padding-bottom: 64px; box-sizing: border-box; }
.gcc-list { margin: 8px 0 4px; }
.gcc-item {
    display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-default, #eee);
}
.gcc-item__thumb { width: 72px; height: 44px; border-radius: 8px; background: #E30613 center/cover; flex: 0 0 auto; }
.gcc-item__info { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: .9rem; color: var(--text-primary, #222); }
.gcc-item__info small { color: var(--text-muted, #999); display: block; }
.gcc-item__amount { font-weight: 700; color: var(--text-primary, #222); white-space: nowrap; }
.gcc-item__btns { display: flex; gap: 6px; }
.gcc-item__btns button { border: 0; background: none; cursor: pointer; font-size: 18px; color: var(--text-muted, #999); padding: 4px; }
.gcc-item__btns button:hover { color: #E30613; }
.gcc-addmore {
    display: block; width: 100%; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 1.02rem; color: var(--text-primary, #222);
    padding: 16px 0; text-align: center;
    text-decoration: underline dotted; text-underline-offset: 5px; text-decoration-color: var(--text-muted, #bbb);
    transition: text-decoration-color .2s;
}
.gcc-addmore:hover { text-decoration-color: #E30613; }
.gcc-empty { text-align: center; color: var(--text-muted, #999); padding: 28px 0 8px; font-size: .95rem; }
.gcc-empty-cta { text-align: center; padding: 14px 0 6px; }
.gcc-agree { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--text-secondary, #666); margin: 10px 0 18px; }
.gcc-agree a { color: var(--brand-action, #0a66c2); }
.gcc-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gcc-actions .giftcard-btn { flex: 1 1 240px; min-width: 0; max-width: 340px; }
.gcc-total { text-align: right; font-size: 1rem; margin: 14px 0 4px; color: var(--text-primary, #222); }
.gcc-total b { font-size: 1.3rem; color: var(--text-primary, #222); }

/* ═══ Экран 4: баланс ═════════════════════════════════════════ */
.giftcard-balance { padding: 40px 0 24px; flex: 1; }
@media (max-width: 640px) { .giftcard-balance { padding: 24px 0 16px; } }
.giftcard-balance__lead {
    text-align: center; font-size: .95rem; color: var(--text-secondary, #8c8372);
    max-width: 460px; margin: 0 auto 30px; line-height: 1.6;
}
.giftcard-balance__form {
    display: flex; justify-content: center; align-items: center;
    gap: 12px; flex-wrap: wrap; max-width: 720px; margin: 0 auto;
}
@media (max-width: 640px) {
    .giftcard-balance__form { flex-direction: column; gap: 10px; max-width: 340px; }
}
.giftcard-balance__input {
    flex: 0 1 320px; height: 54px; padding: 0 22px;
    border: 1px solid var(--border-default, #d9d9d9); border-radius: 999px;
    font-family: inherit; font-size: 0.95rem;
    color: var(--text-primary, #222); background: var(--surface-bg, #fff);
    outline: none; transition: border-color .2s; box-sizing: border-box;
}
.giftcard-balance__input::placeholder { color: var(--text-muted, #9a9a9a); }
.giftcard-balance__input:focus { border-color: var(--brand-action, #2b2b2b); }
@media (max-width: 640px) { .giftcard-balance__input { width: 100%; flex: 0 0 auto; } }
.giftcard-balance__btn { height: 54px; min-width: 200px; }
@media (max-width: 640px) { .giftcard-balance__btn { width: 100%; } }
.giftcard-balance__result {
    max-width: 420px; margin: 22px auto 0; padding: 18px 22px;
    border: 1px solid var(--border-default, #e6e0d4); border-radius: 12px;
    text-align: center; font-size: 1rem;
    color: var(--text-primary, #222); background: var(--surface-bg, #faf7f1);
}
.giftcard-balance__result.is-error { background: #fff4f4; border-color: #f0c9c9; color: #a33; }
.giftcard-balance__result b { font-size: 1.4rem; color: #E30613; }

/* ═══ Экран 5: «Как работают подарочные карты» (FAQ) ══════════ */
.giftcard-about { padding: 14px 0 40px; flex: 1; }
.gcq {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: clamp(24px, 5vw, 72px);
    align-items: start;
    padding-bottom: 40px;
}
@media (max-width: 900px) { .gcq { grid-template-columns: 1fr; } }

.gcq-group { font-size: 1.25rem; font-weight: 400; margin: 34px 0 6px; color: var(--text-primary, #222); }
.gcq-main > .gcq-group:first-child { margin-top: 4px; }

.gcq-item { border-bottom: 1px solid var(--border-default, #eee); }
.gcq-item summary {
    list-style: none; cursor: pointer; position: relative;
    padding: 16px 40px 16px 0;
    font-size: .98rem; color: var(--text-primary, #222);
    transition: color .15s;
}
.gcq-item summary::-webkit-details-marker { display: none; }
.gcq-item summary::after {
    content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    font-size: 22px; font-weight: 300; color: var(--text-muted, #999);
}
.gcq-item[open] summary::after { content: '\2212'; color: #E30613; }
.gcq-item summary:hover { color: #000; color: var(--text-primary, #000); }
.gcq-item p { margin: 0 0 18px; font-size: .92rem; line-height: 1.65; color: var(--text-secondary, #555); max-width: 640px; }
.gcq-link {
    border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
    color: var(--brand-action, #0a66c2); text-decoration: underline; text-underline-offset: 3px;
}

.gcq-side { position: sticky; top: 96px; }
@media (max-width: 950px) { .gcq-side { top: 62px; } }
@media (max-width: 900px) { .gcq-side { position: static; } }
.gcq-cta {
    border: 1px solid var(--border-default, #eee); border-radius: 16px;
    padding: 24px 22px; text-align: center; background: var(--surface-bg, #faf7f1);
}
.gcq-cta__title { font-size: 1.05rem; color: var(--text-primary, #222); margin-bottom: 8px; }
.gcq-cta__text { font-size: .85rem; color: var(--text-secondary, #777); line-height: 1.55; margin: 0 0 16px; }
.gcq-cta .giftcard-btn { width: 100%; min-width: 0; }

.giftcard-about__tenant {
    text-align: center; font-size: .95rem; color: var(--text-secondary, #555);
    max-width: 520px; margin: 8px auto 0; line-height: 1.65;
}

/* ═══ Модалки входа/профиля (единственные оверлеи) ════════════ */
.gcw-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(20,18,14,.55); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.gcw-modal {
    position: relative; background: var(--surface-bg, #fff); border-radius: 18px;
    width: min(440px, 100%); max-height: 92vh; overflow: auto;
    padding: 28px 28px 22px; box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.gcw-close {
    position: absolute; top: 12px; right: 14px; border: 0; background: none;
    font-size: 28px; line-height: 1; color: var(--text-muted, #999); cursor: pointer;
}
.gcw-close:hover { color: var(--text-primary, #222); }

/* ═══ Мобильные фиксы (аудит) ═════════════════════════════════ */
/* iOS Safari авто-зумит при фокусе на контролах <16px — на мобиле все контролы формы 16px */
@media (max-width: 950px) {
    .gcw-label input, .gcw-label textarea, .gcw-label select,
    .gcw-sched input, .gcw-sched select,
    .gcg-field select, .gcw-msg-field textarea,
    .giftcard-balance__input { font-size: 16px; }
}
/* Каталожная нижняя панель (Поиск/Каталог/Корзина) не рендерится поверх полноэкранных
   экранов подарочных карт — перекрывала ссылки hero и ломала 100vh-математику */
body.giftcard-page .idx-mobilenav { display: none !important; }
/* Старые Android WebView без aspect-ratio: не даём карте/миниатюрам схлопнуться */
@supports not (aspect-ratio: 1 / 1) {
    .gcw-card { height: 230px; }
    .gcw-design { height: 62px; }
}

/* ─── Тёмная тема: error-плашка баланса подарочной карты ─── */
:root[data-theme="dark"] .giftcard-balance__result.is-error { background: #2c1818; border-color: #5a2e2e; color: #e6a3a3; }