/* ============================================================
   Serenity Massage Studio — App CSS  (v4)
   Palette: Deel purple/lavender + warm latte · Jane App airiness
   Stack: Bootstrap 5 · Font Awesome 6 · AOS · Barlow Condensed
   ============================================================ */

:root {
    /* ── Primary: warm purple (Deel-adapted for wellness) */
    --purple:         #6b56a8;
    --purple-dark:    #534189;
    --purple-light:   #8b76c4;
    --purple-rgb:     107, 86, 168;

    /* ── Lavender surfaces (Deel's D6C9FD family, softened) */
    --lavender-100:   #f4f1fb;   /* very light — page sections */
    --lavender-200:   #e8e2f6;   /* cards on lavender bg */
    --lavender-300:   #d4cbee;   /* borders, dividers */
    --lavender-400:   #b8ace1;   /* disabled, muted */

    /* ── Warm accent (Deel's latte — keeps the spa warmth) */
    --latte:          #faf4ee;
    --latte-mid:      #f0e6da;
    --latte-deep:     #e2d0bf;

    /* ── Gold highlight (Deel's #FFCF25 adapted) */
    --gold:           #f5c842;
    --gold-soft:      #fdf3c0;

    /* ── Text (Deel's exact near-black) */
    --ink:            #1b1b1b;
    --ink-mid:        #4e4e4e;
    --ink-soft:       #767676;
    --ink-xsoft:      #a9a9a9;

    /* ── White */
    --white:          #ffffff;

    /* ── Fonts */
    --condensed:      'Barlow Condensed', 'Arial Narrow', sans-serif;
    --sans:           'Inter', system-ui, sans-serif;

    /* ── Shape */
    --radius:         12px;
    --radius-sm:      8px;
    --radius-lg:      20px;
    --radius-pill:    100px;

    /* ── Shadows — Jane App style: very soft */
    --shadow-xs:      0 1px 3px rgba(107,86,168,.06);
    --shadow-sm:      0 2px 12px rgba(107,86,168,.08);
    --shadow:         0 6px 28px rgba(107,86,168,.11);
    --shadow-lg:      0 16px 48px rgba(107,86,168,.14);
    --shadow-xl:      0 32px 72px rgba(107,86,168,.18);

    --border:         #e8e2f6;
    --border-soft:    #f0edf9;

    --transition:     .22s cubic-bezier(.4,0,.2,1);
}

/* ── Reset / Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--white);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { color: var(--ink); }
a { color: var(--purple); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--purple-dark); }
p { color: var(--ink-mid); line-height: 1.7; }
.text-purple { color: var(--purple) !important; }
.text-muted  { color: var(--ink-soft) !important; }
.bg-lavender { background-color: var(--lavender-100) !important; }
.bg-latte    { background-color: var(--latte) !important; }
.bg-ink      { background-color: var(--ink) !important; }

/* ── Typography ───────────────────────────────────────────── */
.section-title {
    font-family: var(--condensed);
    font-weight: 700;
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    line-height: 1.02;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: .5rem;
}
.section-title .accent-word { color: var(--purple); }
.section-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: .75rem;
    display: block;
}
.section-subtitle {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ink-mid);
    max-width: 540px;
}

/* Pill label — Deel badge style */
.pill-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--lavender-100);
    border: 1px solid var(--lavender-300);
    color: var(--purple);
    border-radius: var(--radius-pill);
    padding: .3rem .9rem .3rem .4rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.pill-badge .pill-icon {
    background: var(--purple);
    color: #fff;
    border-radius: var(--radius-pill);
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .62rem;
    flex-shrink: 0;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary-app {
    background: var(--purple);
    border: 2px solid var(--purple);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    border-radius: var(--radius-pill);
    padding: .68rem 1.9rem;
    transition: all var(--transition);
    box-shadow: 0 4px 16px rgba(var(--purple-rgb),.3);
}
.btn-primary-app:hover {
    background: var(--purple-dark);
    border-color: var(--purple-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--purple-rgb),.38);
}
.btn-primary-app:active { transform: none; }

.btn-outline-app {
    background: transparent;
    border: 2px solid var(--purple);
    color: var(--purple);
    font-weight: 600;
    font-size: .9rem;
    border-radius: var(--radius-pill);
    padding: .68rem 1.9rem;
    transition: all var(--transition);
}
.btn-outline-app:hover {
    background: var(--purple);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--purple-rgb),.25);
}

.btn-ink-app {
    background: var(--ink);
    border: 2px solid var(--ink);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    border-radius: var(--radius-pill);
    padding: .68rem 1.9rem;
    transition: all var(--transition);
}
.btn-ink-app:hover { background: #333; border-color: #333; color: #fff; transform: translateY(-2px); }

.btn-ghost-light {
    background: rgba(255,255,255,.14);
    border: 1.5px solid rgba(255,255,255,.4);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    border-radius: var(--radius-pill);
    padding: .68rem 1.9rem;
    backdrop-filter: blur(8px);
    transition: all var(--transition);
}
.btn-ghost-light:hover { background: rgba(255,255,255,.25); color: #fff; transform: translateY(-2px); }

/* Alias for internal pages — mirrors btn-primary-app */
.btn-accent {
    background: var(--purple);
    border: 2px solid var(--purple);
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    border-radius: var(--radius-pill);
    padding: .68rem 1.9rem;
    transition: all var(--transition);
    box-shadow: 0 4px 16px rgba(var(--purple-rgb),.3);
}
.btn-accent:hover {
    background: var(--purple-dark);
    border-color: var(--purple-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--purple-rgb),.38);
}
.btn-outline-accent {
    background: transparent;
    border: 2px solid var(--purple);
    color: var(--purple);
    font-weight: 600;
    font-size: .9rem;
    border-radius: var(--radius-pill);
    padding: .68rem 1.9rem;
    transition: all var(--transition);
}
.btn-outline-accent:hover {
    background: var(--purple);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--purple-rgb),.25);
}

/* ── Navigation ───────────────────────────────────────────── */
.site-nav {
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-soft);
    padding: .85rem 0;
    transition: box-shadow var(--transition);
}
.site-nav.scrolled { box-shadow: var(--shadow-sm); }
.site-nav .brand-serif {
    font-family: var(--condensed);
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink);
}
.site-nav .brand-serif span { color: var(--purple); }
.site-nav .nav-link {
    font-size: .88rem;
    font-weight: 500;
    color: var(--ink-mid);
    padding: .4rem .85rem;
    border-radius: var(--radius-pill);
    transition: all var(--transition);
}
.site-nav .nav-link:hover { color: var(--purple); background: var(--lavender-100); }
.site-nav .nav-link.active { color: var(--purple); }

/* ── Hero — light lavender, Jane App airiness ─────────────── */
.hero {
    background: var(--lavender-100);
    padding: 7rem 0 6rem;
    position: relative;
    overflow: hidden;
}
/* Soft radial glow top-right */
.hero::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--purple-rgb),.08) 0%, transparent 70%);
    pointer-events: none;
}
.hero::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -80px;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,200,66,.08) 0%, transparent 70%);
    pointer-events: none;
}

.hero h1 {
    font-family: var(--condensed);
    font-size: clamp(3.5rem, 9vw, 7rem);
    font-weight: 700;
    line-height: .96;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 1.5rem;
}
.hero h1 .hero-accent { color: var(--purple); display: block; }
.hero .lead {
    font-size: 1.1rem;
    line-height: 1.72;
    color: var(--ink-mid);
    max-width: 480px;
    margin-bottom: 2.25rem;
}

/* Hero stats */
.hero-stat-strip {
    display: flex; gap: 2.5rem; flex-wrap: wrap;
    padding-top: 2.25rem; margin-top: 2.25rem;
    border-top: 1px solid var(--lavender-300);
}
.hero-stat-value {
    font-family: var(--condensed);
    font-size: 2.4rem; font-weight: 700; line-height: 1;
    color: var(--ink);
}
.hero-stat-label {
    font-size: .72rem; color: var(--ink-soft);
    text-transform: uppercase; letter-spacing: .09em; margin-top: .2rem;
}

/* Hero right: booking panel (Jane App clean card) */
.hero-panel {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.25rem;
    box-shadow: var(--shadow-lg);
}
.hero-panel-title {
    font-family: var(--condensed);
    font-size: 1.4rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink); margin-bottom: 1.25rem;
    padding-bottom: 1rem; border-bottom: 1px solid var(--border-soft);
}
.hero-panel .form-label {
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .11em;
    color: var(--ink-soft); margin-bottom: .4rem;
}
.hero-panel-trust {
    display: flex; gap: 1.25rem; flex-wrap: wrap;
    padding-top: 1rem; margin-top: 1rem;
    border-top: 1px solid var(--border-soft);
}
.hero-panel-trust span {
    font-size: .75rem; color: var(--ink-soft);
    display: flex; align-items: center; gap: .35rem;
}
.hero-panel-trust i { color: var(--purple); }

/* Quick-book strip (mobile) */
.quick-book-strip {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: .85rem 0;
}
.quick-book-strip .container {
    display: flex; align-items: center;
    justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.quick-book-strip .strip-text { font-size: .9rem; color: var(--ink-mid); font-weight: 500; }
.quick-book-strip .strip-text strong { color: var(--ink); }

/* ── Sections ─────────────────────────────────────────────── */
.section         { padding: 6.5rem 0; }
.section-white   { background: var(--white); }
.section-lav     { background: var(--lavender-100); }
.section-latte   { background: var(--latte); }
.section-ink     {
    background: var(--ink); color: #fff;
}
.section-ink .section-label    { color: var(--lavender-400); }
.section-ink .section-title    { color: #fff; }
.section-ink .section-subtitle { color: rgba(255,255,255,.6); }
.section-ink p                 { color: rgba(255,255,255,.6); }

.rule-accent {
    border: none; height: 3px; width: 36px;
    background: var(--purple); border-radius: 2px;
    margin: 1rem 0 1.5rem;
}
.rule-accent.center { margin-left: auto; margin-right: auto; }

/* ── Pillar / Why-us cards ────────────────────────────────── */
.pillar {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem 1.75rem;
    height: 100%;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
}
.pillar::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px; background: var(--purple);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--transition);
}
.pillar:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: var(--lavender-300); }
.pillar:hover::after { transform: scaleX(1); }
.pillar-num {
    font-family: var(--condensed);
    font-size: 3.5rem; font-weight: 700; line-height: 1;
    color: var(--lavender-200); margin-bottom: .5rem;
    transition: color var(--transition);
}
.pillar:hover .pillar-num { color: var(--purple); }
.pillar h6 { font-weight: 700; font-size: .95rem; margin-bottom: .5rem; color: var(--ink); }
.pillar p  { font-size: .88rem; margin: 0; }

/* ── Service Cards ────────────────────────────────────────── */
.service-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    height: 100%; overflow: hidden;
    display: flex; flex-direction: column;
    transition: all var(--transition);
}
.service-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
    border-color: var(--lavender-300);
}
.service-card-top {
    background: var(--lavender-100);
    padding: 1.5rem 1.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.service-card-body { padding: 1.5rem 1.75rem; flex: 1; display: flex; flex-direction: column; }
.service-icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: #fff; margin-bottom: .9rem; flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(var(--purple-rgb),.2);
}
.service-card h5 { font-weight: 700; font-size: 1rem; margin-bottom: .5rem; color: var(--ink); }
.service-tag {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--white); border: 1px solid var(--border);
    color: var(--ink-soft); border-radius: var(--radius-pill);
    padding: .2rem .65rem; font-size: .73rem; font-weight: 500;
}
.service-price {
    font-family: var(--condensed);
    font-size: 1.6rem; font-weight: 700; color: var(--ink); line-height: 1;
}
.service-price-member {
    font-size: .76rem; color: #1a7a3c; font-weight: 600;
    background: rgba(26,122,60,.08); padding: .2rem .55rem;
    border-radius: var(--radius-pill);
}
.service-card p { font-size: .87rem; line-height: 1.65; flex: 1; }

/* ── Plan cards ───────────────────────────────────────────── */
.plan-card {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 2.25rem;
    height: 100%;
    background: var(--white);
    transition: all var(--transition);
    position: relative;
    display: flex; flex-direction: column;
}
.plan-card:hover { box-shadow: var(--shadow); border-color: var(--lavender-300); }
.plan-card.featured {
    background: var(--purple);
    border-color: var(--purple);
    color: #fff;
    box-shadow: var(--shadow-xl);
}
.plan-card.featured:hover { box-shadow: var(--shadow-xl); transform: translateY(-2px); }
.plan-card.featured::before {
    content: 'Most Popular';
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--gold); color: var(--ink);
    font-size: .68rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; padding: .3rem 1rem;
    border-radius: var(--radius-pill);
}
.plan-name {
    font-size: .68rem; font-weight: 800; letter-spacing: .15em;
    text-transform: uppercase; color: var(--ink-soft); margin-bottom: .5rem;
}
.plan-card.featured .plan-name { color: rgba(255,255,255,.6); }
.plan-price {
    font-family: var(--condensed);
    font-size: 3.5rem; font-weight: 700; line-height: 1;
    color: var(--ink); margin-bottom: .25rem;
}
.plan-card.featured .plan-price { color: #fff; }
.plan-price sup { font-size: 1.4rem; vertical-align: top; margin-top: .65rem; }
.plan-price small { font-size: .82rem; font-weight: 400; color: var(--ink-soft); }
.plan-card.featured .plan-price small { color: rgba(255,255,255,.5); }
.plan-tagline { font-size: .85rem; color: var(--ink-mid); margin-bottom: 1.5rem; }
.plan-card.featured .plan-tagline { color: rgba(255,255,255,.65); }
.plan-divider { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; }
.plan-card.featured .plan-divider { border-top-color: rgba(255,255,255,.2); }
.plan-features { list-style: none; padding: 0; margin: 0 0 2rem; flex: 1; }
.plan-features li {
    display: flex; align-items: flex-start; gap: .65rem;
    padding: .5rem 0; font-size: .88rem; color: var(--ink-mid);
    border-bottom: 1px solid var(--border);
}
.plan-features li:last-child { border-bottom: none; }
.plan-card.featured .plan-features li { color: rgba(255,255,255,.85); border-bottom-color: rgba(255,255,255,.15); }
.plan-features li i { color: var(--purple); flex-shrink: 0; margin-top: .15rem; }
.plan-card.featured .plan-features li i { color: var(--gold); }

/* ── Testimonials ─────────────────────────────────────────── */
.testimonial-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.75rem;
    height: 100%; transition: all var(--transition);
}
.testimonial-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--lavender-300); }
.testimonial-stars { color: var(--gold); font-size: .85rem; margin-bottom: .6rem; }
.quote-mark {
    font-family: Georgia, serif; font-size: 4rem;
    color: var(--lavender-200); line-height: .7;
    display: block; margin-bottom: .25rem;
}
.testimonial-text { font-size: .92rem; line-height: 1.72; color: var(--ink-mid); margin-bottom: 1.25rem; }
.testimonial-name { font-weight: 700; font-size: .88rem; color: var(--ink); }
.testimonial-role { font-size: .76rem; color: var(--ink-soft); }
.testimonial-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: var(--lavender-200); color: var(--purple);
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}

/* ── Booking wizard ───────────────────────────────────────── */
.booking-step { display: none; }
.booking-step.active { display: block; animation: stepIn .3s ease both; }
@keyframes stepIn {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: none; }
}
.step-indicator {
    display: flex; align-items: flex-start;
    margin-bottom: 2.5rem; position: relative;
}
.step-indicator::before {
    content: '';
    position: absolute; top: 18px; left: 18px; right: 18px;
    height: 2px; background: var(--lavender-200); z-index: 0;
}
.step-progress-line {
    position: absolute; top: 18px; left: 18px;
    height: 2px; background: var(--purple);
    z-index: 0; transition: width .4s ease; width: 0%;
}
.step-item { flex: 1; text-align: center; position: relative; z-index: 1; }
.step-bubble {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--white); border: 2px solid var(--lavender-300);
    color: var(--ink-soft); font-weight: 700; font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto .5rem; transition: all var(--transition);
}
.step-item.active .step-bubble {
    background: var(--purple); border-color: var(--purple); color: #fff;
    box-shadow: 0 0 0 4px rgba(var(--purple-rgb),.18); transform: scale(1.12);
}
.step-item.done .step-bubble { background: var(--ink); border-color: var(--ink); color: #fff; }
.step-label {
    font-size: .67rem; font-weight: 700; color: var(--ink-soft);
    text-transform: uppercase; letter-spacing: .08em;
}
.step-item.active .step-label { color: var(--purple); }
.step-item.done .step-label   { color: var(--ink); }

.book-option {
    border: 1.5px solid var(--border); border-radius: var(--radius);
    padding: 1.25rem; cursor: pointer; background: var(--white);
    transition: all var(--transition); user-select: none;
}
.book-option:hover { border-color: var(--purple); background: var(--lavender-100); }
.book-option.selected {
    border-color: var(--purple); background: var(--lavender-100);
    box-shadow: 0 0 0 3px rgba(var(--purple-rgb),.14);
}
.book-option input[type=radio] { display: none; }

.time-slot-btn {
    border: 1.5px solid var(--border); background: var(--white);
    border-radius: var(--radius-sm); padding: .5rem .9rem;
    font-size: .84rem; font-weight: 600; cursor: pointer; min-width: 82px;
    color: var(--ink); transition: all var(--transition);
}
.time-slot-btn:hover { border-color: var(--purple); color: var(--purple); background: var(--lavender-100); }
.time-slot-btn.selected {
    border-color: var(--purple); background: var(--purple); color: #fff;
}

/* ── Auth ─────────────────────────────────────────────────── */
.auth-page {
    background: var(--lavender-100); min-height: 100vh;
    display: flex; align-items: center;
}
.auth-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
    padding: 2.75rem; max-width: 440px; width: 100%; margin: 2rem auto;
}
.auth-logo {
    font-family: var(--condensed); font-size: 1.5rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--ink);
}
.auth-logo span { color: var(--purple); }

/* ── Account sidebar ──────────────────────────────────────── */
.account-sidebar { position: sticky; top: 80px; }
.sidebar-nav .nav-link {
    color: var(--ink-mid); padding: .65rem 1rem;
    border-radius: var(--radius-sm); font-weight: 500; font-size: .9rem;
    transition: all var(--transition);
    display: flex; align-items: center; gap: .65rem;
}
.sidebar-nav .nav-link:hover { background: var(--lavender-100); color: var(--purple); }
.sidebar-nav .nav-link.active { background: var(--purple); color: #fff; }
.sidebar-nav .nav-link i { width: 18px; text-align: center; }

.stat-card {
    background: var(--white); border-radius: var(--radius);
    padding: 1.6rem; border: 1px solid var(--border);
    height: 100%; transition: all var(--transition);
    position: relative; overflow: hidden;
}
.stat-card::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px; background: var(--purple);
}
.stat-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.stat-value {
    font-family: var(--condensed);
    font-size: 2.5rem; font-weight: 700; color: var(--ink); line-height: 1;
}
.stat-label { font-size: .73rem; color: var(--ink-soft); margin-top: .3rem; text-transform: uppercase; letter-spacing: .07em; }
.stat-icon { font-size: 1.4rem; color: var(--lavender-300); }

.member-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--purple); color: #fff;
    border-radius: var(--radius-pill); padding: .4rem 1rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .04em;
}

/* ── Appt rows ────────────────────────────────────────────── */
.appt-row {
    border-radius: var(--radius); border: 1px solid var(--border);
    padding: 1.1rem 1.4rem; margin-bottom: .75rem; background: var(--white);
    display: flex; align-items: center; gap: 1rem; transition: all var(--transition);
}
.appt-row:hover { box-shadow: var(--shadow-sm); border-color: var(--lavender-300); }
.appt-color-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.appt-date-block { text-align: center; min-width: 52px; flex-shrink: 0; }
.appt-date-block .month { font-size: .65rem; text-transform: uppercase; font-weight: 700; color: var(--purple); letter-spacing: .08em; }
.appt-date-block .day { font-family: var(--condensed); font-size: 1.8rem; font-weight: 700; line-height: 1; color: var(--ink); }

/* ── Mobile sidebar drawer & overlay ─────────────────────── */
.sidebar-drawer {
    position: fixed;
    top: 0; left: -280px;
    width: 260px;
    height: 100vh;
    z-index: 1050;
    transition: left .25s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.sidebar-drawer.open { left: 0; }
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1049;
}
.sidebar-overlay.open { display: block; }

/* Admin drawer matches admin-sidebar background */
#sidebar-drawer .admin-sidebar,
.sidebar-drawer:not(.tp-sidebar-drawer) {
    background: var(--ink);
}

/* Therapist drawer matches tp-sidebar background */
.sidebar-drawer.tp-sidebar-drawer {
    background: linear-gradient(160deg, #352a44 0%, #4a3969 100%);
}

/* ── Admin ────────────────────────────────────────────────── */
.admin-sidebar {
    background: var(--ink); min-height: 100vh; width: 240px;
    flex-shrink: 0; padding: 1.5rem 0;
    box-shadow: 2px 0 12px rgba(0,0,0,.1);
}
.admin-sidebar .brand {
    font-family: var(--condensed); font-size: 1.15rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: #fff;
    padding: 0 1.5rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 1rem;
}
.admin-nav-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem 1.5rem; color: rgba(255,255,255,.55);
    font-size: .87rem; font-weight: 500; transition: all var(--transition);
}
.admin-nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.admin-nav-link.active {
    background: rgba(107,86,168,.25); color: #fff;
    border-left: 3px solid var(--purple-light);
}
.admin-nav-link i { width: 18px; text-align: center; }
.admin-content { flex: 1; background: #f9fafb; min-height: 100vh; }
.admin-topbar {
    background: var(--white); border-bottom: 1px solid var(--border);
    padding: .9rem 1.5rem; display: flex; align-items: center;
    justify-content: space-between; box-shadow: var(--shadow-xs);
}
.admin-page-body { padding: 1.75rem; }
.page-constrained { max-width: 1100px; margin: 0 auto; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: rgba(255,255,255,.5); }
.footer-logo-text {
    font-family: var(--condensed); font-size: 1.4rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: #fff;
}
.footer-heading {
    font-weight: 700; color: rgba(255,255,255,.85);
    font-size: .7rem; text-transform: uppercase; letter-spacing: .13em; margin-bottom: 1rem;
}
.footer-links li, .footer-contact li { margin-bottom: .5rem; }
.footer-links a, .footer-contact a { color: rgba(255,255,255,.45); font-size: .88rem; transition: color var(--transition); }
.footer-links a:hover, .footer-contact a:hover { color: #fff; }
.footer-divider { border-color: rgba(255,255,255,.08); }

/* ── Forms ────────────────────────────────────────────────── */
.form-control, .form-select {
    border-radius: var(--radius-sm); border-color: var(--border);
    padding: .62rem .9rem; font-size: .92rem; color: var(--ink);
    background: var(--white); transition: all var(--transition);
}
.form-control:focus, .form-select:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(var(--purple-rgb),.15); outline: none;
}
.form-label { font-weight: 600; font-size: .82rem; margin-bottom: .35rem; color: var(--ink); }
.form-text  { font-size: .78rem; color: var(--ink-soft); }
.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder,
input::placeholder  { color: #c4c9d4 !important; opacity: 1; }

/* ── Cards / Tables ───────────────────────────────────────── */
.card { border-radius: var(--radius); border-color: var(--border); }
.card-header { background: var(--lavender-100); border-bottom-color: var(--border); }
.table th {
    font-weight: 700; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft);
    border-bottom-width: 1px; padding-top: .85rem; padding-bottom: .85rem;
}
.badge { font-weight: 600; border-radius: var(--radius-pill); padding: .3em .75em; }
.text-accent { color: var(--purple) !important; }
.bg-stone    { background-color: var(--lavender-100) !important; }

/* ── Utility ──────────────────────────────────────────────── */
.min-height-60 { min-height: 60px; }
.btn-accent { /* alias used throughout internal pages */
    background: var(--purple); border: 2px solid var(--purple); color: #fff;
    font-weight: 600; font-size: .9rem; border-radius: var(--radius-pill);
    padding: .65rem 1.75rem; transition: all var(--transition);
    box-shadow: 0 4px 14px rgba(var(--purple-rgb),.28);
    display: inline-block;
}
.btn-accent:hover {
    background: var(--purple-dark); border-color: var(--purple-dark);
    color: #fff; transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(var(--purple-rgb),.36);
}
.btn-accent-outline {
    background: transparent; border: 2px solid var(--purple);
    color: var(--purple); font-weight: 600; font-size: .9rem;
    border-radius: var(--radius-pill); padding: .65rem 1.75rem;
    transition: all var(--transition); display: inline-block;
}
.btn-accent-outline:hover { background: var(--purple); color: #fff; transform: translateY(-2px); }

/* ── Animations ───────────────────────────────────────────── */
.fade-in { animation: fadeIn .35s ease both; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.spinner-accent { color: var(--purple); }

/* ── Table action buttons (shared across all admin list views) ─── */
.tbl-btn {
    display:inline-flex;align-items:center;padding:.3rem .75rem;
    font-size:.8rem;font-weight:500;border-radius:7px;
    border:1.5px solid transparent;text-decoration:none;
    white-space:nowrap;transition:all .15s;line-height:1.4;
    cursor:pointer;background:none;
}
.tbl-btn-view   { border-color:#d1d5db;color:#374151;background:#fff; }
.tbl-btn-view:hover   { background:#f9fafb;color:#111;border-color:#9ca3af; }
.tbl-btn-edit   { border-color:#bfdbfe;color:#1d4ed8;background:#eff6ff; }
.tbl-btn-edit:hover   { background:#dbeafe;color:#1e40af;border-color:#93c5fd; }
.tbl-btn-paid   { border-color:#bbf7d0;color:#15803d;background:#f0fdf4; }
.tbl-btn-paid:hover   { background:#dcfce7; }
.tbl-btn-void   { border-color:#e5e7eb;color:#6b7280;background:#f9fafb; }
.tbl-btn-void:hover   { background:#f3f4f6;color:#374151; }
.tbl-btn-danger { border-color:#fecaca;color:#dc2626;background:#fef2f2; }
.tbl-btn-danger:hover { background:#fee2e2; }
.tbl-btn-print  { border-color:#6b56a8;color:#6b56a8;background:#fff; }
.tbl-btn-print:hover  { background:#f4f1fb; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991px) {
    .hero { padding: 4.5rem 0 3.5rem; }
    .hero-panel { margin-top: 2rem; }
    .plan-card.featured { transform: none; }
    .admin-page-body { padding: 1rem; }
    .tp-body { padding: 1rem; }
}
@media (max-width: 767px) {
    .section { padding: 3.5rem 0; }
    .hero h1 { font-size: 3.2rem; }
    .appt-row { flex-wrap: wrap; }
    .step-indicator::before { display: none; }
}