/* ═══════════════════════════════════════════════════════════
   HOPE & HEAL — Unified Design System  v3.0
   Covers: Navbar · Sections · Cards · Typography · Forms · Footer
   ═══════════════════════════════════════════════════════════ */

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

/* ── Design Tokens ── */
:root {
  --green: #6b8c00;
  --green-mid: #8aaf00;
  --green-light: #a5be00;
  --green-pale: #f2f6e0;
  --green-soft: #eef5d0;
  --green-dark: #3d4a00;
  --cream: #faf9f4;
  --white: #ffffff;
  --ink: #1c1e14;
  --ink-mid: #3d4228;
  --ink-muted: #7a8360;
  --border: #dde6bb;
  --border-soft: #ecf2d0;

  --font-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-brand: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-sans: 'Nunito', system-ui, -apple-system, sans-serif;

  --shadow-sm: 0 2px 12px rgba(80, 100, 0, .07);
  --shadow-md: 0 8px 32px rgba(80, 100, 0, .11);
  --shadow-lg: 0 20px 60px rgba(80, 100, 0, .15);

  --r-card: 20px;
  --r-btn: 12px;

  /* Legacy aliases (keep for old markup) */
  --primary: #a5be00;
  --secondary: #6b8c00;
  --accent: #f2f6e0;
  --bg-light: #faf9f4;
  --bg-dark: #1c1e14;
  --text-main: #1c1e14;
  --text-muted: #7a8360;
  --pill-radius: 12px;
  --card-shadow: 0 8px 32px rgba(80, 100, 0, .11);
  --font-serif-old: 'Playfair Display', 'Brygada 1918', Georgia, serif;
}

/* ══════════════════════════════
   BASE
══════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Headings */
h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

h5,
h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--ink);
}

p {
  color: var(--ink-mid);
  line-height: 1.7;
}

a {
  transition: color 0.2s ease;
}

/* Section rhythm */
section {
  position: relative;
}

/* ══════════════════════════════
   GLOBAL SECTION HEADINGS
   Targets Mobirise display-2 titles
══════════════════════════════ */
.mbr-section-title,
.card-title,
.item-title {
  font-family: var(--font-serif) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -0.02em;
}

.display-1 {
  font-size: clamp(2.4rem, 5vw, 4rem) !important;
}

.display-2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
}

.display-4 {
  font-size: 0.95rem !important;
}

.display-5 {
  font-size: 1.1rem !important;
  font-family: var(--font-serif) !important;
  font-weight: 700 !important;
}

.display-7 {
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  color: var(--ink-mid) !important;
}

/* Section subtitle text */
.mbr-section-subtitle,
.mbr-text,
.item-subtitle {
  font-family: var(--font-sans) !important;
  color: var(--ink-muted) !important;
}

/* ══════════════════════════════
   NAVBAR  (Floating Pill)
══════════════════════════════ */
.navbar {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  margin: 10px auto !important; /* Unified index/order gap */
  width: 95%;
  max-width: 1200px;
  padding: 0.4rem 1.5rem !important; /* Slimmer header */
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 1030;
}

.navbar-logo img {
  height: 3.2rem !important;
  width: auto !important;
}

.navbar-caption {
  font-family: var(--font-brand) !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  font-style: italic;
  color: var(--ink) !important;
  letter-spacing: 0.01em;
}

.nav-link {
  font-family: var(--font-sans) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  padding: 0.4rem 1rem !important;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}

.nav-link:hover {
  color: var(--green) !important;
}

/* ── Primary CTA Button ── */
.btn-primary {
  background: var(--green-light) !important;
  border-color: var(--green-light) !important;
  color: #fff !important;
  border-radius: var(--r-btn) !important;
  padding: 0.65rem 1.6rem !important;
  font-family: var(--font-sans) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  transition: all 0.22s ease;
  box-shadow: 0 4px 14px rgba(165, 190, 0, 0.28);
}

.btn-primary:hover {
  background: var(--green) !important;
  border-color: var(--green) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(107, 140, 0, 0.35) !important;
}

/* Mobile navbar */
@media (max-width: 991px) {
  .navbar {
    border-radius: 1rem;
    margin: 10px !important; /* Match desktop gap */
    width: calc(100% - 20px);
  }

  .navbar-collapse {
    background: rgba(255, 255, 255, 0.98);
    border-radius: 0.9rem;
    padding: 1rem;
    margin-top: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  }

  .navbar-buttons.mbr-section-btn {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding: 0.5rem 0 !important;
    width: 100% !important;
  }

  .navbar-buttons .btn,
  .navbar-buttons .btn-order-online,
  .navbar-buttons a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ══════════════════════════════
   SECTION BACKGROUNDS (alternating)
══════════════════════════════ */
/* Hero stays dark/image */
.cid-uqUIPDblTU {
  background-color: var(--ink) !important;
}

/* Metrics strip */
.cid-uqUIPDco1r {
  background: var(--green-dark) !important;
  color: #fff !important;
  padding: 2.5rem 0 !important;
}

.cid-uqUIPDco1r .mbr-section-title,
.cid-uqUIPDco1r .display-2,
.cid-uqUIPDco1r .counter-title {
  color: #fff !important;
}

.cid-uqUIPDco1r .mbr-text,
.cid-uqUIPDco1r .display-7 {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Gallery / scrolling ticker */
.cid-uqUIPDcgAf {
  background: var(--green-pale) !important;
}

/* About / Meet Our Experts */
.cid-uqUIPDcgkx {
  background: var(--white) !important;
  padding: 5rem 0 !important;
}

.cid-uqUIPDcgkx .card {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--shadow-sm) !important;
}

.cid-uqUIPDcgkx .card-wrapper {
  padding: 2.5rem !important;
}

/* Team section */
.cid-uqUIPDdYEs {
  background: var(--green-pale) !important;
  padding: 5rem 0 !important;
}

.cid-uqUIPDdYEs .mbr-section-title {
  color: var(--ink) !important;
}



/* Testimonials */
.cid-uqUIPDe7Av {
  background: var(--white) !important;
  padding: 5rem 0 !important;
}

.cid-uqUIPDe7Av .card {
  border: 1.5px solid var(--border-soft) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 1.75rem !important;
  background: var(--cream) !important;
}

/* News / Products feature cards */
.cid-uqUIPDfwAc {
  background: var(--green-pale) !important;
  padding: 5rem 0 !important;
}

.cid-uqUIPDfwAc .card {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-card) !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.25s, box-shadow 0.25s;
}

.cid-uqUIPDfwAc .card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md) !important;
}

/* Gallery */
.cid-uqUIPDf0T0 {
  background: var(--white) !important;
  padding: 5rem 0 !important;
}

/* FAQ */
.cid-uqUIPDhx4Y {
  background: var(--cream) !important;
  padding: 5rem 0 !important;
}

.cid-uqUIPDhx4Y .card {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-card) !important;
  box-shadow: none !important;
}

.cid-uqUIPDhx4Y .card-header {
  background: var(--white) !important;
  border-radius: var(--r-card) !important;
}

/* CTA article */
.cid-uqUIPDiokc {
  background: linear-gradient(135deg, var(--green-dark), var(--green)) !important;
  padding: 5rem 0 !important;
}

.cid-uqUIPDiokc .mbr-section-title,
.cid-uqUIPDiokc .display-2 {
  color: #fff !important;
}

.cid-uqUIPDiokc .mbr-text,
.cid-uqUIPDiokc .display-7 {
  color: rgba(255, 255, 255, 0.8) !important;
}

.cid-uqUIPDiokc .btn-primary {
  background: #fff !important;
  color: var(--green) !important;
  border-color: #fff !important;
}

.cid-uqUIPDiokc .btn-primary:hover {
  background: var(--green-pale) !important;
  color: var(--green-dark) !important;
}

/* Social follow section */
.cid-uqUIPDiOxM {
  background: var(--green-pale) !important;
  padding: 4rem 0 !important;
}

/* Appointment Form */
.cid-uqUIPDi5sx {
  background: var(--white) !important;
  padding: 5rem 0 !important;
}

.cid-uqUIPDi5sx .form-control {
  border: 1.5px solid var(--border) !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  font-family: var(--font-sans) !important;
  font-size: 0.93rem !important;
  color: var(--ink) !important;
  background: var(--cream) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cid-uqUIPDi5sx .form-control:focus {
  border-color: var(--green-light) !important;
  box-shadow: 0 0 0 3px rgba(165, 190, 0, 0.15) !important;
  outline: none !important;
}

.cid-uqUIPDi5sx textarea.form-control {
  min-height: 130px;
  resize: vertical;
}

/* Footer */
.cid-uqUIPDiNEY,
footer {
  background: var(--ink) !important;
  padding: 2rem 0 !important;
}

.cid-uqUIPDiNEY .mbr-text,
.cid-uqUIPDiNEY p {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 0.85rem !important;
  margin: 0 !important;
}

.cid-uqUIPDiNEY a {
  color: rgba(255, 255, 255, 0.4) !important;
}

.cid-uqUIPDiNEY a:hover {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ══════════════════════════════
   UNIVERSAL SECTION HEAD STYLE
   Applied to all mbr-section-head divs
══════════════════════════════ */
.mbr-section-head {
  margin-bottom: 3rem !important;
}

.mbr-section-title.align-center,
.mbr-section-head .display-2 {
  position: relative;
  padding-bottom: 1.1rem;
  margin-bottom: 0.5rem !important;
}

.mbr-section-title.align-center::after,
.mbr-section-head .display-2::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--green-light);
  border-radius: 2px;
  margin: 0.75rem auto 0;
}

/* ══════════════════════════════
   CARDS (global)
══════════════════════════════ */
.card {
  border: 1.5px solid var(--border-soft) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden;
  background: var(--white) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md) !important;
}

.card-wrapper {
  padding: 1.75rem !important;
}

/* Metric numbers */
.metric-num,
[data-count] {
  font-family: var(--font-serif) !important;
  font-size: 3rem !important;
  font-weight: 700 !important;
  color: var(--green-light) !important;
  display: block;
  line-height: 1 !important;
}

/* ══════════════════════════════
   HERO (index.html full-screen)
══════════════════════════════ */
.cid-uqUIPDblTU .mbr-section-title {
  color: #fff !important;
}

.cid-uqUIPDblTU .mbr-text,
.cid-uqUIPDblTU .display-7 {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ══════════════════════════════
   GLOBAL CTA BUTTON (secondary green variant)
══════════════════════════════ */
.btn-secondary-green {
  background: transparent;
  border: 2px solid var(--green-light);
  color: var(--green);
  border-radius: var(--r-btn);
  padding: 0.65rem 1.6rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn-secondary-green:hover {
  background: var(--green-light);
  color: #fff;
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 768px) {
  .display-1 {
    font-size: 2rem !important;
  }

  .display-2 {
    font-size: 1.6rem !important;
  }

  .metric-num,
  [data-count] {
    font-size: 2.2rem !important;
  }

  section {
    padding: 3rem 0 !important;
  }
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--cream);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--green-light);
}

/* ══════════════════════════════
   HERO BADGE (Order Online)
══════════════════════════════ */
.order-online-badge {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, var(--green-light), var(--green));
  color: #fff !important;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 1.2px;
  text-decoration: none !important;
  box-shadow: 0 10px 30px rgba(107, 140, 0, 0.4), inset 0 2px 5px rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.order-online-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  animation: shine 3s infinite;
  z-index: -1;
}

@keyframes shine {
  0% {
    left: -100%;
  }

  20% {
    left: 200%;
  }

  100% {
    left: 200%;
  }
}

.order-online-badge:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 15px 35px rgba(107, 140, 0, 0.5), inset 0 2px 8px rgba(255, 255, 255, 0.5);
  border-color: #fff;
  color: #fff !important;
}

.badge-arrow {
  margin-left: 10px;
  transition: transform 0.3s ease;
  display: inline-block;
  font-size: 1.1em;
}

.order-online-badge:hover .badge-arrow {
  transform: translateX(6px);
}

.pulse-dot {
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  margin-right: 12px;
  position: relative;
}

.pulse-dot::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: #fff;
  border-radius: 50%;
  animation: pulse-ring 1.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.33);
    opacity: 0.8;
  }

  80%,
  100% {
    opacity: 0;
    transform: scale(3.5);
  }
}

/* ══════════════════════════════
   PREMIUM CTA SECTION
══════════════════════════════ */
.premium-cta-section {
  background: linear-gradient(135deg, var(--cream), #ffffff);
  padding: 6rem 2rem;
  position: relative;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.cta-content-wrapper {
  background: #ffffff;
  border-radius: 2rem;
  padding: 5rem 3rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.cta-content-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  background: linear-gradient(180deg, var(--green-light), var(--green));
}

.premium-cta-section h2 {
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.premium-cta-section .btn {
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  border-radius: 50px;
  margin: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 991px) {
  .premium-cta-section {
    padding: 4rem 1rem;
  }

  .cta-content-wrapper {
    padding: 3rem 1.5rem;
  }

  .premium-cta-section h2 {
    font-size: 2.2rem;
  }
}

/* ══════════════════════════════
   MOBILE CART BAR & TOASTS
══════════════════════════════ */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#mobile-cart-bar {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

#mobile-cart-bar:active {
  transform: scale(0.98);
}

.toast {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
  border: none !important;
}

/* Ensure mobile bar doesn't cover footer too much */
@media (max-width: 1024px) {
  body {
    padding-bottom: 80px; /* Space for the floating mobile bar */
  }
}
/* ══════════════════════════════
   ORDER PAGE FIXES
══════════════════════════════ */
/* Removed static override to consistently use floating pill navbar */


.order-page section.menu {
  position: fixed !important;
  top: 0;
  width: 100%;
  z-index: 1030 !important;
  padding: 0 !important;
}