/* Yatoon Apple-inspired UI polish */

:root {
  --yatoon-skin-page-bg: #f5f5f7;
  --yatoon-skin-card-bg: #ffffff;
  --yatoon-skin-border: #e5e5ea;
  --yatoon-skin-primary-btn-bg: #008a00;
  --yatoon-skin-primary-btn-bg-hover: #008a00;
  --yatoon-skin-primary-btn-text: #ffffff;
  --yatoon-skin-primary-btn-size: 16px;
  --yatoon-skin-primary-btn-radius: 999px;
  --yatoon-apple-bg: var(--yatoon-skin-page-bg);
  --yatoon-apple-card: color-mix(in srgb, var(--yatoon-skin-card-bg) 86%, transparent);
  --yatoon-apple-card-solid: var(--yatoon-skin-card-bg);
  --yatoon-apple-text: #1d1d1f;
  --yatoon-apple-muted: #6e6e73;
  --yatoon-apple-border: var(--yatoon-skin-border);
  --yatoon-apple-border-strong: color-mix(in srgb, var(--yatoon-skin-border) 78%, #000 22%);
  --yatoon-apple-blue: var(--yatoon-skin-primary-btn-bg);
  --yatoon-apple-blue-hover: var(--yatoon-skin-primary-btn-bg-hover);
  --yatoon-apple-green: #34c759;
  --yatoon-apple-radius: 18px;
  --yatoon-apple-radius-sm: 12px;
  --yatoon-apple-shadow: 0 18px 50px rgba(0,0,0,.08);
  --yatoon-apple-shadow-soft: 0 8px 24px rgba(0,0,0,.06);
}

.sbs-booking-container,
#yatoon-svc-wrap,
.sbs-portal-wrap,
.yatoon-manage-wrap {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  color: var(--yatoon-apple-text) !important;
  letter-spacing: 0 !important;
}

#yatoon-svc-wrap,
.sbs-portal-wrap,
.yatoon-manage-wrap {
  background: var(--yatoon-apple-bg) !important;
}

.sbs-booking-container {
  max-width: 1200px !important;
  padding: 32px 18px 52px !important;
  background: var(--yatoon-apple-bg) !important;
  border-radius: 28px !important;
}

.sbs-booking-main,
.sbs-booking-sidebar,
.sbs-options-container,
.sbs-portal-card,
.yatoon-manage-card,
#yatoon-svc-wrap .ysm-inner,
.sbs-card {
  background: var(--yatoon-apple-card) !important;
  border: 1px solid var(--yatoon-apple-border) !important;
  border-radius: var(--yatoon-apple-radius) !important;
  box-shadow: var(--yatoon-apple-shadow-soft) !important;
  backdrop-filter: saturate(180%) blur(18px);
}

.sbs-booking-main {
  padding: 30px !important;
}

.sbs-booking-sidebar {
  padding: 24px !important;
  top: 28px !important;
}

.sbs-form-step h3,
.sbs-portal-login h2,
.sbs-portal-header h2,
.yatoon-manage-header h2,
#yatoon-svc-wrap .ysm-section-title {
  color: var(--yatoon-apple-text) !important;
  font-weight: 760 !important;
  letter-spacing: -.02em !important;
}

.sbs-form-step h3 {
  font-size: clamp(24px, 3vw, 34px) !important;
  margin-bottom: 24px !important;
}

.sbs-step-track,
.sbs-step-progress {
  top: 18px !important;
  height: 3px !important;
}

.sbs-step-bubble {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid var(--yatoon-apple-border-strong) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
}

.sbs-step.active .sbs-step-bubble,
.sbs-step.completed .sbs-step-bubble {
  background: var(--yatoon-apple-blue) !important;
  border-color: var(--yatoon-apple-blue) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--yatoon-apple-blue) 14%, transparent) !important;
}

.sbs-step.completed .sbs-step-bubble {
  background: var(--yatoon-apple-green) !important;
  border-color: var(--yatoon-apple-green) !important;
}

.sbs-step.active .sbs-step-title {
  color: var(--yatoon-apple-blue) !important;
}

.sbs-service-item,
.sbs-option-item,
.sbs-staff-card,
.sbs-time-slot,
#yatoon-svc-wrap .ysm-item,
#yatoon-svc-wrap .ysm-feat-card,
.sbs-portal-stat,
.sbs-portal-next {
  background: var(--yatoon-apple-card-solid) !important;
  border: 1px solid var(--yatoon-apple-border) !important;
  border-radius: var(--yatoon-apple-radius-sm) !important;
  box-shadow: none !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

.sbs-service-item:hover,
.sbs-option-item:hover,
.sbs-staff-card:hover,
.sbs-time-slot:hover,
#yatoon-svc-wrap .ysm-item:hover,
#yatoon-svc-wrap .ysm-feat-card:hover {
  border-color: color-mix(in srgb, var(--yatoon-apple-blue) 38%, var(--yatoon-apple-border)) !important;
  box-shadow: var(--yatoon-apple-shadow-soft) !important;
  transform: translateY(-1px) !important;
}

.sbs-service-item.selected,
.sbs-option-item.selected,
.sbs-staff-card.selected,
.sbs-time-slot.selected {
  background: color-mix(in srgb, var(--yatoon-apple-blue) 7%, var(--yatoon-skin-card-bg)) !important;
  border-color: var(--yatoon-apple-blue) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--yatoon-apple-blue) 14%, transparent) !important;
}

.sbs-service-name,
#yatoon-svc-wrap .ysm-item-name,
#yatoon-svc-wrap .ysm-feat-name {
  color: var(--yatoon-apple-text) !important;
  font-weight: 720 !important;
  letter-spacing: -.01em !important;
}

.sbs-service-details,
.sbs-service-brief,
.sbs-service-desc-wrap,
#yatoon-svc-wrap .ysm-item-desc,
#yatoon-svc-wrap .ysm-item-duration,
.sbs-portal-login p.subtitle,
.yatoon-manage-subtitle,
.ymr-label {
  color: var(--yatoon-apple-muted) !important;
}

.sbs-book-btn,
.sbs-select-btn,
.sbs-btn-next:not(:disabled):not(.is-disabled),
.sbs-btn-submit:not(:disabled):not(.is-disabled),
#sbs-cart-next-btn:not(:disabled):not(.is-disabled),
body.sbs-booking-immersive #sbs-cart-next-btn:not(:disabled):not(.is-disabled),
.sbs-portal-btn,
.yatoon-btn-primary,
#yatoon-svc-wrap .ysm-book-btn,
#yatoon-svc-wrap .ysm-item-book,
.button-primary {
  background: var(--yatoon-apple-blue) !important;
  border-color: var(--yatoon-apple-blue) !important;
  color: var(--yatoon-skin-primary-btn-text) !important;
  border-radius: var(--yatoon-skin-primary-btn-radius) !important;
  box-shadow: none !important;
  font-size: var(--yatoon-skin-primary-btn-size) !important;
  font-weight: 700 !important;
  min-height: 40px !important;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease !important;
}

.sbs-book-btn:hover,
.sbs-select-btn:hover,
.sbs-btn-next:not(:disabled):not(.is-disabled):hover,
.sbs-btn-submit:not(:disabled):not(.is-disabled):hover,
#sbs-cart-next-btn:not(:disabled):not(.is-disabled):hover,
body.sbs-booking-immersive #sbs-cart-next-btn:not(:disabled):not(.is-disabled):hover,
.sbs-portal-btn:hover,
.yatoon-btn-primary:hover,
#yatoon-svc-wrap .ysm-book-btn:hover,
#yatoon-svc-wrap .ysm-item-book:hover,
.button-primary:hover {
  background: var(--yatoon-apple-blue-hover) !important;
  border-color: var(--yatoon-apple-blue-hover) !important;
  transform: translateY(-1px) !important;
}

.sbs-portal-btn-outline,
.yatoon-btn-outline,
.yatoon-btn-ghost,
.button:not(.button-primary) {
  border-radius: 999px !important;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="number"],
input[type="search"],
select,
textarea,
.sbs-portal-input,
#yatoon-svc-wrap .ysm-search-box {
  border: 1px solid var(--yatoon-apple-border) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--yatoon-skin-card-bg) 92%, transparent) !important;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.02) !important;
  color: var(--yatoon-apple-text) !important;
}

input:focus,
select:focus,
textarea:focus,
.sbs-portal-input:focus,
#yatoon-svc-wrap .ysm-search-box:focus-within {
  border-color: var(--yatoon-apple-blue) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--yatoon-apple-blue) 14%, transparent) !important;
  outline: none !important;
}

.sbs-popular-badge,
.sbs-status-badge,
#yatoon-svc-wrap .ysm-featured-badge {
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--yatoon-skin-card-bg) 92%, var(--yatoon-apple-bg)) !important;
  border: 1px solid var(--yatoon-apple-border) !important;
  color: var(--yatoon-apple-muted) !important;
  letter-spacing: .02em !important;
}

.sbs-service-thumb,
.sbs-staff-avatar-wrap,
#yatoon-svc-wrap .ysm-item-img-wrap,
#yatoon-svc-wrap .ysm-feat-img-wrap {
  border-radius: 16px !important;
  overflow: hidden !important;
  background: color-mix(in srgb, var(--yatoon-skin-card-bg) 82%, var(--yatoon-apple-bg)) !important;
}

.sbs-portal-stat {
  background: linear-gradient(180deg, var(--yatoon-skin-card-bg), color-mix(in srgb, var(--yatoon-skin-card-bg) 80%, var(--yatoon-apple-bg))) !important;
}

.sbs-portal-stat .value {
  color: var(--yatoon-apple-text) !important;
}

.sbs-portal-tabs,
#yatoon-svc-wrap .ysm-cat-nav {
  border-bottom: 1px solid var(--yatoon-apple-border) !important;
}

.sbs-portal-tab.active,
#yatoon-svc-wrap .ysm-cat-tab.active {
  color: var(--yatoon-apple-blue) !important;
  border-bottom-color: var(--yatoon-apple-blue) !important;
}

.yatoon-manage-header {
  background: linear-gradient(180deg, var(--yatoon-skin-card-bg), var(--yatoon-apple-bg)) !important;
  color: var(--yatoon-apple-text) !important;
  border-bottom: 1px solid var(--yatoon-apple-border) !important;
}

.yatoon-manage-header h2 {
  color: var(--yatoon-apple-text) !important;
}

.sbs-admin-container,
.sbs-admin-page {
  color: var(--yatoon-apple-text) !important;
}

.sbs-card {
  padding: 22px !important;
}

.sbs-card h2 {
  border-bottom: 1px solid var(--yatoon-apple-border) !important;
  font-weight: 760 !important;
}

.sbs-table-toolbar,
.sbs-admin-table-wrap {
  border-radius: var(--yatoon-apple-radius-sm) !important;
  border-color: var(--yatoon-apple-border) !important;
  box-shadow: var(--yatoon-apple-shadow-soft) !important;
}

.wp-list-table.widefat {
  border-radius: var(--yatoon-apple-radius-sm) !important;
  overflow: hidden !important;
}

@media (max-width: 782px) {
  .sbs-booking-container {
    padding: 18px 10px 34px !important;
    border-radius: 0 !important;
  }

  .sbs-booking-main,
  .sbs-booking-sidebar,
  #yatoon-svc-wrap .ysm-inner,
  .sbs-portal-card,
  .yatoon-manage-card {
    border-radius: 16px !important;
    padding: 18px !important;
  }

  .sbs-booking-steps {
    padding: 0 !important;
    margin-bottom: 28px !important;
  }

  .sbs-step-title {
    font-size: 11px !important;
  }

  .sbs-service-layout,
  #yatoon-svc-wrap .ysm-item {
    gap: 12px !important;
  }
}