/* =========================================
   SOCCERBOTSTUDIO — GLOBAL VISUAL SYSTEM
   ========================================= */

:root {
  --sb-navy: #050a2f;
  --sb-navy-2: #0a1248;
  --sb-navy-3: #111a5f;

  --sb-blue: #2a2eff;
  --sb-cyan: #00b8d4;
  --sb-cyan-soft: rgba(0, 184, 212, 0.15);

  --sb-white: #ffffff;
  --sb-paper: #f5f7fa;
  --sb-card: #ffffff;

  --sb-text: #101636;
  --sb-muted: #6f7890;
  --sb-border: #dce1e9;

  --sb-radius-sm: 10px;
  --sb-radius: 14px;
  --sb-radius-lg: 20px;

  --sb-shadow:
    0 8px 30px rgba(5, 10, 47, 0.10);
}

/* PAGE */
html,
body {
  background:
    radial-gradient(circle at 20% 0%,
      rgba(42, 46, 255, 0.10),
      transparent 34%),
    linear-gradient(
      180deg,
      #f8f9fc 0%,
      #f3f5fa 100%
    ) !important;

  color: var(--sb-text) !important;
  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif !important;
}

/* MAIN CONTAINERS */
.card,
.panel,
.part,
.section,
.booking-item,
.invoice,
[class*="card"],
[class*="panel"] {
  border-radius: var(--sb-radius-lg) !important;
  border: 1px solid rgba(16, 22, 54, 0.08) !important;
  box-shadow: var(--sb-shadow) !important;
  background: var(--sb-card) !important;
}

/* HEADINGS */
h1,
h2,
h3,
h4,
h5,
#events h3 {
  color: var(--sb-navy) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* TEXT */
p,
label,
span {
  color: inherit;
}

/* LINKS */
a {
  color: var(--sb-blue) !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--sb-cyan) !important;
}

/* FORM CONTROLS */
input,
select,
textarea {
  min-height: 46px !important;
  border-radius: var(--sb-radius-sm) !important;
  border: 1px solid var(--sb-border) !important;
  background: #fff !important;
  color: var(--sb-text) !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--sb-cyan) !important;
  box-shadow: 0 0 0 3px var(--sb-cyan-soft) !important;
  outline: none !important;
}

/* GENERIC CTA — temporary broad targeting */
.btn,
a.btn,
input[type="submit"],
input[type="button"] {
  min-height: 46px !important;
  padding: 0 22px !important;

  border-radius: 12px !important;
  border: 1px solid var(--sb-blue) !important;

  background:
    linear-gradient(
      135deg,
      var(--sb-blue),
      #4548ff
    ) !important;

  color: #fff !important;
  font-weight: 700 !important;

  box-shadow:
    0 8px 20px rgba(42, 46, 255, 0.20) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease !important;
}

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

  background:
    linear-gradient(
      135deg,
      var(--cyan, #00b8d4),
      var(--sb-blue)
    ) !important;

  box-shadow:
    0 10px 26px rgba(42, 46, 255, 0.26) !important;
}

/* SELECTED STATES */
.selected,
.active,
#events .selectedEvent {
  border-color: var(--sb-cyan) !important;
  box-shadow:
    0 0 0 2px rgba(0, 184, 212, 0.18),
    0 8px 24px rgba(0, 184, 212, 0.14) !important;
}

/* CALENDAR / SLOT FEEL */
[class*="calendar"] button,
[class*="time"] button,
[class*="slot"] button,
.reserve_time_btn {
  border-radius: 12px !important;
}

/* AVAILABLE TIME BUTTONS */
#events input.reserve_time_btn {
  background: #eef2ff !important;
  color: var(--sb-navy) !important;
  border: 1px solid rgba(42, 46, 255, 0.12) !important;
  font-weight: 600 !important;
}

#events input.reserve_time_btn:hover {
  background: var(--sb-blue) !important;
  color: #fff !important;
  border-color: var(--sb-blue) !important;
}

/* SECONDARY BUTTONS */
#events input.select_another_btn {
  background: transparent !important;
  color: var(--sb-blue) !important;
  border: 1px solid var(--sb-blue) !important;
}

/* PRICE / IMPORTANT VALUES */
.price,
.total,
[class*="price"],
[class*="total"] {
  color: var(--sb-blue) !important;
  font-weight: 800 !important;
}

/* LIGHT DIVIDERS */
hr {
  border-color: rgba(16, 22, 54, 0.08) !important;
}

/* REMOVE CHEAP SHADOWS / DEFAULT EFFECTS */
* {
  text-shadow: none !important;
}

/* =========================================================
   SOCCERBOTSTUDIO — BOOKING FLOW PASS 2
   ========================================================= */

/* Booking area */
#events {
  max-width: 1180px !important;
  margin: 0 auto !important;
}

/* Calendar container */
#events .calendar,
#events [class*="calendar"] {
  background: #ffffff !important;
  border: 1px solid rgba(5, 10, 47, 0.08) !important;
  border-radius: 20px !important;
  box-shadow:
    0 18px 45px rgba(5, 10, 47, 0.08) !important;
}

/* Month heading */
#events [class*="calendar"] h3,
#events [class*="month"] {
  color: #050a2f !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* Calendar navigation */
#events [class*="prev"],
#events [class*="next"] {
  border-radius: 12px !important;
}

/* Available time heading */
#events h2,
#events h3 {
  color: #050a2f !important;
  font-weight: 800 !important;
}

/* TIME SLOT BUTTONS */
#events input.reserve_time_btn {
  min-width: 100px !important;
  height: 48px !important;

  background: #ffffff !important;
  color: #050a2f !important;

  border: 1px solid rgba(42, 46, 255, 0.20) !important;
  border-radius: 12px !important;

  font-size: 14px !important;
  font-weight: 700 !important;

  box-shadow:
    0 5px 15px rgba(5, 10, 47, 0.06) !important;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}

#events input.reserve_time_btn:hover {
  background:
    linear-gradient(135deg, #2a2eff, #00b8d4) !important;

  color: #ffffff !important;
  border-color: transparent !important;

  transform: translateY(-2px) !important;

  box-shadow:
    0 10px 25px rgba(42, 46, 255, 0.22) !important;
}

/* Selected booking element */
#events .selectedEvent,
#events .selected {
  background: #050a2f !important;
  color: #ffffff !important;
  border-color: #00b8d4 !important;
}

/* Current/selected date */
#events td.selected,
#events td.active,
#events [class*="selected-day"],
#events [class*="selectedDate"] {
  background: #2a2eff !important;
  color: #ffffff !important;
  border-radius: 10px !important;
}

/* Available dates */
#events td a,
#events [class*="available"] a {
  color: #2a2eff !important;
  font-weight: 700 !important;
}

/* Weekend labels */
#events [class*="weekend"] {
  color: #626b80 !important;
}

/* Back link */
#events a[href*="back"],
#events .back {
  font-weight: 700 !important;
}

/* Remove excessive stock borders */
#events table,
#events td,
#events th {
  box-shadow: none !important;
}

/* Stronger heading spacing */
#events h2 {
  margin-top: 28px !important;
  margin-bottom: 18px !important;
}

/* More premium overall spacing */
#events .container,
#events [class*="container"] {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* =========================================
   SOCCERBOTSTUDIO — PROVIDER CARDS
   ========================================= */

/* Provider card shell */
#events .provider,
#events [class*="provider"] .service-provider,
#events [class*="provider-item"],
#events [class*="provider_item"] {
  background: #ffffff !important;
  border: 1px solid rgba(5, 10, 47, 0.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 35px rgba(5, 10, 47, 0.08) !important;
  overflow: hidden !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

#events .provider:hover,
#events [class*="provider-item"]:hover,
#events [class*="provider_item"]:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 42px rgba(5, 10, 47, 0.13) !important;
}

/* Provider name */
#events [class*="provider"] h3,
#events [class*="provider"] h4,
#events [class*="provider"] .name {
  color: #050a2f !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
}

/* Provider description */
#events [class*="provider"] p,
#events [class*="provider"] .description {
  color: #626b80 !important;
  font-size: 14px !important;
}

/* Provider select button */
#events [class*="provider"] .btn,
#events [class*="provider"] input[type="button"],
#events [class*="provider"] input[type="submit"] {
  width: calc(100% - 32px) !important;
  margin: 16px !important;
  border-radius: 12px !important;
  min-height: 46px !important;
  background: linear-gradient(135deg, #2a2eff, #4548ff) !important;
  color: #fff !important;
  font-weight: 800 !important;
}

/* Hover */
#events [class*="provider"] .btn:hover,
#events [class*="provider"] input[type="button"]:hover,
#events [class*="provider"] input[type="submit"]:hover {
  background: linear-gradient(135deg, #00b8d4, #2a2eff) !important;
  transform: translateY(-1px) !important;
}

/* =========================================
   SOCCERBOTSTUDIO — STOCK UI CLEANUP
   ========================================= */

/* Remove SimplyBook timezone / "Our time" bar */
#sb_booking_company_time {
  display: none !important;
}

/* Remove the empty space around it if SimplyBook leaves any */
.timezone-panel {
  display: none !important;
}

/* =========================================================
   SOCCERBOTSTUDIO — BOOKING STEPPER
   ========================================================= */

/* Whole progress/navigation bar */
#steps-nav {
  background: #050a2f !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: 0 8px 24px rgba(5, 10, 47, 0.14) !important;
}

/* Remove stock list styling */
#steps-nav ul {
  display: flex !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #050a2f !important;
}

/* Individual steps */
#steps-nav .step_info_item {
  flex: 1 1 0 !important;
  position: relative !important;
  background: #050a2f !important;
  border: 0 !important;
  min-height: 58px !important;
}

/* Remove SimplyBook pink chevrons */
#steps-nav .step_info_item::before,
#steps-nav .step_info_item::after,
#steps-nav .step_info_item a::before,
#steps-nav .step_info_item a::after {
  border: 0 !important;
  background: transparent !important;
}

/* Clickable step */
#steps-nav .step_info_item > a {
  height: 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 18px !important;

  background: #050a2f !important;
  border: 0 !important;

  text-decoration: none !important;
}

/* Text wrapper */
#steps-nav .step_info_item .content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  width: 100% !important;
}

/* Main step title */
#steps-nav .step_info_item .title-small {
  color: rgba(255,255,255,.55) !important;

  font-size: 13px !important;
  font-weight: 800 !important;

  letter-spacing: .08em !important;
  text-transform: uppercase !important;

  transition:
    color .2s ease,
    opacity .2s ease !important;
}

/* Secondary text such as selected provider */
#steps-nav .step_info_item .title-sub {
  color: rgba(255,255,255,.42) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* ACTIVE STEP */
#steps-nav .step_info_item.active {
  background:
    linear-gradient(
      135deg,
      #2a2eff 0%,
      #00b8d4 100%
    ) !important;
}

#steps-nav .step_info_item.active > a {
  background: transparent !important;
}

#steps-nav .step_info_item.active .title-small {
  color: #ffffff !important;
}

#steps-nav .step_info_item.active .title-sub {
  color: rgba(255,255,255,.78) !important;
}

/* Separators between steps */
#steps-nav .step_info_item:not(:last-child) {
  border-right:
    1px solid rgba(255,255,255,.10) !important;
}

/* Tiny accent under active step */
#steps-nav .step_info_item.active::after {
  content: "" !important;

  position: absolute !important;
  left: 22% !important;
  right: 22% !important;
  bottom: 0 !important;

  height: 3px !important;

  background: #ffffff !important;
  border-radius: 999px 999px 0 0 !important;
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

  #steps-nav .step_info_item {
    min-height: 50px !important;
  }

  #steps-nav .step_info_item > a {
    height: 50px !important;
    padding: 0 8px !important;
  }

  #steps-nav .step_info_item .title-small {
    font-size: 11px !important;
    letter-spacing: .05em !important;
  }

  #steps-nav .step_info_item .title-sub {
    display: none !important;
  }
}

/* =========================================================
   SOCCERBOTSTUDIO — PROVIDER CARD REFINEMENT
   ========================================================= */

/* Provider grid spacing */
#events [class*="provider"] {
  gap: 18px !important;
}

/* Cards */
#events [class*="provider-item"],
#events [class*="provider_item"],
#events .provider {
  min-height: 0 !important;
  border-radius: 16px !important;
  border: 1px solid rgba(5,10,47,.08) !important;
  box-shadow: 0 10px 28px rgba(5,10,47,.07) !important;
  overflow: hidden !important;
}

/* Internal card spacing */
#events [class*="provider"] .content,
#events [class*="provider"] [class*="content"] {
  padding: 20px !important;
}

/* Instructor name */
#events [class*="provider"] h3,
#events [class*="provider"] h4,
#events [class*="provider"] .name {
  margin-bottom: 5px !important;
  color: #050a2f !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

/* Description */
#events [class*="provider"] p,
#events [class*="provider"] .description {
  margin-bottom: 12px !important;
  color: #6f7890 !important;
  font-size: 13px !important;
}

/* Select button */
#events [class*="provider"] .btn,
#events [class*="provider"] input[type="button"],
#events [class*="provider"] input[type="submit"] {
  min-height: 42px !important;
  margin: 10px 16px 16px !important;
  width: calc(100% - 32px) !important;
  border-radius: 10px !important;
}

/* Cyan accent line */
#events [class*="provider-item"]::before,
#events [class*="provider_item"]::before,
#events .provider::before {
  content: "" !important;
  display: block !important;
  height: 3px !important;
  background: linear-gradient(90deg,#2a2eff,#00b8d4) !important;
}

/* Hover card */
#events [class*="provider-item"]:hover,
#events [class*="provider_item"]:hover,
#events .provider:hover {
  border-color: rgba(0,184,212,.45) !important;
  box-shadow:
    0 14px 36px rgba(5,10,47,.10),
    0 0 0 1px rgba(0,184,212,.10) !important;
}