/* F01 B27 — the gift checkout's whole visual delta on top of the LIVE checkout sheets
   (checkout.css + site-chrome.css), ported from M10's assets/gift.css (approved 2026-11-06).
   Only what a gift purchase needs that a ticket purchase does not. No color tokens are
   defined here (LD#55); the gift's new sentences reach the prose face through typography.json
   (.gc-amt, .gc-meta, .gc-msg, .gc-line-to, .gc-prose), never through a rule in this file. */

/* the band: the venue photograph, framed on the players under the dome (M10 D-03) */
.gc-band img{ object-position:50% 50%; transform:scale(1.45); transform-origin:20% 50%; }

/* configure: the five amounts — the checkout's reveal pills, larger, one chosen */
.gc-amounts{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.5rem; }
.gc-amounts label{ position:relative; display:grid; place-items:center; min-height:3.1rem; border:1px solid var(--line);
  border-radius:999px; background:rgba(255,255,255,.035); font-size:1.08rem; cursor:pointer; color:var(--ink); }
.gc-amounts input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.gc-amounts label:has(input:checked){ border-color:var(--gold); color:var(--gold); background:rgba(255,155,18,.08); }
.gc-amounts label:has(input:focus-visible){ outline:3px solid var(--gold); outline-offset:3px; }
@media (max-width:420px){ .gc-amounts{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.co textarea.f{ width:100%; min-height:6.2rem; resize:vertical; font:inherit; font-size:1.02rem; color:var(--ink);
  background:rgba(255,255,255,.035); border:1px solid var(--line); border-radius:12px; padding:.8rem .95rem; line-height:1.5; }
html[data-ground="paper"] .co textarea.f{ background:var(--plate); }
.co textarea.f:focus{ border-color:var(--gold); outline:none; }
.gc-count{ float:right; font-variant-numeric:tabular-nums; }

/* who it's for: the recipient's fields read as theirs, not the buyer's (M10 D-04) */
.co label.f.gc-their{ color:var(--ink); }
.co label.f.gc-their b{ color:var(--gold-ink); font-weight:400; }

/* when: two choices on one line, the date and its preset under "On a date" */
.gc-when{ display:flex; flex-wrap:wrap; gap:.5rem .6rem; }
.gc-when label{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--line); border-radius:999px;
  padding:.55rem 1rem; cursor:pointer; background:rgba(255,255,255,.03); font-size:.98rem; }
.gc-when label:has(input:checked){ border-color:var(--gold); color:var(--gold); }
.gc-when input{ accent-color:var(--gold); margin:0; }
.gc-date{ margin-top:.75rem; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.gc-date input.f{ width:auto; flex:0 1 12rem; }
.gc-date[hidden]{ display:none; }

/* the card itself, drawn from the lander's art */
.gc-art{ display:block; width:100%; height:auto; filter:drop-shadow(0 12px 18px rgba(0,0,0,.18)); }
.gc-preview{ width:min(11rem,48%); margin:.2rem auto 1rem; }
.gc-thumb{ width:3.1rem; flex:none; }
.co-sum .gc-sum-v{ overflow-wrap:anywhere; text-align:right; }

/* section 1 of the checkout: every card, the recipient address large (F01-15) */
.gc-cards{ list-style:none; margin:0; padding:0; display:grid; gap:.2rem; }
.gc-card{ display:flex; gap:.95rem; align-items:flex-start; padding:.85rem 0; border-top:1px solid var(--line); }
.gc-card:first-child{ border-top:0; padding-top:.2rem; }
.gc-card .gc-body{ min-width:0; flex:1; }
.gc-card .gc-amt{ margin:0; color:var(--muted); font-size:.92rem; }
.gc-card .gc-to{ margin:.1rem 0 .15rem; font-size:1.22rem; line-height:1.25; overflow-wrap:anywhere; color:var(--ink); }
.gc-card .gc-meta{ margin:0; color:var(--muted); font-size:.92rem; }
.gc-card .gc-msg{ margin:.35rem 0 0; color:var(--muted); font-size:.92rem; font-style:italic; overflow-wrap:anywhere; }
.gc-card .gc-acts{ display:flex; gap:.9rem; margin-top:.45rem; font-size:.92rem; }
.gc-card .gc-acts a, .gc-card .gc-acts button{ color:var(--ink); background:none; border:0; padding:0; font:inherit;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.gc-card .gc-acts a:hover, .gc-card .gc-acts button:hover{ color:var(--gold); }
.gc-add{ margin-top:.8rem; display:inline-flex; text-decoration:none; }
.gc-add[aria-disabled="true"]{ opacity:.5; pointer-events:none; }

/* a form button that reads as the hint's link ("Not you? Change", "Use a different email") */
.co .gc-linkish{ background:none; border:0; padding:0; font:inherit; color:var(--ink); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; }
.co .gc-linkish:hover{ color:var(--gold); }

/* the order summary: one line per card */
.co-sum .lines li .gc-line-to{ display:block; color:var(--muted); font-size:.85rem; overflow-wrap:anywhere; }
.co-sum .refund-line a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.cf-plate .lines li .gc-line-to{ display:block; color:var(--muted); font-size:.88rem; overflow-wrap:anywhere; }

/* the live .err sets display; a hidden bar stays hidden */
.err[hidden]{ display:none !important; }

/* the sign-in button under the email on a phone, so the address stays readable */
@media (max-width:520px){ .co .gc-signin{ flex-direction:column; } }

/* on a phone the order card comes last (as live); the card art stays a token there */
@media (max-width:700px){ .gc-preview{ width:6.5rem; margin-bottom:.6rem; } }