/*
 * volume-intake.css — the pre-checkout intake panel (J3 / J3b, screens B2/B3/B4).
 *
 * Shipped as its own <link> from storyboard.html, beside its four scripts. It is
 * NOT in dist/storyboard-complete.min.css for the same reason the panel is not in
 * either JS bundle: the whole component travels together, is deployed together,
 * and is proved together at the edge (Ralph rule 12).
 *
 * The brand variables are the ones setup-wizard.css already reads, with the same
 * literal fallbacks, so the panel matches the wizard a buyer may have just used
 * even on a page where the token sheet has not loaded.
 *
 * TYPE SIZE. Nothing here is under 15px and the inputs are 16px. Under 16px iOS
 * Safari zooms the whole page on focus, and half the people who reach this panel
 * are setting up a parent on a phone in a hurry.
 */

.vi-scrim {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(30, 42, 69, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 24px 16px 48px;
}

.vi-sheet {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: #fffdf9;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    padding: 28px 24px 32px;
}

/* FIXED, not absolute, and 44px (2026-09-17).
 *
 * The sheet is ~1590px of form on a 390x844 phone and the SCRIM is what
 * scrolls, so an absolutely-positioned close button at top:10px left the
 * viewport after one swipe -- measured at top:-706 halfway down the form. Click
 * outside is deliberately disabled (it used to eat everything typed), Escape
 * does not exist on a phone, and browser-back leaves the page entirely. So at
 * the bottom of the form the only ways out were "pay" and "leave the site".
 *
 * Fixed to the viewport with a solid background so it is legible over whatever
 * is behind it, and 44px because that is the tap-target floor. */
.vi-close {
    position: fixed;
    top: 10px;
    right: 12px;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 253, 249, 0.92);
    box-shadow: 0 1px 4px rgba(30, 42, 69, 0.18);
    font-size: 26px;
    line-height: 1;
    color: #6b7280;
    cursor: pointer;
    border-radius: 50%;
}

.vi-close:hover {
    background: #f3f4f6;
    color: var(--brand-charcoal, #3d3528);
}

.vi-panel h2 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.25;
    color: var(--brand-navy, #0f2c4c);
}

.vi-lede {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--brand-charcoal, #3d3528);
}

.vi-field {
    margin-bottom: 18px;
}

.vi-field > label {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--brand-navy, #0f2c4c);
}

.vi-optional {
    font-weight: 400;
    color: #6b7280;
}

.vi-field input[type="text"],
.vi-field input[type="tel"],
.vi-field input[type="email"],
.vi-field input[type="date"],
.vi-field select,
.vi-field textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 11px 12px;
    font-size: 16px;
    font-family: inherit;
    color: var(--brand-charcoal, #3d3528);
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
}

.vi-field input:focus,
.vi-field select:focus,
.vi-field textarea:focus {
    outline: none;
    border-color: var(--brand-orange, #e09a1b);
    box-shadow: 0 0 0 3px rgba(224, 154, 27, 0.18);
}

.vi-field textarea {
    resize: vertical;
}

.vi-help {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: #6b7280;
}

/* The start-date control. Given a little more room than the fields around it,
   because the day chosen here is the day printed on the gift card. */
.vi-startdate {
    padding: 14px 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.vi-start-extra {
    margin-top: 10px;
}

.vi-start-extra[hidden] {
    display: none;
}

/* Checkbox rows: the box sits beside the sentence, not above it, and the whole
   sentence is the click target. These are the consent checkboxes, so the words
   have to be legible at full width rather than squeezed into a column. */
.vi-check > label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--brand-charcoal, #3d3528);
    cursor: pointer;
}

.vi-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    accent-color: var(--brand-orange, #e09a1b);
}

/* FUNN-GUEST-CORS-1004 B: the guest's email, echoed beside the pay button. */
.vi-email-echo {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--brand-charcoal, #3d3528);
}

.vi-email-echo strong {
    word-break: break-all;
}

/* FUNN-GUEST-CORS-1004: the landline escape sits under the attestation, a
   step smaller, so it reads as the exception and not a second consent. */
.vi-landline > label {
    font-size: 14px;
    color: var(--brand-muted, #6b6253);
}

/* BUY-REAL-WALK-PREP-1007: 44px hit areas at 390 (OPS-DECISIONS-1007a item 7).
   The landline sentence is one line, so its label was 22px high; the
   self/someone switch link was 17px. Layout only, no wording. */
.vi-check > label {
    box-sizing: border-box;
    min-height: 44px;
}

.vi-landline > label {
    padding: 11px 0;
}

.vi-price {
    margin: 22px 0 18px;
    padding: 14px 16px;
    background: #faf3e7;
    border: 1px solid #e0cba7;
    border-radius: 10px;
}

.vi-price-line {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--brand-navy, #0f2c4c);
}

.vi-guarantee {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--brand-charcoal, #3d3528);
}

.vi-submit {
    display: block;
    width: 100%;
    padding: 14px 18px;
    font-size: 17px;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    background: var(--brand-orange, #e09a1b);
    border: none;
    border-radius: 999px;
    cursor: pointer;
}

.vi-submit:hover:not(:disabled) {
    background: #c98714;
}

.vi-submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.vi-switch {
    margin: 16px 0 0;
    text-align: center;
    font-size: 15px;
    color: #6b7280;
}

.vi-switch a {
    color: var(--brand-navy, #0f2c4c);
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
}

/* Refusals. Every one of these is a sentence the SERVER sent; the panel decides
   nothing. Red is reserved for them so a buyer can find the field that stopped
   the form without reading it twice. */
.vi-field-error {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: #b42318;
}

.vi-input-error {
    border-color: #b42318 !important;
}

.vi-form-error {
    margin: 0 0 16px;
    padding: 11px 14px;
    font-size: 15px;
    line-height: 1.45;
    color: #7a271a;
    background: #fef3f2;
    border: 1px solid #fecdca;
    border-radius: 8px;
}

/* A soft warning is NOT a refusal: the intake was accepted (201) and this is the
   one thing worth a second look, e.g. the buyer entered their own number as the
   storyteller's. Amber, not red, on purpose. */
.vi-warning {
    margin: 0 0 14px;
    padding: 11px 14px;
    font-size: 15px;
    line-height: 1.45;
    color: #7a4f01;
    background: #fefce8;
    border: 1px solid #e0cba7;
    border-radius: 8px;
}

@media (max-width: 520px) {
    .vi-scrim {
        padding: 0;
    }

    .vi-sheet {
        min-height: 100%;
        max-width: none;
        border-radius: 0;
        padding: 52px 18px 40px;
    }
}