/* ============================================
   Quote Builder Wizard — Mobile first
   Primary: #5f9eaf | Accent: #f29325 | Dark: #112a31
   ============================================ */

/* --- Quote Builder Variables --- */
.quote-builder {
    --qb-primary: #5f9eaf;
    --qb-primary-hover: #4d8a9a;
    --qb-primary-light: rgba(95, 158, 175, 0.12);
    --qb-accent: #f29325;
    --qb-accent-hover: #e08520;
    --qb-accent-light: rgba(242, 147, 37, 0.12);
    --qb-dark: #112a31;
    --qb-text-muted: #5a7a82;
    --qb-border: #d1dfe3;
    --qb-error: #dc2626;
    --qb-error-bg: rgba(220, 38, 38, 0.08);
    --qb-radius: 8px;
    --qb-radius-sm: 6px;
    --qb-transition: 0.25s ease;
}

/* --- Layout: Mobile first --- */
.quote-builder {
    max-width: 100%;
    margin: 0;
    padding: var(--space-4, 1rem);
    min-height: 100vh;
    background: var(--c-bg, #f5f7f8);
}

/* --- Card layout --- */
.quote-builder .wizard {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-6, 1.5rem);
    background: var(--c-bg-card, #ffffff);
    border-radius: var(--qb-radius);
    box-shadow: 0 2px 8px rgba(17, 42, 49, 0.06);
}

.quote-builder .wizard > h1 {
    font-size: var(--text-2xl, 1.5rem);
    font-weight: var(--font-semibold, 600);
    color: var(--qb-dark);
    margin-bottom: var(--space-2, 0.5rem);
}

.quote-builder .wizard > p.text-muted {
    font-size: var(--text-base, 1rem);
    color: var(--qb-text-muted);
    margin-bottom: var(--space-6, 1.5rem);
}

/* --- Alerts: consistent spacing, geen layout shift --- */
.quote-builder #wizardAlert {
    padding: var(--space-4, 1rem);
    margin-bottom: var(--space-4, 1rem);
    border-radius: var(--qb-radius);
    line-height: var(--leading-normal, 1.5);
}

/* --- Progress bar --- */
.quote-builder .wizard-progress {
    height: 8px;
    background: var(--qb-border);
    border-radius: 999px;
    margin-bottom: var(--space-8, 2rem);
    overflow: hidden;
}

.quote-builder .wizard-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--qb-primary) 0%, var(--qb-accent) 100%);
    border-radius: 999px;
    width: 0%;
    transition: width var(--qb-transition) cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Steps --- */
.quote-builder .wizard-step {
    display: none;
}

.quote-builder .wizard-step.active {
    display: block;
    animation: qb-fadeIn 0.3s ease;
}

@keyframes qb-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.quote-builder .wizard-step h2 {
    font-size: var(--text-xl, 1.25rem);
    font-weight: var(--font-semibold, 600);
    color: var(--qb-dark);
    margin-bottom: var(--space-5, 1.25rem);
}

/* --- Form groups: consistent spacing --- */
.quote-builder .form-group {
    margin-bottom: var(--space-5, 1.25rem);
}

.quote-builder .form-group:last-child {
    margin-bottom: 0;
}

.quote-builder .form-group label {
    display: block;
    font-weight: var(--font-medium, 500);
    color: var(--qb-dark);
    margin-bottom: var(--space-2, 0.5rem);
}

.quote-builder .form-group input,
.quote-builder .form-group select,
.quote-builder .form-group textarea {
    width: 100%;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    border: 1px solid var(--qb-border);
    border-radius: var(--qb-radius);
    background: #fff;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color var(--qb-transition), box-shadow var(--qb-transition);
}

.quote-builder .form-group input:focus,
.quote-builder .form-group select:focus,
.quote-builder .form-group textarea:focus {
    outline: none;
    border-color: var(--qb-primary);
    box-shadow: 0 0 0 3px var(--qb-primary-light);
}

.quote-builder .form-group input[aria-invalid="true"],
.quote-builder .form-group select[aria-invalid="true"],
.quote-builder .form-group textarea[aria-invalid="true"] {
    border-color: var(--qb-error);
}

.quote-builder .form-group .hint {
    font-size: var(--text-sm, 0.875rem);
    color: var(--qb-text-muted);
    margin-top: var(--space-1, 0.25rem);
}

.quote-builder .form-group .form-error {
    font-size: var(--text-sm, 0.875rem);
    color: var(--qb-error);
    margin-top: var(--space-1, 0.25rem);
}

/* --- Photo upload --- */
.quote-builder .photo-upload {
    border: 2px dashed var(--qb-border);
    border-radius: var(--qb-radius);
    padding: var(--space-6, 1.5rem);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--qb-transition), background var(--qb-transition);
}

.quote-builder .photo-upload:hover {
    border-color: var(--qb-primary);
    background: var(--qb-primary-light);
}

.quote-builder .photo-upload input {
    display: none;
}

.quote-builder .photo-preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 0.75rem);
    margin-top: var(--space-4, 1rem);
}

.quote-builder .photo-preview-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: var(--qb-radius-sm);
    overflow: hidden;
    background: var(--c-bg, #f5f7f8);
    flex-shrink: 0;
}

.quote-builder .photo-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quote-builder .photo-preview-item .remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--qb-transition);
}

.quote-builder .photo-preview-item .remove:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* --- Summary block --- */
.quote-builder .summary-block {
    background: var(--c-bg, #f5f7f8);
    padding: var(--space-5, 1.25rem);
    border-radius: var(--qb-radius);
    margin-bottom: var(--space-5, 1.25rem);
}

.quote-builder .summary-block dt {
    font-weight: var(--font-semibold, 600);
    margin-bottom: var(--space-1, 0.25rem);
}

.quote-builder .summary-block dd {
    margin: 0 0 var(--space-3, 0.75rem);
    color: var(--qb-text-muted);
}

.quote-builder .summary-block dd:last-child {
    margin-bottom: 0;
}

/* --- Status & alerts --- */
.quote-builder .wizard-status {
    padding: var(--space-4, 1rem);
    margin-bottom: var(--space-4, 1rem);
    background: var(--qb-primary-light);
    color: var(--qb-dark);
    border-radius: var(--qb-radius);
    font-size: var(--text-sm, 0.875rem);
}

.quote-builder .wizard-alert {
    padding: var(--space-4, 1rem);
    margin-bottom: var(--space-4, 1rem);
    border-radius: var(--qb-radius);
    font-size: var(--text-sm, 0.875rem);
}

.quote-builder .wizard-alert.error {
    background: var(--qb-error-bg);
    color: var(--qb-error);
}

.quote-builder .wizard-alert.success {
    background: var(--qb-primary-light);
    color: var(--qb-dark);
}

/* --- Radio group --- */
.quote-builder .radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4, 1rem);
}

.quote-builder .radio-group label {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    cursor: pointer;
}

/* --- Navigation: grote mobiele knoppen --- */
.quote-builder .wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-8, 2rem);
    gap: var(--space-4, 1rem);
}

.quote-builder .wizard-nav .btn {
    min-width: 120px;
    min-height: 48px;
    padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
    font-size: 1rem;
    font-weight: var(--font-medium, 500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.quote-builder .wizard-nav .btn-primary {
    background: var(--qb-primary);
}

.quote-builder .wizard-nav .btn-primary:hover:not(:disabled) {
    background: var(--qb-primary-hover);
}

.quote-builder .wizard-nav .btn-accent {
    background: var(--qb-accent);
}

.quote-builder .wizard-nav .btn-accent:hover:not(:disabled) {
    background: var(--qb-accent-hover);
}

/* --- Tablet and up --- */
@media (min-width: 480px) {
    .quote-builder {
        padding: var(--space-6, 1.5rem);
    }

    .quote-builder .wizard {
        padding: var(--space-8, 2rem);
    }

    .quote-builder .wizard-nav .btn {
        min-width: 140px;
        min-height: 48px;
    }
}

@media (min-width: 768px) {
    .quote-builder .wizard {
        padding: var(--space-10, 2.5rem);
    }

    .quote-builder .photo-preview-item {
        width: 100px;
        height: 100px;
    }
}

/* --- Offerte Wizard (4 stappen) --- */
.offerte-wizard {
    min-height: 100vh;
    padding: var(--space-6, 1.5rem);
    background: var(--c-bg-light, #f8fafb);
}

.offerte-wizard-inner {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--space-8, 2rem);
    background: var(--c-bg-card, #fff);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow, 0 4px 12px rgba(17, 42, 49, 0.08));
}

.offerte-wizard-header {
    margin-bottom: var(--space-6, 1.5rem);
}

.offerte-wizard-header h1 {
    font-size: var(--text-2xl, 1.5rem);
    font-weight: var(--font-bold, 700);
    color: var(--c-dark, #112a31);
    margin-bottom: var(--space-2, 0.5rem);
}

.offerte-wizard-header p {
    font-size: var(--text-base, 1rem);
    color: var(--c-text-muted, #5a7a82);
}

.offerte-alert {
    display: none;
    padding: var(--space-4, 1rem);
    margin-bottom: var(--space-4, 1rem);
    border-radius: var(--radius, 8px);
    font-size: var(--text-sm, 0.875rem);
}

.offerte-alert.error {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
}

.offerte-alert.success {
    background: var(--c-primary-light, rgba(95, 158, 175, 0.12));
    color: var(--c-dark, #112a31);
}

.offerte-progress {
    height: 8px;
    background: var(--c-border, #d1dfe3);
    border-radius: 999px;
    margin-bottom: var(--space-6, 1.5rem);
    overflow: hidden;
}

.offerte-progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--c-primary, #5f9eaf) 0%, var(--c-accent, #f29325) 100%);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.offerte-price {
    display: block;
    padding: var(--space-4, 1rem);
    margin-bottom: var(--space-6, 1.5rem);
    background: var(--c-primary-light, rgba(95, 158, 175, 0.12));
    color: var(--c-dark, #112a31);
    border-radius: var(--radius, 8px);
    font-size: var(--text-lg, 1.125rem);
    font-weight: var(--font-semibold, 600);
}

.offerte-step {
    display: none;
}

.offerte-step.active {
    display: block;
    animation: qb-fadeIn 0.3s ease;
}

.offerte-step h2 {
    font-size: var(--text-xl, 1.25rem);
    font-weight: var(--font-semibold, 600);
    color: var(--c-dark, #112a31);
    margin-bottom: var(--space-5, 1.25rem);
}

.offerte-wizard .form-group input,
.offerte-wizard .form-group select,
.offerte-wizard .form-group textarea {
    width: 100%;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    border: 1px solid var(--c-border, #d1dfe3);
    border-radius: var(--radius, 8px);
    background: #fff;
    font-size: 1rem;
    line-height: 1.5;
    min-height: 48px;
}

.offerte-wizard .form-group textarea {
    min-height: 120px;
}

.offerte-wizard .form-group input:focus,
.offerte-wizard .form-group select:focus,
.offerte-wizard .form-group textarea:focus {
    outline: none;
    border-color: var(--c-primary, #5f9eaf);
    box-shadow: 0 0 0 3px rgba(95, 158, 175, 0.15);
}

.offerte-wizard .form-group input[aria-invalid="true"],
.offerte-wizard .form-group select[aria-invalid="true"],
.offerte-wizard .form-group textarea[aria-invalid="true"] {
    border-color: #dc2626;
}

.offerte-summary {
    background: var(--c-bg-light, #f8fafb);
    padding: var(--space-5, 1.25rem);
    border-radius: var(--radius, 8px);
    margin-bottom: var(--space-5, 1.25rem);
}

.offerte-summary dt {
    font-weight: var(--font-semibold, 600);
    margin-top: var(--space-3, 0.75rem);
}

.offerte-summary dt:first-child { margin-top: 0; }

.offerte-summary dd {
    margin: var(--space-1, 0.25rem) 0 0;
    color: var(--c-text-muted, #5a7a82);
}

.offerte-consent {
    font-size: var(--text-sm, 0.875rem);
    color: var(--c-text-muted, #5a7a82);
    margin-bottom: var(--space-6, 1.5rem);
}

.offerte-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4, 1rem);
    margin-top: var(--space-6, 1.5rem);
    padding-top: var(--space-4, 1rem);
    border-top: 1px solid var(--c-border, #d1dfe3);
}

.offerte-nav-btn {
    min-width: 120px;
    min-height: 48px;
    padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
    font-size: var(--text-base, 1rem);
    font-weight: var(--font-medium, 500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 480px) {
    .offerte-wizard {
        padding: var(--space-8, 2rem);
    }

    .offerte-wizard-inner {
        padding: var(--space-10, 2.5rem);
    }

    .offerte-nav-btn {
        min-width: 140px;
    }
}