@onlive.ai/common-121 0.2.199 → 0.2.227

package/themes/custom/cupra.theme.css

@@ -1,7 +1,64 @@
+/**
+ * ----------------------------------------------------------------------------------------
+ * THEME: Cupra
+ * ----------------------------------------------------------------------------------------
+ * This CSS file defines the styles for the Cupra theme, including font faces, color schemes,
+ * and specific component styles. It also includes responsive adjustments for mobile devices.
+ * ----------------------------------------------------------------------------------------
+ */
+
+/**
+ * Font Faces
+ * ----------------------------------------------------------------------------------------
+ * Custom font faces used in the Cupra 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;
+}
+
+/**
+ * Light Theme Override
+ * ----------------------------------------------------------------------------------------
+ * Overrides for light theme, if applicable.
+ */
 :root,
 :host,
 .ol-theme-light {
-  /* Onlive UI Palette */
+  -webkit-color-scheme: light;
+  -moz-color-scheme: light;
+  color-scheme: light;
+  color: var(--ol-color-neutral-1000);
+
   --ol-color-primary-50: rgb(240 240 240);
   --ol-color-primary-100: rgb(220 220 220);
   --ol-color-primary-200: rgb(150 150 150);
@@ -14,131 +71,767 @@
   --ol-color-primary-900: rgb(0 0 0);
   --ol-color-primary-950: rgb(0 0 0);
 
-  /* Onlive UI Font and Vars */
-  --ol-font-sans: AudiType, sans-serif;
+  /* Cupra Theme Variables */
+  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%, 250px);
+  --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);
+
+  /* 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-day-padding: var(--ol-spacing-x-small) var(--ol-spacing-small);
+  --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);
 }
 
-/* Onlive UI Components */
+/**
+ * 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) {
-  border-radius: 0;
+  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) {
-  padding: var(--ol-spacing-2x-small) var(--ol-spacing-medium);
+  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-input::part(base) {
-  border-radius: 0;
+
+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(--ol-spacing-x-small);
+  gap: var(--theme-pagination-item-spacing);
 }
+
 ol-carousel::part(pagination-item) {
-  border-radius: 0;
-  height: var(--ol-spacing-2x-small);
-  width: var(--ol-spacing-medium);
+  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));
 }
 
-/* Chatbot App */
-.ocb__header__logo {
-  height: 24px;
+ol-input::part(input) {
+  color: var(--theme-input-color);
 }
-.ocb__header__maximize-button::part(base),
-.ocb__header__minimize-button::part(base),
-.ocb__widget__panel,
-.ocb__hint {
+
+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__item,
+.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);
 }
 
-/* Chat Package */
-.och__send__message::part(base),
-.och__message__form__button::part(base),
-.och__send__submit-button::part(base) {
+.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;
 }
-.och__message--me .och__message__box {
-  border-radius: 4px 4px 0 4px;
+
+.ofl__phone-input .ofl__phone-input__number {
+  border-left: none;
 }
-.och__message--other .och__message__box {
-  border-radius: 4px 4px 4px 0;
+
+.ofl__phone-input .ofl__phone-input__flag {
+  margin-inline-end: var(--ol-spacing-x-small);
 }
-.och__message__box a {
-  color: var(--ol-color-blue-600);
+
+.ofl__phone-input.ofl__phone-input__number--show-flag.ofl__phone-input__number--show-code
+  .ofl__phone-input__prefix {
+  width: 110px;
 }
 
-/* Flow Package */
-.ofl__map__distance-range::part(input) {
-  --thumb-border-radius: 0;
+.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;
 }
 
-/* Custom steps styling */
-.ofl__flow--step-actionSelection,
-.ofl__flow--step-datetimeSelection,
-.ofl__flow--step-appointmentCancellation,
-.ofl__flow--step-cancellationSuccess,
-.ofl__flow--step-cancellationFailed,
-.ofl__flow--step-rescheduleSuccess,
-.ofl__flow--step-rescheduleFailed {
-  width: calc(50vw - 108px);
-  padding: 20px 50px;
-  overflow: auto;
-  max-height: calc(100vh - 40px);
+.ofl__map {
+  gap: 0;
 }
 
-/* Custom styles */
-.olcs__subtitle {
-  font-size: var(--ol-font-size-medium);
-  margin-block: 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 {
-  background-color: var(--ol-color-neutral-100);
-  padding: var(--ol-spacing-small);
-  border: 1px solid var(--ol-color-neutral-500);
-  margin-bottom: var(--ol-spacing-medium);
+  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__table tr td:first-child {
+
+.olcs__dealer-name {
+  font-family: var(--theme-label-font-family);
   font-weight: var(--ol-font-weight-bold);
-  margin-right: var(--ol-spacing-2x-small);
 }
-.olcs__table tr td ol-icon {
-  margin-right: var(--ol-spacing-x-small);
+
+.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__table tr td {
-  display: inline-flex;
+
+.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 Responsive Adjustments
- * -----------------------------
- * Calendar component adjustments for mobile devices (768px and below)
+ * Mobile Adjustments
+ * ----------------------------------------------------------------------------------------
+ * Responsive adjustments for mobile devices (max-width: 768px).
  */
 @media only screen and (max-width: 768px) {
-  /* Custom steps styling */
-  .ofl__flow--step-actionSelection,
-  .ofl__flow--step-datetimeSelection,
-  .ofl__flow--step-appointmentCancellation,
-  .ofl__flow--step-cancellationSuccess,
-  .ofl__flow--step-cancellationFailed,
-  .ofl__flow--step-rescheduleSuccess,
-  .ofl__flow--step-rescheduleFailed {
-    position: fixed;
-    inset: 0;
-    background: #ffffff;
-    width: calc(100% - 100px);
-    padding: 20px 50px;
-    overflow: auto;
+  :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__item,
+  .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);
   }
 }