/* Dak-renovatie kostencalculator section — navy/blue design system.
   Loaded only on pages that include the cost_calculator section.
   Appearance only — no class/id/name/data-attr renaming. */

.cost-calculator {
    padding: 64px 0;
    background: var(--surface);
}

.cc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}

@media (min-width: 960px) {
    .cc-grid {
        grid-template-columns: 1fr 360px;
        gap: 32px;
    }
}

/* --- form column --- */

.cc-form {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 26px;
    box-shadow: var(--sh-sm);
}

.cc-field { margin-bottom: 24px; }
.cc-field:last-child { margin-bottom: 0; }

.cc-label {
    display: block;
    font-family: var(--display);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 10px;
}

.cc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.cc-chip {
    position: relative;
    cursor: pointer;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--ink);
    transition: background .14s, color .14s, border-color .14s, box-shadow .14s;
}
.cc-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cc-chip.is-active {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    box-shadow: 0 2px 8px rgba(37,99,235,.18);
}
.cc-chip:hover:not(.is-active) {
    border-color: var(--blue);
    background: var(--blue-l);
}
.cc-chip:focus-within {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.cc-help, .cc-included {
    font-size: 13px;
    color: var(--muted);
    margin: 6px 0;
}
.cc-included { font-size: 12px; }
.cc-included strong { color: var(--ink); }

.cc-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: var(--card);
    transition: border-color .14s, box-shadow .14s;
}
.cc-stepper:focus-within {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.cc-stepper input {
    width: 96px;
    border: 0;
    text-align: center;
    font-family: var(--display);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    padding: 9px 6px;
    background: transparent;
    -moz-appearance: textfield;
}
.cc-stepper input:focus { outline: none; }
.cc-stepper input::-webkit-outer-spin-button,
.cc-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.cc-step {
    background: var(--surface);
    border: 0;
    border-left: 1px solid var(--line);
    padding: 0 16px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--blue-d);
    transition: background .14s, color .14s;
}
.cc-stepper > .cc-step:first-child {
    border-left: 0;
    border-right: 1px solid var(--line);
}
.cc-step:hover { background: var(--blue); color: #fff; }

.cc-help-detail {
    margin-top: 10px;
    font-size: 13px;
    color: var(--muted);
}
.cc-help-detail summary { cursor: pointer; color: var(--blue); font-weight: 500; }

/* --- add-ons --- */

.cc-addons {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cc-addon { border-top: 1px solid var(--line); padding: 12px 0; }
.cc-addon:first-child { border-top: 0; padding-top: 0; }

.cc-addon-line {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--ink);
}
.cc-addon-line input[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--blue);
}
.cc-addon-label { flex: 1; }

.cc-tooltip-btn {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--card);
    cursor: pointer;
    color: var(--muted);
    font-weight: 600;
    font-size: 12px;
    padding: 0;
    transition: background .14s, color .14s, border-color .14s;
}
.cc-tooltip-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

.cc-addon-detail {
    margin-top: 12px;
    padding-left: 28px;
}
.cc-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
}
.cc-inline input {
    width: 90px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 6px 9px;
    font-size: 13px;
    color: var(--ink);
    background: var(--card);
    transition: border-color .14s, box-shadow .14s;
}
.cc-inline input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.cc-tooltip-text {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
}

/* --- result aside --- */

.cc-result {
    position: sticky;
    top: 20px;
}
.cc-result-inner {
    background: var(--navy);
    color: #fff;
    border: 1px solid var(--navy-2);
    border-radius: var(--r);
    padding: 24px;
    box-shadow: var(--sh);
}
.cc-result-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: rgba(255,255,255,.62);
    margin-bottom: 8px;
}
.cc-total {
    font-family: var(--display);
    font-size: 27px;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
}
.cc-total-incl { font-size: 16px; color: rgba(255,255,255,.86); margin-top: 6px; }
.cc-total-sub { font-size: 12px; color: rgba(255,255,255,.55); margin-bottom: 4px; }
.cc-dash { color: rgba(255,255,255,.5); padding: 0 2px; }

.cc-breakdown {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.12);
}
.cc-breakdown-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: rgba(255,255,255,.62);
    margin-bottom: 10px;
}
.cc-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    margin-bottom: 10px;
}
.cc-bar-label { font-size: 12px; color: rgba(255,255,255,.86); }
.cc-bar-track {
    height: 6px;
    background: rgba(255,255,255,.14);
    border-radius: 3px;
    overflow: hidden;
    display: flex;
}
.cc-bar-fill-min { background: var(--blue); }
.cc-bar-fill-max { background: var(--blue); opacity: .45; }
.cc-bar-amt {
    font-size: 11px;
    color: rgba(255,255,255,.6);
    text-align: right;
}

.cc-result-cta { margin-top: 20px; }
.cc-cta-popup { width: 100%; }
.cc-result-fineprint {
    margin-top: 12px;
    font-size: 11.5px;
    color: rgba(255,255,255,.6);
    line-height: 1.5;
}

/* --- componentenlijst --- */

.cc-componentenlijst {
    margin-top: 28px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 18px 24px;
    box-shadow: var(--sh-sm);
}
.cc-componentenlijst > summary {
    cursor: pointer;
    font-family: var(--display);
    font-weight: 600;
    font-size: 14px;
    color: var(--blue);
}
.cc-components-table {
    width: 100%;
    margin-top: 14px;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--ink);
}
.cc-components-table th,
.cc-components-table td {
    text-align: left;
    padding: 9px 6px;
    border-bottom: 1px solid var(--line);
}
.cc-components-table th {
    font-family: var(--display);
    font-weight: 600;
    color: var(--ink);
    background: var(--surface);
}

/* --- mobile sticky strip (< 960 px) --- */
@media (max-width: 959px) {
    .cc-result {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 30;
        padding: 0;
    }
    .cc-result-inner {
        border-radius: var(--r) var(--r) 0 0;
        border-bottom: 0;
        max-height: 60vh;
        overflow-y: auto;
        padding: 16px 18px;
        box-shadow: 0 -8px 24px rgba(13,30,60,.18);
    }
    .cc-result:not(.is-expanded) .cc-breakdown,
    .cc-result:not(.is-expanded) .cc-result-cta {
        display: none;
    }
    .cc-result-label { cursor: pointer; }
    .cc-total { font-size: 21px; }
    .cc-total-incl { font-size: 13px; }
    /* leave space so the page bottom doesn't hide behind the strip */
    .cost-calculator { padding-bottom: 160px; }
}