/* Values come from root DESIGN.md. Apply through Trafft Custom CSS. */
:root {
  --color-black: #202426 !important;
  --color-dark: #202426 !important;
  --color-dark-rgb: 32, 36, 38 !important;
  --color-graphite: #596168 !important;
  --color-graphite-rgb: 89, 97, 104 !important;
  --color-steel-grey: #596168 !important;
  --color-cloudy: #F3F4F4 !important;
  --color-cloudy-rgb: 243, 244, 244 !important;
  --color-metal: #E8EBED !important;
  --color-metal-rgb: 232, 235, 237 !important;
  --color-concrete: #687078 !important;
  --theme-color-border: #DDE0E2 !important;
  --theme-color-text: #202426 !important;
  --font-color: #202426 !important;
  --font-family: 'Inter', sans-serif !important;
  --color-primary: #952C2F !important;
  --color-primary-90: #7D2226 !important;
  --color-primary-10: #F3F4F4 !important;
  --color-primary-05: #F3F4F4 !important;
  --color-red: #A12626 !important;
}

#__app .header {
  box-shadow: none;
  border-bottom: 1px solid #DDE0E2;
}
#__app .header__content { min-height: 96px; max-width: 1440px; }
#__app .header__content__primary__left__logo img {
  width: 288px;
  max-width: none;
  height: auto;
  max-height: none;
  object-fit: contain;
}
#__app .ui-button { border-radius: 4px; }
#__app .ui-button__size__default:not(.is-icon-only) {
  min-height: 52px;
  height: auto;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
#__app .header .ui-button__size__default:not(.is-icon-only) {
  min-height: 44px;
  padding: 8px 20px;
}
#__app .ui-button__type__plain {
  background: #FFFFFF;
  color: #202426;
  border: 1px solid #687078;
}
#__app .ui-button__type__primary:hover:not(:disabled) { background: #7D2226; }
#__app .ui-button__type__primary:active:not(:disabled) { background: #681C20; }
#__app .ui-button__type__info:hover:not(:disabled),
#__app .ui-button__type__plain:hover:not(:disabled) { background: #F3F4F4; }
#__app .ui-button:disabled:not(.is-loading) {
  background: #E8EBED;
  color: #596168;
  border-color: transparent;
  opacity: 1;
}
#__app :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid #952C2F;
  outline-offset: 3px;
}

#__app .services { padding: 64px 0; }
#__app .services__header { margin-bottom: 32px; }
#__app .services__header__title h3 {
  font-size: 48px;
  font-weight: 600;
  line-height: 56px;
  letter-spacing: -1px;
}
#__app .services__wrapper__content__items { gap: 0; }
#__app .service-card-wrapper { border-radius: 0; box-shadow: none; }
#__app .service-card-list,
#__app .service-card-grid-no-img {
  background: #FFFFFF;
  border: 1px solid #DDE0E2;
  border-radius: 0;
  box-shadow: none;
}
#__app .service-card-wrapper + .service-card-wrapper :is(.service-card-list, .service-card-grid-no-img) { border-top: 0; }
#__app .service-card-list-cnt { padding: 40px 48px; gap: 32px; }
#__app .service-card-list-cnt__left { min-width: 0; }
#__app .service-card-list-cnt__right { flex-shrink: 0; }
#__app .services h4 {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  -webkit-line-clamp: unset;
}
#__app .service-card-dc { margin-top: 8px; gap: 16px; }
#__app .service-card-dc__item__title { color: #596168; }
#__app .service-card-dc__item__value { color: #202426; }
#__app .service-card-buttons { gap: 12px; }
#__app .service_de__description__content { font-size: 18px; line-height: 29px; max-width: 720px; }
#__app :is(.booking, .login) .el-input__inner,
#__app .booking .vti__input { font-size: 16px; line-height: 26px; }
#__app .booking .vti__input { align-self: center; }
#__app :is(.booking, .login) .el-input__wrapper,
#__app .booking .vue-tel-input,
#__app :is(.booking, .login) .el-select__wrapper {
  min-height: 52px;
  border: 1px solid #687078 !important;
  border-radius: 4px;
  box-shadow: none;
}
#__app :is(.booking, .login) .el-form-item.is-error { margin-bottom: 32px; }
#__app :is(.booking, .login) .el-form-item.is-error :is(.el-input__wrapper, .vue-tel-input, .el-select__wrapper) {
  border-color: #A12626 !important;
}
#__app :is(.booking, .login) .el-form-item__error { color: #A12626; font-size: 14px; line-height: 22px; }
#__app :is(.booking, .login) .el-input__wrapper:focus-within,
#__app .booking .vue-tel-input:focus-within,
#__app :is(.booking, .login) .el-select__wrapper:focus-within {
  outline: 3px solid #952C2F !important;
  outline-offset: 3px;
}
#__app :is(.booking, .login) .el-input__inner:focus-visible,
#__app .booking .vti__input:focus-visible { outline: none !important; }
#__app .booking .ui-cal__day:not(.is-disabled):not(.is-selected),
#__app .booking .booking-ts:not(.is-disabled):not(.is-active):not(.loading) {
  border-color: #687078;
}
#__app .booking .booking-ts { min-height: 44px; border-radius: 4px; }
#__app .booking .ui-cal__day.is-selected,
#__app .booking .booking-ts.is-active { border: 2px solid #952C2F; }
#__app .booking { gap: 28px; max-width: 1200px; margin-inline: auto; }
#__app .booking__wrapper__content {
  width: 100%;
  max-width: none;
  border: 1px solid #DDE0E2;
  border-radius: 0;
  box-shadow: none;
  padding: 32px;
}
#__app .booking__wrapper__content__step__header h4 { font-size: 28px; line-height: 36px; letter-spacing: -0.6px; }
#__app .booking__wrapper__content__step { gap: 24px; }
#__app .booking-details {
  width: 100%;
  background: #202426;
  color: #FFFFFF;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 32px;
}
#__app .booking-details__header { padding: 0 0 24px; border-color: #4b5051; }
#__app .booking-details__header h4 { color: #FFFFFF; font-size: 24px; line-height: 32px; }
#__app .booking-details__body { padding: 0; }
#__app .booking-details .booking-details-body { background: transparent; }
#__app .booking-details-body__item { padding: 24px 0; border-color: #4b5051; }
#__app .booking-details :is(.h7, h5, h6, .par-sm-med) { color: #FFFFFF; }
#__app .booking-details :is(.sub, .sub-med, .text-graphite, .ui-icon) { color: #cbd0d0 !important; }
#__app .booking-details .ui-icon::before { color: #cbd0d0 !important; }
#__app .bs-service-card { border-radius: 0; box-shadow: none; border-color: #DDE0E2; }
#__app .bs-service-card__header__info h4 { font-size: 24px; line-height: 32px; }
#__app .iframe, #__app .bk-sticky-foot { border-radius: 0; box-shadow: none; }
#__app .footer {
  background: #FFFFFF;
  border-top: 1px solid #DDE0E2;
  padding-top: 32px;
  padding-bottom: 32px;
}
#__app .footer h5 { font-size: 16px; line-height: 26px; font-weight: 500; }
#__app .footer p { color: #596168; font-size: 14px; line-height: 22px; }
#__app .footer-logo { width: 192px; height: auto; max-height: none; object-fit: contain; }

/* Align the visible logo, including the original image's transparent margin. */
@media (min-width: 1200px) {
  #__app .header__content__primary__left__logo img { margin-left: -40px; }
  #__app .booking { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  #__app :is(.booking__wrapper, .booking__details-desktop) { width: 100%; }
}
@media (min-width: 768px) {
  #__app .footer-logo { margin-left: -27px; }
}

@media (max-width: 1199px) {
  #__app .header__content__primary__left__logo img { width: 192px; }
  #__app .service-card-list-cnt { padding: 24px; gap: 24px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  #__app .header__content__primary__left__logo img { margin-left: -27px; }
}
@media (max-width: 767px) {
  #__app .header__content { min-height: 80px; }
  #__app .header__content__primary__left__logo img { width: 176px; }
  #__app .services { padding: 48px 0; }
  #__app .services__header__title h3 { font-size: 34px; line-height: 42px; }
  #__app .service-card-grid-no-img { padding: 24px 20px; }
  #__app .service-card-buttons { flex-wrap: wrap; }
  #__app .service-card-buttons .ui-button { flex: 1 1 140px; }
  #__app .booking__wrapper__content { padding: 20px; }
  #__app .booking__wrapper__content__step__header h4 { font-size: 24px; line-height: 32px; }
  #__app .booking-details { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  #__app .ui-button { transition: none; }
}