/*
 * =========================================================
 * DEWPOINT COURT BOOKING
 * Dedicated booking presentation owner
 * =========================================================
 */


/* =========================================================
   ROOT
   ========================================================= */

.tap-booking-main.dp-court-booking-module{

    --court-booking-time:
        minmax(
            clamp(72px,14vw,150px),
            .72fr
        );

    --court-booking-columns:
        var(--court-booking-time)
        repeat(
            var(--tap-courts,4),
            minmax(0,1fr)
        );

    overflow:visible !important;
}


/* Prevent legacy horizontal booking layout */

.tap-booking-main.dp-court-booking-module
.tap-grid-scroll{

    width:100% !important;

    max-width:100% !important;

    overflow:hidden !important;
}


.tap-booking-main.dp-court-booking-module
.tap-slot-grid{

    display:grid !important;

    width:100% !important;

    max-width:100% !important;

    min-width:0 !important;

    grid-template-columns:
        var(--court-booking-columns) !important;

    gap:
        clamp(4px,1vw,8px) !important;
}


/* =========================================================
   UNIFIED BOOKING HEADER
   ========================================================= */

.tap-booking-main.dp-court-booking-module
.swipe-date-shell{

    position:sticky !important;

    top:84px !important;

    z-index:500 !important;

    display:block !important;

    width:100% !important;

    min-width:0 !important;

    overflow:visible !important;

    padding:
        4px 0 6px !important;

    background:#ffffff !important;

    border-radius:
        0 0 12px 12px;

    box-shadow:
        0 8px 18px
        rgba(18,28,55,.08);

    isolation:isolate;


    max-width:100% !important;
}


/*
 * Old arrows are no longer part of the design.
 * The panbar below the dates owns navigation.
 */

.tap-booking-main.dp-court-booking-module
.desktop-date-arrow{

    display:none !important;
}


/* =========================================================
   DATE CARDS
   ========================================================= */

.tap-booking-main.dp-court-booking-module
.tap-date-strip{

    display:flex !important;

    gap:8px !important;

    width:100% !important;

    min-width:0 !important;

    overflow-x:auto !important;

    overflow-y:hidden !important;

    padding:
        4px 4px 6px !important;

    scrollbar-width:none !important;

    -webkit-overflow-scrolling:
        touch;
}


.tap-booking-main.dp-court-booking-module
.tap-date-strip::-webkit-scrollbar{

    display:none !important;
}


/* =========================================================
   DATE PAN BAR
   ========================================================= */

.tap-booking-main.dp-court-booking-module
.tap-date-panbar{

    display:grid !important;

    grid-template-columns:
        32px minmax(0,1fr) 32px !important;

    align-items:center !important;

    gap:8px !important;

    width:100% !important;

    padding:
        1px 4px 6px !important;

    background:#ffffff !important;
}


.tap-booking-main.dp-court-booking-module
.tap-date-panbar button{

    display:grid !important;

    place-items:center !important;

    width:30px !important;
    height:30px !important;

    padding:0 !important;

    border:
        1px solid #dfe6ef !important;

    border-radius:
        999px !important;

    background:#ffffff !important;

    color:#1d3557 !important;

    font-size:20px !important;

    line-height:1 !important;
}


.tap-booking-main.dp-court-booking-module
.tap-date-pan-track{

    display:block !important;

    width:100% !important;

    height:3px !important;

    border-radius:999px !important;

    background:#c1cad8 !important;
}


/* =========================================================
   TIME / COURTS HEADER
   ========================================================= */

.tap-booking-main.dp-court-booking-module
.tap-booking-column-head{

    display:grid !important;

    width:100% !important;

    max-width:100% !important;

    min-width:0 !important;

    grid-template-columns:
        var(--court-booking-columns) !important;

    gap:
        clamp(4px,1vw,8px) !important;

    padding:
        0 0 5px !important;

    background:#ffffff !important;
}


.tap-booking-main.dp-court-booking-module
.tap-booking-column-head
.tap-grid-head{

    min-width:0 !important;

    overflow:hidden !important;

    white-space:nowrap !important;

    text-overflow:ellipsis !important;

    box-sizing:border-box !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    padding:
        9px 3px !important;

    border-radius:
        9px !important;

    text-align:center !important;
}


.tap-booking-main.dp-court-booking-module
.tap-booking-column-head
.tap-grid-head.time{

    justify-content:flex-start !important;

    padding-left:7px !important;

    color:#111827 !important;

    background:#f8f9fb !important;
}


.tap-booking-main.dp-court-booking-module
.tap-booking-column-head
.tap-grid-head:not(.time){

    color:#ffffff !important;

    background:
        linear-gradient(
            135deg,
            #151b2e,
            #202438
        ) !important;
}


/* =========================================================
   SCHEDULE CELLS
   ========================================================= */

.tap-booking-main.dp-court-booking-module
.tap-time,

.tap-booking-main.dp-court-booking-module
.tap-cell{

    min-width:0 !important;

    max-width:100% !important;

    box-sizing:border-box !important;
}


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

@media(max-width:760px){

    /*
     * SINGLE MOBILE BOOKING SOURCE OWNER
     *
     * 68px TIME column
     * Four equal court columns in remaining width.
     */

    .tap-booking-main.dp-court-booking-module{

        --court-booking-columns:
            68px
            repeat(
                var(--tap-courts,4),
                minmax(0,1fr)
            );

        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }


    .tap-booking-main.dp-court-booking-module
    .swipe-date-shell{

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

        overflow:visible !important;

        top:72px !important;
}


    .tap-booking-main.dp-court-booking-module
    .desktop-date-arrow{

        display:none !important;
    }


    .tap-booking-main.dp-court-booking-module
    .tap-date-panbar{

        display:grid !important;

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

        align-items:center !important;

        gap:5px !important;

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

        padding:
            1px 2px 4px !important;
    }


    .tap-booking-main.dp-court-booking-module
    .tap-date-panbar button{

        width:27px !important;
        height:27px !important;

        padding:0 !important;

        font-size:18px !important;
    }


    /*
     * HEADER AND BODY:
     * ONE IDENTICAL GRID TEMPLATE
     */

    .tap-booking-main.dp-court-booking-module
    .tap-booking-column-head,

    .tap-booking-main.dp-court-booking-module
    .tap-slot-grid{

        display:grid !important;

        grid-template-columns:
            var(--court-booking-columns) !important;

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

        gap:4px !important;

        box-sizing:border-box !important;
    }


    .tap-booking-main.dp-court-booking-module
    .tap-grid-scroll{

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

        overflow:hidden !important;

        box-sizing:border-box !important;
    }


    /*
     * COLUMN HEADERS
     */

    .tap-booking-main.dp-court-booking-module
    .tap-booking-column-head
    .tap-grid-head{

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

        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        box-sizing:border-box !important;

        overflow:hidden !important;

        white-space:nowrap !important;

        padding:
            7px 1px !important;

        border-radius:
            7px !important;

        font-size:
            clamp(
                8px,
                2.2vw,
                10px
            ) !important;

        line-height:1 !important;
    }


    .tap-booking-main.dp-court-booking-module
    .tap-booking-column-head
    .tap-grid-head.time{

        justify-content:flex-start !important;

        padding-left:5px !important;
    }


    /*
     * TIME COLUMN
     */

    .tap-booking-main.dp-court-booking-module
    .tap-time{

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

        box-sizing:border-box !important;

        overflow:hidden !important;

        white-space:nowrap !important;

        padding:
            5px 2px !important;

        font-size:
            clamp(
                8px,
                2.05vw,
                10px
            ) !important;

        line-height:1.05 !important;
    }


    .tap-booking-main.dp-court-booking-module
    .tap-time b{

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

        white-space:nowrap !important;

        font-size:inherit !important;
        line-height:inherit !important;
    }


    /*
     * COURT CELLS
     */

    .tap-booking-main.dp-court-booking-module
    .tap-cell{

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

        box-sizing:border-box !important;

        overflow:hidden !important;

        padding:
            5px 1px !important;

        font-size:
            clamp(
                8px,
                2.05vw,
                10px
            ) !important;

        line-height:1.05 !important;
    }


    .tap-booking-main.dp-court-booking-module
    .tap-cell b{

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

        overflow:hidden !important;

        white-space:nowrap !important;

        font-size:inherit !important;
        line-height:inherit !important;
    }

}