/*
 * BeautyfulsPA — Sage Green + Warm Gold Theme
 * Replaces gold (#c8a97e) with soft sage (#8a9e8a / #7a9478)
 * Accent: warm gold (#c8a97e → retained as secondary accent)
 *
 * PALETTE:
 *   Primary sage:      #7a9478   (main brand color)
 *   Sage light:        #9aae98   (hover/light states)
 *   Sage muted:        #b8cab6   (borders, subtle backgrounds)
 *   Sage ultra-light:  #eef3ee   (section backgrounds)
 *   Gold accent:       #c8a97e   (secondary highlights)
 *   Gold light:        #d4bc97   (hover gold states)
 *   Dark text:         #2d2d2d
 *   Body text:         #666
 *   Light text:        #999
 */

/* ─── ROOT VARIABLES ─────────────────────────────────────────────────────── */
:root {
  --sage:        #7a9478;
  --sage-light:  #9aae98;
  --sage-muted:  #b8cab6;
  --sage-bg:     #eef3ee;
  --sage-dark:   #5a7458;
  --gold:        #c8a97e;
  --gold-light:  #d4bc97;
  --gold-dark:   #a8895e;
}

/* ─── BODY & BACKGROUND ──────────────────────────────────────────────────── */
body {
  background-color: #fafaf8;
  color: #444;
}

/* Section alternating backgrounds */
.ftco-section.bg-light,
section.bg-light {
  background-color: var(--sage-bg) !important;
}

/* ─── NAVBAR ─────────────────────────────────────────────────────────────── */
/* Brand name BEAUTYFULSPA — tetap gold, tidak di-override */
/* Nav link hover/active — tetap gold, tidak di-override */

/* Book Now button — sage */
#main-navbar .nb-menu li.nb-book a {
  background: #7a9478 !important;
  color: #fff !important;
}
#main-navbar .nb-menu li.nb-book a:hover {
  background: #5a7458 !important;
}

/* Language switcher — sage */
.nb-lang {
  border-color: rgba(122,148,120,0.5) !important;
}
.nb-lang button.active {
  background: #7a9478 !important;
  color: #fff !important;
}
.nb-lang button:not(.active) {
  color: #7a9478 !important;
}
.nb-lang button:not(.active):hover {
  background: rgba(122,148,120,0.1) !important;
}

/* ─── HERO SECTION ───────────────────────────────────────────────────────── */
/* h1 BEAUTYFULSPA — tetap gold, jangan di-override */
section h1 {
  color: #c8a97e !important;
}

/* Divider line in hero */
section > .container > .row > div > div[style*="linear-gradient"] {
  background: linear-gradient(to right, transparent, var(--sage), transparent) !important;
}

/* Hero buttons */
.btn-primary,
.ftco-section .btn-primary {
  background-color: var(--sage) !important;
  border-color: var(--sage) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background-color: var(--sage-dark) !important;
  border-color: var(--sage-dark) !important;
}
.btn-outline-primary {
  border-color: var(--sage) !important;
  color: var(--sage) !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background-color: var(--sage) !important;
  color: #fff !important;
}

/* ─── SECTION HEADINGS ───────────────────────────────────────────────────── */
/* Label above heading (e.g. "Our Services") */
p[style*="c8a97e"],
p[style*="#c8a97e"] {
  color: var(--sage) !important;
}

.subheading {
  color: var(--sage) !important;
}

.heading-section .subheading {
  color: var(--sage) !important;
}

/* ─── OFFER / TREATMENTS SECTION ─────────────────────────────────────────── */
.treatment-card:hover {
  box-shadow: 0 6px 24px rgba(122,148,120,0.2) !important;
}

.treatment-meta-item .value.gold {
  color: var(--gold) !important;
}

.treatment-btn {
  border-color: var(--sage) !important;
  color: var(--sage) !important;
}
.treatment-btn:hover {
  background: var(--sage) !important;
  color: #fff !important;
}

/* Category filter buttons */
button[style*="c8a97e"] {
  border-color: var(--sage) !important;
  background-color: var(--sage) !important;
}

/* ─── INTRO / ABOUT SECTION ──────────────────────────────────────────────── */
.do-list .ion-ios-checkmark-circle {
  color: var(--sage) !important;
}

/* Team member role text */
.col-4 p[style*="c8a97e"] {
  color: var(--sage) !important;
}

/* ─── SPECIALISTS SECTION ────────────────────────────────────────────────── */
/* Circle border around therapist photo */
div[style*="border: 3px solid #c8a97e"],
div[style*="border:3px solid #c8a97e"] {
  border-color: var(--sage) !important;
}

/* Outer decorative ring */
div[style*="border: 2px solid rgba(200,169,126"] {
  border-color: rgba(122,148,120,0.3) !important;
}

/* Therapist name hover */
h3[style*="c8a97e"] {
  color: var(--sage) !important;
}

/* Role label under name */
p[style*="letter-spacing: 2px"][style*="c8a97e"] {
  color: var(--sage) !important;
}

/* Divider line */
div[style*="linear-gradient(to right, transparent, #c8a97e"] {
  background: linear-gradient(to right, transparent, var(--sage), transparent) !important;
}

/* Book button */
a[style*="border: 1px solid #c8a97e"] {
  border-color: var(--sage) !important;
  color: var(--sage) !important;
}

/* Popup gradient header */
div[style*="linear-gradient(150deg, #c8a97e"] {
  background: linear-gradient(150deg, var(--sage) 0%, var(--sage-dark) 100%) !important;
}

/* Popup stats cards */
div[style*="border: 1px solid rgba(200,169,126,0.25)"] {
  border-color: rgba(122,148,120,0.25) !important;
}
div[style*="background: rgba(200,169,126,0.04)"] {
  background: rgba(122,148,120,0.06) !important;
}

/* Star ratings — keep gold for stars */
span[style*="color: #c8a97e"] {
  /* Stars stay gold — handled per-component */
}

/* ─── TESTIMONY SECTION ──────────────────────────────────────────────────── */
.testimony-section {
  background-color: #fff;
}

/* ─── COUNTER SECTION ────────────────────────────────────────────────────── */
/* Numbers keep gold for warmth */
.ftco-counter .number {
  color: var(--gold) !important;
}

/* ─── BLOG SECTION ───────────────────────────────────────────────────────── */
.blog-entry h3.heading a:hover {
  color: var(--sage) !important;
}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
.ftco-footer {
  background: #2d3b2d !important;
}

.ftco-footer .ftco-heading-2 {
  color: var(--sage-muted) !important;
}

.ftco-footer-social li a {
  background: rgba(122,148,120,0.2) !important;
}
.ftco-footer-social li a:hover {
  background: var(--sage) !important;
}

/* ─── GLOBAL UTILITY — catch remaining gold refs ─────────────────────────── */
/* Subtle sage tint on light backgrounds */
.ftco-section {
  background-color: #fafaf9;
}

/* Decorative divider dots/ornaments */
span[style*="color: #c8a97e"][style*="font-size: 1rem"] {
  color: var(--sage) !important;
}

/* Horizontal rule lines */
div[style*="width: 60px"][style*="background: #c8a97e"],
div[style*="width: 40px"][style*="background: linear-gradient"][style*="#c8a97e"] {
  background: var(--sage) !important;
}

/* ─── TREATMENTS (accordion) ─────────────────────────────────────────────── */
.myaccordion .card-header button {
  color: var(--sage) !important;
}
.myaccordion .card-header button:hover {
  color: var(--sage-dark) !important;
}

.treatment {
  transition: background 0.2s;
}
.treatment:hover {
  background: var(--sage-bg) !important;
}
.treatment .icon span {
  color: var(--sage) !important;
}

/* ─── SCROLLBAR (optional subtle touch) ──────────────────────────────────── */
::-webkit-scrollbar-thumb {
  background: var(--sage-muted);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--sage);
}

/* ─── SELECTION COLOR ────────────────────────────────────────────────────── */
::selection {
  background: var(--sage-muted);
  color: #fff;
}