/* CS Table Reservation 0.3.0 - compact 3-column UI */
.cstr-wrap{
    --cstr-fg:#fff;
    --cstr-accent:#ff3366;
    --cstr-muted:rgba(255,255,255,.58);
    --cstr-line:rgba(255,255,255,.13);
    --cstr-panel:rgba(255,255,255,.025);
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    color:var(--cstr-fg)!important;
    font-family:inherit!important;
}
.cstr-wrap *{box-sizing:border-box}
.cstr-booking{
    width:100%!important;
    max-width:1180px!important;
    margin:0 auto!important;
    padding:8px 0 12px!important;
}

.cstr-floor-radio{
    position:absolute!important;
    left:-9999px!important;
    opacity:0!important;
}

.cstr-titlebar{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:20px!important;
    min-height:50px!important;
    margin:0 0 10px!important;
}
.cstr-eyebrow{
    display:block!important;
    margin:0 0 4px!important;
    color:var(--cstr-accent)!important;
    font-size:9px!important;
    font-weight:800!important;
    line-height:1!important;
    letter-spacing:.2em!important;
}
.cstr-titlebar h2{
    margin:0!important;
    padding:0!important;
    color:var(--cstr-fg)!important;
    font-size:clamp(27px,2.7vw,40px)!important;
    line-height:1!important;
    font-weight:650!important;
    letter-spacing:-.025em!important;
}
.cstr-mini-status{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    padding-bottom:2px!important;
    color:var(--cstr-muted)!important;
    font-size:10px!important;
}
.cstr-mini-status i{
    width:7px!important;
    height:7px!important;
    border-radius:50%!important;
    background:var(--cstr-accent)!important;
    box-shadow:0 0 0 4px color-mix(in srgb,var(--cstr-accent) 13%,transparent)!important;
}

.cstr-notice{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    margin:0 0 8px!important;
    padding:7px 10px!important;
    border:1px solid var(--cstr-line)!important;
    border-radius:8px!important;
    font-size:10px!important;
}
.cstr-notice.is-success{border-color:var(--cstr-accent)!important}
.cstr-notice.is-error{border-color:#ff8c8c!important}
.cstr-notice span{color:var(--cstr-muted)!important}

.cstr-layout{
    display:grid!important;
    grid-template-columns:190px minmax(0,1fr) 220px!important;
    gap:12px!important;
    align-items:stretch!important;
    width:100%!important;
    height:420px!important;
    max-height:420px!important;
    overflow:visible!important;
}

.cstr-side,
.cstr-map-card{
    min-width:0!important;
    min-height:0!important;
    height:420px!important;
    border:1px solid var(--cstr-line)!important;
    border-radius:14px!important;
    background:
        linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.010))!important;
    backdrop-filter:blur(2px)!important;
}

.cstr-side{
    padding:15px!important;
    display:flex!important;
    flex-direction:column!important;
}
.cstr-side-left{justify-content:flex-start!important}
.cstr-side-right{justify-content:space-between!important}

.cstr-card-title{
    margin:0 0 10px!important;
    color:var(--cstr-fg)!important;
    font-size:12px!important;
    line-height:1!important;
    font-weight:700!important;
}
.cstr-floor-title{margin-top:17px!important}

.cstr-field{
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
    width:100%!important;
    margin:0 0 9px!important;
}
.cstr-field>span{
    color:var(--cstr-muted)!important;
    font-size:9px!important;
    line-height:1!important;
    font-weight:700!important;
    text-transform:uppercase!important;
    letter-spacing:.08em!important;
}
.cstr-control{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:35px!important;
    min-height:35px!important;
    margin:0!important;
    padding:7px 9px!important;
    border:1px solid var(--cstr-line)!important;
    border-radius:7px!important;
    background:rgba(255,255,255,.035)!important;
    color:var(--cstr-fg)!important;
    font:inherit!important;
    font-size:11px!important;
    line-height:1!important;
    box-shadow:none!important;
    pointer-events:auto!important;
}
select.cstr-control{
    appearance:auto!important;
    -webkit-appearance:auto!important;
}
select.cstr-control option{
    background:#fff!important;
    color:#111!important;
}

.cstr-floor-buttons{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
}
.cstr-floor-buttons label{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-height:34px!important;
    margin:0!important;
    padding:7px 9px!important;
    border:1px solid var(--cstr-line)!important;
    border-radius:7px!important;
    background:transparent!important;
    color:var(--cstr-fg)!important;
    font-size:10px!important;
    cursor:pointer!important;
}
.cstr-floor-radio:nth-of-type(1):checked~.cstr-titlebar~.cstr-layout .cstr-floor-buttons label:nth-child(1),
.cstr-floor-radio:nth-of-type(2):checked~.cstr-titlebar~.cstr-layout .cstr-floor-buttons label:nth-child(2){
    background:var(--cstr-fg)!important;
    color:#151515!important;
    border-color:var(--cstr-fg)!important;
}

.cstr-legend{
    margin-top:auto!important;
    display:grid!important;
    gap:6px!important;
    color:var(--cstr-muted)!important;
    font-size:9px!important;
}
.cstr-legend span{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
}
.cstr-legend i{
    width:8px!important;
    height:8px!important;
    border-radius:50%!important;
    border:1px solid rgba(255,255,255,.7)!important;
}
.cstr-legend i.sel{
    background:var(--cstr-accent)!important;
    border-color:var(--cstr-accent)!important;
}
.cstr-legend i.busy{
    opacity:.25!important;
    background:#fff!important;
}

.cstr-map-card{
    padding:10px!important;
    overflow:hidden!important;
}
.cstr-map-top{
    height:26px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    padding:0 2px!important;
}
.cstr-map-top strong{
    color:var(--cstr-fg)!important;
    font-size:10px!important;
}
.cstr-map-top span{
    color:var(--cstr-accent)!important;
    font-size:9px!important;
    font-weight:700!important;
}

.cstr-floor-panels{
    height:calc(100% - 26px)!important;
}
.cstr-floor-panel{
    display:none!important;
    position:relative!important;
    width:100%!important;
    height:100%!important;
}
.cstr-floor-radio:nth-of-type(1):checked~.cstr-titlebar~.cstr-layout .cstr-panel-a{
    display:block!important;
}
.cstr-floor-radio:nth-of-type(2):checked~.cstr-titlebar~.cstr-layout .cstr-panel-b{
    display:block!important;
}
.cstr-room{
    position:relative!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    background:
        radial-gradient(circle at 50% 50%,rgba(255,255,255,.018),transparent 60%)!important;
}
.cstr-room:before{
    content:""!important;
    position:absolute!important;
    inset:2%!important;
    border:1px solid rgba(255,255,255,.055)!important;
    border-radius:10px!important;
    pointer-events:none!important;
}
.cstr-lake{
    position:absolute!important;
    top:4px!important;
    right:8px!important;
    z-index:30!important;
    color:rgba(255,255,255,.17)!important;
    font-size:7px!important;
    line-height:1!important;
    letter-spacing:.28em!important;
    font-weight:800!important;
}

.cstr-table-slot{
    position:absolute!important;
    left:var(--x)!important;
    top:var(--y)!important;
    width:var(--w)!important;
    height:var(--h)!important;
    transform:rotate(var(--rot))!important;
    overflow:visible!important;
    z-index:10!important;
}
.cstr-table-center{
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    padding:0!important;
    border:1.25px solid rgba(255,255,255,.72)!important;
    border-radius:5px!important;
    background:rgba(255,255,255,.018)!important;
    color:rgba(255,255,255,.84)!important;
    font:inherit!important;
    cursor:pointer!important;
    box-shadow:none!important;
}
.cstr-table-center:hover{
    border-color:#fff!important;
    background:rgba(255,255,255,.06)!important;
}
.cstr-table-center strong{
    color:inherit!important;
    font-size:8px!important;
    line-height:1!important;
    font-weight:800!important;
}

input.cstr-seat{
    position:absolute!important;
    z-index:5!important;
    width:14px!important;
    height:14px!important;
    min-width:14px!important;
    min-height:14px!important;
    margin:0!important;
    padding:0!important;
    border:1.15px solid rgba(255,255,255,.78)!important;
    border-radius:50%!important;
    background:transparent!important;
    appearance:none!important;
    -webkit-appearance:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    cursor:pointer!important;
    box-shadow:none!important;
}
input.cstr-seat:hover{
    border-color:#fff!important;
    background:rgba(255,255,255,.10)!important;
}
input.cstr-seat:checked{
    border-color:var(--cstr-accent)!important;
    background:var(--cstr-accent)!important;
    box-shadow:0 0 0 2px color-mix(in srgb,var(--cstr-accent) 16%,transparent)!important;
}
input.cstr-seat:disabled{
    opacity:.18!important;
    cursor:not-allowed!important;
    background:rgba(255,255,255,.4)!important;
}
.seat-top-left{left:18%!important;top:-17px!important}
.seat-top-right{right:18%!important;top:-17px!important}
.seat-right{right:-18px!important;top:calc(50% - 7px)!important}
.seat-bottom-right{right:18%!important;bottom:-17px!important}
.seat-bottom-left{left:18%!important;bottom:-17px!important}
.seat-left{left:-18px!important;top:calc(50% - 7px)!important}

.cstr-table-slot.has-selection .cstr-table-center{
    border-color:var(--cstr-accent)!important;
    color:var(--cstr-accent)!important;
}
.cstr-table-slot.all-selected .cstr-table-center{
    background:color-mix(in srgb,var(--cstr-accent) 9%,transparent)!important;
}

.cstr-booking-summary{
    margin-top:auto!important;
    margin-bottom:10px!important;
    padding:10px!important;
    border:1px solid var(--cstr-line)!important;
    border-radius:8px!important;
    background:rgba(255,255,255,.02)!important;
}
.cstr-booking-summary span{
    display:block!important;
    margin-bottom:4px!important;
    color:var(--cstr-muted)!important;
    font-size:8px!important;
    font-weight:700!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
}
.cstr-booking-summary strong{
    display:block!important;
    color:var(--cstr-fg)!important;
    font-size:10px!important;
    line-height:1.35!important;
}

.cstr-submit{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-height:38px!important;
    margin:0!important;
    padding:8px 10px!important;
    border:0!important;
    border-radius:999px!important;
    background:var(--cstr-accent)!important;
    color:#111!important;
    font:inherit!important;
    font-size:10px!important;
    font-weight:800!important;
    cursor:pointer!important;
}
.cstr-submit:disabled{
    opacity:.32!important;
    cursor:not-allowed!important;
}

@media(max-width:900px){
    .cstr-layout{
        grid-template-columns:170px minmax(0,1fr)!important;
        height:auto!important;
        max-height:none!important;
    }
    .cstr-side-right{
        grid-column:1/-1!important;
        height:auto!important;
        min-height:0!important;
        display:grid!important;
        grid-template-columns:1fr 1fr 1fr 1fr auto!important;
        gap:8px!important;
        align-items:end!important;
    }
    .cstr-side-right>div:first-child{
        display:contents!important;
    }
    .cstr-side-right .cstr-card-title{
        display:none!important;
    }
    .cstr-booking-summary{
        margin:0!important;
        min-height:35px!important;
    }
    .cstr-submit{width:auto!important;padding-inline:16px!important}
}

@media(max-width:700px){
    .cstr-titlebar{
        display:block!important;
    }
    .cstr-mini-status{margin-top:7px!important}
    .cstr-layout{
        display:block!important;
    }
    .cstr-side,
    .cstr-map-card{
        width:100%!important;
        height:auto!important;
        margin-bottom:10px!important;
    }
    .cstr-side-left,
    .cstr-side-right{
        display:block!important;
    }
    .cstr-floor-buttons{
        grid-template-columns:1fr 1fr!important;
    }
    .cstr-legend{
        display:flex!important;
        margin-top:10px!important;
    }
    .cstr-map-card{height:390px!important}
    .cstr-side-right .cstr-card-title{display:block!important}
    .cstr-booking-summary{margin:10px 0!important}
    .cstr-submit{width:100%!important}
}