/* =========================================================
   DÍA DE LOS MUERTOS AT HALLOWEEN AT THE FAIR
   TICKETS PAGE
   Production Stylesheet
========================================================= */


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

:root {
    --haf-bg: #073f46;
    --haf-bg-deep: #032b31;

    --haf-panel: #0b6870;
    --haf-panel-mid: #09535d;
    --haf-panel-deep: #052f37;

    --haf-orange: #f4a52f;
    --haf-orange-bright: #ffc24d;
    --haf-orange-light: #ffd264;

    --haf-gold: #ffd15b;
    --haf-gold-soft: #ffebad;

    --haf-cream: #fff4df;
    --haf-text: #fff1dc;
    --haf-muted: #e8d7c4;

    --haf-border: rgba(255, 240, 210, 0.22);
    --haf-border-strong: rgba(32, 185, 173, 0.58);

    --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, 165, 47, 0.14),
            transparent 29%
        ),
        radial-gradient(
            circle at top right,
            rgba(229, 46, 121, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 50% 12%,
            rgba(32, 185, 173, 0.15),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #286f6b 0%,
            #115d62 26%,
            #074750 58%,
            #03353d 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 rgba(255, 210, 98, 0.28);

    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(229, 46, 121, 0.17),
            transparent 29%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(244, 165, 47, 0.08),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #0b6670 0%,
            #09545e 24%,
            #073f48 58%,
            #052f37 100%
        );
}


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

.haf-header {
    position: relative;

    padding:
        24px 34px 17px;

    border-bottom:
        1px solid rgba(255, 240, 210, 0.12);

    background:
        linear-gradient(
            135deg,
            rgba(181, 45, 97, 0.24) 0%,
            rgba(11, 102, 112, 0.08) 58%,
            transparent 100%
        );
}

.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-header::after {
    content: "";
    display: block;

    width: 86px;
    height: 3px;

    margin-top: 13px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #20b9ad 0%,
            #ffd15b 48%,
            #e52e79 100%
        );

    opacity: 0.92;
}

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

    gap:
        7px;

    margin:
        13px 0 0;
}

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

    border:
        1px solid rgba(32, 185, 173, 0.38);

    border-radius:
        999px;

    background:
        rgba(3, 67, 73, 0.28);

    font-size:
        0.69rem;

    font-weight:
        850;

    line-height:
        1.1;

    color:
        #ffebad;
}

.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 rgba(255, 240, 210, 0.22);

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

    outline:
        none;

    background:
        rgba(2, 43, 49, 0.42);

    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(5, 55, 61, 0.58);

    border-color:
        rgba(32, 185, 173, 0.48);
}

.haf-field input:focus,
.haf-field select:focus {
    border-color:
        #20b9ad;

    background:
        rgba(5, 55, 61, 0.68);

    box-shadow:
        0 0 0 3px
        rgba(32, 185, 173, 0.16);
}

.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 #20b9ad;

    border-radius:
        10px;

    background:
        rgba(5, 82, 88, 0.78);

    color:
        #fff4df;

    font-size:
        1rem;

    font-weight:
        750;

    cursor:
        pointer;
}

.haf-ticket-field select:hover {
    border-color:
        #42c9be;

    background:
        rgba(7, 96, 101, 0.84);
}

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

    background:
        rgba(7, 96, 101, 0.90);

    box-shadow:
        0 0 0 3px
        rgba(32, 185, 173, 0.18);
}


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

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

    padding:
        13px 14px 14px;

    border:
        1px solid rgba(255, 209, 91, 0.22);

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

    background:
        linear-gradient(
            180deg,
            rgba(5, 50, 57, 0.72),
            rgba(4, 43, 50, 0.58)
        );
}

.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:
        #20b9ad;
}

.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,
            #ffd264 0%,
            #f6a42d 54%,
            #ed7a20 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);
}


.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);
}



/* =========================================================
   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(3, 46, 52, 0.40);
}

.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) {


    .haf-header::after {
        width:
            68px;

        margin-top:
            11px;
    }

    .haf-offer-clarifier {
        margin-top:
            8px;

        font-size:
            0.66rem;

        line-height:
            1.38;
    }


    /* -----------------------------------------------------
       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;
    }


    /* -----------------------------------------------------
       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%;

        height:
            48px;

        min-height:
            48px;

        padding:
            10px 11px;

        font-size:
            16px;

        line-height:
            normal;
    }

    .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;
    }

}