/* /gift (GIFT-R1 step 5, 2026-10-25). Design canon = the product page: DM Sans, ink #1c1917, body #44403c /
   #57534e, lines #e7e5e4, surfaces #fff / #fafaf9 / #f5f5f4, navy #284878 for links and every action, white
   cards with hairline borders and a 12-16 px radius. Mock-ups: artifact KEtgW8LHXquCr1PEP4KPw6.
   Logical properties throughout, so /gift?lang=ar mirrors by itself. */

.gf{--gf-ink:#1c1917;--gf-body:#44403c;--gf-muted:#57534e;--gf-line:#e7e5e4;--gf-field:#d6d3d1;--gf-s1:#fafaf9;
    --gf-navy:#284878;--gf-navy-d:#1f3a63;--gf-tint:#eef2f7;--gf-ok:#15803d;
    font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--gf-body);background:var(--gf-s1);
    -webkit-font-smoothing:antialiased;padding:64px 0 48px}   /* 64px = the fixed np-header (56px on phones, below) */
html[lang="ar"] .gf{font-family:'Tajawal','DM Sans',system-ui,sans-serif}
.gf *,.gf *::before,.gf *::after{box-sizing:border-box}
body.gf-body{margin:0;background:var(--gf-s1,#fafaf9)}   /* the shared header/footer CSS does not reset the 8px default */
.gf a{color:var(--gf-navy)}
.gf svg{display:block;flex:0 0 auto}
.gf [hidden]{display:none !important}
.gf-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.gf-bc{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:18px 0 4px;font-size:13px;color:var(--gf-muted)}
.gf-bc a{color:var(--gf-muted);text-decoration:none}
.gf-center{text-align:center}

/* cards and type */
.gf-card{max-width:640px;margin:16px auto 0;padding:24px;background:#fff;border:1px solid var(--gf-line);border-radius:16px}
.gf-card--narrow{max-width:560px}
.gf-h1{margin:0 0 12px;font-size:26px;line-height:1.2;font-weight:700;color:var(--gf-ink);letter-spacing:-.01em}
.gf-h1--big{font-size:42px;line-height:1.08;margin:14px 0 12px;letter-spacing:-.02em;text-wrap:balance}
.gf-h2{margin:0 0 12px;font-size:20px;font-weight:700;color:var(--gf-ink)}
.gf-lead{margin:0 0 12px;font-size:16px;line-height:1.55}
.gf-hint{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--gf-muted)}
.gf-alert{margin:0;padding:10px 12px;border-radius:10px;background:#fdecec;color:#991b1b;font-size:14px;line-height:1.45}

/* trust strip, tour row */
.gf-trust{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 18px;padding:9px 14px;list-style:none;background:var(--gf-tint);border-radius:10px;font-size:13px;color:var(--gf-ink)}
.gf-trust li{display:flex;align-items:center;gap:6px}
.gf-trust svg{color:var(--gf-navy)}
.gf-tour{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--gf-s1);border:1px solid var(--gf-line);border-radius:12px}
.gf-tour img{width:96px;height:45px;object-fit:cover;border-radius:8px}
.gf-tour b{display:block;font-size:15px;color:var(--gf-ink);line-height:1.3}
.gf-tour a{font-size:13px}

/* form */
.gf-form{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}   /* minmax(0,…): the date-chip row scrolls instead of widening the page */
.gf-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.gf-field>span{font-size:13px;font-weight:600;color:var(--gf-ink)}
.gf-field input,.gf-field select,.gf-field textarea{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--gf-field);border-radius:8px;background:#fff;
    font:inherit;font-size:16px;color:var(--gf-ink)}
.gf-field textarea{padding:10px 12px;line-height:1.45;resize:vertical}
.gf-field input:focus,.gf-field select:focus,.gf-field textarea:focus{outline:2px solid var(--gf-navy);outline-offset:1px;border-color:var(--gf-navy)}
.gf-field [aria-invalid="true"]{border-color:#b91c1c}
.gf-field--sm{max-width:260px}
.gf-field--btn{justify-content:flex-end}
.gf-count{align-self:flex-end;font-size:12px;color:var(--gf-muted)}
.gf-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.gf-row--3{grid-template-columns:1.4fr 1fr 1fr}
.gf-set{margin:0;padding:0;border:0;min-width:0}
.gf-set>legend{padding:0;margin-bottom:8px;font-size:14px;font-weight:700;color:var(--gf-ink)}
.gf-check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--gf-ink)}
.gf-check input{width:20px;height:20px;accent-color:var(--gf-navy)}

.gf-steppers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gf-step{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;padding-inline-start:14px;border:1px solid var(--gf-line);border-radius:12px}
.gf-step b{display:block;font-size:14px;color:var(--gf-ink)}
.gf-step small{font-size:12px;color:var(--gf-muted)}
.gf-step__ctl{display:flex;align-items:center;gap:6px}
.gf-step__ctl input{width:40px;min-height:40px;border:0;background:transparent;text-align:center;font:inherit;font-size:16px;font-weight:700;color:var(--gf-ink);-moz-appearance:textfield}
.gf-step__ctl input::-webkit-outer-spin-button,.gf-step__ctl input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.gf-round{width:40px;height:40px;border:1px solid var(--gf-field);border-radius:999px;background:#fff;color:var(--gf-navy);font:inherit;font-size:18px;font-weight:600;line-height:1;cursor:pointer}
.gf-round:disabled{color:#a8a29e;border-color:var(--gf-line);background:var(--gf-s1);cursor:default}

.gf-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
.gf-choice{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--gf-line);border-radius:12px;cursor:pointer}
.gf-choice input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--gf-navy)}
.gf-choice b{display:block;font-size:14px;color:var(--gf-ink)}
.gf-choice small{font-size:12.5px;color:var(--gf-muted)}
.gf-choice:has(input:checked){border:2px solid var(--gf-navy);padding:11px;background:#f7f9fc}

/* pay bar, buttons */
.gf-paybar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;border-top:1px solid var(--gf-line)}
.gf-total{display:flex;flex-direction:column}
.gf-total span{font-size:13px;color:var(--gf-muted)}
.gf-total strong{font-size:24px;line-height:1.2;color:var(--gf-navy)}
.gf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border:0;border-radius:8px;
    background:var(--gf-navy);color:#fff !important;font:inherit;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;
    box-shadow:0 2px 8px rgba(40,72,120,.25)}
.gf-btn:hover{background:var(--gf-navy-d)}
.gf-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.gf-btn--line{background:#fff;color:var(--gf-navy) !important;border:1px solid var(--gf-field);box-shadow:none}
.gf-btn--line:hover{background:var(--gf-s1)}
.gf-btn.is-busy{opacity:.7;pointer-events:none}

/* after payment */
.gf-badge{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;margin:4px auto 12px;border-radius:999px;background:var(--gf-tint);color:var(--gf-navy)}
.gf-badge--warn{background:#fdf3dc;color:#6b4300}
.gf-badge--wait{border:4px solid var(--gf-tint);border-top-color:var(--gf-navy);background:none;animation:gf-spin 1s linear infinite}
@keyframes gf-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.gf-badge--wait{animation:none}}
.gf-summary{padding:0;overflow:hidden}
.gf-summary__img{display:block;width:100%;height:auto;aspect-ratio:1200/560;object-fit:cover}
.gf-summary__body{padding:16px 20px}
.gf-summary__tour{display:block;margin-bottom:6px;font-size:16px;color:var(--gf-ink)}
.gf-dl{margin:0}
.gf-dl>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid #f5f5f4;font-size:14px}
.gf-dl dt{color:var(--gf-muted)}
.gf-dl dd{margin:0;text-align:end;color:var(--gf-ink);overflow-wrap:anywhere}
.gf-dl__total dd{font-weight:700;color:var(--gf-navy)}
.gf-actions{display:grid;gap:10px}
.gf-change{margin-top:4px;padding:12px 14px;border:1px solid var(--gf-line);border-radius:12px}
.gf-change summary{cursor:pointer;font-weight:600;color:var(--gf-navy)}
.gf-change form{margin-top:10px}

/* the recipient's page */
.gf-redeem{max-width:640px;margin:0 auto}
.gf-banner{display:flex;align-items:center;gap:12px;margin:16px 0 14px;padding:12px 14px;background:var(--gf-tint);border-radius:12px}
.gf-banner__ico{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:#fff;color:var(--gf-navy)}
.gf-banner b{display:block;font-size:15px;color:var(--gf-ink)}
.gf-banner span{font-size:13px;color:var(--gf-body)}
.gf-hero{display:block;width:100%;height:auto;aspect-ratio:1200/560;object-fit:cover;border-radius:12px}
.gf-dates{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;margin-bottom:10px}
.gf-date{position:relative;flex:0 0 auto;scroll-snap-align:start}   /* keeps the hidden radio inside the scrolling row */
.gf-date input{position:absolute;opacity:0;pointer-events:none}
.gf-date span{display:flex;flex-direction:column;align-items:center;min-width:66px;padding:7px 8px;border:1px solid var(--gf-line);border-radius:10px;background:#fff;cursor:pointer;line-height:1.25}
.gf-date small{font-size:11.5px;color:var(--gf-muted)}
.gf-date b{font-size:17px;color:var(--gf-ink)}
.gf-date em{margin-top:2px;font-size:11px;font-style:normal;font-weight:600;color:var(--gf-ok)}
.gf-date input:checked+span{background:var(--gf-navy);border-color:var(--gf-navy)}
.gf-date input:checked+span small,.gf-date input:checked+span b,.gf-date input:checked+span em{color:#fff}
.gf-date input:focus-visible+span{outline:2px solid var(--gf-navy);outline-offset:2px}
.gf-lines{display:grid;gap:6px;padding:12px 14px;border:1px solid var(--gf-line);border-radius:12px;font-size:14px}
.gf-lines>div{display:flex;justify-content:space-between;gap:12px}
.gf-lines__gift{color:var(--gf-ok);font-weight:600}

/* landing */
.gf-land{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:start;padding-top:20px}
.gf-land .gf-card{margin:0;max-width:none}
.gf-eyebrow{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:999px;background:var(--gf-tint);color:var(--gf-navy);font-size:13px;font-weight:600}
.gf-eyebrow svg{width:16px;height:16px}
.gf-steps{margin:18px 0 22px;padding:0;list-style:none;counter-reset:gf;display:grid;gap:12px}
.gf-steps li{counter-increment:gf;display:flex;align-items:center;gap:12px;font-size:15px;color:var(--gf-ink)}
.gf-steps li::before{content:counter(gf);display:flex;align-items:center;justify-content:center;flex:0 0 28px;height:28px;border-radius:999px;background:var(--gf-tint);color:var(--gf-navy);font-size:13px;font-weight:700}
.gf-code{display:grid;gap:14px}

@media (max-width:760px){
  .gf{padding-top:56px}
  .gf-wrap{padding:0 16px}
  .gf-card{padding:16px;margin-top:12px}
  .gf-h1{font-size:22px}
  .gf-h1--big{font-size:32px}
  .gf-row,.gf-row--3,.gf-steppers,.gf-choices,.gf-land{grid-template-columns:minmax(0,1fr)}
  .gf-land{gap:20px}
  .gf-field--sm{max-width:none}
  .gf-paybar{position:sticky;bottom:0;z-index:5;margin:0 -16px -16px;padding:12px 16px 16px;background:#fff;box-shadow:0 -6px 16px rgba(0,0,0,.06);border-radius:0 0 16px 16px}
  .gf-paybar .gf-btn{flex:1}
}