/* =========================================================
   asatoma-par.ru · cert-v2.css
   Одноэкранный конструктор подарочного сертификата.
   Всё под .cv2-section (свои переменные, без коллизий с темой).
   Грузится неблокирующе (media=print→all). Эталон — cert-v2-prototype.html
   ========================================================= */
.cv2-section{
  --cv2-sapphire:#1E4A8C; --cv2-sapphire-deep:#163866;
  --cv2-pearl:#EFE7DA; --cv2-brass:#9B7C4A; --cv2-travertine:#D4B896;
  --cv2-anthracite:#2B2620; --cv2-ink:#3F362C; --cv2-ink-mute:#5C5248; --cv2-ink-soft:#5D574E; /* затемнены: контраст 4.5:1 на cream */
  --cv2-surface:#F5EFE3; --cv2-hair:rgba(43,38,32,.12); --cv2-hair-strong:rgba(43,38,32,.22);
  --cv2-fd:'Cormorant Garamond',Georgia,serif; --cv2-fb:'Manrope',-apple-system,system-ui,sans-serif;
}
.cv2-wrap{max-width:var(--container-default,1200px);}
.cv2-eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#7A6136;font-weight:600}
.cv2-h1{font-family:var(--cv2-fd);font-weight:400;font-size:clamp(34px,5vw,52px);line-height:1.1;margin:10px 0 6px;color:var(--cv2-anthracite)}
.cv2-h1 em{font-style:italic;color:var(--cv2-sapphire)}
.cv2-sub{color:var(--cv2-ink-mute);max-width:560px;margin-bottom:40px;font-family:var(--cv2-fb)}
.cv2-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}

/* ── ПРЕВЬЮ ── */
.cv2-preview-sticky{position:sticky;top:96px;perspective:1100px}
.cv2-cert{aspect-ratio:3/2;background:linear-gradient(160deg,#FBF7EE 0%,#F2EADA 60%,#ECE1CC 100%);border:1px solid var(--cv2-hair-strong);border-radius:6px;box-shadow:0 30px 60px -20px rgba(43,38,32,.25),0 4px 14px rgba(43,38,32,.08);padding:7% 8%;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;transition:background .45s ease,color .45s ease}
.cv2-cert::after{content:"";position:absolute;inset:10px;border:1px solid rgba(155,124,74,.3);border-radius:3px;pointer-events:none;transition:border-color .45s}
/* ── 3D-tilt превью: карточка наклоняется за курсором (cert-v3.js пишет
   --cv2-rx/--cv2-ry/--cv2-gx/--cv2-gy), глянцевый спот следует за мышкой.
   ::after занят латунной рамкой → блик живёт на ::before (поверх контента,
   pointer-events:none). Возврат в покой — плавный transform .55s; во время
   движения transform ведёт rAF-lerp без transition (класс .is-tilting).
   Тач и reduce-motion отсеивает скрипт + медиазапрос ниже. */
.cv2-cert{transform:rotateX(var(--cv2-ry,0deg)) rotateY(var(--cv2-rx,0deg));transition:background .45s ease,color .45s ease,transform .95s cubic-bezier(.16,.84,.3,1),box-shadow .95s ease}
.cv2-cert.is-tilting{transition:background .45s ease,color .45s ease,box-shadow .95s ease;will-change:transform;
  box-shadow:0 42px 84px -22px rgba(43,38,32,.34),0 6px 18px rgba(43,38,32,.10)}
.cv2-cert::before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(46% 62% at var(--cv2-gx,50%) var(--cv2-gy,50%),rgba(255,255,255,.26),rgba(255,255,255,.08) 46%,rgba(255,255,255,0) 72%),
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 24%);
  opacity:0;transition:opacity .7s ease}
.cv2-cert.is-tilting::before{opacity:1}
@media (prefers-reduced-motion:reduce){
  .cv2-cert{transform:none !important}
  .cv2-cert::before{display:none}
}
/* 6 обложек-плейсхолдеров (заменятся изображениями из админки) */
.cv2-c2{background:linear-gradient(155deg,#234F92 0%,#1E4A8C 45%,#122F5C 100%)}
.cv2-c3{background:linear-gradient(170deg,#E8F0F6 0%,#D9E6EF 50%,#C2D6E5 100%),radial-gradient(ellipse at 70% 20%,rgba(255,255,255,.8),transparent 60%)}
.cv2-c4{background:linear-gradient(150deg,#E9D9BE 0%,#D4B896 55%,#C2A47E 100%)}
.cv2-c5{background:linear-gradient(160deg,#3A332B 0%,#2B2620 60%,#201C17 100%)}
.cv2-c6{background:radial-gradient(circle at 80% 15%,rgba(212,184,150,.35),transparent 45%),radial-gradient(circle at 15% 80%,rgba(155,124,74,.25),transparent 40%),linear-gradient(155deg,#1C3F78 0%,#163866 55%,#0F2548 100%)}
.cv2-cert.is-dark .cv2-cert-label{color:var(--cv2-travertine)}
.cv2-cert.is-dark .cv2-cert-amount{color:var(--cv2-pearl)}
.cv2-cert.is-dark .cv2-cert-amount.hidden-amount{color:var(--cv2-travertine)}
.cv2-cert.is-dark .cv2-cert-sign{color:rgba(239,231,218,.92)}
.cv2-cert.is-dark .cv2-cert-from{color:rgba(239,231,218,.6)}
.cv2-cert.is-dark .cv2-cert-foot{color:rgba(239,231,218,.65)}
.cv2-cert.is-dark .cv2-cert-brand{color:var(--cv2-pearl)}
.cv2-cert.is-dark::after{border-color:rgba(212,184,150,.4)}
.cv2-cert.is-dark .cv2-cert-logo{filter:brightness(0) invert(1) opacity(.95)}
.cv2-cert-logo{height:20px;width:auto;display:block}
.cv2-cert-head{display:flex;justify-content:space-between;align-items:flex-start}
.cv2-cert-label{font-size:9px;letter-spacing:.24em;color:var(--cv2-brass);text-transform:uppercase;margin-top:8px}
.cv2-cert-mid{text-align:left}
.cv2-cert-amount{font-family:var(--cv2-fd);font-size:clamp(28px,4.5vw,46px);color:var(--cv2-sapphire);line-height:1}
.cv2-cert-amount.hidden-amount{font-size:clamp(20px,3vw,28px);color:var(--cv2-brass);font-style:italic}
.cv2-cert-sign{font-family:var(--cv2-fd);font-style:italic;font-size:clamp(14px,1.8vw,19px);color:var(--cv2-ink);margin-top:10px;min-height:1.4em;max-width:90%;word-break:break-word}
.cv2-cert-from{font-size:11px;letter-spacing:.08em;color:var(--cv2-ink-soft);margin-top:4px}
.cv2-cert-foot{display:flex;justify-content:space-between;align-items:flex-end;font-size:10px;color:var(--cv2-ink-soft);letter-spacing:.06em;gap:10px}
.cv2-cert-code{font-family:var(--mono,monospace);letter-spacing:.3em}
/* раскладка по координатам редактора: элементы абсолютны; позиции — per-cover <style id="cv2-pos">; размеры — JS из data-cv-layouts */
.cv2-cert-logo,.cv2-cert-label,.cv2-cert-amount,.cv2-cert-sign,.cv2-cert-from,.cv2-cert-codeline,.cv2-cert-validline{position:absolute;margin:0}
.cv2-cert-codeline,.cv2-cert-validline{font-size:10px;letter-spacing:.06em;line-height:1.2;white-space:nowrap}
/* розетка: при «подарок-сюрприз» (скрытая сумма) фразу-заглушку не показываем — не помещается у эмблемы */
.cv2-cert[data-cv-cover="cv2-c6"] .cv2-cert-amount.hidden-amount{display:none}

/* мини-обложки */
.cv2-covers{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.cv2-thumb{width:64px;aspect-ratio:3/2;border-radius:4px;border:2px solid transparent;cursor:pointer;padding:0;background-origin:border-box;box-shadow:0 2px 8px rgba(43,38,32,.18);transition:transform .2s,border-color .2s;position:relative;flex:none}
.cv2-thumb:hover{transform:translateY(-3px)}
.cv2-thumb.active{border-color:var(--cv2-sapphire);transform:translateY(-3px)}
.cv2-thumb.active::after{content:"";position:absolute;inset:-7px;border:1px solid rgba(30,74,140,.35);border-radius:7px}
.cv2-thumb:focus-visible{outline:2px solid var(--cv2-sapphire);outline-offset:3px}
.cv2-t1{background:linear-gradient(160deg,#FBF7EE,#ECE1CC)}
.cv2-t2{background:linear-gradient(155deg,#234F92,#122F5C)}
.cv2-t3{background:linear-gradient(170deg,#E8F0F6,#C2D6E5)}
.cv2-t4{background:linear-gradient(150deg,#E9D9BE,#C2A47E)}
.cv2-t5{background:linear-gradient(160deg,#3A332B,#201C17)}
.cv2-t6{background:radial-gradient(circle at 75% 20%,rgba(212,184,150,.5),transparent 50%),linear-gradient(155deg,#1C3F78,#0F2548)}
.cv2-covers-label{text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cv2-ink-soft);margin-top:24px;font-weight:600;font-family:var(--cv2-fb)}
.cv2-preview-note{text-align:center;font-size:13px;color:var(--cv2-ink-soft);margin-top:18px;font-family:var(--cv2-fb)}

/* ── ПАНЕЛЬ ── */
.cv2-panel{display:flex;flex-direction:column;gap:14px;font-family:var(--cv2-fb)}
.cv2-block{background:var(--cv2-surface);border:1px solid var(--cv2-hair);border-radius:8px;padding:22px 24px}
.cv2-block-title{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--cv2-ink-mute);font-weight:700;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}
.cv2-block-title--inline{margin:0}
.cv2-step{color:#7A6136}
.cv2-muted{color:var(--cv2-ink-soft);font-weight:500;letter-spacing:0;text-transform:none}
.cv2-amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cv2-amount-btn{min-height:48px;padding:12px 6px;border:1px solid var(--cv2-hair-strong);border-radius:6px;background:transparent;font-family:var(--cv2-fb);font-weight:600;font-size:15px;color:var(--cv2-ink);cursor:pointer;transition:all .22s}
.cv2-amount-btn small{display:block;font-size:10px;font-weight:500;color:var(--cv2-ink-soft);letter-spacing:.04em;margin-top:2px}
.cv2-amount-btn:hover{border-color:var(--cv2-sapphire);transform:translateY(-1px)}
.cv2-amount-btn.active{background:var(--cv2-sapphire);border-color:var(--cv2-sapphire);color:#fff}
.cv2-amount-btn.active small{color:rgba(255,255,255,.7)}
.cv2-custom-row{display:flex;gap:10px;margin-top:12px;align-items:center}
.cv2-custom-row input{flex:1;min-height:48px;padding:12px 14px;border:1px solid var(--cv2-hair-strong);border-radius:6px;background:#fff;font-family:var(--cv2-fb);font-size:16px;color:var(--cv2-ink)}
.cv2-custom-row input:focus{outline:2px solid var(--cv2-sapphire);outline-offset:-1px;border-color:transparent}
.cv2-check{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:14px;color:var(--cv2-ink-mute);cursor:pointer;line-height:1.5}
.cv2-check input{width:20px;height:20px;accent-color:var(--cv2-sapphire);margin-top:1px;flex:none;font-size:16px}

.cv2-block--collapsible{padding:0}
.cv2-block--collapsible summary{list-style:none;cursor:pointer;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;min-height:48px}
.cv2-block--collapsible summary::-webkit-details-marker{display:none}
.cv2-chev{transition:transform .25s;color:var(--cv2-brass)}
.cv2-block--collapsible[open] .cv2-chev{transform:rotate(180deg)}
.cv2-inner{padding:0 24px 22px}
.cv2-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.cv2-chip{min-height:40px;padding:8px 14px;border:1px solid var(--cv2-hair-strong);border-radius:100px;background:transparent;font-size:13px;color:var(--cv2-ink-mute);cursor:pointer;transition:all .2s;font-family:var(--cv2-fb)}
.cv2-chip:hover{border-color:var(--cv2-sapphire);color:var(--cv2-sapphire)}
.cv2-chip.active{background:var(--cv2-sapphire);color:#fff;border-color:var(--cv2-sapphire)}
.cv2-panel textarea,.cv2-field input{width:100%;padding:12px 14px;border:1px solid var(--cv2-hair-strong);border-radius:6px;background:#fff;font-family:var(--cv2-fb);font-size:16px;color:var(--cv2-ink);resize:none}
.cv2-panel textarea:focus,.cv2-field input:focus{outline:2px solid var(--cv2-sapphire);outline-offset:-1px;border-color:transparent}
.cv2-counter{font-size:11px;color:var(--cv2-ink-soft);text-align:right;margin-top:4px}
.cv2-field{margin-top:12px}
.cv2-field--flat{margin-top:0}
.cv2-field label{display:block;font-size:13px;font-weight:600;color:var(--cv2-ink-mute);margin-bottom:6px}
.cv2-field input{min-height:48px}

.cv2-toggle{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--cv2-hair-strong);border-radius:6px;overflow:hidden;margin-bottom:16px}
.cv2-toggle button{min-height:48px;padding:12px;border:none;background:transparent;font-family:var(--cv2-fb);font-weight:600;font-size:13.5px;color:var(--cv2-ink-mute);cursor:pointer;transition:all .2s}
.cv2-toggle button.active{background:var(--cv2-sapphire);color:#fff}
.cv2-fields-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cv2-buyer{margin-top:16px}

.cv2-paybar{margin-top:6px}
.cv2-consent{margin-top:0;margin-bottom:14px}
.cv2-consent a{color:var(--cv2-sapphire)}
.cv2-pay-btn{width:100%;min-height:54px;padding:18px;border:none;border-radius:6px;background:var(--cv2-sapphire);color:#fff;font-family:var(--cv2-fb);font-weight:700;font-size:15px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:all .25s;box-shadow:0 10px 26px -8px rgba(30,74,140,.45)}
.cv2-pay-btn:hover{background:var(--cv2-sapphire-deep);transform:translateY(-2px)}
.cv2-pay-btn[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:none}
.cv2-legal{font-size:11.5px;color:var(--cv2-ink-soft);text-align:center;margin-top:12px;line-height:1.5}
.cv2-trust{display:flex;justify-content:center;gap:18px;margin-top:14px;font-size:11.5px;color:var(--cv2-ink-soft);letter-spacing:.02em;flex-wrap:wrap}
.cv2-trust span::before{content:"·";margin-right:18px;color:var(--cv2-brass)}
.cv2-trust span:first-child::before{content:""}

/* ── успех-модалка ── */
.cv2-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;z-index:1000}
.cv2-modal[hidden]{display:none}
.cv2-modal-backdrop{position:absolute;inset:0;background:rgba(43,38,32,.55)}
.cv2-modal-card{position:relative;background:var(--cv2-surface);border-radius:10px;max-width:430px;width:100%;padding:36px;text-align:center;font-family:var(--cv2-fb)}
.cv2-modal-card h3{font-family:var(--cv2-fd);font-weight:400;font-size:26px;margin-bottom:10px;color:var(--cv2-anthracite)}
.cv2-modal-card p{font-size:14.5px;color:var(--cv2-ink-mute);margin-bottom:18px;line-height:1.6}
.cv2-modal-btn{min-height:48px;padding:12px 28px;border:1px solid var(--cv2-hair-strong);background:transparent;border-radius:6px;font-family:var(--cv2-fb);font-weight:600;cursor:pointer;color:var(--cv2-ink)}

/* ── МОБАЙЛ ── */
@media (max-width:900px){
  .cv2-grid{grid-template-columns:1fr;gap:28px}
  .cv2-preview-sticky{position:static}
  .cv2-amounts{grid-template-columns:repeat(2,1fr)}
  .cv2-fields-2{grid-template-columns:1fr}
  /* обложки горизонтальным рядом со скролл-снапом */
  .cv2-covers{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 2px 8px;scrollbar-width:none}
  .cv2-covers::-webkit-scrollbar{display:none}
  .cv2-thumb{width:72px;scroll-snap-align:center}
  /* sticky кнопка оплаты — прибита к низу, пока секция в зоне видимости */
  .cv2-paybar{position:sticky;bottom:0;background:var(--cv2-surface);border-top:1px solid var(--cv2-hair-strong);margin:14px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));z-index:30;box-shadow:0 -8px 24px -12px rgba(43,38,32,.25)}
  .cv2-paybar .cv2-legal,.cv2-paybar .cv2-trust{display:none}
  .cv2-consent{margin-bottom:10px;font-size:13px}
  /* пока конструктор в зоне видимости — прячем кнопку «наверх», чтобы не конфликтовать со sticky-баром */
  body.cv2-in-view .scroll-to-top{display:none}
}
@media (max-width:380px){
  .cv2-amount-btn{font-size:14px;padding:10px 4px}
}

/* ── Мобильная «базовая» версия конструктора (≤767):
      одна обложка (Цветочная/веточка) без выбора; без подписи-сообщения и даты;
      компактный превью и плотные отступы — весь конструктор в ~1–1.5 экрана.
      Функционал сохранён: прячем только необязательное, JS читает дефолты. ── */
@media (max-width:767px){
  .cv2-covers,.cv2-covers-label,.cv2-preview-note{display:none}   /* одна обложка, без выбора */
  .cv2-block--collapsible{display:none}                          /* подпись-сообщение — вне базы */
  .cv2-field--date{display:none}                                 /* дата отправки — вне базы */
  .cv2-sub{display:none}                                         /* инфо дублируется в trust-бейджах внизу */
  .cv2-cert{max-width:300px;margin:0 auto}                       /* компактный превью по центру */
  .cv2-grid{gap:18px}
  .cv2-panel{gap:12px}
  .cv2-block{padding:16px}
  .cv2-block-title{margin-bottom:12px}
  .cv2-h1{margin-bottom:6px}
}

/* Обложки-изображения (модуль «Обложки»): фон превью/миниатюр — картинка. */
.cv2-cert{background-size:cover;background-position:center}

/* ═══ Раскладка текста под рисунок обложки (текст в чистую зону, не на узор) ═══ */
/* читаемость на тёмных/насыщенных фонах — мягкая тень */
.cv2-cert.is-dark .cv2-cert-head,
.cv2-cert.is-dark .cv2-cert-mid,
.cv2-cert.is-dark .cv2-cert-foot{text-shadow:0 1px 12px rgba(8,16,34,.55)}
/* подпись по умолчанию не во всю ширину — не наезжает на угловой рисунок */
.cv2-cert-sign{max-width:64%}
/* left (Тёплая): весь текст в левой половине, рисунок-лучи справа свободен */
.cv2-cert[data-cv-layout="left"] .cv2-cert-mid{max-width:52%}
.cv2-cert[data-cv-layout="left"] .cv2-cert-sign{max-width:100%}
/* bottom (Цветочная): основной текст уходит вниз, под диагональную ветку */
.cv2-cert[data-cv-layout="bottom"] .cv2-cert-mid{margin-top:auto;padding-top:4%}
.cv2-cert[data-cv-layout="bottom"] .cv2-cert-sign{max-width:82%}
/* frame (Розетка): номинал сверху, подпись снизу — центральная эмблема свободна */
.cv2-cert[data-cv-layout="frame"] .cv2-cert-amount{position:absolute;left:8%;right:8%;top:21%}
.cv2-cert[data-cv-layout="frame"] .cv2-cert-mid{margin-top:auto}
.cv2-cert[data-cv-layout="frame"] .cv2-cert-sign{max-width:100%}
/* top (тёмные с золотой линией / зимняя): текст вверху, код внизу — над линией */
.cv2-cert[data-cv-layout="top"] .cv2-cert-foot{margin-top:auto}
/* frame-c (Розетка — крупная эмблема по центру): номинал сверху, КОД и срок сразу под ним,
   подпись целиком ВНИЗУ под эмблемой — текст не касается лепестков */
.cv2-cert[data-cv-layout="frame-c"] .cv2-cert-amount{position:absolute;left:8%;right:8%;top:17%}
.cv2-cert[data-cv-layout="frame-c"] .cv2-cert-mid{margin-top:auto}
.cv2-cert[data-cv-layout="frame-c"] .cv2-cert-sign{max-width:100%;font-size:clamp(11px,1.25vw,13px);line-height:1.3;margin-top:3px}