/* /gift (buy a tour gift card) and /gift/purchased (success). Mobile first; tokens from guidalia.css. */
.gift-buy { max-width: 1140px; margin: 0 auto; padding: var(--space-6) 1.25rem var(--space-7); position: relative; }
.gift-buy [hidden] { display: none !important; }

.gift-buy-intro { max-width: 640px; margin: 0 auto var(--space-5); text-align: center; }
.gift-buy-intro h1 { font-size: clamp(2.3rem, 6vw, 3.8rem); margin-bottom: var(--space-3); }
.gift-buy-intro h1::after {
    content: ''; display: block; width: 72px; height: 2px; margin: var(--space-3) auto 0;
    background: linear-gradient(90deg, transparent, var(--trail-500), transparent);
}
.gift-buy-sub { color: var(--text-2); font-size: 1.08rem; line-height: 1.6; }

/* Coming soon */
.gift-buy-soon {
    max-width: 640px; margin: 0 auto; text-align: center; padding: 0 0 2.5rem;
    background: var(--ink-800); border: 1px solid var(--hairline); border-radius: var(--radius-2); overflow: hidden;
}
.gift-buy-soon img { display: block; width: 100%; height: auto; margin-bottom: 1.75rem; }
.gift-buy-soon h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 0.75rem; padding: 0 1.5rem; }
.gift-buy-soon p { color: var(--text-2); padding: 0 1.5rem; }

/* Layout: preview on top on phones, sticky beside the form on wide screens. */
.gift-buy-grid { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 960px) {
    .gift-buy-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-6); }
    .gift-preview { position: sticky; top: 96px; }
}

/* Gift card preview (also the summary card on the success page) */
.gift-preview-card {
    background: linear-gradient(160deg, rgba(0,168,107,0.10), rgba(255,255,255,0.02) 55%), var(--ink-800);
    border: 1px solid rgba(0,168,107,0.22); border-radius: var(--radius-2); overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 60px rgba(0,168,107,0.08);
}
.gift-preview-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; }
.gift-preview-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem 1.75rem 1.75rem; }
.gift-preview-brand { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--waypoint); }
.gift-preview-amount { font-family: var(--font-display); font-weight: 580; font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.15; color: var(--text-1); }
.gift-preview-for { font-size: 1.05rem; font-weight: 600; color: var(--trail-400); overflow-wrap: anywhere; }
.gift-preview-message {
    margin: 0.25rem 0 0; padding: 0.5rem 0 0.5rem 1rem; padding-inline: 1rem 0; border-inline-start: 2px solid var(--trail-500);
    font-family: var(--font-display); font-style: italic; color: var(--text-2); line-height: 1.55;
    overflow-wrap: anywhere; white-space: pre-line;
}
.gift-preview-valid { margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-3); }

/* Form */
.gift-buy-form {
    background: rgba(255,255,255,0.02); border: 1px solid var(--hairline); border-radius: var(--radius-2);
    padding: 1.5rem 1.25rem; display: grid; gap: 1.75rem;
}
@media (min-width: 640px) { .gift-buy-form { padding: 2.25rem 2.25rem 2rem; } }
.gift-step { border: 0; min-width: 0; }
.gift-step + .gift-step { padding-top: 1.75rem; border-top: 1px solid var(--hairline); }
/* A floated legend leaves the fieldset border, so the separator line stays above the step title. */
.gift-step legend {
    float: left; width: 100%; padding: 0;
    display: flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1.05rem; margin-bottom: 1rem; color: var(--text-1);
}
.gift-step legend + * { clear: both; }
.gift-step > :not(legend) + * { margin-top: 1rem; }
.gift-step-num {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 auto;
    border-radius: 50%; font-size: 0.8rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--trail-700), var(--trail-500));
}
.gift-step .form-group { margin-bottom: 0; }
.gift-hint { color: var(--text-2); font-size: 0.9rem; line-height: 1.5; }
.gift-code-sent { margin: 0 0 0.6rem; }
[data-email-step] > * + * { margin-top: 1rem; }

/* Amount pills */
.gift-amounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
@media (min-width: 480px) { .gift-amounts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gift-amount { position: relative; cursor: pointer; }
.gift-amount input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.gift-amount span {
    display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0.5rem;
    border-radius: 14px; border: 1px solid var(--hairline); background: rgba(255,255,255,0.04);
    font-weight: 700; font-size: 1.1rem; color: var(--text-1);
    transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.gift-amount:hover span { border-color: rgba(255,255,255,0.18); }
.gift-amount input:checked + span {
    border-color: var(--trail-500); background: rgba(0,168,107,0.12); box-shadow: 0 0 0 1px var(--trail-500), 0 0 24px var(--trail-glow);
}
.gift-amount input:focus-visible + span { outline: 2px solid var(--trail-400); outline-offset: 3px; }
.gift-custom .form-input { max-width: 200px; font-size: 1.1rem; font-weight: 600; }
.form-input.is-invalid { border-color: var(--error); }

/* Message counter */
.gift-message-input { min-height: 110px; }
.gift-counter { display: block; margin-top: 0.35rem; text-align: end; font-size: 0.8rem; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Banner picker */
.gift-banner-legend {
    display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-2);
    margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.gift-banners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
@media (min-width: 480px) { .gift-banners { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gift-banner-option { position: relative; display: block; cursor: pointer; border-radius: 12px; }
.gift-banner-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.gift-banner-option img {
    display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; border-radius: 12px;
    border: 2px solid transparent; opacity: 0.72;
    transition: opacity var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.gift-banner-option:hover img { opacity: 1; }
.gift-banner-option input:checked + img { opacity: 1; border-color: var(--trail-500); box-shadow: 0 0 18px var(--trail-glow); }
.gift-banner-option input:focus-visible + img { outline: 2px solid var(--trail-400); outline-offset: 3px; }

/* Email + code */
.gift-inline { display: flex; gap: 0.6rem; }
.gift-inline .form-input { flex: 1 1 auto; min-width: 0; }
.gift-inline-btn { padding: 12px 18px; flex: 0 0 auto; white-space: nowrap; font-size: 0.95rem; }
.gift-code-input { letter-spacing: 0.4em; font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; max-width: 220px; }
@media (max-width: 420px) {
    .gift-inline { flex-direction: column; }
    .gift-code-input { max-width: none; }
}
.gift-verified {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 12px;
    background: rgba(0,168,107,0.10); border: 1px solid rgba(0,168,107,0.3); color: var(--text-1); font-weight: 600;
    overflow-wrap: anywhere;
}
.gift-verified::before { content: '\2713'; color: var(--trail-400); font-weight: 700; }
.gift-buy-error {
    background: rgba(255, 107, 53, 0.1); border: 1px solid rgba(255, 107, 53, 0.3);
    border-radius: 12px; padding: 0.85rem 1rem; color: var(--error); font-size: 0.92rem;
}
.is-busy { opacity: 0.6; cursor: progress; }

/* Terms, pay, footnote */
.gift-terms label a { color: var(--trail-400); }
.gift-pay { width: 100%; padding-block: 16px; font-size: 1.08rem; }
.gift-pay:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
.gift-footnote { display: flex; gap: 0.5rem; align-items: flex-start; color: var(--text-3); font-size: 0.85rem; line-height: 1.5; margin-top: -0.75rem; }
.gift-footnote svg { flex: 0 0 auto; margin-top: 0.15rem; color: var(--trail-500); }

/* Success page */
.gift-processing { max-width: 560px; margin: var(--space-6) auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.gift-processing h1 { font-size: clamp(2rem, 5vw, 3rem); }
.gift-processing .btn-ghost { margin-top: 1rem; }
.gift-spinner {
    width: 56px; height: 56px; margin-bottom: 0.75rem; border-radius: 50%;
    border: 3px solid rgba(0,168,107,0.18); border-top-color: var(--trail-400);
    animation: gift-spin 0.9s linear infinite;
}
@keyframes gift-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gift-spinner { animation-duration: 3s; } }

.gift-done-grid { display: grid; gap: var(--space-5); align-items: start; max-width: 1000px; margin: 0 auto; }
@media (min-width: 900px) { .gift-done-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.gift-share-panel {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem;
    background: rgba(255,255,255,0.02); border: 1px solid var(--hairline); border-radius: var(--radius-2); padding: 2rem 1.25rem;
}
.gift-qr { width: 200px; height: 200px; border-radius: 16px; background: #fff; padding: 10px; image-rendering: pixelated; }
.gift-code-label { margin-top: 0.75rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.gift-code { font-size: 1.8rem; font-weight: 700; letter-spacing: 0.12em; color: var(--trail-400); font-variant-numeric: tabular-nums; }
.gift-link { color: var(--text-2); font-size: 0.9rem; overflow-wrap: anywhere; }
.gift-share-title { margin-top: 1rem; font-weight: 700; }
.gift-share { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; width: 100%; max-width: 420px; }
.gift-share-btn { padding: 12px 14px; font-size: 0.95rem; }
.gift-print-link { width: 100%; max-width: 420px; margin-top: 0.75rem; }
.gift-emailed { margin-top: 0.5rem; color: var(--text-2); font-size: 0.9rem; overflow-wrap: anywhere; }

/* Manage page (/gift/manage/{token}) */
.gift-manage-ok {
    background: rgba(0,168,107,0.10); border: 1px solid rgba(0,168,107,0.3);
    border-radius: 12px; padding: 0.85rem 1rem; color: var(--text-1); font-size: 0.92rem;
    max-width: 1000px; margin: 0 auto var(--space-5);
}
.gift-manage > .gift-buy-error { max-width: 1000px; margin: 0 auto var(--space-5); }
.gift-manage-status { font-size: 1.1rem; font-weight: 700; color: var(--text-1); }
.gift-manage-edit, .gift-manage-withdraw { max-width: 1000px; margin: var(--space-5) auto 0; }
.gift-manage-withdraw h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.gift-manage-withdraw .btn-ghost { margin-top: 0.75rem; }
.gift-manage-confirm form { width: 100%; max-width: 420px; }
.gift-manage-confirm .btn-primary-glow { width: 100%; }