/**
 * gift-form.css
 *
 * NEW (2026-10-07, Gift/Share/Trail-Aware Links Section 4.1). The gift
 * purchase modal's own chrome, styled as adventure-modal.css's own direct
 * sibling (#gift-modal instead of #adventure-modal, same structure) --
 * same split as that file's own header describes (shared stylesheet +
 * shared script, loaded via plain <link>/<script> tags on every page
 * that offers the "Give An Adventure" trigger).
 *
 * Everything INSIDE the modal body reuses the real, live .paf-* classes
 * already defined in styles.css (the same booking-flow step chrome --
 * .paf-q/.paf-sub, .paf-options/.paf-option-btn, .paf-text-input,
 * .paf-headcount-select, .paf-price-card/.paf-price-line/.paf-price-total,
 * .paf-policy-agree, .paf-payment-section/.paf-payment-element/
 * .paf-payment-error, .paf-reserve-btn, .paf-footer/.paf-nav-prev/
 * .paf-nav-next, .paf-progress-bar/.paf-progress-fill,
 * .paf-closing-headline/.paf-closing-dynamic) rather than inventing a
 * second, parallel set -- only the handful of elements genuinely unique
 * to this flow (the trail-attach card, the delivery-timing radio pair,
 * the confirmation's two-part layout) get new classes below, prefixed
 * .gift- to keep them visually distinct from .paf- in a stylesheet diff.
 */

#gift-modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:9999; align-items:center; justify-content:center; }
#gift-modal-inner { position:relative; width:92%; max-width:640px; max-height:90vh; background:white; border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.4); display:flex; flex-direction:column; }
#gift-modal-header { background:#2A4747; padding:0.75rem 1.4rem; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
#gift-modal-header img { height:68px; width:auto; }
#gift-modal-close { background:none; border:none; font-size:1.6rem; cursor:pointer; color:rgba(255,255,255,0.7); line-height:1; padding:0; transition:color 0.2s; }
#gift-modal-close:hover { color:white; }
#gift-form-root { flex:1; display:flex; flex-direction:column; min-height:0; overflow:hidden; padding:1.8rem 1.8rem 1.4rem; background:white; }

@media (max-width: 768px) {
  #gift-modal { align-items:stretch; justify-content:stretch; }
  #gift-modal-inner { width:100%; max-width:100%; height:100%; max-height:100%; border-radius:0; box-shadow:none; }
  #gift-modal-close { font-size:2rem; }
}

/* Step 1's kit-count readout used to be a single small muted
   .gift-count-note line (design proposal's own "Covers the booking fee
   and a gear kit for everyone you've selected..." sentence). Replaced
   2026-10-07 (Chunk 9, Airey's design-revision direction) with the same
   .paf-price-card/.paf-kit-disclosure breakdown Step 4 already uses --
   see gift-form.js's renderStep1 -- so .gift-count-note is no longer
   referenced anywhere; removed rather than left as dead CSS.

   Airey also flagged the modal's .paf-sub intro paragraphs (shared,
   styles.css-defined, used by both this flow and the booking flow) as
   reading too small. Scoped the bump to #gift-modal specifically rather
   than changing .paf-sub globally, since the booking flow's own
   typography wasn't part of this round's feedback and shouldn't move
   as a side effect of it. */
#gift-modal .paf-sub { font-size: 0.92rem; }

/* Step 2 (only rendered when a trail arrived pre-seeded, e.g. from a
   Peaks to Pools piece's "Gift This Adventure" link) -- a statement, not
   a question, per the design proposal's Section 2 revision. */
.gift-trail-card { display:flex; gap:0.9rem; background: var(--sand-beige); border-radius: 10px; padding: 1rem; margin-bottom: 0.9rem; align-items:flex-start; }
.gift-trail-card img { width: 92px; height: 92px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.gift-trail-card-name { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; color: var(--dark-pine); margin-bottom: 0.3rem; }
.gift-trail-card-overview { font-size: 0.8rem; color: rgba(42,71,71,0.7); line-height: 1.5; }
.gift-trail-clear { font-size: 0.78rem; color: var(--mountain-pink); text-decoration: underline; background:none; border:none; cursor:pointer; padding:0; }

/* Step 3: delivery-timing radio pair -- same visual language as
   .paf-option-btn (tinted-pink selected state), built as its own small
   component since it needs a nested date/time picker on the second
   option, which .paf-option-btn doesn't carry. */
.gift-radio-opt { border: 1px solid rgba(42,71,71,0.18); border-radius: 10px; padding: 0.9rem 1.1rem; margin-bottom: 0.6rem; cursor: pointer; }
.gift-radio-opt:hover { border-color: var(--mountain-pink); }
.gift-radio-opt.is-selected { background: rgba(245,130,113,0.08); border-color: var(--mountain-pink); }
.gift-radio-title { font-weight: 600; font-size: 0.88rem; color: var(--dark-pine); margin-bottom: 0.2rem; }
.gift-radio-sub { font-size: 0.78rem; color: rgba(42,71,71,0.65); line-height: 1.5; }
.gift-schedule-fields { display:flex; gap: 0.6rem; margin-top: 0.7rem; }
.gift-schedule-fields input { flex: 1 1 0; }

/* Confirmation -- two distinct moments (purchase succeeded vs. when the
   recipient actually gets the email), per the design proposal's own
   revision note on the old single "It's sent" screen. */
.gift-confirm-sent-note { font-size: 0.85rem; color: var(--dark-pine); background: var(--sand-beige); border-radius: 8px; padding: 0.9rem 1.1rem; margin-top: 1rem; line-height: 1.6; }