/**
 * Spirit Mode Website Colour System
 * Clean white background with rich, dark purple (Plum 900) and dark blue (Navy 800) accents.
 * Strict accessibility, high-contrast, and readability compliance.
 */
:root {
  /* Core Brand Palette - Rich Dark Tones */
  --sm-plum-900: #2F0F39;   /* Dark purple / plum */
  --sm-navy-800: #1A2C53;   /* Dark blue / navy */
  --sm-steel-500: #4D7B94;  /* Supporting steel blue */
  --sm-violet-600: #2F0F39; /* Mapped to dark purple */
  --sm-orchid-500: #2F0F39; /* Mapped to dark purple */

  /* Neutral Supporting Colours - Clean White Background */
  --sm-white: #FFFFFF;
  --sm-surface: #FAF8FB;    /* Soft clean light surface */
  --sm-border: #E8E1EB;     /* Crisp clean border */
  --sm-text: #231C27;       /* Rich dark body text */
  --sm-text-muted: #6D6471; /* Secondary text */

  /* Semantic Theme Roles */
  --sm-primary: var(--sm-plum-900);
  --sm-primary-hover: var(--sm-navy-800);
  --sm-secondary: var(--sm-navy-800);
  --sm-secondary-hover: var(--sm-plum-900);
  --sm-support: var(--sm-steel-500);
  --sm-heading-dark: var(--sm-plum-900);
  --sm-link: var(--sm-plum-900);
  --sm-link-hover: var(--sm-navy-800);

  /* Global Compatibility Aliases - White background, dark rich accents */
  --primary: var(--sm-plum-900);
  --primary-hover: var(--sm-navy-800);
  --accent: var(--sm-navy-800);
  --accent-hover: var(--sm-plum-900);
  --accent-light: var(--sm-steel-500);

  --bg-color: #FFFFFF;
  --bg-main: #FFFFFF;
  --bg-alt: var(--sm-surface);
  --bg-card: #FFFFFF;

  --text-main: var(--sm-text);
  --text-muted: var(--sm-text-muted);
  --border: var(--sm-border);
}

/* =========================================================================
   BASE BODY & SURFACES - WHITE BACKGROUND ALL THE WAY
   ========================================================================= */
html, body {
  background-color: #FFFFFF !important;
  color: var(--sm-text) !important;
}

/* Headings: Rich dark purple on light surfaces (16.8:1 contrast) */
h1, h2, h3, h4, h5, h6 {
  color: var(--sm-plum-900) !important;
}

/* Headings inside dark/purple sections: Pure White (16.8:1 contrast) */
footer h1, footer h2, footer h3, footer h4,
.site-footer h1, .site-footer h2, .site-footer h3,
.pre-footer h1, .pre-footer h2, .pre-footer h3,
.hero h1, .hero h2, .hero h3,
.hero-copy h1, .hero-copy h2, .hero-copy h3,
.journey-band h1, .journey-band h2, .journey-band h3,
.ritual-copy h1, .ritual-copy h2, .ritual-copy h3,
.pp-dark h1, .pp-dark h2, .pp-dark h3,
.pp-final h1, .pp-final h2, .pp-final h3,
.chat-header h1, .chat-header h2, .chat-header h3,
.hold-timer-box h1, .hold-timer-box h2, .hold-timer-box h3 {
  color: #FFFFFF !important;
}

p, li, dt, dd, blockquote {
  color: var(--sm-text);
}

small {
  color: var(--sm-text-muted);
}

/* Eyebrows, categories & badges on light backgrounds (13.7:1 contrast) */
.eyebrow, .pp-eyebrow, .svc-cat-tag, .rc-cat {
  color: var(--sm-navy-800) !important;
  font-weight: 600;
}

/* Eyebrows, labels & badges in dark/purple sections (16.8:1 contrast) */
.pre-footer .eyebrow,
.pp-dark .pp-eyebrow,
.pp-final .pp-eyebrow,
.journey-band .eyebrow,
.journey-band > p,
.hero .eyebrow,
.hero-copy .eyebrow,
footer .eyebrow,
.site-footer .eyebrow,
.hold-timer-box .hold-title {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600;
}

/* Body text inside dark/purple sections */
.pre-footer p,
.pp-dark p,
.pp-dark li,
.pp-final .pp-body,
.ritual-copy p,
.hold-timer-box p {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Sections */
.section {
  background-color: #FFFFFF;
}
.section-alt {
  background-color: var(--sm-surface) !important;
}
.page-header {
  background-color: var(--sm-surface) !important;
  color: var(--sm-text) !important;
}
.page-header h1 {
  color: var(--sm-plum-900) !important;
}
.page-header p, .page-header .intro, .page-header .breadcrumb, .page-header a {
  color: var(--sm-text-muted) !important;
}

/* Links: Dark purple default, dark navy hover */
a {
  color: var(--sm-plum-900);
  text-decoration: none;
  transition: color 0.25s ease;
}
a:hover {
  color: var(--sm-navy-800);
}

/* Navigation Links */
.desktop-nav a {
  color: var(--sm-text) !important;
}
.desktop-nav a:hover,
.desktop-nav a.active {
  color: var(--sm-plum-900) !important;
}
#site-header.is-home:not(.scrolled) .desktop-nav a {
  color: #FFFFFF !important;
}
#site-header.is-home:not(.scrolled) .desktop-nav a:hover,
#site-header.is-home:not(.scrolled) .desktop-nav a.active {
  color: #FFFFFF !important;
}

/* =========================================================================
   BUTTONS & ACTIONS - HIGH CONTRAST & READABILITY
   ========================================================================= */
/* Primary Buttons on light surfaces:
   Dark purple background (#2F0F39) with pure white text (#FFFFFF) (16.8:1 contrast) */
.button,
.book-btn,
.btn-primary,
button[type="submit"]:not(.outline) {
  background: var(--sm-plum-900) !important;
  color: #FFFFFF !important;
  border-color: var(--sm-plum-900) !important;
}
.button:hover,
.book-btn:hover,
.btn-primary:hover,
button[type="submit"]:not(.outline):hover {
  background: var(--sm-navy-800) !important;
  color: #FFFFFF !important;
  border-color: var(--sm-navy-800) !important;
}

/* Secondary Buttons / Outlines on light surfaces:
   Dark navy outline (#1A2C53), dark navy text, dark navy fill on hover */
.outline,
.btn-outline,
.button.outline {
  background: transparent !important;
  color: var(--sm-navy-800) !important;
  border: 1.5px solid var(--sm-navy-800) !important;
}
.outline:hover,
.btn-outline:hover,
.button.outline:hover {
  background: var(--sm-navy-800) !important;
  color: #FFFFFF !important;
  border-color: var(--sm-navy-800) !important;
}

/* CONTRAST FIX: Purple buttons on purple/dark backgrounds
   Adjusted to pure white (#FFFFFF) from the approved scheme with dark purple text
   so the button remains prominently visible and accessible (16.8:1 contrast). */
.pre-footer .button,
.pre-footer .book-btn,
.pp-dark .button,
.pp-dark .book-btn,
.pp-dark .pp-btn-light,
.pp-final .button,
.pp-final .book-btn,
.pp-final .pp-btn-light,
.journey-band .button,
.journey-band .book-btn,
footer .button,
footer .book-btn,
.site-footer .button,
.site-footer .book-btn,
.hero .button,
.hero .book-btn {
  background: #FFFFFF !important;
  color: var(--sm-plum-900) !important;
  border-color: #FFFFFF !important;
}

.pre-footer .button:hover,
.pre-footer .book-btn:hover,
.pp-dark .button:hover,
.pp-dark .book-btn:hover,
.pp-dark .pp-btn-light:hover,
.pp-final .button:hover,
.pp-final .book-btn:hover,
.pp-final .pp-btn-light:hover,
.journey-band .button:hover,
.journey-band .book-btn:hover,
footer .button:hover,
footer .book-btn:hover,
.site-footer .button:hover,
.site-footer .book-btn:hover,
.hero .button:hover,
.hero .book-btn:hover {
  background: var(--sm-surface) !important;
  color: var(--sm-navy-800) !important;
  border-color: var(--sm-surface) !important;
}

/* Secondary outline buttons on purple/dark backgrounds */
.pre-footer .outline,
.pp-dark .outline,
.pp-dark .pp-btn-ghost,
.pp-final .outline,
.pp-final .pp-btn-ghost,
.journey-band .outline,
footer .outline,
.site-footer .outline,
.hero .outline,
.hero .hero-link {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 1.5px solid #FFFFFF !important;
}

.pre-footer .outline:hover,
.pp-dark .outline:hover,
.pp-dark .pp-btn-ghost:hover,
.pp-final .outline:hover,
.pp-final .pp-btn-ghost:hover,
.journey-band .outline:hover,
footer .outline:hover,
.site-footer .outline:hover,
.hero .outline:hover,
.hero .hero-link:hover {
  background: #FFFFFF !important;
  color: var(--sm-plum-900) !important;
  border-color: #FFFFFF !important;
}

/* Floating circular pill button */
.circle-btn {
  background: #FFFFFF !important;
  color: var(--sm-plum-900) !important;
  border: 1px solid var(--sm-border) !important;
  box-shadow: 0 4px 15px rgba(47, 15, 57, 0.08) !important;
}
.circle-btn:hover {
  background: var(--sm-plum-900) !important;
  color: #FFFFFF !important;
}

/* =========================================================================
   CARDS & PANELS - WHITE BACKGROUND ALL THE WAY
   ========================================================================= */
.card, .post-card, .offering-card, .program-card, .testi-card,
.prac-svc-card, .mal-feature-box, .mal-notice, .topic-item,
.related-card, .pp-svc, .pp-pillar, .booking-card, .booking-modal,
.modal-content, .booking-receipt-card, .pop-submission-box,
.service-selection-card, .summary-review-card, .requisites-box,
.contact-meta, .payment-methods-card, .sticky-booking-card,
.compare-table-wrapper, .service-card, .rpc-best-for, .location-box,
.hz-step, .review-box, .prac-card-inner, .svc-sel-inner, .fmt-inner,
.pp-start-card, .pp-avail-item, .pp-expertise, .wizard-modal {
  background: #FFFFFF !important;
  color: var(--sm-text) !important;
  border: 1px solid var(--sm-border) !important;
  box-shadow: 0 10px 40px rgba(47, 15, 57, 0.05) !important;
}

/* CONTRAST FIX: Prevent white text on white/light cards */
.card, .post-card, .offering-card, .program-card, .testi-card,
.prac-svc-card, .mal-feature-box, .mal-notice, .topic-item,
.related-card, .pp-svc, .pp-pillar, .booking-card, .booking-modal,
.modal-content, .booking-receipt-card, .pop-submission-box,
.service-selection-card, .summary-review-card, .requisites-box,
.contact-meta, .payment-methods-card, .sticky-booking-card,
.compare-table-wrapper, .service-card, .rpc-best-for, .location-box,
.hz-step, .review-box, .prac-card-inner, .svc-sel-inner, .fmt-inner,
.pp-start-card, .pp-avail-item, .pp-expertise, .wizard-modal,
#modal-pricing-summary, #modal-context-banner {
  color: var(--sm-text) !important;
}

.card h1, .card h2, .card h3, .card h4,
.booking-card h1, .booking-card h2, .booking-card h3, .booking-card h4,
.booking-modal h1, .booking-modal h2, .booking-modal h3, .booking-modal h4,
.summary-review-card h3, .booking-receipt-card h3 {
  color: var(--sm-plum-900) !important;
}

/* Sub-boxes inside cards: Soft light surface */
.banking-details-grid,
.requisite-body,
#modal-context-banner,
#modal-pricing-summary,
#ikhokha-payment-card,
.modality-card,
.help-choose-box,
.svc-meta-grid,
.prac-compare-table th,
.prac-compare-table td:first-child,
.slot-pill-btn {
  background: var(--sm-surface) !important;
  border: 1px solid var(--sm-border) !important;
  color: var(--sm-text) !important;
}

/* Selected state for modality and services */
.modality-option input:checked + .modality-card,
.service-selection-card.selected,
.prac-radio:checked + .prac-card-inner,
.svc-sel-option input:checked + .svc-sel-inner,
.fmt-radio:checked + .fmt-inner {
  background: #FFFFFF !important;
  border-color: var(--sm-plum-900) !important;
  box-shadow: 0 4px 16px rgba(47, 15, 57, 0.12) !important;
}

.slot-pill-btn:hover {
  border-color: var(--sm-plum-900) !important;
  background: #FFFFFF !important;
}
.slot-pill-btn.selected {
  background: var(--sm-plum-900) !important;
  border-color: var(--sm-plum-900) !important;
  color: #FFFFFF !important;
}

/* =========================================================================
   FORM CONTROLS - CRISP CLEAN WHITE FIELDS
   ========================================================================= */
.form-control,
.form-line input,
.form-line select,
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
select,
textarea {
  background: #FFFFFF !important;
  color: var(--sm-text) !important;
  border: 1px solid var(--sm-border) !important;
}
.form-control:focus,
.form-line input:focus,
.form-line select:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  background: #FFFFFF !important;
  border-color: var(--sm-plum-900) !important;
  outline: none !important;
}
select option {
  background: #FFFFFF !important;
  color: var(--sm-text) !important;
}
::placeholder {
  color: var(--sm-text-muted) !important;
}

/* =========================================================================
   HOLD TIMER BOX
   ========================================================================= */
.hold-timer-box {
  background: linear-gradient(135deg, var(--sm-plum-900), var(--sm-navy-800)) !important;
  color: #FFFFFF !important;
}
.hold-timer-box .hold-title {
  color: #FFFFFF !important;
}
.hold-timer-box p {
  color: rgba(255, 255, 255, 0.92) !important;
}
.hold-timer-box .hold-countdown {
  color: #FFFFFF !important;
}

/* =========================================================================
   CHATBOT WINDOW - CLEAN WHITE WITH DARK PURPLE HEADER
   ========================================================================= */
.chat-launcher {
  background: var(--sm-plum-900) !important;
  color: #FFFFFF !important;
}
.chat-launcher:hover {
  background: var(--sm-navy-800) !important;
}
.chatbot-window {
  background: #FFFFFF !important;
  border: 1px solid var(--sm-border) !important;
  box-shadow: 0 24px 60px rgba(47, 15, 57, 0.2) !important;
}
.chat-header {
  background: linear-gradient(135deg, var(--sm-plum-900) 0%, var(--sm-navy-800) 100%) !important;
  color: #FFFFFF !important;
}
.chat-close {
  color: #FFFFFF !important;
}
.chat-body {
  background: var(--sm-surface) !important;
}
.bot-msg p {
  background: #FFFFFF !important;
  border: 1px solid var(--sm-border) !important;
  color: var(--sm-text) !important;
}
.user-msg p {
  background: var(--sm-plum-900) !important;
  color: #FFFFFF !important;
}
.chat-opt-btn {
  background: #FFFFFF !important;
  border: 1px solid var(--sm-navy-800) !important;
  color: var(--sm-navy-800) !important;
}
.chat-opt-btn:hover {
  background: var(--sm-plum-900) !important;
  color: #FFFFFF !important;
  border-color: var(--sm-plum-900) !important;
}
.chat-footer-input {
  background: #FFFFFF !important;
  border-top: 1px solid var(--sm-border) !important;
}
#chat-user-input {
  background: var(--sm-surface) !important;
  color: var(--sm-text) !important;
  border: 1px solid var(--sm-border) !important;
}

/* =========================================================================
   HEADER & NAVIGATION DROPDOWN
   ========================================================================= */
#site-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--sm-border) !important;
}
#site-header.is-home:not(.scrolled) {
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
}
.dropdown-content {
  background: #FFFFFF !important;
  border: 1px solid var(--sm-border) !important;
  box-shadow: 0 16px 40px rgba(47, 15, 57, 0.1) !important;
}
.dropdown-content a {
  color: var(--sm-text) !important;
}
.dropdown-content a:hover {
  background: var(--sm-surface) !important;
  color: var(--sm-plum-900) !important;
}
.mobile-menu-overlay {
  background: #FFFFFF !important;
  color: var(--sm-text) !important;
}
.mobile-menu-overlay a {
  color: var(--sm-plum-900) !important;
}

/* =========================================================================
   BOOKING STEPPER FORM STATES
   ========================================================================= */
.step-item {
  color: var(--sm-text-muted) !important;
}
.step-num {
  background: #FFFFFF !important;
  border: 2px solid var(--sm-border) !important;
  color: var(--sm-text-muted) !important;
}
.step-item.active .step-num {
  background: var(--sm-plum-900) !important;
  border-color: var(--sm-plum-900) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 0 4px rgba(47, 15, 57, 0.15) !important;
}
.step-item.active .step-label {
  color: var(--sm-plum-900) !important;
  font-weight: 600;
}
.step-item.completed .step-num {
  background: var(--sm-navy-800) !important;
  border-color: var(--sm-navy-800) !important;
  color: #FFFFFF !important;
}
.step-line {
  background: var(--sm-border) !important;
}
.step-line.completed {
  background: var(--sm-navy-800) !important;
}

/* =========================================================================
   FOOTER - RICH DARK PURPLE WITH DARK BLUE BOTTOM
   ========================================================================= */
footer,
.site-footer {
  background: var(--sm-plum-900) !important;
  color: #FFFFFF !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
footer a,
.site-footer a {
  color: rgba(255, 255, 255, 0.85) !important;
}
footer a:hover,
.site-footer a:hover {
  color: #FFFFFF !important;
}
footer p,
.site-footer p {
  color: rgba(255, 255, 255, 0.85) !important;
}
.footer-desc {
  color: #FFFFFF !important;
}
.footer-subdesc {
  color: rgba(255, 255, 255, 0.75) !important;
}
.footer-cta {
  color: #FFFFFF !important;
  font-weight: 500;
  font-size: 14px;
  display: inline-block;
  text-decoration: underline;
}
.footer-cta:hover {
  color: var(--sm-surface) !important;
}
.footer-bottom,
.site-footer-bottom {
  background: var(--sm-navy-800) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}
.footer-bottom a,
.site-footer-bottom a {
  color: rgba(255, 255, 255, 0.8) !important;
}
.footer-bottom a:hover,
.site-footer-bottom a:hover {
  color: #FFFFFF !important;
}