@onlive.ai/common-121 0.2.187 → 0.2.191

package/themes/custom/italy.theme.css

@@ -0,0 +1,827 @@
+/**
+ * ----------------------------------------------------------------------------------------
+ * THEME: Italy
+ * ----------------------------------------------------------------------------------------
+ * This theme is designed for the Italy region, featuring a clean and modern design.
+ * It customizes the Onlive UI components to align with specific branding requirements.
+ * ----------------------------------------------------------------------------------------
+ */
+
+/**
+ * Font Faces
+ * ----------------------------------------------------------------------------------------
+ * Custom font faces used in the Italy theme.
+ */
+@font-face {
+  font-family: "CupraBook";
+  src: url("https://www.cupraofficial.es/etc.clientlibs/cupra-website/components/page/base/clientlibs-old/resources/fonts/otf/Cupra-Book.otf");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "CupraLight";
+  src: url("https://www.cupraofficial.es/etc.clientlibs/cupra-website/components/page/base/clientlibs-old/resources/fonts/otf/Cupra-Light.otf");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "CupraBold";
+  src: url("https://www.cupraofficial.es/etc.clientlibs/cupra-website/components/page/base/clientlibs-old/resources/fonts/otf/Cupra-Bold.otf")
+    format("woff");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "CupraMedium";
+  src: url("https://www.cupraofficial.es/etc.clientlibs/cupra-website/components/page/base/clientlibs-old/resources/fonts/otf/Cupra-Medium.otf")
+    format("woff");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "SeatBlack";
+  src: url("https://www.seat-italia.it/etc.clientlibs/nuevaswebs/components/clientlibs/nuevaswebs/main/resources/fonts/SeatBcn-Black.eot");
+  src: url("https://www.seat-italia.it/etc.clientlibs/nuevaswebs/components/clientlibs/nuevaswebs/main/resources/fonts/SeatBcn-Black.woff")
+    format("woff");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "SeatBold";
+  src: url("https://www.seat-italia.it/etc.clientlibs/nuevaswebs/components/clientlibs/nuevaswebs/main/resources/fonts/SeatBcn-Bold.eot");
+  src: url("https://www.seat-italia.it/etc.clientlibs/nuevaswebs/components/clientlibs/nuevaswebs/main/resources/fonts/SeatBcn-Bold.woff")
+    format("woff");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "SeatBoldItalic";
+  src: url("https://www.seat-italia.it/etc.clientlibs/nuevaswebs/components/clientlibs/nuevaswebs/main/resources/fonts/SeatBcn-BoldItalic.eot");
+  src: url("https://www.seat-italia.it/etc.clientlibs/nuevaswebs/components/clientlibs/nuevaswebs/main/resources/fonts/SeatBcn-BoldItalic.woff")
+    format("woff");
+  font-weight: bold;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "SeatBook";
+  src: url("https://www.seat-italia.it/etc.clientlibs/nuevaswebs/components/clientlibs/nuevaswebs/main/resources/fonts/SeatBcn-Book.eot");
+  src: url("https://www.seat-italia.it/etc.clientlibs/nuevaswebs/components/clientlibs/nuevaswebs/main/resources/fonts/SeatBcn-Book.woff")
+    format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "SeatItalic";
+  src: url("https://www.seat-italia.it/etc.clientlibs/nuevaswebs/components/clientlibs/nuevaswebs/main/resources/fonts/SeatBcn-Italic.eot");
+  src: url("https://www.seat-italia.it/etc.clientlibs/nuevaswebs/components/clientlibs/nuevaswebs/main/resources/fonts/SeatBcn-Italic.woff")
+    format("woff");
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "SeatLight";
+  src: url("https://www.seat-italia.it/etc.clientlibs/nuevaswebs/components/clientlibs/nuevaswebs/main/resources/fonts/SeatBcn-Light.eot");
+  src: url("https://www.seat-italia.it/etc.clientlibs/nuevaswebs/components/clientlibs/nuevaswebs/main/resources/fonts/SeatBcn-Light.woff")
+    format("woff");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "SeatMedium";
+  src: url("https://www.seat-italia.it/etc.clientlibs/nuevaswebs/components/clientlibs/nuevaswebs/main/resources/fonts/SeatBcn-Medium.eot");
+  src: url("https://www.seat-italia.it/etc.clientlibs/nuevaswebs/components/clientlibs/nuevaswebs/main/resources/fonts/SeatBcn-Medium.woff")
+    format("woff");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "SeatRegular";
+  src: url("https://www.seat-italia.it/etc.clientlibs/nuevaswebs/components/clientlibs/nuevaswebs/main/resources/fonts/SeatBcn-Regular.eot");
+  src: url("https://www.seat-italia.it/etc.clientlibs/nuevaswebs/components/clientlibs/nuevaswebs/main/resources/fonts/SeatBcn-Regular.woff")
+    format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+/**
+ * Light Theme Override
+ * ----------------------------------------------------------------------------------------
+ * Overrides for light theme, if applicable.
+ */
+:host,
+.ol-theme-light {
+  --ol-color-primary-50: rgb(240 240 240);
+  --ol-color-primary-100: rgb(220 220 220);
+  --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);
+}
+
+/**
+ * Default theme properties
+ * ----------------------------------------------------------------------------------------
+ * Custom properties to be used throughout the theme for consistent styling.
+ */
+:root,
+:host {
+  -webkit-color-scheme: light;
+  -moz-color-scheme: light;
+  color-scheme: light;
+  color: var(--ol-color-neutral-1000);
+
+  /* Input */
+  --ol-input-label-color: var(--ol-color-neutral-800);
+  --ol-input-floating-label-background-color: transparent;
+  --ol-input-floating-label-font-size-medium: var(--ol-font-size-x-small);
+  --ol-input-label-font-size-medium: var(--ol-font-size-small);
+  --ol-input-floating-label-final-position-medium: 0, -14px;
+  /* Widget */
+  --theme-loading-overlay-bg-color: rgba(255, 255, 255, 0.25);
+  /* Input */
+  --theme-input-success-color: #008a96;
+  --theme-input-color: var(--ol-color-neutral-700);
+  /* Buttons */
+  --theme-button-border-right: 2px solid var(--ol-color-neutral-900);
+  --theme-button-after-display: none;
+  --theme-button-hover-bg-color: var(--ol-color-neutral-0);
+  --theme-button-hover-border-color: var(--ol-color-neutral-1000);
+  --theme-button-hover-text-color: var(--ol-color-neutral-1000);
+  --theme-button-image-filter: none;
+  /* Radio buttons */
+  --theme-radio-button-border: 2px solid var(--ol-color-neutral-200);
+  --theme-radio-button-hover-bg-color: var(--ol-color-neutral-50);
+  --theme-radio-button-hover-image-filter: none;
+  --theme-radio-button-checked-bg-color: var(--ol-color-neutral-100);
+  --theme-radio-button-checked-color: var(--ol-color-neutral-1000);
+  --theme-radio-button-checked-image-filter: none;
+  /* Calendar */
+  --ol-calendar-day-border-radius: 0;
+  --ol-calendar-selected-background-color: var(--ol-color-neutral-900);
+  --ol-calendar-selected-color: var(--ol-color-neutral-0);
+  --ol-calendar-day-margin: 2px;
+  --ol-calendar-day-padding: var(--ol-spacing-small) var(--ol-spacing-medium);
+  --ol-calendar-day-font-weight: var(--ol-font-weight-bold);
+  --ol-calendar-day-font-size: 13px;
+  /* Customs */
+  --theme-card-border-color: var(--ol-color-neutral-200);
+}
+
+/**
+ * Cupra Theme
+ * ----------------------------------------------------------------------------------------
+ * Applies the Cupra-specific theme.
+ */
+.cupra-theme {
+  font-family: "CupraBook", sans-serif;
+  --theme-border-radius: 0;
+  --theme-font-family: "CupraBook", sans-serif;
+  --theme-font-family-book: "CupraBook", sans-serif;
+  --theme-font-family-light: "CupraLight", sans-serif;
+  --theme-font-family-medium: "CupraMedium", sans-serif;
+  --theme-font-family-bold: "CupraBold", sans-serif;
+  --ol-font-sans: var(--theme-font-family-book), sans-serif;
+  /* Buttons */
+  --theme-button-font-family: var(--theme-font-family-regular);
+  --theme-button-font-weight: var(--ol-font-weight-normal);
+  --theme-button-font-size: var(--ol-font-size-small);
+  --theme-button-border-radius: 0;
+  --theme-action-button-width: max(40%, 300px);
+  --theme-button-color: #ffffff;
+  /* Labels */
+  --theme-label-font-family: var(--theme-font-family-book);
+  /* Carrousel */
+  --theme-pagination-item-height: var(--ol-spacing-small);
+  --theme-pagination-item-width: var(--ol-spacing-small);
+  --theme-pagination-item-active-scale: 1.2;
+  --theme-pagination-item-spacing: var(--ol-spacing-x-small);
+  --theme-pagination-item-bg-color: var(--ol-color-neutral-900);
+  --theme-pagination-item-active-bg-color: transparent;
+  --theme-pagination-item-active-border: 1px solid var(--ol-color-neutral-900);
+  --theme-pagination-item-border-radius: var(--ol-border-radius-circle);
+}
+
+/**
+ * Seat Theme
+ * ----------------------------------------------------------------------------------------
+ * Applies the SEAT-specific theme.
+ */
+.seat-theme {
+  font-family: "SeatRegular", sans-serif;
+  --theme-border-radius: var(--ol-border-radius-large);
+  --theme-font-family: "SeatRegular", sans-serif;
+  --theme-font-family-regular: "SeatRegular", sans-serif;
+  --theme-font-family-light: "SeatLight", sans-serif;
+  --theme-font-family-medium: "SeatMedium", sans-serif;
+  --theme-font-family-bold: "SeatBold", sans-serif;
+  --ol-font-sans: var(--theme-font-family-regular), sans-serif;
+  /* Buttons */
+  --theme-button-font-size: var(--ol-font-size-medium);
+  --theme-button-font-family: var(--theme-font-family-bold);
+  --theme-button-font-weight: var(--ol-font-weight-bold);
+  --theme-button-border-radius: var(--ol-border-radius-pill);
+  --theme-action-button-width: max(30%, 200px);
+  --theme-button-color: #ece9e1;
+  /* Labels */
+  --theme-label-font-family: var(--theme-font-family-bold);
+  /* Carrousel */
+  --theme-pagination-item-height: 2px;
+  --theme-pagination-item-width: var(--ol-spacing-large);
+  --theme-pagination-item-active-scale: 1.2;
+  --theme-pagination-item-spacing: var(--ol-spacing-x-small);
+  --theme-pagination-item-bg-color: var(--ol-color-neutral-300);
+  --theme-pagination-item-active-bg-color: var(--ol-color-neutral-950);
+  --theme-pagination-item-active-border: none;
+  --theme-pagination-item-border-radius: 0;
+}
+
+/**
+ * Page Layout
+ * ----------------------------------------------------------------------------------------
+ * Styles for the main page structure and installation layout.
+ */
+.oip__page__content .oip__page__installation {
+  height: 100%;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0;
+}
+
+/**
+ * Onlive UI Components
+ * ----------------------------------------------------------------------------------------
+ * Custom styles for the base Onlive UI components.
+ */
+ol-button::part(base) {
+  padding: var(--ol-spacing-2x-small) var(--ol-spacing-large);
+  border: 1px solid var(--ol-color-neutral-950);
+  border-right: var(--theme-button-border-right);
+  border-radius: var(--theme-button-border-radius);
+  position: initial;
+}
+ol-button::part(label) {
+  font-family: var(--theme-button-font-family);
+  font-size: var(--theme-button-font-size);
+  font-weight: var(--theme-button-font-weight);
+  z-index: 1;
+}
+ol-button::part(spinner) {
+  z-index: 1;
+  font-size: 1.5em;
+}
+ol-button:not([disabled]):hover::part(prefix) {
+  color: var(--ol-color-neutral-1000);
+}
+ol-textarea::part(base) {
+  border-radius: 0;
+}
+ol-button[variant="default"]::part(label) {
+  color: var(--ol-color-neutral-950);
+}
+ol-button[variant="primary"]::part(label) {
+  color: var(--theme-button-color);
+}
+ol-button[variant="default"]::part(base) {
+  background-color: transparent;
+}
+ol-button[variant="primary"]::part(base) {
+  background-color: var(--ol-color-neutral-950);
+  border: 1px solid var(--ol-color-neutral-950);
+}
+ol-button[variant="primary"]:not([disabled]):hover::part(base) {
+  background-color: var(--ol-color-neutral-700);
+  border-color: var(--ol-color-neutral-700);
+}
+ol-button[variant="primary"]::part(base)::before {
+  content: "";
+  position: absolute;
+  display: var(--theme-button-after-display);
+  border-radius: 8px 0 0 8px;
+  border: 2px solid var(--ol-color-neutral-1000);
+  border-right: 0;
+  height: 100%;
+  width: 55%;
+  left: 0;
+  top: 0;
+  z-index: 0;
+}
+ol-button[variant="primary"]::part(base)::after {
+  content: "";
+  position: absolute;
+  display: var(--theme-button-after-display);
+  transform: skewX(-20deg);
+  transform-origin: bottom left;
+  border-radius: 0 8px 6px 0;
+  border: 2px solid var(--ol-color-neutral-1000);
+  border-left: none;
+  height: 100%;
+  width: 50%;
+  right: 18px;
+  top: 0;
+  z-index: 0;
+}
+ol-button[variant="primary"]:not([disabled]):hover::part(base)::before,
+ol-button[variant="primary"]:not([disabled]):hover::part(base)::after {
+  background-color: var(--ol-color-neutral-1000);
+}
+ol-carousel::part(pagination) {
+  gap: var(--theme-pagination-item-spacing);
+}
+ol-carousel::part(pagination-item) {
+  width: var(--theme-pagination-item-width);
+  height: var(--theme-pagination-item-height);
+  background-color: var(--theme-pagination-item-bg-color);
+  border-radius: var(--theme-pagination-item-border-radius);
+}
+ol-carousel::part(pagination-item--active) {
+  border: var(--theme-pagination-item-active-border);
+  background-color: var(--theme-pagination-item-active-bg-color);
+  transform: scale(var(--theme-pagination-item-active-scale));
+}
+ol-input::part(input) {
+  color: var(--theme-input-color);
+}
+ol-input::part(base) {
+  border-color: transparent;
+  border-bottom-color: var(--ol-color-neutral-900);
+  border-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+/**
+ * Flow Package Styles
+ * ----------------------------------------------------------------------------------------
+ * Specific style adjustments for the Flow package components.
+ */
+.ofl__widget {
+  width: calc(100vw - 2 * var(--ol-spacing-x-small));
+  max-width: 100%;
+}
+.ofl__flow__loading-overlay {
+  background-color: var(--theme-loading-overlay-bg-color);
+}
+.ofl__flow {
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+}
+.ofl__flow__stages.ofl__flow__stages--top {
+  margin-bottom: var(--ol-spacing-large);
+}
+.ofl__stages--tabs .ofl__stages__stage {
+  padding-bottom: var(--ol-spacing-x-small);
+}
+.ofl__flow__actions--bottom {
+  margin-top: var(--ol-spacing-2x-large);
+}
+.ofl__actions--top .ofl__actions__button--type-back::part(base) {
+  padding: 0;
+}
+.ofl__actions--top .ofl__actions__button--type-back::part(label) {
+  text-transform: uppercase;
+}
+.ofl__actions--top .ofl__actions__button--type-back ol-icon {
+  background: var(--ol-color-neutral-950);
+  color: var(--ol-color-neutral-0);
+  padding: var(--ol-spacing-x-small);
+  font-size: var(--ol-font-size-large);
+}
+.ofl__actions--bottom .ofl__actions__button {
+  margin: 0 auto;
+  min-width: var(--theme-action-button-width);
+}
+.ofl__actions--top .ofl__actions__button::part(base) {
+  border: none;
+}
+.ofl__actions--top .ofl__actions__button::part(label) {
+  padding-left: var(--ol-spacing-small);
+}
+.ofl__actions--top .ofl__actions__button {
+  width: max-content;
+}
+.ofl__form > :not(:first-child) {
+  margin-top: var(--ol-spacing-large);
+}
+.ofl__label a {
+  color: var(--ol-color-neutral-950);
+}
+.ofl__label a ol-icon {
+  font-size: var(--ol-font-size-x-small);
+  margin-left: var(--ol-spacing-2x-small);
+}
+.ofl__form__field[component="checkbox"] {
+  margin: var(--ol-spacing-x-small);
+}
+.ofl__form__field[component="label"]:not([name="infoCamp"]) {
+  text-align: center;
+}
+.ofl__form__field + .ofl__form__field[component="input"] {
+  margin-top: var(--ol-spacing-x-large);
+}
+.ofl__input::part(form-control),
+.ofl__input::part(form-control-label),
+.ofl__input::part(input) {
+  padding: 0;
+}
+.ofl__input[type="tel"] {
+  --ol-input-floating-label-initial-position-medium: var(--ol-spacing-2x-large), 14px;
+}
+.ofl__input--prefix {
+  margin: 0 var(--ol-spacing-2x-small) 0 0;
+}
+.ofl__input--success::part(base) {
+  border-bottom-color: var(--theme-input-success-color);
+}
+.ofl__input--error::part(base),
+.ofl__input--error:focus::part(base) {
+  border-color: transparent;
+  border-bottom-color: var(--ol-color-danger-600);
+}
+.ofl__phone-input {
+  gap: var(--ol-spacing-2x-small) 0;
+}
+.ofl__phone-input .ofl__phone-input__prefix::part(combobox) {
+  padding: 0;
+  border-radius: 0;
+  border-color: transparent;
+  border-bottom-color: var(--ol-color-neutral-900);
+  border-right: none;
+  box-shadow: none;
+  background: transparent;
+}
+.ofl__phone-input .ofl__phone-input__number {
+  border-left: none;
+}
+.ofl__phone-input .ofl__phone-input__flag {
+  margin-inline-end: var(--ol-spacing-x-small);
+}
+.ofl__phone-input.ofl__phone-input__number--show-flag.ofl__phone-input__number--show-code
+  .ofl__phone-input__prefix {
+  width: 110px;
+}
+.ofl__phone-input__code-option::part(checked-icon) {
+  display: none;
+}
+.ofl__phone-input--success .ofl__phone-input__prefix::part(combobox) {
+  border-bottom-color: var(--theme-input-success-color);
+}
+.ofl__phone-input--error .ofl__phone-input__prefix::part(combobox),
+.ofl__phone-input--error .ofl__phone-input__number::part(base) {
+  border-color: transparent;
+  border-bottom-color: var(--ol-color-danger-600);
+}
+.ofl__radio-button__group {
+  text-align: center;
+}
+.ofl__radio-button__group::part(form-control-input) {
+  margin: var(--ol-spacing-small) auto var(--ol-spacing-medium) auto;
+}
+.ofl__radio-button__group::part(button-group__base) {
+  gap: var(--ol-spacing-x-small);
+}
+.ofl__radio-button__button::part(button) {
+  width: 180px;
+  border: var(--theme-radio-button-border);
+  padding: var(--ol-spacing-small) var(--ol-spacing-large);
+}
+.ofl__radio-button__button__content {
+  width: 180px;
+}
+.ofl__radio-button__icon {
+  display: block;
+}
+.ofl__radio-button__icon img {
+  height: var(--ol-font-size-x-large);
+  filter: var(--theme-button-image-filter);
+}
+.ofl__radio-button__label {
+  line-height: var(--ol-line-height-denser);
+  font-size: var(--ol-font-size-medium);
+  color: var(--ol-color-neutral-800);
+}
+.ofl__radio-button__button:not([disabled]):hover::part(button) {
+  border: 2px solid var(--ol-color-neutral-900);
+  background-color: var(--theme-radio-button-hover-bg-color);
+}
+.ofl__radio-button__button:not([disabled]):hover .ofl__radio-button__icon img {
+  filter: var(--theme-radio-button-hover-image-filter);
+}
+.ofl__radio-button__button[checked]:not([disabled]) .ofl__radio-button__icon img {
+  filter: var(--theme-radio-button-checked-image-filter);
+}
+.ofl__radio-button__button:not([disabled])::part(button--checked) {
+  border: 2px solid var(--ol-color-neutral-900);
+  background-color: var(--theme-radio-button-checked-bg-color);
+}
+.ofl__radio-button__button:hover .ofl__radio-button__label,
+.ofl__radio-button__button--selected:not([disabled]) .ofl__radio-button__label {
+  color: var(--theme-radio-button-checked-color);
+}
+.ofl__checkbox__checkbox {
+  margin: var(--ol-spacing-2x-small) 0;
+}
+.ofl__carousel__label {
+  text-align: center;
+  width: 100%;
+}
+.ofl__carousel__item-container {
+  flex-direction: column-reverse;
+}
+.ofl__carousel__item-label {
+  line-height: 1;
+  font-size: var(--ol-font-size-large);
+  font-family: var(--theme-label-font-family);
+  margin: var(--ol-spacing-x-large) auto -10px;
+}
+.ofl__calendar__calendar-skeleton {
+  --border-radius: 0;
+}
+.ofl__calendar__time-item__content {
+  border-radius: 0;
+}
+.ofl__map {
+  gap: 0;
+}
+.ofl__map__search-form {
+  gap: var(--ol-spacing-large);
+}
+.ofl__map.ofl__map--small .ofl__map__search-form,
+.ofl__map.ofl__map--medium .ofl__map__search-form {
+  flex-direction: row;
+  gap: var(--ol-spacing-small);
+  margin-bottom: var(--ol-spacing-small);
+  align-items: end;
+  flex-wrap: wrap;
+}
+.ofl__map__search-input {
+  flex: 1;
+}
+.ofl__map__search-input::part(input) {
+  padding: 0 var(--ol-input-spacing-small) 0 var(--ol-spacing-2x-small);
+}
+.ofl__map__search-input::part(input)::placeholder {
+  font-size: var(--ol-font-size-small);
+}
+.ofl__map__search-input::part(input):placeholder-shown {
+  text-overflow: ellipsis;
+}
+.ofl__map__search-button-outside {
+  margin: 0;
+}
+.ofl__map__search-suffix-icon {
+  margin: 0;
+}
+.ofl__map__distance-range::part(input) {
+  --thumb-border-radius: 0;
+}
+.ofl__map__distance-range__label {
+  font-weight: var(--ol-font-weight-bold);
+}
+.ofl__map__location-button {
+  margin: 0;
+}
+.ofl__map__location-empty {
+  flex-direction: column;
+  text-align: left;
+  align-items: start;
+  color: var(--ol-color-neutral-800);
+  background: transparent;
+  padding: 0;
+  gap: 0;
+}
+.ofl__map__location-empty h3 {
+  font-size: var(--ol-font-size-large);
+  color: var(--ol-color-neutral-600);
+  margin: var(--ol-spacing-small) 0;
+  line-height: var(--ol-line-height-denser);
+}
+.ofl__map__location-empty p {
+  line-height: var(--ol-line-height-dense);
+  margin: var(--ol-spacing-2x-small) 0;
+}
+.ofl__map__options-list--button .ofl__map__option-item::part(base) {
+  border: 2px solid var(--ol-color-neutral-800);
+  border-radius: var(--theme-border-radius);
+}
+.ofl__map__options-list--button .ofl__map__option-item::part(button) {
+  border-radius: var(--theme-border-radius);
+}
+.ofl__map__option-item__description {
+  font-family: var(--theme-font-family-light), sans-serif;
+  text-transform: uppercase;
+}
+.ofl__error {
+  align-items: center;
+}
+
+/**
+ * Custom Styles (OLCS)
+ * ----------------------------------------------------------------------------------------
+ * Specific styles for the custom components in the confirmation section.
+ */
+.olcs__availability-title {
+  font-family: var(--theme-font-family-book), sans-serif;
+}
+.olcs__card {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--ol-spacing-x-small);
+  border: 2px solid var(--theme-card-border-color);
+  border-radius: var(--theme-border-radius);
+}
+.olcs__card + .olcs__card {
+  margin-top: var(--ol-spacing-x-small);
+}
+.olcs__model {
+  text-align: center;
+  margin: var(--ol-spacing-small);
+}
+.olcs__model-image {
+  height: 80px;
+  width: auto;
+}
+.olcs__model-name {
+  display: flex;
+  flex-direction: column;
+  font-family: var(--theme-label-font-family);
+  line-height: var(--ol-line-height-denser);
+  color: var(--ol-color-neutral-900);
+  font-weight: var(--ol-font-weight-bold);
+}
+.olcs__model-preferences {
+  font-size: var(--ol-font-size-2x-small);
+  color: var(--ol-color-neutral-800);
+  font-weight: var(--ol-font-weight-normal);
+  line-height: var(--ol-line-height-normal);
+}
+.olcs__card .olcs__dealer:first-child {
+  text-align: left;
+}
+.olcs__dealer {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: var(--ol-spacing-3x-small);
+  text-align: right;
+  margin: var(--ol-spacing-small);
+  line-height: var(--ol-line-height-dense);
+}
+.olcs__dealer-name {
+  font-family: var(--theme-label-font-family);
+  font-weight: var(--ol-font-weight-bold);
+}
+.olcs__dealer-address,
+.olcs__dealer-phone {
+  font-size: var(--ol-font-size-small);
+  color: var(--ol-color-neutral-800);
+}
+.olcs__datetime {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding: var(--ol-spacing-x-small) var(--ol-spacing-medium);
+  justify-content: space-between;
+}
+.olcs__datetime-icon {
+  font-size: 2em;
+  color: var(--ol-color-neutral-700);
+  margin: 0 var(--ol-spacing-2x-large);
+}
+.olcs__datetime-date {
+  text-align: right;
+  font-weight: var(--ol-font-weight-bold);
+  font-size: var(--ol-font-size-small);
+}
+.olcs__customer {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding: var(--ol-spacing-x-small) var(--ol-spacing-medium);
+  justify-content: space-between;
+}
+.olcs__customer-details {
+  text-align: right;
+}
+.olcs__customer-icon {
+  font-size: 2em;
+  color: var(--ol-color-neutral-700);
+  margin: 0 var(--ol-spacing-2x-large);
+}
+.olcs__customer-name {
+  font-weight: var(--ol-font-weight-bold);
+}
+.olcs__customer-email,
+.olcs__customer-phone {
+  font-size: var(--ol-font-size-small);
+  color: var(--ol-color-neutral-800);
+}
+.olcs__mega-icon {
+  font-size: var(--ol-font-size-3x-large);
+  color: var(--ol-color-neutral-950);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: var(--ol-spacing-x-large) 0;
+}
+.olcs__label {
+  text-align: center;
+  font-size: var(--ol-font-size-medium);
+  margin: var(--ol-spacing-large) 0 var(--ol-spacing-2x-large) 0;
+}
+.olcs__label--no-margin-top {
+  margin-top: 0;
+}
+.olcs__label--no-margin-bottom {
+  margin-bottom: 0;
+}
+
+/**
+ * Mobile Adjustments
+ * ----------------------------------------------------------------------------------------
+ * Responsive adjustments for mobile devices (max-width: 768px).
+ */
+@media only screen and (max-width: 768px) {
+  :root,
+  :host,
+  .ol-theme-light {
+    --ol-calendar-day-padding: var(--ol-spacing-x-small) var(--ol-spacing-small);
+  }
+  .ofl__widget {
+    width: 100vw;
+  }
+  .ofl__radio-button__group::part(button-group__base) {
+    flex-direction: column;
+  }
+  .ofl__map__search-form {
+    flex-direction: column;
+  }
+  .ofl__actions--bottom .ofl__actions__button,
+  .ofl__map__search-button-outside {
+    width: 100%;
+  }
+  .ofl__radio-button__button::part(button) {
+    width: 100%;
+  }
+  .ofl__radio-button__button__content {
+    width: 100%;
+  }
+  .ofl__radio-button__icon img {
+    height: var(--ol-font-size-x-large);
+  }
+  .olcs__label {
+    font-size: var(--ol-font-size-medium);
+  }
+  .olcs__card {
+    flex-direction: column;
+    gap: 0;
+    text-align: center;
+  }
+  .olcs__model {
+    text-align: center;
+    margin: 0 auto;
+  }
+  .olcs__dealer {
+    text-align: center;
+  }
+  .olcs__datetime {
+    gap: var(--ol-spacing-2x-large);
+  }
+  .olcs__datetime-icon {
+    font-size: 1.5em;
+    margin: 0;
+  }
+  .olcs__datetime-date {
+    font-size: var(--ol-font-size-small);
+    line-height: var(--ol-line-height-dense);
+    max-width: 180px;
+  }
+  .olcs__customer {
+    gap: var(--ol-spacing-2x-large);
+  }
+  .olcs__customer-icon {
+    font-size: 1.75em;
+    margin: 0;
+  }
+  .olcs__customer-details {
+    font-size: var(--ol-font-size-small);
+  }
+}