service-booking-form::part(shift-form),
.shift-form,
.shift-form::part(form-dialog-modal) {
  font-family:
    Nobel-Book,
    "Source Sans Pro",
    sans-serif "Noto Kufi Arabic",
    "Nunito",
    Roboto,
    Arial,
    sans-serif !important;
}

:lang(ku) service-booking-form::part(shift-form),
:lang(ku) .shift-form,
:lang(ku) .shift-form::part(form-dialog-modal) {
  font-family:
    GE_SS_Two_Medium, sans-serif, "Noto Kufi Arabic", "Nunito", Roboto, Arial,
    sans-serif !important;
}

:lang(en) service-booking-form::part(shift-form),
:lang(en) .shift-form,
:lang(en) .shift-form::part(form-dialog-modal) {
  font-family:
    Nobel-Book,
    "Source Sans Pro",
    sans-serif "Noto Kufi Arabic",
    "Nunito",
    Roboto,
    Arial,
    sans-serif !important;
}

:lang(ar) service-booking-form::part(shift-form),
:lang(ar) .shift-form,
:lang(ar) .shift-form::part(form-dialog-modal) {
  font-family:
    GE_SS_Two_Medium, sans-serif, "Noto Kufi Arabic", "Nunito", Roboto, Arial,
    sans-serif !important;
}

service-booking-form::part(container) {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

service-booking-form::part(inputs_wrapper) {
  display: flex;
  flex-direction: column;
  gap: 26px 24px;
}

:lang(ar) service-booking-form::part(inputs_wrapper) {
  gap: 28px 24px !important;
}

@media (min-width: 640px) {
  service-booking-form::part(inputs_wrapper) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

service-booking-form::part(hr) {
  margin-top: 24px;
  margin-bottom: 24px;
  border-color: rgb(203 213 225);
}

service-booking-form::part(section-title) {
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 8px;
  color: black;
}

service-booking-form::part(form-input),
service-booking-form::part(form-input-select) {
  height: 40px;
  border-radius: 0px;
  background: #eaeaea;
  border-color: #0f0f0f;
}

service-booking-form::part(form-input-textarea) {
  border-radius: 0px;
  background: #eaeaea;
  border-color: #0f0f0f;
  height: 100px !important;
}

service-booking-form::part(form-textarea) {
  margin-top: 24px;
}

:lang(ar) service-booking-form::part(form-textarea) {
  margin-top: 28px !important;
}

service-booking-form::part(form-select-container),
::part(shift-select-container) {
  border-radius: 0px;
}

service-booking-form::part(form-input)::placeholder,
service-booking-form::part(form-input-select)::placeholder {
  color: rgb(15, 15, 15, 0.75);
}

service-booking-form::part(display-error-message) {
  transform: translateY(2px) !important;
}

service-booking-form::part(select-arrow) {
  color: rgb(15, 15, 15, 0.6);
}

service-booking-form::part(submit-button) {
  background: rgb(15, 15, 15);
  color: white;
  border-radius: 0px;
  margin-top: 40px;
  padding: 16px 30px;
}

service-booking-form::part(form-submit-text) {
  font-size: 16px !important;
}

service-booking-form::part(form-select-container),
::part(shift-select-container) {
  max-height: 150px;
}

service-booking-form::part(form-stepper-line) {
  padding-top: 12px;
  padding-bottom: 30px;
  background: white;
  border-bottom: 1px solid #ededec;
}

.dark-stepper::part(form-stepper-line) {
  background: black;
  border-bottom: none;
}

service-booking-form::part(form-stepper-line-step-title) {
  color: #acacad !important;
}

.dark-stepper::part(form-stepper-line-step-title) {
  color: rgb(173, 173, 173) !important;
}

.dark-stepper::part(form-stepper-line-step-indicator-text) {
  color: black !important;
}

.dark-stepper::part(form-stepper-line-step-indicator) {
  background: white !important;
}

.dark-stepper::part(form-stepper-line-step-indicator)::before {
  background: rgb(255, 255, 255, 0.15) !important;
}

.dark-stepper::part(form-stepper-line-line) {
  background: repeating-linear-gradient(
    to right,
    white 0px,
    white 12px,
    transparent 6px,
    transparent 24px
  ) !important;
}

.dark-stepper::part(shift-form) {
  margin-top: -2px;
}

service-booking-form::part(stepper-control) {
  margin: 20px 0px 24px;
  font-weight: 400;
  max-width: 1440px !important;
}

service-booking-form::part(confirmation-title) {
  font-size: 12px;
  max-width: 1440px !important;
  margin: 0px auto 30px auto;
}

.service-booking-modal::part(confirmation-title),
.service-booking-modal::part(container),
.service-booking-modal::part(back-container),
.service-booking-modal::part(form-stepper-line),
.service-booking-general-padding::part(confirmation-title),
.service-booking-general-padding::part(container),
.service-booking-general-padding::part(back-container),
.service-booking-general-padding::part(form-stepper-line) {
  padding-left: 30px;
  padding-right: 30px;
}

service-booking-form::part(container),
service-booking-form::part(back-container) {
  margin: 0px auto !important;
  max-width: 1440px !important;
}

service-booking-form::part(confirmation-policy) {
  font-size: 12px;
  margin-top: 60px;
}

/* Booking calendar in the Lexus look. The popup renders at page level, so the tokens go on both. */
service-booking-form,
shift-popover-panel {
  --shift-font-family: Nobel-Book, "Source Sans Pro", sans-serif;
  --shift-font-family-arabic: GE_SS_Two_Medium, sans-serif;
  --shift-weight: 400;
  --shift-weight-strong: 600;
  --shift-label-transform: none;
  --shift-label-tracking: 0;

  --shift-ink: rgb(15 15 15);
  --shift-ink-muted: rgb(15 15 15 / 0.6);
  --shift-ink-disabled: rgb(172 172 173);
  --shift-surface: #eaeaea;
  --shift-surface-muted: #f7f7f7;
  --shift-line: #0f0f0f;
  --shift-line-strong: #0f0f0f;
  --shift-accent: rgb(15 15 15);
  --shift-on-accent: #fff;
  --shift-accent-tint: #ededec;
  --shift-focus: #0f0f0f;

  --shift-radius-sm: 0px;
  --shift-radius-md: 0px;
  --shift-radius-lg: 0px;
  --shift-border-width: 1px;
  --shift-shadow-control: none;
  --shift-shadow-panel: none;

  --shift-input-font-size: 16px;
  --shift-input-label-font-size: 16px;
  --shift-input-label-font-weight: 400;
  --shift-input-label-gap: 4px;
  --shift-input-control-height: 40px;
  --shift-input-padding-inline: 12px;
  --shift-input-support-font-size: 12px;
  --shift-input-line-height: 1.2;
  --shift-input-muted: rgb(15 15 15 / 0.75);
  --shift-input-button-ink: rgb(15 15 15 / 0.6);
  --shift-input-button-hover-bg: transparent;
  --shift-input-focus-ring-width: 1px;
  --shift-input-focus-ring-offset: 0px;
  --shift-input-disabled-surface: #f2f2f2;
  --shift-input-disabled-ink: rgb(15 15 15 / 0.35);
}

shift-popover-panel {
  --shift-surface: #fff;
  --shift-popover-surface: #fff;
  --shift-popover-line: #d9d9d9;
  --shift-popover-border-width: 1px;
  --shift-popover-radius: 0px;
  --shift-popover-shadow: 0 12px 28px -14px rgb(0 0 0 / 0.35);
  --shift-popover-lift: 4px;

  --shift-popover-z-index: 10001;

  --shift-calendar-padding: 20px;
  --shift-calendar-padding-top: 18px;
  --shift-calendar-header-gap: 14px;
  --shift-calendar-section-gap: 6px;
  --shift-calendar-title-gap: 6px;
  --shift-calendar-heading-font-size: 16px;
  --shift-calendar-heading-font-weight: 400;
  --shift-calendar-nav-size: 32px;
  --shift-calendar-nav-gap: 6px;
  --shift-calendar-nav-border: #0f0f0f;
  --shift-calendar-nav-hover-bg: #ededec;
  --shift-calendar-weekday-font-size: 11px;
  --shift-calendar-weekday-font-weight: 400;
  --shift-calendar-weekday-transform: uppercase;
  --shift-calendar-weekday-tracking: 0.08em;
  --shift-calendar-weekday-padding-block: 6px;
  --shift-calendar-weekday-line-height: 1.2;
  --shift-calendar-gap: 2px;
  --shift-calendar-day-size: 38px;
  --shift-calendar-day-font-size: 15px;
  --shift-calendar-day-font-weight: 400;
  --shift-calendar-day-line: transparent;
  --shift-calendar-day-hover-bg: #ededec;
  --shift-calendar-day-hover-line: #0f0f0f;
  --shift-calendar-outside-ink: rgb(15 15 15 / 0.25);
  --shift-calendar-disabled-ink: rgb(15 15 15 / 0.3);
  --shift-calendar-today-font-weight: 400;
  --shift-calendar-badge-radius: 0px;
  --shift-calendar-tone-neutral-bg: #ededec;
  --shift-calendar-tone-neutral-ink: rgb(15 15 15 / 0.7);
  --shift-calendar-tooltip-radius: 0px;
  --shift-calendar-tooltip-surface: #0f0f0f;

  --shift-booking-calendar-gap: 16px;
  --shift-booking-calendar-font-size: 14px;
  --shift-booking-calendar-status-font-size: 13px;
  --shift-booking-calendar-back-gap: 8px;
  --shift-booking-calendar-back-padding-inline: 14px;
  --shift-booking-calendar-back-font-weight: 400;
  --shift-booking-calendar-hover-bg: #ededec;
  --shift-booking-calendar-scroll-end-room: 4px;

  --shift-time-slots-gap: 8px;
  --shift-time-slots-min-column: 92px;
  --shift-time-slots-chip-height: 40px;
  --shift-time-slots-chip-padding-inline: 10px;
  --shift-time-slots-font-size: 14px;
  --shift-time-slots-surface: #fff;
  --shift-time-slots-line: #cfcfcf;
  --shift-time-slots-hover-bg: #ededec;
  --shift-time-slots-hover-line: #0f0f0f;
  --shift-time-slots-radius: 0px;
  --shift-time-slots-shadow: none;
}

:lang(ar) service-booking-form,
:lang(ku) service-booking-form {
  --shift-input-line-height: normal;
}