/*
 * =========================================================
 * 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:76px !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;
}


/*
 * Solid underlay for the complete frozen booking header.
 * Covers the gaps between DATE CARDS, PANBAR and TIME/COURT
 * so scrolling slot rows can never show through.
 */
.tap-booking-main.dp-court-booking-module
.swipe-date-shell::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    pointer-events:none;

    background:#ffffff !important;

    opacity:1 !important;

    border-radius:
        0 0 12px 12px;
}


/*
 * 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:
        4px 4px 8px !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{

    position:relative !important;

    display:block !important;

    width:100% !important;

    height:6px !important;

    min-width:0 !important;

    border-radius:999px !important;

    background:#d4d7dc !important;

    background-image:none !important;

    box-shadow:none !important;

    filter:none !important;

    cursor:pointer;

    touch-action:none;

    user-select:none;

    overflow:visible !important;
}

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

    position:absolute;

    left:0;

    top:50%;

    height:10px;

    min-width:44px;

    transform:
        translateY(-50%);

    border:0;

    border-radius:999px;

    background:#929292;

    background-image:none;

    box-shadow:none;

    filter:none;

    opacity:1;

    cursor:grab;

    pointer-events:auto;

    touch-action:none;

    user-select:none;

    will-change:left;
}


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

    cursor:grabbing;
}


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

    opacity:.50;

    cursor:default;
}



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

    font-size:14px !important;
    font-weight:800 !important;
    line-height:1.15 !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(
            90deg,
            #071334 0%,
            #101d4d 55%,
            #281052 100%
        ) !important;

    background-size:
        100% 100% !important;

    background-position:
        0 0 !important;

    animation:none !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.08),
        0 4px 10px
        rgba(7,19,52,.10) !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;

    font-size:14px !important;
    font-weight:700 !important;
    line-height:1.15 !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:64px !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:6px !important;

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

        padding:
            3px 2px 6px !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(11px, 2.8vw, 13px) !important;
    font-weight:800 !important;
    line-height:1.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(11px, 2.7vw, 13px) !important;
    font-weight:700 !important;
    line-height:1.1 !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(11px, 2.7vw, 13px) !important;
    font-weight:700 !important;
    line-height:1.1 !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;
    }

}

/* ============================================================
   KRADPC PLAYER BOOKING STATUS OWNERSHIP
   Migrated from dewpoint-app.css: 20260821-132118
   Original selectors, declaration order and !important
   flags are preserved exactly.
   ============================================================ */

.dp-pm-booking .tap-cell.available{
    color:#0c8543;

    background:#f0faf3;

    border:1px solid #83d8a0;
}

.dp-pm-booking .tap-cell.available:hover{
    background:#e5f7eb;

    box-shadow:
        inset 0 0 0 1px
        #47bc75;
}

.dp-pm-booking .tap-cell.picked{
    color:#fff;

    border-color:#633bd6;

    background:
        linear-gradient(
            135deg,
            #6f38df,
            #2378ec
        );

    box-shadow:
        0 5px 15px
        rgba(77,61,210,.17);
}

.dp-pm-booking .tap-cell.booked{
    color:#c4563e;

    border:1px solid #efb1a1;

    background:#fff0eb;
}

.dp-pm-booking .tap-cell.held{
    color:#936d08;

    border:1px solid #e6cb67;

    background:#fff8df;
}

.dp-pm-booking .tap-cell.held span{
    margin-top:3px;
    text-align:center;

    font-size:6px;
}

.dp-pm-booking .tap-cell.blocked{
    color:#737d79;

    border:1px solid #d1d8d5;

    background:#eef1f0;
}

.dp-pm-booking .tap-cell.lapsed{
    color:#9ba2a0;

    border:1px solid #e0e4e2;

    background:#f3f5f4;
}

body .dp-site
.dp-home-booking
.dp-pm-booking
.tap-cell.available{

    color:#2563eb !important;

    background:
        #ffffff !important;

    border:
        1px solid #cfe0ff !important;

    box-shadow:none !important;
}

body .dp-site
.dp-home-booking
.dp-pm-booking
.tap-cell.available b{

    color:#2563eb !important;
}

body .dp-site
.dp-home-booking
.dp-pm-booking
.tap-cell.available span{

    color:#475569 !important;
}

body .dp-site
.dp-home-booking
.dp-pm-booking
.tap-cell.picked{

    color:#fff !important;

    background:
        linear-gradient(
            135deg,
            #9326ef 0%,
            #6336ff 42%,
            #237cf7 100%
        ) !important;

    border-color:
        #9c59ff !important;

    box-shadow:
        0 8px 22px
        rgba(112,53,239,.32) !important;
}

body .dp-site
.dp-home-booking
.dp-pm-booking
.tap-cell.picked b,

body .dp-site
.dp-home-booking
.dp-pm-booking
.tap-cell.picked span{

    color:#fff !important;
}

body .dp-site
.dp-home-booking
.dp-pm-booking
.tap-cell.held{

    color:#b97c18 !important;

    background:
        #fff8e6 !important;

    border:
        1px solid #f4dda4 !important;
}

body .dp-site
.dp-home-booking
.dp-pm-booking
.tap-cell.held b,

body .dp-site
.dp-home-booking
.dp-pm-booking
.tap-cell.held span{

    color:#b97c18 !important;
}

body .dp-site
.dp-home-booking
.dp-pm-booking
.tap-cell.booked{

    color:#db5d63 !important;

    background:
        #fff1f1 !important;

    border:
        1px solid #ffd5d7 !important;
}

body .dp-site
.dp-home-booking
.dp-pm-booking
.tap-cell.booked b{

    color:#d65b61 !important;
}

body .dp-site
.dp-home-booking
.dp-pm-booking
.tap-cell.blocked,

body .dp-site
.dp-home-booking
.dp-pm-booking
.tap-cell.lapsed{

    color:#8d94a5 !important;

    background:
        #f3f4f7 !important;

    border:
        1px solid #e3e5ea !important;
}

body .dp-site
.dp-home-booking
.dp-pm-booking
.tap-cell.blocked b,

body .dp-site
.dp-home-booking
.dp-pm-booking
.tap-cell.lapsed b{

    color:#7b8496 !important;
}

body .dp-site
.dp-home-booking
.dp-pm-booking
.tap-cell.checking{

    color:#64748b !important;

    background:#f5f7fb !important;

    border:
        1px solid #dbe2ea !important;

    cursor:wait !important;
}

body .dp-site
.dp-home-booking
.dp-pm-booking
.tap-cell.checking b{

    color:#64748b !important;

    opacity:.85;
}