.vcb-booking-app,
.vcb-booking-app * {
  box-sizing: border-box;
}

.vcb-booking-app {
  width: 100% !important;
  min-height: 680px !important;
  background: #f7fbff !important;
  padding: 42px 20px !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: #07142f !important;
}

.vcb-booking-app button,
.vcb-booking-app input,
.vcb-booking-app textarea,
.vcb-booking-app select {
  font-family: inherit !important;
}

.vcb-booking-app button {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
}

.vcb-shell {
  max-width: 1120px !important;
  margin: 0 auto !important;
  position: relative !important;
}

.vcb-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 280px !important;
  gap: 30px !important;
  align-items: start !important;
}

.vcb-progress {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 10px !important;
  margin: 0 0 30px !important;
  align-items: start !important;
}

.vcb-progress-item {
  position: relative !important;
  text-align: center !important;
  color: #5c7390 !important;
}

.vcb-progress-item:before {
  content: "" !important;
  position: absolute !important;
  top: 17px !important;
  left: calc(-50% + 20px) !important;
  width: calc(100% - 40px) !important;
  height: 4px !important;
  background: #d8e8f8 !important;
  z-index: 0 !important;
}

.vcb-progress-item:first-child:before {
  display: none !important;
}

.vcb-progress-item.done:before,
.vcb-progress-item.active:before {
  background: #0066cc !important;
}

.vcb-progress-item span {
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: #e4f0fb !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  color: #365875 !important;
}

.vcb-progress-item.active span {
  background: #07142f !important;
  color: #ffffff !important;
}

.vcb-progress-item.done span {
  background: #0066cc !important;
  color: #ffffff !important;
}

.vcb-progress-item small {
  display: block !important;
  margin-top: 7px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.vcb-panel h2 {
  margin: 0 0 6px !important;
  font-size: 30px !important;
  line-height: 1.22 !important;
  color: #020b1d !important;
  font-weight: 850 !important;
  letter-spacing: -.02em !important;
}

.vcb-subtitle,
.vcb-help {
  margin: 0 0 22px !important;
  color: #536784 !important;
  font-size: 16px !important;
}

.vcb-card-list {
  display: grid !important;
  gap: 14px !important;
}

.vcb-option-card {
  width: 100% !important;
  min-height: 66px !important;
  border: 2px solid #d6e8fb !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 24px !important;
  gap: 15px !important;
  align-items: center !important;
  text-align: left !important;
  color: #07142f !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px rgba(7, 20, 47, .03) !important;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}

.vcb-option-card:hover {
  transform: translateY(-1px) !important;
  border-color: #8fc5ff !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(7, 20, 47, .06) !important;
}

.vcb-option-card.selected {
  border-color: #0066cc !important;
  background: #eaf4ff !important;
  color: #07142f !important;
  box-shadow: 0 8px 20px rgba(0, 102, 204, .16) !important;
}

.vcb-option-card strong {
  display: block !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  color: #07142f !important;
}

.vcb-option-card.selected strong {
  color: #07142f !important;
}

.vcb-option-card small {
  display: block !important;
  margin-top: 5px !important;
  color: #667994 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  text-transform: none !important;
}

.vcb-option-card.selected small {
  color: #536784 !important;
}

.vcb-option-card b {
  color: #0066cc !important;
  font-size: 17px !important;
  white-space: nowrap !important;
}

.vcb-option-card i {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 2px solid #bfd4ea !important;
  display: block !important;
  background: transparent !important;
}

.vcb-option-card.selected i {
  border-color: #0066cc !important;
  background: radial-gradient(circle, #0066cc 45%, transparent 48%) !important;
}

.vcb-option-card.disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
}

.vcb-nav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 34px !important;
}

.vcb-btn {
  min-width: 138px !important;
  height: 48px !important;
  border-radius: 8px !important;
  border: 1px solid #d8e8f8 !important;
  cursor: pointer !important;
  font-weight: 850 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.vcb-btn-back {
  background: #ffffff !important;
  color: #07142f !important;
  border-color: #d8e8f8 !important;
}

.vcb-btn-back:hover {
  background: #f0f7ff !important;
  color: #0066cc !important;
  border-color: #8fc5ff !important;
}

.vcb-btn-next {
  border: none !important;
  color: #ffffff !important;
  background: linear-gradient(90deg, #0066cc, #2f9bff) !important;
}

.vcb-btn-next:hover {
  color: #ffffff !important;
  background: linear-gradient(90deg, #005bb8, #168cff) !important;
}

.vcb-btn:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
}

.vcb-summary-card {
  position: sticky !important;
  top: 24px !important;
  background: #ffffff !important;
  border: 1px solid #d6e8fb !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 45px rgba(7, 20, 47, .10) !important;
}

.vcb-summary-head {
  background: #07142f !important;
  color: #ffffff !important;
  padding: 18px 18px 16px !important;
}

.vcb-summary-head span {
  display: block !important;
  font-size: 13px !important;
  opacity: .75 !important;
  margin-bottom: 4px !important;
  color: #ffffff !important;
}

.vcb-summary-head strong {
  display: block !important;
  font-size: 30px !important;
  line-height: 1 !important;
  color: #ffffff !important;
}

.vcb-summary-body {
  padding: 14px 16px 2px !important;
}

.vcb-summary-line {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #e7f1fb !important;
}

.vcb-summary-line span {
  display: block !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  color: #07142f !important;
  font-weight: 750 !important;
}

.vcb-summary-line small {
  display: block !important;
  color: #71819a !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  margin-bottom: 3px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.vcb-summary-line em {
  color: #93a0b3 !important;
  font-style: normal !important;
  font-weight: 650 !important;
}

.vcb-summary-line b {
  color: #0066cc !important;
  white-space: nowrap !important;
  font-size: 14px !important;
}

.vcb-summary-total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: #eaf4ff !important;
  padding: 15px 16px !important;
  font-weight: 850 !important;
}

.vcb-summary-total span {
  color: #07142f !important;
}

.vcb-summary-total strong {
  color: #07142f !important;
  font-size: 24px !important;
}

.vcb-field {
  margin-bottom: 16px !important;
}

.vcb-field label {
  display: block !important;
  font-weight: 850 !important;
  margin-bottom: 7px !important;
  color: #07142f !important;
}

.vcb-field em {
  color: #cf2e2e !important;
  font-style: normal !important;
}

.vcb-input {
  width: 100% !important;
  min-height: 50px !important;
  border: 2px solid #d6e8fb !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  color: #07142f !important;
  box-shadow: none !important;
}

.vcb-input:focus {
  outline: none !important;
  border-color: #0066cc !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, .14) !important;
}

textarea.vcb-input {
  min-height: 100px !important;
  resize: vertical !important;
}

.vcb-two-col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

.vcb-date-layout {
  display: grid !important;
  grid-template-columns: minmax(320px, 360px) minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
}

.vcb-calendar {
  background: #ffffff !important;
  border: 2px solid #cfe2f7 !important;
  border-radius: 16px !important;
  padding: 14px !important;
  box-shadow: 0 10px 25px rgba(7, 20, 47, .04) !important;
  overflow: hidden !important;
}

.vcb-calendar-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.vcb-calendar-head strong {
  font-size: 16px !important;
  font-weight: 850 !important;
  color: #07142f !important;
}

.vcb-calendar-head button {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid #d6e8fb !important;
  background: #f0f7ff !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  font-weight: 850 !important;
  color: #07142f !important;
  padding: 0 !important;
}

.vcb-calendar-head button:hover {
  border-color: #0066cc !important;
  color: #0066cc !important;
  background: #eaf4ff !important;
}

.vcb-calendar-weekdays,
.vcb-calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.vcb-calendar-weekdays span {
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  color: #5c7390 !important;
  padding: 4px 0 6px !important;
}

.vcb-date-day {
  min-height: 46px !important;
  border: 1px solid #d9e9fa !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  font-weight: 850 !important;
  color: #07142f !important;
  line-height: 1.1 !important;
  padding: 6px 2px !important;
  box-shadow: none !important;
}

.vcb-date-day span,
.vcb-date-day small {
  display: block !important;
}

.vcb-date-day small {
  font-size: 9px !important;
  color: #0066cc !important;
  margin-top: 2px !important;
}

.vcb-date-day:hover:not(:disabled) {
  border-color: #0066cc !important;
  background: #f0f7ff !important;
  box-shadow: 0 4px 12px rgba(0, 102, 204, .16) !important;
}

.vcb-date-day.selected {
  border-color: #0066cc !important;
  background: #e6f2ff !important;
  color: #003b73 !important;
}

.vcb-date-day.today:not(.selected) {
  border-color: #8fc5ff !important;
}

.vcb-date-day:disabled,
.vcb-date-day.muted {
  opacity: .42 !important;
  cursor: not-allowed !important;
  background: #f5f9fd !important;
  color: #7d8b9f !important;
}

.vcb-date-side {
  display: grid !important;
  gap: 14px !important;
  min-width: 0 !important;
}

.vcb-selected-date {
  background: #07142f !important;
  color: #ffffff !important;
  border-radius: 14px !important;
  padding: 16px !important;
  min-width: 0 !important;
}

.vcb-selected-date span {
  display: block !important;
  opacity: .75 !important;
  font-size: 13px !important;
  margin-bottom: 4px !important;
  color: #ffffff !important;
}

.vcb-selected-date strong {
  font-size: 18px !important;
  color: #ffffff !important;
}

.vcb-slots {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.vcb-slot {
  min-height: 54px !important;
  border: 2px solid #d6e8fb !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  font-weight: 850 !important;
  cursor: pointer !important;
  color: #07142f !important;
  box-shadow: none !important;
}

.vcb-slot:hover {
  border-color: #8fc5ff !important;
  background: #f0f7ff !important;
}

.vcb-slot.selected {
  border-color: #0066cc !important;
  background: #eaf4ff !important;
  color: #003b73 !important;
}

.vcb-final-summary {
  display: grid !important;
  gap: 16px !important;
}

.vcb-final-card {
  background: #ffffff !important;
  border: 2px solid #d6e8fb !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 25px rgba(7, 20, 47, .04) !important;
}

.vcb-final-card h3 {
  margin: 0 !important;
  padding: 16px 18px !important;
  background: #f0f7ff !important;
  border-bottom: 1px solid #dcecfb !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  color: #07142f !important;
}

.vcb-review-row {
  display: grid !important;
  grid-template-columns: 170px minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid #edf2f8 !important;
}

.vcb-review-row:last-child {
  border-bottom: none !important;
}

.vcb-review-row span {
  color: #657792 !important;
  font-weight: 750 !important;
}

.vcb-review-row strong {
  color: #07142f !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
}

.vcb-price-breakdown {
  padding: 6px 18px 18px !important;
}

.vcb-price-breakdown > div {
  display: flex !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 13px 0 !important;
  border-bottom: 1px solid #edf2f8 !important;
}

.vcb-price-breakdown span {
  font-weight: 750 !important;
  color: #07142f !important;
}

.vcb-price-breakdown span small {
  display: block !important;
  margin-bottom: 3px !important;
  color: #657792 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
}

.vcb-price-breakdown strong {
  white-space: nowrap !important;
  color: #07142f !important;
}

.vcb-price-breakdown .vcb-price-grand {
  margin: 12px -2px 0 !important;
  padding: 18px !important;
  border-bottom: none !important;
  border-radius: 14px !important;
  background: #07142f !important;
  color: #ffffff !important;
  align-items: center !important;
}

.vcb-price-breakdown .vcb-price-grand span,
.vcb-price-breakdown .vcb-price-grand strong {
  color: #ffffff !important;
}

.vcb-price-breakdown .vcb-price-grand strong {
  font-size: 30px !important;
}

.vcb-error {
  margin-top: 16px !important;
  padding: 13px 14px !important;
  background: #fff3f3 !important;
  border: 1px solid #ffc8c8 !important;
  border-radius: 10px !important;
  color: #af1d1d !important;
  font-weight: 750 !important;
}

.vcb-success-box {
  max-width: 720px !important;
  margin: 20px auto !important;
  background: #eef8ff !important;
  border: 1px solid #b8ddff !important;
  color: #005bb8 !important;
  padding: 18px !important;
  border-radius: 12px !important;
  font-weight: 850 !important;
}

.vcb-layout.vcb-layout-review {
  grid-template-columns: minmax(0, 1fr) !important;
}

.vcb-layout-review .vcb-panel {
  max-width: 980px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.vcb-payment-methods {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 18px !important;
}

.vcb-payment-method {
  text-align: left !important;
  border: 2px solid #d6e8fb !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  padding: 16px !important;
  cursor: pointer !important;
  color: #07142f !important;
}

.vcb-payment-method:hover {
  border-color: #8fc5ff !important;
  background: #f0f7ff !important;
}

.vcb-payment-method.selected {
  border-color: #0066cc !important;
  background: #eaf4ff !important;
}

.vcb-payment-method strong {
  display: block !important;
  color: #07142f !important;
  font-size: 16px !important;
  font-weight: 850 !important;
}

.vcb-payment-method small {
  display: block !important;
  margin-top: 5px !important;
  color: #657792 !important;
  line-height: 1.4 !important;
}

@media (max-width: 1100px) {
  .vcb-date-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 980px) {
  .vcb-layout {
    grid-template-columns: 1fr !important;
  }

  .vcb-layout > .vcb-panel {
    order: 1 !important;
  }

  .vcb-summary-card {
    position: static !important;
    order: 2 !important;
    margin-top: 20px !important;
  }

  .vcb-summary-body {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 18px !important;
  }
}

@media (max-width: 760px) {
  .vcb-booking-app {
    padding: 26px 14px !important;
  }

  .vcb-progress {
    gap: 4px !important;
  }

  .vcb-progress-item small {
    display: none !important;
  }

  .vcb-progress-item span {
    width: 30px !important;
    height: 30px !important;
  }

  .vcb-progress-item:before {
    top: 15px !important;
  }

  .vcb-panel h2 {
    font-size: 24px !important;
  }

  .vcb-option-card {
    grid-template-columns: minmax(0, 1fr) auto 22px !important;
    padding: 14px !important;
  }

  .vcb-two-col,
  .vcb-review-row,
  .vcb-summary-body {
    grid-template-columns: 1fr !important;
  }

  .vcb-nav {
    gap: 10px !important;
  }

  .vcb-btn {
    min-width: auto !important;
    width: 50% !important;
  }

  .vcb-calendar-weekdays,
  .vcb-calendar-grid {
    gap: 4px !important;
  }

  .vcb-date-day {
    min-height: 42px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
  }

  .vcb-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .vcb-payment-methods {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .vcb-booking-app {
    padding: 22px 12px !important;
  }

  .vcb-option-card {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .vcb-option-card i {
    display: none !important;
  }

  .vcb-calendar {
    padding: 10px !important;
  }

  .vcb-calendar-weekdays span {
    font-size: 10px !important;
  }

  .vcb-date-day {
    min-height: 38px !important;
    font-size: 12px !important;
  }

  .vcb-slots {
    grid-template-columns: 1fr !important;
  }

  .vcb-summary-head strong,
  .vcb-price-breakdown .vcb-price-grand strong {
    font-size: 26px !important;
  }
}