*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.fixed{position:fixed}.sticky{position:sticky}.left-0{left:0px}.right-0{right:0px}.top-0{top:0px}.top-\[56px\]{top:56px}.z-40{z-index:40}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.my-4{margin-top:1rem;margin-bottom:1rem}.mb-2{margin-bottom:0.5rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.ml-1{margin-left:0.25rem}.mt-1{margin-top:0.25rem}.mt-2{margin-top:0.5rem}.mt-3{margin-top:0.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-\[104px\]{margin-top:104px}.mb-1{margin-bottom:0.25rem}.mb-3{margin-bottom:0.75rem}.mb-6{margin-bottom:1.5rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-1{height:0.25rem}.h-11{height:2.75rem}.h-3{height:0.75rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-8{height:2rem}.h-\[3px\]{height:3px}.h-\[48px\]{height:48px}.h-\[56px\]{height:56px}.h-full{height:100%}.h-px{height:1px}.h-10{height:2.5rem}.h-16{height:4rem}.max-h-\[280px\]{max-height:280px}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-3{width:0.75rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.w-full{width:100%}.w-16{width:4rem}.min-w-0{min-width:0px}.max-w-\[1600px\]{max-width:1600px}.max-w-sm{max-width:24rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:0.25rem}.gap-1\.5{gap:0.375rem}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.space-y-2 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-5 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}.space-y-4 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.scroll-smooth{scroll-behavior:smooth}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-xl{border-radius:0.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-slate-100{--tw-border-opacity:1;border-color:rgb(241 245 249 / var(--tw-border-opacity, 1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240 / var(--tw-border-opacity, 1))}.border-brand\/20{border-color:rgb(0 235 236 / 0.2)}.border-\[\#00EBEC\]{--tw-border-opacity:1;border-color:rgb(0 235 236 / var(--tw-border-opacity, 1))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.bg-black\/30{background-color:rgb(0 0 0 / 0.3)}.bg-brand{--tw-bg-opacity:1;background-color:rgb(0 235 236 / var(--tw-bg-opacity, 1))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240 / var(--tw-bg-opacity, 1))}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\/95{background-color:rgb(255 255 255 / 0.95)}.bg-brand\/5{background-color:rgb(0 235 236 / 0.05)}.bg-\[rgba\(0\2c 235\2c 236\2c 0\.04\)\]{background-color:rgba(0,235,236,0.04)}.bg-brand\/10{background-color:rgb(0 235 236 / 0.1)}.bg-brand\/90{background-color:rgb(0 235 236 / 0.9)}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244 / var(--tw-bg-opacity, 1))}.object-contain{object-fit:contain}.p-5{padding:1.25rem}.p-3{padding:0.75rem}.p-4{padding:1rem}.px-2\.5{padding-left:0.625rem;padding-right:0.625rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:0.25rem;padding-bottom:0.25rem}.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.pb-4{padding-bottom:1rem}.pb-8{padding-bottom:2rem}.pt-3{padding-top:0.75rem}.pt-6{padding-top:1.5rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-body{font-family:Open Sans, sans-serif}.font-heading{font-family:Poppins, sans-serif}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.text-\[32px\]{font-size:32px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-\[12px\]{font-size:12px}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-none{line-height:1}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[2px\]{letter-spacing:2px}.tracking-tight{letter-spacing:-0.025em}.tracking-wider{letter-spacing:0.05em}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.text-brand{--tw-text-opacity:1;color:rgb(0 235 236 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-white\/90{color:rgb(255 255 255 / 0.9)}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94 / var(--tw-text-opacity, 1))}.text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6 / var(--tw-text-opacity, 1))}.no-underline{-webkit-text-decoration-line:none;text-decoration-line:none}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.accent-\[\#00EBEC\]{accent-color:#00EBEC}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-200{transition-duration:200ms}.duration-500{transition-duration:500ms}.ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\:border-slate-300:hover{--tw-border-opacity:1;border-color:rgb(203 213 225 / var(--tw-border-opacity, 1))}.hover\:border-slate-200:hover{--tw-border-opacity:1;border-color:rgb(226 232 240 / var(--tw-border-opacity, 1))}.hover\:bg-slate-200:hover{--tw-bg-opacity:1;background-color:rgb(226 232 240 / var(--tw-bg-opacity, 1))}.hover\:bg-slate-800:hover{--tw-bg-opacity:1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.hover\:bg-brand\/90:hover{background-color:rgb(0 235 236 / 0.9)}.hover\:text-slate-700:hover{--tw-text-opacity:1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}.hover\:text-slate-800:hover{--tw-text-opacity:1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.hover\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-30:disabled{opacity:0.3}@media (min-width: 640px){.sm\:block{display:block}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}}

/* ============================================ */
/* C-MODULAR Configurator Styles                */
/* WordPress-proof with .cmod-wrap scoping      */
/* ============================================ */


/* ============================================
   SECTION 1: WordPress Theme Overrides
   Breaks out of Twenty Twenty-One + Elementor
   to use full viewport for the configurator
   ============================================ */

/* --- Break .cmod-wrap to full viewport width --- */
.cmod-wrap {
    max-width: 100vw !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    position: relative !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Override Twenty Twenty-One max-width on children */
.entry-content .cmod-wrap,
.entry-content > .cmod-wrap {
    max-width: none !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

/* Hide WordPress page title when configurator is present */
.cmod-configurator-page .entry-title,
.cmod-configurator-page .entry-header,
.cmod-configurator-page .page-title,
body:has(.cmod-wrap) .entry-title,
body:has(.cmod-wrap) .entry-header,
body:has(.cmod-wrap) .page-title {
    display: none !important;
}

/* Reset entry-content constraints when our configurator is present */
.cmod-configurator-page .entry-content,
body:has(.cmod-wrap) .entry-content {
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Also reset parent article constraints */
.cmod-configurator-page article .entry-content > *,
body:has(.cmod-wrap) article .entry-content > * {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Hide WP site header/footer -- configurator has its own */
.cmod-configurator-page .site-header,
.cmod-configurator-page .site-footer,
.cmod-configurator-page #masthead,
.cmod-configurator-page #colophon,
.cmod-configurator-page .ehf-header,
.cmod-configurator-page .ehf-footer,
.cmod-configurator-page header.wp-block-template-part,
.cmod-configurator-page footer.wp-block-template-part,
.cmod-configurator-page .elementor-location-header,
.cmod-configurator-page .elementor-location-footer,
body:has(.cmod-wrap) .site-header,
body:has(.cmod-wrap) .site-footer,
body:has(.cmod-wrap) #masthead,
body:has(.cmod-wrap) #colophon,
body:has(.cmod-wrap) .ehf-header,
body:has(.cmod-wrap) .ehf-footer,
body:has(.cmod-wrap) header.wp-block-template-part,
body:has(.cmod-wrap) footer.wp-block-template-part,
body:has(.cmod-wrap) .elementor-location-header,
body:has(.cmod-wrap) .elementor-location-footer {
    display: none !important;
}

/* Reset body/site wrapper padding */
.cmod-configurator-page #page,
.cmod-configurator-page .site {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.cmod-configurator-page #content,
.cmod-configurator-page .site-content {
    padding: 0 !important;
    margin: 0 !important;
}

.cmod-configurator-page .site-main {
    padding: 0 !important;
}

/* Elementor container overrides */
.cmod-configurator-page .elementor-section-wrap,
.cmod-configurator-page .elementor-widget-wrap {
    padding: 0 !important;
}

/* Background color */
.cmod-configurator-page {
    background: #f8fafc !important;
}

/* Prevent body scroll on DESKTOP when configurator page is active (mobile needs scroll) */
@media (min-width: 1025px) {
    body.cmod-configurator-page,
    body:has(.cmod-wrap) {
        overflow: hidden !important;
    }
}

/* Prevent zoom on mobile (pan-x pan-y allows scroll but blocks pinch-zoom) */
.cmod-configurator-page { touch-action: pan-x pan-y; }
.cmod-configurator-page * { touch-action: pan-x pan-y; }
.cmod-configurator-page input[type="number"],
.cmod-configurator-page input[type="text"],
.cmod-configurator-page input[type="email"],
.cmod-configurator-page input[type="tel"],
.cmod-configurator-page textarea { touch-action: auto; }


/* ============================================
   SECTION 2: Configurator Custom Styles
   All selectors scoped under .cmod-wrap
   for WordPress specificity protection
   ============================================ */

/* --- Global button reset inside configurator --- */
.cmod-wrap button,
.cmod-wrap [type="button"],
.cmod-wrap [type="reset"],
.cmod-wrap [type="submit"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important;
}

/* --- Header & Progress bar: full viewport width, high z-index --- */
.cmod-wrap .cmod-header {
    z-index: 9999 !important;
    position: fixed !important;
    top: 0 !important;
    width: 100vw !important;
    left: 0 !important;
}

.cmod-wrap .cmod-progress-bar,
.cmod-wrap #progressSteps {
    z-index: 9999 !important;
    width: 100vw !important;
}

/* --- Scrollbar --- */
.cmod-wrap .custom-scrollbar::-webkit-scrollbar { width: 4px; }
.cmod-wrap .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.cmod-wrap .custom-scrollbar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
.cmod-wrap .no-scrollbar::-webkit-scrollbar { display: none; }
.cmod-wrap .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* --- Layout --- */
.cmod-wrap .configurator-grid {
    display: grid !important;
    grid-template-columns: 380px 1fr 300px !important;
    min-height: calc(100vh - 104px) !important;
}

.cmod-wrap .sticky-panel {
    height: calc(100vh - 104px) !important;
    position: sticky !important;
    top: 104px !important;
}

.cmod-wrap .panel-options {
    display: flex !important;
    flex-direction: column !important;
}

/* --- Preview Panel (Full-Width, Fixed) --- */
.cmod-wrap .panel-preview {
    position: sticky !important;
    top: 104px !important;
    height: calc(100vh - 104px) !important;
    overflow: hidden !important;
    background: #0f172a !important;
    z-index: 1 !important;
}

.cmod-wrap .preview-compositor {
    position: absolute !important;
    inset: 0 !important;
    background: #0f172a !important;
    overflow: hidden !important;
}

/* Exterior zoom: zoom into the building, origin on the aanbouw */
.cmod-wrap .preview-compositor.view-ext > .preview-layer,
.cmod-wrap .preview-compositor.view-ext > .preview-layers {
    transform: scale(1.4) !important;
    transform-origin: center 53% !important;
}

/* Interior zoom: moderate zoom to keep ceiling (daklicht) visible */
.cmod-wrap .preview-compositor.view-int > .preview-layer,
.cmod-wrap .preview-compositor.view-int > .preview-layers {
    transform: scale(1.3) !important;
    transform-origin: center 44% !important;
}

.cmod-wrap .preview-layer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1) !important;
}

.cmod-wrap .preview-layers {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
}

.cmod-wrap .preview-layers img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1) !important;
}

/* Overstek overlay: shift up to close gap where gevel bricks show through */
.cmod-wrap .preview-layers img[data-step="overstek"] {
    transform: translateY(-8px);
}

/* --- View Toggle & Trust Overlays --- */
.cmod-wrap .preview-toggle {
    position: absolute !important;
    bottom: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 4px !important;
    z-index: 10 !important;
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 100px !important;
    padding: 4px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
    border: 1px solid rgba(255,255,255,0.6) !important;
}

.cmod-wrap .preview-trust {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    z-index: 10 !important;
}

/* --- View Toggle Pill --- */
.cmod-wrap .preview-view-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    border: none !important;
    border-radius: 100px !important;
    background: transparent !important;
    color: #64748b !important;
    cursor: pointer !important;
    font-family: 'Poppins', sans-serif !important;
    transition: all 0.25s !important;
    gap: 4px !important;
    white-space: nowrap !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    text-decoration: none !important;
}
.cmod-wrap .preview-view-btn:hover {
    background: rgba(0,0,0,0.04) !important;
    color: #334155 !important;
}
.cmod-wrap .preview-view-btn.active {
    background: #0f172a !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* --- Progress Steps --- */
.cmod-wrap #progressSteps {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.cmod-wrap .progress-step {
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #cbd5e1 !important;
    cursor: pointer !important;
    transition: color 0.2s, font-weight 0.2s !important;
    white-space: nowrap !important;
    padding: 0 2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
}

.cmod-wrap .progress-step::before {
    content: '' !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #e2e8f0 !important;
    flex-shrink: 0 !important;
    transition: all 0.25s !important;
}

.cmod-wrap .progress-step.active { color: #0f172a !important; font-weight: 600 !important; }
.cmod-wrap .progress-step.active::before { background: #00EBEC !important; box-shadow: 0 0 0 3px rgba(0,235,236,0.2) !important; }
.cmod-wrap .progress-step.completed { color: #64748b !important; }
.cmod-wrap .progress-step.completed::before { background: #22c55e !important; }
.cmod-wrap .progress-step:hover { color: #475569 !important; }

/* --- Progress Dividers (section labels) --- */
.cmod-wrap .progress-divider {
    font-family: 'Poppins', sans-serif !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    padding: 0 6px !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    position: relative !important;
    color: #94a3b8 !important;
    flex-shrink: 0 !important;
}
.cmod-wrap .progress-divider::before {
    content: '' !important;
    width: 1px !important;
    height: 16px !important;
    background: #e2e8f0 !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
}
.cmod-wrap .progress-divider[data-section="ext"] { color: #00b8b9 !important; }
.cmod-wrap .progress-divider[data-section="int"] { color: #6366f1 !important; }
.cmod-wrap .progress-divider[data-section="ext"]::before { background: rgba(0,235,236,0.35) !important; }
.cmod-wrap .progress-divider[data-section="int"]::before { background: rgba(99,102,241,0.35) !important; }

/* Overlay layers inside .preview-layers all use default object-position (center center)
   to ensure pixel-perfect alignment with the base image.
   Do NOT add per-step object-position overrides -- they cause misalignment
   because object-fit:cover crops differently per object-position. */

/* --- Option Cards --- */
.cmod-wrap .opt-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border: 2px solid #f1f5f9 !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
    background: white !important;
    margin-bottom: 6px !important;
    opacity: 0;
    animation: slideUp 0.3s cubic-bezier(0.4,0,0.2,1) forwards;
    text-decoration: none !important;
}

.cmod-wrap .opt-card:nth-child(1) { animation-delay: 0.02s; }
.cmod-wrap .opt-card:nth-child(2) { animation-delay: 0.05s; }
.cmod-wrap .opt-card:nth-child(3) { animation-delay: 0.08s; }
.cmod-wrap .opt-card:nth-child(4) { animation-delay: 0.11s; }
.cmod-wrap .opt-card:nth-child(5) { animation-delay: 0.14s; }
.cmod-wrap .opt-card:nth-child(6) { animation-delay: 0.17s; }
.cmod-wrap .opt-card:nth-child(7) { animation-delay: 0.2s; }
.cmod-wrap .opt-card:nth-child(8) { animation-delay: 0.23s; }

.cmod-wrap .opt-card:hover { border-color: #e2e8f0 !important; background: #f8fafc !important; }
.cmod-wrap .opt-card.selected { border-color: #00EBEC !important; background: rgba(0,235,236,0.04) !important; }

/* Radio */
.cmod-wrap .opt-radio {
    width: 18px !important; height: 18px !important;
    border-radius: 50% !important;
    border: 2px solid #cbd5e1 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    transition: all 0.2s !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
.cmod-wrap .opt-radio::after {
    content: '' !important;
    position: absolute !important;
    inset: 3px !important;
    background: white !important;
    border-radius: 50% !important;
    transform: scale(0) !important;
    transition: transform 0.2s !important;
}
.cmod-wrap .opt-card.selected .opt-radio {
    border-color: #00EBEC !important;
    background: #00EBEC !important;
}
.cmod-wrap .opt-card.selected .opt-radio::after {
    transform: scale(1) !important;
}

/* Checkbox */
.cmod-wrap .opt-check {
    width: 18px !important; height: 18px !important;
    border-radius: 5px !important;
    border: 2px solid #cbd5e1 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
.cmod-wrap .opt-card.selected .opt-check {
    border-color: #00EBEC !important;
    background: #00EBEC !important;
}
.cmod-wrap .opt-check svg { opacity: 0; transition: opacity 0.15s; }
.cmod-wrap .opt-card.selected .opt-check svg { opacity: 1 !important; }

/* Icon container */
.cmod-wrap .opt-icon {
    width: 40px !important; height: 40px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    transition: all 0.2s !important;
}
.cmod-wrap .opt-card.selected .opt-icon {
    background: rgba(0,235,236,0.08) !important;
    color: #00EBEC !important;
}

/* --- Swatch Grid --- */
.cmod-wrap .swatch-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;
    gap: 8px !important;
}

.cmod-wrap .swatch-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 6px !important;
    border: 2px solid #f1f5f9 !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    background: white !important;
    text-align: center !important;
    opacity: 0;
    animation: slideUp 0.25s ease forwards;
}
.cmod-wrap .swatch-item:nth-child(1) { animation-delay: 0.02s; }
.cmod-wrap .swatch-item:nth-child(2) { animation-delay: 0.04s; }
.cmod-wrap .swatch-item:nth-child(3) { animation-delay: 0.06s; }
.cmod-wrap .swatch-item:nth-child(4) { animation-delay: 0.08s; }
.cmod-wrap .swatch-item:nth-child(5) { animation-delay: 0.1s; }
.cmod-wrap .swatch-item:nth-child(6) { animation-delay: 0.12s; }
.cmod-wrap .swatch-item:nth-child(7) { animation-delay: 0.14s; }
.cmod-wrap .swatch-item:nth-child(8) { animation-delay: 0.16s; }
.cmod-wrap .swatch-item:nth-child(9) { animation-delay: 0.18s; }

.cmod-wrap .swatch-item:hover { border-color: #e2e8f0 !important; transform: translateY(-1px); }
.cmod-wrap .swatch-item.selected { border-color: #00EBEC !important; background: rgba(0,235,236,0.04) !important; }

.cmod-wrap .swatch-dot {
    width: 36px !important; height: 36px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    transition: box-shadow 0.2s !important;
}
.cmod-wrap .swatch-item.selected .swatch-dot { box-shadow: 0 0 0 3px rgba(0,235,236,0.2) !important; }

.cmod-wrap .swatch-label {
    font-size: 10px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    line-height: 1.2 !important;
}

/* --- Visual Grid --- */
.cmod-wrap .visual-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
}

.cmod-wrap .visual-item {
    border: 2px solid #f1f5f9 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    background: white !important;
    position: relative !important;
    opacity: 0;
    animation: slideUp 0.3s ease forwards;
}
.cmod-wrap .visual-item:nth-child(1) { animation-delay: 0.02s; }
.cmod-wrap .visual-item:nth-child(2) { animation-delay: 0.06s; }
.cmod-wrap .visual-item:nth-child(3) { animation-delay: 0.1s; }
.cmod-wrap .visual-item:nth-child(4) { animation-delay: 0.14s; }
.cmod-wrap .visual-item:nth-child(5) { animation-delay: 0.18s; }
.cmod-wrap .visual-item:nth-child(6) { animation-delay: 0.22s; }

.cmod-wrap .visual-item:hover { border-color: #e2e8f0 !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.cmod-wrap .visual-item.selected { border-color: #00EBEC !important; }
.cmod-wrap .visual-item.selected::after {
    content: '';
    position: absolute;
    top: 6px; right: 6px;
    width: 22px; height: 22px;
    background: #00EBEC !important;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
}

.cmod-wrap .visual-item-img {
    width: 100% !important;
    aspect-ratio: 4/3 !important;
    background: #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94a3b8 !important;
    overflow: hidden !important;
}

.cmod-wrap .visual-item-body {
    padding: 8px 10px !important;
}
.cmod-wrap .visual-item.selected .visual-item-body { background: rgba(0,235,236,0.04) !important; }

/* --- Dimension Input --- */
.cmod-wrap .dim-input-group {
    background: white !important;
    border: 2px solid #f1f5f9 !important;
    border-radius: 14px !important;
    padding: 20px !important;
    transition: border-color 0.2s !important;
}
.cmod-wrap .dim-input-group:focus-within { border-color: #00EBEC !important; }

.cmod-wrap .dim-fields-row {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-end !important;
}
.cmod-wrap .dim-fields-row .dim-field {
    flex: 1 !important;
    min-width: 0 !important;
}

.cmod-wrap .dim-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.cmod-wrap .dim-label {
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
}

.cmod-wrap .dim-input-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.cmod-wrap .dim-unit {
    position: absolute !important;
    right: 10px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
}

.cmod-wrap .dim-input {
    width: 100% !important;
    height: 44px !important;
    padding: 0 36px 0 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    outline: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    -moz-appearance: textfield !important;
    background: white !important;
}
.cmod-wrap .dim-input::-webkit-inner-spin-button,
.cmod-wrap .dim-input::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
.cmod-wrap .dim-input:focus { border-color: #00EBEC !important; box-shadow: 0 0 0 3px rgba(0,235,236,0.12) !important; }
.cmod-wrap .dim-input::placeholder { color: #cbd5e1 !important; font-weight: 400 !important; }

.cmod-wrap .dim-result {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    background: #f8fafc !important;
    border-radius: 10px !important;
    margin-top: 4px !important;
}

/* Preset buttons */
.cmod-wrap .dim-preset {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: white !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
.cmod-wrap .dim-preset:hover { border-color: #cbd5e1 !important; background: #f8fafc !important; }
.cmod-wrap .dim-preset.selected { border-color: #00EBEC !important; background: rgba(0,235,236,0.04) !important; color: #0f172a !important; font-weight: 600 !important; }

/* --- CTA Button --- */
.cmod-wrap .btn-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 13px 24px !important;
    border: none !important;
    border-radius: 100px !important;
    background: #0f172a !important;
    color: white !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: all 0.25s !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
}
.cmod-wrap .btn-cta:hover {
    background: #00EBEC !important;
    color: #0f172a !important;
}

/* --- Mobile Bottom Bar --- */
.cmod-wrap .mobile-bar {
    display: none;
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    height: 72px !important;
    background: white !important;
    border-top: 1px solid #f1f5f9 !important;
    z-index: 50 !important;
    padding: 10px 16px !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.04) !important;
}

/* --- FAB --- */
.cmod-wrap .fab-btn {
    display: none;
    position: fixed !important;
    bottom: 88px !important; right: 16px !important;
    width: 50px !important; height: 50px !important;
    border-radius: 50% !important;
    background: #0f172a !important;
    color: white !important;
    border: none !important;
    z-index: 49 !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    transition: all 0.2s !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
.cmod-wrap .fab-btn:hover { background: #1e293b !important; transform: scale(1.05); }

.cmod-wrap .fab-badge {
    position: absolute !important;
    top: -3px !important; right: -3px !important;
    width: 18px !important; height: 18px !important;
    border-radius: 50% !important;
    background: #00EBEC !important;
    color: #0f172a !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* --- Drawer --- */
.cmod-wrap .drawer-overlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.35) !important;
    z-index: 200 !important;
    opacity: 0;
    transition: opacity 0.3s !important;
}
.cmod-wrap .drawer-overlay.active { display: block !important; opacity: 1 !important; }

.cmod-wrap .drawer {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    background: white !important;
    border-radius: 20px 20px 0 0 !important;
    z-index: 201 !important;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1) !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
}
.cmod-wrap .drawer.active { transform: translateY(0) !important; }

/* --- Summary Items --- */
.cmod-wrap .summary-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 8px !important;
}
.cmod-wrap .summary-item-cat {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
.cmod-wrap .summary-item-val {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    margin-top: 1px !important;
}
.cmod-wrap .summary-item-price {
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    flex-shrink: 0 !important;
    text-align: right !important;
}

/* --- Selected swatch detail --- */
.cmod-wrap .swatch-detail {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border: 2px solid #00EBEC !important;
    border-radius: 12px !important;
    background: rgba(0,235,236,0.04) !important;
    margin-top: 12px !important;
    opacity: 0;
    animation: slideUp 0.3s ease forwards;
}

/* --- Icon Grid --- */
.cmod-wrap .icon-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
    gap: 6px !important;
}

.cmod-wrap .icon-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 4px 8px !important;
    border: 2px solid #f1f5f9 !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
    background: white !important;
    text-align: center !important;
    position: relative !important;
    opacity: 0;
    animation: slideUp 0.25s ease forwards;
}
.cmod-wrap .icon-card:nth-child(1) { animation-delay: 0.01s; }
.cmod-wrap .icon-card:nth-child(2) { animation-delay: 0.03s; }
.cmod-wrap .icon-card:nth-child(3) { animation-delay: 0.05s; }
.cmod-wrap .icon-card:nth-child(4) { animation-delay: 0.07s; }
.cmod-wrap .icon-card:nth-child(5) { animation-delay: 0.09s; }
.cmod-wrap .icon-card:nth-child(6) { animation-delay: 0.11s; }
.cmod-wrap .icon-card:nth-child(7) { animation-delay: 0.13s; }
.cmod-wrap .icon-card:nth-child(8) { animation-delay: 0.15s; }
.cmod-wrap .icon-card:nth-child(9) { animation-delay: 0.17s; }
.cmod-wrap .icon-card:nth-child(10) { animation-delay: 0.19s; }
.cmod-wrap .icon-card:nth-child(11) { animation-delay: 0.21s; }
.cmod-wrap .icon-card:nth-child(12) { animation-delay: 0.23s; }

/* Skip card animations during same-step re-renders (option clicks) */
.cmod-wrap .skip-card-anim .icon-card,
.cmod-wrap #optSubSection .icon-card {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
}

.cmod-wrap .icon-card:hover { border-color: #e2e8f0 !important; background: #f8fafc !important; transform: translateY(-1px); }
.cmod-wrap .icon-card.selected { border-color: #00EBEC !important; background: rgba(0,235,236,0.04) !important; }
.cmod-wrap .icon-card.selected::after {
    content: '';
    position: absolute;
    top: 4px; right: 4px;
    width: 18px; height: 18px;
    background: #00EBEC !important;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
}

.cmod-wrap .icon-card-img {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
}

.cmod-wrap .icon-card-name {
    font-family: 'Poppins', sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    line-height: 1.2 !important;
    max-height: 2.4em !important;
    overflow: hidden !important;
}
.cmod-wrap .icon-card.selected .icon-card-name { color: #0f172a !important; font-weight: 600 !important; }

.cmod-wrap .icon-card-price {
    font-family: 'Poppins', sans-serif !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
}
.cmod-wrap .icon-card.selected .icon-card-price { color: #00EBEC !important; }

/* Material Tabs */
.cmod-wrap .material-tabs {
    display: flex !important;
    gap: 4px !important;
    margin-bottom: 12px !important;
    padding: 3px !important;
    background: #f1f5f9 !important;
    border-radius: 10px !important;
}
.cmod-wrap .material-tab {
    flex: 1 !important;
    padding: 7px 10px !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    text-align: center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
.cmod-wrap .material-tab:hover { background: rgba(255,255,255,0.6) !important; }
.cmod-wrap .material-tab.active { background: white !important; color: #0f172a !important; font-weight: 600 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; }

/* Section header in steps */
.cmod-wrap .section-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important;
}
.cmod-wrap .section-badge.ext { background: rgba(0,235,236,0.08) !important; color: #00b8b9 !important; }
.cmod-wrap .section-badge.int { background: rgba(99,102,241,0.08) !important; color: #6366f1 !important; }

/* --- Toast --- */
.cmod-wrap .toast {
    position: fixed !important;
    bottom: 100px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(16px);
    background: #0f172a !important;
    color: white !important;
    padding: 10px 24px !important;
    border-radius: 100px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    z-index: 300 !important;
    opacity: 0;
    transition: all 0.25s !important;
    pointer-events: none;
}
.cmod-wrap .toast.show { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; }

/* --- Form Validation Errors --- */
.cmod-wrap .form-field-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239,68,68,0.15) !important;
}
.cmod-wrap .form-error {
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #ef4444 !important;
    margin-top: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    animation: slideUp 0.2s ease forwards;
}
.cmod-wrap .form-error::before {
    content: '' !important;
    width: 4px !important;
    height: 4px !important;
    background: #ef4444 !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

/* --- Animations --- */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

/* --- Step transition --- */
.cmod-wrap .step-transitioning #optionsContainer { opacity: 0; transform: translateX(16px); }
.cmod-wrap .step-entering #optionsContainer { animation: slideInRight 0.3s cubic-bezier(0.4,0,0.2,1) forwards; }

/* --- Responsive --- */
@media (max-width: 1200px) {
    .cmod-wrap .configurator-grid { grid-template-columns: 340px 1fr 280px !important; }
}

@media (max-width: 1024px) {
    .cmod-wrap .configurator-grid {
        grid-template-columns: 1fr !important;
        margin-bottom: 72px !important;
        min-height: auto !important;
    }
    .cmod-wrap .panel-options {
        position: relative !important;
        height: auto !important;
        border-right: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        order: 2 !important;
        overflow-y: visible !important;
    }
    .cmod-wrap .desktop-nav { display: none !important; }
    .cmod-wrap .panel-preview {
        position: relative !important;
        top: 0 !important;
        height: auto !important;
        order: 1 !important;
        min-height: auto !important;
        background: transparent !important;
    }
    .cmod-wrap .panel-preview .preview-compositor {
        position: relative !important;
        aspect-ratio: 4/3 !important;
        width: 100% !important;
    }
    .cmod-wrap .preview-toggle { bottom: 8px !important; }
    .cmod-wrap .preview-trust { top: 8px !important; right: 8px !important; }
    .cmod-wrap .panel-summary { display: none !important; }
    .cmod-wrap .mobile-bar { display: flex !important; }
    .cmod-wrap .fab-btn { display: flex !important; }
    .cmod-wrap .sticky-panel { height: auto !important; position: relative !important; top: 0 !important; }
    .cmod-wrap .progress-step { font-size: 10px !important; }
    /* Ensure the options container is scrollable on mobile */
    .cmod-wrap #optionsContainer {
        max-height: none !important;
        overflow-y: visible !important;
    }
}

@media (max-width: 768px) {
    .cmod-wrap .panel-preview .preview-compositor {
        aspect-ratio: 4/3 !important;
    }
    .cmod-wrap .preview-trust { display: none !important; }
    .cmod-wrap .visual-grid { gap: 6px !important; }
    .cmod-wrap .swatch-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)) !important; gap: 6px !important; }
}

@media (max-width: 480px) {
    .cmod-wrap .swatch-grid { grid-template-columns: repeat(4, 1fr) !important; }
    .cmod-wrap .dim-preset { font-size: 11px !important; padding: 5px 10px !important; }
    .cmod-wrap .panel-preview .preview-compositor {
        aspect-ratio: 4/3 !important;
    }
}

/* --- Image Protection --- */
.cmod-wrap .preview-compositor::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    background: transparent;
    pointer-events: auto;
}
.cmod-wrap .preview-layer,
.cmod-wrap .preview-layers img,
.cmod-wrap .icon-card-img {
    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
    user-select: none !important;
    pointer-events: none !important;
}
.cmod-wrap img {
    -webkit-user-drag: none !important;
}

/* --- Logo visibility fix --- */
.cmod-wrap .cmod-header img {
    height: 2rem !important;
    width: auto !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-width: none !important;
    max-height: none !important;
    pointer-events: auto !important;
}

/* --- Form radio buttons & checkboxes (WordPress theme override) --- */
.cmod-wrap input[type="radio"],
.cmod-wrap input[type="checkbox"] {
    accent-color: #00EBEC !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.cmod-wrap input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
}

.cmod-wrap input[type="checkbox"]#formPrivacy {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    border-radius: 4px !important;
}

/* --- Form radio group labels (doorbraak/achterom) --- */
.cmod-wrap .dim-field label.flex-1 {
    border-width: 2px !important;
    border-style: solid !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
    background: white !important;
}

.cmod-wrap .dim-field label.flex-1:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
}

/* --- Progress bar: scrollable & draggable --- */
.cmod-wrap #progressSteps {
    cursor: grab !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-overflow-scrolling: touch !important;
}
.cmod-wrap #progressSteps:active {
    cursor: grabbing !important;
}

/* --- New config button (success screen) --- */
.cmod-wrap .cmod-btn-new-config {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 28px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 100px !important;
    background: white !important;
    color: #334155 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.25s !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    text-decoration: none !important;
}
.cmod-wrap .cmod-btn-new-config:hover {
    border-color: #00EBEC !important;
    color: #0f172a !important;
    background: rgba(0,235,236,0.04) !important;
}

/* --- Loaded config banner --- */
.cmod-wrap .cmod-loaded-banner {
    background: #f0fdfa !important;
    border: 1px solid #99f6e4 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
}

/* --- PDF download button (success screen) --- */
.cmod-wrap .cmod-btn-download {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    border: none !important;
    border-radius: 100px !important;
    background: #0f172a !important;
    color: white !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.25s !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
}
.cmod-wrap .cmod-btn-download:hover {
    background: #00EBEC !important;
    color: #0f172a !important;
}

/* --- Privacy checkbox container --- */
.cmod-wrap .flex.items-start.gap-2 {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    margin-top: 8px !important;
}

/* --- Header icon buttons: active/pressed state --- */
.cmod-wrap .cmod-header button:active {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}
.cmod-wrap .cmod-header button.cmod-btn-active {
    background: #f1f5f9 !important;
    border-color: #00EBEC !important;
    color: #0f172a !important;
}

/* --- Ref dropdown --- */
.cmod-wrap .cmod-ref-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    width: 280px !important;
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
    z-index: 100 !important;
}

/* --- Help / FAQ overlay --- */
.cmod-wrap .cmod-help-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15,23,42,0.45) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 300 !important;
    transition: opacity 0.2s ease !important;
}

/* --- Help / FAQ modal --- */
.cmod-wrap .cmod-help-modal {
    position: fixed !important;
    top: calc(50% + 20px) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% - 32px) !important;
    max-width: 520px !important;
    max-height: 80vh !important;
    background: white !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.18) !important;
    z-index: 301 !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.cmod-wrap .cmod-help-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px 16px 24px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    flex-shrink: 0 !important;
}

.cmod-wrap .cmod-help-body {
    overflow-y: auto !important;
    padding: 8px 24px 24px 24px !important;
    flex: 1 !important;
}

/* --- FAQ accordion items --- */
.cmod-wrap .cmod-faq-item {
    border-bottom: 1px solid #f1f5f9 !important;
}
.cmod-wrap .cmod-faq-item:last-child {
    border-bottom: none !important;
}

.cmod-wrap .cmod-faq-q {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    cursor: pointer !important;
    list-style: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}
.cmod-wrap .cmod-faq-q::-webkit-details-marker {
    display: none !important;
}
.cmod-wrap .cmod-faq-q::after {
    content: '+' !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    color: #94a3b8 !important;
    flex-shrink: 0 !important;
    margin-left: 12px !important;
    transition: transform 0.2s ease !important;
}
.cmod-wrap .cmod-faq-item[open] > .cmod-faq-q::after {
    content: '−' !important;
    color: #0f172a !important;
}

.cmod-wrap .cmod-faq-a {
    padding: 0 0 14px 0 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #64748b !important;
}

/* ============================================
   Quick Win 2: Option price color coding
   ============================================ */
.cmod-wrap .icon-card-price.price-included {
    color: #22c55e !important;
}
.cmod-wrap .icon-card-price.price-extra {
    color: #94a3b8 !important;
}
.cmod-wrap .icon-card-price.price-saving {
    color: #22c55e !important;
}
.cmod-wrap .icon-card.selected .icon-card-price.price-included {
    color: #22c55e !important;
}

/* ============================================
   Quick Win 3: WhatsApp share button
   ============================================ */
.cmod-wrap .cmod-whatsapp-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    background: #25D366 !important;
    color: #fff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s, transform 0.1s !important;
}
.cmod-wrap .cmod-whatsapp-btn:hover {
    background: #1DA851 !important;
    transform: translateY(-1px) !important;
}
.cmod-wrap .cmod-whatsapp-btn:active {
    transform: translateY(0) !important;
}
.cmod-wrap .cmod-whatsapp-btn svg {
    flex-shrink: 0 !important;
}

/* ============================================
   Quick Win 4: Social proof bar
   ============================================ */
.cmod-social-proof {
    position: fixed;
    top: 104px;
    left: 0;
    right: 0;
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 6px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    line-height: 1.4;
    color: #64748b;
    font-weight: 500;
}
.cmod-social-proof span {
    white-space: nowrap;
}
/* Shift main content down to account for social proof bar */
.cmod-social-proof + main.configurator-grid {
    margin-top: 132px !important;
    min-height: calc(100vh - 132px) !important;
}
.cmod-social-proof + main.configurator-grid .sticky-panel,
.cmod-social-proof + main.configurator-grid .panel-options,
.cmod-social-proof + main.configurator-grid .panel-preview {
    height: calc(100vh - 132px) !important;
    top: 132px !important;
}
@media (max-width: 768px) {
    .cmod-social-proof {
        font-size: 10px;
        gap: 12px;
        padding: 5px 12px;
    }
    .cmod-social-proof span:nth-child(3) {
        display: none;
    }
    /* Reset desktop offsets for mobile — panels are position:relative, not sticky */
    .cmod-social-proof + main.configurator-grid {
        margin-top: 104px !important;
        min-height: auto !important;
    }
    .cmod-social-proof + main.configurator-grid .panel-preview {
        height: auto !important;
        top: 0 !important;
    }
    .cmod-social-proof + main.configurator-grid .panel-options {
        height: auto !important;
        top: 0 !important;
    }
    .cmod-social-proof + main.configurator-grid .sticky-panel {
        height: auto !important;
        top: 0 !important;
    }
}
@media (max-width: 480px) {
    .cmod-social-proof {
        gap: 8px;
        font-size: 9px;
    }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .cmod-wrap *,
    .cmod-wrap *::before,
    .cmod-wrap *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}