/* =========================================================
   Wisal Booking Modal — therapeutic restyle (overrides only)
   Loaded globally; scoped to .booking-modal so it won't leak.
   ========================================================= */
.booking-modal{
  --p:#6E2F97; --p-dark:#4A1E68; --p-soft:#F3EDF9;
  --g:#52A73E; --g-soft:#EAF5E6;
  --cream:#FAF9FB; --ink:#2A2433; --muted:#6B6577; --line:#ECE9F1;
}
.booking-modal .modal-content{
  border:none;border-radius:26px;overflow:hidden;
  background:var(--cream);
  box-shadow:0 30px 80px rgba(74,30,104,.28);
}
.booking-modal .btn-close{
  background:#fff;border-radius:50%;width:38px;height:38px;display:flex;
  align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(110,47,151,.14);
  opacity:1;z-index:5;color:var(--p)
}
.booking-modal .modal-body{padding:26px}

/* ---- Stepper header ---- */
.booking-modal .bs-stepper-header{
  background:#fff;border-radius:18px;padding:16px 10px;margin-bottom:24px;
  box-shadow:0 4px 20px rgba(110,47,151,.06);border:1px solid var(--line)
}
.booking-modal .bs-stepper-circle{
  background:var(--p-soft);color:var(--p);border:none;font-size:16px;
  width:46px;height:46px;line-height:46px;transition:.25s
}
.booking-modal .step-trigger{padding:8px 10px;opacity:1}
.booking-modal .step-trigger .h3{display:none}
.booking-modal .bs-stepper-label{color:var(--muted);font-weight:600;font-size:13px;margin-top:6px}
.booking-modal .step.active .bs-stepper-circle{
  background:linear-gradient(145deg,var(--p),var(--p-dark));color:#fff;
  box-shadow:0 10px 22px rgba(110,47,151,.32)
}
.booking-modal .step.active .bs-stepper-label{color:var(--p)}
.booking-modal .step.active-prev .bs-stepper-circle{background:var(--g);color:#fff}
.booking-modal .bs-stepper-line,.booking-modal .bs-stepper .line{background:var(--line)}

/* ---- Titles ---- */
.booking-modal .section-title .title,
.booking-modal .authentication-area .title,
.booking-modal h3.title,.booking-modal h4.title{color:var(--ink);font-weight:700}

/* ---- Staff cards ---- */
.booking-modal .staff-area .card{
  border:1px solid var(--line)!important;border-radius:18px;overflow:hidden;
  transition:.25s;box-shadow:0 4px 18px rgba(110,47,151,.06)
}
.booking-modal .staff_select:hover .card{
  box-shadow:0 16px 40px rgba(110,47,151,.16);transform:translateY(-4px);
  border-color:var(--p)!important
}
.booking-modal .staff-area .card-title a{color:var(--ink)}
.booking-modal .btn-text.color-primary,.booking-modal .color-primary{color:var(--p)!important}

/* ---- Form fields ---- */
.booking-modal .form-control,.booking-modal .form-select{
  border:1.5px solid var(--line);border-radius:13px;padding:12px 15px;background:#fff;
  color:var(--ink);font-size:15px
}
.booking-modal .form-control:focus,.booking-modal .form-select:focus{
  border-color:var(--p);box-shadow:0 0 0 3px rgba(110,47,151,.10)
}
.booking-modal .form-label,.booking-modal label{color:var(--ink);font-weight:600;font-size:14px}

/* ---- Time slots ---- */
.booking-modal .booking-time-slider .time,
.booking-modal .time{
  border:1.5px solid var(--line)!important;border-radius:12px;padding:10px 6px;
  color:var(--ink);font-weight:500;transition:.2s;cursor:pointer;background:#fff
}
.booking-modal .time:hover{border-color:var(--p)!important;color:var(--p)}
.booking-modal .time.time_active{
  background:var(--p)!important;border-color:var(--p)!important;color:#fff!important
}

/* ---- Buttons ---- */
.booking-modal .btn-primary,
.booking-modal .btn-gradient{
  background:var(--p)!important;background-image:none!important;border:none!important;
  border-radius:13px;box-shadow:0 10px 26px rgba(110,47,151,.25);font-weight:600
}
.booking-modal .btn-primary:hover,.booking-modal .btn-gradient:hover{background:var(--p-dark)!important}
/* Primary action (make payment / book) green */
.booking-modal #featuredBtn{
  background:var(--g)!important;box-shadow:0 12px 28px rgba(82,167,62,.30)!important
}
.booking-modal #featuredBtn:hover{background:#458c34!important}
.booking-modal #guest_checkout{background:var(--g-soft)!important;color:var(--g)!important;border:none}

/* ---- Confirmation ---- */
.booking-modal .confirm-area .card{border:1px solid var(--line);border-radius:18px;box-shadow:0 6px 22px rgba(110,47,151,.07)}
.booking-modal .confirm-area .badge.bg-success{background:var(--g)!important}

/* ---- Calendar accent ---- */
.booking-modal .pignose-calendar .pignose-calendar-unit a:hover{color:var(--p)}
.booking-modal .pignose-calendar-unit-active a,
.booking-modal .pignose-calendar-unit-active a:hover{background:var(--p)!important;color:#fff!important}