@onlive.ai/common-121 0.2.179 → 0.2.187

package/themes/custom/cupra-diagonal.theme.js

@@ -0,0 +1,1031 @@
+/*! @onlive.ai/common-121 v0.2.187 | © 2026 Onlive.ai */
+import{css as o}from"lit";var r=o`
+/**
+ * Cupra Dark Theme
+ */
+
+/* ========================================================================
+  THEME TOKENS
+  ======================================================================== */
+
+:root,
+:host,
+.ol-theme-dark {
+  background-color: transparent;
+  font-family: var(--ol-font-sans);
+  font-weight: 300;
+
+  /* Cupra colors */
+  --cupra-color-surface-glass: #c3c3cb0d;
+  --cupra-color-surface-solid: #15181e;
+  --cupra-color-accent: #b2764d;
+  --cupra-color-accent-soft: #c49678;
+  --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-outline-70: #fafafab5;
+
+  /* Onlive UI Palette - Dark Theme */
+  --ol-color-primary-50: rgb(0 0 0);
+  --ol-color-primary-100: rgb(40 40 40);
+  --ol-color-primary-200: rgb(80 80 80);
+  --ol-color-primary-300: rgb(120 120 120);
+  --ol-color-primary-400: rgb(160 160 160);
+  --ol-color-primary-500: var(--cupra-color-accent);
+  --ol-color-primary-600: var(--cupra-color-accent);
+  --ol-color-primary-700: var(--cupra-color-accent-soft);
+  --ol-color-primary-800: rgb(255 255 255);
+  --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);
+  --ol-calendar-day-border-radius: 50%;
+  --ol-calendar-day-padding: 15px;
+  --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);
+  --ol-calendar-selected-background-color: rgba(250, 250, 250, 0.15);
+  --ol-calendar-selected-color: #fafafa;
+  --ol-calendar-day-font-size: var(--ol-font-size-medium);
+  --ol-calendar-day-inactive-font-size: var(--ol-font-size-medium);
+  --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);
+  --ol-input-floating-label-background-color: transparent;
+  --ol-input-floating-label-font-size-medium: var(--ol-font-size-x-small);
+}
+
+/* ========================================================================
+   CORE ONLIVE UI COMPONENTS
+   ======================================================================== */
+
+/* Spinner */
+ol-spinner {
+  --track-width: 6px;
+  --track-color: #2f3a41c7;
+  --indicator-color: var(--ol-color-neutral-900);
+}
+
+/* Buttons */
+ol-button::part(base) {
+  border-width: 2px;
+  border-radius: var(--ol-border-radius-large);
+  text-transform: uppercase;
+}
+ol-button::part(label) {
+  padding: var(--ol-spacing-2x-small) var(--ol-spacing-medium);
+  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::part(spinner) {
+  --track-width: 4px;
+  font-size: 1.5em;
+}
+ol-button:hover:not([disabled])::part(base) {
+  opacity: 0.8;
+}
+
+/* Inputs */
+ol-input::part(base) {
+  box-shadow: none;
+  background-color: var(--cupra-color-surface-glass);
+  height: 74px;
+  border-radius: var(--ol-border-radius-medium) var(--ol-border-radius-medium) 0 0;
+  border-color: transparent;
+  border-bottom-color: var(--ol-color-neutral-600);
+}
+ol-input:focus::part(base) {
+  border-bottom-color: var(--cupra-color-accent);
+}
+ol-input::part(input) {
+  color: var(--ol-color-neutral-900);
+  margin-top: 28px;
+  height: 44px;
+  background: transparent;
+  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 {
+  margin-left: 1px;
+}
+
+/* Textarea */
+ol-textarea::part(base) {
+  box-shadow: none;
+  background-color: var(--cupra-color-surface-glass);
+  border-radius: var(--ol-border-radius-medium) var(--ol-border-radius-medium) 0 0;
+  border-color: transparent;
+  border-bottom-color: var(--ol-color-neutral-600);
+}
+ol-textarea::part(textarea) {
+  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(--ol-font-sans);
+  font-weight: 300;
+  color: var(--ol-color-neutral-600);
+  padding: var(--ol-spacing-x-small);
+}
+
+/* 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%);
+  box-shadow: none;
+}
+ol-select::part(combobox):hover,
+ol-select[open]::part(combobox) {
+  background: linear-gradient(179deg, #fafafa33 0%, #c3c3cb1a 85%, #c3c3cb26 100%);
+}
+ol-select::part(form-control-label) {
+  font-family: var(--ol-font-sans);
+  color: var(--ol-color-neutral-700);
+  font-size: var(--ol-font-size-small);
+  margin-left: var(--ol-spacing-large);
+  margin-bottom: var(--ol-spacing-2x-small);
+}
+ol-select::part(display-input) {
+  font-family: var(--ol-font-sans);
+  color: var(--ol-color-neutral-800);
+}
+ol-select::part(listbox) {
+  border-radius: var(--ol-border-radius-large);
+  margin-block: var(--ol-spacing-2x-small);
+  background: transparent;
+}
+ol-select::part(listbox)::after {
+  content: "";
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(24px);
+  pointer-events: none;
+  background: #15181ef4;
+  z-index: -1;
+}
+
+/* Select options */
+ol-option::part(base) {
+  color: var(--ol-color-neutral-900);
+  padding: var(--ol-spacing-x-small) var(--ol-spacing-small);
+  background: transparent;
+}
+ol-option:hover::part(base) {
+  background-color: #c3c3cb0d;
+}
+ol-option[aria-selected="true"]::part(base) {
+  border-left: 4px solid var(--cupra-color-accent);
+  background-color: #c3c3cb0d;
+}
+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-item) {
+  border-radius: var(--ol-border-radius-small);
+  height: 4px;
+  width: 38px;
+  background-color: #5a5c67;
+}
+ol-carousel::part(pagination-item--active) {
+  transform: scale(1);
+  background: linear-gradient(47deg, #b2764d 0%, #885a3b 65%, #6c472f 100%);
+}
+.ofl__carousel__item-label {
+  font-family: var(--ol-font-sans);
+  font-weight: 400;
+}
+.ofl__carousel__nav-container {
+  padding: var(--ol-spacing-x-small);
+  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;
+  gap: var(--ol-spacing-x-small);
+}
+.ofl__carousel__nav-item::part(button) {
+  height: 50px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+}
+.ofl__carousel__nav-item:hover::part(button) {
+  background: transparent;
+}
+.ofl__carousel__nav-item[checked]::part(button--checked) {
+  background: #fafafa26;
+  border: 1px solid #fafafa1a;
+  outline: none;
+}
+.ofl__carousel__nav-item::part(label) {
+  font-size: var(--ol-font-size-medium);
+  font-weight: 300;
+  color: var(--ol-color-neutral-900);
+}
+
+/* Radio button */
+ol-radio-button {
+  margin-inline: 0;
+}
+ol-radio-button::part(label) {
+  color: var(--ol-color-neutral-800);
+}
+ol-radio-button:hover::part(button),
+ol-radio-button[checked]::part(button) {
+  background: var(--cupra-color-overlay-15);
+}
+ol-radio-button[checked]::part(button) {
+  outline: 1px solid var(--cupra-color-outline-70);
+}
+
+/* Radio */
+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);
+}
+ol-radio-group ol-radio {
+  line-height: 2.5;
+}
+ol-radio-group ol-radio::part(control) {
+  --toggle-size: 24px;
+  margin: 2px;
+  background-color: transparent;
+  border-color: var(--ol-color-neutral-700);
+  z-index: 1;
+}
+ol-radio-group ol-radio::part(control):after {
+  content: "";
+  position: absolute;
+  width: calc(100% + 8px);
+  height: calc(100% + 8px);
+  border-radius: var(--ol-border-radius-circle);
+  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-radio-group ol-radio:hover::part(control)::after {
+  opacity: 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.75;
+}
+
+/* Checkbox */
+ol-checkbox::part(label) {
+  font-family: var(--ol-font-sans);
+  font-weight: 400;
+  color: var(--ol-color-neutral-800);
+  line-height: var(--ol-line-height-dense);
+}
+ol-checkbox::part(control) {
+  border-radius: 6px;
+  height: 24px;
+  width: 24px;
+  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;
+}
+
+/* Dialog */
+ol-dialog::part(panel) {
+  border-radius: var(--ol-border-radius-x-large);
+}
+
+/* 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: 46px;
+  margin-top: 0;
+}
+.ofl__map__distance-range {
+  margin-bottom: var(--ol-spacing-2x-small);
+}
+.ofl__map__map-container {
+  height: 300px;
+  aspect-ratio: 5 / 3;
+  border-radius: var(--ol-border-radius-x-large);
+  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: var(--ol-border-radius-x-large);
+}
+
+/* Labels and list container */
+.ofl__map__label {
+  font-family: var(--ol-font-sans);
+  font-weight: 400;
+  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-400) 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: var(--ol-border-radius-x-large);
+  overflow: hidden;
+  border: 1px solid var(--ol-color-neutral-300);
+  backdrop-filter: blur(24px);
+}
+.ofl__map__options-list--button
+  .ofl__map__option-item.ofl__map__option-item--selected:not([disabled])::part(base) {
+  border-color: var(--ol-color-neutral-1000);
+}
+.ofl__map__options-list--button .ofl__map__option-item::part(button) {
+  border-radius: var(--ol-border-radius-x-large);
+  background: linear-gradient(
+    179deg,
+    var(--dg-global-opacity-white-15, hsla(0, 0%, 98%, 0.15)) .73%,
+    var(--dg-global-opacity-grey-05, hsla(240, 7%, 78%, 0.05)) 84.63%,
+    var(--dg-global-opacity-grey-10, hsla(240, 7%, 78%, 0.1)) 99.44%
+  );
+}
+.ofl__map__options-list--button
+  .ofl__map__option-item.ofl__map__option-item--selected:not([disabled])::part(button) {
+  background-color: transparent;
+}
+.ofl__map__options-list--button .ofl__map__option-item:not([disabled]):hover::part(button) {
+  background: linear-gradient(
+    179deg,
+    var(--dg-global-opacity-white-20, hsla(0, 0%, 98%, 0.2)) .73%,
+    var(--dg-global-opacity-grey-10, hsla(240, 7%, 78%, 0.1)) 89.57%,
+    var(--dg-global-opacity-grey-15, hsla(240, 7%, 78%, 0.15)) 99.44%
+  );
+}
+.ofl__map__option-item__title {
+  font-family: var(--ol-font-sans);
+  font-weight: 400;
+  color: var(--ol-color-neutral-1000);
+  text-transform: uppercase;
+  margin-bottom: var(--ol-spacing-2x-small);
+}
+.ofl__map__options-list--button .ofl__map__option-item__title {
+  font-weight: 500;
+}
+.ofl__map__option-item__description,
+.ofl__map__option-item__properties {
+  font-family: var(--ol-font-sans);
+  font-weight: 300;
+  color: var(--ol-color-neutral-800);
+}
+
+/* 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);
+}
+
+/* ========================================================================
+   PAGE LAYOUT
+   ======================================================================== */
+
+/* Landing installations */
+
+.oip__page__content {
+  background-color: #15181e;
+}
+.oip__page__content .oip__page__installation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50%;
+  padding: var(--ol-spacing-2x-large);
+  height: calc(100vh - 2 * var(--ol-spacing-2x-large));
+}
+.oip__page__content .oip__page__image_container .oip__page__image {
+  background-color: #15181e;
+  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-2x-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%;
+}
+.ofl__flow__actions--top {
+  margin-bottom: var(--ol-spacing-small);
+}
+.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::part(label) {
+  font-size: var(--ol-font-size-medium);
+  font-weight: 300;
+  padding: var(--ol-spacing-2x-small) 10px;
+}
+.ofl__actions--top .ofl__actions__button::part(prefix) {
+  font-size: 20px;
+}
+
+/* Labels and checkbox */
+.ofl__label {
+  font-family: var(--ol-font-sans);
+  font-weight: 300;
+  color: var(--ol-color-neutral-900);
+}
+.ofl__label h2 {
+  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: transparent;
+  border-bottom-color: var(--ol-color-danger-500);
+}
+.ofl__input--error::part(form-control-help-text) {
+  color: var(--ol-color-danger-500);
+}
+.ofl__input--error::part(form-control-label) {
+  color: var(--ol-color-neutral-600);
+}
+.ofl__input--success::part(base),
+.ofl__input--success:focus::part(base) {
+  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 */
+.ofl__phone-input .ofl__phone-input__prefix::part(combobox) {
+  border-color: transparent;
+  border-bottom-color: var(--ol-color-neutral-600);
+  border-radius: 0;
+  height: 40px;
+  background: transparent;
+  box-shadow: none;
+}
+.ofl__phone-input .ofl__phone-input__prefix::part(form-control) {
+  height: 74px;
+  background-color: var(--cupra-color-surface-glass);
+  border-radius: var(--ol-border-radius-medium) var(--ol-border-radius-medium) 0 0;
+}
+.ofl__phone-input .ofl__phone-input__prefix::part(form-control-input) {
+  padding-top: 34px;
+}
+.ofl__phone-input .ofl__phone-input__prefix::part(form-control-label) {
+  position: absolute;
+  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);
+  margin: 0;
+}
+.ofl__phone-input--success .ofl__phone-input__prefix::part(combobox) {
+  border-bottom-color: var(--ol-color-neutral-900);
+}
+.ofl__phone-input--error .ofl__phone-input__prefix::part(combobox) {
+  color: var(--ol-color-neutral-600);
+  border-bottom-color: var(--ol-color-danger-500);
+}
+.ofl__phone-input--error .ofl__phone-input__number::part(form-control-label) {
+  color: var(--ol-color-neutral-600);
+}
+.ofl__phone-input--error .ofl__phone-input__number::part(base) {
+  color: inherit;
+  border-color: transparent;
+  border-bottom-color: var(--ol-color-danger-500);
+}
+.ofl__phone-input .ofl__phone-input__error-message {
+  color: var(--ol-color-danger-500);
+}
+.ofl__phone-input.ofl__phone-input__number--label:not(.ofl__phone-input__number--prefix-label):not(
+    .ofl__phone-input__number--floating-label
+  )
+  .ofl__phone-input__number {
+  margin-top: 0;
+}
+
+/* ========================================================================
+   CALENDAR AND SELECTION BLOCK
+   ======================================================================== */
+
+.ofl__stages {
+  font-family: var(--ol-font-sans);
+  font-weight: 400;
+}
+.ofl__stages--tabs .ofl__stages__stage {
+  line-height: 1.5;
+  text-transform: uppercase;
+  border-bottom: none;
+}
+.ofl__stages--tabs .ofl__stages__stage::after {
+  content: "";
+  display: inline-block;
+  width: 100%;
+  height: 4px;
+  border-radius: var(--ol-border-radius-x-large);
+  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%);
+}
+.ofl__stages--tabs .ofl__stages__stage .ofl__stages__stage-number {
+  display: none;
+}
+.ofl__flow__stages.ofl__flow__stages--top {
+  margin-bottom: var(--ol-spacing-medium);
+}
+.ofl__calendar__calendar {
+  width: max-content;
+  background: var(--cupra-color-overlay-05);
+  border-radius: 12px;
+  border: 1px solid var(--cupra-color-overlay-10);
+  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__label) {
+  font-weight: var(--ol-font-weight-normal);
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item::part(button) {
+  min-height: 50px;
+  border-color: transparent;
+  background: var(--cupra-color-overlay-05);
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item::part(label) {
+  font-size: var(--ol-font-size-medium);
+  font-family: var(--ol-font-sans);
+  font-weight: 300;
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item[checked]::part(button) {
+  color: var(--ol-color-neutral-900);
+  background-color: var(--cupra-color-overlay-15);
+}
+.ofl__calendar__time-list--list::part(button-group) {
+  width: 100%;
+}
+.ofl__calendar__time-list--list
+  .ofl__calendar__time-item:hover:not([disabled], [checked])::part(button) {
+  background: var(--cupra-color-overlay-10);
+  border: transparent;
+}
+.ofl__calendar__time-list--list
+  .ofl__calendar__time-item:hover:not([disabled], [checked])::part(button):after {
+  border: none;
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item:hover::part(button--checked) {
+  border: none;
+}
+
+/* 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__content {
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+  }
+  .oip__page__content .oip__page__installation {
+    height: auto;
+    width: calc(100% - 2 * var(--ol-spacing-2x-large));
+  }
+
+  ol-carousel::part(pagination) {
+    display: flex;
+    gap: var(--ol-spacing-x-small) var(--ol-spacing-2x-small);
+  }
+  ol-carousel::part(pagination-item) {
+    width: 24px;
+    transition: width var(--ol-transition-fast) ease;
+  }
+  ol-carousel::part(pagination-item--active) {
+    width: 36px;
+  }
+  ol-carousel.ofl__carousel--showcase-mode {
+    width: 100%;
+    transform: none;
+  }
+  ol-carousel.ofl__carousel--showcase-mode::part(base) {
+    height: 100%;
+  }
+  .ofl__carousel__nav-container {
+    margin: var(--ol-spacing-4x-large) 0 0 0;
+    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__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 {
+    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::part(pagination) {
+    display: none;
+  }
+  ol-carousel.ofl__carousel--showcase-mode {
+    width: 100vw;
+    transform: translateX(min(0px, calc(686px - 50vw)));
+  }
+  ol-carousel.ofl__carousel--showcase-mode::part(base) {
+    height: 500px;
+  }
+  ol-carousel.ofl__carousel--showcase-mode ol-carousel-item {
+    opacity: 1;
+    transform: scale(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: 1200px) {
+  ol-carousel.ofl__carousel--showcase-mode::part(base) {
+    height: 400px;
+  }
+}
+@media (min-width: 1372px) {
+  ol-carousel.ofl__carousel--showcase-mode::part(base) {
+    height: 450px;
+  }
+}
+@media (min-width: 1440px) {
+  ol-carousel.ofl__carousel--showcase-mode::part(base) {
+    height: 520px;
+  }
+}
+@media (min-width: 2000px) {
+  ol-carousel.ofl__carousel--showcase-mode {
+    width: 2000px;
+    transform: translateX(-330px);
+  }
+  ol-carousel.ofl__carousel--showcase-mode::part(base) {
+    height: 600px;
+  }
+}
+
+/* ========================================================================
+   ========================================================================
+   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 {
+  text-transform: uppercase;
+  font-weight: 300;
+  margin: 0;
+}
+.olcs__title p {
+  color: var(--ol-color-neutral-800);
+}
+.olcs__title h2 {
+  line-height: 1.5;
+  font-weight: 200;
+  font-size: var(--ol-font-size-2x-large);
+}
+.olcs__carousel-label p {
+  text-transform: uppercase;
+  font-size: var(--ol-font-size-medium);
+  font-weight: 300;
+  color: var(--ol-color-neutral-800);
+  margin: 0;
+}
+.olcs__carousel-label h2 {
+  text-transform: uppercase;
+  font-size: var(--ol-font-size-2x-large);
+  font-weight: 400;
+  line-height: 1.2;
+  color: var(--ol-color-neutral-900);
+  margin: 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-weight: 500;
+  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 {
+  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 {
+    text-align: center;
+    margin-bottom: var(--ol-spacing-large);
+  }
+  .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 p {
+    font-size: var(--ol-font-size-x-large);
+  }
+  .olcs__title p {
+    font-size: var(--ol-font-size-small);
+  }
+  .olcs__carousel-label h2 {
+    font-size: var(--ol-font-size-3x-large);
+  }
+}
+`;export{r as styles};