/* ============================================================
   NY Headshots — gift cards (buy / transfer / redeem)
   as-design house form language, NYH green accent, dark-glass panel.
   Loaded by /gift-cards/ and /gift-card/redeem-tsq/.
   ============================================================ */
.gc-form{ --gc-accent:#9be23a; max-width:640px; }
:root{ --gc-accent:#9be23a; }

/* ---- labels ---- */
.gc-label{ display:block; font-family:"Open Sans",Arial,sans-serif; font-size:11.5px;
  font-weight:600; letter-spacing:.9px; text-transform:uppercase; color:#9a9a9a;
  margin:0 0 3px; line-height:1.2; }
.gc-req{ color:var(--gc-accent); margin-left:3px; font-weight:700; }
.gc-help{ display:block; font-family:"Open Sans",Arial,sans-serif; font-size:12px;
  color:#8d8d8d; margin-top:5px; letter-spacing:0; text-transform:none; }
.gc-field{ margin:0 0 18px; }
.gc-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
@media(max-width:560px){ .gc-grid2{ grid-template-columns:1fr; } }

/* ---- glow-underline inputs ---- */
.uwrap{ position:relative; display:block; }
.gc-input{ width:100%; background:transparent; border:0;
  border-bottom:1.5px solid rgba(255,255,255,.20); border-radius:0;
  padding:5px 2px 9px; color:#fff; font-family:"Open Sans",Arial,sans-serif;
  font-size:16px; letter-spacing:.3px; caret-color:var(--gc-accent);
  box-shadow:none; -webkit-appearance:none; appearance:none;
  transition:border-color .3s ease; }
textarea.gc-input{ display:block; min-height:64px; resize:vertical; font-size:15px; }
.gc-input::placeholder{ color:rgba(255,255,255,.32); letter-spacing:.4px; }
.gc-input:focus{ outline:0; border-bottom-color:var(--gc-accent); }
.uglow{ pointer-events:none; position:absolute; left:0; right:0; top:100%;
  height:15px; opacity:0; transition:opacity .25s ease;
  background:radial-gradient(ellipse 60% 100% at 50% 0%, rgba(155,226,58,.55), transparent 72%); }
.uwrap:focus-within .uglow{ opacity:1; }
.uwrap::after{ content:""; position:absolute; left:0; right:0; top:100%; height:1.5px;
  opacity:0; transition:opacity .25s ease;
  background:linear-gradient(90deg, transparent, var(--gc-accent) 25%, var(--gc-accent) 75%, transparent); }
.uwrap:focus-within::after{ opacity:1; }
/* autofill mask (page-colored) */
.gc-input:-webkit-autofill,.gc-input:-webkit-autofill:hover,
.gc-input:-webkit-autofill:focus,.gc-input:-webkit-autofill:active{
  -webkit-text-fill-color:#fff; caret-color:var(--gc-accent);
  -webkit-box-shadow:0 0 0 1000px #0c0c0c inset; box-shadow:0 0 0 1000px #0c0c0c inset;
  transition:background-color 99999s ease-out 0s; }

/* ---- tier cards (single-choice radio pills) ---- */
.gc-tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:6px 0 4px; }
@media(max-width:560px){ .gc-tiers{ grid-template-columns:1fr; } }
.gc-tier{ position:relative; display:flex; flex-direction:column; gap:4px; cursor:pointer;
  padding:16px 16px 18px; border-radius:14px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.03); user-select:none;
  transition:border-color .2s,background .2s,box-shadow .25s,transform .12s; }
.gc-tier input{ position:absolute; opacity:0; width:0; height:0; margin:0; pointer-events:none; }
.gc-tier:hover{ border-color:rgba(155,226,58,.5); transform:translateY(-1px); }
.gc-tier .gc-tname{ font-family:"Magra",Arial,sans-serif; font-size:15.5px; color:#fff; line-height:1.15; }
.gc-tier .gc-tprice{ font-family:"Magra",Arial,sans-serif; font-size:26px; color:#fff; line-height:1; }
.gc-tier .gc-tnote{ font-family:"Open Sans",Arial,sans-serif; font-size:11.5px; color:#a7a7a7; }
.gc-tier:has(input:checked),.gc-tier.is-checked{
  border-color:var(--gc-accent); background:rgba(155,226,58,.08);
  box-shadow:0 0 0 1px rgba(155,226,58,.4),0 0 22px -4px rgba(155,226,58,.6); }
.gc-tier:has(input:checked) .gc-tprice,.gc-tier.is-checked .gc-tprice{ color:var(--gc-accent); }

/* ---- Stripe card row ---- */
.gc-pay-sec{ margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); }
.gc-pr-wrap{ display:none; margin:0 0 18px; }
.gc-pr-or{ display:none; align-items:center; gap:12px; margin:0 0 18px; color:#8d8d8d;
  font-family:"Open Sans",Arial,sans-serif; font-size:11.5px; letter-spacing:1px; text-transform:uppercase; }
.gc-pr-or::before,.gc-pr-or::after{ content:""; flex:1; height:1px; background:rgba(255,255,255,.12); }
/* wrap must be BLOCK when shown: as a flex container its single #gcPrButton
   child collapses to width:1px, so Stripe's wallet iframe renders 1px wide
   (invisible/unclickable). Only the .gc-pr-or divider needs flex. */
.gc-pr-wrap.show{ display:block; }
.gc-pr-or.show{ display:flex; }
/* Wallet button host. The border is wallet-dependent (class set in gift-cards.js
   from canMakePayment().applePay) — see the comment there:
     .is-ap     Apple Pay draws NO border of its own and would disappear into the
                dark panel, so we draw a 1px hairline + hover state.
     .is-native Google Pay / Link draw their OWN hairline inside their iframe at an
                inset and corner radius we can't reach. Ours on top of theirs = the
                double border. So we draw none and let the native one stand. */
#gcPrButton{ display:block; width:100%; min-height:40px; border:0; }
#gcPrButton iframe{ width:100% !important; min-width:100% !important; }

#gcPrButton.is-ap{ border:1px solid rgba(255,255,255,.28); border-radius:6px; overflow:hidden;
  transition:border-color .2s ease, box-shadow .25s ease; }
#gcPrButton.is-ap:hover{ border-color:rgba(255,255,255,.55);
  box-shadow:0 0 22px -8px rgba(255,255,255,.45); }
/* Google Pay / Link: no border of ours, and no clipping — their own rounded rect
   must not be cut by an overflow:hidden box with a different radius. */
#gcPrButton.is-native{ border:0; border-radius:0; overflow:visible; }
.gc-stripe-field{ background:transparent; border-bottom:1.5px solid rgba(255,255,255,.20);
  padding:9px 2px; transition:border-color .3s ease; }
.gc-stripe-field.StripeElement--focus{ border-bottom-color:var(--gc-accent); }
.gc-stripe-field.StripeElement--invalid{ border-bottom-color:#ff7676; }
.gc-card-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 18px; margin-top:4px; }
@media(max-width:560px){ .gc-card-grid{ grid-template-columns:1fr; gap:0; } }
.gc-cc-err{ color:#ff7676; font-family:"Open Sans",Arial,sans-serif; font-size:12.5px; margin-top:10px; min-height:16px; }

/* ---- pill submit ---- */
.gc-submit-wrap{ margin:26px 0 4px; }
.gc-submit{ display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  border-radius:999px; border:1px solid rgba(255,255,255,.5); background:transparent; color:#fff;
  font-family:"Open Sans",Arial,sans-serif; font-weight:600; font-size:13.5px; letter-spacing:1.4px;
  text-transform:uppercase; padding:14px 40px; transition:background .2s,color .2s,border-color .2s,box-shadow .25s; }
.gc-submit:hover{ background:var(--gc-accent); color:#111; border-color:var(--gc-accent);
  box-shadow:0 0 34px -6px rgba(155,226,58,.6); }
.gc-submit:disabled{ opacity:.55; cursor:default; }

/* ---- success state ---- */
.gc-success{ display:none; text-align:center; padding:8px 0 4px; }
.gc-success.show{ display:block; }
.gc-success .gc-check{ width:56px; height:56px; margin:0 auto 14px; border-radius:50%;
  border:2px solid var(--gc-accent); display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 30px -6px rgba(155,226,58,.7); }
.gc-success .gc-check svg{ width:26px; height:26px; stroke:var(--gc-accent); }
.gc-success h3{ font-family:"Magra",Arial,sans-serif; font-size:24px; color:#fff; margin:0 0 8px; }
.gc-success p{ font-family:"Open Sans",Arial,sans-serif; font-size:13.5px; color:#cfcfcf; line-height:1.6; margin:0 0 14px; }
.gc-code-box{ display:inline-block; font-family:"Magra",Arial,sans-serif; font-size:26px; letter-spacing:3px;
  color:var(--gc-accent); background:rgba(155,226,58,.07); border:1px dashed rgba(155,226,58,.5);
  border-radius:12px; padding:14px 26px; margin:6px 0 18px; }

/* ---- redeem: code status + booking frame ---- */
.gc-code-status{ font-family:"Open Sans",Arial,sans-serif; font-size:14px; margin:12px 0 0; min-height:20px; }
.gc-code-status.checking{ color:#9a9a9a; }
.gc-code-status.ok{ color:#cfcfcf; }
.gc-code-status.ok strong{ color:var(--gc-accent); font-family:"Magra",Arial,sans-serif; font-weight:400; }
.gc-code-status.err{ color:#ff7676; }
.gc-book-wrap{ margin-top:22px; }
.gc-book-wrap iframe{ width:100%; min-height:0; border:0; display:block; border-radius:12px; }