/* ============================================================
   TENIS ARENA — RESERVATIONS REDESIGN
   ============================================================ */

.ta-reservation-redesign {
    --res-max: 1280px;

    background:
        var(--ta-ivory-soft);

    color:
        var(--ta-ink);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;
}


.ta-reservation-redesign *,
.ta-reservation-redesign button,
.ta-reservation-redesign input,
.ta-reservation-redesign select,
.ta-reservation-redesign textarea,

body:has(.ta-reservation-redesign)
.ta-topbar *,

body:has(.ta-reservation-redesign)
.ta-site-footer *,

body:has(.ta-reservation-redesign)
.ta-footer-cta * {
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif !important;
}


.ta-resv-container {
    width:
        min(
            calc(100% - 96px),
            var(--res-max)
        );

    margin-inline:
        auto;
}


/* ============================================================
   HERO
   ============================================================ */

.ta-resv-hero {
    position:
        relative;

    min-height:
        390px;

    overflow:
        hidden;

    background:
        var(--ta-forest-deep);

    color:
        var(--ta-ivory);
}


.ta-resv-hero-image {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center 55%;
}


.ta-resv-hero-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(4,43,33,.93),
            rgba(4,43,33,.68) 48%,
            rgba(4,43,33,.20)
        );
}


.ta-resv-hero-inner {
    position:
        relative;

    z-index:
        2;

    min-height:
        390px;

    display:
        grid;

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

    gap:
        80px;

    align-items:
        center;
}


.ta-resv-hero-copy {
    max-width:
        590px;
}


.ta-resv-eyebrow,
.ta-resv-step-kicker,
.ta-resv-summary-kicker,
.ta-resv-quick-kicker {
    font-size:
        .66rem;

    line-height:
        1;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

    font-weight:
        600;
}


.ta-resv-eyebrow {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        15px;

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


.ta-resv-eyebrow::before {
    content:
        "";

    width:
        34px;

    height:
        1px;

    background:
        var(--ta-gold);
}


.ta-resv-hero-copy h1 {
    margin:
        0;

    font-size:
        clamp(
            3.6rem,
            4.3vw,
            5.25rem
        );

    line-height:
        .89;

    letter-spacing:
        -.045em;

    font-weight:
        500;

    color:
        var(--ta-ivory);
}


.ta-resv-hero-copy p {
    max-width:
        530px;

    margin:
        20px
        0
        0;

    font-size:
        1.08rem;

    line-height:
        1.42;

    color:
        rgba(246,240,228,.78);
}


.ta-resv-hero-actions {
    display:
        flex;

    gap:
        10px;

    flex-wrap:
        wrap;

    margin-top:
        25px;
}


.ta-resv-btn {
    min-height:
        43px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0
        19px;

    border:
        1px solid
        transparent;

    text-decoration:
        none;

    text-transform:
        uppercase;

    font-size:
        .68rem;

    letter-spacing:
        .075em;

    font-weight:
        600;
}


.ta-resv-btn-primary {
    background:
        var(--ta-forest);

    border-color:
        var(--ta-forest);

    color:
        var(--ta-ivory);
}


.ta-resv-btn-outline {
    border-color:
        rgba(246,240,228,.48);

    color:
        var(--ta-ivory);
}


/* ============================================================
   QUICK
   ============================================================ */

.ta-resv-quick {
    padding:
        22px;

    border:
        1px solid
        rgba(246,240,228,.24);

    background:
        rgba(4,43,33,.92);

    backdrop-filter:
        blur(5px);
}


.ta-resv-quick-kicker {
    margin-bottom:
        17px;

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


.ta-resv-quick label {
    display:
        block;

    margin-bottom:
        12px;
}


.ta-resv-quick label > span {
    display:
        block;

    margin-bottom:
        6px;

    font-size:
        .62rem;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

    color:
        rgba(246,240,228,.62);
}


.ta-resv-quick select,
.ta-resv-quick input {
    width:
        100%;

    height:
        42px;

    padding:
        0
        11px;

    border:
        1px solid
        rgba(246,240,228,.30);

    border-radius:
        0;

    outline:
        none;

    background:
        rgba(4,43,33,.52);

    color:
        var(--ta-ivory);

    font-size:
        .90rem;
}


.ta-resv-quick option {
    background:
        var(--ta-ivory);

    color:
        var(--ta-ink);
}


.ta-resv-quick-submit {
    width:
        100%;

    height:
        44px;

    margin-top:
        3px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0
        15px;

    border:
        1px solid
        var(--ta-gold);

    background:
        var(--ta-gold);

    color:
        var(--ta-forest-deep);

    text-transform:
        uppercase;

    letter-spacing:
        .07em;

    font-size:
        .68rem;

    font-weight:
        700;

    cursor:
        pointer;
}


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

.ta-resv-page {
    padding:
        44px
        0
        54px;

    background:
        var(--ta-ivory-soft);
}


.ta-resv-flow-grid {
    display:
        grid;

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

    gap:
        34px;

    align-items:
        start;
}


.ta-resv-flow-main {
    min-width:
        0;
}


/* ============================================================
   STEP
   ============================================================ */

.ta-resv-step {
    padding:
        0
        0
        34px;

    margin-bottom:
        34px;

    border-bottom:
        1px solid
        var(--ta-border);
}


.ta-resv-step-heading {
    display:
        grid;

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

    gap:
        15px;

    margin-bottom:
        20px;
}


.ta-resv-step-number {
    padding-top:
        5px;

    font-size:
        .60rem;

    letter-spacing:
        .14em;

    font-weight:
        700;

    color:
        var(--ta-clay);
}


.ta-resv-step-kicker {
    margin-bottom:
        3px;

    color:
        var(--ta-clay);
}


.ta-resv-step-heading h2 {
    margin:
        0;

    font-size:
        clamp(
            2.15rem,
            2.4vw,
            2.75rem
        );

    line-height:
        .94;

    letter-spacing:
        -.032em;

    font-weight:
        500;

    color:
        var(--ta-forest);
}


.ta-resv-step-heading p {
    max-width:
        480px;

    margin:
        6px
        0
        0;

    font-size:
        .88rem;

    line-height:
        1.43;

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


/* ============================================================
   COURTS
   ============================================================ */

.ta-resv-courts {
    display:
        grid;

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

    gap:
        14px;
}


.ta-resv-court {
    position:
        relative;

    min-width:
        0;

    padding:
        9px;

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

    border-radius:
        0;

    background:
        var(--ta-ivory);

    text-align:
        left;

    color:
        var(--ta-ink);

    cursor:
        pointer;
}


.ta-resv-court.is-selected {
    border-color:
        var(--ta-forest);
}


.ta-resv-court-image {
    display:
        block;

    height:
        150px;

    overflow:
        hidden;
}


.ta-resv-court-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform
        400ms ease;
}


.ta-resv-court:hover
.ta-resv-court-image img {
    transform:
        scale(1.025);
}


.ta-resv-court-body {
    display:
        block;

    padding:
        12px
        4px
        4px;
}


.ta-resv-court-body > strong {
    display:
        block;

    font-size:
        1.9rem;

    line-height:
        1;

    font-weight:
        500;

    color:
        var(--ta-forest);
}


.ta-resv-court-body > small {
    display:
        block;

    margin-top:
        5px;

    font-size:
        .74rem;

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


.ta-resv-court-body > small i {
    padding:
        0
        5px;

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


.ta-resv-court-body > span {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        fit-content;

    min-width:
        150px;

    margin-top:
        13px;

    padding-bottom:
        5px;

    border-bottom:
        1px solid
        var(--ta-forest);

    font-size:
        .61rem;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

    font-weight:
        700;

    color:
        var(--ta-forest);
}


.ta-resv-court-body b {
    margin-left:
        20px;

    color:
        var(--ta-clay);
}


/* ============================================================
   DATE + TIME
   ============================================================ */

.ta-resv-plan-grid {
    display:
        grid;

    grid-template-columns:
        .82fr
        1.18fr;

    gap:
        28px;
}


.ta-resv-date-step,
.ta-resv-time-step {
    min-width:
        0;
}


/* calendar */

.ta-resv-calendar {
    border:
        1px solid
        var(--ta-border);

    background:
        var(--ta-ivory);
}


.ta-resv-calendar-head {
    height:
        48px;

    display:
        grid;

    grid-template-columns:
        42px
        1fr
        42px;

    align-items:
        center;

    border-bottom:
        1px solid
        var(--ta-border);
}


.ta-resv-calendar-head button {
    height:
        100%;

    border:
        0;

    background:
        transparent;

    color:
        var(--ta-forest);

    cursor:
        pointer;
}


.ta-resv-calendar-head strong {
    text-align:
        center;

    font-size:
        .78rem;

    letter-spacing:
        .08em;

    color:
        var(--ta-forest);
}


.ta-resv-calendar-week,
.ta-resv-calendar-days {
    display:
        grid;

    grid-template-columns:
        repeat(
            7,
            1fr
        );
}


.ta-resv-calendar-week {
    padding:
        10px
        10px
        3px;

    color:
        var(--ta-muted);

    font-size:
        .67rem;

    text-align:
        center;
}


.ta-resv-calendar-days {
    padding:
        4px
        10px
        12px;
}


.ta-resv-calendar-days button,
.ta-resv-calendar-days span {
    aspect-ratio:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    background:
        transparent;

    font-size:
        .74rem;

    color:
        var(--ta-forest);
}


.ta-resv-calendar-days button {
    cursor:
        pointer;
}


.ta-resv-calendar-days button:hover:not(:disabled) {
    background:
        rgba(7,60,46,.07);
}


.ta-resv-calendar-days button.is-selected {
    background:
        var(--ta-forest);

    color:
        var(--ta-ivory);
}


.ta-resv-calendar-days button:disabled {
    opacity:
        .28;

    cursor:
        not-allowed;
}


/* time */

.ta-resv-slots-panel {
    display:
        none;
}


.ta-resv-slots-panel.is-active {
    display:
        block;
}


.ta-resv-slots-status {
    min-height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        8px;

    font-size:
        .72rem;

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


.ta-resv-slots-status strong {
    color:
        var(--ta-forest);

    font-weight:
        600;
}


.ta-resv-slots {
    display:
        grid;

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

    gap:
        7px;
}


.ta-resv-slot {
    min-height:
        54px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        2px;

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

    border-radius:
        0;

    background:
        var(--ta-ivory);

    color:
        var(--ta-forest);
}


.ta-resv-slot.is-available {
    cursor:
        pointer;
}


.ta-resv-slot.is-available:hover {
    border-color:
        var(--ta-forest);
}


.ta-resv-slot.is-selected {
    border-color:
        var(--ta-forest);

    background:
        var(--ta-forest);

    color:
        var(--ta-ivory);
}


.ta-resv-slot.is-unavailable {
    opacity:
        .38;

    background:
        #ece9e1;

    cursor:
        not-allowed;
}


.ta-resv-slot strong {
    font-size:
        1rem;

    font-weight:
        600;
}


.ta-resv-slot span {
    font-size:
        .63rem;
}


.ta-resv-slot-legend {
    display:
        flex;

    gap:
        20px;

    flex-wrap:
        wrap;

    margin-top:
        13px;

    font-size:
        .67rem;

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


.ta-resv-slot-legend span {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;
}


.ta-resv-slot-legend i {
    width:
        10px;

    height:
        10px;

    border:
        1px solid
        var(--ta-border);
}


.ta-resv-slot-legend .is-free {
    background:
        #c9ddcb;
}


.ta-resv-slot-legend .is-selected {
    background:
        var(--ta-forest);
}


.ta-resv-slot-legend .is-busy {
    background:
        #deddd9;
}


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

.ta-resv-form {
    display:
        grid;

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

    gap:
        14px;
}


.ta-resv-field {
    display:
        block;
}


.ta-resv-field-full {
    grid-column:
        1 / -1;
}


.ta-resv-field > span {
    display:
        block;

    margin-bottom:
        7px;

    font-size:
        .65rem;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;

    font-weight:
        600;

    color:
        var(--ta-forest);
}


.ta-resv-field > span strong {
    margin-left:
        5px;

    font-size:
        .60rem;

    font-weight:
        600;

    color:
        var(--ta-clay);
}


.ta-resv-field > span em {
    margin-left:
        5px;

    font-size:
        .60rem;

    font-style:
        normal;

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


.ta-resv-field input,
.ta-resv-field textarea {
    width:
        100%;

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

    border-radius:
        0;

    outline:
        none;

    background:
        var(--ta-ivory);

    color:
        var(--ta-ink);

    font-size:
        .92rem;
}


.ta-resv-field input {
    height:
        46px;

    padding:
        0
        12px;
}


.ta-resv-field textarea {
    min-height:
        90px;

    padding:
        11px
        12px;

    resize:
        vertical;
}


.ta-resv-field input:focus,
.ta-resv-field textarea:focus {
    border-color:
        var(--ta-gold);
}


.ta-resv-field > small {
    display:
        block;

    margin-top:
        6px;

    font-size:
        .70rem;

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


.ta-resv-gdpr {
    display:
        grid;

    grid-template-columns:
        18px
        1fr;

    gap:
        9px;

    align-items:
        start;

    margin-top:
        3px;

    font-size:
        .74rem;

    line-height:
        1.4;

    color:
        var(--ta-muted);

    cursor:
        pointer;
}


.ta-resv-gdpr input {
    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;
}


.ta-resv-checkbox {
    width:
        16px;

    height:
        16px;

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

    background:
        var(--ta-ivory);
}


.ta-resv-gdpr input:checked
+ .ta-resv-checkbox {
    position:
        relative;

    border-color:
        var(--ta-forest);

    background:
        var(--ta-forest);
}


.ta-resv-gdpr input:checked
+ .ta-resv-checkbox::after {
    content:
        "✓";

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--ta-ivory);

    font-size:
        .70rem;
}


.ta-resv-gdpr a {
    color:
        var(--ta-forest);
}


/* ============================================================
   SUMMARY
   ============================================================ */

.ta-resv-summary {
    position:
        sticky;

    top:
        calc(
            var(--ta-header-h)
            + 22px
        );

    padding:
        20px;

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

    background:
        var(--ta-ivory);
}


.ta-resv-summary-kicker {
    padding-bottom:
        13px;

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

    color:
        var(--ta-clay);
}


.ta-resv-summary-image {
    height:
        135px;

    margin:
        15px
        0;

    overflow:
        hidden;
}


.ta-resv-summary-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.ta-resv-summary dl {
    margin:
        0;
}


.ta-resv-summary dl > div {
    display:
        grid;

    grid-template-columns:
        70px
        1fr;

    gap:
        10px;

    padding:
        10px
        0;

    border-bottom:
        1px solid
        var(--ta-border);
}


.ta-resv-summary dt {
    font-size:
        .62rem;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;

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


.ta-resv-summary dd {
    margin:
        0;

    text-align:
        right;

    font-size:
        .86rem;

    font-weight:
        600;

    color:
        var(--ta-forest);
}


.ta-resv-submit {
    width:
        100%;

    min-height:
        45px;

    margin-top:
        17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0
        15px;

    border:
        1px solid
        var(--ta-gold);

    background:
        var(--ta-gold);

    color:
        var(--ta-forest-deep);

    text-transform:
        uppercase;

    font-size:
        .65rem;

    letter-spacing:
        .075em;

    font-weight:
        700;

    cursor:
        pointer;
}


.ta-resv-submit:disabled {
    opacity:
        .45;

    cursor:
        not-allowed;
}


.ta-resv-summary-note {
    margin:
        12px
        0
        0;

    font-size:
        .72rem;

    line-height:
        1.4;

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


/* ============================================================
   CONFIRMATION
   ============================================================ */

.ta-resv-confirmation {
    padding-top:
        6px;
}


.ta-resv-confirmation
.ta-resv-step-heading {
    margin-bottom:
        17px;
}


.ta-resv-trust {
    display:
        grid;

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

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

    border-bottom:
        1px solid
        var(--ta-border);
}


.ta-resv-trust > div {
    position:
        relative;

    min-height:
        115px;

    padding:
        20px
        20px
        20px
        48px;

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


.ta-resv-trust > div:last-child {
    border-right:
        0;
}


.ta-resv-trust > div > span {
    position:
        absolute;

    left:
        12px;

    top:
        21px;

    font-size:
        1.25rem;

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


.ta-resv-trust strong {
    display:
        block;

    font-size:
        .88rem;

    font-weight:
        600;

    color:
        var(--ta-forest);
}


.ta-resv-trust p {
    margin:
        5px
        0
        0;

    font-size:
        .72rem;

    line-height:
        1.42;

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


/* ============================================================
   ALERT / EMPTY
   ============================================================ */

.ta-resv-alert {
    margin-bottom:
        28px;

    padding:
        15px
        18px;

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

    background:
        var(--ta-ivory);
}


.ta-resv-alert strong {
    color:
        var(--ta-forest);
}


.ta-resv-alert ul,
.ta-resv-alert p {
    margin:
        7px
        0
        0;

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


.ta-resv-alert.is-error {
    border-left:
        3px solid
        var(--ta-clay);
}


.ta-resv-alert.is-warning {
    border-left:
        3px solid
        var(--ta-gold);
}


.ta-resv-empty {
    padding:
        80px
        0;

    text-align:
        center;
}


.ta-resv-empty h2 {
    margin:
        10px
        auto;

    max-width:
        650px;

    font-size:
        3rem;

    line-height:
        .95;

    color:
        var(--ta-forest);
}


/* ============================================================
   FOOTER CTA — MATCH HOME
   ============================================================ */

body:has(.ta-reservation-redesign)
.ta-footer-cta-inner {
    width:
        min(
            calc(100% - 96px),
            1280px
        ) !important;

    max-width:
        1280px !important;

    margin-inline:
        auto !important;
}


body:has(.ta-reservation-redesign)
.ta-footer-cta-copy h2 {
    font-weight:
        500 !important;
}


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

@media (max-width: 1024px) {

    .ta-resv-container {
        width:
            min(
                calc(100% - 64px),
                var(--res-max)
            );
    }


    .ta-resv-hero-inner {
        grid-template-columns:
            1fr
            360px;

        gap:
            40px;
    }


    .ta-resv-flow-grid {
        grid-template-columns:
            1fr
            270px;
    }


    .ta-resv-plan-grid {
        grid-template-columns:
            1fr;
    }


    .ta-resv-slots {
        grid-template-columns:
            repeat(
                4,
                1fr
            );
    }


    .ta-resv-trust {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }


    .ta-resv-trust > div:nth-child(2) {
        border-right:
            0;
    }


    .ta-resv-trust > div:nth-child(-n+2) {
        border-bottom:
            1px solid
            var(--ta-border);
    }

}


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

@media (max-width: 720px) {

    .ta-resv-container {
        width:
            min(
                calc(100% - 40px),
                var(--res-max)
            );
    }


    .ta-resv-hero {
        min-height:
            0;
    }


    .ta-resv-hero-inner {
        min-height:
            0;

        grid-template-columns:
            1fr;

        gap:
            27px;

        padding-top:
            38px;

        padding-bottom:
            38px;
    }


    .ta-resv-hero-copy h1 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.2rem
            );
    }


    .ta-resv-quick {
        width:
            100%;
    }


    .ta-resv-page {
        padding-top:
            34px;
    }


    .ta-resv-flow-grid {
        grid-template-columns:
            1fr;
    }


    .ta-resv-summary {
        position:
            static;

        order:
            -1;
    }


    .ta-resv-courts {
        grid-template-columns:
            1fr;
    }


    .ta-resv-court-image {
        height:
            180px;
    }


    .ta-resv-slots {
        grid-template-columns:
            repeat(
                3,
                1fr
            );
    }


    .ta-resv-form {
        grid-template-columns:
            1fr;
    }


    .ta-resv-field-full {
        grid-column:
            auto;
    }


    .ta-resv-trust {
        grid-template-columns:
            1fr;
    }


    .ta-resv-trust > div {
        border-right:
            0;

        border-bottom:
            1px solid
            var(--ta-border);
    }


    .ta-resv-trust > div:last-child {
        border-bottom:
            0;
    }


    body:has(.ta-reservation-redesign)
    .ta-footer-cta-inner {
        width:
            min(
                calc(100% - 40px),
                1280px
            ) !important;
    }

}


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

@media (max-width: 430px) {

    .ta-resv-slots {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }


    .ta-resv-hero-actions {
        flex-direction:
            column;
    }


    .ta-resv-btn {
        width:
            100%;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    .ta-resv-court-image img {
        transition:
            none;
    }

}

/* ============================================================
   RESERVATIONS V2 — FLUID LARGE DESKTOP
   ============================================================ */

@media (min-width: 1280px) {

    /*
     * PAGE WIDTH
     *
     * Pe desktop wide nu mai folosim limita de 1280px.
     * Raman aproximativ 48px gutter pe fiecare parte.
     */

    .ta-reservation-redesign
    .ta-resv-container {
        width:
            calc(100% - 96px) !important;

        max-width:
            none !important;
    }


    /* ========================================================
       HERO
       ======================================================== */

    .ta-resv-hero-inner {
        grid-template-columns:
            minmax(0, 1.15fr)
            clamp(
                390px,
                28vw,
                520px
            ) !important;

        gap:
            clamp(
                60px,
                6vw,
                140px
            ) !important;
    }


    .ta-resv-hero-copy {
        max-width:
            760px !important;
    }


    .ta-resv-quick {
        width:
            100%;

        max-width:
            520px;

        justify-self:
            end;
    }


    /* ========================================================
       MAIN CONTENT + SUMMARY
       ======================================================== */

    .ta-resv-flow-grid {
        grid-template-columns:
            minmax(0, 1fr)
            clamp(
                330px,
                20vw,
                420px
            ) !important;

        gap:
            clamp(
                44px,
                4.5vw,
                105px
            ) !important;
    }


    .ta-resv-flow-main {
        width:
            100% !important;

        max-width:
            none !important;
    }


    .ta-resv-summary {
        width:
            100% !important;

        max-width:
            none !important;
    }


    /* ========================================================
       COURTS
       ======================================================== */

    .ta-resv-courts {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        gap:
            clamp(
                18px,
                1.5vw,
                32px
            ) !important;
    }


    .ta-resv-court-image {
        height:
            clamp(
                190px,
                15vw,
                310px
            ) !important;
    }


    .ta-resv-court-body {
        padding:
            16px
            clamp(
                8px,
                1vw,
                18px
            )
            10px !important;
    }


    /* ========================================================
       DATE + TIME
       ======================================================== */

    .ta-resv-plan-grid {
        grid-template-columns:
            minmax(
                360px,
                .78fr
            )
            minmax(
                0,
                1.22fr
            ) !important;

        gap:
            clamp(
                36px,
                3.5vw,
                78px
            ) !important;
    }


    .ta-resv-calendar {
        width:
            100%;
    }


    .ta-resv-slots-panel {
        width:
            100%;
    }


    .ta-resv-slots {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            ) !important;

        gap:
            clamp(
                8px,
                .7vw,
                14px
            ) !important;
    }


    .ta-resv-slot {
        min-height:
            62px !important;
    }


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

    .ta-resv-customer {
        width:
            100%;
    }


    .ta-resv-form {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        column-gap:
            clamp(
                22px,
                2vw,
                42px
            ) !important;

        row-gap:
            17px !important;
    }


    /* ========================================================
       TYPOGRAPHIC SECTION HEADS
       Make use of the extra horizontal space.
       ======================================================== */

    .ta-resv-step-heading {
        grid-template-columns:
            32px
            minmax(0, 760px) !important;

        gap:
            18px !important;
    }


    .ta-resv-step-heading p {
        max-width:
            620px !important;
    }


    /* ========================================================
       CONFIRMATION
       ======================================================== */

    .ta-resv-confirmation {
        width:
            100%;
    }


    .ta-resv-trust {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            ) !important;

        width:
            100%;
    }


    .ta-resv-trust > div {
        padding:
            24px
            clamp(
                24px,
                2vw,
                42px
            )
            24px
            clamp(
                52px,
                3.5vw,
                72px
            ) !important;
    }

}


/*
 * 27" / very wide displays:
 * put a little more breathing room at the physical screen edges.
 */

@media (min-width: 1800px) {

    .ta-reservation-redesign
    .ta-resv-container {
        width:
            calc(100% - 128px) !important;
    }


    .ta-resv-flow-grid {
        grid-template-columns:
            minmax(0, 1fr)
            clamp(
                350px,
                19vw,
                440px
            ) !important;

        gap:
            clamp(
                65px,
                5vw,
                120px
            ) !important;
    }


    .ta-resv-plan-grid {
        gap:
            clamp(
                50px,
                4vw,
                90px
            ) !important;
    }

}

/* END RESERVATIONS V2 — FLUID LARGE DESKTOP */