/*
 * MHF Floor Calculator — frontend stijlen
 * Alle classes zijn geprefixed met .mhf- om globale Flatsome/WooCommerce stijlen te beschermen.
 *
 * Stijlrichting: "Premium vakmanschap" — warm, presies, betrouwbaar.
 * Palet: walnoot · eiken · linnen · zand.
 */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;1,500&family=Jost:wght@300;400;500;600&display=swap');

/* ── Design tokens ──────────────────────────────────────────────────────────── */

.mhf-calculator {
    --mhf-walnut:       #1c1208;
    --mhf-espresso:     #3b2212;
    --mhf-bark:         #8b5e3c;
    --mhf-oak:          #b87333;
    --mhf-honey:        #d4a055;
    --mhf-linen:        #f8f4ef;
    --mhf-sand:         #ede5d8;
    --mhf-cream:        #fdfaf6;
    --mhf-border:       #ddd0bf;
    --mhf-border-focus: #b87333;
    --mhf-text:         #241507;
    --mhf-muted:        #7a6245;
    --mhf-green:        #4e7434;
    --mhf-green-light:  #eef5e8;
    --mhf-amber:        #b86b0a;
    --mhf-amber-light:  #fef6e4;
    --mhf-red:          #b83232;

    --mhf-radius-sm:    4px;
    --mhf-radius:       8px;
    --mhf-radius-lg:    12px;
    --mhf-shadow:       0 4px 24px rgba(28,18,8,.10), 0 1px 6px rgba(28,18,8,.06);
    --mhf-shadow-sm:    0 1px 4px rgba(28,18,8,.08);
    --mhf-ease:         cubic-bezier(.25,.46,.45,.94);
    --mhf-duration:     .18s;
}

/* ── Wrapper ────────────────────────────────────────────────────────────────── */

.mhf-calculator {
    font-family: 'Jost', 'Segoe UI', system-ui, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: var(--mhf-text) !important;
    background: var(--mhf-cream) !important;
    border: 1px solid var(--mhf-border) !important;
    border-radius: var(--mhf-radius-lg) !important;
    box-shadow: var(--mhf-shadow) !important;
    overflow: hidden !important;
    margin: 28px 0 !important;
    max-width: 560px !important;
    padding: 0 !important;
}

/* ── Titel ──────────────────────────────────────────────────────────────────── */

.mhf-calculator__title {
    font-family: 'Lora', Georgia, serif !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
    color: var(--mhf-linen) !important;
    background: var(--mhf-walnut) !important;
    margin: 0 !important;
    padding: 16px 22px 15px !important;
    border-bottom: 3px solid var(--mhf-oak) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.mhf-calculator__title::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background: var(--mhf-oak);
    border-radius: 2px;
    transform: rotate(45deg);
    flex-shrink: 0;
    opacity: .85;
}

/* ── Binnenste padding-zone ────────────────────────────────────────────────── */

.mhf-calculator__field,
.mhf-calculator__ruimtes,
.mhf-calculator__btn-add-ruimte,
.mhf-calculator__min-warning,
.mhf-calculator__preview,
.mhf-calculator__legservice,
.mhf-calculator__ondervloer,
.mhf-calculator__voorraad,
.mhf-calculator__config-error {
    margin-left: 22px !important;
    margin-right: 22px !important;
}

.mhf-calculator__voorraad {
    margin-bottom: 20px !important;
}

/* ── Configuratiefout ───────────────────────────────────────────────────────── */

.mhf-calculator__config-error {
    padding: 16px 22px;
    color: var(--mhf-red);
    font-size: .9em;
    font-style: italic;
}

/* ── Labels ─────────────────────────────────────────────────────────────────── */

.mhf-calculator__label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mhf-muted);
    margin-bottom: 6px;
}

/* ── Veld-groepen ───────────────────────────────────────────────────────────── */

.mhf-calculator__field {
    margin-top: 18px;
}

/* ── Select / dropdown ──────────────────────────────────────────────────────── */

.mhf-calculator__select {
    width: 100%;
    padding: 9px 36px 9px 12px;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 500;
    color: var(--mhf-text);
    background: var(--mhf-cream);
    border: 1.5px solid var(--mhf-border);
    border-radius: var(--mhf-radius-sm);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%238b5e3c' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    transition: border-color var(--mhf-duration) var(--mhf-ease),
                box-shadow var(--mhf-duration) var(--mhf-ease);
}

.mhf-calculator__select:focus {
    outline: none;
    border-color: var(--mhf-border-focus);
    box-shadow: 0 0 0 3px rgba(184,115,51,.15);
}

.mhf-calculator__select:hover:not(:focus) {
    border-color: var(--mhf-bark);
}

/* ── Snijverlies toggle ─────────────────────────────────────────────────────── */

.mhf-calculator__field--snijverlies-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 11px 22px;
    margin-left: -22px;
    margin-right: -22px;
    background: var(--mhf-linen);
    border-top: 1px solid var(--mhf-border);
    border-bottom: 1px solid var(--mhf-border);
}

.mhf-calculator__field--snijverlies-toggle .mhf-calculator__label {
    margin-bottom: 0;
    flex: 1;
    text-transform: none;
    font-size: .875rem;
    letter-spacing: 0;
    font-weight: 500;
    color: var(--mhf-text);
}

.mhf-calculator__info-icon {
    cursor: help;
    font-style: normal;
    color: var(--mhf-bark);
    opacity: .7;
    font-size: 1rem;
    transition: opacity var(--mhf-duration);
}

.mhf-calculator__info-icon:hover {
    opacity: 1;
}

/* Toggle schakelaar */

.mhf-calculator__switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    cursor: pointer;
    flex-shrink: 0;
}

.mhf-calculator__switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.mhf-calculator__switch-slider {
    position: absolute;
    inset: 0;
    background: var(--mhf-border);
    border-radius: 26px;
    transition: background var(--mhf-duration) var(--mhf-ease);
}

.mhf-calculator__switch-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform var(--mhf-duration) var(--mhf-ease);
}

.mhf-calculator__switch input:checked + .mhf-calculator__switch-slider {
    background: var(--mhf-oak);
}

.mhf-calculator__switch input:checked + .mhf-calculator__switch-slider::before {
    transform: translateX(20px);
}

/* ── Ruimtes ────────────────────────────────────────────────────────────────── */

.mhf-calculator__ruimtes {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mhf-calculator__ruimte {
    background: var(--mhf-linen);
    border: 1.5px solid var(--mhf-border);
    border-radius: var(--mhf-radius);
    padding: 14px 16px;
    transition: border-color var(--mhf-duration);
}

.mhf-calculator__ruimte:focus-within {
    border-color: var(--mhf-border-focus);
    box-shadow: 0 0 0 3px rgba(184,115,51,.10);
}

.mhf-calculator__ruimte-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mhf-bark);
    margin-bottom: 10px;
}

.mhf-calculator__ruimte-velden {
    display: grid !important;
    grid-template-columns: 90px 1fr 90px 1fr !important;
    align-items: center !important;
    gap: 8px !important;
}

@media (max-width: 540px) {
    .mhf-calculator__ruimte-velden {
        grid-template-columns: 80px 1fr !important;
    }
}

.mhf-calculator__ruimte-velden .mhf-calculator__label {
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: .8rem;
    white-space: nowrap;
    font-weight: 500;
    color: var(--mhf-muted);
}

/* Inputs */

.mhf-calculator__input {
    width: 100%;
    padding: 8px 10px;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 500;
    color: var(--mhf-text);
    background: var(--mhf-cream);
    border: 1.5px solid var(--mhf-border);
    border-radius: var(--mhf-radius-sm);
    transition: border-color var(--mhf-duration) var(--mhf-ease),
                box-shadow var(--mhf-duration) var(--mhf-ease);
    -moz-appearance: textfield;
}

.mhf-calculator__input::-webkit-outer-spin-button,
.mhf-calculator__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.mhf-calculator__input:focus {
    outline: none;
    border-color: var(--mhf-border-focus);
    box-shadow: 0 0 0 3px rgba(184,115,51,.15);
    background: #fff;
}

.mhf-calculator__input::placeholder {
    color: var(--mhf-border);
    font-weight: 300;
}

/* Verwijder-knop */

.mhf-calculator__btn-remove-ruimte {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 500;
    color: var(--mhf-muted);
    cursor: pointer;
    letter-spacing: .02em;
    opacity: .7;
    transition: color var(--mhf-duration), opacity var(--mhf-duration);
}

.mhf-calculator__btn-remove-ruimte:hover {
    color: var(--mhf-red);
    opacity: 1;
}

/* Ruimte-toevoegen knop */

.mhf-calculator__btn-add-ruimte {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 14px;
    background: transparent;
    border: 1.5px dashed var(--mhf-bark);
    border-radius: var(--mhf-radius-sm);
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--mhf-bark);
    cursor: pointer;
    letter-spacing: .02em;
    transition: background var(--mhf-duration) var(--mhf-ease),
                color var(--mhf-duration) var(--mhf-ease),
                border-color var(--mhf-duration) var(--mhf-ease);
    width: 100%;
    justify-content: center;
}

.mhf-calculator__btn-add-ruimte:hover:not(:disabled) {
    background: var(--mhf-sand);
    border-color: var(--mhf-oak);
    color: var(--mhf-oak);
}

.mhf-calculator__btn-add-ruimte:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* ── Minimumbestelling waarschuwing ─────────────────────────────────────────── */

.mhf-calculator__min-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 14px;
    background: var(--mhf-amber-light);
    border-left: 3px solid var(--mhf-amber);
    border-radius: var(--mhf-radius-sm);
    color: var(--mhf-amber);
    font-size: .85em;
    font-weight: 500;
    line-height: 1.4;
}

/* ── Preview ────────────────────────────────────────────────────────────────── */

.mhf-calculator__preview {
    margin-top: 20px;
    background: var(--mhf-linen);
    border: 1.5px solid var(--mhf-border);
    border-radius: var(--mhf-radius);
    overflow: hidden;
}

.mhf-calculator__preview-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.mhf-calculator__preview-tabel tbody tr {
    border-bottom: 1px solid var(--mhf-sand);
    transition: background var(--mhf-duration);
}

.mhf-calculator__preview-tabel tbody tr:last-child {
    border-bottom: none;
}

.mhf-calculator__preview-tabel tbody tr:hover {
    background: var(--mhf-sand);
}

.mhf-calculator__preview-tabel th {
    padding: 9px 16px;
    text-align: left;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mhf-muted);
    white-space: nowrap;
    width: 52%;
}

.mhf-calculator__preview-tabel td {
    padding: 9px 16px 9px 0;
    text-align: right;
    font-weight: 500;
    color: var(--mhf-text);
    padding-right: 16px;
}

/* Staffelkorting rij */

.mhf-calculator__preview-korting th,
.mhf-calculator__preview-korting td {
    color: var(--mhf-green);
    background: var(--mhf-green-light);
}

.mhf-calculator__korting-badge {
    display: inline-block;
    background: var(--mhf-green);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: 20px;
    margin-left: 6px;
    vertical-align: middle;
    text-transform: uppercase;
}

/* Ondervloer rij in preview */

.mhf-calculator__preview-ondervloer th,
.mhf-calculator__preview-ondervloer td {
    color: var(--mhf-bark);
}

/* Prijs-rij: hoofdrol */

.mhf-calculator__preview-prijs {
    background: var(--mhf-walnut) !important;
    border-bottom: none !important;
}

.mhf-calculator__preview-prijs th {
    color: rgba(248,244,239,.65);
    font-family: 'Lora', Georgia, serif;
    font-size: .78rem;
    letter-spacing: .06em;
}

.mhf-calculator__preview-prijs td {
    color: var(--mhf-honey);
    font-family: 'Lora', Georgia, serif;
    font-size: 1.15rem;
    font-weight: 600;
}

.mhf-calculator__preview-prijs td strong {
    font-weight: 600;
}

/* Prijs-per-m² rij */

.mhf-calculator__preview-prijs-m2 th {
    color: rgba(248,244,239,.5);
    background: var(--mhf-espresso);
    font-size: .72rem;
}

.mhf-calculator__preview-prijs-m2 td {
    color: rgba(248,244,239,.7);
    background: var(--mhf-espresso);
    font-size: .85rem;
}

.mhf-calculator__preview-prijs-m2:hover {
    background: none !important;
}

/* Disclaimer */

.mhf-calculator__preview-disclaimer {
    margin: 0;
    padding: 9px 16px;
    font-size: .75rem;
    color: var(--mhf-muted);
    font-style: italic;
    border-top: 1px solid var(--mhf-sand);
    background: var(--mhf-cream);
    line-height: 1.4;
}

/* ── Ondervloer sectie ──────────────────────────────────────────────────────── */

.mhf-calculator__ondervloer {
    margin-top: 14px;
    padding: 13px 16px;
    background: var(--mhf-linen);
    border: 1.5px solid var(--mhf-border);
    border-left: 3px solid var(--mhf-bark);
    border-radius: var(--mhf-radius-sm);
}

.mhf-calculator__ondervloer > .mhf-calculator__label {
    margin-bottom: 8px;
    color: var(--mhf-bark);
}

.mhf-calculator__ondervloer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mhf-calculator__ondervloer-row .mhf-calculator__select {
    flex: 1;
    min-width: 180px;
}

.mhf-calculator__ondervloer-prijs {
    font-size: .82rem;
    font-weight: 500;
    color: var(--mhf-bark);
    white-space: nowrap;
    min-height: 1em;
}

/* ── Legservice ─────────────────────────────────────────────────────────────── */

.mhf-calculator__legservice {
    margin-top: 14px;
    padding: 13px 16px;
    background: var(--mhf-linen);
    border: 1.5px solid var(--mhf-border);
    border-left: 3px solid var(--mhf-oak);
    border-radius: var(--mhf-radius-sm);
}

.mhf-calculator__legservice-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.mhf-calculator__legservice-label input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--mhf-oak);
    cursor: pointer;
    flex-shrink: 0;
}

.mhf-calculator__legservice-tekst {
    font-size: .9rem;
    font-weight: 600;
    color: var(--mhf-text);
    letter-spacing: .01em;
}

.mhf-calculator__legservice-prijs {
    display: block;
    margin-top: 5px;
    margin-left: 27px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--mhf-muted);
    line-height: 1.4;
}

/* ── Voorraad indicator ─────────────────────────────────────────────────────── */

.mhf-calculator__voorraad {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.mhf-calculator__voorraad--op-voorraad {
    color: var(--mhf-green);
    background: var(--mhf-green-light);
}

.mhf-calculator__voorraad--backorder {
    color: var(--mhf-amber);
    background: var(--mhf-amber-light);
}

.mhf-calculator__voorraad--niet-op-voorraad {
    color: var(--mhf-red);
    background: #fdf0ef;
}

/* ── Quantity-lock in cart ──────────────────────────────────────────────────── */

.mhf-calculator__qty-locked {
    display: inline-block;
    padding: 4px 10px;
    background: var(--mhf-sand);
    border: 1px solid var(--mhf-border);
    border-radius: var(--mhf-radius-sm);
    font-weight: 600;
    font-size: .9rem;
    color: var(--mhf-text);
}

/* ── Oppervlakte invoer-rij ─────────────────────────────────────────────────── */

.mhf-calculator__opp-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.mhf-calculator__opp-row .mhf-calculator__input {
    width: 110px !important;
    flex-shrink: 0 !important;
}

.mhf-calculator__opp-eenheid {
    font-weight: 600;
    font-size: .95rem;
    color: var(--mhf-muted);
    flex-shrink: 0;
}

.mhf-calculator__btn-bereken {
    padding: 9px 18px !important;
    background: var(--mhf-walnut) !important;
    color: var(--mhf-linen) !important;
    border: none !important;
    border-radius: var(--mhf-radius-sm) !important;
    font-family: inherit !important;
    font-size: .88rem !important;
    font-weight: 600 !important;
    letter-spacing: .03em !important;
    cursor: pointer !important;
    transition: background var(--mhf-duration) var(--mhf-ease) !important;
    white-space: nowrap !important;
}

.mhf-calculator__btn-bereken:hover {
    background: var(--mhf-espresso) !important;
}

/* ── Resultaatblok ──────────────────────────────────────────────────────────── */

.mhf-calculator__preview-pakken {
    font-family: 'Lora', Georgia, serif !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: var(--mhf-text) !important;
    margin: 0 0 4px !important;
    padding: 14px 16px 0 !important;
}

.mhf-calculator__preview-info {
    font-size: .85rem !important;
    color: var(--mhf-muted) !important;
    margin: 0 !important;
    padding: 2px 16px !important;
}

.mhf-calculator__preview-info--snij {
    font-style: italic !important;
    margin-bottom: 10px !important;
}

.mhf-calculator__preview-prijs-blok {
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
    padding: 10px 16px !important;
    background: var(--mhf-walnut) !important;
    margin-top: 8px !important;
}

.mhf-calculator__preview-totaalprijs {
    font-family: 'Lora', Georgia, serif !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    color: var(--mhf-honey) !important;
}

.mhf-calculator__preview-adviesprijs {
    font-size: .9rem !important;
    color: rgba(248,244,239,.45) !important;
}

.mhf-calculator__preview-korting {
    margin: 0 !important;
    padding: 6px 16px 10px !important;
    font-size: .85rem !important;
    font-weight: 700 !important;
    color: var(--mhf-red) !important;
    background: var(--mhf-espresso) !important;
}

/* ── Add-to-cart geblokkeerd ────────────────────────────────────────────────── */

.single_add_to_cart_button.mhf-blocked,
[name="add-to-cart"].mhf-blocked {
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(.4);
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .mhf-calculator__ruimte-velden {
        grid-template-columns: auto 1fr;
        gap: 6px;
    }

    .mhf-calculator__ondervloer-row {
        flex-direction: column;
        align-items: stretch;
    }

    .mhf-calculator__ondervloer-prijs {
        white-space: normal;
    }

    .mhf-calculator__preview-tabel th,
    .mhf-calculator__preview-tabel td {
        padding: 8px 12px;
    }
}