/* SoloPayLink booking templates: shared premium layout shell.
   Visual-only CSS. Booking, payments, OTP, and availability logic stay in booking.js. */

body.spl-booking-template-enabled {
  --spl-template-surface: #ffffff;
  --spl-template-ink: #0f172a;
  --spl-template-muted: #64748b;
  --spl-template-line: rgba(15, 23, 42, 0.10);
  --spl-template-soft: rgba(248, 250, 252, 0.96);
  --spl-template-shadow: 0 28px 70px rgba(15, 23, 42, 0.12);
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 1) 0%, rgba(239, 246, 255, 0.82) 42%, #ffffff 100%) !important;
  color: var(--spl-template-ink);
}

body.spl-booking-template-enabled .main {
  max-width: min(1120px, calc(100% - 28px)) !important;
  padding-top: 24px !important;
  gap: 22px !important;
}

body.spl-booking-template-enabled .booking-hero-card,
body.spl-booking-template-enabled .booking-slots-card {
  border-radius: 28px !important;
  border: 1px solid var(--spl-template-line) !important;
  box-shadow: var(--spl-template-shadow) !important;
}

body.spl-booking-template-enabled .spl-hero-top,
body.spl-booking-template-enabled .spl-section-top {
  position: relative;
  z-index: 1;
}

body.spl-booking-template-enabled .spl-hero-badge,
body.spl-booking-template-enabled .spl-section-eyebrow,
body.spl-booking-template-enabled .spl-voice-pill {
  border: 1px solid rgba(79, 70, 229, 0.14) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: var(--brand, #4f46e5) !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07) !important;
}

body.spl-booking-template-enabled .spl-profile-stack {
  position: relative;
  z-index: 1;
  gap: 14px !important;
}

body.spl-booking-template-enabled #bizBranding {
  margin-bottom: 8px !important;
}

body.spl-booking-template-enabled #bizLogo {
  width: 88px !important;
  height: 88px !important;
  border-radius: 24px !important;
  padding: 8px !important;
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.14) !important;
}

body.spl-booking-template-enabled .biz-title {
  max-width: 920px;
  font-size: clamp(30px, 4vw, 56px) !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

body.spl-booking-template-enabled #statusText {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
  color: var(--spl-template-muted) !important;
  font-size: clamp(15px, 1.7vw, 18px) !important;
  line-height: 1.6 !important;
  font-weight: 700 !important;
}

body.spl-booking-template-enabled #bizSummary,
body.spl-booking-template-enabled #bizServicesSummary,
body.spl-booking-template-enabled #notesToCustomers,
body.spl-booking-template-enabled .spl-booking-trust-card,
body.spl-booking-template-enabled .biz-trust-details-card {
  max-width: 940px !important;
}

body.spl-booking-template-enabled #bizSummary .biz-summary-grid,
body.spl-booking-template-enabled #bizServicesSummary .biz-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body.spl-booking-template-enabled #bizSummary .biz-summary-item,
body.spl-booking-template-enabled #bizServicesSummary .biz-summary-item {
  position: relative;
  min-height: 104px;
  padding: 16px 16px 15px 18px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08) !important;
  overflow: hidden;
}

body.spl-booking-template-enabled #bizSummary .biz-summary-item::before,
body.spl-booking-template-enabled #bizServicesSummary .biz-summary-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--brand, #4f46e5), var(--brand-2, #0ea5e9));
}

body.spl-booking-template-enabled .biz-summary-bullet {
  display: none !important;
}

body.spl-booking-template-enabled .biz-summary-label {
  display: block !important;
  color: var(--spl-template-ink) !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  text-shadow: none !important;
  overflow-wrap: anywhere;
}

body.spl-booking-template-enabled .biz-summary-value {
  display: block !important;
  color: var(--spl-template-muted) !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  font-weight: 780 !important;
  margin-top: 5px !important;
  text-shadow: none !important;
  overflow-wrap: anywhere;
}

body.spl-booking-template-enabled .spl-booking-trust-card {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

body.spl-booking-template-enabled .spl-trust-item,
body.spl-booking-template-enabled .biz-trust-detail-row,
body.spl-booking-template-enabled .biz-reviews-link,
body.spl-booking-template-enabled .spl-voice-card,
body.spl-booking-template-enabled #bookingInfoCards > div {
  border-radius: 20px !important;
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  background: rgba(255, 255, 255, 0.90) !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08) !important;
}

body.spl-booking-template-enabled .spl-trust-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--brand, #4f46e5), var(--brand-2, #0ea5e9)) !important;
  color: #ffffff !important;
}

body.spl-booking-template-enabled #notesToCustomers {
  white-space: pre-line;
  padding: 18px 20px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(15, 23, 42, 0.09) !important;
  background: var(--spl-template-soft) !important;
  color: var(--spl-template-ink) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  font-weight: 740 !important;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06) !important;
}

body.spl-booking-template-enabled .spl-section-title {
  font-size: clamp(26px, 3.4vw, 44px) !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  color: var(--spl-template-ink) !important;
}

body.spl-booking-template-enabled .spl-section-sub {
  max-width: 720px;
  color: var(--spl-template-muted) !important;
  font-weight: 700 !important;
}

body.spl-booking-template-enabled #serviceSelectTop,
body.spl-booking-template-enabled #datePicker,
body.spl-booking-template-enabled .modal-content .input,
body.spl-booking-template-enabled .modal-content select {
  border-radius: 18px !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07) !important;
}

body.spl-booking-template-enabled #weekDays {
  gap: 10px !important;
}

body.spl-booking-template-enabled #weekDays button,
body.spl-booking-template-enabled .slots-container button {
  border-radius: 18px !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  background: #ffffff !important;
  color: var(--spl-template-ink) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important;
}

body.spl-booking-template-enabled #weekDays button:hover,
body.spl-booking-template-enabled .slots-container button:hover {
  border-color: color-mix(in srgb, var(--brand, #4f46e5) 46%, white) !important;
  transform: translateY(-2px);
}

body.spl-booking-template-enabled #weekDays button.today,
body.spl-booking-template-enabled #weekDays button.is-today,
body.spl-booking-template-enabled #weekDays button[aria-current="date"],
body.spl-booking-template-enabled #weekDays button[data-today="true"],
body.spl-booking-template-enabled #weekDays button[data-today="1"],
body.spl-booking-template-enabled .slots-container button.primary,
body.spl-booking-template-enabled .slots-container button.selected {
  background: linear-gradient(135deg, var(--brand, #4f46e5), var(--brand-2, #0ea5e9)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

body.spl-booking-template-enabled .primary,
body.spl-booking-template-enabled .btn.primary,
body.spl-booking-template-enabled .spl-voice-btn {
  background: linear-gradient(135deg, var(--brand, #4f46e5), var(--brand-2, #0ea5e9)) !important;
  border-color: transparent !important;
}

body.spl-booking-template-enabled .footer {
  border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: rgba(255, 255, 255, 0.86) !important;
}

@media (max-width: 760px) {
  body.spl-booking-template-enabled .main {
    max-width: calc(100% - 18px) !important;
    padding: 12px 0 28px !important;
    gap: 14px !important;
  }

  body.spl-booking-template-enabled .booking-hero-card,
  body.spl-booking-template-enabled .booking-slots-card {
    border-radius: 22px !important;
    padding: 20px 16px !important;
  }

  body.spl-booking-template-enabled #bizSummary .biz-summary-grid,
  body.spl-booking-template-enabled #bizServicesSummary .biz-summary-grid,
  body.spl-booking-template-enabled .spl-booking-trust-card {
    grid-template-columns: 1fr !important;
  }

  body.spl-booking-template-enabled #bizSummary .biz-summary-item,
  body.spl-booking-template-enabled #bizServicesSummary .biz-summary-item {
    min-height: auto;
  }

  body.spl-booking-template-enabled .biz-title {
    font-size: clamp(30px, 10vw, 42px) !important;
  }
}