/* ================================================================
   OPLUSH Beauty — Brand Override
   Loads LAST — overrides template's pink (#fa5bdd) with new palette
   ================================================================ */

/* ── Google Fonts ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,600&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ── CSS Variables ─────────────────────────────────────────────── */
:root {
  --midnight:      #0D0D0D;
  --plum:          #4B1F3F;
  --plum-dk:       #3a1830;
  --gold:          #B8965A;
  --gold-dk:       #9e7d48;
  --gold-lt:       #dcc99a;
  --dusty-rose:    #C9B5BE;
  --dusty-rose-lt: #e8dde1;
  --ivory:         #F5EEE8;
  --ivory-dk:      #ede4db;
}

/* ── Typography ────────────────────────────────────────────────── */
body {
  font-family: 'Montserrat', sans-serif;
  color: var(--midnight);
  background-color: var(--ivory);
}

h1, h2, h3, h4, h5, h6,
.heading,
.ftco-heading-2 {
  font-family: 'Cormorant Garamond', serif;
  color: var(--midnight);
}

/* ── Replace pink accent with new palette ──────────────────────── */

/* Primary text colour */
a,
.ftco-footer a:hover,
.block-23 ul li a:hover,
.heading-section span {
  color: var(--gold);
}

a:hover { color: var(--gold-dk); }

/* Primary buttons → Plum */
.btn-primary,
.btn.btn-primary {
  background-color: var(--plum) !important;
  border-color:     var(--plum) !important;
  color: var(--ivory) !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
}
.btn-primary:hover,
.btn.btn-primary:hover {
  background-color: var(--plum-dk) !important;
  border-color:     var(--plum-dk) !important;
}

.btn-white {
  border-color: rgba(245,238,232,0.7);
  color: var(--ivory);
}
.btn-white:hover {
  background-color: var(--gold);
  border-color: var(--gold);
  color: var(--midnight);
}

.btn-outline-white:hover {
  background-color: var(--gold);
  border-color: var(--gold);
  color: var(--midnight);
}

/* Pink text replacements across the template */
.text-primary { color: var(--gold) !important; }

/* Loader circle */
#ftco-loader .path { stroke: var(--gold); }

/* ── Navbar ─────────────────────────────────────────────────────── */
.ftco_navbar {
  background: var(--midnight) !important;
}
.ftco_navbar.scrolled {
  background: var(--midnight) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.navbar-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem !important;
  font-weight: 600;
  color: var(--gold) !important;
  letter-spacing: 0.08em;
}
.navbar-brand:hover { color: var(--ivory) !important; }

.ftco_navbar .nav-link,
.ftco_navbar .navbar-nav .nav-link {
  color: rgba(245,238,232,0.85) !important;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ftco_navbar .nav-link:hover,
.ftco_navbar .nav-item.active .nav-link {
  color: var(--gold) !important;
}

/* Book Now — CTA → Antique gold */
.ftco_navbar .btn-book {
  background: var(--gold);
  color: var(--midnight);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 22px;
  border-radius: 2px;
  border: none;
  transition: background 0.2s;
}
.ftco_navbar .btn-book:hover {
  background: var(--gold-dk);
  color: var(--midnight);
}

/* ── Hero section ───────────────────────────────────────────────── */
.hero-wrap .overlay {
  background: rgba(13,13,13,0.72);
  opacity: 1;
}
.hero-wrap .slider-text h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.hero-wrap .subheading {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.75rem;
}

/* ── Section headings ───────────────────────────────────────────── */
.heading-section h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.4rem;
}
.heading-section .subheading {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--plum);
}

/* ── Flaticon icons (service icons) ─────────────────────────────── */
.services .icon span,
.block-6 .icon span {
  color: var(--gold);
}

/* ── Service / pricing cards ────────────────────────────────────── */
.services-section .pricing-table {
  background: var(--ivory);
  border-radius: 4px;
  box-shadow: 0 2px 20px rgba(13,13,13,0.07);
  padding: 2rem;
}
.services-section .pricing-table h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  border-bottom: 1px solid var(--dusty-rose-lt);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  color: var(--midnight);
}
.services-section .pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--dusty-rose-lt);
  font-size: 0.875rem;
}
.services-section .pricing-row:last-child { border-bottom: none; }
.services-section .pricing-row .svc-name  { color: var(--plum); }
.services-section .pricing-row .svc-price {
  color: var(--gold);
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  white-space: nowrap;
  margin-left: 0.5rem;
}
.services-section .pricing-row .svc-duration {
  font-size: 0.75rem;
  color: var(--dusty-rose);
  margin-left: 0.5rem;
  white-space: nowrap;
}

/* ── Section backgrounds ────────────────────────────────────────── */
.ftco-section.bg-light { background: var(--ivory-dk) !important; }

/* ── Footer ─────────────────────────────────────────────────────── */
footer.ftco-footer {
  background: var(--midnight) !important;
}
footer.ftco-footer .ftco-heading-2 {
  color: var(--gold);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
}
footer.ftco-footer p,
footer.ftco-footer .block-23 ul li,
footer.ftco-footer .block-23 ul li a {
  color: rgba(245,238,232,0.65);
  font-size: 0.875rem;
}
footer.ftco-footer a:hover,
footer.ftco-footer .block-23 ul li a:hover {
  color: var(--gold);
}
footer.ftco-footer .ftco-footer-social li a {
  background: rgba(184,150,90,0.15);
  color: var(--gold);
  border: 1px solid rgba(184,150,90,0.3);
}
footer.ftco-footer .ftco-footer-social li a:hover {
  background: var(--gold);
  color: var(--midnight);
}
footer.ftco-footer .list-unstyled li a {
  color: rgba(245,238,232,0.65);
  font-size: 0.875rem;
  padding: 0.3rem 0 !important;
}
footer.ftco-footer .list-unstyled li a:hover {
  color: var(--gold);
}
footer.ftco-footer .block-23 .icon {
  color: var(--gold);
}
footer.ftco-footer p small,
footer.ftco-footer .copyright {
  color: rgba(245,238,232,0.35);
  font-size: 0.8rem;
}
footer.ftco-footer .copyright a {
  color: var(--gold);
}

/* ── Contact page ───────────────────────────────────────────────── */
.contact-info .icon {
  color: var(--gold);
  font-size: 1.5rem;
}

/* ── Form styles ────────────────────────────────────────────────── */
.form-control,
.custom-select {
  border: 1.5px solid var(--gold) !important;
  background-color: var(--ivory) !important;
  color: var(--midnight) !important;
  padding: 0.4rem 0.65rem !important;
}
.form-control:focus,
.custom-select:focus {
  border-color: var(--gold-dk) !important;
  box-shadow: 0 0 0 0.15rem rgba(184,150,90,0.25) !important;
}
.form-control::placeholder {
  color: var(--dusty-rose) !important;
  opacity: 1;
}
.form-control option,
.custom-select option {
  background-color: #ffffff;
  color: var(--midnight);
}

/* Appointment form select labels */
.booking-form-wrap .form-group label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--plum);
  margin-bottom: 4px;
}

/* ── Flash messages (public layout) ─────────────────────────────── */
.flash-success {
  background: var(--ivory-dk);
  border-left: 4px solid var(--gold);
  color: var(--midnight);
  padding: 1rem 1.25rem;
  border-radius: 4px;
  font-size: 0.9rem;
}
.flash-error {
  background: #fff0f0;
  border-left: 4px solid #c0392b;
  color: #c0392b;
  padding: 1rem 1.25rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* ── Misc overrides ─────────────────────────────────────────────── */
.ftco-animate.ftco-animated:before { background: var(--gold); }

/* Scrollax / stellar wrapper */
.ftco-section { padding: 6rem 0; }
.ftco-section.ftco-no-pt { padding-top: 0; }
.ftco-section.ftco-no-pb { padding-bottom: 0; }

/* Overlay for hero/footer parallax */
.img { background-position: center center; background-size: cover; }
.overlay {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}