/* Страница покупки подарочного сертификата (/certificates). Один экран на компьютере: слева «сцена» с живым сертификатом
   и выбором оформления, справа панель из трёх шагов. Цвета — токены сайта (работает и в тёмной теме); свечение — в тон оформления. */
.giftp{--glow:#1f3d69;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px);gap:clamp(28px,4vw,64px);align-items:center;
  min-height:100vh;padding:clamp(20px,3vh,36px) clamp(24px,4vw,64px);overflow:clip;font-family:"Exo 2",sans-serif;color:var(--c-text)}
.giftp[data-design=emerald]{--glow:#1b5c47}.giftp[data-design=ivory]{--glow:#d8bf7a}.giftp[data-design=birthday]{--glow:#f0a47f}
.giftp[data-design=newyear]{--glow:#2b4f86}.giftp[data-design=spring]{--glow:#e79fb3}
.giftp__glow{position:absolute;z-index:0;pointer-events:none;left:-10%;top:-20%;width:75%;height:140%;background:radial-gradient(closest-side,var(--glow),transparent);opacity:.22;filter:blur(40px);transition:background .5s}
html[data-theme=dark] .giftp__glow{opacity:.35}

/* ---- сцена ---- */
.giftp__stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2.2vh,24px);min-width:0}
.giftp__eyebrow{display:inline-block;font-size:13px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--c-gold-text)}
.giftp__title{margin:6px 0 8px;font-size:clamp(30px,3.4vw,48px);line-height:1.05;font-weight:500;color:var(--c-text-strong)}
.giftp__lead{margin:0;max-width:560px;font-size:clamp(15px,1.15vw,18px);line-height:1.45;font-weight:300;color:var(--c-text)}
.giftp__card{--rx:0deg;--ry:0deg;--gx:50%;--gy:30%;width:min(100%,calc((100vh - 400px) * 1.6),760px);min-width:280px;perspective:1400px}
.giftp__cardInner{position:relative;aspect-ratio:1200/750;border-radius:clamp(12px,1.6vw,22px);transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease-out,box-shadow .4s;
  box-shadow:0 30px 60px -18px color-mix(in srgb,var(--glow) 70%,transparent),0 10px 24px rgba(0,0,0,.14);background:color-mix(in srgb,var(--glow) 35%,var(--c-surface))}
.giftp__cardInner::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(60% 50% at var(--gx) var(--gy),rgba(255,255,255,.22),transparent 70%);mix-blend-mode:soft-light}
.giftp__cardInner svg{display:block;width:100%;height:100%;border-radius:inherit}
.giftp__designs{display:flex;gap:10px;max-width:100%;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:none}
.giftp__designs::-webkit-scrollbar{display:none}
.giftp__design{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;cursor:pointer;font:400 12.5px "Exo 2",sans-serif;color:var(--c-muted)}
.giftp__design img{display:block;width:clamp(78px,7vw,108px);height:auto;border-radius:8px;outline:2px solid transparent;outline-offset:3px;transition:outline-color .2s,transform .2s;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.giftp__design:hover img{transform:translateY(-2px)}
.giftp__design.is-on img{outline-color:var(--c-gold)}.giftp__design.is-on{color:var(--c-text)}
.giftp__design:focus-visible img{outline-color:var(--c-primary-line)}
.giftp__perks{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none;font-size:14px;font-weight:300;color:var(--c-muted)}
.giftp__perks li{display:flex;align-items:center;gap:8px}
.giftp__perks svg,.giftp__foot svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--c-gold-text);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---- панель ---- */
.giftp__panel{position:relative;   /* без z-index: иначе закреплённая кнопка на телефоне окажется под подвалом */
  padding:clamp(20px,3vh,30px) clamp(20px,2vw,30px);border-radius:24px;background:var(--c-bg);box-shadow:0 24px 60px -20px rgba(0,0,0,.25),0 0 0 1px var(--c-line-soft)}
.giftp__steps{display:flex;gap:6px;margin:0 0 clamp(16px,2.6vh,24px);padding:0;list-style:none;counter-reset:s}
.giftp__steps li{flex:1;display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:2px solid var(--c-line);font-size:14px;color:var(--c-muted);cursor:default;transition:color .2s,border-color .2s}
.giftp__steps b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:600;background:var(--c-surface);color:var(--c-muted)}
.giftp__steps .is-on{color:var(--c-text);border-color:var(--c-gold)}.giftp__steps .is-on b{background:var(--c-gold);color:#1b1b1b}
.giftp__steps .is-done{cursor:pointer;color:var(--c-text);border-color:color-mix(in srgb,var(--c-gold) 45%,transparent)}.giftp__steps .is-done b{background:color-mix(in srgb,var(--c-gold) 30%,var(--c-surface));color:var(--c-text)}
.giftp__form{display:flex;flex-direction:column}
.giftp__step{display:none;border:0;margin:0;padding:0;min-width:0;flex-direction:column;gap:12px;animation:giftIn .35s ease}
.giftp__step.is-on{display:flex}
@keyframes giftIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.giftp__step{animation:none}.giftp__cardInner{transition:none}}
.giftp__q{padding:0;margin:0 0 4px;font-size:clamp(19px,1.6vw,23px);font-weight:500;line-height:1.25;color:var(--c-text-strong)}
.giftp__q small{font-size:13px;font-weight:300;color:var(--c-muted);margin-left:6px}
.giftp__amounts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.giftp__amount{position:relative;cursor:pointer}
.giftp__amount input{position:absolute;opacity:0;pointer-events:none}
.giftp__amount span{display:flex;align-items:center;justify-content:center;height:clamp(52px,7vh,64px);border-radius:14px;border:1.5px solid var(--c-line);font-size:clamp(17px,1.4vw,20px);font-weight:500;color:var(--c-text);transition:border-color .15s,background .15s,box-shadow .15s}
.giftp__amount:hover span{border-color:var(--c-gold)}
.giftp__amount input:checked+span{border-color:var(--c-gold);background:color-mix(in srgb,var(--c-gold) 14%,var(--c-bg));box-shadow:inset 0 0 0 1px var(--c-gold)}
.giftp__amount input:focus-visible+span{outline:2px solid var(--c-primary-line);outline-offset:2px}
.giftp__field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--c-muted);min-width:0}
.giftp__field[hidden]{display:none}
.giftp__field span{display:flex;justify-content:space-between}.giftp__field i{font-style:normal;opacity:.7}
.giftp__field input,.giftp__field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--c-line);border-radius:12px;background:var(--c-bg);font:300 16px/1.35 "Exo 2",sans-serif;color:var(--c-text);transition:border-color .15s}
.giftp__field textarea{resize:none}
.giftp__field input:focus,.giftp__field textarea:focus{outline:none;border-color:var(--c-gold)}
.giftp__row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.giftp__wishes{display:flex;flex-wrap:wrap;gap:6px;margin-top:-4px}
.giftp__wishes button{padding:6px 11px;border-radius:999px;border:1px solid var(--c-line);background:var(--c-surface);font:300 13px "Exo 2",sans-serif;color:var(--c-text);cursor:pointer}
.giftp__wishes button:hover{border-color:var(--c-gold)}
.giftp__hint{margin:2px 0 0;font-size:13.5px;line-height:1.4;font-weight:300;color:var(--c-muted)}
.giftp__agree{position:relative;display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.35;font-weight:300;color:var(--c-muted);cursor:pointer}
.giftp__agree input{position:absolute;opacity:0}
.giftp__agree span{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--c-line-2);display:grid;place-items:center;transition:background .15s,border-color .15s}
.giftp__agree input:checked+span{background:var(--c-gold);border-color:var(--c-gold)}
.giftp__agree input:checked+span::after{content:"";width:9px;height:5px;border:2px solid #1b1b1b;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.giftp__agree input:focus-visible+span{outline:2px solid var(--c-primary-line);outline-offset:2px}
.giftp__summary{padding:12px 14px;border-radius:12px;background:var(--c-surface);font-size:14px;line-height:1.4;color:var(--c-text)}
.giftp .forms_error:empty{display:none}
.giftp .forms_error{font-size:13px;color:var(--c-error);margin-top:-4px}
.giftp__err{margin-top:10px}
.giftp__nav{display:flex;gap:10px;margin-top:clamp(16px,2.6vh,24px)}
.giftp__next{flex:1;min-height:54px;font-size:17px;border-radius:14px}
.giftp__back{min-height:54px;padding:0 20px;border-radius:14px;border:1.5px solid var(--c-line);background:none;font:400 16px "Exo 2",sans-serif;color:var(--c-text);cursor:pointer}
.giftp__back:hover{border-color:var(--c-gold)}
.giftp__off{margin:0;font-size:15px;line-height:1.4}
.giftp__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0 0;font-size:13px;font-weight:300;color:var(--c-muted)}
.giftp__foot span{display:flex;align-items:center;gap:6px}
.giftp__foot a{color:var(--c-primary-text);text-decoration:underline;text-underline-offset:3px}

/* ---- узкие экраны: сертификат сверху, шаги ниже, кнопка внизу экрана ---- */
@media (max-width:1100px){
  .giftp{grid-template-columns:1fr;min-height:0;align-items:start;padding:20px 16px 110px;gap:20px}
  .giftp__card{width:100%}
  .giftp__panel{border-radius:20px}
  .giftp__nav{position:fixed;z-index:60;left:0;right:0;bottom:0;margin:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--c-bg) 92%,transparent);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 -8px 24px rgba(0,0,0,.08)}
  .giftp__glow{width:140%;left:-20%;height:60%}
}
@media (max-width:480px){.giftp__row{grid-template-columns:1fr}.giftp__perks{font-size:13px}.giftp__title{font-size:30px}}