/* ============================================================
   Padel54 — Gift Card
   (loaded after style.css)
   ============================================================ */

.gift-hero{padding-top:clamp(120px,15vh,168px);padding-bottom:clamp(60px,8vw,100px);position:relative;overflow:hidden}
.gift-hero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:70%;background:radial-gradient(closest-side,rgba(213,239,101,.16),transparent 70%);pointer-events:none;filter:blur(10px)}
.gift-hero .u{position:relative}
.gift-top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin-bottom:clamp(48px,6vw,76px)}
.gift-top .lab{display:inline-flex;align-items:center;gap:8px}
.gift-top .lab::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal)}
.gift-top h1{font-weight:900;text-transform:uppercase;font-size:clamp(40px,7vw,104px);line-height:.9;letter-spacing:-.03em}
.gift-top h1 em{font-style:normal;color:var(--signal)}
.gift-top p{max-width:52ch;color:var(--paper-dim);font-size:clamp(15px,1.6vw,18px)}

.gift-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,90px);align-items:center}
@media(max-width:900px){.gift-grid{grid-template-columns:1fr;gap:56px}}

/* ---------- card stage (3d tilt + shine) ---------- */
.gcard-stage{perspective:1200px;display:flex;justify-content:center}
.gcard{position:relative;width:100%;max-width:420px;aspect-ratio:1.586/1;border-radius:22px;background:
    radial-gradient(120% 140% at 8% 0%,rgba(213,239,101,.22),transparent 55%),
    linear-gradient(155deg,#1b1e22 0%,#101216 55%,#0a0b0d 100%);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.04) inset;
  overflow:hidden;transform-style:preserve-3d;will-change:transform;
  transition:transform .5s var(--ease);padding:clamp(22px,3.4vw,34px)}
.gcard::before{content:"";position:absolute;inset:0;border-radius:22px;padding:1px;background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,0) 40%,rgba(255,255,255,.05) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.gcard .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 22%;opacity:.55;filter:grayscale(.15) contrast(1.05);pointer-events:none}
.gcard .fade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,11,13,.96) 0%,rgba(10,11,13,.86) 30%,rgba(10,11,13,.5) 62%,rgba(10,11,13,.22) 100%);pointer-events:none}
.gcard .dots{position:absolute;right:-30px;bottom:-30px;width:180px;height:180px;background-image:radial-gradient(rgba(213,239,101,.35) 1.4px,transparent 1.4px);background-size:14px 14px;opacity:.5;transform:rotate(12deg);pointer-events:none}
.gcard .shine{position:absolute;top:-60%;left:0;width:34%;height:220%;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.24) 50%,transparent 70%);transform:translateX(-60%) rotate(12deg);pointer-events:none}
.js .gcard.reveal.in .shine{animation:cardShineIn 1.5s var(--ease) .5s 1 both,cardShineLoop 5.5s linear 4s infinite}
@keyframes cardShineIn{0%{transform:translateX(-60%) rotate(12deg)}100%{transform:translateX(230%) rotate(12deg)}}
@keyframes cardShineLoop{0%{transform:translateX(-60%) rotate(12deg)}16%{transform:translateX(230%) rotate(12deg)}100%{transform:translateX(230%) rotate(12deg)}}

.gcard .face{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between}
.gcard .top{display:flex;align-items:flex-start;justify-content:space-between}
.gcard .word{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(16px,2.2vw,20px);color:var(--paper)}
.gcard .word sup{color:var(--signal);font-size:.55em;margin-left:1px}
.gcard .tag{font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:9.5px;color:var(--paper-dim);border:1px solid var(--line);padding:5px 9px;border-radius:999px}
.gcard .chip{width:38px;height:28px;border-radius:6px;margin-top:14px;background:linear-gradient(155deg,#e7e2c9,#c9c092);position:relative;overflow:hidden}
.gcard .chip::before,.gcard .chip::after{content:"";position:absolute;background:rgba(12,13,15,.35)}
.gcard .chip::before{left:0;right:0;top:50%;height:1px;transform:translateY(-50%)}
.gcard .chip::after{top:0;bottom:0;left:50%;width:1px;transform:translateX(-50%)}
.gcard .bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.gcard .amt{font-weight:900;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-size:clamp(34px,5.6vw,50px);letter-spacing:-.02em;line-height:1;transition:transform .25s var(--ease)}
.gcard .amt.pop{animation:amtPop .32s var(--ease)}
@keyframes amtPop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
.gcard .num{font-weight:600;letter-spacing:.18em;color:var(--paper-dim);font-size:clamp(11px,1.3vw,13px)}

@media(prefers-reduced-motion:reduce){.gcard{transition:none}.gcard .shine{display:none}}

/* ---------- copy + picker ---------- */
.gift-copy .gkick{color:var(--signal);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:11.5px}
.gift-copy h2{margin-top:14px;font-weight:900;text-transform:uppercase;font-size:clamp(26px,3.4vw,40px);line-height:1;letter-spacing:-.02em}
.gift-copy p{margin-top:14px;color:var(--paper-dim);font-size:15px;max-width:44ch}

.amt-picker{margin-top:clamp(28px,3.6vw,40px)}
.amt-picker .grid{display:flex;flex-wrap:wrap;gap:10px}
.amt-btn{font-weight:700;font-size:14px;padding:12px 20px;border-radius:999px;border:1px solid var(--line);color:var(--paper);background:transparent;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease);font-family:inherit}
.amt-btn:hover{border-color:var(--paper-dim);transform:translateY(-1px)}
.amt-btn.on{background:var(--signal);color:var(--ink);border-color:var(--signal)}
.amt-custom{display:none;align-items:center;gap:10px;margin-top:14px}
.amt-custom.show{display:flex}
.amt-custom span{color:var(--paper-dim);font-weight:700;font-size:14px}
.amt-custom input{width:120px;background:transparent;border:1px solid var(--line);border-radius:999px;padding:12px 18px;color:var(--paper);font-family:inherit;font-weight:700;font-size:14px}
.amt-custom input:focus{outline:none;border-color:var(--signal)}

.gift-form{margin-top:clamp(22px,2.8vw,30px);display:grid;gap:14px;max-width:400px}
.gform-field label{display:block;font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--paper-dim);margin-bottom:8px}
.gform-field label span{text-transform:none;letter-spacing:0;font-weight:500;opacity:.7}
.gift-form input,.gift-form textarea{width:100%;background:transparent;border:1px solid var(--line);border-radius:12px;padding:12px 16px;color:var(--paper);font-family:inherit;font-weight:500;font-size:16px;resize:vertical}
.gift-form textarea{min-height:76px}
.gift-form input:focus,.gift-form textarea:focus{outline:none;border-color:var(--signal)}

.gift-success{margin-bottom:clamp(24px,3vw,32px);padding:18px 20px;border:1px solid var(--signal);border-radius:12px;background:rgba(213,239,101,.08)}
.gift-success strong{display:block;font-size:15px;color:var(--paper)}
.gift-success p{margin-top:6px;font-size:13.5px;color:var(--paper-dim)}
.gift-form input::placeholder,.gift-form textarea::placeholder{color:var(--paper-dim);opacity:.55}
.gform-error{color:#ff8a7a;font-size:12.5px;margin:-4px 0 0}

.gift-cta{margin-top:clamp(28px,3.6vw,40px);display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.gift-cta .note{color:var(--paper-dim);font-size:12.5px;max-width:30ch}
button.btn{border:none;cursor:pointer;font-family:inherit}
button.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* ---------- how it works ---------- */
.gift-steps{padding-top:clamp(70px,9vw,120px);padding-bottom:clamp(70px,9vw,120px)}
.gift-steps .grid{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(12,13,15,.16)}
@media(max-width:820px){.gift-steps .grid{grid-template-columns:1fr}}
.gift-steps .st{padding:clamp(28px,3.2vw,40px) clamp(20px,2.4vw,30px) clamp(28px,3.2vw,40px) 0;border-left:1px solid rgba(12,13,15,.1)}
.gift-steps .st:first-child{border-left:0;padding-left:0}
@media(max-width:820px){.gift-steps .st{border-left:0;border-top:1px solid rgba(12,13,15,.1);padding:clamp(24px,3vw,32px) 0}.gift-steps .st:first-child{border-top:0}}
.gift-steps .st .no{font-weight:900;font-size:13px;color:var(--signal);letter-spacing:.08em}
.gift-steps .st h3{margin-top:14px;font-weight:800;text-transform:uppercase;font-size:19px;letter-spacing:-.01em}
.gift-steps .st p{margin-top:10px;color:#6c6b65;font-size:14.5px;max-width:32ch}

/* ---------- what it covers ---------- */
.gift-covers{padding-top:clamp(70px,9vw,120px);padding-bottom:clamp(70px,9vw,120px)}
.gift-covers .grid{margin-top:clamp(36px,4.6vw,56px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,28px)}
@media(max-width:900px){.gift-covers .grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.gift-covers .grid{grid-template-columns:1fr}}
.gift-covers .cv{border:1px solid var(--line);border-radius:14px;padding:clamp(22px,2.6vw,28px);transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease)}
.gift-covers .cv:hover{border-color:var(--signal);transform:translateY(-4px);background:rgba(213,239,101,.04)}
.gift-covers .cv .ic{width:34px;height:34px;border-radius:50%;background:var(--signal);display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease)}
.gift-covers .cv:hover .ic{transform:scale(1.08)}
.gift-covers .cv .ic svg{width:16px;height:16px}
.gift-covers .cv h3{margin-top:16px;font-weight:800;text-transform:uppercase;font-size:14.5px;letter-spacing:.01em}
.gift-covers .cv p{margin-top:8px;color:var(--paper-dim);font-size:13.5px}

/* ---------- closing cta ---------- */
.gift-close{position:relative;overflow:hidden;padding:clamp(70px,10vw,130px) 0;text-align:center;background:radial-gradient(120% 160% at 50% 0%,#1b1e22,#0a0b0d 65%)}
.gift-close::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(213,239,101,.35) 1.2px,transparent 1.2px);background-size:22px 22px;opacity:.16;pointer-events:none}
.gift-close .ginner{position:relative}
.gift-close h2{font-weight:900;text-transform:uppercase;font-size:clamp(30px,5vw,58px);line-height:.96;letter-spacing:-.02em}
.gift-close p{margin:16px auto 0;max-width:44ch;color:var(--paper-dim)}
.gift-close .cta{margin-top:30px;display:flex;justify-content:center;flex-wrap:wrap;gap:14px}