/* =========================================================
   Light — Check eligibility, brand kit v2 (Ink / Spark)

   Replaces the page's old Tailwind build. Tailwind's CDN script
   ships a global reset, which would fight the shared header,
   footer and Bootstrap now that this page renders inside the
   site shell — so the handful of utilities its script actually
   toggles (.hidden, .flex, .animate-fade-in, .header-hidden)
   are redefined at the bottom of this file instead.

   Loaded only by this view, so the body override is scoped to
   it the same way home.css and pages.css are.
   ========================================================= */

body {
    background-color: var(--ink);
    background-image:
        radial-gradient(900px 620px at 82% -6%, rgba(255, 229, 0, 0.10), rgba(10, 10, 12, 0) 62%),
        radial-gradient(760px 620px at -8% 32%, rgba(255, 229, 0, 0.055), rgba(10, 10, 12, 0) 60%),
        radial-gradient(820px 700px at 96% 74%, rgba(166, 107, 255, 0.07), rgba(10, 10, 12, 0) 62%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text-2);
    font-family: var(--brand-body);
    font-size: 15px;
}

.lc-elig {
    position: relative;
    overflow: hidden;
    padding: 2rem 0 4rem;
}

/* Same ray field the landing hero uses, so the two pages read as
   one place. */
.lc-elig-beam {
    position: absolute;
    top: -30%;
    left: -8%;
    width: 760px;
    height: 760px;
    pointer-events: none;
    z-index: 0;
    background:
        repeating-conic-gradient(from 0deg at 50% 50%,
            rgba(255, 229, 0, 0.075) 0deg 1.1deg,
            rgba(255, 229, 0, 0) 1.1deg 13deg),
        radial-gradient(circle at 50% 50%, rgba(255, 229, 0, 0.14) 0%, rgba(255, 229, 0, 0.04) 34%, rgba(10, 10, 12, 0) 66%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 72%);
    mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 72%);
    animation: lcEligBeam 90s linear infinite;
}

@keyframes lcEligBeam {
    to {
        transform: rotate(360deg);
    }
}

.lc-elig .container {
    position: relative;
    z-index: 1;
}

/* Flex rather than grid on purpose: the script adds Tailwind's
   .flex to #main-content when it swaps the skeleton out, so the
   layout has to agree with what that class does. */
.lc-elig-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    min-height: 68vh;
}

/* ---------------------------------------------------------
   Artwork
   --------------------------------------------------------- */
.lc-elig-art {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.lc-elig-glow {
    position: absolute;
    width: 78%;
    height: 76%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 229, 0, 0.15) 0%, rgba(10, 10, 12, 0) 68%);
    pointer-events: none;
}

.lc-elig-stage {
    position: relative;
    width: 100%;
    max-width: 430px;
    aspect-ratio: 430 / 470;
    animation: lcEligRise 1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes lcEligRise {
    from {
        opacity: 0;
        transform: translateY(46px) scale(0.94);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.lc-elig-phone {
    position: absolute;
    left: 0;
    top: 0;
    width: 76%;
    display: block;
    filter: drop-shadow(0 34px 54px rgba(0, 0, 0, 0.7));
    animation: lcEligFloat 7s ease-in-out infinite;
}

.lc-elig-card-art {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 52%;
    display: block;
    filter: drop-shadow(0 30px 46px rgba(0, 0, 0, 0.75));
    animation: lcEligFloat 5.6s ease-in-out infinite reverse;
}

@keyframes lcEligFloat {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -14px;
    }
}

/* ---------------------------------------------------------
   Panel
   --------------------------------------------------------- */
.lc-elig-card {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    max-width: 430px;
    background: var(--graphite);
    border: 1px solid var(--hair);
    border-radius: 28px;
    padding: 2.5rem 2.25rem;
    box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.9);
    text-align: center;
}

/* Spark rule across the top, matching the site's form panels */
.lc-elig-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 28px 28px 0 0;
    background: linear-gradient(90deg,
            rgba(255, 229, 0, 0) 0%,
            var(--spark) 30%,
            var(--spark) 70%,
            rgba(255, 229, 0, 0) 100%);
}

.lc-elig-head {
    transition: opacity 0.3s ease-in-out, visibility 0.3s;
}

.lc-elig-logo {
    display: inline-block;
    margin-bottom: 1.25rem;
}

.lc-elig-logo img {
    width: 96px;
    height: auto;
    display: block;
}

.lc-elig-title {
    margin-bottom: 1.75rem;
}

.lc-elig-kicker {
    font-family: var(--brand-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--spark);
    margin: 0 0 0.35rem;
}

.lc-elig-heading {
    font-family: var(--brand-display);
    font-weight: 700;
    font-size: 27px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-1);
    margin: 0;
}

.lc-elig-lead {
    font-family: var(--brand-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--text-1);
    margin: 0 0 0.35rem;
}

.lc-elig-note {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-3);
    margin: 0 0 1.6rem;
}

.lc-elig-strong {
    color: var(--text-1);
    font-weight: 600;
}

.lc-elig-muted {
    color: var(--text-4);
}

.lc-elig-block {
    margin-bottom: 1.25rem;
}

.lc-elig-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lc-elig-stack form {
    width: 100%;
}

/* ---------------------------------------------------------
   Fields
   --------------------------------------------------------- */
.lc-elig-input {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--hair);
    border-radius: 14px;
    color: var(--text-1);
    font-family: var(--brand-body);
    font-size: 15px;
    padding: 0.85rem 1rem;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.lc-elig-input::placeholder {
    color: var(--text-4);
}

.lc-elig-input:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 229, 0, 0.55);
    box-shadow: 0 0 0 3px rgba(255, 229, 0, 0.12);
}

.lc-elig-upper {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Native date pickers render a dark glyph; invert it on Ink */
.lc-elig-date::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.6);
    cursor: pointer;
}

.lc-elig-phonefield {
    position: relative;
    display: flex;
    align-items: center;
}

.lc-elig-cc {
    position: absolute;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    pointer-events: none;
    color: var(--text-2);
    font-size: 14.5px;
    font-weight: 500;
}

.lc-elig-cc img {
    display: block;
    border-radius: 2px;
}

.lc-elig-cc span {
    padding-right: 0.55rem;
    border-right: 1px solid var(--slate);
}

.lc-elig-input-tel {
    padding-left: 5.2rem;
}

.lc-elig-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.25rem;
    text-align: left;
}

.lc-elig-fields label {
    display: block;
    font-family: var(--brand-display);
    font-weight: 500;
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 0.35rem;
}

/* ---- OTP ---------------------------------------------------------- */
.lc-elig-otp {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.otp-input {
    width: 46px;
    height: 54px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--hair);
    border-radius: 14px;
    color: var(--text-1);
    font-family: var(--brand-display);
    font-size: 20px;
    font-weight: 600;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    -moz-appearance: textfield;
    appearance: textfield;
}

.otp-input:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 229, 0, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 229, 0, 0.12);
}

.otp-input::-webkit-outer-spin-button,
.otp-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.lc-elig-resend {
    margin-bottom: 1.75rem;
}

.lc-elig-link {
    color: var(--spark);
    font-weight: 600;
    text-decoration: none;
}

.lc-elig-link:hover {
    color: var(--spark-neon);
    text-decoration: underline;
}

/* ---- Terms -------------------------------------------------------- */
.lc-elig-fine {
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-4);
    margin: 0 0 1.35rem;
}

.lc-elig-fine a,
.lc-elig-terms a {
    color: var(--spark);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 229, 0, 0.35);
}

.lc-elig-fine a:hover,
.lc-elig-terms a:hover {
    color: var(--spark-neon);
}

.lc-elig-terms {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.lc-elig-terms input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--spark);
}

.lc-elig-terms label {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-3);
}

/* ---- Button ------------------------------------------------------- */
.lc-elig-btn {
    display: block;
    width: 100%;
    background: var(--spark);
    border: 1px solid var(--spark);
    color: var(--ink);
    font-family: var(--brand-display);
    font-weight: 600;
    font-size: 15.5px;
    padding: 0.95rem 1.5rem;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(255, 229, 0, 0.26);
    transition: box-shadow 0.3s ease, transform 0.2s ease, opacity 0.25s ease;
}

.lc-elig-btn:hover:not(:disabled) {
    box-shadow: 0 14px 40px rgba(255, 229, 0, 0.42);
}

.lc-elig-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.lc-elig-btn:disabled {
    opacity: 0.6;
    cursor: default;
    box-shadow: none;
}

.lc-elig-btn-wide {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ---- Success ------------------------------------------------------ */
.lc-elig-tick {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--spark);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
    box-shadow: 0 10px 30px rgba(255, 229, 0, 0.3);
}

.lc-elig-tick svg {
    width: 30px;
    height: 30px;
}

.lc-elig-qr {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin-top: 0.75rem;
}

.lc-elig-qr img {
    display: block;
    width: 100%;
    height: auto;
}

.lc-elig-qr svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.lc-elig-qr svg a {
    cursor: pointer;
}

/* ---- Validation --------------------------------------------------- */
.my-error-class {
    display: block;
    color: var(--ember);
    font-family: var(--brand-body);
    font-size: 12px;
    font-weight: 500;
    margin-top: 6px;
    text-align: left;
}

/* ---------------------------------------------------------
   Skeleton, shown for the first second
   --------------------------------------------------------- */
.lc-skel-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    min-height: 470px;
}

.lc-skel-shimmer {
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: lcEligShimmer 1.5s infinite;
}

@keyframes lcEligShimmer {
    100% {
        transform: translateX(100%);
    }
}

.lc-skel {
    display: block;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
}

.lc-skel-logo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin-bottom: 2rem;
}

.lc-skel-line-sm {
    width: 170px;
    height: 20px;
    margin-bottom: 1rem;
}

.lc-skel-line-lg {
    width: 230px;
    height: 34px;
    margin-bottom: 2.5rem;
}

.lc-skel-field {
    width: 100%;
    height: 52px;
    margin-bottom: 1.5rem;
}

.lc-skel-btn {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    margin-top: auto;
}

/* ---------------------------------------------------------
   SweetAlert toasts, so the notices match the page
   --------------------------------------------------------- */
.swal2-toast {
    background: var(--graphite) !important;
    border: 1px solid var(--hair) !important;
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9) !important;
}

.swal2-toast .swal2-title {
    color: var(--text-1) !important;
    font-family: var(--brand-body) !important;
    font-size: 14px !important;
}

.swal2-toast .swal2-timer-progress-bar {
    background: var(--spark) !important;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .lc-elig-grid {
        gap: 2rem;
    }

    .lc-elig-stage {
        max-width: 370px;
    }

    .lc-elig-card {
        max-width: 400px;
        padding: 2.25rem 1.9rem;
    }
}

@media (max-width: 991.98px) {

    /* Stacked. The artwork becomes a soft backdrop behind the panel —
       the same idea the old layout used — so the form stays the first
       thing on screen and the page does not double in height.
       Specificity is deliberately above .flex, which the script adds
       to this element. */
    .lc-elig .lc-elig-grid {
        display: block;
        position: relative;
        min-height: 0;
        padding: 1rem 0 0;
    }

    .lc-elig .lc-elig-art {
        position: absolute;
        inset: 0;
        opacity: 0.16;
        pointer-events: none;
        z-index: 0;
    }

    .lc-elig .lc-elig-card {
        position: relative;
        z-index: 1;
        margin: 0 auto;
    }

    .lc-elig-beam {
        left: 50%;
        top: -14%;
        width: 620px;
        height: 620px;
        margin-left: -310px;
        opacity: 0.8;
    }
}

@media (max-width: 575.98px) {
    .lc-elig {
        padding: 1rem 0 3rem;
    }

    .lc-elig .lc-elig-card {
        padding: 2rem 1.35rem;
        border-radius: 24px;
    }

    .lc-elig-heading {
        font-size: 23px;
    }

    .lc-elig-lead {
        font-size: 16.5px;
    }

    .lc-elig-logo img {
        width: 82px;
    }

    .otp-input {
        width: 40px;
        height: 48px;
        font-size: 18px;
        border-radius: 12px;
    }

    .lc-elig-otp {
        gap: 0.35rem;
    }

    .lc-skel-card {
        min-height: 420px;
    }
}

@media (max-width: 359.98px) {
    .otp-input {
        width: 36px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .lc-elig-beam,
    .lc-elig-stage,
    .lc-elig-phone,
    .lc-elig-card-art,
    .lc-skel-shimmer {
        animation: none !important;
    }
}

/* =========================================================
   Utilities the page script toggles

   These were Tailwind's. They are declared last, and .hidden is
   forced, so they win over the layout rules above regardless of
   source order. Safe for the fade transitions because the script
   always removes .hidden before jQuery sets an inline display.
   ========================================================= */
.hidden {
    display: none !important;
}

.flex {
    display: flex;
}

.header-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0;
    margin: 0;
    overflow: hidden;
}

.animate-fade-in {
    animation: lcEligFadeIn 0.5s ease-out forwards;
}

@keyframes lcEligFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}