/* ================================================
   HOUTENLADEN CALCULATOR
   Volledig geïsoleerde CSS — thema-proof
   Alle stijlen gescoopt onder .hlcalc-outer
   ================================================ */

/* ── Hard reset voor alles binnen de plugin ── */
.hlcalc-outer, .hlcalc-outer *, .hlcalc-outer *::before, .hlcalc-outer *::after {
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased !important;
}

/* ── Outer wrapper: grid met 2 kolommen ── */
.hlcalc-outer {
    display: grid !important;
    grid-template-columns: 1fr 280px !important;
    grid-template-rows: auto !important;
    gap: 0 !important;
    align-items: start !important;
    background: #2a2a2a !important;
    color: #d4d4d4 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    border-radius: 4px !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    float: none !important;
    position: relative !important;
}

/* ── Linker kolom: formulier ── */
.hlcalc-form-col {
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding: 20px 20px 24px !important;
    min-width: 0 !important;
    background: transparent !important;
    float: none !important;
    width: auto !important;
}

/* ── Rechter kolom: samenvatting ── */
.hlcalc-summary-col {
    grid-column: 2 !important;
    grid-row: 1 !important;
    background: #1e1e1e !important;
    border-left: 1px solid #3a3a3a !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-radius: 0 4px 4px 0 !important;
    min-width: 0 !important;
    width: auto !important;
    float: none !important;
    position: sticky !important;
    top: 32px !important;
    align-self: start !important;
    max-height: calc(100vh - 64px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.hlcalc-summary-col::-webkit-scrollbar { width: 4px !important; }
.hlcalc-summary-col::-webkit-scrollbar-track { background: #1e1e1e !important; }
.hlcalc-summary-col::-webkit-scrollbar-thumb { background: #444 !important; border-radius: 2px !important; }

.hlcalc-summary-inner {
    padding: 0 0 20px !important;
    margin: 0 !important;
}

/* Summary header */
.hlcalc-summary-header {
    background: #E8520A !important;
    padding: 11px 16px !important;
    border-radius: 0 4px 0 0 !important;
    margin: 0 !important;
}
.hlcalc-summary-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* Summary lege staat */
.hlcalc-sum-empty {
    font-size: 11px !important;
    color: #555 !important;
    font-style: italic !important;
    padding: 14px 16px !important;
    line-height: 1.6 !important;
    display: block !important;
    margin: 0 !important;
}

/* Summary rijen */
.hlcalc-sum-rows {
    padding: 8px 0 0 !important;
    margin: 0 !important;
}
.hlcalc-sum-section-label {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #E8520A !important;
    text-transform: uppercase !important;
    letter-spacing: 0.9px !important;
    padding: 10px 16px 3px !important;
    margin: 0 !important;
    display: block !important;
    line-height: 1.4 !important;
    border: none !important;
    background: none !important;
}
.hlcalc-sum-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 6px !important;
    padding: 4px 16px !important;
    margin: 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #262626 !important;
    background: transparent !important;
    list-style: none !important;
    float: none !important;
}
.hlcalc-sum-row:last-child { border-bottom: none !important; }
.hlcalc-sum-row-key {
    font-size: 10px !important;
    color: #666 !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}
.hlcalc-sum-row-val {
    font-size: 11px !important;
    color: #c8c8c8 !important;
    font-weight: 500 !important;
    text-align: right !important;
    word-break: break-word !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}
.hlcalc-sum-row-val.hlc-accent { color: #E8520A !important; }

/* Prijs block */
.hlcalc-sum-price-block {
    border-top: 1px solid #3a3a3a !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    margin: 8px 0 0 !important;
    padding: 8px 0 0 !important;
    background: transparent !important;
}
.hlcalc-sum-price-lines {
    padding: 0 16px 6px !important;
    margin: 0 !important;
}
.hlcalc-sum-price-line {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 10px !important;
    color: #666 !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    line-height: 1.5 !important;
}
.hlcalc-sum-price-line span:first-child { color: #666 !important; }
.hlcalc-sum-price-line span:last-child  { color: #999 !important; font-weight: 500 !important; }
.hlcalc-sum-total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    padding: 8px 16px 4px !important;
    margin: 0 !important;
    border-top: 1px solid #3a3a3a !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    background: transparent !important;
}
.hlcalc-sum-total-lbl {
    font-size: 11px !important;
    color: #888 !important;
    font-weight: 500 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}
.hlcalc-sum-total-val {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #E8520A !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.hlcalc-sum-disclaimer {
    font-size: 9px !important;
    color: #444 !important;
    padding: 4px 16px 0 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    display: block !important;
    font-style: italic !important;
}

/* ── Sections in formulierkolom ── */
.hlcalc-outer .hlcalc-section {
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom: 1px solid #3a3a3a !important;
    padding: 14px 0 18px !important;
    margin: 0 !important;
    background: transparent !important;
    float: none !important;
    clear: none !important;
}
.hlcalc-outer .hlcalc-section:first-child { padding-top: 0 !important; }

/* Contact sectie achtergrond */
.hlcalc-form-col .hlcalc-contact-section {
    background: #252525 !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* ── Headings in formulierkolom ── */
.hlcalc-outer .hlcalc-h3 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #e8e8e8 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    line-height: 1.4 !important;
    letter-spacing: 0.1px !important;
    text-transform: none !important;
    display: block !important;
    float: none !important;
    clear: none !important;
}

/* ── Flex row ── */
.hlcalc-outer .hlcalc-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    align-items: flex-end !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
}

/* ── Groups ── */
.hlcalc-outer .hlcalc-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    flex: 1 1 90px !important;
    min-width: 70px !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    border: none !important;
    background: transparent !important;
    width: auto !important;
}
.hlcalc-outer .hlcalc-w-xs { flex: 0 0 64px  !important; min-width: 56px  !important; max-width: 80px  !important; }
.hlcalc-outer .hlcalc-w-sm { flex: 0 0 90px  !important; min-width: 70px  !important; max-width: 110px !important; }
.hlcalc-outer .hlcalc-w-md { flex: 0 0 130px !important; min-width: 100px !important; max-width: 160px !important; }
.hlcalc-outer .hlcalc-w-lg { flex: 1 1 180px !important; min-width: 150px !important; }
.hlcalc-outer .hlcalc-w-xl { flex: 2 1 220px !important; min-width: 160px !important; }

/* ── Labels ── */
.hlcalc-outer label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: rgba(232,232,232,0.85) !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.4 !important;
    background: transparent !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: default !important;
}
.hlcalc-outer .hlc-req {
    color: #E8520A !important;
    font-size: 10px !important;
}

/* ── Selects ── */
.hlcalc-outer select {
    display: block !important;
    height: 26px !important;
    padding: 0 20px 0 6px !important;
    background-color: #3c3c3c !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0l3.5 4L7 0z' fill='%23888'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    border: 1px solid #555 !important;
    border-radius: 3px !important;
    color: #d4d4d4 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    width: 100% !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer !important;
    transition: border-color .1s !important;
    box-shadow: none !important;
    margin: 0 !important;
    vertical-align: top !important;
    line-height: 26px !important;
}

/* ── Number & text inputs ── */
.hlcalc-outer input[type="text"],
.hlcalc-outer input[type="number"],
.hlcalc-outer input[type="email"] {
    display: block !important;
    height: 26px !important;
    padding: 0 6px !important;
    background: #3c3c3c !important;
    border: 1px solid #555 !important;
    border-radius: 3px !important;
    color: #d4d4d4 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    width: 100% !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
    transition: border-color .1s !important;
    margin: 0 !important;
    vertical-align: top !important;
    line-height: 26px !important;
}
.hlcalc-outer input[type="number"] { -moz-appearance: textfield !important; }
.hlcalc-outer input[type="number"]::-webkit-inner-spin-button,
.hlcalc-outer input[type="number"]::-webkit-outer-spin-button { opacity: 0.4 !important; }

/* Focus states */
.hlcalc-outer select:focus,
.hlcalc-outer input:focus {
    border-color: #E8520A !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Disabled states */
.hlcalc-outer select:disabled,
.hlcalc-outer input:disabled {
    background-color: #2e2e2e !important;
    background-image: none !important;
    color: #555 !important;
    border-color: #3a3a3a !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}
.hlcalc-outer select:disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0l3.5 4L7 0z' fill='%23444'/%3E%3C/svg%3E") !important;
}

/* Textarea */
.hlcalc-outer textarea {
    display: block !important;
    width: 100% !important;
    background: #3c3c3c !important;
    border: 1px solid #555 !important;
    border-radius: 3px !important;
    color: #d4d4d4 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 12px !important;
    padding: 6px 8px !important;
    resize: vertical !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}
.hlcalc-outer textarea:focus {
    border-color: #E8520A !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ── Tooltip ── */
.hlcalc-outer .hlc-tip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 13px !important;
    height: 13px !important;
    background: #555 !important;
    color: #aaa !important;
    border-radius: 50% !important;
    font-size: 9px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    cursor: help !important;
    vertical-align: middle !important;
    margin-left: 2px !important;
    position: relative !important;
    border: none !important;
    line-height: 1 !important;
    text-decoration: none !important;
}
.hlcalc-outer .hlc-tip:hover { background: #E8520A !important; color: #fff !important; }
.hlcalc-outer .hlc-tip:hover::after {
    content: attr(data-tip) !important;
    position: absolute !important;
    bottom: calc(100% + 6px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #1a1a1a !important;
    color: #ddd !important;
    border: 1px solid #555 !important;
    border-radius: 3px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    white-space: normal !important;
    width: 220px !important;
    z-index: 99999 !important;
    line-height: 1.5 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important;
    pointer-events: none !important;
}

/* ── Popup ── */
.hlcalc-outer .hlc-popup {
    display: none !important;
    position: absolute !important;
    top: 52px !important;
    left: 0 !important;
    background: #E8520A !important;
    color: #fff !important;
    border-radius: 3px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    z-index: 9999 !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    pointer-events: none !important;
    border: none !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}
.hlcalc-outer .hlc-popup.show { display: block !important; }

/* ── Warnings & info ── */
.hlcalc-outer .hlcalc-warn {
    color: #FF4444 !important;
    font-size: 12px !important;
    font-style: italic !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    display: block !important;
    border: none !important;
    background: transparent !important;
}
.hlcalc-outer .hlcalc-warn strong { color: #ff6666 !important; font-style: normal !important; }

.hlcalc-outer .hlcalc-info {
    background: rgba(232,82,10,0.08) !important;
    border-left: 3px solid #E8520A !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    color: #e0a070 !important;
    font-size: 12px !important;
    padding: 7px 12px !important;
    margin: 8px 0 0 !important;
    border-radius: 0 3px 3px 0 !important;
    line-height: 1.6 !important;
    display: block !important;
}
.hlcalc-outer .hlcalc-info strong { color: #E8520A !important; }

.hlcalc-outer .hlcalc-errors {
    background: rgba(200,40,40,0.15) !important;
    border: 1px solid rgba(200,40,40,0.4) !important;
    color: #f08080 !important;
    font-size: 12px !important;
    padding: 10px 14px !important;
    border-radius: 3px !important;
    margin: 0 0 12px !important;
    line-height: 1.6 !important;
    display: block !important;
}

/* ── Submit knop ── */
.hlcalc-outer .hlcalc-btn-submit {
    display: inline-block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: #E8520A !important;
    border: none !important;
    border-radius: 3px !important;
    padding: 10px 24px !important;
    cursor: pointer !important;
    margin: 4px 0 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    transition: background .12s !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    vertical-align: top !important;
    width: auto !important;
}
.hlcalc-outer .hlcalc-btn-submit:hover  { background: #c43f00 !important; color: #fff !important; }
.hlcalc-outer .hlcalc-btn-submit:active { background: #a83300 !important; }
.hlcalc-outer .hlcalc-btn-submit:disabled { background: #555 !important; cursor: not-allowed !important; color: #aaa !important; }
.hlcalc-outer .hlcalc-btn-submit:focus  { outline: none !important; box-shadow: none !important; }

/* ── Success ── */
.hlcalc-outer .hlcalc-success {
    margin: 12px 0 0 !important;
    background: rgba(46,125,80,0.15) !important;
    border: 1px solid rgba(46,125,80,0.35) !important;
    color: #80d4a0 !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
    border-radius: 3px !important;
    line-height: 1.6 !important;
    display: block !important;
}
.hlcalc-outer .hlcalc-success a { color: #E8520A !important; }

/* ── Spinner ── */
.hlcalc-outer .hlcalc-spinner {
    display: inline-block !important;
    width: 13px !important;
    height: 13px !important;
    border: 2px solid rgba(255,255,255,0.2) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    animation: hlcSpin 0.65s linear infinite !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
@keyframes hlcSpin { to { transform: rotate(360deg); } }

/* ── Responsive: < 820px → 1 kolom ── */
@media (max-width: 820px) {
    .hlcalc-outer {
        grid-template-columns: 1fr !important;
    }
    .hlcalc-form-col {
        grid-column: 1 !important;
        grid-row: 1 !important;
        padding-bottom: 0 !important;
    }
    .hlcalc-summary-col {
        grid-column: 1 !important;
        grid-row: 2 !important;
        border-left: none !important;
        border-top: 1px solid #3a3a3a !important;
        border-radius: 0 0 4px 4px !important;
        position: static !important;
        max-height: none !important;
    }
    .hlcalc-summary-header { border-radius: 0 !important; }
    .hlcalc-form-col .hlcalc-contact-section {
        margin-left: -14px !important;
        margin-right: -14px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}
@media (max-width: 520px) {
    .hlcalc-form-col { padding: 14px 14px 0 !important; }
    .hlcalc-outer .hlcalc-w-xs,
    .hlcalc-outer .hlcalc-w-sm,
    .hlcalc-outer .hlcalc-w-md,
    .hlcalc-outer .hlcalc-w-lg,
    .hlcalc-outer .hlcalc-w-xl,
    .hlcalc-outer .hlcalc-group {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ── Prijs bovenaan de sidebar ── */
.hlcalc-sum-price-top {
    border-bottom: 1px solid #3a3a3a !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #1a1a1a !important;
}

/* Lege staat */
.hlcalc-sum-price-top-empty {
    padding: 14px 16px !important;
    font-size: 11px !important;
    color: #555 !important;
    font-style: italic !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    display: block !important;
}

/* Gevulde staat */
.hlcalc-sum-price-top-filled {
    padding: 14px 16px 12px !important;
    margin: 0 !important;
}

.hlcalc-sum-price-top-label {
    font-size: 9px !important;
    font-weight: 600 !important;
    color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin: 0 0 4px !important;
    padding: 0 !important;
    display: block !important;
    line-height: 1.4 !important;
}

.hlcalc-sum-price-top-amount {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #E8520A !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1.1 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    display: block !important;
    letter-spacing: -0.5px !important;
}

/* Regelopbouw onder het bedrag */
.hlcalc-sum-price-top-filled .hlcalc-sum-price-lines {
    padding: 0 !important;
    margin: 0 0 8px !important;
    border-top: 1px solid #2e2e2e !important;
    padding-top: 8px !important;
}
.hlcalc-sum-price-top-filled .hlcalc-sum-price-line {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 10px !important;
    color: #666 !important;
    padding: 2px 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    line-height: 1.5 !important;
}
.hlcalc-sum-price-top-filled .hlcalc-sum-price-line span:first-child { color: #666 !important; }
.hlcalc-sum-price-top-filled .hlcalc-sum-price-line span:last-child  { color: #999 !important; font-weight: 500 !important; }
.hlcalc-sum-price-top-filled .hlc-per-stuk span { color: #555 !important; font-style: italic !important; }

.hlcalc-sum-price-top-disclaimer {
    font-size: 9px !important;
    color: #444 !important;
    font-style: italic !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* ── Verberg alle waarschuwingen standaard;
       JS zet display:block via setAttribute ── */
.hlcalc-outer .hlcalc-warn,
.hlcalc-outer .hlcalc-info,
.hlcalc-outer .hlc-popup,
.hlcalc-outer .hlcalc-errors,
.hlcalc-outer .hlcalc-success,
.hlcalc-outer [id^="hlc-warn"],
.hlcalc-outer [id^="hlc-info"],
.hlcalc-outer [id$="Warn"],
.hlcalc-outer [id$="Info"],
.hlcalc-outer [id$="Warning"] {
    display: none !important;
}

/* Actieve staat — JS voegt klasse .hlc-visible toe */
.hlcalc-outer .hlcalc-warn.hlc-visible,
.hlcalc-outer .hlcalc-info.hlc-visible,
.hlcalc-outer .hlc-popup.hlc-visible.show,
.hlcalc-outer .hlcalc-errors.hlc-visible,
.hlcalc-outer .hlcalc-success.hlc-visible,
.hlcalc-outer [id^="hlc-warn"].hlc-visible,
.hlcalc-outer [id^="hlc-info"].hlc-visible,
.hlcalc-outer [id$="Warn"].hlc-visible,
.hlcalc-outer [id$="Info"].hlc-visible {
    display: block !important;
}

/* Prijs- en samenvatting blokken ook standaard verborgen */
.hlcalc-outer #hlc-priceBar,
.hlcalc-outer #hlc-priceLoading,
.hlcalc-outer #hlc-sumPriceBlock,
.hlcalc-outer #hlc-fillColorGroep,
.hlcalc-outer #hlc-stabWarn,
.hlcalc-outer #hlc-warnIepen,
.hlcalc-outer #hlc-warnBerken,
.hlcalc-outer #hlc-warnHPL,
.hlcalc-outer #hlc-warnZwart,
.hlcalc-outer #hlc-warnFill,
.hlcalc-outer #hlc-warnBreedte,
.hlcalc-outer #hlc-warnKleurlak,
.hlcalc-outer #hlc-infoS96,
.hlcalc-outer #hlc-errors,
.hlcalc-outer #hlc-success {
    display: none !important;
}

/* Zichtbaar als JS klasse toevoegt */
.hlcalc-outer #hlc-priceBar.hlc-visible,
.hlcalc-outer #hlc-sumPriceBlock.hlc-visible,
.hlcalc-outer #hlc-fillColorGroep.hlc-visible,
.hlcalc-outer #hlc-stabWarn.hlc-visible,
.hlcalc-outer #hlc-warnIepen.hlc-visible,
.hlcalc-outer #hlc-warnBerken.hlc-visible,
.hlcalc-outer #hlc-warnHPL.hlc-visible,
.hlcalc-outer #hlc-warnZwart.hlc-visible,
.hlcalc-outer #hlc-warnFill.hlc-visible,
.hlcalc-outer #hlc-warnBreedte.hlc-visible,
.hlcalc-outer #hlc-warnKleurlak.hlc-visible,
.hlcalc-outer #hlc-infoS96.hlc-visible,
.hlcalc-outer #hlc-errors.hlc-visible,
.hlcalc-outer #hlc-success.hlc-visible {
    display: block !important;
}
.hlcalc-outer #hlc-priceBar.hlc-visible {
    display: flex !important;
}
.hlcalc-outer #hlc-sumPriceBlock.hlc-visible {
    display: block !important;
}
.hlcalc-outer #hlc-fillColorGroep.hlc-visible {
    display: flex !important;
}

/* ════════════════════════════════════════════
   NAVIGATIE KOLOM
════════════════════════════════════════════ */
.hlcalc-outer {
    grid-template-columns: 140px 1fr 280px !important;
}

.hlcalc-nav-col {
    grid-column: 1 !important;
    grid-row: 1 !important;
    background: #222 !important;
    border-right: 1px solid #3a3a3a !important;
    border-radius: 4px 0 0 4px !important;
    padding: 16px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.hlcalc-form-col {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.hlcalc-summary-col {
    grid-column: 3 !important;
    grid-row: 1 !important;
}

.hlcalc-nav-btn {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    color: #888 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-align: left !important;
    padding: 10px 14px 10px 13px !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    transition: color .12s, border-color .12s, background .12s !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    white-space: normal !important;
    word-break: break-word !important;
    hyphens: auto !important;
}
.hlcalc-nav-btn:hover {
    color: #d4d4d4 !important;
    background: rgba(255,255,255,0.04) !important;
    border-left-color: #666 !important;
}
.hlcalc-nav-btn.hlcalc-nav-active {
    color: #fff !important;
    border-left-color: #E8520A !important;
    background: rgba(232,82,10,0.08) !important;
    font-weight: 500 !important;
}

/* ════════════════════════════════════════════
   PANELS (tonen/verbergen)
════════════════════════════════════════════ */
.hlcalc-outer .hlcalc-panel {
    display: none !important;
}
.hlcalc-outer .hlcalc-panel.hlcalc-panel-active {
    display: block !important;
}

/* ════════════════════════════════════════════
   BESTEKINZET FORMULIER
════════════════════════════════════════════ */
.hlcalc-inzet-head {
    display: flex !important;
    gap: 16px !important;
    align-items: flex-start !important;
    margin-bottom: 16px !important;
}
.hlcalc-inzet-head-text { flex: 1 !important; min-width: 0 !important; }
.hlcalc-inzet-intro {
    font-size: 12px !important;
    color: #999 !important;
    line-height: 1.7 !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
.hlcalc-inzet-img {
    width: 140px !important;
    height: auto !important;
    border: 2px solid #444 !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
    display: block !important;
    cursor: pointer !important;
}
.hlcalc-inzet-img:hover { border-color: #E8520A !important; }

.hlcalc-inzet-hint {
    font-size: 12px !important;
    color: #555 !important;
    font-style: italic !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    line-height: 1.5 !important;
}

/* Layout grid */
.hlcalc-inzet-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.hlcalc-layout-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    width: 148px !important;
}
.hlcalc-layout-card img {
    display: block !important;
    width: 148px !important;
    height: 108px !important;
    object-fit: contain !important;
    border: 3px solid #111 !important;
    border-radius: 2px !important;
    background: #111 !important;
    transition: border-color .12s !important;
    margin: 0 !important;
    padding: 4px !important;
    box-shadow: none !important;
}
.hlcalc-layout-card:hover img { border-color: #666 !important; }
.hlcalc-layout-card.hlcalc-layout-selected img { border-color: #E8520A !important; }
.hlcalc-layout-card span {
    font-size: 11px !important;
    color: #ccc !important;
    text-align: center !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    font-weight: 400 !important;
}
.hlcalc-layout-card.hlcalc-layout-selected span { color: #E8520A !important; font-weight: 500 !important; }

/* Responsive: nav + form + summary */
@media (max-width: 900px) {
    .hlcalc-outer { grid-template-columns: 120px 1fr !important; grid-template-rows: auto auto !important; }
    .hlcalc-nav-col { grid-column: 1 !important; grid-row: 1 !important; border-radius: 4px 0 0 0 !important; }
    .hlcalc-form-col { grid-column: 2 !important; grid-row: 1 !important; }
    .hlcalc-summary-col { grid-column: 1 / span 2 !important; grid-row: 2 !important; border-left: none !important; border-top: 1px solid #3a3a3a !important; border-radius: 0 0 4px 4px !important; position: static !important; max-height: none !important; }
    .hlcalc-summary-header { border-radius: 0 !important; }
}
@media (max-width: 600px) {
    .hlcalc-outer { grid-template-columns: 1fr !important; }
    .hlcalc-nav-col { grid-column: 1 !important; grid-row: 1 !important; flex-direction: row !important; border-radius: 4px 4px 0 0 !important; border-right: none !important; border-bottom: 1px solid #3a3a3a !important; padding: 0 !important; overflow-x: auto !important; }
    .hlcalc-nav-btn { border-left: none !important; border-bottom: 3px solid transparent !important; padding: 12px 14px !important; white-space: nowrap !important; flex-shrink: 0 !important; }
    .hlcalc-nav-btn.hlcalc-nav-active { border-left-color: transparent !important; border-bottom-color: #E8520A !important; }
    .hlcalc-form-col { grid-column: 1 !important; grid-row: 2 !important; }
    .hlcalc-summary-col { grid-column: 1 !important; grid-row: 3 !important; }
}

/* ════════════════════════════════════════════
   OFFERTE OVERZICHT — hlcoff-*
════════════════════════════════════════════ */
.hlcoff-wrap *, .hlcoff-wrap *::before, .hlcoff-wrap *::after { box-sizing: border-box !important; }
.hlcoff-wrap {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 13px !important;
    color: #d4d4d4 !important;
    background: #2a2a2a !important;
    padding: 20px !important;
    border-radius: 4px !important;
    max-width: 100% !important;
}

/* Header */
.hlcoff-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.hlcoff-nr   { font-size: 16px !important; font-weight: 600 !important; color: #e8e8e8 !important; }
.hlcoff-meta { font-size: 11px !important; color: #888 !important; margin-left: 10px !important; }
.hlcoff-btn-primary {
    background: #E8520A !important; color: #fff !important;
    border: none !important; border-radius: 3px !important;
    padding: 7px 16px !important; font-size: 12px !important; font-weight: 600 !important;
    cursor: pointer !important; text-decoration: none !important; display: inline-block !important;
    font-family: inherit !important;
}
.hlcoff-btn-primary:hover { background: #c43f00 !important; }

/* Berichten */
.hlcoff-msg {
    padding: 9px 14px !important; border-radius: 3px !important;
    font-size: 12px !important; margin-bottom: 12px !important; display: none !important;
}
.hlcoff-error   { background: rgba(200,40,40,.15) !important; border: 1px solid rgba(200,40,40,.4) !important; color: #f08080 !important; }
.hlcoff-success { background: rgba(46,125,80,.12)  !important; border: 1px solid rgba(46,125,80,.35) !important; color: #80d4a0 !important; }
.hlcoff-msg.hlc-visible { display: block !important; }

/* Tabel */
.hlcoff-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 12px !important;
    margin-bottom: 0 !important;
}
.hlcoff-table th {
    background: #1e1e1e !important;
    color: #888 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 8px 10px !important;
    border-bottom: 1px solid #3a3a3a !important;
    text-align: left !important;
    white-space: nowrap !important;
}
.hlcoff-table td {
    padding: 10px 10px !important;
    border-bottom: 1px solid #333 !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: #d4d4d4 !important;
}
.hlcoff-row:last-child td { border-bottom: none !important; }
.hlcoff-row:hover td { background: rgba(255,255,255,0.03) !important; }

/* Kolom-breedtes */
.hlcoff-col-nr    { width: 36px !important; color: #666 !important; text-align: center !important; }
.hlcoff-col-type  { width: 110px !important; white-space: nowrap !important; }
.hlcoff-col-cfg   { /* vult de ruimte */ }
.hlcoff-col-aant  { width: 52px !important; text-align: center !important; }
.hlcoff-col-prijs { width: 110px !important; text-align: right !important; font-variant-numeric: tabular-nums !important; color: #E8520A !important; font-weight: 600 !important; }
.hlcoff-col-act   { width: 96px !important; text-align: right !important; }

/* Badge */
.hlcoff-badge {
    display: inline-block !important;
    font-size: 10px !important; font-weight: 600 !important;
    padding: 2px 8px !important; border-radius: 3px !important;
    white-space: nowrap !important;
}
.hlcoff-badge-lade  { background: rgba(139,94,60,.25) !important; color: #C4916A !important; }
.hlcoff-badge-inzet { background: rgba(30,90,140,.25) !important; color: #7AB5E0 !important; }

/* Configuratie samenvatting */
.hlcoff-cfg { display: flex !important; flex-wrap: wrap !important; gap: 4px 10px !important; }
.hlcoff-ci  { font-size: 11px !important; display: flex !important; gap: 3px !important; }
.hlcoff-ck  { color: #666 !important; }
.hlcoff-cv  { color: #ccc !important; font-weight: 500 !important; }

/* Actie-iconen */
.hlcoff-acts {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
}
.hlcoff-act {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important; height: 26px !important;
    border-radius: 4px !important;
    border: 1px solid #444 !important;
    background: #333 !important;
    color: #aaa !important;
    cursor: pointer !important;
    transition: all .12s !important;
    text-decoration: none !important;
    font-family: inherit !important;
    padding: 0 !important;
}
.hlcoff-act:hover { background: #444 !important; color: #fff !important; border-color: #666 !important; }
.hlcoff-act-s96:hover  { background: rgba(139,94,60,.3) !important; color: #C4916A !important; border-color: #8B5E3C !important; }
.hlcoff-act-edit:hover { background: rgba(30,90,180,.2) !important; color: #7AB5E0 !important; border-color: #4a7ab5 !important; }
.hlcoff-act-del:hover  { background: rgba(200,40,40,.2) !important; color: #f08080 !important; border-color: #a03030 !important; }
.hlcoff-act-dim        { opacity: .35 !important; cursor: default !important; }
.hlcoff-act-placeholder { display: inline-block !important; width: 26px !important; height: 26px !important; }

/* Rij verwijderd animatie */
.hlcoff-row.hlcoff-removing { opacity: 0 !important; transition: opacity .25s !important; }

/* Totalen */
.hlcoff-totalen {
    margin-top: 0 !important;
    background: #1e1e1e !important;
    border-top: 1px solid #3a3a3a !important;
    padding: 12px 14px !important;
    border-radius: 0 0 4px 4px !important;
}
.hlcoff-tot-row {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 24px !important;
    font-size: 12px !important;
    color: #888 !important;
    padding: 3px 0 !important;
}
.hlcoff-tot-row span:last-child { min-width: 90px !important; text-align: right !important; font-variant-numeric: tabular-nums !important; }
.hlcoff-tot-final {
    font-size: 15px !important; font-weight: 700 !important;
    color: #E8520A !important; border-top: 1px solid #3a3a3a !important;
    margin-top: 6px !important; padding-top: 8px !important;
}
.hlcoff-tot-final span:last-child { color: #E8520A !important; }
.hlcoff-tot-btw {
    text-align: right !important;
    font-size: 10px !important; color: #555 !important;
    margin-top: 4px !important;
}

.hlcoff-empty { padding: 24px 0 !important; }