/* =========================================================
   MOB MEDIA — CHECKOUT
   Clean customer-flow checkout
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}


body.checkout-page {
    --checkout-width:
        min(
            1780px,
            calc(100vw - 48px)
        );

    --site-footer-rail-left: 50%;
    --site-footer-rail-right: auto;
    --site-footer-rail-width: var(--checkout-width);
    --site-footer-rail-transform: translateX(-50%);

    margin: 0;

    min-width: 320px;
    min-height: 100dvh;

    display: flex;
    flex-direction: column;

    overflow-x: hidden;

    color: var(--text);

    background:
        radial-gradient(
            circle at 14% 12%,
            color-mix(
                in srgb,
                var(--accent) 8%,
                transparent
            ),
            transparent 34rem
        ),
        radial-gradient(
            circle at 87% 10%,
            rgba(255, 125, 35, .035),
            transparent 30rem
        ),
        #050309;

    font-family:
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

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

    -webkit-font-smoothing: antialiased;
}


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

.checkout-shell {
    width: var(--checkout-width);

    margin: 0 auto;

    padding: 8px 0 10px;

    flex: 1 1 auto;
    min-height: 0;

    display: grid;

    grid-template-rows:
        auto
        auto
        minmax(410px, 1fr);

    gap: 10px;

    box-sizing: border-box;
}


/* =========================================================
   SITE BAR
   ========================================================= */

.checkout-sitebar {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(310px, 1fr)
        auto
        minmax(430px, 1fr);

    align-items: center;

    gap: 24px;

    padding: 0 8px;

    box-sizing: border-box;
}


/* SEARCH */

.checkout-search {
    justify-self: start;

    width: min(310px, 100%);
    min-height: 44px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 0 14px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent) 28%,
            transparent
        );

    border-radius: 10px;

    background:
        rgba(8, 4, 17, .68);
}

.checkout-search svg {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    fill: none;

    stroke:
        rgba(255, 255, 255, .54);

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.checkout-search input {
    width: 100%;
    min-width: 0;

    border: 0;
    outline: 0;

    background: transparent;
    color: #fff;

    font: inherit;
    font-size: 15px;
}

.checkout-search input::placeholder {
    color:
        rgba(255, 255, 255, .44);
}


/* BRAND */

.checkout-brand {
    justify-self: center;

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

    line-height: 0;
}

.checkout-brand img {
    display: block;

    width:
        clamp(
            300px,
            20vw,
            370px
        );

    height: auto;

    filter:
        drop-shadow(
            0 0 20px
            var(--glow)
        );
}


/* NAV */

.checkout-nav {
    justify-self: end;

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

    gap: 8px;

    white-space: nowrap;
}

.checkout-nav a {
    min-height: 42px;

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

    padding: 0 14px;

    border:
        1px solid transparent;

    border-radius: 9px;

    color:
        rgba(255, 255, 255, .82);

    font-size: 15px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;
}

.checkout-nav a:hover,
.checkout-nav a:focus-visible {
    color: #fff;

    background:
        color-mix(
            in srgb,
            var(--accent) 7%,
            transparent
        );

    outline: 0;
}

.checkout-nav a.is-current {
    color: #fff;

    border-color:
        color-mix(
            in srgb,
            var(--brand-purple) 44%,
            transparent
        );

    background:
        linear-gradient(
            135deg,
            rgba(126, 35, 209, .30),
            rgba(181, 65, 255, .20)
        );

    box-shadow:
        inset 0 1px 0
            rgba(255, 255, 255, .04),
        0 0 14px
            rgba(153, 53, 255, .08);
}


/* =========================================================
   COMMON SURFACE
   ========================================================= */

.checkout-hero,
.checkout-body {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent) 34%,
            transparent
        );

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 48% 46%,
            color-mix(
                in srgb,
                var(--accent) 7%,
                transparent
            ),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            rgba(15, 8, 23, .96),
            rgba(7, 4, 11, .985)
        );

    box-shadow:
        0 20px 54px
            rgba(0, 0, 0, .28),
        inset 0 1px 0
            rgba(255, 255, 255, .025);
}


/* =========================================================
   ORDER HEADER
   ========================================================= */

.checkout-hero {
    min-height: 145px;

    display: grid;

    grid-template-columns:
        minmax(360px, 36%)
        minmax(0, 64%);

    align-items: stretch;
}


.checkout-plan-zone,
.checkout-title-zone {
    min-width: 0;

    padding:
        20px
        30px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.checkout-title-zone {
    align-items: center;

    border-left:
        1px solid
        rgba(255, 255, 255, .07);

    text-align: center;
}


/* =========================================================
   TYPE
   ========================================================= */

.eyebrow {
    color: var(--accent);

    font-size: 12px;
    font-weight: 850;
    line-height: 1;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.selected-plan {
    margin-top: 8px;

    color: var(--accent);

    font-size:
        clamp(
            34px,
            2.3vw,
            42px
        );

    font-weight: 900;
    line-height: 1;

    letter-spacing: -.04em;

    text-shadow:
        0 0 22px
        var(--glow);
}


.selected-connections {
    margin-top: 13px;

    display: flex;
    align-items: baseline;

    gap: 12px;
}

.selected-connections strong {
    color: #fff;

    font-size: 15px;
    font-weight: 800;
}

.selected-connections span {
    color: var(--muted);

    font-size: 12px;
    font-weight: 650;
}


.checkout-title-zone h1 {
    margin:
        7px
        0
        0;

    color: #fff;

    font-size:
        clamp(
            34px,
            2.8vw,
            46px
        );

    font-weight: 900;
    line-height: .98;

    letter-spacing: -.05em;
}

.checkout-title-zone h1 span {
    color: var(--accent);

    text-shadow:
        0 0 22px
        var(--glow);
}


.next-pill {
    margin-top: 14px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding:
        7px
        12px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent) 46%,
            transparent
        );

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--accent) 11%,
                transparent
            ),
            rgba(40, 210, 255, .05)
        );

    color: #fff;

    font-size: 11px;
    font-weight: 800;
}

.next-pill span {
    width: 18px;
    height: 18px;

    display: inline-grid;
    place-items: center;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent) 58%,
            transparent
        );

    border-radius: 50%;

    color: var(--accent);

    font-size: 11px;
}


/* =========================================================
   LOWER CHECKOUT
   ========================================================= */

.checkout-body {
    min-height: 0;

    display: grid;

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

    align-items: stretch;
}


/* FORM */

.account-zone {
    min-width: 0;

    padding:
        22px
        28px
        20px;
}


/* REVIEW */

.review-zone {
    min-width: 0;

    padding:
        22px
        26px
        20px;

    display: flex;
    flex-direction: column;

    border-left:
        1px solid
        rgba(255, 255, 255, .07);

    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--accent) 4%,
                transparent
            ),
            transparent 45%
        );
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.section-head {
    margin-bottom: 16px;
}

.section-head h2 {
    margin:
        7px
        0
        6px;

    color: #fff;

    font-size:
        clamp(
            27px,
            1.8vw,
            32px
        );

    font-weight: 900;
    line-height: 1;

    letter-spacing: -.04em;
}

.section-head h2 span {
    color: var(--accent);
}

.section-head p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
    line-height: 1.45;
}

.section-head a {
    color: var(--accent);

    font-weight: 800;

    text-decoration: none;
}


/* =========================================================
   SERVER / CLIENT ERRORS
   ========================================================= */

.checkout-errors {
    margin:
        0
        0
        14px;

    padding:
        11px
        13px;

    border:
        1px solid
        rgba(255, 86, 110, .42);

    border-radius: 9px;

    background:
        rgba(255, 86, 110, .075);

    color:
        #ffb5c0;

    font-size: 13px;
}

.checkout-errors[hidden] {
    display: none;
}

.checkout-errors strong {
    display: block;

    margin-bottom: 5px;
}

.checkout-errors ul {
    margin:
        0
        0
        0
        18px;

    padding: 0;
}


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

.fields {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        11px
        14px;
}


.field {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;
}


.field label {
    color:
        rgba(255, 255, 255, .90);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .025em;
}


.field input,
.field select {
    width: 100%;
    height: 44px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent) 35%,
            transparent
        );

    border-radius: 9px;

    background: var(--field);
    color: var(--text);

    padding:
        0
        12px;

    font: inherit;
    font-size: 14px;

    outline: 0;
}


.field input::placeholder {
    color: var(--muted-dim);
}


.field input:focus,
.field select:focus {
    border-color:
        color-mix(
            in srgb,
            var(--accent) 72%,
            transparent
        );

    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--accent) 9%,
            transparent
        );
}


.field.has-error input,
.field.has-error select {
    border-color:
        rgba(255, 86, 110, .70);
}


.field-help,
.field-error {
    min-height: 15px;

    font-size: 11px;
    line-height: 1.25;
}


.field-help {
    color: var(--muted-dim);
}

.field-error {
    color: #ff8395;
}


/* PASSWORD */

.password-control {
    position: relative;
}

.password-control input {
    padding-right: 44px;
}

.password-toggle {
    position: absolute;

    top: 50%;
    right: 5px;

    width: 34px;
    height: 34px;

    transform: translateY(-50%);

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 7px;

    background: transparent;

    color:
        rgba(255, 255, 255, .55);

    cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color: #fff;

    background:
        rgba(255, 255, 255, .05);

    outline: 0;
}

.password-toggle svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
}


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

.preferences {
    margin-top: 12px;

    border-top:
        1px solid
        rgba(255, 255, 255, .07);
}


.preference-row {
    min-height: 55px;

    padding:
        10px
        0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .055);
}

.preference-row:last-child {
    border-bottom: 0;
}


.preference-row strong {
    display: block;

    color: #fff;

    font-size: 13px;
    font-weight: 800;
}


.preference-row p {
    margin:
        3px
        0
        0;

    color: var(--muted);

    font-size: 11px;
}


/* YES / NO */

.toggle-choice {
    flex: 0 0 auto;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    overflow: hidden;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent) 34%,
            transparent
        );

    border-radius: 8px;
}

.toggle-choice button {
    min-width: 58px;
    height: 36px;

    border: 0;

    background: transparent;

    color:
        rgba(255, 255, 255, .76);

    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

.toggle-choice button.active {
    background: var(--accent);

    color: #071019;
}


/* NEWSLETTER SWITCH */

.switch {
    position: relative;

    width: 48px;
    height: 27px;

    flex: 0 0 auto;

    border:
        1px solid
        rgba(255, 255, 255, .16);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .10);

    cursor: pointer;
}

.switch::after {
    content: "";

    position: absolute;

    top: 4px;
    left: 4px;

    width: 17px;
    height: 17px;

    border-radius: 50%;

    background: #fff;

    transition:
        transform .18s ease,
        background-color .18s ease;
}

.switch.on {
    border-color:
        color-mix(
            in srgb,
            var(--accent) 55%,
            transparent
        );

    background:
        color-mix(
            in srgb,
            var(--accent) 28%,
            transparent
        );
}

.switch.on::after {
    transform: translateX(21px);

    background: var(--accent);
}

.switch:focus-visible {
    outline:
        2px solid
        color-mix(
            in srgb,
            var(--accent) 58%,
            transparent
        );

    outline-offset: 3px;
}


/* =========================================================
   REVIEW
   ========================================================= */

.review-lines {
    width: 100%;
}


.review-line {
    min-height: 51px;

    display: grid;

    grid-template-columns:
        1fr
        auto;

    align-items: center;

    gap: 18px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .07);
}


.review-line span {
    color: var(--muted);

    font-size: 13px;
    font-weight: 650;
}


.review-line strong {
    color: #fff;

    font-size: 14px;
    font-weight: 800;

    text-align: right;
}


.review-total {
    min-height: 68px;
}


.review-total strong {
    color: var(--accent);

    font-size: 27px;
    font-weight: 900;

    letter-spacing: -.035em;

    text-shadow:
        0 0 18px
        var(--glow);
}


/* PAYMENT NEXT */

.review-next {
    margin-top: 14px;

    padding:
        12px
        0;

    display: grid;

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

    gap: 11px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .07);
}


.review-next-icon {
    width: 26px;
    height: 26px;

    display: inline-grid;
    place-items: center;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent) 54%,
            transparent
        );

    border-radius: 50%;

    color: var(--accent);

    font-size: 12px;
    font-weight: 900;
}


.review-next strong {
    display: block;

    color: var(--accent);

    font-size: 12px;
    font-weight: 850;
}


.review-next p {
    margin:
        4px
        0
        0;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.4;
}


/* =========================================================
   PLACE ORDER
   ========================================================= */

.place-order {
    margin-top: 18px;
    width: 100%;
    min-height: 48px;

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

    gap: 13px;

    border: 0;
    border-radius: 9px;

    background:
        linear-gradient(
            180deg,
            color-mix(
                in srgb,
                var(--accent) 94%,
                white 6%
            ),
            var(--accent)
        );

    color: #061019;

    font: inherit;
    font-size: 13px;
    font-weight: 900;

    letter-spacing: .03em;

    cursor: pointer;

    box-shadow:
        0 10px 25px
        var(--glow);
}


.place-order:hover,
.place-order:focus-visible {
    filter: brightness(1.07);

    outline: 0;
}


/* =========================================================
   DESKTOP FIT
   ========================================================= */

@media (min-width: 1101px) and (min-height: 700px) {

    body.checkout-page {
        height: 100dvh;
        min-height: 0;

        overflow-y: hidden;
    }
}


/* =========================================================
   SHORT DESKTOP
   ========================================================= */

@media (min-width: 1101px) and (max-height: 699px) {

    body.checkout-page {
        overflow-y: auto;
    }

    .checkout-shell {
        min-height: 680px;

        grid-template-rows:
            auto
            145px
            410px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    body.checkout-page {
        overflow-y: auto;
    }

    .checkout-shell {
        width:
            calc(100% - 24px);

        display: block;
    }


    .checkout-sitebar {
        grid-template-columns: 1fr;

        gap: 12px;

        padding-bottom: 14px;
    }


    .checkout-brand {
        grid-row: 1;
    }


    .checkout-nav {
        grid-row: 2;

        justify-self: center;
    }


    .checkout-search {
        grid-row: 3;

        justify-self: center;

        width:
            min(
                520px,
                100%
            );
    }


    .checkout-hero {
        grid-template-columns: 1fr;

        min-height: 0;
    }


    .checkout-plan-zone,
    .checkout-title-zone {
        padding:
            22px
            24px;
    }


    .checkout-title-zone {
        border-left: 0;

        border-top:
            1px solid
            rgba(255, 255, 255, .07);
    }


    .checkout-body {
        margin-top: 12px;

        grid-template-columns: 1fr;
    }


    .review-zone {
        border-left: 0;

        border-top:
            1px solid
            rgba(255, 255, 255, .07);
    }


    .place-order {
        margin-top: 18px;
    }
}


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

@media (max-width: 650px) {

    .checkout-shell {
        width:
            calc(100% - 16px);

        padding-top: 8px;
    }


    .checkout-brand img {
        width:
            min(
                235px,
                76vw
            );
    }


    .checkout-nav {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 6px;
    }


    .checkout-nav a {
        width: 100%;

        font-size: 14px;
    }


    .checkout-hero,
    .checkout-body {
        border-radius: 14px;
    }


    .checkout-plan-zone,
    .checkout-title-zone,
    .account-zone,
    .review-zone {
        padding:
            20px
            16px;
    }


    .selected-connections {
        align-items: flex-start;
        flex-direction: column;

        gap: 4px;
    }


    .checkout-title-zone h1 {
        font-size:
            clamp(
                30px,
                9vw,
                40px
            );
    }


    .fields {
        grid-template-columns: 1fr;
    }


    .field input,
    .field select {
        height: 46px;

        font-size: 16px;
    }


    .preference-row {
        align-items: flex-start;

        gap: 16px;
    }
}