/* The Gift vouchers page (vouchers.htm): what the Special offers stylesheet (offers.css) doesn't already have. Plain CSS: the site's
   Tailwind file is pre-built, so classes it doesn't already contain would do nothing. */
.gv-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.gv-main { max-width: 64rem; }

/* the introduction */
.gv-intro > * + * { margin-top: .8rem; }
.gv-lead { font-size: 1.15rem; color: #374151; max-width: 46rem; }
.gv-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.gv-photos img { width: 100%; aspect-ratio: 16 / 9; max-height: 9.5rem; object-fit: cover; border-radius: .5rem; display: block; }
@media (max-width: 560px) { .gv-photos { grid-template-columns: 1fr 1fr; } .gv-photos img:nth-child(3) { display: none; } }
.gv-benefits { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 640px) { .gv-benefits { grid-template-columns: 1fr; } }
.gv-benefits li { display: grid; grid-template-columns: auto 1fr; column-gap: .65rem; align-items: center; background: #fff; border: 1px solid #e5e7eb; border-radius: .6rem; padding: .7rem .85rem; }
.gv-benefits svg { grid-row: span 2; fill: none; stroke: #b91c1c; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gv-benefits strong { font-size: 1.02rem; }
.gv-benefits span { color: #4b5563; font-size: .95rem; }
.gv-about { color: #4b5563; }

/* progress: "Step 2 of 5" and five slim bars */
.gv-progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; margin-top: 1.1rem; }
.gv-progress span { height: .3rem; border-radius: 1rem; background: #e5e7eb; }
.gv-progress span.on { background: #b91c1c; }
.gv-step-label { font-size: .95rem; font-weight: 600; color: #4b5563; margin: .45rem 0 .75rem; }

/* the steps, and the running summary beside them on wide screens (under them on a phone) */
.gv-layout { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 900px) { .gv-layout.gv-with-summary { grid-template-columns: minmax(0, 1fr) 18rem; } .gv-summary { position: sticky; top: 1rem; } }
.gv-step > * + * { margin-top: .85rem; }
.gv-step[hidden], .gv-summary[hidden] { display: none; }
.gv-h { font-size: 1.6rem; font-weight: 700; line-height: 1.25; }
.gv-h:focus { outline: none; }
.gv-h3 { font-size: 1.15rem; font-weight: 700; margin-top: 1.4rem !important; }
.gv-nav { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center; margin-top: 1.25rem !important; }
.gv-nav .of-btn { margin-left: auto; }
@media (max-width: 520px) { .gv-nav { flex-direction: column-reverse; align-items: stretch; } .gv-nav .of-btn, .gv-nav .of-btn2 { width: 100%; margin-left: 0; } }
.gv-err { color: #b91c1c; font-weight: 600; }
.gv-err:empty { display: none; }
.gv-reassure { font-weight: 600; color: #166534; }
.gv-age { background: #111827; color: #fff; border-radius: .5rem; padding: .6rem 1rem; font-weight: 600; }

/* big choices: a whole card is the radio button's label */
.gv-options { border: 0; padding: 0; margin: 0; min-width: 0; }
.gv-options legend { font-weight: 600; margin-bottom: .5rem; }
.gv-cards { display: grid; gap: .65rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.gv-cards-people { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
.gv-cards-2 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.gv-card { position: relative; display: grid; gap: .25rem; align-content: start; padding: .9rem 1rem .9rem 2.6rem; border: 2px solid #d1d5db; border-radius: .65rem; background: #fff; cursor: pointer; min-height: 3.5rem; }
.gv-card:hover { border-color: #9ca3af; }
.gv-card input { position: absolute; left: .95rem; top: 1.05rem; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: #b91c1c; }
.gv-card:focus-within { box-shadow: 0 0 0 3px #fecaca; }
.gv-card:has(input:checked) { border-color: #b91c1c; background: #fef2f2; }
.gv-card-title { font-weight: 700; font-size: 1.05rem; }
.gv-card-text { color: #4b5563; font-size: .93rem; }
.gv-card-price { color: #b91c1c; font-weight: 700; font-size: .95rem; }
.gv-panel { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: .6rem; padding: .75rem 1rem; }
.gv-panel h3 { font-weight: 700; font-size: 1rem; margin-bottom: .35rem; }
.gv-panel ul { list-style: disc; padding-left: 1.25rem; }
.gv-cover-q { margin-top: 1rem !important; }

/* I'll choose: the shared cards */
.gv-acts-msg { font-weight: 600; color: #374151; }
.gv-acts-msg.ok { color: #166534; }

/* Your gift so far */
.gv-summary { background: #fff; border: 1px solid #e5e7eb; border-left: 5px solid #b91c1c; border-radius: .6rem; padding: .9rem 1rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .05); }
.gv-summary h2 { font-weight: 700; font-size: 1.1rem; margin-bottom: .4rem; }
.gv-summary ul { list-style: none; padding: 0; display: grid; gap: .3rem; font-size: .95rem; }
.gv-summary li::before { content: "✓"; color: #166534; font-weight: 700; margin-right: .4rem; }
.gv-summary-total { margin-top: .7rem; font-size: .95rem; }
.gv-summary-total strong { font-size: 1.45rem; color: #111827; margin-right: .25rem; }
.gv-summary-off { display: block; color: #166534; font-weight: 600; }

/* step 4: the preview, laid out like page 1 of the voucher */
.gv-preview-label { font-weight: 600; color: #4b5563; }
.gv-vcard { max-width: 26rem; border: 1px solid #e5e7eb; border-radius: .5rem; overflow: hidden; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.gv-vcard-photo { width: 100%; aspect-ratio: 2.2 / 1; object-fit: cover; display: block; }
.gv-vcard-band { background: #b91c1c; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem .9rem; }
.gv-vcard-title { font-weight: 800; font-size: 1.25rem; }
.gv-vcard-brand { font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-align: right; }
.gv-vcard-body { padding: .8rem .9rem 1rem; display: grid; gap: .35rem; }
.gv-vcard-small { font-size: .75rem; color: #6b7280; }
.gv-vcard-name { font-size: 1.35rem; font-weight: 800; color: #111827; overflow-wrap: anywhere; }
.gv-vcard-what { font-size: .88rem; color: #111827; }
.gv-vcard-msg { font-size: .85rem; color: #374151; font-style: italic; overflow-wrap: anywhere; }
.gv-vcard-code { display: grid; gap: .1rem; background: #fef2f2; border-left: 4px solid #b91c1c; padding: .45rem .65rem; margin-top: .3rem; }
.gv-vcard-code strong { font-size: .95rem; color: #111827; }
.gv-vcard-age { background: #111827; color: #fff; text-align: center; font-weight: 700; font-size: .82rem; padding: .4rem; border-radius: .25rem; margin-top: .3rem; }

/* step 5 */
.gv-review { display: grid; gap: 0; border: 1px solid #e5e7eb; border-radius: .6rem; overflow: hidden; }
.gv-review-row { display: grid; grid-template-columns: 11rem 1fr; gap: .75rem; padding: .6rem .9rem; border-top: 1px solid #f3f4f6; background: #fff; }
.gv-review-row:first-child { border-top: 0; }
@media (max-width: 520px) { .gv-review-row { grid-template-columns: 1fr; gap: .1rem; } }
.gv-review dt { font-weight: 600; color: #4b5563; }
.gv-review dd { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; margin: 0; }
.gv-change { font: inherit; font-size: .9rem; color: #b91c1c; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.gv-how { list-style: decimal; padding-left: 1.4rem; display: grid; gap: .35rem; }
.gv-know { list-style: disc; padding-left: 1.3rem; display: grid; gap: .35rem; }
.gv-terms { border: 1px solid #e5e7eb; border-radius: .5rem; padding: .6rem .9rem; background: #fff; }
.gv-terms summary { cursor: pointer; font-weight: 600; }
.gv-terms[open] summary { margin-bottom: .6rem; }
.gv-code-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }
.gv-code-row label { flex: 1 1 14rem; }
.gv-code-in { text-transform: uppercase; }
.gv-tick-age { background: #fef2f2; border: 1px solid #fecaca; border-radius: .5rem; padding: .6rem .8rem; }

/* a voucher's own page (its QR code) */
.gv-code { font-size: 2rem; font-weight: 800; letter-spacing: .04em; color: #111827; margin: .25rem 0; }
.gv-kicker { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: #b91c1c; margin: 0; }
.gv-what { font-size: 1.15rem; font-weight: 600; }
.gv-state { display: inline-block; font-weight: 700; border-radius: .25rem; padding: .15rem .6rem; }
.gv-state.ok { background: #dcfce7; color: #166534; }
.gv-state.no { background: #fee2e2; color: #991b1b; }
.gv-check > * + * { margin-top: .6rem; }