.dxu-cb2{
    font-family:Inter,Arial,sans-serif;
    color:#13283d;
    background:#f4f7fa;
    border:1px solid #dce4eb;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 14px 45px rgba(10,30,50,.09)
}

.dxu-cb2 *{
    box-sizing:border-box
}


/* HEADER */

.dxu-cb2 header{
    background:#102c46;
    color:#fff;
    padding:25px 28px;
    display:flex;
    justify-content:space-between;
    align-items:center
}

.dxu-cb2 header small{
    color:#4bb4ff;
    letter-spacing:1.7px;
    font-weight:800
}

.dxu-cb2 header h2{
    margin:5px 0;
    font-size:30px
}

.dxu-cb2 header p{
    margin:0;
    color:#c9d6e2
}

.dxu-cb2 header button{
    background:transparent;
    border:1px solid #7890a4;
    color:#fff;
    border-radius:7px;
    padding:8px 13px;
    cursor:pointer
}


/* MAIN LAYOUT */

.cb2-layout{
    display:grid;
    grid-template-columns:370px minmax(0,1fr);
    min-height:760px;
    align-items:stretch
}


/* LEFT CONTROLS */

.cb2-controls{
    background:#fff;
    border-right:1px solid #e1e7ed;
    overflow:auto;
    min-width:0
}

.cb2-step{
    padding:18px 20px;
    border-bottom:1px solid #edf0f3
}

.cb2-step>b{
    display:block;
    margin-bottom:12px;
    font-size:14px
}


/* SPORT */

.sport-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px
}

.sport-grid button{
    border:1px solid #d5dfe8;
    background:#f8fafc;
    border-radius:7px;
    padding:11px 7px;
    text-align:left;
    cursor:pointer
}

.sport-grid button.active{
    background:#e0f2ff;
    border-color:#168bd0;
    color:#075f91;
    font-weight:800
}


/* INPUTS */

.cb2-step label{
    display:block;
    color:#586b7c;
    font-size:12px;
    font-weight:700;
    margin:9px 0
}

.cb2-step input,
.cb2-step select{
    width:100%;
    margin-top:5px;
    border:1px solid #ccd7e1;
    border-radius:7px;
    padding:9px;
    font:inherit
}

.dims{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px
}

.check{
    display:flex!important;
    align-items:center;
    gap:8px
}

.check input{
    width:auto!important;
    margin:0!important
}


/* PRESETS */

.presets{
    display:flex;
    gap:5px;
    flex-wrap:wrap;
    margin-top:8px
}

.presets button{
    border:1px solid #d5dfe8;
    background:#fff;
    border-radius:6px;
    padding:5px 7px;
    font-size:11px;
    cursor:pointer
}


/* COLOURS */

.colour-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
}

.colour-row label{
    display:grid;
    grid-template-columns:1fr 42px;
    align-items:center
}

.colour-row input{
    height:30px;
    padding:0
}


/* QUOTE */

.quote{
    width:100%;
    border:0;
    border-radius:8px;
    padding:13px;
    background:#168bd0;
    color:#fff;
    font-weight:900;
    cursor:pointer
}


/* =========================================================
   PREVIEW
   ========================================================= */

.cb2-preview{
    padding:22px;
    min-width:0;
    width:100%;
    position:sticky;
    top:20px;
    align-self:start
}

.preview-bar{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    margin-bottom:14px
}

.preview-bar button{
    border:1px solid #cbd6e0;
    background:#fff;
    border-radius:6px;
    padding:7px 10px;
    cursor:pointer
}

.svg-wrap{
    background:#e7edf2;
    border-radius:14px;
    min-height:700px;
    padding:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:auto
}

.svg-wrap svg{
    display:block;
    width:100%;
    height:auto;
    max-width:none;
    max-height:none;
    transition:transform .2s;
    transform-origin:center
}

.measure{
    display:flex;
    justify-content:space-between;
    color:#647687;
    font-size:12px;
    padding:12px 3px
}


/* =========================================================
   OVERLAYS
   ========================================================= */

.overlay-panel{
    margin-top:12px;
    padding:12px;
    border:1px solid rgba(0,0,0,.12);
    border-radius:10px;
    background:rgba(0,0,0,.025)
}

.overlay-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px
}

.overlay-heading span{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0
}

.overlay-heading strong{
    font-size:13px
}

.overlay-heading small{
    opacity:.65;
    font-size:11px
}

.overlay-heading button{
    white-space:nowrap;
    padding:8px 11px;
    border:1px solid #168bd0;
    background:#168bd0;
    color:#fff;
    border-radius:7px;
    cursor:pointer;
    font-weight:800;
    flex:0 0 auto
}

.overlay-list{
    display:flex;
    flex-direction:column;
    gap:10px
}

.overlay-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:9px 10px;
    align-items:end;
    padding:11px;
    background:#fff;
    border:1px solid #dfe6ec;
    border-radius:9px;
    box-shadow:0 2px 6px rgba(10,30,50,.04)
}

.overlay-row select{
    width:100%;
    min-width:0;
    margin-top:0;
    padding:9px 8px;
    border:1px solid #ccd7e1;
    border-radius:7px;
    background:#fff;
    font:inherit;
    line-height:1.2
}

.overlay-row select:focus{
    outline:2px solid rgba(22,139,208,.18);
    border-color:#168bd0
}

.overlay-row::before{
    content:none
}

.overlay-remove{
    width:100%;
    padding:9px 10px;
    border:1px solid #ccd7e1;
    background:#f8fafc;
    color:#34495e;
    border-radius:7px;
    cursor:pointer;
    font-weight:700;
    line-height:1.2
}

.overlay-remove:hover{
    background:#eef3f7
}

.overlay-line-color{
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin:0!important;
    padding:0 2px;
    font-size:12px!important;
    font-weight:700;
    color:#586b7c;
    min-height:38px
}

.overlay-line-color input{
    width:42px!important;
    height:34px!important;
    padding:0!important;
    margin:0!important;
    border:1px solid #ccd7e1;
    border-radius:6px;
    cursor:pointer;
    flex:0 0 42px
}

.overlay-row .overlay-sport-select,
.overlay-row .overlay-standard-select,
.overlay-row .overlay-position-select,
.overlay-row .overlay-rotation-select{
    min-height:38px
}


/* =========================================================
   WOOD
   ========================================================= */

.wood-presets{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    margin-top:10px;
    font-size:12px
}

.wood-presets strong{
    width:100%;
    color:#586b7c;
    font-size:12px
}

.wood-presets button{
    border:1px solid #d5dfe8;
    background:#fff;
    border-radius:6px;
    padding:5px 10px;
    font-size:11px;
    cursor:pointer
}

.thickness-controls{
    margin-top:8px
}


/* =========================================================
   MODE SWITCH
   ========================================================= */

.mode-switch{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px
}

.mode-switch button{
    border:1px solid #ccd7e1;
    background:#f8fafc;
    border-radius:7px;
    padding:10px;
    cursor:pointer;
    font-weight:800;
    color:#34495e
}

.mode-switch button.active{
    background:#e0f2ff;
    border-color:#168bd0;
    color:#075f91
}

.mode-help{
    font-size:11px;
    color:#687b8d;
    margin-top:8px;
    line-height:1.4
}


/* =========================================================
   FACILITY
   ========================================================= */

.facility-panel{
    display:none;
    margin:12px 20px 18px;
    padding:14px;
    border:1px solid #dce4eb;
    border-radius:10px;
    background:#f7fafc
}

.facility-heading{
    margin-bottom:10px
}

.facility-heading span{
    display:flex;
    flex-direction:column;
    gap:2px
}

.facility-heading strong{
    font-size:13px
}

.facility-heading small{
    font-size:11px;
    color:#687b8d
}

.facility-actions{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:6px;
    margin:10px 0
}

.facility-actions button{
    border:1px solid #168bd0;
    background:#fff;
    color:#075f91;
    border-radius:7px;
    padding:8px 5px;
    font-weight:800;
    cursor:pointer
}

.facility-actions button:first-child{
    background:#168bd0;
    color:#fff
}

.facility-list{
    display:flex;
    flex-direction:column;
    gap:8px
}

.facility-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 55px 42px 62px;
    gap:5px;
    align-items:center;
    padding:8px;
    background:#fff;
    border:1px solid #dfe6ec;
    border-radius:8px
}

.facility-row select{
    min-width:0;
    width:100%;
    padding:7px 5px;
    border:1px solid #ccd7e1;
    border-radius:6px;
    background:#fff
}

.facility-row input[type=color]{
    width:42px;
    height:32px;
    padding:0;
    border:1px solid #ccd7e1;
    border-radius:6px
}

.facility-remove{
    padding:7px 4px;
    border:1px solid #ccd7e1;
    background:#f8fafc;
    border-radius:6px;
    cursor:pointer
}

.facility-fit{
    grid-column:1/-1;
    font-size:10px;
    font-weight:800;
    color:#168b50
}

.facility-fit[data-fit="no"]{
    color:#c0392b
}

.facility-stats{
    font-size:11px;
    color:#586b7c;
    margin-top:9px;
    font-weight:700
}


/* =========================================================
   MODE-SPECIFIC VISIBILITY
   ========================================================= */

/* Main Court */

.dxu-cb2[data-builder-mode="court"]
[data-main-court-control]{
    display:block
}

.dxu-cb2[data-builder-mode="court"]
[data-facility-panel]{
    display:none
}


/* Facility Layout */

.dxu-cb2[data-builder-mode="facility"]
[data-main-court-control]{
    display:none
}

.dxu-cb2[data-builder-mode="facility"]
[data-facility-panel]{
    display:block
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1000px){

    .dxu-cb2 .cb2-layout{
        grid-template-columns:340px minmax(0,1fr)
    }

    .dxu-cb2 .cb2-preview{
        padding:16px
    }

    .dxu-cb2 .svg-wrap{
        min-height:550px
    }
}


@media(max-width:760px){

    .dxu-cb2 .cb2-layout{
        grid-template-columns:1fr;
        min-height:0
    }

    .dxu-cb2 .cb2-controls{
        border-right:0;
        border-bottom:1px solid #e1e7ed
    }

    .dxu-cb2 .cb2-preview{
        position:relative;
        top:auto;
        padding:15px;
        order:-1
    }

    .dxu-cb2 .svg-wrap{
        min-height:450px
    }

    .facility-row{
        grid-template-columns:1fr 1fr 55px 42px
    }

    .facility-remove{
        grid-column:1/-1
    }

    .facility-fit{
        grid-column:1/-1
    }
}


@media(max-width:700px){

    .overlay-row{
        grid-template-columns:1fr 1fr;
        gap:8px
    }

    .overlay-heading{
        align-items:flex-start
    }

    .overlay-heading button{
        padding:7px 9px
    }

    .overlay-remove{
        grid-column:1/-1
    }
}


@media(max-width:430px){

    .dxu-cb2 .cb2-preview{
        padding:10px
    }

    .dxu-cb2 .preview-bar{
        flex-wrap:wrap
    }

    .dxu-cb2 .preview-bar > div{
        width:100%;
        display:flex;
        justify-content:flex-end
    }

    .dxu-cb2 .svg-wrap{
        min-height:320px
    }

    .overlay-heading{
        flex-direction:column
    }

    .overlay-heading button{
        width:100%
    }

    .overlay-row{
        grid-template-columns:1fr
    }

    .overlay-remove{
        grid-column:auto
    }
}


/* =========================================================
   V5.0.4 — FACILITY CONTROLS SPACING & LAYOUT
   ========================================================= */

/* Give facility controls more breathing room */
.dxu-cb2 .facility-panel {
    padding: 18px;
}

.dxu-cb2 .facility-heading {
    margin-bottom: 16px;
}

/* Space out the Add / Auto / Clear buttons */
.dxu-cb2 .facility-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.dxu-cb2 .facility-actions button {
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
}

/* Let the third action use the full second row */
.dxu-cb2 .facility-actions button:last-child:nth-child(3) {
    grid-column: 1 / -1;
}

/* Stack each facility sport's selections into comfortable rows */
.dxu-cb2 .facility-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: end;
    padding: 14px;
    margin-bottom: 2px;
    border: 1px solid #dfe6ec;
    border-radius: 10px;
    background: #fff;
}

/* Make dropdowns and colour controls consistent */
.dxu-cb2 .facility-row select {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 9px 10px;
    border: 1px solid #ccd7e1;
    border-radius: 7px;
    background: #fff;
    font: inherit;
    font-size: 13px;
}

/* Add clear spacing around colour inputs */
.dxu-cb2 .facility-row input[type="color"] {
    width: 100%;
    height: 40px;
    min-width: 0;
    padding: 3px;
    border: 1px solid #ccd7e1;
    border-radius: 7px;
    cursor: pointer;
}

/* Keep the remove button aligned and easy to click */
.dxu-cb2 .facility-row .facility-remove {
    width: 100%;
    min-height: 40px;
    padding: 9px;
    border: 1px solid #ccd7e1;
    border-radius: 7px;
    background: #f8fafc;
    font-size: 12px;
    cursor: pointer;
}

/* Fit message occupies its own row */
.dxu-cb2 .facility-row .facility-fit {
    grid-column: 1 / -1;
    margin-top: 2px;
    padding-top: 8px;
    border-top: 1px solid #edf0f3;
    line-height: 1.5;
}

/* Improve spacing for the next-sport selector */
.dxu-cb2 .facility-next-sport-label {
    display: block;
    margin: 14px 0;
    line-height: 1.5;
}

.dxu-cb2 .facility-next-sport-label select {
    width: 100%;
    min-height: 42px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid #ccd7e1;
    border-radius: 8px;
    background: #fff;
}

/* Separate facility entries visually */
.dxu-cb2 .facility-list {
    gap: 12px;
    margin-top: 12px;
}

/* Mobile layout */
@media (max-width: 640px) {
    .dxu-cb2 .facility-panel {
        margin: 12px;
        padding: 14px;
    }

    .dxu-cb2 .facility-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .dxu-cb2 .facility-actions {
        gap: 8px;
    }

    .dxu-cb2 .facility-actions button {
        min-height: 42px;
    }
}


/* V5.0.1 mode fallback */
.dxu-cb2[data-builder-mode="facility"] [data-main-court-control][hidden]{display:none!important;}
.dxu-cb2[data-builder-mode="court"] [data-facility-panel][hidden]{display:none!important;}

/* V5.0.3 facility sport controls and centre-circle logo upload */
.facility-next-sport-label{display:block;margin:10px 0;font-weight:700}
.facility-next-sport-label select{display:block;width:100%;margin-top:5px;padding:9px;border:1px solid #ccd7e1;border-radius:7px;background:#fff}
.facility-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(72px,.8fr) 48px 42px 62px;}
.facility-row .facility-fit{grid-column:1/-1;font-size:12px}
[data-center-logo-file]{display:block;width:100%;margin-top:6px;padding:8px;background:#fff;border:1px solid #ccd7e1;border-radius:7px}
[data-center-logo-status]{display:block;margin:5px 0 8px;color:#526578;font-size:12px}
[data-clear-center-logo]{margin:0 0 8px;padding:7px 10px;border:1px solid #ccd7e1;border-radius:6px;background:#fff;cursor:pointer}
@media(max-width:640px){.facility-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 68px 44px}.facility-row .facility-fit{grid-column:1/-1}}


/* V5.2.0 interactive 3D preview */
.preview-view-toggle{border:1px solid #c9d7e3;background:#fff;color:#18344d;border-radius:7px;padding:8px 10px;font-weight:800;cursor:pointer;margin-right:4px}
.preview-view-toggle.active{background:#087cff;color:#fff;border-color:#087cff}
.svg-wrap[data-preview-mode="3d"] [data-svg]{display:none!important}
.svg-wrap[data-preview-mode="3d"]{padding:0;min-height:480px;overflow:hidden;background:#e8edf2;border-radius:12px}
.dxu-3d-stage{position:relative;width:100%;height:clamp(420px,58vw,680px);min-height:420px;background:linear-gradient(180deg,#eaf0f5,#cbd6df);overflow:hidden;border-radius:12px}
.dxu-3d-stage[hidden]{display:none!important}
.dxu-3d-stage canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}
.dxu-3d-loading{position:absolute;z-index:2;left:12px;top:12px;padding:7px 10px;border-radius:7px;background:rgba(16,44,70,.9);color:#fff;font-size:12px}
.dxu-3d-loading:empty{display:none}
.dxu-3d-hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);max-width:calc(100% - 20px);white-space:nowrap;background:rgba(16,44,70,.82);color:#fff;border-radius:20px;padding:7px 12px;font-size:11px;pointer-events:none}
@media(max-width:640px){.dxu-3d-stage{height:430px;min-height:380px}.dxu-3d-hint{font-size:10px}}



/* Facility perimeter chain-link options */
.dxu-cb2 .facility-fence-options { align-items: end; gap: 12px; margin-top: 12px; }
.dxu-cb2 .facility-fence-options label { min-width: 0; }
.dxu-cb2 .facility-fence-options label.check { display: flex; align-items: center; gap: 8px; }
.dxu-cb2 .facility-fence-options select { width: 100%; min-height: 38px; }
.dxu-cb2 .facility-fence-note { display: block; margin: 6px 0 12px; line-height: 1.4; opacity: .78; }

.dxu-cb2 .court-fence-height-label { display:block; margin:8px 0; }
.dxu-cb2 .court-fence-height-label select { width:100%; min-height:38px; }