/* ========= SmartAppointment Custom Theme ========= */
/* Palette: Dark Blue / Blue / White / Black */
:root{
  --blue-900:#0a2240;   /* Dark Blue (primary) */
  --blue-700:#184477;   /* Deep Blue (hover) */
  --blue-500:#1e90ff;   /* Accent Blue */
  --black:#0b0f14;      /* Near-black for text */
  --white:#ffffff;
  --muted:#e9eef6;
  --ring:#93b4e6;
}

/* Typography base (keeps your Unbounded import) */
body{
  font-family: 'Unbounded', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--black);
}

/* ===== GLOBAL LAYOUT / SECTIONS ===== */
.container{
  max-width:1200px; margin:0 auto; padding:24px 20px;
}
.section{ padding:56px 0; }
.hero{
  background:linear-gradient(135deg, var(--blue-900), #0f305c 55%, rgba(30,144,255,.25));
  color:#f5f9ff; border-radius:22px; overflow:hidden; position:relative;
}
.hero__grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center; }
.hero h1{ font-size:2.2rem; font-weight:800; letter-spacing:.2px; margin-bottom:10px; }
.hero p{ opacity:.9; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }
.hero__image{ border-radius:18px; box-shadow:0 16px 48px rgba(0,0,0,.25); }

@media (max-width:980px){ .hero__grid{ grid-template-columns:1fr; } }

/* Cards / Grids */
.grid{ display:grid; gap:18px; }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:980px){ .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:580px){ .grid--4{ grid-template-columns:1fr; } }
.card{ background:#fff; border:1px solid #e6ecf5; border-radius:16px; padding:18px; box-shadow:0 8px 24px rgba(10,34,64,.06); }
.card h4{ color:var(--blue-900); margin:0 0 6px 0; }

/* Buttons */
.btn--primary{ background:var(--blue-900); border:1px solid var(--blue-900); color:#fff; }
.btn--primary:hover{ background:var(--blue-700); border-color:var(--blue-700); }
.btn--accent{ background:var(--blue-500); border:1px solid var(--blue-500); color:#06101b; }
.btn--accent:hover{ filter:brightness(1.05); }

/* Footer */
.footer{ background:#0b1220; color:#c9d6ea; }
.footer a{ color:#fff; text-decoration:none; }
.footer a:hover{ color:var(--blue-500); }

/* ===== Analytics ===== */
.analytics-kpi .kpi-card{ background:linear-gradient(145deg, var(--blue-900), #10305c); border:none; border-radius:14px; }
.kpi-label{ opacity:.85; font-size:.85rem; }
.kpi-value{ font-size:1.8rem; font-weight:800; letter-spacing:.5px; }
.analytics-card{ border:1px solid #e6ecf5; border-radius:14px; box-shadow:0 8px 24px rgba(10,34,64,.06); }
.analytics-card .card-header{ border-bottom:1px solid #eef3fb; font-weight:700; color:var(--blue-900); }
.analytics-section h2{ color:var(--blue-900); font-weight:800; }

/* ===== How It Works (cards with larger icons) ===== */
.how-it-works .hiw-row{
  display:grid; gap:18px; grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width: 992px){ .how-it-works .hiw-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 576px){ .how-it-works .hiw-row{ grid-template-columns:1fr; } }
.how-it-works .hiw-card{
  background:#fff; border:2px solid #000; border-radius:18px; padding:22px 18px; text-align:center;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}
.how-it-works .hiw-badge{
  width:36px; height:36px; border-radius:50%; border:2px solid #000; display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; margin-bottom:8px; background:#fff; color:#000;
}
.how-it-works .hiw-icon{
  width:82px; height:82px; border-radius:50%; border:2px solid #000; display:flex; align-items:center; justify-content:center;
  font-size:42px; line-height:1; margin:10px auto 14px auto; background:#fafafa;
}
.how-it-works h5{ font-weight:800; color:var(--blue-900); margin-bottom:6px; }
.how-it-works p{ color:#4a5568; margin:0; }

/* ===== Vision section (match CTA background) ===== */
.vision-section{
  background:#0a2540; /* same as CTA */
  color:#f3f6fc;
}
.vision-section h2{ color:#ffffff; font-weight:800; }
.vision-section .vision-text{ color:#dbe5f3; max-width:980px; margin:0 auto; }

/* ===== Booking availability slots ===== */
.slot-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.slot-btn{ border:1px solid #0a2240; color:#0a2240; background:#fff; border-radius:12px; padding:6px 10px; font-weight:600; cursor:pointer; }
.slot-btn:hover{ background:#e9eef6; }
.slot-btn.active{ background:#1e90ff; color:#fff; border-color:#1e90ff; }
.slot-btn.disabled{ background:#f6f7fb; color:#a0aec0; border-color:#e2e8f0; cursor:not-allowed; }

/* ===== NAVBAR ===== */
.nav-wrap{
  position:sticky; top:0; z-index:1000;
  background:var(--white);
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:box-shadow .2s ease;
}
.nav-wrap.is-stuck{ box-shadow:0 8px 24px rgba(10,34,64,.08); }

.nav{
  max-width:1200px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

/* Logo */
.nav__logo{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.2px; color:var(--blue-900); text-decoration:none;
  font-size:1.1rem;
}
.nav__logo-dot{
  width:12px; height:12px; border-radius:50%;
  background:var(--blue-900); box-shadow:0 0 0 3px var(--muted);
}

/* Menu container */
.nav__menu{ display:flex; align-items:center; gap:18px; }
.nav__list{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; list-style:none; margin:0; padding:0; }

/* Links */
.nav__link{
  color:var(--black); text-decoration:none; font-weight:600;
  padding:8px 10px; border-radius:10px; line-height:1;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.nav__link:hover{ background:var(--muted); color:var(--blue-900); }
.nav__link.is-active{
  color:var(--blue-900); background:rgba(30,144,255,.12);
  box-shadow:0 0 0 2px rgba(30,144,255,.16);
}

/* Dropdowns */
.nav__item--has-dropdown{ position:relative; }
.nav__btn{ border:0; background:transparent; cursor:pointer; }
.nav__dropdown{
  position:absolute; top:110%; left:0; min-width:200px;
  background:var(--white); border:1px solid #e6ecf5; border-radius:14px;
  box-shadow:0 12px 32px rgba(10,34,64,.12);
  padding:8px; list-style:none; margin:0; display:none;
}
.nav__item--has-dropdown[aria-expanded="true"] .nav__dropdown,
.nav__item--has-dropdown .nav__btn[aria-expanded="true"] + .nav__dropdown{ display:block; }
.nav__dropdown-link{
  display:block; padding:10px 12px; border-radius:10px; text-decoration:none;
  color:var(--black); font-weight:600;
}
.nav__dropdown-link:hover{ background:var(--muted); color:var(--blue-900); }

/* Auth / Buttons */
.nav__auth{ display:flex; align-items:center; gap:10px; margin-left:8px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; border-radius:12px; line-height:1; cursor:pointer;
  padding:10px 14px; text-decoration:none;
}
.btn--ghost{ color:var(--blue-900); background:transparent; border:1px solid #dbe5f3; }
.btn--ghost:hover{ background:var(--muted); }

/* Mobile */
.nav__toggle{
  display:none; background:transparent; border:0; cursor:pointer; padding:6px 8px; border-radius:10px;
}
.nav__bar{ display:block; width:22px; height:2px; background:var(--blue-900); margin:5px 0; border-radius:2px; }

@media (max-width: 980px){
  .nav__toggle{ display:inline-block; }
  .nav__menu{
    position:fixed; inset:auto 12px 16px 12px; top:70px;
    background:var(--white); border:1px solid #e6ecf5; border-radius:18px;
    box-shadow:0 18px 48px rgba(10,34,64,.16);
    padding:14px; display:none; flex-direction:column; gap:14px;
  }
  .nav__menu.is-open{ display:flex; }
  .nav__list{ flex-direction:column; align-items:flex-start; gap:6px; }
  .nav__item--has-dropdown .nav__dropdown{
    position:static; min-width:unset; box-shadow:none; border:0; padding:4px 0; display:block;
  }
}

/* Focus ring for a11y */
.nav__link:focus, .nav__btn:focus, .nav__dropdown-link:focus, .btn:focus, .nav__toggle:focus{
  outline:none; box-shadow:0 0 0 3px var(--ring);
}



/* ===== WHY CHOOSE SARMS Section ===== */
.why-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.25s ease;
  text-align: center;
  height: 100%;
}

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.why-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-bottom: 4px solid #0a2540; /* dark blue accent */
}

.why-card-body {
  padding: 20px 16px 24px;
}

.why-card-body h5 {
  color: #0a2540;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.why-card-body p {
  color: #444;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* Responsive tweaks */
@media (max-width: 767px) {
  .why-card-img { height: 160px; }
}





/* --- Upgrade existing HIW cards --- */
/* ===== HOW IT WORKS - PROFESSIONAL STYLED CARDS ===== */

/* ===== HOW IT WORKS SECTION (FINAL VERSION) ===== */

.hiw-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.hiw-card {
  position: relative;
  background: #ffffff;
  border: 2px solid rgba(10, 37, 64, 0.15);
  border-radius: 20px;
  width: 250px;
  padding: 40px 25px 35px;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.hiw-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
  border-color: #1e90ff;
}

/* Big centered emoji */
.hiw-icon {
  font-size: 70px;
  background: #f4faff;
  border: 3px solid #1e90ff;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(30, 144, 255, 0.25);
}

/* Title + text */
.hiw-card h5 {
  color: #0a2540;
  font-weight: 800;
  margin-top: 12px;
}

.hiw-card p {
  color: #475569;
  font-size: 0.96rem;
  margin-top: 8px;
}

/* Badge number */
.hiw-badge {
  position: absolute;
  top: -15px;
  left: -15px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #0a2540;
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(10, 34, 64, 0.3);
}





/* ===== OUR VISION SECTION ===== */
.vision-section {
  background: linear-gradient(180deg, #f8fbff 0%, #eef4fa 100%);
  padding: 100px 0;
}

.vision-section h2 {
  font-weight: 800;
  color: #0a2540;
  margin-bottom: 20px;
}

.vision-text {
  font-size: 1.15rem;
  color: #333;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.8;
  font-weight: 400;
}

.vision-text strong {
  color: #1e90ff;
}


.google-map {
  border-radius: 12px;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}