@onlive.ai/common-121 0.2.191 → 0.2.196

package/utils/apply-optional-styles.cjs

@@ -1,12 +1,12 @@
-/*! @onlive.ai/common-121 v0.2.191 | © 2026 Onlive.ai */
-"use strict";var s=Object.defineProperty;var ro=Object.getOwnPropertyDescriptor;var to=Object.getOwnPropertyNames;var lo=Object.prototype.hasOwnProperty;var t=(a,o)=>()=>(a&&(o=a(a=0)),o);var r=(a,o)=>{for(var l in o)s(a,l,{get:o[l],enumerable:!0})},eo=(a,o,l,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of to(o))!lo.call(a,e)&&e!==l&&s(a,e,{get:()=>o[e],enumerable:!(n=ro(o,e))||n.enumerable});return a};var no=a=>eo(s({},"__esModule",{value:!0}),a);var g={};r(g,{styles:()=>io});var m,io,f=t(()=>{"use strict";m=require("lit"),io=m.css`
+/*! @onlive.ai/common-121 v0.2.196 | © 2026 Onlive.ai */
+"use strict";var i=Object.defineProperty;var co=Object.getOwnPropertyDescriptor;var _o=Object.getOwnPropertyNames;var po=Object.prototype.hasOwnProperty;var l=(a,o)=>()=>(a&&(o=a(a=0)),o);var r=(a,o)=>{for(var t in o)i(a,t,{get:o[t],enumerable:!0})},mo=(a,o,t,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of _o(o))!po.call(a,e)&&e!==t&&i(a,e,{get:()=>o[e],enumerable:!(n=co(o,e))||n.enumerable});return a};var go=a=>mo(i({},"__esModule",{value:!0}),a);var g={};r(g,{styles:()=>fo});var m,fo,f=l(()=>{"use strict";m=require("lit"),fo=m.css`
 /**
  * Cupra Diagonal Theme
  */
 
 /* ========================================================================
-  THEME TOKENS
-  ======================================================================== */
+   THEME TOKENS
+   ======================================================================== */
 
 :root,
 :host,
@@ -14,20 +14,37 @@
   background-color: transparent;
   font-family: var(--ol-font-sans);
   font-weight: 300;
+  scroll-behavior: smooth;
+  text-rendering: optimizeSpeed;
+
+  /* --- Brand surfaces --- */
+  --cupra-color-surface-glass: #c3c3cb0d; /* Grey glass surface (~5% opacity) */
+  --cupra-color-surface-glass-10: #c3c3cb1a; /* Grey glass surface at 10% opacity */
+  --cupra-color-surface-glass-15: #c3c3cb26; /* Grey glass surface at 15% opacity */
+  --cupra-color-surface-solid: #15181e; /* Dark solid background */
+  --cupra-color-surface-solid-96: #15181ef4; /* Dark solid at 96% opacity (backdrop) */
 
-  /* Cupra colors */
-  --cupra-color-surface-glass: #c3c3cb0d;
-  --cupra-color-surface-solid: #15181e;
-  --cupra-color-accent: #b2764d;
-  --cupra-color-accent-soft: #c49678;
+  /* --- Brand accent --- */
+  --cupra-color-accent: #b2764d; /* Primary accent (copper) */
+  --cupra-color-accent-soft: #c49678; /* Softer accent variant */
+
+  /* --- White overlays (#fafafa at increasing opacity) --- */
   --cupra-color-overlay-01: #fafafa03;
   --cupra-color-overlay-03: #fafafa0a;
   --cupra-color-overlay-05: #fafafa0d;
   --cupra-color-overlay-10: #fafafa1a;
   --cupra-color-overlay-15: #fafafa26;
+  --cupra-color-overlay-20: #fafafa33;
   --cupra-color-outline-70: #fafafab5;
 
-  /* Onlive UI Palette - Dark Theme */
+  /* --- Accent gradients --- */
+  --cupra-gradient-accent: linear-gradient(47deg, #b2764d 0%, #885a3b 65%, #6c472f 100%);
+  --cupra-gradient-stage-active: linear-gradient(47deg, #b77f58 0%, #9b613b 62.52%, #804620 96.18%);
+
+  /* --- Misc --- */
+  --cupra-color-carousel-inactive: #5a5c67; /* Carousel pagination dot (inactive state) */
+
+  /* --- Onlive UI Palette - Dark Theme overrides --- */
   --ol-color-primary-50: rgb(0 0 0);
   --ol-color-primary-100: rgb(40 40 40);
   --ol-color-primary-200: rgb(80 80 80);
@@ -40,16 +57,10 @@
   --ol-color-primary-900: rgb(255 255 255);
   --ol-color-primary-950: rgb(255 255 255);
 
-  /* Cupra typography */
-  --cupra-font-family-screen: "cupra-screen", sans-serif;
-  --ol-font-weight-bold: 400;
-  --ol-font-weight-medium: 300;
-  --ol-font-weight-light: 200;
-
-  /* Onlive UI typography and base vars */
-  --ol-font-sans: var(--cupra-font-family-screen);
+  /* --- Onlive UI typography and component overrides --- */
+  --ol-font-sans: "cupra-screen", sans-serif;
   --ol-calendar-day-border-radius: 50%;
-  --ol-calendar-day-padding: 15px;
+  --ol-calendar-day-padding: 15px 14px;
   --ol-calendar-day-border: 1px solid transparent;
   --ol-calendar-day-selected-border: 1px solid rgba(250, 250, 250, 0.3);
   --ol-calendar-day-selected-hover-border: 1px solid rgba(250, 250, 250, 0.5);
@@ -65,18 +76,51 @@
   --ol-input-floating-label-font-size-medium: var(--ol-font-size-x-small);
 }
 
+/* Scrollbar styles (applies to all scrollable elements within the theme) */
+* {
+  scrollbar-width: auto;
+  scrollbar-color: var(--ol-color-neutral-400) transparent;
+}
+*::-webkit-scrollbar {
+  width: 8px;
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+*::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: var(--ol-border-radius-large);
+  border: 3px solid transparent;
+}
+
 /* ========================================================================
    CORE ONLIVE UI COMPONENTS
    ======================================================================== */
 
-/* Spinner */
+[slot="label"] h3 {
+  font-size: var(--ol-font-size-medium);
+  font-weight: 400;
+  color: var(--ol-color-neutral-900);
+  margin: 0;
+  line-height: var(--ol-line-height-dense);
+}
+
+[slot="label"] p {
+  font-size: var(--ol-font-size-small);
+  font-weight: 400;
+  color: var(--ol-color-neutral-700);
+  margin: var(--ol-spacing-2x-small) 0 0;
+  line-height: var(--ol-line-height-dense);
+}
+
+/* --- Spinner --- */
 ol-spinner {
   --track-width: 6px;
   --track-color: #2f3a41c7;
   --indicator-color: var(--ol-color-neutral-900);
 }
 
-/* Buttons */
+/* --- Buttons --- */
 ol-button::part(base) {
   border-width: 2px;
   border-radius: var(--ol-border-radius-large);
@@ -87,16 +131,16 @@ ol-button::part(label) {
   font-weight: 500;
   font-family: var(--ol-font-sans);
 }
-ol-button[variant="default"]::part(base) {
-  background-color: transparent;
-  border-color: var(--ol-color-neutral-1000);
-  color: var(--ol-color-neutral-1000);
-}
 ol-button[variant="primary"]::part(base) {
   border-color: var(--ol-color-neutral-1000);
   background-color: var(--ol-color-neutral-1000);
   color: var(--ol-color-neutral-0);
 }
+ol-button[variant="default"]::part(base) {
+  background-color: transparent;
+  border-color: var(--ol-color-neutral-1000);
+  color: var(--ol-color-neutral-1000);
+}
 ol-button::part(spinner) {
   --track-width: 4px;
   font-size: 1.5em;
@@ -105,7 +149,17 @@ ol-button:hover:not([disabled])::part(base) {
   opacity: 0.8;
 }
 
-/* Inputs */
+/* --- Inputs and Textarea (shared label style) --- */
+ol-input::part(form-control-label),
+ol-textarea::part(form-control-label) {
+  font-size: var(--ol-font-size-small);
+  font-family: var(--ol-font-sans);
+  font-weight: 300;
+  color: var(--ol-color-neutral-600);
+  padding: var(--ol-spacing-x-small);
+}
+
+/* Input */
 ol-input::part(base) {
   box-shadow: none;
   background-color: var(--cupra-color-surface-glass);
@@ -125,11 +179,6 @@ ol-input::part(input) {
   padding: 0 var(--ol-spacing-x-small);
 }
 ol-input::part(form-control-label) {
-  font-size: var(--ol-font-size-small);
-  font-family: var(--ol-font-sans);
-  font-weight: 300;
-  color: var(--ol-color-neutral-600);
-  padding: var(--ol-spacing-x-small);
   position: absolute;
 }
 ol-input::part(form-control-label)::after {
@@ -149,25 +198,28 @@ ol-textarea::part(textarea) {
   background: transparent;
   padding: var(--ol-spacing-x-small);
 }
-ol-textarea::part(form-control-label) {
-  font-size: var(--ol-font-size-small);
-  font-family: var(--ol-font-sans);
-  font-weight: 300;
-  color: var(--ol-color-neutral-600);
-  padding: var(--ol-spacing-x-small);
-}
 
-/* Select */
+/* --- Select --- */
 ol-select::part(combobox) {
   height: 50px;
   border-color: var(--ol-color-neutral-600);
   border-radius: var(--ol-border-radius-large);
-  background: linear-gradient(179deg, #fafafa26 0%, #c3c3cb0d 85%, #c3c3cb1a 100%);
+  background: linear-gradient(
+    179deg,
+    var(--cupra-color-overlay-15) 0%,
+    var(--cupra-color-surface-glass) 85%,
+    var(--cupra-color-surface-glass-10) 100%
+  );
   box-shadow: none;
 }
 ol-select::part(combobox):hover,
 ol-select[open]::part(combobox) {
-  background: linear-gradient(179deg, #fafafa33 0%, #c3c3cb1a 85%, #c3c3cb26 100%);
+  background: linear-gradient(
+    179deg,
+    var(--cupra-color-overlay-20) 0%,
+    var(--cupra-color-surface-glass-10) 85%,
+    var(--cupra-color-surface-glass-15) 100%
+  );
 }
 ol-select::part(form-control-label) {
   font-family: var(--ol-font-sans);
@@ -194,7 +246,7 @@ ol-select::part(listbox)::after {
   height: 100%;
   backdrop-filter: blur(24px);
   pointer-events: none;
-  background: #15181ef4;
+  background: var(--cupra-color-surface-solid-96);
   z-index: -1;
 }
 
@@ -205,17 +257,17 @@ ol-option::part(base) {
   background: transparent;
 }
 ol-option:hover::part(base) {
-  background-color: #c3c3cb0d;
+  background-color: var(--cupra-color-surface-glass);
 }
 ol-option[aria-selected="true"]::part(base) {
   border-left: 4px solid var(--cupra-color-accent);
-  background-color: #c3c3cb0d;
+  background-color: var(--cupra-color-surface-glass);
 }
 ol-option::part(checked-icon) {
   display: none;
 }
 
-/* Range */
+/* --- Range --- */
 ol-range::part(input) {
   border-radius: var(--ol-border-radius-medium);
   --thumb-size: 22px;
@@ -225,16 +277,16 @@ ol-range::part(input) {
   --ol-color-primary-500: var(--ol-color-neutral-900);
 }
 
-/* Carousel */
+/* --- Carousel --- */
 ol-carousel::part(pagination-item) {
   border-radius: var(--ol-border-radius-small);
   height: 4px;
   width: 38px;
-  background-color: #5a5c67;
+  background-color: var(--cupra-color-carousel-inactive);
 }
 ol-carousel::part(pagination-item--active) {
   transform: scale(1);
-  background: linear-gradient(47deg, #b2764d 0%, #885a3b 65%, #6c472f 100%);
+  background: var(--cupra-gradient-accent);
 }
 .ofl__carousel__item-label {
   font-family: var(--ol-font-sans);
@@ -245,8 +297,8 @@ ol-carousel::part(pagination-item--active) {
   margin-top: calc(2 * var(--ol-spacing-medium));
   border-radius: var(--ol-border-radius-large);
   backdrop-filter: blur(2.5rem);
-  background: #fafafa1a;
-  border: 1px solid #fafafa1a;
+  background: var(--cupra-color-overlay-10);
+  border: 1px solid var(--cupra-color-overlay-10);
   gap: var(--ol-spacing-x-small);
 }
 .ofl__carousel__nav-item::part(button) {
@@ -258,17 +310,36 @@ ol-carousel::part(pagination-item--active) {
   background: transparent;
 }
 .ofl__carousel__nav-item[checked]::part(button--checked) {
-  background: #fafafa26;
-  border: 1px solid #fafafa1a;
+  background: var(--cupra-color-overlay-15);
+  border: 1px solid var(--cupra-color-overlay-10);
   outline: none;
 }
 .ofl__carousel__nav-item::part(label) {
   font-size: var(--ol-font-size-medium);
-  font-weight: 300;
+  font-weight: 400;
   color: var(--ol-color-neutral-900);
 }
+.ofl__carousel--showcase-mode::part(navigation-button) {
+  background: var(--cupra-gradient-accent);
+  color: var(--ol-color-neutral-1000);
+  border: 1px solid var(--cupra-color-accent);
+  font-size: var(--ol-font-size-small);
+  opacity: 0;
+  transition: opacity var(--ol-transition-medium) ease;
+}
+.ofl__carousel--showcase-mode:hover::part(navigation-button) {
+  opacity: 1;
+}
+.ofl__carousel--showcase-mode::part(navigation-button--next) {
+  position: absolute;
+  right: 10vw;
+}
+.ofl__carousel--showcase-mode::part(navigation-button--previous) {
+  position: absolute;
+  left: 10vw;
+}
 
-/* Radio button */
+/* --- Radio Button --- */
 ol-radio-button {
   margin-inline: 0;
 }
@@ -283,12 +354,13 @@ ol-radio-button[checked]::part(button) {
   outline: 1px solid var(--cupra-color-outline-70);
 }
 
-/* Radio */
+/* --- Radio Group --- */
 ol-radio-group::part(form-control-label) {
   font-size: var(--ol-font-size-small);
   font-family: var(--ol-font-sans);
   font-weight: 300;
   color: var(--ol-color-neutral-600);
+  margin-bottom: var(--ol-spacing-small);
 }
 ol-radio-group ol-radio {
   line-height: 2.5;
@@ -300,7 +372,10 @@ ol-radio-group ol-radio::part(control) {
   border-color: var(--ol-color-neutral-700);
   z-index: 1;
 }
-ol-radio-group ol-radio::part(control):after {
+
+/* Hover ripple effect (shared by radio and checkbox) */
+ol-radio-group ol-radio::part(control):after,
+ol-checkbox::part(control):after {
   content: "";
   position: absolute;
   width: calc(100% + 8px);
@@ -315,9 +390,11 @@ ol-radio-group ol-radio::part(control):after {
   z-index: 0;
   transition: opacity var(--ol-transition-fast) ease;
 }
-ol-radio-group ol-radio:hover::part(control)::after {
+ol-radio-group ol-radio:hover::part(control)::after,
+ol-checkbox:hover::part(control)::after {
   opacity: 1;
 }
+
 ol-radio-group ol-radio::part(checked-icon) {
   transform: scale(1.3);
 }
@@ -329,7 +406,7 @@ ol-radio-group ol-radio::part(label) {
   line-height: 1.75;
 }
 
-/* Checkbox */
+/* --- Checkbox --- */
 ol-checkbox::part(label) {
   font-family: var(--ol-font-sans);
   font-weight: 400;
@@ -343,35 +420,20 @@ ol-checkbox::part(control) {
   background: transparent;
 }
 ol-checkbox::part(control):after {
-  content: "";
-  position: absolute;
-  width: calc(100% + 8px);
-  height: calc(100% + 8px);
   border-radius: var(--ol-border-radius-large);
-  background: var(--cupra-color-overlay-10);
-  top: -4px;
-  left: -4px;
-  right: 0;
-  bottom: 0;
-  opacity: 0;
-  z-index: 0;
-  transition: opacity var(--ol-transition-fast) ease;
-}
-ol-checkbox:hover::part(control)::after {
-  opacity: 1;
 }
 ol-checkbox::part(control--checked) {
   border-color: var(--cupra-color-accent-soft);
   background-color: var(--cupra-color-accent);
-  color: #ffffff;
+  color: var(--ol-color-neutral-0);
 }
 
-/* Dialog */
+/* --- Dialog --- */
 ol-dialog::part(panel) {
   border-radius: var(--ol-border-radius-x-large);
 }
 
-/* Loading state */
+/* --- Loading state --- */
 .ofl__flow__loading,
 .ofl__flow__loading-overlay {
   font-size: var(--ol-spacing-2x-large);
@@ -388,7 +450,7 @@ ol-dialog::part(panel) {
    MAP
    ======================================================================== */
 
-/* Search input */
+/* Search input (overrides default input height) */
 .ofl__map__search-input::part(base) {
   height: 50px;
 }
@@ -396,9 +458,24 @@ ol-dialog::part(panel) {
   height: 46px;
   margin-top: 0;
 }
+.ofl__map__autocomplete-list {
+  backdrop-filter: blur(3px);
+  background: var(--cupra-color-surface-solid-96);
+  border-color: var(--cupra-color-surface-glass-10);
+  border-radius: var(--ol-border-radius-medium);
+}
+.ofl__map__autocomplete-item {
+  padding: var(--ol-spacing-small) var(--ol-spacing-medium);
+}
+.ofl__map__autocomplete-item:hover,
+.ofl__map__autocomplete-item--active {
+  background: var(--cupra-color-surface-glass-15);
+}
 .ofl__map__distance-range {
   margin-bottom: var(--ol-spacing-2x-small);
 }
+
+/* Map container */
 .ofl__map__map-container {
   height: 300px;
   aspect-ratio: 5 / 3;
@@ -415,7 +492,7 @@ ol-dialog::part(panel) {
   border-radius: var(--ol-border-radius-x-large);
 }
 
-/* Labels and list container */
+/* Labels and scrollable list */
 .ofl__map__label {
   font-family: var(--ol-font-sans);
   font-weight: 400;
@@ -472,6 +549,8 @@ ol-dialog::part(panel) {
     var(--dg-global-opacity-grey-15, hsla(240, 7%, 78%, 0.15)) 99.44%
   );
 }
+
+/* Option card typography */
 .ofl__map__option-item__title {
   font-family: var(--ol-font-sans);
   font-weight: 400;
@@ -497,27 +576,57 @@ ol-dialog::part(panel) {
   gap: var(--ol-spacing-2x-small);
 }
 
+/* Rating Component Styling */
+.ofl__rating {
+  --symbol-color: var(--ol-color-neutral-900);
+  --symbol-size: 2em;
+  --symbol-spacing: 0 var(--ol-spacing-medium) 0 0;
+  margin-bottom: var(--ol-spacing-large);
+}
+.ofl__rating__label {
+  margin-bottom: var(--ol-spacing-large);
+  margin-top: var(--ol-spacing-large);
+}
+
 /* ========================================================================
    PAGE LAYOUT
    ======================================================================== */
 
 /* Landing installations */
-
+.oip__page {
+  background-image: url(https://ds-assets.cupra.com/backgrounds/cupra-diagonal/default-xs.svg);
+  background-position: 0 0;
+  background-color: var(--cupra-color-surface-solid);
+  background-repeat: repeat-y;
+  background-size: 100% auto;
+}
+.oip__page__header {
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
+  backdrop-filter: blur(12px);
+}
 .oip__page__content {
-  background-color: #15181e;
+  flex: 1;
+  max-width: 1400px;
+  margin: 0 auto;
+  align-items: center;
 }
 .oip__page__content .oip__page__installation {
   display: flex;
-  align-items: center;
+  align-items: self-start;
   justify-content: center;
   width: 50%;
-  padding: var(--ol-spacing-2x-large);
-  height: calc(100vh - 2 * var(--ol-spacing-2x-large));
+  padding: var(--ol-spacing-large);
+}
+.oip__page__content .oip__page__image_container {
+  background: transparent;
 }
 .oip__page__content .oip__page__image_container .oip__page__image {
-  background-color: #15181e;
+  background-color: transparent;
   object-fit: contain;
 }
+
 .ofl__widget,
 .ofl__flow {
   max-width: 100%;
@@ -565,7 +674,7 @@ ol-dialog::part(panel) {
   font-size: 20px;
 }
 
-/* Labels and checkbox */
+/* Labels */
 .ofl__label {
   font-family: var(--ol-font-sans);
   font-weight: 300;
@@ -578,8 +687,11 @@ ol-dialog::part(panel) {
 .ofl__label p {
   margin-top: 0;
 }
+.ofl__label a {
+  color: var(--ol-color-neutral-900);
+}
 
-/* Input states */
+/* Input validation states */
 .ofl__input--error::part(base),
 .ofl__input--error:focus::part(base) {
   border-color: transparent;
@@ -596,14 +708,11 @@ ol-dialog::part(panel) {
   border-color: transparent;
   border-bottom-color: var(--ol-color-neutral-900);
 }
-.ofl__label a {
-  color: var(--ol-color-neutral-900);
-}
 .ofl__input__error-message {
   position: absolute;
 }
 
-/* Phone input */
+/* --- Phone input --- */
 .ofl__phone-input .ofl__phone-input__prefix::part(combobox) {
   border-color: transparent;
   border-bottom-color: var(--ol-color-neutral-600);
@@ -658,6 +767,7 @@ ol-dialog::part(panel) {
    CALENDAR AND SELECTION BLOCK
    ======================================================================== */
 
+/* Stage tabs */
 .ofl__stages {
   font-family: var(--ol-font-sans);
   font-weight: 400;
@@ -676,7 +786,7 @@ ol-dialog::part(panel) {
   background: var(--ol-color-neutral-200);
 }
 .ofl__stages--tabs .ofl__stages__stage.ofl__stages__stage--active::after {
-  background: linear-gradient(47deg, #b77f58 0, #9b613b 62.52%, #804620 96.18%);
+  background: var(--cupra-gradient-stage-active);
 }
 .ofl__stages--tabs .ofl__stages__stage .ofl__stages__stage-number {
   display: none;
@@ -684,6 +794,8 @@ ol-dialog::part(panel) {
 .ofl__flow__stages.ofl__flow__stages--top {
   margin-bottom: var(--ol-spacing-medium);
 }
+
+/* Calendar grid */
 .ofl__calendar__calendar {
   width: max-content;
   background: var(--cupra-color-overlay-05);
@@ -704,6 +816,8 @@ ol-dialog::part(panel) {
 .ofl__calendar__time-list--list {
   max-width: 100%;
 }
+
+/* Time slot list */
 .ofl__calendar__time-list--list .ofl__calendar__time-item::part(button__label) {
   font-weight: var(--ol-font-weight-normal);
 }
@@ -737,7 +851,7 @@ ol-dialog::part(panel) {
   border: none;
 }
 
-/* Compact time list grid */
+/* Compact time grid (small size) */
 .ofl__calendar__time-list--list[size="small"]::part(button-group__base) {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
@@ -745,6 +859,8 @@ ol-dialog::part(panel) {
   gap: var(--ol-spacing-x-small);
   justify-content: start;
 }
+
+/* Radio button group */
 .ofl__radio-button__group::part(button-group) {
   width: 100%;
 }
@@ -754,7 +870,7 @@ ol-dialog::part(panel) {
 .ofl__radio-button__group .ofl__radio-button__button::part(button) {
   border-radius: var(--ol-border-radius-pill);
   min-height: var(--ol-spacing-3x-large);
-  background-color: #c3c3cb0d;
+  background-color: var(--cupra-color-surface-glass);
   border: none;
 }
 .ofl__radio-button__group::part(button-group__base) {
@@ -762,7 +878,7 @@ ol-dialog::part(panel) {
 }
 
 /* ========================================================================
-   RESPONSIVE (MOBILE)
+   RESPONSIVE (MOBILE) — Core components
    ======================================================================== */
 
 @media (max-width: 768px) {
@@ -772,14 +888,21 @@ ol-dialog::part(panel) {
     --ol-calendar-day-font-size: var(--ol-font-size-small);
   }
 
+  .oip__page__header {
+    width: auto;
+    margin: 0;
+    position: sticky;
+    top: 0;
+  }
   .oip__page__content {
-    height: 100vh;
+    height: 100%;
     justify-content: center;
     align-items: center;
   }
   .oip__page__content .oip__page__installation {
     height: auto;
-    width: calc(100% - 2 * var(--ol-spacing-2x-large));
+    width: 100%;
+    align-items: center;
   }
 
   ol-carousel::part(pagination) {
@@ -805,26 +928,30 @@ ol-dialog::part(panel) {
     justify-content: space-between;
     width: auto;
   }
+
   .ofl__calendar__time-list--list .ofl__calendar__time-item::part(button) {
     min-height: 40px;
   }
   .ofl__calendar__time-list--list .ofl__calendar__time-item::part(label) {
     font-size: var(--ol-font-size-small);
   }
+  .ofl__calendar__time-list--list[size="small"]::part(button-group__base) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
   .ofl__phone-input.ofl__phone-input__number--show-flag.ofl__phone-input__number--show-code
     .ofl__phone-input__prefix {
     width: 100%;
   }
-  .ofl__calendar__time-list--list[size="small"]::part(button-group__base) {
-    grid-template-columns: repeat(3, 1fr);
-  }
+
   .ofl__map__map-container {
     aspect-ratio: 3 / 3;
   }
   .ofl__flow__title,
   .ofl__flow__form-container,
   .ofl__flow__description,
-  .ofl__actions {
+  .ofl__actions,
+  .ofl__error-content {
     padding-left: var(--ol-spacing-medium);
     padding-right: var(--ol-spacing-medium);
   }
@@ -846,8 +973,9 @@ ol-dialog::part(panel) {
 }
 
 /* ========================================================================
-   RESPONSIVE (DESKTOP)
+   RESPONSIVE (DESKTOP) — Core components
    ======================================================================== */
+
 @media (min-width: 769px) {
   ol-carousel.ofl__carousel--showcase-mode::part(pagination) {
     display: none;
@@ -877,6 +1005,7 @@ ol-dialog::part(panel) {
     opacity: 1;
   }
 }
+
 @media (min-width: 2000px) {
   ol-carousel.ofl__carousel--showcase-mode {
     width: 2000px;
@@ -885,15 +1014,13 @@ ol-dialog::part(panel) {
 }
 
 /* ========================================================================
-   ========================================================================
-   Custom Styles
-   ======================================================================== 
-   ========================================================================*/
+   CUSTOM STYLES — Step-specific layout
+   ======================================================================== */
 
+/* Flow step max-widths */
 .ofl__flow.ofl__flow--step-modelSelection {
   max-width: 1372px;
 }
-
 .ofl__flow.ofl__flow--step-paymentPreferences,
 .ofl__flow.ofl__flow--step-customerDetails,
 .ofl__flow.ofl__flow--step-dealerSelection,
@@ -904,6 +1031,7 @@ ol-dialog::part(panel) {
   max-width: 664px;
 }
 
+/* Content block typography */
 .olcs__title {
   margin-bottom: var(--ol-spacing-large);
 }
@@ -921,6 +1049,8 @@ ol-dialog::part(panel) {
   font-weight: 200;
   font-size: var(--ol-font-size-2x-large);
 }
+
+/* Carousel label */
 .olcs__carousel-label p {
   text-transform: uppercase;
   font-size: var(--ol-font-size-medium);
@@ -936,6 +1066,8 @@ ol-dialog::part(panel) {
   color: var(--ol-color-neutral-900);
   margin: 0;
 }
+
+/* Model / card layout */
 .olcs__model-image {
   width: 100%;
 }
@@ -950,6 +1082,8 @@ ol-dialog::part(panel) {
 h3.olcs__label {
   font-weight: 200;
 }
+
+/* Summary details */
 .olcs__dealer {
   margin-top: var(--ol-spacing-large);
 }
@@ -976,7 +1110,7 @@ h3.olcs__label {
 }
 
 /* ========================================================================
-   RESPONSIVE (MOBILE)
+   RESPONSIVE (MOBILE) — Custom styles
    ======================================================================== */
 
 @media (max-width: 768px) {
@@ -996,8 +1130,9 @@ h3.olcs__label {
 }
 
 /* ========================================================================
-   RESPONSIVE (DESKTOP)
+   RESPONSIVE (DESKTOP) — Custom styles
    ======================================================================== */
+
 @media (min-width: 1440px) {
   .olcs__carousel-label p {
     font-size: var(--ol-font-size-x-large);
@@ -1009,7 +1144,7 @@ h3.olcs__label {
     font-size: var(--ol-font-size-3x-large);
   }
 }
-`});var u={};r(u,{styles:()=>so});var b,so,h=t(()=>{"use strict";b=require("lit"),so=b.css`
+`});var u={};r(u,{styles:()=>bo});var b,bo,h=l(()=>{"use strict";b=require("lit"),bo=b.css`
 /**
  * Audi Theme for Onlive Flow Components
  * ====================================
@@ -1784,7 +1919,7 @@ label {
     max-height: 240px;
   }
 }
-`});var x={};r(x,{styles:()=>co});var v,co,y=t(()=>{"use strict";v=require("lit"),co=v.css`
+`});var x={};r(x,{styles:()=>uo});var v,uo,y=l(()=>{"use strict";v=require("lit"),uo=v.css`
 /**
  * Audi Dark Theme for Onlive Flow Components
  * ====================================
@@ -2706,7 +2841,7 @@ label {
     max-height: 240px;
   }
 }
-`});var k={};r(k,{styles:()=>_o});var w,_o,z=t(()=>{"use strict";w=require("lit"),_o=w.css`
+`});var k={};r(k,{styles:()=>ho});var w,ho,z=l(()=>{"use strict";w=require("lit"),ho=w.css`
 /**
  * ----------------------------------------------------------------------------------------
  * THEME: Australia
@@ -3090,7 +3225,7 @@ ol-input::part(base) {
     font-size: var(--ol-font-size-small);
   }
 }
-`});var S={};r(S,{styles:()=>po});var C,po,O=t(()=>{"use strict";C=require("lit"),po=C.css`
+`});var S={};r(S,{styles:()=>vo});var C,vo,O=l(()=>{"use strict";C=require("lit"),vo=C.css`
 :root,
 :host,
 .ol-theme-light {
@@ -3284,7 +3419,7 @@ ol-radio-group::part(form-control-label) {
     max-width: 220px;
   }
 }
-`});var E={};r(E,{styles:()=>mo});var T,mo,I=t(()=>{"use strict";T=require("lit"),mo=T.css`
+`});var E={};r(E,{styles:()=>xo});var T,xo,I=l(()=>{"use strict";T=require("lit"),xo=T.css`
 :root,
 :host,
 .ol-theme-light {
@@ -3837,7 +3972,7 @@ ol-carousel::part(pagination-item) {
     margin: auto var(--ol-spacing-x-large) var(--ol-spacing-x-large);
   }
 }
-`});var P={};r(P,{styles:()=>go});var A,go,B=t(()=>{"use strict";A=require("lit"),go=A.css`
+`});var P={};r(P,{styles:()=>yo});var A,yo,L=l(()=>{"use strict";A=require("lit"),yo=A.css`
 :root,
 :host,
 .ol-theme-light {
@@ -3982,7 +4117,7 @@ ol-carousel::part(pagination-item) {
     overflow: auto;
   }
 }
-`});var F={};r(F,{styles:()=>fo});var L,fo,N=t(()=>{"use strict";L=require("lit"),fo=L.css`
+`});var N={};r(N,{styles:()=>wo});var B,wo,R=l(()=>{"use strict";B=require("lit"),wo=B.css`
 /**
  * ----------------------------------------------------------------------------------------
  * THEME: Germany
@@ -4696,7 +4831,7 @@ ol-input::part(base) {
     font-size: var(--ol-font-size-small);
   }
 }
-`});var R={};r(R,{styles:()=>bo});var j,bo,M=t(()=>{"use strict";j=require("lit"),bo=j.css`
+`});var j={};r(j,{styles:()=>ko});var F,ko,M=l(()=>{"use strict";F=require("lit"),ko=F.css`
 :root,
 :host,
 .ol-theme-dark {
@@ -4988,7 +5123,7 @@ ol-progress-bar {
 .video-js .vjs-play-progress {
   background-color: var(--hyundai-active-color);
 }
-`});var D={};r(D,{styles:()=>uo});var U,uo,V=t(()=>{"use strict";U=require("lit"),uo=U.css`
+`});var D={};r(D,{styles:()=>zo});var U,zo,V=l(()=>{"use strict";U=require("lit"),zo=U.css`
 /**
  * ----------------------------------------------------------------------------------------
  * THEME: Italy
@@ -5816,7 +5951,7 @@ ol-input::part(base) {
     font-size: var(--ol-font-size-small);
   }
 }
-`});var H={};r(H,{styles:()=>ho});var G,ho,Y=t(()=>{"use strict";G=require("lit"),ho=G.css`
+`});var H={};r(H,{styles:()=>Co});var G,Co,Y=l(()=>{"use strict";G=require("lit"),Co=G.css`
 :root,
 :host,
 .ol-theme-light {
@@ -5933,7 +6068,7 @@ ol-input::part(base) {
     --ol-calendar-day-padding: var(--ol-spacing-x-small) 16px;
   }
 }
-`});var K={};r(K,{styles:()=>vo});var W,vo,q=t(()=>{"use strict";W=require("lit"),vo=W.css`
+`});var K={};r(K,{styles:()=>So});var W,So,X=l(()=>{"use strict";W=require("lit"),So=W.css`
 :root,
 :host,
 .ol-theme-light {
@@ -6005,7 +6140,7 @@ ol-button:not([circle])::part(spinner) {
   background-color: var(--onlive-ai-secondary-color);
   color: var(--ol-color-neutral-0);
 }
-`});var Q={};r(Q,{styles:()=>xo});var X,xo,$=t(()=>{"use strict";X=require("lit"),xo=X.css`
+`});var Q={};r(Q,{styles:()=>Oo});var q,Oo,$=l(()=>{"use strict";q=require("lit"),Oo=q.css`
 :root,
 :host,
 .ol-theme-light {
@@ -6036,7 +6171,7 @@ ol-button:not([circle])::part(spinner) {
   border-radius: 30px 30px 0 30px;
   background: rgb(40 40 40);
 }
-`});var Z={};r(Z,{styles:()=>yo});var J,yo,oo=t(()=>{"use strict";J=require("lit"),yo=J.css`
+`});var Z={};r(Z,{styles:()=>To});var J,To,oo=l(()=>{"use strict";J=require("lit"),To=J.css`
 /**
  * SEAT CUPRA Theme
  * ----------------------------------------------------------------------------------------
@@ -6512,4 +6647,1212 @@ ol-calendar::part(header-content) {
   line-height: 1.5rem;
   letter-spacing: 0.5px;
 }
-`});var ko={};r(ko,{THEME_LOADERS:()=>c,applyOptionalStyles:()=>wo});module.exports=no(ko);var p=require("lit"),d=(a,o)=>{try{(0,p.adoptStyles)(a,o)}catch(l){console.warn("Failed to adopt styles using lit-adoptStyles:",l)}};var c={"cupra-diagonal":()=>Promise.resolve().then(()=>(f(),g)),audi:()=>Promise.resolve().then(()=>(h(),u)),"audi-dark":()=>Promise.resolve().then(()=>(y(),x)),"cupra-australia":()=>Promise.resolve().then(()=>(z(),k)),cuernavaca:()=>Promise.resolve().then(()=>(O(),S)),"cupra-events":()=>Promise.resolve().then(()=>(I(),E)),"cupra-base":()=>Promise.resolve().then(()=>(B(),P)),"cupra-germany":()=>Promise.resolve().then(()=>(N(),F)),hyundai:()=>Promise.resolve().then(()=>(M(),R)),"cupra-italy":()=>Promise.resolve().then(()=>(V(),D)),magimix:()=>Promise.resolve().then(()=>(Y(),H)),"onlive-ai":()=>Promise.resolve().then(()=>(q(),K)),"onlive-site":()=>Promise.resolve().then(()=>($(),Q)),"seat-cupra":()=>Promise.resolve().then(()=>(oo(),Z))},wo=async({renderRoot:a,baseStyles:o,options:l})=>{let n=[],e=l?.themeName?.trim().toLowerCase();if(e&&e in c)try{let i=await c[e](),_=i.styles??i.default;_&&n.push(_)}catch(i){console.warn(`Failed to load custom flow theme: ${e}`,i)}l?.customStyles&&n.push(l.customStyles);let ao=Array.isArray(o)?[...o]:[o];d(a,[...ao,...n])};0&&(module.exports={THEME_LOADERS,applyOptionalStyles});
+`});var ro={};r(ro,{styles:()=>Eo});var ao,Eo,lo=l(()=>{"use strict";ao=require("lit"),Eo=ao.css`
+/**
+ * Seat Theme
+ */
+
+/* ========================================================================
+  THEME TOKENS
+  ======================================================================== */
+
+:root,
+:host,
+.ol-theme-light {
+  background-color: transparent;
+  font-family: var(--ol-font-sans);
+  font-weight: 300;
+
+  /* Onlive UI Palette - Light Theme */
+  --ol-color-primary-50: rgb(220 220 220);
+  --ol-color-primary-100: rgb(200 200 200);
+  --ol-color-primary-200: rgb(150 150 150);
+  --ol-color-primary-300: rgb(100 100 100);
+  --ol-color-primary-400: rgb(80 80 80);
+  --ol-color-primary-500: rgb(60 60 60);
+  --ol-color-primary-600: rgb(40 40 40);
+  --ol-color-primary-700: rgb(0 0 0);
+  --ol-color-primary-800: rgb(0 0 0);
+  --ol-color-primary-900: rgb(0 0 0);
+  --ol-color-primary-950: rgb(0 0 0);
+
+  /* Seat typography */
+  --seat-font-family-regular: "SeatRegular", sans-serif;
+  --seat-font-family-medium: "SeatMedium", sans-serif;
+  --seat-font-family-bold: "SeatBold", sans-serif;
+  --seat-font-family-black: "SeatBlack", sans-serif;
+
+  /* Onlive UI typography and base vars */
+  --ol-font-sans: var(--seat-font-family-regular);
+
+  /* Calendar vars */
+  --ol-calendar-day-border-radius: 50%;
+  --ol-calendar-day-padding: 14px 15px;
+  --ol-calendar-day-border: 1px solid transparent;
+  --ol-calendar-day-selected-border: 1px solid var(--ol-color-neutral-900);
+  --ol-calendar-day-selected-hover-border: 1px solid var(--ol-color-neutral-900);
+  --ol-calendar-selected-background-color: var(--ol-color-neutral-900);
+  --ol-calendar-selected-color: var(--ol-color-neutral-0);
+  --ol-calendar-day-inactive-font-weight: 200;
+  --ol-calendar-day-today-color: auto;
+  --ol-calendar-day-today-background-color: transparent;
+  --ol-calendar-inactive-color: var(--ol-color-neutral-300);
+
+  /* Input floating label */
+  --ol-input-floating-label-initial-position-medium: 0, 22px;
+  --ol-input-floating-label-final-position-medium: 0, 10px;
+}
+
+/* ========================================================================
+   CORE ONLIVE UI COMPONENTS
+   ======================================================================== */
+
+[slot="label"] h3 {
+  font-family: var(--seat-font-family-medium);
+  font-size: var(--ol-font-size-medium);
+  color: var(--ol-color-neutral-900);
+  margin: 0;
+  line-height: var(--ol-line-height-dense);
+}
+
+[slot="label"] p {
+  font-family: var(--seat-font-family-regular);
+  font-size: var(--ol-font-size-small);
+  color: var(--ol-color-neutral-500);
+  margin: var(--ol-spacing-2x-small) 0 0;
+  line-height: var(--ol-line-height-dense);
+}
+
+/* Spinner */
+ol-spinner {
+  --track-width: 3px;
+  --track-color: var(--ol-color-neutral-200);
+  --indicator-color: var(--ol-color-neutral-900);
+}
+
+/* Buttons */
+ol-button::part(base) {
+  border-radius: var(--ol-border-radius-pill);
+  transition: all var(--ol-transition-medium) ease;
+}
+ol-button::part(label) {
+  padding: var(--ol-spacing-2x-small) var(--ol-spacing-medium);
+  font-family: var(--seat-font-family-bold);
+  font-size: var(--ol-font-size-medium);
+  font-weight: 700;
+}
+ol-button::part(spinner) {
+  --track-width: 4px;
+  font-size: 1.5em;
+}
+ol-button[variant="primary"]::part(base) {
+  border-color: var(--ol-color-neutral-1000);
+  background-color: var(--ol-color-neutral-1000);
+  color: #ece9e1;
+}
+ol-button[variant="primary"]:hover:not([disabled])::part(base) {
+  opacity: 0.8;
+}
+ol-button[variant="default"]::part(base) {
+  background-color: transparent;
+  border-color: var(--ol-color-neutral-1000);
+  color: var(--ol-color-neutral-1000);
+}
+ol-button[variant="default"]:hover::part(base) {
+  box-shadow: 0 0 0 1px var(--ol-color-neutral-1000);
+}
+
+/* Inputs */
+ol-input::part(base) {
+  height: 60px;
+  box-shadow: none;
+  border-radius: 2px;
+  background-color: transparent;
+  border-color: var(--ol-color-neutral-400);
+}
+ol-input::part(input) {
+  color: var(--ol-color-neutral-1000);
+  background: transparent;
+  padding: var(--ol-spacing-large) 8px 0;
+  line-height: 20px;
+  height: 100%;
+  font-weight: 300;
+  font-size: var(--ol-font-size-small);
+}
+ol-input::part(form-control-label) {
+  font-family: var(--seat-font-family-medium);
+  font-weight: 400;
+  color: var(--ol-color-neutral-500);
+  padding: 0 8px;
+}
+
+/* Textarea */
+ol-textarea::part(base) {
+  box-shadow: none;
+  border-radius: 2px;
+  background-color: transparent;
+  border-color: var(--ol-color-neutral-400);
+}
+ol-textarea::part(textarea) {
+  font-size: var(--ol-font-size-small);
+  color: var(--ol-color-neutral-900);
+  background: transparent;
+  padding: var(--ol-spacing-x-small);
+}
+ol-textarea::part(form-control-label) {
+  font-size: var(--ol-font-size-small);
+  font-family: var(--seat-font-family-medium);
+  font-weight: 400;
+  color: var(--ol-color-neutral-500);
+  padding: 0;
+}
+
+/* Select */
+ol-select::part(combobox) {
+  height: 60px;
+  border-color: var(--ol-color-neutral-400);
+  border-radius: 2px;
+  box-shadow: none;
+  padding-inline: var(--ol-spacing-x-small);
+}
+ol-select::part(form-control) {
+  position: relative;
+}
+ol-select::part(form-control-label) {
+  position: absolute;
+  top: 20px;
+  left: var(--ol-spacing-x-small);
+  font-family: var(--seat-font-family-medium);
+  font-weight: 400;
+  color: var(--ol-color-neutral-500);
+  line-height: 20px;
+  margin: 0;
+  z-index: 1;
+  transition: all var(--ol-transition-fast) ease;
+}
+ol-select.ofl__select--selected::part(form-control-label) {
+  font-size: var(--ol-font-size-x-small);
+  top: 6px;
+}
+ol-select::part(display-input) {
+  font-size: var(--ol-font-size-small);
+  font-weight: 700;
+  color: var(--ol-color-neutral-900);
+  padding-top: var(--ol-spacing-large);
+}
+ol-select::part(listbox) {
+  border-color: var(--ol-color-neutral-400);
+  border-radius: 2px;
+}
+
+/* Select options */
+ol-option::part(base) {
+  color: var(--ol-color-neutral-900);
+  padding: var(--ol-spacing-x-small);
+  background: transparent;
+}
+ol-option:hover::part(base) {
+  background-color: #e1d7cd;
+}
+ol-option[aria-selected="true"]::part(base) {
+  background-color: #e1d7cd;
+}
+ol-option::part(checked-icon) {
+  display: none;
+}
+
+/* Range */
+ol-range::part(input) {
+  border-radius: var(--ol-border-radius-medium);
+  --thumb-size: 22px;
+  --track-height: 4px;
+  --thumb-background-color: var(--ol-color-neutral-900);
+  --thumb-border-color: var(--ol-color-neutral-900);
+  --ol-color-primary-500: var(--ol-color-neutral-900);
+}
+
+/* Carousel */
+ol-carousel::part(pagination) {
+  gap: var(--ol-spacing-x-small);
+}
+ol-carousel::part(pagination-item) {
+  border-radius: 0;
+  height: 2px;
+  width: 20px;
+  background-color: var(--ol-color-neutral-400);
+}
+ol-carousel::part(pagination-item--active) {
+  background: var(--ol-color-neutral-900);
+}
+.ofl__carousel--showcase-mode .ofl__carousel__item-label {
+  display: none;
+}
+.ofl__carousel--showcase-mode::part(navigation-button) {
+  background: var(--ol-color-neutral-1000);
+  color: var(--ol-color-neutral-50);
+  font-size: var(--ol-font-size-medium);
+}
+.ofl__carousel--showcase-mode::part(navigation-button--next) {
+  position: absolute;
+  right: 10vw;
+}
+.ofl__carousel--showcase-mode::part(navigation-button--previous) {
+  position: absolute;
+  left: 10vw;
+}
+
+/* Radio button */
+ol-radio-button {
+  margin-inline: 0;
+}
+ol-radio-button::part(label) {
+  color: var(--ol-color-neutral-500);
+}
+ol-radio-button[checked]::part(button) {
+  outline: 1px solid var(--ol-color-neutral-900);
+}
+
+/* Radio */
+ol-radio-group::part(form-control-label) {
+  font-family: var(--seat-font-family-regular);
+  font-size: var(--ol-font-size-small);
+  color: var(--ol-color-neutral-500);
+  margin-bottom: var(--ol-spacing-small);
+}
+ol-radio-group ol-radio {
+  line-height: 2.5;
+}
+ol-radio-group ol-radio::part(control) {
+  --toggle-size: 20px;
+  margin: 2px;
+  background-color: transparent;
+  border-color: var(--ol-color-neutral-500);
+  z-index: 1;
+}
+ol-radio-group ol-radio::part(checked-icon) {
+  transform: scale(1.3);
+}
+ol-radio-group ol-radio::part(control--checked) {
+  color: var(--ol-color-primary-600);
+  border-color: var(--ol-color-primary-600);
+}
+ol-radio-group ol-radio::part(label) {
+  line-height: 1.5;
+  color: var(--ol-color-neutral-600);
+}
+
+/* Checkbox */
+ol-checkbox::part(label) {
+  font-family: var(--seat-font-family-regular);
+  font-weight: 400;
+  color: var(--ol-color-neutral-600);
+  line-height: var(--ol-line-height-dense);
+}
+ol-checkbox::part(control) {
+  border-radius: 2px;
+  height: 20px;
+  width: 20px;
+  background: transparent;
+  border-color: var(--ol-color-neutral-400);
+}
+ol-checkbox::part(control--checked) {
+  border-color: var(--ol-color-neutral-1000);
+  background-color: var(--ol-color-neutral-1000);
+  color: var(--ol-color-neutral-0);
+}
+
+/* Dialog */
+ol-dialog::part(panel) {
+  border-radius: 2px;
+}
+
+/* Loading state */
+.ofl__flow__loading,
+.ofl__flow__loading-overlay {
+  font-size: var(--ol-spacing-2x-large);
+}
+.ofl__flow__loading ol-spinner,
+.ofl__flow__loading-overlay ol-spinner {
+  --track-width: 6px;
+}
+.ofl__flow--theme-dark .ofl__flow__loading-overlay {
+  background: transparent;
+}
+
+/* ========================================================================
+   MAP
+   ======================================================================== */
+
+/* Search input */
+.ofl__map__search-input::part(base) {
+  height: 50px;
+}
+.ofl__map__search-input::part(input) {
+  height: 48px;
+  margin-top: 0;
+  padding: 0 var(--ol-input-spacing-medium);
+}
+.ofl__map__distance-range {
+  margin-bottom: var(--ol-spacing-2x-small);
+}
+.ofl__map__map-container {
+  height: 300px;
+  aspect-ratio: 5 / 3;
+  border-radius: 0;
+  overflow: hidden;
+}
+.ofl__map {
+  gap: var(--ol-spacing-small);
+}
+.ofl__map__location-empty {
+  text-align: left;
+  align-items: flex-start;
+  color: var(--ol-color-neutral-700);
+  border-radius: 0;
+}
+
+/* Labels and list container */
+.ofl__map__label {
+  font-family: var(--ol-font-sans);
+  margin-bottom: var(--ol-spacing-medium);
+  color: var(--ol-color-neutral-900);
+}
+.ofl__map__options-list {
+  max-height: 300px;
+  overflow: auto;
+  scrollbar-width: auto;
+  scrollbar-color: var(--ol-color-neutral-900) transparent;
+}
+.ofl__map__options-list::-webkit-scrollbar {
+  width: 8px;
+}
+.ofl__map__options-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+.ofl__map__options-list::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: var(--ol-border-radius-large);
+  border: 3px solid transparent;
+}
+
+/* Option cards */
+.ofl__map__options-list--button .ofl__map__option-item::part(base) {
+  border-radius: 0;
+  border: 1px solid var(--ol-color-neutral-900);
+}
+.ofl__map__options-list--button .ofl__map__option-item::part(button) {
+  border-radius: 0;
+  transition: all var(--ol-transition-medium) ease;
+}
+.ofl__map__options-list--button .ofl__map__option-item:not([disabled]):hover::part(button),
+.ofl__map__options-list--button
+  .ofl__map__option-item.ofl__map__option-item--selected:not([disabled])::part(button) {
+  background-color: var(--ol-color-neutral-0);
+}
+.ofl__map__options-list--button
+  .ofl__map__option-item.ofl__map__option-item--selected::part(button),
+.ofl__map__options-list--button .ofl__map__option-item:hover::part(button) {
+  box-shadow: inset 0 0 0 1px var(--ol-color-neutral-900);
+}
+.ofl__map__option-item__title {
+  font-family: var(--ol-font-sans);
+  color: var(--ol-color-neutral-1000);
+  text-transform: uppercase;
+  margin-bottom: var(--ol-spacing-2x-small);
+}
+.ofl__map__option-item__description,
+.ofl__map__options-list--button .ofl__map__option-item .ofl__map__option-item__properties {
+  font-family: var(--ol-font-sans);
+  font-size: var(--ol-font-size-medium);
+  color: var(--ol-color-neutral-500);
+}
+.ofl__map__options-list::before {
+  background: linear-gradient(to bottom, rgb(255 255 255 / 70%) 0%, rgba(0, 0, 0, 0) 100%);
+}
+.ofl__map__options-list::after {
+  background: linear-gradient(to top, rgb(255 255 255 / 70%) 0%, rgba(0, 0, 0, 0) 100%);
+}
+
+/* Layout helpers */
+.ofl__map__container--visible {
+  gap: var(--ol-spacing-x-large);
+}
+.ofl__map__options-list--button::part(button-group__base) {
+  gap: var(--ol-spacing-2x-small);
+}
+
+/* Rating Component Styling */
+.ofl__rating {
+  --symbol-color: var(--ol-color-neutral-900);
+  --symbol-size: 2em;
+  --symbol-spacing: 0 var(--ol-spacing-medium) 0 0;
+  margin-bottom: var(--ol-spacing-large);
+}
+.ofl__rating__label {
+  margin-bottom: var(--ol-spacing-large);
+  margin-top: var(--ol-spacing-large);
+}
+
+/* ========================================================================
+   PAGE LAYOUT
+   ======================================================================== */
+
+/* Landing installations */
+.oip__page {
+  background-color: transparent;
+}
+.oip__page__header {
+  max-width: 1400px;
+  margin: 0 auto;
+  width: 100%;
+  backdrop-filter: blur(12px);
+}
+.oip__page__content {
+  flex: 1;
+  max-width: 1400px;
+  margin: 0 auto;
+  align-items: center;
+  background-color: transparent;
+}
+.oip__page__content .oip__page__installation {
+  display: flex;
+  align-items: self-start;
+  justify-content: center;
+  width: 50%;
+  padding: var(--ol-spacing-large);
+}
+.oip__page__content .oip__page__image_container {
+  background: transparent;
+}
+.oip__page__content .oip__page__image_container .oip__page__image {
+  background-color: transparent;
+  object-fit: contain;
+}
+
+.ofl__widget,
+.ofl__flow {
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+/* ========================================================================
+   FLOW FORM BLOCK
+   ======================================================================== */
+
+/* Form spacing */
+.ofl__form > :not(:first-child) {
+  margin-top: var(--ol-spacing-large);
+}
+.ofl__form > [component="label"] + [component="checkbox"] {
+  margin-top: 0;
+}
+.ofl__form__field[component="checkbox"] + .ofl__form__field[component="label"] {
+  margin-top: var(--ol-spacing-large);
+}
+
+/* Actions */
+.ofl__flow__actions--bottom {
+  margin-top: var(--ol-spacing-2x-large);
+}
+.ofl__actions__button {
+  width: 100%;
+  max-width: 500px;
+}
+.ofl__flow__actions--top {
+  margin-bottom: 0;
+}
+.ofl__actions--top .ofl__actions__button {
+  width: max-content;
+}
+.ofl__actions--top .ofl__actions__button::part(base) {
+  padding: 0;
+  border: none;
+}
+.ofl__actions--top .ofl__actions__button:hover::part(base) {
+  border: none;
+  box-shadow: none;
+  opacity: 0.8;
+}
+.ofl__actions--top .ofl__actions__button::part(label) {
+  font-family: var(--seat-font-family-regular);
+  font-size: var(--ol-font-size-medium);
+  padding: 0;
+  text-decoration: underline;
+}
+.ofl__actions--top .ofl__actions__button::part(prefix) {
+  display: none;
+}
+
+/* Labels and checkbox */
+.ofl__label {
+  font-family: var(--ol-font-sans);
+  font-weight: 300;
+  color: var(--ol-color-neutral-900);
+}
+.ofl__label h2 {
+  font-family: var(--seat-font-family-bold);
+  font-size: var(--ol-font-size-medium);
+  font-weight: 400;
+}
+.ofl__label p {
+  margin-top: 0;
+}
+
+/* Input states */
+.ofl__input--error::part(base),
+.ofl__input--error:focus::part(base) {
+  border-color: var(--ol-color-danger-600);
+}
+.ofl__input--error::part(form-control-help-text) {
+  color: var(--ol-color-danger-700);
+}
+.ofl__input--error::part(form-control-label),
+.ofl__input--error::part(form-control-label)::after {
+  color: var(--ol-color-neutral-500);
+}
+.ofl__label a {
+  color: var(--ol-color-neutral-900);
+}
+.ofl__input__error-message {
+  position: absolute;
+}
+.ofl__input--success::part(base),
+.ofl__input--success:focus::part(base) {
+  border-color: #009196;
+}
+
+/* Select states */
+.ofl__select--error::part(combobox) {
+  border-color: var(--ol-color-danger-600);
+}
+.ofl__select--success::part(combobox) {
+  border-color: #009196;
+}
+
+/* Stages */
+.ofl__stages--tabs .ofl__stages__stage {
+  line-height: 1.75;
+}
+
+/* ========================================================================
+   CALENDAR AND TIME SELECTION
+   ======================================================================== */
+
+.ofl__calendar__calendar {
+  width: max-content;
+  border: none;
+  padding: var(--ol-spacing-large) var(--ol-spacing-small);
+}
+.ofl__calendar__time-label {
+  font-size: var(--ol-font-size-medium);
+  font-family: var(--ol-font-sans);
+  font-weight: 400;
+  color: var(--ol-color-neutral-900);
+  margin: var(--ol-spacing-3x-large) 0 var(--ol-spacing-x-small);
+}
+.ofl__calendar__time-item {
+  width: 100%;
+}
+.ofl__calendar__time-list--list {
+  max-width: 100%;
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item::part(button) {
+  min-height: 40px;
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item::part(label) {
+  font-size: var(--ol-font-size-small);
+  color: var(--ol-color-neutral-900);
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item[checked]::part(label) {
+  color: var(--ol-color-neutral-0);
+}
+.ofl__calendar__time-list--list::part(button-group) {
+  width: 100%;
+}
+
+/* Compact time list grid */
+.ofl__calendar__time-list--list[size="small"]::part(button-group__base) {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: row;
+  gap: var(--ol-spacing-x-small);
+  justify-content: start;
+}
+.ofl__radio-button__group::part(button-group) {
+  width: 100%;
+}
+.ofl__radio-button__group .ofl__radio-button__button {
+  flex: 1;
+}
+.ofl__radio-button__group .ofl__radio-button__button::part(button) {
+  border-radius: var(--ol-border-radius-pill);
+  min-height: var(--ol-spacing-3x-large);
+  background-color: #c3c3cb0d;
+  border: none;
+}
+.ofl__radio-button__group::part(button-group__base) {
+  gap: var(--ol-spacing-large);
+}
+
+/* ========================================================================
+   RESPONSIVE (MOBILE)
+   ======================================================================== */
+
+@media (max-width: 768px) {
+  :root,
+  :host {
+    --ol-calendar-day-padding: 11px 10px;
+    --ol-calendar-day-font-size: var(--ol-font-size-small);
+  }
+
+  .oip__page__header {
+    width: auto;
+    margin: 0;
+    position: sticky;
+    top: 0;
+  }
+  .oip__page__content {
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+  }
+  .oip__page__content .oip__page__installation {
+    height: auto;
+    width: 100%;
+    align-items: center;
+  }
+
+  ol-carousel::part(navigation) {
+    display: none;
+  }
+  ol-carousel.ofl__carousel--showcase-mode {
+    width: 100%;
+    transform: none;
+  }
+  ol-carousel.ofl__carousel--showcase-mode::part(base) {
+    height: 100%;
+  }
+  .ofl__map__map-container {
+    aspect-ratio: 3 / 3;
+  }
+  .ofl__map__option-item__title {
+    font-size: var(--ol-font-size-small);
+  }
+  .ofl__map__option-item__description,
+  .ofl__map__options-list--button .ofl__map__option-item .ofl__map__option-item__properties {
+    word-break: break-word;
+    font-size: var(--ol-font-size-small);
+  }
+  .ofl__carousel--showcase-mode::part(pagination) {
+    position: static;
+  }
+  .ofl__calendar__time-list--list .ofl__calendar__time-item::part(button) {
+    min-height: 40px;
+  }
+  .ofl__calendar__time-list--list .ofl__calendar__time-item::part(label) {
+    font-size: var(--ol-font-size-small);
+  }
+  .ofl__phone-input.ofl__phone-input__number--show-flag.ofl__phone-input__number--show-code
+    .ofl__phone-input__prefix {
+    width: 100%;
+  }
+  .ofl__calendar__time-list--list[size="small"]::part(button-group__base) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .ofl__flow__title,
+  .ofl__flow__form-container,
+  .ofl__flow__description,
+  .ofl__actions,
+  .ofl__error-content {
+    padding-left: var(--ol-spacing-medium);
+    padding-right: var(--ol-spacing-medium);
+  }
+
+  .ofl__stages--tabs .ofl__stages__progress {
+    --height: 4px;
+  }
+  .ofl__stages--tabs .ofl__stages__progress::part(base) {
+    border-radius: var(--ol-border-radius-large);
+  }
+  .ofl__stages--tabs.ofl__stages--small {
+    padding: var(--ol-spacing-medium);
+  }
+  .ofl__stages--tabs.ofl__stages--small .ofl__stages__stage-name {
+    line-height: 2.2;
+    text-transform: uppercase;
+    font-weight: 400;
+  }
+}
+
+/* ========================================================================
+   RESPONSIVE (DESKTOP)
+   ======================================================================== */
+@media (min-width: 769px) {
+  ol-carousel.ofl__carousel--showcase-mode {
+    width: 100vw;
+    transform: translateX(min(0px, calc(686px - 50vw)));
+  }
+  ol-carousel.ofl__carousel--showcase-mode::part(base) {
+    height: max(320px, 40vh);
+  }
+  ol-carousel.ofl__carousel--showcase-mode ol-carousel-item {
+    opacity: 1;
+    transition:
+      transform 0.3s ease,
+      opacity 0.3s ease;
+  }
+  ol-carousel.ofl__carousel--showcase-mode ol-carousel-item img {
+    transform: scale(0.7);
+    opacity: 0.4;
+    transition:
+      transform 0.3s ease,
+      opacity 0.3s ease;
+  }
+  ol-carousel.ofl__carousel--showcase-mode ol-carousel-item.--is-active + ol-carousel-item img {
+    transform: scale(1.4);
+    opacity: 1;
+  }
+}
+@media (min-width: 1600px) {
+  ol-carousel.ofl__carousel--showcase-mode {
+    width: 1600px;
+    transform: translateX(-110px);
+  }
+}
+
+/* ========================================================================
+   ========================================================================
+   Custom Styles
+   ======================================================================== 
+   ========================================================================*/
+
+.ofl__flow.ofl__flow--step-modelSelection {
+  max-width: 1372px;
+}
+
+.ofl__flow.ofl__flow--step-paymentPreferences,
+.ofl__flow.ofl__flow--step-customerDetails,
+.ofl__flow.ofl__flow--step-dealerSelection,
+.ofl__flow.ofl__flow--step-datetimeSelection,
+.ofl__flow.ofl__flow--step-appointmentThankYouPage,
+.ofl__flow.ofl__flow--step-contactConsent,
+.ofl__flow.ofl__flow--step-contactThankYouPage {
+  max-width: 664px;
+}
+
+.olcs__title {
+  margin-bottom: var(--ol-spacing-large);
+}
+.olcs__title h2,
+.olcs__title p {
+  margin: 0;
+}
+.olcs__title p {
+  font-size: var(--ol-font-size-large);
+  font-family: var(--seat-font-family-regular);
+  font-weight: 300;
+  color: var(--ol-color-neutral-500);
+}
+.olcs__title h2 {
+  font-family: var(--seat-font-family-black);
+  font-weight: 900;
+  line-height: 1.5;
+  font-size: var(--ol-font-size-2x-large);
+}
+.olcs__test-drive-label {
+  margin-bottom: min(10vh, 150px);
+}
+.olcs__test-drive-label h2 {
+  font-size: var(--ol-font-size-large);
+  line-height: 1.5;
+  color: var(--ol-color-neutral-500);
+  margin: var(--ol-spacing-medium) 0;
+}
+.olcs__test-drive-label p {
+  font-family: var(--seat-font-family-medium);
+  font-weight: 400;
+  font-size: var(--ol-font-size-medium);
+  line-height: 1;
+  color: var(--ol-color-neutral-900);
+  margin: var(--ol-spacing-medium) 0;
+}
+.olcs__carousel-label {
+  font-family: var(--seat-font-family-black);
+  font-size: var(--ol-font-size-2x-large);
+  font-weight: 400;
+  line-height: 1.2;
+  color: var(--ol-color-neutral-900);
+  text-align: center;
+  margin: 0;
+}
+.ofl__form__field[name="carouselLabel"] {
+  margin-bottom: 0;
+}
+.olcs__model-image {
+  width: 100%;
+}
+.olcs__card {
+  text-align: center;
+}
+.olcs__label {
+  font-weight: 200;
+  text-align: center;
+  margin: 0;
+}
+h3.olcs__label {
+  font-weight: 200;
+}
+.olcs__dealer {
+  margin-top: var(--ol-spacing-large);
+}
+.olcs__datetime {
+  font-family: var(--seat-font-family-bold);
+  font-size: var(--ol-font-size-large);
+  margin: var(--ol-spacing-3x-large) auto var(--ol-spacing-large);
+}
+.olcs__customer-details {
+  margin: var(--ol-spacing-2x-large) 0 0 0;
+  font-weight: 300;
+}
+.olcs__row__text {
+  display: flex;
+  align-items: center;
+  gap: var(--ol-spacing-large);
+}
+.olcs__row__text h4 {
+  font-family: var(--seat-font-family-bold);
+  width: 50px;
+}
+.olcs__row__text h4,
+.olcs__row__text p {
+  margin: var(--ol-spacing-x-small) 0;
+}
+
+/* ========================================================================
+   RESPONSIVE (MOBILE)
+   ======================================================================== */
+
+@media (max-width: 768px) {
+  .olcs__carousel-label {
+    font-size: var(--ol-font-size-x-large);
+    margin-bottom: var(--ol-spacing-large);
+  }
+  .olcs__test-drive-label h2,
+  .olcs__test-drive-label p {
+    margin: var(--ol-spacing-x-small) 0;
+  }
+  .ofl__form__field[name="carouselLabel"] {
+    margin-bottom: 0;
+  }
+  .olcs__carousel-label p {
+    font-size: var(--ol-font-size-medium);
+  }
+  .olcs__carousel-label h2 {
+    font-size: var(--ol-font-size-2x-large);
+  }
+  .olcs__title h2 {
+    font-size: calc(2 * var(--ol-font-size-medium));
+  }
+}
+
+/* ========================================================================
+   RESPONSIVE (DESKTOP)
+   ======================================================================== */
+@media (min-width: 1440px) {
+  .olcs__carousel-label {
+    font-size: var(--ol-font-size-3x-large);
+  }
+}
+`});var eo={};r(eo,{styles:()=>Io});var to,Io,no=l(()=>{"use strict";to=require("lit"),Io=to.css`
+/**
+ * Transparency / Glass Effect Theme
+ * ==================================
+ *
+ * Provides glassmorphism styling for flow components when rendered
+ * in maximized or fullscreen states with transparent backgrounds.
+ *
+ * This theme is automatically applied via applyOptionalStyles() when
+ * the withTransparency option is enabled in FlowOptions.
+ *
+ * Covers: input, textarea, select/group, rating, phone-input,
+ * calendar, map, stripe, button group, checkbox, radio, carousel.
+ */
+
+/* ========================================================================
+   INPUT
+   ======================================================================== */
+
+.ofl__input::part(base) {
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(16px);
+}
+
+.ofl__input::part(input) {
+  color: #fff;
+}
+
+.ofl__input::part(input)::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.ofl__input::part(form-control-label) {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.ofl__input::part(form-control-help-text) {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* ========================================================================
+   TEXTAREA
+   ======================================================================== */
+
+.ofl__textarea::part(base) {
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(16px);
+}
+
+.ofl__textarea::part(textarea) {
+  color: #fff;
+}
+
+.ofl__textarea::part(textarea)::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.ofl__textarea::part(form-control-label) {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.ofl__textarea::part(form-control-help-text) {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* ========================================================================
+   SELECT / GROUP
+   ======================================================================== */
+
+.ofl__group::part(combobox),
+.ofl__group ol-options,
+.ofl__group::part(display-input) {
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(16px);
+  color: #fff;
+}
+
+.ofl__group::part(listbox) {
+  background: rgba(0, 0, 0, 0.75);
+  backdrop-filter: blur(16px);
+  color: #fff;
+}
+
+.ofl__group ol-option::part(base) {
+  color: #fff;
+}
+
+.ofl__group ol-option::part(base):hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.ofl__group::part(form-control-label) {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.ofl__group::part(form-control-help-text) {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+/* ========================================================================
+   RATING
+   ======================================================================== */
+
+.ofl__rating {
+  color: #fff;
+}
+
+.ofl__rating .ofl__rating__label {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* ========================================================================
+   PHONE INPUT
+   ======================================================================== */
+
+.ofl__phone-input ol-input::part(base) {
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(16px);
+}
+
+.ofl__phone-input ol-input::part(input) {
+  color: #fff;
+}
+
+.ofl__phone-input ol-input::part(input)::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.ofl__phone-input ol-select::part(combobox) {
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(16px);
+  color: #fff;
+}
+
+.ofl__phone-input ol-select::part(listbox) {
+  background: rgba(0, 0, 0, 0.75);
+  backdrop-filter: blur(16px);
+}
+
+.ofl__phone-input::part(form-control-label) {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* ========================================================================
+   CALENDAR
+   ======================================================================== */
+
+.ofl__calendar-container {
+  --ol-calendar-background-color: rgba(0, 0, 0, 0.25);
+  --ol-calendar-color: #fff;
+  --ol-calendar-day-background-color: rgba(0, 0, 0, 0.1);
+  --ol-calendar-day-color: #fff;
+  --ol-calendar-day-hover-background-color: rgba(255, 255, 255, 0.15);
+  --ol-calendar-day-today-color: var(--ol-color-primary-400);
+  --ol-calendar-day-today-background-color: rgba(255, 255, 255, 0.1);
+  --ol-calendar-day-today-inactive-color: rgba(255, 255, 255, 0.3);
+  --ol-calendar-day-weekend-color: var(--ol-color-rose-400);
+  --ol-calendar-day-weekend-hover-background-color: rgba(255, 255, 255, 0.15);
+  --ol-calendar-inactive-color: rgba(255, 255, 255, 0.3);
+  --ol-calendar-inactive-background-color: transparent;
+  --ol-calendar-inactive-selected-color: rgba(255, 255, 255, 0.4);
+  --ol-calendar-inactive-selected-background-color: rgba(255, 255, 255, 0.08);
+  --ol-calendar-header-color: #fff;
+  --ol-calendar-header-hover-color: rgba(255, 255, 255, 0.8);
+  --ol-calendar-header-inactive-color: rgba(255, 255, 255, 0.5);
+  --ol-calendar-week-color: rgba(255, 255, 255, 0.7);
+  --ol-calendar-week-hover-color: rgba(255, 255, 255, 0.9);
+  --ol-calendar-arrow-color: #fff;
+  --ol-calendar-arrow-disabled-color: rgba(255, 255, 255, 0.3);
+  --ol-calendar-month-background-color: transparent;
+  --ol-calendar-month-color: rgba(255, 255, 255, 0.9);
+  --ol-calendar-month-hover-background-color: rgba(255, 255, 255, 0.15);
+  --ol-calendar-year-background-color: transparent;
+  --ol-calendar-year-color: rgba(255, 255, 255, 0.9);
+  --ol-calendar-year-hover-background-color: rgba(255, 255, 255, 0.15);
+  --ol-calendar-popup-background-color: rgba(0, 0, 0, 0.75);
+  --ol-calendar-popup-color: #fff;
+  --ol-calendar-day-popup-background-color: rgba(255, 255, 255, 0.15);
+  --ol-calendar-focus-outline-color: rgba(255, 255, 255, 0.5);
+}
+
+.ofl__calendar-container .ofl__calendar__label {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.ofl__calendar-container .ofl__calendar__time-label {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.ofl__calendar-container .ofl__calendar__time-list--carousel::part(navigation-button) {
+  color: #fff;
+}
+
+.ofl__calendar-container .ofl__calendar__time-item__content {
+  background-color: var(--ol-color-primary-600);
+  color: var(--ol-color-neutral-0);
+}
+
+.ofl__calendar-container .ofl__calendar__time-list--list .ofl__calendar__time-item::part(button) {
+  color: #fff;
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+.ofl__calendar-container
+  .ofl__calendar__time-list--list
+  .ofl__calendar__time-item:hover:not([disabled], [checked])::part(button) {
+  color: #fff;
+}
+
+.ofl__calendar-container
+  .ofl__calendar__time-list--list
+  .ofl__calendar__time-item:hover:not([disabled], [checked])::part(button)::after {
+  border-color: #fff;
+}
+
+/* ========================================================================
+   MAP
+   ======================================================================== */
+
+.ofl__map .ofl__map__label {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* ========================================================================
+   STRIPE
+   ======================================================================== */
+
+.ofl__stripe .ofl__stripe__label {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* ========================================================================
+   BUTTON GROUP
+   ======================================================================== */
+
+.ofl__group ol-button[variant="default"]::part(base) {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.ofl__group ol-button[variant="default"]::part(base):hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+/* ========================================================================
+   CHECKBOX
+   ======================================================================== */
+
+.ofl__checkbox__checkbox::part(label),
+.ofl__checkbox__list .ofl__checkbox__checkbox::part(label) {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.ofl__checkbox__list .ofl__checkbox__label {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* ========================================================================
+   RADIO
+   ======================================================================== */
+
+.ofl__radio__list ol-radio::part(control) {
+  background: rgba(0, 0, 0, 0.25);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.ofl__radio__list ol-radio::part(label) {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.ofl__radio__list::part(form-control-label) {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* ========================================================================
+   CAROUSEL
+   ======================================================================== */
+
+.ofl__carousel::part(navigation-button),
+.ofl__carousel::part(navigation-button--next),
+.ofl__carousel::part(navigation-button--previous) {
+  color: #fff;
+}
+
+.ofl__carousel .ofl__carousel__label {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.ofl__carousel__nav ol-radio-button::part(label) {
+  color: rgba(255, 255, 255, 0.9);
+}
+`});var Lo={};r(Lo,{THEME_LOADERS:()=>s,applyOptionalStyles:()=>Po});module.exports=go(Lo);var p=require("lit"),d=(a,o)=>{try{(0,p.adoptStyles)(a,o)}catch(t){console.warn("Failed to adopt styles using lit-adoptStyles:",t)}};var s={"cupra-diagonal":()=>Promise.resolve().then(()=>(f(),g)),audi:()=>Promise.resolve().then(()=>(h(),u)),"audi-dark":()=>Promise.resolve().then(()=>(y(),x)),"cupra-australia":()=>Promise.resolve().then(()=>(z(),k)),cuernavaca:()=>Promise.resolve().then(()=>(O(),S)),"cupra-events":()=>Promise.resolve().then(()=>(I(),E)),"cupra-base":()=>Promise.resolve().then(()=>(L(),P)),"cupra-germany":()=>Promise.resolve().then(()=>(R(),N)),hyundai:()=>Promise.resolve().then(()=>(M(),j)),"cupra-italy":()=>Promise.resolve().then(()=>(V(),D)),magimix:()=>Promise.resolve().then(()=>(Y(),H)),"onlive-ai":()=>Promise.resolve().then(()=>(X(),K)),"onlive-site":()=>Promise.resolve().then(()=>($(),Q)),"seat-cupra":()=>Promise.resolve().then(()=>(oo(),Z)),seat:()=>Promise.resolve().then(()=>(lo(),ro)),transparency:()=>Promise.resolve().then(()=>(no(),eo))},Ao=async a=>{if(a in s)try{let o=await s[a]();return o.styles??o.default}catch(o){console.warn(`Failed to load theme: ${a}`,o);return}},Po=async({renderRoot:a,baseStyles:o,options:t})=>{let n=[],e=[],c=t?.themeName?.trim().toLowerCase();c&&e.push(c),t?.withTransparency&&e.push("transparency");for(let so of e){let _=await Ao(so);_&&n.push(_)}t?.customStyles&&n.push(t.customStyles);let io=Array.isArray(o)?[...o]:[o];d(a,[...io,...n])};0&&(module.exports={THEME_LOADERS,applyOptionalStyles});