/* ═══════════════════════════════════════════════════════════════════════════
   BEHANG OFFERTE CONFIGURATOR v2.0  –  Theme-Proof Stylesheet
   ═══════════════════════════════════════════════════════════════════════════

   STRATEGIE VOOR CSS ISOLATIE:
   Elke selector begint met #boc-root (de wrapper die JS toevoegt).
   Alle visuele properties gebruiken !important om thema-overrides te blokkeren.
   Dit voorkomt dat thema-CSS (met globale selectors als input, button, etc.)
   de configurator-UI breekt.

   ═══════════════════════════════════════════════════════════════════════════ */


/* ── RESET binnen #boc-root ───────────────────────────────────────────── */

#boc-root *,
#boc-root *::before,
#boc-root *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased !important;
}

#boc-root .boc-req {
    color: #ef4444 !important;
}

#boc-root input::placeholder {
    color: #b0b8c4 !important;
    font-weight: 400 !important;
    font-family: inherit !important;
}


/* ── CONFIGURATOR CARD ────────────────────────────────────────────────── */

#boc-root .boc-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-top: 8px !important;
}


/* ── AFMETINGEN-INVOER ────────────────────────────────────────────────── */

#boc-root .boc-dims {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}

#boc-root .boc-dims label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
    background: none !important;
}

#boc-root .boc-dims input[type="number"] {
    display: block !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: 'Courier New', Courier, monospace !important;
    color: #0f172a !important;
    background: #ffffff !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
    -moz-appearance: textfield !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

#boc-root .boc-dims input[type="number"]::-webkit-inner-spin-button,
#boc-root .boc-dims input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button !important;
    opacity: 1 !important;
    height: auto !important;
}

#boc-root .boc-dims input[type="number"]:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1) !important;
}


/* ── UITSNEDE-KEUZE POPUP ─────────────────────────────────────────────── */

#boc-root .boc-cp-ov {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.45) !important;
    z-index: 100010 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease !important;
    padding: 16px !important;
}

#boc-root .boc-cp-ov.boc-cp-open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

#boc-root .boc-cp-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    width: 520px !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.18) !important;
    padding: 24px !important;
    transform: scale(0.96) !important;
    transition: transform 0.25s ease !important;
}

#boc-root .boc-cp-ov.boc-cp-open .boc-cp-card {
    transform: scale(1) !important;
}

#boc-root .boc-cp-hdr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
}

#boc-root .boc-cp-hdr h3 {
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

#boc-root .boc-cp-x {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 22px !important;
    color: #94a3b8 !important;
    padding: 4px !important;
    line-height: 1 !important;
}

#boc-root .boc-cp-x:hover {
    color: #64748b !important;
}

#boc-root .boc-cp-info {
    background: #f0f7ff !important;
    border: 1px solid #dbeafe !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #334155 !important;
    margin-bottom: 16px !important;
}

#boc-root .boc-cp-info strong {
    color: #446084 !important;
}

#boc-root .boc-cp-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 12px 18px !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    transition: background 0.2s ease !important;
    text-decoration: none !important;
    box-shadow: none !important;
    background: #3b82f6 !important;
    color: #ffffff !important;
    margin-top: 8px !important;
}

#boc-root .boc-cp-btn:hover {
    background: #2563eb !important;
}

#boc-root .boc-cp-btn.boc-cp-btn-sec {
    background: #446084 !important;
}

#boc-root .boc-cp-btn.boc-cp-btn-sec:hover {
    background: #374e6b !important;
}



/* ── CROP-CONTAINER (dynamische hoogte) ───────────────────────────────── */

#boc-root .boc-crop-wrap {
    position: relative !important;
    width: 100% !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    cursor: grab !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: none !important;
    background: #e2e8f0 !important;
    /* Hoogte wordt dynamisch gezet door JS via padding-bottom */
}

#boc-root .boc-crop-wrap:active {
    cursor: grabbing !important;
}

#boc-root .boc-crop-wrap > img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    max-width: none !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Grijze overlay-vlakken */
#boc-root .boc-ov {
    position: absolute !important;
    background: rgba(120, 130, 145, 0.55) !important;
    pointer-events: none !important;
    transition: none !important;
}

#boc-root .boc-ov-top    { top: 0 !important; left: 0 !important; right: 0 !important; }
#boc-root .boc-ov-bot    { bottom: 0 !important; left: 0 !important; right: 0 !important; }

/* Selectie-border */
#boc-root .boc-sel-border {
    position: absolute !important;
    border: 2px solid rgba(255,255,255,0.75) !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
}

/* Drag-label */
#boc-root .boc-drag-lbl {
    position: absolute !important;
    background: #ffffff !important;
    border-radius: 6px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    z-index: 5 !important;
    transition: opacity 0.15s ease !important;
}

#boc-root .boc-drag-lbl svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
}


/* ── MATERIAALKEUZE ───────────────────────────────────────────────────── */

#boc-root .boc-mat-sec {
    margin-bottom: 20px !important;
    margin-top: 20px !important;
}

#boc-root .boc-mat-sec .boc-mat-t {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 10px !important;
}

#boc-root .boc-mat-sec .boc-mat-t .boc-req {
    color: #ef4444 !important;
}

#boc-root .boc-mat-select {
    display: block !important;
    width: 100% !important;
    padding: 12px 40px 12px 16px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    color: #334155 !important;
    cursor: pointer !important;
    transition: border-color 0.15s ease !important;
    outline: none !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
    height: auto !important;
    margin: 0 !important;
}

#boc-root .boc-mat-select:hover {
    border-color: #cbd5e1 !important;
}

#boc-root .boc-mat-select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1) !important;
}


/* ── POSTCODE ────────────────────────────────────────────────────────── */

#boc-root .boc-pc-sec {
    margin-bottom: 20px !important;
}

#boc-root .boc-pc-input {
    display: block !important;
    width: 100% !important;
    max-width: 220px !important;
    padding: 10px 14px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: 'Courier New', Courier, monospace !important;
    color: #0f172a !important;
    background: #ffffff !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
    height: auto !important;
    box-shadow: none !important;
    margin: 0 !important;
}

#boc-root .boc-pc-input:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1) !important;
}

#boc-root .boc-pc-info {
    font-size: 12px !important;
    margin-top: 6px !important;
    min-height: 18px !important;
    color: #78859b !important;
}

#boc-root .boc-pc-ok {
    color: #16a34a !important;
    font-weight: 500 !important;
}

#boc-root .boc-pc-err {
    color: #dc2626 !important;
}


/* ── PRIJS-INDICATIE ──────────────────────────────────────────────────── */

#boc-root .boc-price {
    margin-bottom: 20px !important;
}

#boc-root .boc-price .boc-price-lbl {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #334155 !important;
}

#boc-root .boc-price .boc-price-amt {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

#boc-root .boc-price .boc-price-cta {
    font-size: 13px !important;
    color: #446084 !important;
    font-weight: 600 !important;
    margin-top: 4px !important;
    cursor: default !important;
}


/* ── IN OFFERTE KNOP ──────────────────────────────────────────────────── */

#boc-root .boc-add-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 15px 20px !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: not-allowed !important;
    background: #e2e8f0 !important;
    color: #94a3b8 !important;
    transition: all 0.2s ease !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    text-align: center !important;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

#boc-root .boc-add-btn .boc-scissors {
    font-size: 20px !important;
    line-height: 1 !important;
}

#boc-root .boc-add-btn.boc-enabled {
    background: #3b82f6 !important;
    color: #ffffff !important;
    cursor: pointer !important;
}

#boc-root .boc-add-btn.boc-enabled:hover {
    background: #2563eb !important;
    box-shadow: 0 4px 12px rgba(59,130,246,0.3) !important;
}

#boc-root .boc-help {
    font-size: 13px !important;
    color: #446084 !important;
    text-align: center !important;
    margin-top: 14px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

#boc-root .boc-help:hover {
    color: #2d4a6b !important;
    text-decoration: underline !important;
}


/* ── HOE WERKT HET? HELP-POPUP ──────────────────────────────────────── */

.boc-hp-ov {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.35) !important;
    z-index: 100020 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease !important;
    padding: 16px !important;
}

.boc-hp-ov.boc-hp-open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.boc-hp-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    width: 400px !important;
    max-width: 100% !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    box-shadow: 0 16px 32px rgba(0,0,0,0.16) !important;
    padding: 24px !important;
    transform: scale(0.96) translateY(8px) !important;
    transition: transform 0.2s ease !important;
}

.boc-hp-ov.boc-hp-open .boc-hp-card {
    transform: scale(1) translateY(0) !important;
}

.boc-hp-hdr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
}

.boc-hp-hdr h3 {
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.boc-hp-x {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 22px !important;
    color: #94a3b8 !important;
    padding: 4px !important;
    line-height: 1 !important;
}

.boc-hp-x:hover {
    color: #64748b !important;
}

.boc-hp-step {
    display: flex !important;
    gap: 14px !important;
    align-items: flex-start !important;
    margin-bottom: 18px !important;
}

.boc-hp-step:last-of-type {
    margin-bottom: 20px !important;
}

.boc-hp-num {
    flex-shrink: 0 !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #446084 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 2px !important;
}

.boc-hp-txt {
    flex: 1 !important;
}

.boc-hp-txt strong {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin-bottom: 2px !important;
}

.boc-hp-txt p {
    margin: 0 !important;
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
}

.boc-hp-contact {
    padding-top: 16px !important;
    border-top: 1px solid #e2e8f0 !important;
    font-size: 13px !important;
    color: #64748b !important;
    text-align: center !important;
}

.boc-hp-contact strong {
    color: #334155 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   HEADER – styling staat inline in PHP (sectie 4)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   OFFERTE-ZIJBALK
   ═══════════════════════════════════════════════════════════════════════════ */

#boc-sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.35) !important;
    z-index: 100000 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}

#boc-sidebar-overlay.boc-open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

#boc-sidebar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 420px !important;
    max-width: 92vw !important;
    background: #ffffff !important;
    box-shadow: -4px 0 24px rgba(0,0,0,0.12) !important;
    z-index: 100001 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
}

#boc-sidebar.boc-open {
    transform: translateX(0) !important;
}

/* Zijbalk internals - geschreven met #boc-sidebar prefix */

#boc-sidebar .boc-sb-hdr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 24px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    position: sticky !important;
    top: 0 !important;
    background: #ffffff !important;
    z-index: 10 !important;
}

#boc-sidebar .boc-sb-hdr-l {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
}

#boc-sidebar .boc-sb-hdr-l svg {
    width: 20px !important;
    height: 20px !important;
}

#boc-sidebar .boc-sb-x {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 24px !important;
    color: #94a3b8 !important;
    padding: 4px !important;
    line-height: 1 !important;
}

#boc-sidebar .boc-sb-x:hover {
    color: #64748b !important;
}

#boc-sidebar .boc-sb-body {
    padding: 16px 24px !important;
}

#boc-sidebar .boc-sb-empty {
    color: #94a3b8 !important;
    text-align: center !important;
    margin-top: 40px !important;
    font-size: 14px !important;
}

/* Item in zijbalk */
#boc-sidebar .boc-sb-item {
    border-bottom: 1px solid #f1f5f9 !important;
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
}

#boc-sidebar .boc-sb-item:last-child {
    border-bottom: none !important;
}

#boc-sidebar .boc-sb-tw {
    position: relative !important;
    margin-bottom: 8px !important;
}

#boc-sidebar .boc-sb-del {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    background: rgba(0,0,0,0.5) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 6px !important;
    cursor: pointer !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
    transition: background 0.15s !important;
}

#boc-sidebar .boc-sb-del:hover {
    background: rgba(0,0,0,0.7) !important;
}

#boc-sidebar .boc-sb-del svg {
    width: 16px !important;
    height: 16px !important;
}

#boc-sidebar .boc-sb-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin-top: 8px !important;
    margin-bottom: 12px !important;
}

#boc-sidebar .boc-sb-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 16px !important;
}

#boc-sidebar .boc-sb-ml {
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #64748b !important;
}

#boc-sidebar .boc-sb-mv {
    font-weight: 600 !important;
    color: #334155 !important;
    font-size: 13px !important;
}

#boc-sidebar .boc-sb-mv.boc-mono {
    font-family: 'Courier New', monospace !important;
}

#boc-sidebar .boc-sb-sum {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #446084 !important;
    margin-bottom: 12px !important;
}

#boc-sidebar .boc-sb-pb {
    margin-top: 8px !important;
    padding: 14px 16px !important;
    background: #f8fafc !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    margin-bottom: 12px !important;
}

#boc-sidebar .boc-sb-pb-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 4px 0 !important;
    font-size: 13px !important;
    color: #64748b !important;
}

#boc-sidebar .boc-sb-pb-row span:last-child {
    font-weight: 600 !important;
    color: #334155 !important;
}

#boc-sidebar .boc-sb-pb-tot {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 10px !important;
    margin-top: 8px !important;
    border-top: 2px solid #0f172a !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

#boc-sidebar .boc-sb-pb-tot span:last-child {
    font-size: 18px !important;
}

/* Zijbalk footer - scrollt mee met content */
#boc-sidebar .boc-sb-ft {
    padding: 20px 0 0 !important;
    border-top: 1px solid #e2e8f0 !important;
}

#boc-sidebar .boc-sb-disc {
    font-size: 12px !important;
    color: #78859b !important;
    margin-bottom: 14px !important;
    font-style: italic !important;
}

#boc-sidebar .boc-sb-tip {
    background: #f0f7ff !important;
    border: 1px solid #dbeafe !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #334155 !important;
    margin-bottom: 14px !important;
}

#boc-sidebar .boc-sb-tip strong {
    color: #446084 !important;
}

#boc-sidebar .boc-sb-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 12px 18px !important;
    background: #3b82f6 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    transition: background 0.2s ease !important;
    letter-spacing: 0.3px !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

#boc-sidebar .boc-sb-btn:hover {
    background: #2563eb !important;
}

#boc-sidebar .boc-sb-btn.boc-sb-btn-sec {
    background: #446084 !important;
    margin-bottom: 8px !important;
}

#boc-sidebar .boc-sb-btn.boc-sb-btn-sec:hover {
    background: #374e6b !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   THUMBNAIL MET CROP-OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */

.boc-thumb {
    position: relative !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #e2e8f0 !important;
}

.boc-thumb img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

.boc-thumb .boc-ov {
    position: absolute !important;
    background: rgba(120,130,145,0.55) !important;
    pointer-events: none !important;
}

.boc-thumb .boc-sel-border {
    position: absolute !important;
    border: 1.5px solid rgba(255,255,255,0.65) !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

.boc-thumb .boc-thumb-dim {
    position: absolute !important;
    bottom: 5px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(0,0,0,0.55) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    z-index: 3 !important;
    font-family: 'Courier New', monospace !important;
}

.boc-thumb-cap {
    font-size: 10px !important;
    color: #94a3b8 !important;
    text-align: center !important;
    margin-top: 4px !important;
    font-style: italic !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   OFFERTE-MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

#boc-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.45) !important;
    z-index: 100010 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease !important;
}

#boc-modal-overlay.boc-open {
    opacity: 1 !important;
    pointer-events: auto !important;
}

#boc-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.96) !important;
    width: 620px !important;
    max-width: 95vw !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 48px rgba(0,0,0,0.18) !important;
    z-index: 100011 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
}

#boc-modal.boc-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

/* Modal header */
#boc-modal .boc-m-hdr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 24px 28px 16px !important;
    position: sticky !important;
    top: 0 !important;
    background: #ffffff !important;
    z-index: 10 !important;
    border-radius: 16px 16px 0 0 !important;
}

#boc-modal .boc-m-hdr h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
}

#boc-modal .boc-m-x {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 26px !important;
    color: #94a3b8 !important;
    padding: 4px !important;
    line-height: 1 !important;
}

#boc-modal .boc-m-body {
    padding: 0 28px 28px !important;
}

/* Selectie-samenvatting */
#boc-modal .boc-m-sel {
    background: #f8fafc !important;
    border-radius: 10px !important;
    padding: 16px !important;
    margin-bottom: 24px !important;
}

#boc-modal .boc-m-sel-t {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 14px !important;
}

#boc-modal .boc-m-si {
    display: flex !important;
    gap: 16px !important;
    align-items: flex-start !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

#boc-modal .boc-m-si:last-child {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
}

#boc-modal .boc-m-si-lbl {
    font-size: 11px !important;
    color: #64748b !important;
    margin-bottom: 4px !important;
}

#boc-modal .boc-m-si-r {
    flex: 1 !important;
}

#boc-modal .boc-m-si-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin-bottom: 4px !important;
}

#boc-modal .boc-m-si-mat {
    font-size: 13px !important;
    color: #64748b !important;
    margin-bottom: 10px !important;
}

#boc-modal .boc-m-si-dims {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 10px !important;
    border: 1px solid #e2e8f0 !important;
}

#boc-modal .boc-m-si-dl {
    font-size: 10px !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

#boc-modal .boc-m-si-dv {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    font-family: 'Courier New', monospace !important;
}

#boc-modal .boc-m-si-inf {
    font-size: 12px !important;
    color: #94a3b8 !important;
    margin-top: 8px !important;
}

/* Formuliervelden in modal */
#boc-modal .boc-fr {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}

#boc-modal .boc-fr.boc-full {
    grid-template-columns: 1fr !important;
}

#boc-modal .boc-fl {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 6px !important;
}

#boc-modal .boc-fi {
    display: block !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    color: #0f172a !important;
    background: #ffffff !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
    font-family: inherit !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    height: auto !important;
    min-height: 0 !important;
}

#boc-modal .boc-fi:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1) !important;
}

#boc-modal textarea.boc-fi {
    min-height: 80px !important;
    resize: vertical !important;
}

/* Disclaimer */
#boc-modal .boc-m-disc {
    display: flex !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    background: #f8fafc !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    font-size: 12px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    align-items: flex-start !important;
}

/* Checkbox behangklaar */
#boc-modal .boc-m-cb {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    font-size: 13px !important;
    color: #334155 !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
}

#boc-modal .boc-m-cb input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin-top: 1px !important;
    flex-shrink: 0 !important;
    accent-color: #446084 !important;
    cursor: pointer !important;
}

/* Submit-knop */
#boc-modal .boc-m-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 15px 20px !important;
    background: #3b82f6 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    transition: background 0.2s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

#boc-modal .boc-m-btn:hover {
    background: #2563eb !important;
}

#boc-modal .boc-m-btn:disabled {
    background: #94a3b8 !important;
    cursor: wait !important;
}

/* Succes-bericht */
#boc-modal .boc-success {
    text-align: center !important;
    padding: 40px 0 !important;
}

#boc-modal .boc-success-ico {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: #dcfce7 !important;
    color: #16a34a !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 16px !important;
}

#boc-modal .boc-success h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
}

#boc-modal .boc-success p {
    color: #64748b !important;
    font-size: 14px !important;
    max-width: 360px !important;
    margin: 0 auto 24px !important;
}


/* Gallery: niet aanraken */


/* ── BODY SCROLL LOCK (bij open zijbalk of modal) ──────────────────────── */

body.boc-lock-scroll {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    touch-action: none !important;
    overscroll-behavior: none !important;
}



/* ── RESPONSIVE ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    #boc-sidebar {
        width: 100% !important;
        max-width: 100vw !important;
    }

    #boc-modal {
        width: 100% !important;
        max-width: 100vw !important;
        border-radius: 16px 16px 0 0 !important;
        top: auto !important;
        bottom: 0 !important;
        transform: translateX(-50%) translateY(100%) !important;
        max-height: 95vh !important;
    }

    #boc-modal.boc-open {
        transform: translateX(-50%) translateY(0) !important;
    }

    #boc-modal .boc-fr {
        grid-template-columns: 1fr !important;
    }

    #boc-modal .boc-m-si {
        flex-direction: column !important;
    }

    /* Crop popup: fullscreen op mobiel, flex layout, past zonder scrollen */
    #boc-root .boc-cp-ov {
        padding: 0 !important;
    }

    #boc-root .boc-cp-card {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        border-radius: 0 !important;
        padding: 10px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #boc-root .boc-cp-hdr {
        margin-bottom: 6px !important;
        flex-shrink: 0 !important;
    }

    #boc-root .boc-cp-hdr h3 {
        font-size: 15px !important;
    }

    #boc-root .boc-crop-wrap {
        flex: 1 !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    #boc-root .boc-cp-info {
        padding: 8px 12px !important;
        font-size: 11px !important;
        margin: 8px 0 !important;
        flex-shrink: 0 !important;
    }

    #boc-root .boc-cp-sum {
        padding: 8px 10px !important;
        margin: 0 0 8px !important;
        flex-shrink: 0 !important;
    }

    #boc-root .boc-cp-sum-price {
        font-size: 17px !important;
    }

    #boc-root .boc-cp-btn {
        padding: 13px 14px !important;
        font-size: 14px !important;
        margin-top: 0 !important;
        flex-shrink: 0 !important;
    }
}


/* ═══ v6.0.0 NEW ELEMENTS ═══ */

/* Marge checkbox */
#boc-root .boc-marge-sec { margin: 0 0 1.25rem !important; }
#boc-root .boc-marge-label {
    display: flex !important; align-items: flex-start !important; gap: 10px !important;
    padding: 12px 14px !important; background: #EAF3DE !important;
    border: 1px solid #C0DD97 !important; border-radius: 8px !important;
    cursor: pointer !important; font-size: 13px !important; color: #27500A !important; line-height: 1.5 !important;
    margin: 0 !important;
}
#boc-root .boc-marge-label strong { font-weight: 500 !important; color: #27500A !important; }
#boc-root .boc-marge-label span span { color: #3B6D11 !important; }
#boc-root .boc-marge-cb { margin-top: 3px !important; width: 17px !important; height: 17px !important; flex-shrink: 0 !important; accent-color: #639922 !important; }

/* Price display */
#boc-root #boc-price-display { margin-bottom: 1.25rem !important; }
#boc-root .boc-price-calc {
    background: #f8fafc !important; border-radius: 12px !important;
    padding: 1rem 1.25rem !important; margin: 0 !important;
}
#boc-root .boc-price-row { display: flex !important; justify-content: space-between !important; align-items: center !important; margin: 0 0 6px !important; font-size: 14px !important; color: #64748b !important; }
#boc-root .boc-price-main { display: flex !important; justify-content: space-between !important; align-items: baseline !important; margin: 10px 0 0 !important; }
#boc-root .boc-price-main > span:first-child { font-size: 13px !important; color: #64748b !important; }
#boc-root .boc-price-big { font-size: 28px !important; font-weight: 500 !important; color: #0f172a !important; }
#boc-root .boc-price-sub { display: flex !important; justify-content: space-between !important; align-items: center !important; margin: 4px 0 0 !important; }
#boc-root .boc-price-incl { font-size: 12px !important; font-weight: 500 !important; color: #639922 !important; }
#boc-root .boc-price-empty { text-align: center !important; padding: 16px 0 !important; margin: 0 !important; }
#boc-root .boc-price-empty p { font-size: 14px !important; color: #94a3b8 !important; margin: 0 !important; }
#boc-root .boc-price-tip { font-size: 13px !important; color: #15803d !important; margin: 12px 0 0 !important; line-height: 1.5 !important; padding: 12px 0 0 !important; border-top: 1px solid #e2e8f0 !important; }

/* Levertijd */
#boc-root .boc-levertijd {
    display: flex !important; align-items: center !important; gap: 10px !important;
    margin: 0 0 1.25rem !important; padding: 10px 14px !important;
    background: #E6F1FB !important; border: 1px solid #B5D4F4 !important; border-radius: 8px !important;
}
#boc-root .boc-levertijd svg { flex-shrink: 0 !important; }
#boc-root .boc-levertijd span { font-size: 14px !important; font-weight: 500 !important; color: #0C447C !important; }

/* Vrijblijvend */
#boc-root .boc-vrijblijvend { font-size: 12px !important; color: #94a3b8 !important; text-align: center !important; margin: 0 0 1rem !important; }

/* Contact row */
#boc-root .boc-contact-row { display: flex !important; gap: 8px !important; margin: 0 0 10px !important; }
#boc-root .boc-contact-btn {
    flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
    padding: 11px 4px !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important;
    text-decoration: none !important; color: #0f172a !important; font-size: 13px !important; font-weight: 500 !important;
    text-align: center !important; background: #fff !important;
}
#boc-root .boc-contact-btn:hover { background: #f8fafc !important; }
#boc-root .boc-wa-btn { background: #25d366 !important; border-color: #25d366 !important; color: #fff !important; }
#boc-root .boc-wa-btn:hover { background: #22c55e !important; }

/* Terugbel form */
#boc-root .boc-terugbel { border: 1px solid #B5D4F4 !important; border-radius: 12px !important; padding: 1.25rem !important; margin: 12px 0 !important; background: #fff !important; }
#boc-root .boc-terugbel-t { font-size: 15px !important; font-weight: 500 !important; margin: 0 0 4px !important; color: #0f172a !important; }
#boc-root .boc-terugbel-s { font-size: 13px !important; color: #64748b !important; margin: 0 0 14px !important; }
#boc-root .boc-terugbel-fields { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin: 0 0 10px !important; }
#boc-root .boc-terugbel-fields label { font-size: 12px !important; color: #64748b !important; display: block !important; margin: 0 0 4px !important; }
#boc-root .boc-terugbel-btn { width: 100% !important; padding: 11px !important; font-weight: 500 !important; font-size: 14px !important; background: #446084 !important; color: #fff !important; border: none !important; border-radius: 8px !important; cursor: pointer !important; }

/* Crop popup summary */
#boc-root .boc-cp-sum { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 14px 18px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; margin: 14px 0 !important; }
#boc-root .boc-cp-sum-name { font-size: 13px !important; color: #334155 !important; font-weight: 500 !important; }
#boc-root .boc-cp-sum-det { font-size: 12px !important; color: #94a3b8 !important; }
#boc-root .boc-cp-sum-price { font-size: 22px !important; font-weight: 500 !important; }

/* Sidebar steps */
.boc-sb-steps { display: flex !important; background: #f8fafc !important; border-radius: 8px !important; overflow: hidden !important; margin: 0 0 10px !important; }
.boc-sb-steps > div { flex: 1 !important; text-align: center !important; padding: 10px 4px !important; }
.boc-sb-steps > div + div { border-left: 1px solid #e2e8f0 !important; }
.boc-sb-sn { font-size: 14px !important; font-weight: 500 !important; color: #446084 !important; }
.boc-sb-sl { font-size: 11px !important; color: #64748b !important; }

/* Sidebar badges */
.boc-sb-badges { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; justify-content: center !important; margin: 0 0 6px !important; }
.boc-sb-badge { font-size: 10px !important; padding: 3px 10px !important; background: #f8fafc !important; color: #64748b !important; border-radius: 6px !important; }
.boc-sb-badge-eco { font-size: 10px !important; padding: 3px 10px !important; background: #f0fdf4 !important; color: #166534 !important; border-radius: 6px !important; }

/* Sidebar vrijblijvend */
.boc-sb-vrijbl { font-size: 11px !important; color: #94a3b8 !important; text-align: center !important; margin: 0 0 14px !important; }

/* Sidebar price section */
.boc-sb-price-section { border-top: 1px solid #e2e8f0 !important; padding-top: 12px !important; }
.boc-sb-incl { font-size: 12px !important; font-weight: 500 !important; color: #639922 !important; margin: 0 0 6px !important; }

/* Sidebar contact */
.boc-sb-contact { display: flex !important; gap: 8px !important; margin-top: 12px !important; }
.boc-sb-cbtn { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; padding: 9px 4px !important; border: 1px solid #e2e8f0 !important; border-radius: 8px !important; text-decoration: none !important; color: #0f172a !important; font-size: 11px !important; font-weight: 500 !important; text-align: center !important; }
.boc-sb-cbtn:hover { background: #f8fafc !important; }
.boc-sb-wa { background: #25d366 !important; border-color: #25d366 !important; color: #fff !important; }

/* Modal upload */
#boc-root .boc-m-upload { margin: 0 0 16px !important; }
#boc-root .boc-m-upload-box { border: 2px dashed #cbd5e1 !important; border-radius: 12px !important; padding: 20px !important; text-align: center !important; cursor: pointer !important; background: #f8fafc !important; transition: all 0.2s !important; }
#boc-root .boc-m-upload-box:hover { background: #f1f5f9 !important; border-color: #94a3b8 !important; }
#boc-root .boc-m-upload-box.boc-has-file { border-color: #639922 !important; border-style: solid !important; background: #EAF3DE !important; }
#boc-root .boc-m-upload-t { font-size: 14px !important; font-weight: 500 !important; color: #334155 !important; margin: 8px 0 4px !important; }
#boc-root .boc-m-upload-s { font-size: 12px !important; color: #64748b !important; margin: 0 !important; line-height: 1.5 !important; }

/* Mobile */
@media (max-width: 480px) {
    #boc-root .boc-contact-row { flex-wrap: wrap !important; }
    #boc-root .boc-contact-btn { min-width: calc(50% - 8px) !important; }
}

/* Sidebar trust vinkjes */
.boc-sb-trust { display: flex !important; flex-direction: column !important; gap: 7px !important; margin: 0 0 12px !important; }
.boc-sb-trust-item { display: flex !important; align-items: center !important; gap: 8px !important; }
.boc-sb-trust-item svg { flex-shrink: 0 !important; }
.boc-sb-trust-item span { font-size: 12px !important; color: #0f172a !important; }

/* Card title + subtitle */
#boc-root .boc-card-title { font-size: 16px !important; font-weight: 500 !important; color: #0f172a !important; margin: 0 0 4px !important; }
#boc-root .boc-card-sub { font-size: 13px !important; color: #64748b !important; margin: 0 0 1.25rem !important; }

/* Empty state blue info box */
#boc-root .boc-price-empty-box {
    background: #E6F1FB !important; border: 1px solid #B5D4F4 !important;
    border-radius: 8px !important; padding: 14px 16px !important; text-align: center !important;
    font-size: 14px !important; color: #0C447C !important; line-height: 1.5 !important;
}

/* Actie badge in prijsblok */
#boc-root .boc-price-actie {
    margin-top: 10px !important; padding-top: 10px !important;
    border-top: 1px solid #e2e8f0 !important;
    display: flex !important; align-items: center !important; gap: 8px !important;
    font-size: 12px !important; color: #92400E !important;
}
#boc-root .boc-actie-label {
    font-size: 11px !important; padding: 2px 8px !important;
    background: #FEF3C7 !important; color: #78350F !important;
    border-radius: 4px !important; font-weight: 500 !important;
    flex-shrink: 0 !important;
}