:root {
            --primary: #1a2733;
            --primary-light: #243446;
            --primary-contrast: #ffffff;
            --bg-page: #eef3f8;
            --bg-card: #f5f8fc;
            --border-soft: #c8d3e3;
            --input-bg: #f7f9fd;
        }

        body {
            margin: 0;
            padding: 0;
            background: #f0f4f9;
            /* background: radial-gradient(circle at top left, #f7f9fd 0, var(--bg-page) 40%, #e2ebf5 100%); */
        }

        #moving-calculator {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            max-width: 960px;
            margin: 16px auto;
            padding: 24px 16px 32px;
            box-sizing: border-box;
            color: #1f2933;
        }

            #moving-calculator * {
                box-sizing: border-box;
            }

        .mc-header {
            margin-bottom: 18px;
        }

        .mc-header-title {
            font-size: 1.75rem;
            font-weight: 650;
            margin-bottom: 4px;
            color: var(--primary);
        }

        .mc-header-subtitle {
            font-size: 0.95rem;
            color: #6b7280;
        }

        /* Tabs */
        .mc-steps {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: 18px 0 10px 0;
        }

        .mc-step-tab {
            position: relative;
            padding: 10px 14px;
            background: transparent;
            border-radius: 999px;
            border: 1px solid transparent;
            cursor: pointer;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 8px;
            color: #6b7280;
            transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
        }

        .mc-step-tab-number {
            width: 26px;
            height: 26px;
            border-radius: 999px;
            border: 1px solid #d1d5db;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            background: #f9fafb;
        }

        .mc-step-tab:hover {
            border-color: #d2dbe8;
            background: rgba(255,255,255,0.7);
        }

        .mc-step-tab.active {
            color: var(--primary);
            font-weight: 600;
            background: rgba(255,255,255,0.95);
            border-color: #d2dbe8;
        }

            .mc-step-tab.active .mc-step-tab-number {
                background: var(--primary);
                border-color: var(--primary);
                color: var(--primary-contrast);
            }

        /* Progress bar */
        .mc-progress {
            margin-bottom: 18px;
        }

        .mc-progress-track {
            width: 100%;
            height: 10px;
            border-radius: 999px;
            background: rgba(255,255,255,0.8);
            border: 1px solid #d7e0ef;
            overflow: hidden;
            box-shadow: inset 0 1px 2px rgba(15,23,42,0.06);
        }

        .mc-progress-bar {
            height: 100%;
            width: 25%;
            background: linear-gradient(90deg, var(--primary-light), var(--primary));
            transition: width 0.35s ease;
        }

        .mc-progress-text {
            margin-top: 6px;
            font-size: 0.85rem;
            color: #6b7280;
        }

        /* Panels + animatie */
        .mc-step-panels {
            margin-top: 8px;
        }

        .mc-step-panel {
            display: none;
            opacity: 0;
            transform: translateY(6px);
            pointer-events: none;
            transition: opacity 0.25s ease, transform 0.25s ease;
        }

            .mc-step-panel.active {
                display: block;
                opacity: 1;
                transform: translateY(0);
                pointer-events: auto;
            }

        .mc-card {
            border-radius: 18px;
            border: 1px solid var(--border-soft);
            padding: 20px 18px 18px;
            background: var(--bg-card);
            box-shadow: 0 14px 30px rgba(15,23,42,0.08);
        }

        .mc-modal-backdrop {
            position: fixed;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
            background: rgba(26, 39, 51, 0.38);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.18s ease;
            z-index: 1000;
        }

        .mc-modal-backdrop.active {
            opacity: 1;
            pointer-events: auto;
        }

        .mc-modal {
            width: min(100%, 420px);
            border-radius: 20px;
            border: 1px solid #d2dbe8;
            background: linear-gradient(180deg, #fbfdff 0%, #eef4fb 100%);
            box-shadow: 0 22px 50px rgba(15,23,42,0.2);
            padding: 22px 20px 18px;
        }

        .mc-modal-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 8px;
        }

        .mc-modal-text {
            font-size: 0.95rem;
            line-height: 1.5;
            color: #445266;
            margin-bottom: 16px;
        }

        .mc-modal-actions {
            display: flex;
            justify-content: flex-end;
        }

        .mc-card-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 6px;
            color: #111827;
        }

        .mc-card-description {
            font-size: 0.95rem;
            color: #6b7280;
            margin-bottom: 18px;
        }

            .mc-card-description.mc-small {
                font-size: 0.9rem;
                margin-bottom: 10px;
            }

        .mc-form-row {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 14px;
        }

        .mc-form-row-inline {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 10px;
        }

        .mc-form-row-inline > * {
            flex: 1 1 120px;
        }

        .mc-address-detail-row {
            margin-bottom: 0;
        }

        .mc-address-detail-row > *:first-child {
            flex: 0 1 160px;
        }

        .mc-address-detail-row > *:last-child {
            flex: 1 1 160px;
        }

        .mc-form-label {
            font-size: 0.9rem;
            font-weight: 500;
            color: #374151;
        }

        .mc-form-input {
            width: 100%;
            padding: 12px 13px;
            border-radius: 12px;
            border: 1px solid #c7d3e5;
            font-size: 1rem;
            background: var(--input-bg);
            transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
        }

            .mc-form-input:focus {
                outline: none;
                border-color: var(--primary);
                background: #ffffff;
                box-shadow: 0 0 0 1px rgba(26, 39, 51, 0.12);
            }

        .mc-form-textarea {
            width: 100%;
            min-height: 80px;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px solid #c7d3e5;
            font-size: 0.95rem;
            background: var(--input-bg);
            resize: vertical;
        }

            .mc-form-textarea:focus {
                outline: none;
                border-color: var(--primary);
                background: #ffffff;
                box-shadow: 0 0 0 1px rgba(26, 39, 51, 0.12);
            }

        .mc-checkbox-row {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.9rem;
            color: #374151;
        }

            .mc-checkbox-row input[type="checkbox"] {
                width: 18px;
                height: 18px;
            }

        .mc-btn {
            background: var(--primary);
            color: var(--primary-contrast);
            border: none;
            padding: 11px 20px;
            border-radius: 999px;
            font-size: 0.95rem;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            box-shadow: 0 10px 20px rgba(26,39,51,0.25);
            transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
        }

            .mc-btn:hover {
                background: var(--primary-light);
                transform: translateY(-1px);
                box-shadow: 0 14px 26px rgba(26,39,51,0.25);
            }

        .mc-btn-secondary {
            background: #e5edf8;
            color: var(--primary);
            border: 1px solid #c7d3e5;
            padding: 10px 16px;
            border-radius: 999px;
            font-size: 0.9rem;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: background 0.12s ease, border-color 0.12s ease;
        }

            .mc-btn-secondary:hover {
                background: #d7e2f3;
                border-color: #bccae3;
            }

        .mc-btn-icon {
            padding: 0 12px;
            border-radius: 999px;
            border: 1px solid #c7d3e5;
            background: #edf3ff;
            font-size: 1.3rem;
            cursor: pointer;
            color: var(--primary);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
        }

            .mc-btn-icon:hover {
                background: #ffe5ea;
                border-color: #f0b4c2;
                transform: translateY(-1px);
            }

        .mc-actions {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            margin-top: 18px;
            flex-wrap: wrap;
            align-items: center;
        }

        .mc-actions-inline {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 18px;
            flex-wrap: wrap;
            align-items: center;
        }

        .mc-hint {
            font-size: 0.85rem;
            color: #6b7280;
        }

        .mc-route-result {
            margin-top: 10px;
            font-size: 0.9rem;
            color: #111827;
            background: rgba(255,255,255,0.85);
            border-radius: 12px;
            padding: 8px 11px;
            border: 1px dashed #c7d3e5;
        }

        .mc-route-result-error {
            color: #b91c1c;
        }

        /* Tussenstop layout */
        .mc-stop-row {
            margin-bottom: 10px;
        }

        .mc-stop-line {
            display: flex;
            gap: 8px;
            align-items: flex-start;
        }

        .mc-stop-input-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        /* Slider styling (Opties) – eventueel later weer bruikbaar */
        .mc-range-wrapper {
            margin-top: 6px;
        }

        .mc-range-input {
            width: 100%;
            -webkit-appearance: none;
            appearance: none;
            height: 10px;
            border-radius: 999px;
            background: #d5e0f1;
            outline: none;
        }

            .mc-range-input::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background: var(--primary);
                cursor: pointer;
                border: 2px solid #ffffff;
                box-shadow: 0 0 0 3px rgba(26, 39, 51, 0.28);
            }

            .mc-range-input::-moz-range-thumb {
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background: var(--primary);
                cursor: pointer;
                border: 2px solid #ffffff;
                box-shadow: 0 0 0 3px rgba(26, 39, 51, 0.28);
            }

            .mc-range-input::-moz-range-track {
                height: 10px;
                border-radius: 999px;
                background: #d5e0f1;
            }

            .mc-range-input::-ms-track {
                height: 10px;
                border-radius: 999px;
                background: transparent;
                border-color: transparent;
                color: transparent;
            }

            .mc-range-input::-ms-fill-lower,
            .mc-range-input::-ms-fill-upper {
                background: #d5e0f1;
                border-radius: 999px;
            }

        /* Suggesties dropdown */
        .mc-suggestions {
            margin-top: 4px;
            border: 1px solid var(--border-soft);
            border-radius: 12px;
            background: #ffffff;
            box-shadow: 0 16px 30px rgba(15, 23, 42, 0.18);
            max-height: 240px;
            overflow-y: auto;
            font-size: 0.9rem;
            z-index: 5;
            width: 100%;
        }

        .mc-suggestion-item {
            display: block;
            width: 100%;
            text-align: left;
            padding: 9px 13px;
            border: none;
            background: transparent;
            cursor: pointer;
            color: #374151;
        }

            .mc-suggestion-item:hover {
                background: #ecf2ff;
            }

        .mc-suggestion-empty {
            padding: 9px 13px;
            color: #9ca3af;
        }

        /* INBOEDEL – Stap 2 */
        .mc-inventory-rooms {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 18px;
        }

        .mc-inventory-room-card {
            background: #f7f9fd;
            border-radius: 16px;
            border: 1px solid var(--border-soft);
            padding: 8px 12px 10px;
        }

        .mc-inventory-room-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }

            .mc-inventory-room-header h3 {
                margin: 0;
                font-size: 1rem;
                font-weight: 600;
                color: #1f2933;
            }

        .mc-room-toggle-icon {
            font-size: 1rem;
            color: #ffffff;
            min-width: 25px;
            width: 25px;
            height: 25px;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            background: var(--primary);
            box-shadow: 0 2px 6px rgba(26, 39, 51, 0.18);
            transition: transform 0.18s ease;
        }

        .mc-inventory-room-body {
            margin-top: 6px;
        }

        .mc-inventory-room-card.collapsed .mc-inventory-room-body {
            display: none;
        }

        .mc-inventory-room-card.collapsed .mc-room-toggle-icon {
            transform: rotate(-90deg);
        }

        .mc-inventory-items-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .mc-inventory-items-scroll {
            min-height: 0;
        }

        .mc-inventory-items-scroll-active {
            max-height: 430px;
            overflow-y: auto;
            padding-right: 6px;
            margin-bottom: 8px;
        }

        .mc-inventory-items-scroll-active::-webkit-scrollbar {
            width: 8px;
        }

        .mc-inventory-items-scroll-active::-webkit-scrollbar-thumb {
            background: #c7d3e5;
            border-radius: 999px;
        }

        .mc-inventory-item-row,
        .mc-inventory-box-row {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            align-items: center;
        }

        .mc-item-label-col,
        .mc-box-label-col {
            flex: 1;
            min-width: 0;
        }

        .mc-item-label {
            font-size: 0.9rem;
            font-weight: 500;
            color: #111827;
        }

        .mc-item-sub {
            font-size: 0.8rem;
            color: #6b7280;
        }

        .mc-item-qty-col {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .mc-qty-control {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: #e7eefb;
            border-radius: 999px;
            padding: 3px 5px;
        }

        .mc-btn-qty {
            border: none;
            background: #ffffff;
            width: 26px;
            height: 26px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.1rem;
            color: var(--primary);
            box-shadow: 0 2px 5px rgba(15,23,42,0.18);
            transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
        }

            .mc-btn-qty:hover {
                background: #fdfdfd;
                transform: translateY(-1px);
                box-shadow: 0 4px 10px rgba(15,23,42,0.22);
            }

        .mc-qty-input {
            width: 56px;
            border-radius: 999px;
            border: none;
            padding: 4px 6px;
            text-align: center;
            font-size: 0.9rem;
            background: transparent;
            color: #111827;
        }

            .mc-qty-input:focus {
                outline: none;
                background: #ffffff;
            }

        .mc-inventory-boxes-section {
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px dashed #d1d5e2;
        }

        .mc-section-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 8px;
            color: #111827;
        }

        .mc-inventory-boxes {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .mc-inventory-summary {
            margin-top: 14px;
            padding: 10px 12px;
            border-radius: 14px;
            background: #ffffff;
            border: 1px dashed #c7d3e5;
        }

        .mc-summary-row {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            font-size: 0.9rem;
            margin-bottom: 4px;
        }

            .mc-summary-row:last-child {
                margin-bottom: 0;
            }

            .mc-summary-row span:first-child {
                color: #6b7280;
            }

            .mc-summary-row strong {
                color: #111827;
            }

        /* STAP 3 – SERVICENIVEAU & OPTIES */
        .mc-service-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 10px;
        }

        .mc-service-card {
            border-radius: 16px;
            border: 1px solid var(--border-soft);
            padding: 12px 12px 12px;
            background: #f7f9fd;
            cursor: pointer;
            position: relative;
            transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, transform 0.08s ease;
        }

            .mc-service-card:hover {
                border-color: #9fb3d9;
                box-shadow: 0 8px 18px rgba(15,23,42,0.12);
                transform: translateY(-1px);
            }

            .mc-service-card.mc-selected {
                border-color: var(--primary);
                background: #ffffff;
                box-shadow: 0 10px 22px rgba(15,23,42,0.18);
            }

        .mc-service-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }

        .mc-service-title {
            font-size: 0.98rem;
            font-weight: 600;
            color: #111827;
        }

        .mc-service-badge {
            font-size: 0.75rem;
            padding: 3px 8px;
            border-radius: 999px;
            background: #e5edf8;
            color: #1f2933;
        }

        .mc-service-tagline {
            font-size: 0.85rem;
            color: #6b7280;
            margin-bottom: 6px;
        }

        .mc-service-bullets {
            margin: 0;
            padding-left: 18px;
            font-size: 0.83rem;
            color: #4b5563;
        }

            .mc-service-bullets li {
                margin-bottom: 2px;
            }

        .mc-service-radio {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .mc-extra-options {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .mc-option-card {
            border-radius: 14px;
            border: 1px solid var(--border-soft);
            padding: 10px 12px;
            background: #f7f9fd;
        }

        .mc-option-header {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            align-items: center;
            margin-bottom: 4px;
        }

        .mc-option-title {
            font-size: 0.95rem;
            font-weight: 600;
            color: #111827;
        }

        .mc-option-type-badge {
            font-size: 0.75rem;
            padding: 2px 7px;
            border-radius: 999px;
            background: #e5edf8;
            color: #1f2933;
        }

        .mc-option-description {
            font-size: 0.85rem;
            color: #6b7280;
            margin-bottom: 4px;
        }

        .mc-option-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .mc-option-price-hint {
            font-size: 0.8rem;
            color: #6b7280;
        }

        .mc-option-qty-wrapper {
            min-width: 120px;
        }

        .mc-option-qty-input {
            width: 100%;
            padding: 8px 10px;
            border-radius: 999px;
            border: 1px solid #c7d3e5;
            font-size: 0.85rem;
            background: #ffffff;
            text-align: center;
        }

        .mc-option-qty-input:disabled {
                background: #e5edf8;
                color: #9ca3af;
            }

        .mc-option-detail-field {
            width: 100%;
            margin-top: 10px;
            display: none;
        }

        .mc-option-detail-field.active {
            display: block;
        }

        .mc-option-detail-field .mc-form-label {
            display: block;
            margin-bottom: 6px;
        }

        .mc-option-detail-field .mc-form-textarea {
            min-height: 88px;
            background: #ffffff;
        }

        /* Access / verdiepingen */
        .mc-access-locations {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .mc-access-card {
            border-radius: 14px;
            border: 1px solid var(--border-soft);
            padding: 10px 12px;
            background: #f7f9fd;
        }

        .mc-access-header {
            margin-bottom: 6px;
        }

        .mc-access-title {
            font-size: 0.95rem;
            font-weight: 600;
            color: #111827;
        }

        .mc-access-sub {
            font-size: 0.8rem;
            color: #6b7280;
        }

        .mc-access-body {
            margin-top: 4px;
        }

        .mc-inline-checkboxes {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 4px;
        }

            .mc-inline-checkboxes .mc-checkbox-row {
                flex: 1 1 150px;
            }

        /* STAP 4 – Samenvatting & contact */
        .mc-summary-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
            gap: 14px;
            margin-top: 6px;
        }

        .mc-summary-card {
            border-radius: 14px;
            border: 1px solid var(--border-soft);
            padding: 10px 12px;
            background: #f7f9fd;
        }

        .mc-summary-card-title {
            font-size: 0.95rem;
            font-weight: 600;
            color: #111827;
            margin-bottom: 4px;
        }

        .mc-summary-list {
            list-style: none;
            padding-left: 0;
            margin: 4px 0 0;
            font-size: 0.85rem;
            color: #4b5563;
        }

            .mc-summary-list li {
                margin-bottom: 2px;
            }

        .mc-summary-price-total {
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 4px;
        }

        .mc-summary-price-tagline {
            font-size: 0.8rem;
            color: #6b7280;
            margin-bottom: 6px;
        }

        .mc-summary-price-breakdown {
            margin-top: 12px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .mc-summary-break-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
        }

        .mc-summary-break-label {
            font-weight: 600;
            font-size: 0.95rem;
            line-height: 1.35;
            color: #111827;
        }

        .mc-summary-break-detail {
            margin-top: 4px;
            font-size: 0.85rem;
            line-height: 1.35;
            color: #6b7280;
        }

        .mc-summary-break-amount {
            font-weight: 700;
            white-space: nowrap;
            text-align: right;
            line-height: 1.35;
            color: #111827;
        }

        .mc-summary-pill {
            display: inline-flex;
            align-items: center;
            padding: 3px 8px;
            border-radius: 999px;
            border: 1px solid #c7d3e5;
            font-size: 0.8rem;
            color: #374151;
            background: #e9f0ff;
        }

        .mc-contact-form {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 4px;
        }

        .mc-submit-message {
            font-size: 0.85rem;
            margin-top: 6px;
        }

        .mc-submit-message-success {
            color: #15803d;
        }

        .mc-submit-message-error {
            color: #b91c1c;
        }

        @media (max-width: 768px) {
            .mc-summary-grid {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        @media (max-width: 640px) {
            #moving-calculator {
                padding: 16px 12px 28px;
            }

            .mc-card {
                padding: 16px 14px 16px;
            }

            .mc-actions,
            .mc-actions-inline {
                flex-direction: column-reverse;
                align-items: stretch;
            }

            .mc-btn,
            .mc-btn-secondary {
                width: 100%;
                justify-content: center;
            }
        }