/* =========================================================
   HALLOWEEN AT THE FAIR
   TICKETS PAGE
   Production Stylesheet
========================================================= */


/* =========================================================
   DESIGN TOKENS
========================================================= */

:root {
    --haf-bg: #24101f;
    --haf-bg-deep: #160b18;

    --haf-panel: #4a2d35;
    --haf-panel-mid: #432830;
    --haf-panel-deep: #291820;

    --haf-orange: #f47a1f;
    --haf-orange-bright: #ff9e3d;
    --haf-orange-light: #ffb259;

    --haf-gold: #f5c66c;
    --haf-gold-soft: #ffe0a1;

    --haf-cream: #fff3d6;
    --haf-text: #f8ead7;
    --haf-muted: #dbc5ad;

    --haf-border: rgba(255, 234, 196, 0.18);
    --haf-border-strong: rgba(244, 122, 31, 0.48);

    --haf-success: #d7efd2;
    --haf-success-bg: rgba(67, 124, 70, 0.26);
    --haf-success-border: rgba(118, 185, 113, 0.50);

    --haf-error: #ffd7cf;
    --haf-error-bg: rgba(146, 54, 43, 0.27);
    --haf-error-border: rgba(226, 111, 92, 0.50);

    --haf-radius-lg: 26px;
    --haf-radius-md: 16px;
    --haf-radius-sm: 10px;

    --haf-shadow:
        0 24px 64px rgba(0, 0, 0, 0.34);

    --haf-transition:
        160ms ease;
}


/* =========================================================
   RESET / BASE
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;

    background:
        radial-gradient(
            circle at top left,
            rgba(244, 122, 31, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at top right,
            rgba(111, 61, 114, 0.18),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #2b1830 0%,
            #20101f 48%,
            #130912 100%
        );
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--haf-text);
}

img {
    max-width: 100%;
}

a {
    color: var(--haf-gold-soft);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--haf-orange-bright);
}


/* =========================================================
   PAGE WRAPPER
========================================================= */

.haf-page {
    width: 100%;

    padding:
        18px 18px 42px;
}

.haf-registration {
    width:
        min(100%, 1480px);

    margin:
        0 auto;

    overflow:
        hidden;

    border:
        1px solid var(--haf-border);

    border-radius:
        var(--haf-radius-lg);

    background:
        var(--haf-panel-deep);

    box-shadow:
        var(--haf-shadow);
}


/* =========================================================
   DESKTOP TWO-COLUMN LAYOUT
========================================================= */

.haf-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 48%)
        minmax(0, 52%);

    align-items: stretch;
}


/* =========================================================
   ART PANEL
========================================================= */

.haf-art-panel {
    position: relative;

    min-width: 0;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    background:
        var(--haf-bg-deep);

    border-right:
        1px solid var(--haf-border);
}

.haf-art-panel img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
    object-position: center top;
}


/* =========================================================
   CONTENT PANEL
========================================================= */

.haf-content-panel {
    display: flex;
    flex-direction: column;

    min-width: 0;

    background:
        radial-gradient(
            circle at top right,
            rgba(245, 198, 108, 0.065),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #4d2b37 0%,
            #402632 54%,
            #37202a 100%
        );
}


/* =========================================================
   HEADER / OFFER
========================================================= */

.haf-header {
    padding:
        24px 34px 17px;

    border-bottom:
        1px solid rgba(255, 234, 196, 0.10);
}

.haf-eyebrow {
    margin:
        0 0 6px;

    font-size:
        0.66rem;

    font-weight:
        900;

    line-height:
        1.35;

    letter-spacing:
        0.16em;

    color:
        var(--haf-gold);
}

.haf-header h1 {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(2.25rem, 3.2vw, 3.55rem);

    line-height:
        0.98;

    color:
        var(--haf-cream);

    text-wrap:
        balance;
}

.haf-highlights {
    display: flex;
    flex-wrap: wrap;

    gap:
        7px;

    margin:
        13px 0 0;
}

.haf-highlights span {
    padding:
        5px 9px;

    border:
        1px solid rgba(255, 214, 137, 0.27);

    border-radius:
        999px;

    background:
        rgba(255, 244, 218, 0.055);

    font-size:
        0.69rem;

    font-weight:
        850;

    line-height:
        1.1;

    color:
        var(--haf-gold-soft);
}

.haf-intro {
    margin:
        12px 0 0;

    max-width:
        650px;

    font-size:
        0.88rem;

    line-height:
        1.48;

    color:
        var(--haf-muted);
}


/* =========================================================
   FORM
========================================================= */

.haf-form {
    flex: 1;

    width: 100%;

    padding:
        18px 34px 14px;
}


/* =========================================================
   FIELD GRID
========================================================= */

.haf-grid {
    display: grid;

    gap:
        14px;
}

.haf-grid-two {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}


/* =========================================================
   STANDARD FIELDS
========================================================= */

.haf-field {
    margin-bottom:
        13px;
}

.haf-field label,
.haf-consent legend {
    display: block;

    margin-bottom:
        6px;

    font-size:
        0.82rem;

    font-weight:
        850;

    color:
        var(--haf-cream);
}

.haf-required {
    color:
        var(--haf-orange-bright);
}

.haf-field input,
.haf-field select {
    display: block;

    width: 100%;

    height: 44px;
    min-height: 44px;

    padding:
        10px 12px;

    border:
        1px solid var(--haf-border);

    border-radius:
        var(--haf-radius-sm);

    outline:
        none;

    background:
        rgba(255, 247, 229, 0.07);

    color:
        var(--haf-text);

    font:
        inherit;

    font-size:
        0.92rem;

    transition:
        border-color var(--haf-transition),
        background var(--haf-transition),
        box-shadow var(--haf-transition);
}

.haf-field input:hover,
.haf-field select:hover {
    background:
        rgba(255, 247, 229, 0.095);

    border-color:
        rgba(255, 231, 191, 0.27);
}

.haf-field input:focus,
.haf-field select:focus {
    border-color:
        var(--haf-orange-bright);

    background:
        rgba(255, 247, 229, 0.115);

    box-shadow:
        0 0 0 3px
        rgba(244, 122, 31, 0.13);
}

.haf-field select option {
    color: #111;

    background:
        #fff7e8;
}

.haf-field-note {
    margin:
        5px 1px 0;

    font-size:
        0.72rem;

    line-height:
        1.35;

    color:
        var(--haf-muted);
}


/* =========================================================
   DATE FIELD
   Explicit sizing improves Safari consistency
========================================================= */

.haf-field input[type="date"] {
    width: 100%;

    height: 44px;
    min-height: 44px;

    padding:
        10px 12px;

    line-height:
        normal;

    color:
        var(--haf-text);
}


/* =========================================================
   TICKET QUANTITY
   Intentional emphasis
========================================================= */

.haf-ticket-field {
    margin-top:
        0;

    margin-bottom:
        14px;
}

.haf-ticket-field label {
    margin-bottom:
        7px;

    font-size:
        1.02rem;

    font-weight:
        850;

    color:
        var(--haf-cream);
}

.haf-ticket-field select {
    height:
        50px;

    min-height:
        50px;

    padding:
        0 14px;

    border:
        2px solid var(--haf-orange);

    border-radius:
        10px;

    background:
        rgba(117, 69, 66, 0.72);

    color:
        #fff4dc;

    font-size:
        1rem;

    font-weight:
        750;

    cursor:
        pointer;
}

.haf-ticket-field select:hover {
    border-color:
        var(--haf-orange-bright);

    background:
        rgba(129, 74, 70, 0.77);
}

.haf-ticket-field select:focus {
    border-color:
        #ffad45;

    background:
        rgba(129, 74, 70, 0.80);

    box-shadow:
        0 0 0 3px
        rgba(255, 157, 55, 0.16);
}


/* =========================================================
   CONSENT
========================================================= */

.haf-consent {
    margin:
        3px 0 0;

    padding:
        13px 14px 14px;

    border:
        1px solid var(--haf-border);

    border-radius:
        var(--haf-radius-md);

    background:
        rgba(255, 244, 218, 0.045);
}

.haf-consent legend {
    padding:
        0 6px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        1rem;

    line-height:
        1.1;

    color:
        var(--haf-gold-soft);
}

.haf-checkbox-row {
    display: grid;

    grid-template-columns:
        20px minmax(0, 1fr);

    gap:
        9px;

    align-items:
        start;

    cursor:
        pointer;

    font-size:
        0.76rem;

    line-height:
        1.42;

    color:
        var(--haf-muted);
}

.haf-checkbox-row input {
    width:
        16px;

    height:
        16px;

    margin-top:
        2px;

    accent-color:
        var(--haf-orange);
}

.haf-legal-copy {
    margin:
        9px 0 0;

    font-size:
        0.69rem;

    line-height:
        1.4;

    color:
        var(--haf-muted);
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.haf-submit {
    width:
        100%;

    min-height:
        50px;

    margin-top:
        13px;

    padding:
        0 18px;

    border:
        0;

    border-radius:
        12px;

    cursor:
        pointer;

    font:
        inherit;

    font-size:
        0.94rem;

    font-weight:
        950;

    letter-spacing:
        0.01em;

    color:
        #281208;

    background:
        linear-gradient(
            180deg,
            var(--haf-orange-light) 0%,
            #f68425 54%,
            #e96614 100%
        );

    box-shadow:
        0 10px 24px
        rgba(244, 122, 31, 0.23);

    transition:
        transform var(--haf-transition),
        filter var(--haf-transition),
        box-shadow var(--haf-transition);
}

.haf-submit:hover:not(:disabled) {
    transform:
        translateY(-1px);

    filter:
        brightness(1.05);

    box-shadow:
        0 13px 28px
        rgba(244, 122, 31, 0.28);
}

.haf-submit:active:not(:disabled) {
    transform:
        translateY(0);
}

.haf-submit:disabled {
    cursor:
        wait;

    opacity:
        0.72;
}

.haf-submit-note {
    margin:
        9px 0 0;

    text-align:
        center;

    font-size:
        0.70rem;

    font-weight:
        700;

    color:
        var(--haf-gold-soft);
}


/* =========================================================
   RESPONSE MESSAGES
========================================================= */

.haf-message {
    display:
        none;

    margin-top:
        14px;

    padding:
        12px 13px;

    border-radius:
        var(--haf-radius-sm);

    font-size:
        0.82rem;

    line-height:
        1.45;
}

.haf-message:not(:empty) {
    display:
        block;
}

.haf-message-success {
    color:
        var(--haf-success);

    border:
        1px solid var(--haf-success-border);

    background:
        var(--haf-success-bg);
}

.haf-message-error {
    color:
        var(--haf-error);

    border:
        1px solid var(--haf-error-border);

    background:
        var(--haf-error-bg);
}


/* =========================================================
   FOOTER
========================================================= */

.haf-footer {
    margin-top:
        auto;

    padding:
        10px 34px 11px;

    text-align:
        center;

    border-top:
        1px solid var(--haf-border);

    background:
        rgba(20, 8, 17, 0.22);
}

.haf-footer-event {
    margin:
        0 0 2px !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        0.92rem !important;

    font-weight:
        700;

    color:
        var(--haf-cream) !important;
}

.haf-footer p {
    margin:
        0 0 4px;

    font-size:
        0.74rem;

    line-height:
        1.3;

    color:
        var(--haf-muted);
}

.haf-footer-links {
    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        6px 14px;
}

.haf-footer-links a {
    font-size:
        0.70rem;
}


/* =========================================================
   HONEYPOT / BOT FIELD
========================================================= */

.haf-honeypot {
    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    padding:
        0 !important;

    margin:
        -1px !important;

    overflow:
        hidden !important;

    clip:
        rect(0 0 0 0) !important;

    clip-path:
        inset(50%) !important;

    white-space:
        nowrap !important;

    border:
        0 !important;
}


/* =========================================================
   MEDIUM DESKTOP / TABLET
========================================================= */

@media (max-width: 1100px) and (min-width: 681px) {

    .haf-registration {
        width:
            min(100%, 1080px);
    }

    .haf-layout {
        grid-template-columns:
            46% 54%;
    }

    .haf-header {
        padding:
            22px 25px 16px;
    }

    .haf-form {
        padding:
            17px 25px 14px;
    }

    .haf-footer {
        padding:
            10px 25px 11px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    /* -----------------------------------------------------
       PAGE / CARD
    ----------------------------------------------------- */

    .haf-page {
        padding:
            6px 6px 24px;
    }

    .haf-registration {
        border-radius:
            17px;
    }

    .haf-layout {
        display:
            block;
    }


    /* -----------------------------------------------------
       HERO ART

       IMPORTANT:
       Natural height = no arbitrary mobile crop.
       Entire composition remains intact.
    ----------------------------------------------------- */

    .haf-art-panel {
        width:
            100%;

        min-height:
            0;

        display:
            block;

        border-right:
            0;

        border-bottom:
            1px solid var(--haf-border);

        background:
            var(--haf-bg-deep);
            
        overflow: hidden;
    }

    .haf-art-panel img {
    display:
        block;

    width:
        100%;

    height:
        auto;

    object-fit:
        contain;

    object-position:
        center top;

    margin-bottom:
        -75px;
}

    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .haf-header {
        padding:
            18px 20px 16px;
    }

    .haf-eyebrow {
        margin-bottom:
            5px;

        font-size:
            0.56rem;

        line-height:
            1.25;

        letter-spacing:
            0.08em;
    }

    .haf-header h1 {
        margin:
            0;

        font-size:
            clamp(1.85rem, 8.7vw, 2.35rem);

        line-height:
            0.98;
    }

    .haf-highlights {
        gap:
            6px;

        margin-top:
            11px;
    }

    .haf-highlights span {
        padding:
            5px 8px;

        font-size:
            0.67rem;

        line-height:
            1.1;
    }

    .haf-intro {
        margin:
            11px 0 0;

        font-size:
            0.88rem;

        line-height:
            1.45;
    }


    /* -----------------------------------------------------
       FORM
    ----------------------------------------------------- */

    .haf-form {
        padding:
            19px 20px 22px;
    }


    /* -----------------------------------------------------
       FIRST/LAST + PHONE/DOB
       Two columns on normal phones
    ----------------------------------------------------- */

    .haf-grid-two {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            11px;
    }

    .haf-field {
        margin-bottom:
            14px;
    }

    .haf-field label {
        margin-bottom:
            6px;

        font-size:
            0.82rem;

        line-height:
            1.25;
    }


    /* -----------------------------------------------------
       MOBILE INPUT NORMALIZATION
       Explicit height helps iOS Safari
    ----------------------------------------------------- */

    .haf-field input,
    .haf-field select {
        display:
            block;

        width:
            100%;

        height:
            48px;

        min-height:
            48px;

        padding:
            10px 11px;

        font-size:
            16px;

        line-height:
            normal;
    }

.haf-field input[type="date"] {
    display: block;

    width: 100%;
    min-width: 0;
    max-width: 100%;

    height: 48px;
    min-height: 48px;

    padding: 10px 11px;

    font-size: 16px;
    line-height: normal;

    box-sizing: border-box;

    -webkit-appearance: none;
    appearance: none;
}

    .haf-field-note {
        margin-top:
            5px;

        font-size:
            0.69rem;

        line-height:
            1.3;
    }


    /* -----------------------------------------------------
       TICKET QUANTITY
    ----------------------------------------------------- */

    .haf-ticket-field {
        margin-top:
            0;

        margin-bottom:
            14px;
    }

    .haf-ticket-field label {
        margin-bottom:
            7px;

        font-size:
            0.96rem;

        line-height:
            1.2;
    }

    .haf-ticket-field select {
        height:
            52px;

        min-height:
            52px;

        padding:
            0 12px;

        font-size:
            0.96rem;

        font-weight:
            750;
    }


    /* -----------------------------------------------------
       CONSENT
    ----------------------------------------------------- */

    .haf-consent {
        margin-top:
            2px;

        padding:
            12px 13px 13px;

        border-radius:
            14px;
    }

    .haf-consent legend {
        padding:
            0 5px;

        font-size:
            0.96rem;

        line-height:
            1.05;
    }

    .haf-checkbox-row {
        grid-template-columns:
            18px minmax(0, 1fr);

        gap:
            8px;

        font-size:
            0.77rem;

        line-height:
            1.38;
    }

    .haf-checkbox-row input {
        width:
            17px;

        height:
            17px;

        margin-top:
            2px;
    }

    .haf-legal-copy {
        margin-top:
            9px;

        font-size:
            0.69rem;

        line-height:
            1.35;
    }


    /* -----------------------------------------------------
       CTA
    ----------------------------------------------------- */

    .haf-submit {
        min-height:
            56px;

        margin-top:
            17px;

        font-size:
            0.98rem;

        border-radius:
            11px;
    }

    .haf-submit-note {
        margin-top:
            10px;

        font-size:
            0.73rem;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .haf-footer {
        padding:
            17px 16px 19px;
    }

    .haf-footer-event {
        margin-bottom:
            2px !important;

        font-size:
            0.98rem !important;
    }

    .haf-footer p {
        margin-bottom:
            7px;

        font-size:
            0.75rem;

        line-height:
            1.35;
    }

    .haf-footer-links {
        flex-direction:
            row;

        flex-wrap:
            wrap;

        justify-content:
            center;

        gap:
            5px 13px;
    }

    .haf-footer-links a {
        font-size:
            0.71rem;
    }

}


/* =========================================================
   VERY NARROW PHONES
========================================================= */

@media (max-width: 365px) {

    .haf-grid-two {
        grid-template-columns:
            1fr;

        gap:
            0;
    }

}

.haf-field input[type="date"] {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.haf-offer-clarifier {
    max-width:
        620px;

    margin:
        7px auto 0;

    text-align:
        center;

    font-size:
        0.64rem;

    line-height:
        1.35;

    color:
        rgba(255, 239, 218, 0.74);
}

/* =========================================================
   COMMUNICATION PREFERENCES
========================================================= */

.haf-consent legend {
    width: 100%;
}

.haf-consent-kicker,
.haf-consent-title {
    display: block;
}

.haf-consent-kicker {
    margin-bottom: 3px;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 0.66rem;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--haf-orange-light);
}

.haf-consent-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--haf-gold-soft);
}

.haf-consent-intro {
    margin: 0 0 10px;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--haf-muted);
}

.haf-preference-card {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin: 0 0 9px;
    padding: 11px 12px;
    border: 1px solid rgba(255, 234, 196, 0.16);
    border-radius: 12px;
    background: rgba(255, 244, 218, 0.035);
    cursor: pointer;
    transition:
        border-color var(--haf-transition),
        background var(--haf-transition),
        transform var(--haf-transition);
}

.haf-preference-card:hover {
    border-color: rgba(255, 178, 89, 0.46);
    background: rgba(255, 244, 218, 0.06);
}

.haf-preference-card:has(input:checked) {
    border-color: var(--haf-orange-bright);
    background: rgba(244, 122, 31, 0.10);
    box-shadow: 0 0 0 2px rgba(244, 122, 31, 0.08);
}

.haf-preference-card input[type="radio"] {
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: var(--haf-orange);
}

.haf-preference-content,
.haf-preference-heading,
.haf-preference-copy {
    display: block;
}

.haf-preference-heading {
    margin-bottom: 4px;
    font-size: 0.80rem;
    font-weight: 900;
    line-height: 1.25;
    color: var(--haf-cream);
}

.haf-preference-copy {
    font-size: 0.72rem;
    line-height: 1.42;
    color: var(--haf-muted);
}

.haf-preference-copy a {
    font-weight: 850;
}

.haf-preference-card-eventbrite {
    margin-bottom: 0;
}


/* =========================================================
   EVENTBRITE REDIRECT MODAL
========================================================= */

.haf-modal[hidden] {
    display: none;
}

.haf-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 18px;
}

.haf-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 4, 9, 0.78);
    backdrop-filter: blur(3px);
}

.haf-modal-card {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    padding: 24px;
    border: 1px solid rgba(255, 224, 161, 0.24);
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(245, 198, 108, 0.08), transparent 32%),
        linear-gradient(180deg, #4d2b37 0%, #351d2a 100%);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.haf-modal-card h2 {
    margin: 0 0 10px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.55rem;
    color: var(--haf-cream);
}

.haf-modal-card p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--haf-muted);
}

.haf-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}

.haf-modal-primary,
.haf-modal-secondary {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 10px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
}

.haf-modal-primary {
    border: 0;
    color: #281208;
    text-decoration: none;
    background: linear-gradient(180deg, var(--haf-orange-light) 0%, #f68425 54%, #e96614 100%);
}

.haf-modal-secondary {
    border: 1px solid var(--haf-border);
    color: var(--haf-cream);
    background: rgba(255, 244, 218, 0.06);
}

body.haf-modal-open {
    overflow: hidden;
}

@media (max-width: 680px) {
    .haf-consent-kicker {
        font-size: 0.61rem;
    }

    .haf-consent-title {
        font-size: 1.02rem;
    }

    .haf-preference-card {
        grid-template-columns: 19px minmax(0, 1fr);
        gap: 9px;
        padding: 11px;
    }

    .haf-preference-heading {
        font-size: 0.80rem;
    }

    .haf-preference-copy {
        font-size: 0.73rem;
        line-height: 1.4;
    }

    .haf-modal-card {
        padding: 21px 18px 18px;
    }

    .haf-modal-actions {
        grid-template-columns: 1fr;
    }
}