@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700;800&family=Rubik:wght@700;800&display=swap');

:root {
  --wiz-deep: #041a71;
  --wiz-bright: #7dd3fc;
  --wiz-fun: #ff9f1c;
  --wiz-fresh: #84cc16;
  --wiz-pop: #ff4d8d;
  --wiz-ink: #334155;
  --wiz-bg: #f4f8fc;
  --wiz-bg-soft: #eef6ff;
  --wiz-white: #ffffff;
  --wiz-border: #d9e6f2;
  --wiz-shadow: 0 14px 34px rgba(4, 26, 113, 0.10);
  --wiz-shadow-soft: 0 8px 22px rgba(4, 26, 113, 0.08);
  --wiz-radius-xl: 28px;
  --wiz-radius-lg: 22px;
  --wiz-radius-md: 16px;
  --wiz-radius-sm: 12px;
}

/* Base */
html,
body,
body.--theme-classic,
#sb-main-container,
#main,
#main-content,
#sb_content,
#sb_booking_content,
#steps-content,
#content-view,
.section,
.item,
.tab,
.btn,
input,
select,
textarea {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif !important;
}

body,
body.--theme-classic,
#sb-main-container {
  background: linear-gradient(180deg, #f8fbff 0%, #edf6ff 100%) !important;
  color: var(--wiz-ink) !important;
}

/* Top hero / masthead */
#header.web,
#main-buttons {
  position: relative !important;
}

#main-buttons::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(4,26,113,0.78) 0%, rgba(4,26,113,0.58) 45%, rgba(125,211,252,0.34) 100%) !important;
  pointer-events: none !important;
}

#main-buttons .wrapper,
#main-buttons .inner,
#main-buttons .company-name,
#main-buttons .bar {
  position: relative !important;
  z-index: 2 !important;
}

#main-buttons .company-name {
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
  text-shadow: 0 10px 28px rgba(0,0,0,0.18) !important;
}

/* Top CTA buttons */
#main-buttons .btn,
#book-btn .item-container a,
#main-buttons .bar .btn a {
  border-radius: 999px !important;
}

#main-buttons .btn.book,
#main-buttons .bar .btn.book,
#book-btn .item-container a {
  background: var(--wiz-fun) !important;
  border: none !important;
  box-shadow: 0 12px 28px rgba(255, 159, 28, 0.30) !important;
}

#main-buttons .btn.book a,
#book-btn .item-container a {
  color: var(--wiz-deep) !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 800 !important;
}

#main-buttons .btn.map,
#main-buttons .btn.promo {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  box-shadow: 0 12px 28px rgba(4,26,113,0.16) !important;
}

#main-buttons .btn.map a,
#main-buttons .btn.promo a {
  color: var(--wiz-deep) !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 700 !important;
}

/* Booking timeline wrapper */
#sb-timeline,
#steps,
#steps-content,
#sb_booking_content {
  background: transparent !important;
}

/* Progress nav */
#steps-nav {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.booking-info {
  background: transparent !important;
}

.booking-info ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
  list-style: none !important;
}

.booking-info .step_info_item {
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid var(--wiz-border) !important;
  border-radius: 999px !important;
  box-shadow: var(--wiz-shadow-soft) !important;
  overflow: hidden !important;
}

.booking-info .step_info_item a {
  display: block !important;
  padding: 14px 18px !important;
  text-decoration: none !important;
}

.booking-info .step_info_item .title-small {
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--wiz-deep) !important;
}

.booking-info .step_info_item .title-sub {
  color: var(--wiz-ink) !important;
  font-weight: 700 !important;
}

.booking-info .step_info_item.active {
  background: var(--wiz-deep) !important;
  border-color: var(--wiz-deep) !important;
  box-shadow: 0 14px 32px rgba(4,26,113,0.22) !important;
}

.booking-info .step_info_item.active .title-small,
.booking-info .step_info_item.active .title-sub {
  color: #ffffff !important;
}

.booking-info .step_info_item.filled {
  border-color: var(--wiz-bright) !important;
}

/* Back button / time row */
#sb_back_button a,
#sb_change_timezone,
.company-location .link {
  color: var(--wiz-deep) !important;
  font-weight: 700 !important;
}

/* Main booking card area */
#sb_booking_content > div,
#sb_service_step_container,
#sb_booking_header > div,
#sb_booking_company_time > div,
#time-settings .time,
.company-location--row {
  background: transparent !important;
}

/* Service list grid */
#sb_service_step_container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 22px !important;
}

/* Service cards */
.service-item.item {
  background: var(--wiz-white) !important;
  border: 1px solid var(--wiz-border) !important;
  border-radius: var(--wiz-radius-xl) !important;
  box-shadow: var(--wiz-shadow-soft) !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.service-item.item:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--wiz-shadow) !important;
  border-color: var(--wiz-bright) !important;
}

.service-item.item .tab {
  padding: 0 !important;
  background: transparent !important;
}

/* Image area */
.service-item .preloader {
  position: relative !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #eaf6ff 0%, #f5fbff 100%) !important;
}

.service-item .preloader::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 0 0 0 !important;
  height: 8px !important;
  background: linear-gradient(90deg, var(--wiz-deep) 0%, var(--wiz-bright) 62%, var(--wiz-fun) 100%) !important;
}

.service-item .preloader img,
.service-item .preloader .img,
.service-item .preloader .user.img,
.service-item .preloader .default.img {
  width: 100% !important;
  display: block !important;
}

.service-item .preloader img.user-img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
}

/* Text content */
.service-item .tab-pd {
  padding: 22px !important;
}

.service-item .cap.short {
  font-family: 'Rubik', Arial, sans-serif !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
  color: var(--wiz-deep) !important;
  margin-bottom: 10px !important;
}

.service-item .txt.short,
.service-item .txt.short p,
.service-item .excerpt-info .txt,
.service-item .excerpt-info .txt * {
  color: var(--wiz-ink) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

/* Read more */
.service-item .read-more {
  display: inline-block !important;
  margin-top: 10px !important;
  color: var(--wiz-pop) !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

/* Duration + price row */
.service-item .bar-service {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid #e7eef6 !important;
}

.service-item .bar-service .time {
  color: var(--wiz-deep) !important;
  font-weight: 800 !important;
}

.service-item .badge.price,
.service-item .badge.price.right {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 159, 28, 0.12) !important;
  color: var(--wiz-deep) !important;
  border: 1px solid rgba(255, 159, 28, 0.22) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

/* Generic buttons */
.btn,
a.btn,
button,
input[type="button"],
input[type="submit"],
#sb_submit,
#sb_set_button,
#sb_cancel_button {
  border-radius: 999px !important;
  border: none !important;
  font-family: 'Rubik', Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.btn:hover,
a.btn:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
#sb_submit:hover,
#sb_set_button:hover,
#sb_cancel_button:hover {
  transform: translateY(-1px) !important;
}

/* Primary action buttons */
.btn.book,
#sb_submit,
#sb_set_button,
input[type="submit"],
button.btn-success,
.btn-success {
  background: var(--wiz-fun) !important;
  color: var(--wiz-deep) !important;
  box-shadow: 0 12px 28px rgba(255, 159, 28, 0.28) !important;
}

/* Secondary buttons */
#sb_cancel_button,
#sb_back_button a,
.btn.custom,
a.btn.custom {
  background: var(--wiz-bright) !important;
  color: var(--wiz-deep) !important;
  box-shadow: 0 12px 28px rgba(125, 211, 252, 0.24) !important;
}

/* Forms */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
  background: #ffffff !important;
  border: 1px solid var(--wiz-border) !important;
  border-radius: var(--wiz-radius-sm) !important;
  color: var(--wiz-ink) !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--wiz-bright) !important;
  box-shadow: 0 0 0 4px rgba(125, 211, 252, 0.22) !important;
  outline: none !important;
}

/* Details page blocks */
.client-info-view,
.wrap-client-info-view .section,
.modal-content,
#error_page .error-card,
#custom-page {
  background: var(--wiz-white) !important;
  border: 1px solid var(--wiz-border) !important;
  border-radius: var(--wiz-radius-xl) !important;
  box-shadow: var(--wiz-shadow-soft) !important;
}

.client-info-view,
.wrap-client-info-view .section,
#custom-page {
  padding: 28px !important;
}

.title-main,
.modal-title,
.client-info-view .title-main,
#about-us .title-main,
#contacts .title-main,
#schedule .title-main,
#custom-page .title-main {
  font-family: 'Rubik', Arial, sans-serif !important;
  color: var(--wiz-deep) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* Contact / about / hours cards on homepage */
#descr-firm .section,
#contacts.section,
#schedule.section,
#about-us.section {
  background: var(--wiz-white) !important;
  border: 1px solid var(--wiz-border) !important;
  border-radius: var(--wiz-radius-lg) !important;
  box-shadow: var(--wiz-shadow-soft) !important;
}

/* Links */
a {
  color: var(--wiz-deep) !important;
}

a:hover {
  color: var(--wiz-pop) !important;
}

/* Mobile */
@media (max-width: 767px) {
  #main-buttons .company-name {
    font-size: 28px !important;
  }

  .service-item .cap.short {
    font-size: 22px !important;
  }

  #sb_service_step_container {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .booking-info ul {
    gap: 10px !important;
  }

  .booking-info .step_info_item {
    width: 100% !important;
  }

  .btn,
  a.btn,
  button,
  input[type="button"],
  input[type="submit"],
  #sb_submit,
  #sb_set_button,
  #sb_cancel_button {
    width: 100% !important;
    text-align: center !important;
  }
}