@onlive.ai/common-121 0.2.179 → 0.2.187

package/themes/custom/germany.theme.d.ts

@@ -0,0 +1,3 @@
+/*! @onlive.ai/common-121 v0.2.187 | © 2026 Onlive.ai */
+import 'lit';
+export { s as styles } from '../../germany.theme-Dra_5Jz0.js';

package/themes/custom/germany.theme.js

@@ -0,0 +1,716 @@
+/*! @onlive.ai/common-121 v0.2.187 | © 2026 Onlive.ai */
+import{css as o}from"lit";var t=o`
+/**
+ * ----------------------------------------------------------------------------------------
+ * THEME: Germany
+ * ----------------------------------------------------------------------------------------
+ * This theme is designed for the Germany region, featuring a clean and modern design.
+ * It customizes the Onlive UI components to align with specific branding requirements.
+ * ----------------------------------------------------------------------------------------
+ */
+
+/**
+ * Global Variables
+ * ----------------------------------------------------------------------------------------
+ * Defines the main color palette, fonts, and other global settings.
+ */
+:root,
+:host {
+  /* Onlive UI Font and Vars */
+  --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-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;
+}
+
+/**
+ * Light Theme Override
+ * ----------------------------------------------------------------------------------------
+ * Overrides for light theme, if applicable.
+ */
+.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);
+}
+
+/**
+ * Dark Theme Override
+ * ----------------------------------------------------------------------------------------
+ * Overrides for dark theme, if applicable.
+ */
+.ol-theme-dark {
+  --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: rgb(200 200 200);
+  --ol-color-primary-600: rgb(230 230 230);
+  --ol-color-primary-700: rgb(240 240 240);
+  --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 Theme
+ * ----------------------------------------------------------------------------------------
+ * Applies the Cupra-specific theme.
+ */
+.cupra-theme {
+  -webkit-color-scheme: dark;
+  -moz-color-scheme: dark;
+  color-scheme: dark;
+  color: var(--ol-color-neutral-900);
+
+  --ol-color-primary-50: rgb(0 0 0) !important;
+  --ol-color-primary-100: rgb(40 40 40) !important;
+  --ol-color-primary-200: rgb(80 80 80) !important;
+  --ol-color-primary-300: rgb(120 120 120) !important;
+  --ol-color-primary-400: rgb(160 160 160) !important;
+  --ol-color-primary-500: rgb(200 200 200) !important;
+  --ol-color-primary-600: rgb(230 230 230) !important;
+  --ol-color-primary-700: rgb(240 240 240) !important;
+  --ol-color-primary-800: rgb(255 255 255) !important;
+  --ol-color-primary-900: rgb(255 255 255) !important;
+  --ol-color-primary-950: rgb(255 255 255) !important;
+
+  --ol-color-neutral-50: rgb(34, 36, 40) !important;
+  --ol-color-neutral-100: rgb(41, 44, 49) !important;
+  --ol-color-neutral-200: rgb(51, 54, 58) !important;
+  --ol-color-neutral-300: rgb(64, 68, 73) !important;
+  --ol-color-neutral-400: rgb(82, 87, 93) !important;
+  --ol-color-neutral-500: rgb(103, 109, 116) !important;
+  --ol-color-neutral-600: rgb(136, 143, 151) !important;
+  --ol-color-neutral-700: rgb(172, 180, 190) !important;
+  --ol-color-neutral-800: rgb(207, 214, 222) !important;
+  --ol-color-neutral-900: rgb(227, 232, 238) !important;
+  --ol-color-neutral-950: rgb(242, 242, 242) !important;
+  --ol-color-neutral-1000: rgb(255 255 255) !important;
+  --ol-color-neutral-0: rgb(0 0 0) !important;
+
+  --ol-font-sans: Cupra, sans-serif;
+  --ol-input-label-color: var(--ol-color-neutral-800);
+  --ol-calendar-day-border-radius: var(--ol-border-radius-large);
+  /* Widget */
+  --theme-loading-overlay-bg-color: rgba(26, 27, 30, 0.05);
+  /* Border radius */
+  --theme-border-radius: var(--ol-border-radius-large);
+  /* Buttons */
+  --theme-button-width: calc(100% - 18px);
+  --theme-button-text-transform: uppercase;
+  --theme-button-border-radius: var(--ol-border-radius-large) 0 var(--ol-border-radius-large)
+    var(--ol-border-radius-large);
+  --theme-button-border-right: none;
+  --theme-button-after-display: flex;
+  --theme-button-hover-bg-color: transparent;
+  --theme-button-hover-border-color: var(--ol-color-neutral-1000);
+  --theme-button-hover-text-color: var(--ol-color-neutral-0);
+  --theme-button-image-filter: invert(1);
+  /* Radio buttons */
+  --theme-radio-button-border: 2px solid var(--ol-color-neutral-800);
+  --theme-radio-button-hover-bg-color: var(--ol-color-neutral-950);
+  --theme-radio-button-hover-image-filter: none;
+  --theme-radio-button-checked-bg-color: var(--ol-color-neutral-950);
+  --theme-radio-button-checked-color: var(--ol-color-neutral-0);
+  --theme-radio-button-checked-image-filter: none;
+  /* Input */
+  --theme-input-success-color: var(--ol-color-neutral-1000);
+  --theme-input-color: var(--ol-color-neutral-700);
+  /* Carrousel */
+  --theme-pagination-item-size: var(--ol-spacing-x-small);
+  --theme-pagination-item-active-scale: 1;
+  --theme-pagination-item-spacing: var(--ol-spacing-medium);
+  --theme-pagination-item-bg-color: var(--ol-color-neutral-500);
+  --theme-pagination-item-active-bg-color: var(--ol-color-neutral-900);
+  /* Customs */
+  --theme-card-border-color: var(--ol-color-neutral-500);
+}
+
+/**
+ * Seat Theme
+ * ----------------------------------------------------------------------------------------
+ * Applies the SEAT-specific theme.
+ */
+.seat-theme {
+  -webkit-color-scheme: light;
+  -moz-color-scheme: light;
+  color-scheme: light;
+  color: var(--ol-color-neutral-1000);
+  font-family: SEATBCN, sans-serif;
+
+  --ol-font-sans: SEATBCN, sans-serif;
+  --ol-input-label-color: var(--ol-color-neutral-800);
+  --ol-calendar-day-border-radius: var(--ol-border-radius-medium);
+  /* Widget */
+  --theme-loading-overlay-bg-color: rgba(255, 255, 255, 0.25);
+  /* Border radius */
+  --theme-border-radius: var(--ol-border-radius-medium);
+  /* Buttons */
+  --theme-button-width: 100%;
+  --theme-button-text-transform: uppercase;
+  --theme-button-border-radius: var(--ol-border-radius-medium);
+  --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-100);
+  --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-50);
+  --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;
+  /* Input */
+  --theme-input-success-color: #008a96;
+  --theme-input-color: var(--ol-color-neutral-700);
+  /* Carrousel */
+  --theme-pagination-item-size: 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;
+  /* Customs */
+  --theme-card-border-color: var(--ol-color-neutral-200);
+}
+
+/**
+ * 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) {
+  width: var(--theme-button-width);
+  padding: var(--ol-spacing-2x-small) var(--ol-spacing-large);
+  background-color: transparent;
+  border: 2px solid var(--ol-color-neutral-900);
+  border-right: var(--theme-button-border-right);
+  border-radius: var(--theme-button-border-radius);
+  position: initial;
+}
+ol-button::part(label) {
+  color: var(--ol-color-neutral-1000);
+  font-weight: var(--ol-font-weight-bold);
+  text-transform: var(--theme-button-text-transform);
+  z-index: 1;
+}
+ol-button::part(spinner) {
+  z-index: 1;
+}
+ol-button:not([disabled]):hover::part(prefix) {
+  color: var(--ol-color-neutral-1000);
+}
+ol-button[variant="primary"]:not([disabled]):hover::part(label) {
+  color: var(--theme-button-hover-text-color);
+}
+ol-button::part(spinner) {
+  font-size: 1.5em;
+}
+ol-textarea::part(base) {
+  border-radius: 0;
+}
+ol-button[variant="primary"]:not([disabled]):hover::part(base) {
+  background-color: var(--theme-button-hover-bg-color);
+  border-color: var(--theme-button-hover-border-color);
+}
+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-radio-button::part(base),
+ol-radio-button::part(button) {
+  border-radius: var(--theme-border-radius);
+  overflow: hidden;
+}
+ol-carousel::part(pagination) {
+  gap: var(--theme-pagination-item-spacing);
+}
+ol-carousel::part(pagination-item) {
+  width: var(--theme-pagination-item-size);
+  height: var(--theme-pagination-item-size);
+  background-color: var(--theme-pagination-item-bg-color);
+}
+ol-carousel::part(pagination-item--active) {
+  border: 1px solid var(--ol-color-neutral-900);
+  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__flow__actions--bottom {
+  margin-top: var(--ol-spacing-2x-large);
+}
+.ofl__actions--top .ofl__actions__button--type-back::part(base) {
+  padding: 0;
+}
+.ofl__actions--bottom .ofl__actions__button {
+  margin: 0 auto;
+  width: max(40%, 300px);
+}
+.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: 115px;
+}
+.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__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);
+  margin: var(--ol-spacing-x-large) auto -10px;
+}
+.ofl__calendar__calendar-skeleton {
+  --border-radius: 0;
+}
+.ofl__calendar__time-item__content {
+  border-radius: 0;
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item::part(button) {
+  border-radius: var(--theme-border-radius);
+  border: var(--theme-radio-button-border);
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item::part(button--checked) {
+  border: 2px solid var(--ol-color-neutral-900);
+  background-color: var(--ol-color-neutral-900);
+}
+.ofl__calendar__time-list--list .ofl__calendar__time-item:hover::part(button--checked) {
+  background-color: var(--ol-color-neutral-900);
+  border: 2px solid var(--ol-color-neutral-900);
+}
+.ofl__calendar__time-list--list
+  .ofl__calendar__time-item:hover:not([disabled], [checked])::part(button) {
+  border: 2px solid var(--ol-color-neutral-900);
+  background: var(--ol-color-neutral-100);
+}
+.ofl__calendar__time-list--list
+  .ofl__calendar__time-item:hover:not([disabled], [checked])::part(button)::after {
+  border: none;
+}
+.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-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);
+}
+.ofl__error {
+  align-items: center;
+}
+
+/**
+ * Custom Styles (OLCS)
+ * ----------------------------------------------------------------------------------------
+ * Specific styles for the custom components in the confirmation section.
+ */
+.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;
+  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-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);
+  }
+}
+`;export{t as styles};