/* =====================================================================
   Vorta Booking — Spa design system
   Loaded by booking/includes/header.php on every booking page.
   Recolours the Bootstrap utilities the pages + inline JS rely on
   (bg-primary, text-success, btn-outline-primary, badge-primary, …)
   so the whole flow shares one calm, professional palette.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --spa-bg:          #F6F3EE;  /* warm linen page background */
    --spa-surface:     #FFFFFF;  /* cards                      */
    --spa-ink:         #20302B;  /* primary text (deep green-charcoal) */
    --spa-muted:       #6E7B75;  /* secondary text             */
    --spa-line:        #E7E2D8;  /* hairline borders           */
    --spa-green:       #2E6B58;  /* primary action / brand     */
    --spa-green-dark:  #234F42;  /* hover / pressed            */
    --spa-green-tint:  #EAF1ED;  /* selected fills, soft panels*/
    --spa-gold:        #B8954A;  /* restrained accent          */
    --spa-danger:      #B4452F;
    --spa-radius:      14px;
    --spa-radius-sm:   10px;
    --spa-shadow:      0 1px 2px rgba(32,48,43,.04), 0 8px 24px rgba(32,48,43,.06);
    --spa-shadow-sm:   0 1px 2px rgba(32,48,43,.05), 0 2px 8px rgba(32,48,43,.05);
}

/* ----------------------------- base ----------------------------- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--spa-bg);
    color: var(--spa-ink);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    letter-spacing: -0.01em;
    color: var(--spa-ink);
}
.font-weight-bold { font-weight: 600 !important; }
.text-muted { color: var(--spa-muted) !important; }
a { color: var(--spa-green); }
a:hover { color: var(--spa-green-dark); }

/* --------------------------- navbar ----------------------------- */
.navbar { box-shadow: 0 1px 0 var(--spa-line); border-bottom: 0 !important; }
.navbar-brand { font-weight: 600; color: var(--spa-ink) !important; }
.navbar .nav-link { color: var(--spa-muted); font-weight: 500; }
.navbar .nav-link:hover,
.navbar .nav-item.active > .nav-link { color: var(--spa-ink); }
.navbar .fa-spa { color: var(--spa-green) !important; }

/* ----------------- colour-utility re-mapping -------------------- */
/* The pages and their inline JS toggle these Bootstrap classes, so we
   redefine them to the spa palette rather than editing every call. */
.text-primary, .text-success, .text-info { color: var(--spa-green) !important; }
.bg-primary,  .bg-success  { background-color: var(--spa-green) !important; }
.border-primary, .border-success { border-color: var(--spa-green) !important; }
.border-success.border-top { border-color: var(--spa-green) !important; }

.badge-primary {
    background-color: var(--spa-green-tint) !important;
    color: var(--spa-green-dark) !important;
    font-weight: 600;
}
.badge-warning {
    background-color: #F6ECD2 !important;
    color: #8A6A1F !important;
    font-weight: 600;
}

/* ----------------------------- cards ---------------------------- */
.card {
    border-radius: var(--spa-radius) !important;
    border-color: var(--spa-line);
}
.card.shadow-sm { box-shadow: var(--spa-shadow-sm) !important; }
.rounded-lg { border-radius: var(--spa-radius) !important; }
.bg-light { background-color: var(--spa-green-tint) !important; }

/* ---------------------------- buttons --------------------------- */
.btn { font-weight: 600; border-radius: var(--spa-radius-sm); transition: all .18s ease; }
.btn-primary, .btn-success {
    background-color: var(--spa-green);
    border-color: var(--spa-green);
    color: #fff;
}
.btn-primary:hover, .btn-success:hover,
.btn-primary:focus, .btn-success:focus {
    background-color: var(--spa-green-dark);
    border-color: var(--spa-green-dark);
    color: #fff;
    box-shadow: 0 6px 16px rgba(46,107,88,.22);
}
.btn-primary:disabled, .btn-primary.disabled {
    background-color: #B9C7C0; border-color: #B9C7C0; opacity: 1;
}
.btn-outline-primary {
    color: var(--spa-green);
    border-color: var(--spa-line);
    background: #fff;
}
.btn-outline-primary:hover {
    background-color: var(--spa-green-tint);
    border-color: var(--spa-green);
    color: var(--spa-green-dark);
}
.btn-outline-secondary {
    color: var(--spa-muted);
    border-color: var(--spa-line);
    background: #fff;
}
.btn-outline-secondary:hover {
    background-color: #fff; color: var(--spa-ink); border-color: var(--spa-muted);
}
.btn-light { background:#fff; border-color: var(--spa-line); color: var(--spa-ink); }
.btn-light:hover { background: var(--spa-green-tint); border-color: var(--spa-green); }

/* ----------------------- forms / inputs ------------------------- */
.form-control, .custom-select {
    border-radius: var(--spa-radius-sm);
    border-color: var(--spa-line);
    color: var(--spa-ink);
    padding: .6rem .85rem;
    height: auto;
}
.form-control:focus {
    border-color: var(--spa-green);
    box-shadow: 0 0 0 .18rem rgba(46,107,88,.14);
}
label { font-weight: 500; color: var(--spa-ink); font-size: .9rem; }
.input-group-text { color: var(--spa-muted); }

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--spa-green);
    border-color: var(--spa-green);
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .18rem rgba(46,107,88,.14);
}

/* --------------------- page header band ------------------------- */
.page-head {
    background: linear-gradient(180deg, #fff 0%, var(--spa-bg) 100%);
    border-bottom: 1px solid var(--spa-line);
    padding: 2.25rem 0;
}
.page-head h1, .page-head h2 {
    font-weight: 600;
    margin-bottom: .25rem;
    font-size: clamp(1.6rem, 3.5vw, 2.1rem);
}
.page-head .lead-sub { color: var(--spa-muted); margin-bottom: 0; }

.page-head--hero {
    position: relative;
    border-bottom: 0;
    color: #fff;
    padding: 3.5rem 0 2.75rem;
    background:
        linear-gradient(180deg, rgba(20,38,32,.55), rgba(20,38,32,.78)),
        url('../uploads/1.jpeg');
    background-size: cover;
    background-position: center;
}
.page-head--hero h1, .page-head--hero h2 { color: #fff; }
.page-head--hero .lead-sub { color: rgba(255,255,255,.82); }
.branch-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff; font-weight: 600; font-size: .82rem;
    padding: .35rem .8rem; border-radius: 999px;
    backdrop-filter: blur(4px);
}
.branch-change { color: #fff; font-weight: 600; font-size: .82rem; text-decoration: underline; }
.branch-change:hover { color: #fff; opacity: .85; }

/* ------------------------ progress steps ------------------------ */
.booking-steps {
    display: flex; align-items: center;
    gap: .25rem; margin-top: 1.75rem; max-width: 640px;
}
.b-step {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; flex: 0 0 auto; min-width: 84px;
}
.b-step .dot {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: .9rem; margin-bottom: .5rem;
    border: 1.5px solid transparent; transition: all .2s ease;
}
.b-step .lbl { font-size: .76rem; font-weight: 600; line-height: 1.2; }
.b-line { flex: 1 1 auto; height: 2px; border-radius: 2px; background: var(--spa-line); }

/* state: done */
.b-step.is-done .dot { background: var(--spa-green); border-color: var(--spa-green); color:#fff; }
.b-step.is-done .lbl { color: var(--spa-ink); }
.b-line.is-done { background: var(--spa-green); }
.b-step.is-done { cursor: pointer; }
/* state: active */
.b-step.is-active .dot {
    background: #fff; border-color: var(--spa-green); color: var(--spa-green);
    box-shadow: 0 0 0 4px var(--spa-green-tint);
}
.b-step.is-active .lbl { color: var(--spa-green); }
/* state: to-do */
.b-step.is-todo .dot { background:#fff; border-color: var(--spa-line); color: var(--spa-muted); }
.b-step.is-todo .lbl { color: var(--spa-muted); }

/* hero variant of the stepper (over the dark image) */
.page-head--hero .b-line { background: rgba(255,255,255,.3); }
.page-head--hero .b-step.is-todo .dot { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color:#fff; }
.page-head--hero .b-step.is-todo .lbl { color: rgba(255,255,255,.8); }
.page-head--hero .b-step.is-active .dot { background:#fff; border-color:#fff; color: var(--spa-green-dark); box-shadow: 0 0 0 4px rgba(255,255,255,.18); }
.page-head--hero .b-step.is-active .lbl { color:#fff; }

@media (max-width: 575px) {
    .b-step { min-width: 0; }
    .b-step .lbl { font-size: .68rem; }
    .booking-steps { gap: 0; }
}

/* ----------------------- service cards -------------------------- */
.service-card {
    border-radius: var(--spa-radius) !important;
    border: 1px solid var(--spa-line) !important;
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.service-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--spa-shadow-sm);
    border-color: #CBD8D1 !important;
}
.service-card.is-selected,
.service-card.border-primary {           /* JS adds .border-primary on select */
    border-color: var(--spa-green) !important;
    background: var(--spa-green-tint) !important;
}
.service-card img { border-radius: var(--spa-radius-sm) !important; }

/* nav tabs (service categories / auth) */
.nav-tabs .nav-link { color: var(--spa-muted); border: 0; padding: .75rem 0; }
.nav-tabs .nav-link.active { color: var(--spa-green) !important; border-bottom: 2px solid var(--spa-green) !important; background: transparent; }

/* --------------------------- calendar --------------------------- */
#calendar th { color: var(--spa-muted); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.cal-day {
    border-radius: 10px; font-weight: 500; color: var(--spa-ink);
    transition: background-color .15s ease, color .15s ease;
}
.cal-day.active-day:hover { background: var(--spa-green-tint); color: var(--spa-green-dark); }
.cal-day.disabled { color: var(--spa-muted); }
/* JS adds .bg-primary.text-white on the selected day → handled by bg-primary remap */
.active-day.bg-primary { box-shadow: 0 4px 12px rgba(46,107,88,.25); }

/* time-slot buttons keep the .btn-outline-primary / .btn-primary toggle */
.time-slot-btn { font-weight: 600; font-size: .9rem; padding: .55rem .25rem; }

/* --------------------------- summary ---------------------------- */
.sticky-top { z-index: 1; }
hr, .border-top { border-color: var(--spa-line) !important; }

/* soft info / note panels */
.info-panel {
    background: var(--spa-green-tint);
    border: 1px solid #D8E5DE;
    color: var(--spa-green-dark);
    border-radius: var(--spa-radius-sm);
    padding: .9rem 1rem; font-size: .875rem;
}
.note-panel {
    background: #FBF9F4;
    border: 1px solid var(--spa-line);
    border-radius: var(--spa-radius-sm);
    padding: 1rem 1.1rem; font-size: .875rem; color: var(--spa-muted);
}

/* alerts */
.alert-success { background: var(--spa-green-tint); border-color: #CBE0D6; color: var(--spa-green-dark); border-radius: var(--spa-radius-sm); }
.alert-danger  { background: #FBEDE9; border-color: #F0D2C9; color: var(--spa-danger); border-radius: var(--spa-radius-sm); }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}