/* ===== CSS RESET & VARIABLES ===== */

:root {
  --primary: #1B2A5B;
  --primary-dark: #111D42;
  --primary-light: #EAEDF5;
  --primary-gradient: linear-gradient(135deg, #1B2A5B 0%, #2A3F7A 100%);
  --accent: #D33535;
  --accent-light: #FBE9EC;
  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;
  --bg: #DEEBF5;
  --bg-card: #FFFFFF;
  --text-primary: #1B2A5B;
  --text-secondary: #4A5578;
  --text-muted: #8B90A0;
  --border: #DDE2EE;
  --shadow-sm: 0 1px 3px rgba(27,42,91,0.06);
  --shadow-md: 0 4px 12px rgba(27,42,91,0.08);
  --shadow-lg: 0 8px 30px rgba(27,42,91,0.12);
  --shadow-glow: 0 4px 20px rgba(27,42,91,0.25);
  --glass-bg: rgba(255, 255, 255, 0.45);
  --glass-border: 1px solid rgba(255, 255, 255, 0.6);
  --glass-shadow: 0 8px 32px rgba(27, 42, 91, 0.08);
  --glass-blur: blur(16px);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 50px;
  --font-primary: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --nav-height: 68px;
  --bottom-nav-height: 72px;
}

.flebo-header-v2 {
  position: sticky;
  top: 0;
  z-index: 200;
  background: #fff;
}

.flebo-header-v2 .top-bar {
  max-height: 60px;
  overflow: hidden;
  transform-origin: top;
  transition:
    max-height 320ms cubic-bezier(0.4, 0, 0.2, 1),
    padding 320ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 200ms ease;
  will-change: max-height, opacity;
}
.flebo-header-v2.scrolled .top-bar {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}
.flebo-header-v2 .site-header {
  transition: box-shadow 220ms ease;
}
.flebo-header-v2.scrolled .site-header {
  box-shadow: 0 2px 8px rgba(27, 42, 91, 0.08);
}
.flebo-header-v2 .site-header-inner {
  transition: padding 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.flebo-header-v2.scrolled .site-header-inner {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ===== SKELETON LOADER ===== */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* ===== TOP BAR ===== */
.flebo-header-v2 .top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1a1a1a;
  padding: 8px 16px;
  position: sticky;
  top: 0;
  z-index: 101;
}
.flebo-header-v2 .top-bar-left,
.flebo-header-v2 .top-bar-center,
.flebo-header-v2 .top-bar-right {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.flebo-header-v2 .top-bar-left a,
.flebo-header-v2 .top-bar-center a,
.flebo-header-v2 .top-bar-right a {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}
.flebo-header-v2 .top-bar-left i,
.flebo-header-v2 .top-bar-center i,
.flebo-header-v2 .top-bar-right i {
  font-size: 13px;
}
.flebo-header-v2 .top-bar-locate {
  color: var(--accent) !important;
  font-size: 12px;
  margin-left: 2px;
}
.flebo-header-v2 .top-bar-locate i {
  color: var(--accent);
}
/* ===== PINCODE POPUP ===== */
.flebo-header-v2 .pincode-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9998;
}
.flebo-header-v2 .pincode-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: 9999;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(48,76,124,0.22);
  width: 290px;
  overflow: hidden;
  animation: pincodeSlideIn 0.22s ease forwards;
}
@keyframes pincodeSlideIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.93); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.flebo-header-v2 .pincode-popup.open,
.flebo-header-v2 .pincode-overlay.open { display: block; }
.flebo-header-v2 .pincode-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #304c7c;
  color: #fff;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.flebo-header-v2 .pincode-popup-header i { margin-right: 0; font-size: 15px; }
.flebo-header-v2 .pincode-close-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.flebo-header-v2 .pincode-close-btn:hover { background: rgba(255,255,255,0.3); }
.flebo-header-v2 .pincode-popup-body {
  padding: 16px 16px 18px;
}
.flebo-header-v2 .pincode-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.flebo-header-v2 .pincode-input {
  flex: 1;
  width: 100px;
  border: 1.5px solid #d0d5e8;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 600;
  color: #304c7c;
  outline: none;
  transition: border 0.2s, box-shadow 0.2s;
  background: #eef1f8;
}
.flebo-header-v2 .pincode-input::placeholder { color: #9aa3bc; font-weight: 400; }
.flebo-header-v2 .pincode-input:focus {
  border-color: #304c7c;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(48,76,124,0.12);
}
.flebo-header-v2 .pincode-gps-btn {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1.5px solid #304c7c;
  background: #eef1f8;
  color: #304c7c;
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.flebo-header-v2 .pincode-gps-btn:hover { background: #304c7c; color: #fff; }
.flebo-header-v2 .pincode-hint {
  font-size: 10px;
  color: #8a93b0;
  margin: 0 0 14px;
}
.flebo-header-v2 .pincode-apply-btn {
  width: 100%;
  padding: 11px;
  background: #304c7c;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: opacity 0.2s;
}
.flebo-header-v2 .pincode-apply-btn:hover { opacity: 0.9; }

/* ===== HEADER ===== */
.flebo-header-v2 .header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

/* ===== HERO SECTION ===== */

/* ===== HERO BENEFIT PILLS ===== */

/* View all Labs button */

/* Prescription link row */

/* Prescription popup */
/* Suggestions are moved to body via JS to escape overflow:hidden */

/* ===== DOCTORS PANEL (inside hero) ===== */

/* ===== PACKAGES PANEL (inside hero) ===== */

/* ===== DEFAULT HERO CONTENT ===== */

/* ===== SEARCH ===== */

/* Search Suggestions Dropdown */

/* ===== MAIN CONTENT ===== */

/* ===== PROMO BANNERS ===== */

/* ===== FEATURE CARDS ===== */

/* ===== SECTION HEADERS ===== */

/* ===== CATEGORY TABS ===== */

/* ===== DISCOUNT BANNER ===== */

/* ===== PACKAGE CATEGORY TABS ===== */

/* ===== PACKAGE CARDS ===== */
/* ===== PACKAGES STACKED CAROUSEL ===== */

/* ===== NEW PACKAGE CARD DESIGN ===== */

/* Card top content area */

/* Discount badge - top right */

/* Package title */

/* Package description */

/* Test included badge */

/* Card bottom area with red semi-circle and price */

/* Red semi-circle */

/* Book Now button in bottom right */

/* ===== FOOD INTOLERANCE BANNER ===== */

/* ===== SPECIAL OFFER BANNER ===== */
/* ===== CARE PLANS ===== */

/* ===== ORGAN TESTS (removed) ===== */
/* kept for reference - section removed */

/* ===== RADIOLOGY ===== */

/* ===== HEALTH CONCERNS ===== */

/* ===== LIFESTYLE CONCERNS ===== */

/* ===== TESTS BY CATEGORY ===== */
/* Gradient ring around circle */

/* ===== TRUST SECTION ===== */

/* ===== MEDIA COVERAGE SECTION ===== */

/* Stacked Media Player */
/* Background stacked cards */
/* Main card */
/* Close button */
/* Thumbnail area */
/* Progress bar */
/* Controls bar */
/* Hidden swiper for data only */

/* Video Popup Overlay */
@keyframes fadeInPopup {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scaleInPopup {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ===== TESTIMONIALS SECTION ===== */

/* Carousel nav buttons */

/* ===== FLOATING CALL BUTTON ===== */
@keyframes float-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(211,53,53,0.3); }
  50% { box-shadow: 0 4px 30px rgba(211,53,53,0.5); }
}

/* ===== HAMBURGER MENU BUTTON ===== */
.flebo-header-v2 .hamburger-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.flebo-header-v2 .hamburger-btn:hover { background: var(--primary-light); color: var(--primary); }

/* ===== SIDEBAR MENU ===== */
.flebo-header-v2 .sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s;
}
.flebo-header-v2 .sidebar-overlay.active { display: block; opacity: 1; }

.flebo-header-v2 .sidebar {
  position: fixed;
  top: 0;
  left: -300px;
  width: 280px;
  height: 100%;
  max-width: 80vw;
  background: #fff;
  z-index: 1000;
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 8px 0 30px rgba(0,0,0,0.15);
}
.flebo-header-v2 .sidebar.active { left: 0; }

.flebo-header-v2 .sidebar-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 20px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.flebo-header-v2 .sidebar-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--primary);
  flex-shrink: 0;
}
.flebo-header-v2 .sidebar-user-info {
  flex: 1;
}
.flebo-header-v2 .sidebar-user-info .user-name {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.flebo-header-v2 .sidebar-user-info .user-location {
  font-size: 12px;
  color: var(--text-muted);
}
.flebo-header-v2 .sidebar-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  position: absolute;
  top: 20px;
  right: 16px;
}
.flebo-header-v2 .sidebar-close:hover { background: var(--primary-light); color: var(--accent); }

.flebo-header-v2 .sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.flebo-header-v2 .sidebar-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
  border-left: 3px solid transparent;
  text-decoration: none;
}
.flebo-header-v2 .sidebar-link:hover {
  background: var(--primary-light);
  color: var(--primary);
}
.flebo-header-v2 .sidebar-link.active-link {
  border-left-color: var(--accent);
  font-weight: 700;
  color: var(--text-primary);
}
.flebo-header-v2 .sidebar-link i {
  width: 22px;
  text-align: center;
  font-size: 16px;
  color: var(--text-muted);
}
.flebo-header-v2 .sidebar-link:hover i { color: var(--primary); }
.flebo-header-v2 .sidebar-link.active-link i { color: var(--accent); }
.flebo-header-v2 .sidebar-link .new-badge {
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  margin-left: 4px;
}
.flebo-header-v2 .sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 20px;
}
.flebo-header-v2 .sidebar-footer {
  padding: 16px 20px 24px;
  border-top: 1px solid var(--border);
}
.flebo-header-v2 .sidebar-social {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

/* ===== BOTTOM NAV ===== */

/* Center Chat icon - elevated */

/* ===== FOOTER ===== */

/* ===== New footer pieces (top CTA col, tags rows, bottom bar) ===== */

/* ===== PARTNER LABS SECTION ===== */
@keyframes partnerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== TOAST NOTIFICATION ===== */

/* ===== MODAL (for Know More) ===== */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ===== MICRO ANIMATIONS ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== SCROLLBAR HIDE UTIL ===== */

/* Primary desktop nav (hidden on mobile; revealed via @media >= 768px) */

/* ===== REDUCED MOTION ===== */
@media (max-width: 370px) {
  .flebo-header-v2 .top-bar-left, .flebo-header-v2 .top-bar-center, .flebo-header-v2 .top-bar-right {
    gap: 4px;
    font-size: 11px;
  }
}

/* =================================================================
   ===== RESPONSIVE WEB / DESKTOP LAYER (>=768px) ===================
   ================================================================= */
@media (min-width: 768px) {
  /* Lift mobile width cap */

  /* Top bar (padding handled by .top-bar-inner; old V1 rules removed) */
  .flebo-header-v2 .top-bar-left, .flebo-header-v2 .top-bar-center, .flebo-header-v2 .top-bar-right, .flebo-header-v2 .top-bar-left a, .flebo-header-v2 .top-bar-center a, .flebo-header-v2 .top-bar-right a {
    font-size: 13px;
  }

  /* Header — stretched, contents max-1200 */
  .flebo-header-v2 .header-top {
    max-width: 1200px;
    margin: 0 auto;
    gap: 24px;
  }

  /* Mobile bottom-nav hidden on desktop (replaced by inline primary nav) */

  /* Upload-report button hidden on desktop (it's a nav item now) */

  /* Hide hamburger on desktop — inline nav replaces sidebar trigger */
  .flebo-header-v2 .hamburger-btn { display: none !important; }

  /* Floating call button hidden on desktop */

  /* ===== PRIMARY DESKTOP NAV ===== */

  /* Hero — wider, centered inner */

  /* Hero packages-panel grid widens */

  /* Hero doctors speciality grid */

  /* Floating search suggestions: align to hero search bar */

  /* Main content centered with max-width */

  /* Section headers larger */

  /* Partner labs section: keep marquee, just bigger logos */

  /* Tests by Category: from horizontal scroll → grid */

  /* Radiology cards: grid */

  /* Health concerns bento → 4 equal columns */

  /* Lifestyle chips: single row of 6 */

  /* Trust section */

  /* Special offer banner */

  /* Packages: turn the stacked carousel into a real grid */

  /* Testimonial cards bigger */

  /* Footer — desktop: 3-col top row (brand | quick links | CTA), full-width tags + bottom bar */
  /* Quick Links: 2 columns × 5 rows spread to fill the middle column width */
}

/* =================================================================
   ===== DESKTOP REFINEMENTS (>=1024px) =============================
   ================================================================= */
@media (min-width: 1024px) {
  .flebo-header-v2 .top-bar { font-size: 14px; }

  /* Hero default: 2-column layout (search left / benefits right) */
  /* Media coverage breaks out of the main container's gutter */
  /* Cap media coverage card width on web — it's the focal element, not a hero */

  /* Packages 3 across stays nice */
}

/* =================================================================
   ===== WIDE DESKTOP (>=1280px) ====================================
   ================================================================= */
@media (min-width: 1280px) {
  .flebo-header-v2 .top-bar > * { max-width: 1320px; }
  .flebo-header-v2 .header-top { max-width: 1320px; }

  /* 4-up package grid on widest screens shows all 5 nicely (4 + 1) */

  /* Radiology stays 4-up; lifestyle 6-up; concerns 3-up — already set */
}

/* =================================================================
   ===== V2 LAYOUT (TOP BAR + HEADER + NAV + HERO) ==================
   Matches reference image. Desktop-first; mobile fallback below.
   ================================================================= */

/* ---------- TOP BAR ---------- */
.flebo-header-v2 .top-bar {
  display: block;
  background: #0B1530;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 200;
}
:root { --site-inset: 32px; }
.flebo-header-v2 .top-bar-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 10px var(--site-inset);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}
.flebo-header-v2 .top-bar-trust,
.flebo-header-v2 .top-bar-utility {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.flebo-header-v2 .top-bar-trust li,
.flebo-header-v2 .top-bar-utility li { display: flex; align-items: center; gap: 8px; }
.flebo-header-v2 .top-bar-link,
.flebo-header-v2 .top-bar-utility a {
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.2s;
}
.flebo-header-v2 .top-bar-link:hover,
.flebo-header-v2 .top-bar-utility a:hover { opacity: 0.75; }
.flebo-header-v2 .top-bar-login { margin-left: auto; }
.flebo-header-v2 .tb-icon-green {
  color: #21C669;
  font-size: 14px;
}
.flebo-header-v2 .top-bar-utility i { font-size: 13px; opacity: 0.85; }
.flebo-header-v2 .top-bar-location {
  background: transparent;
  border: 0;
  color: #fff;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s;
}
.flebo-header-v2 .top-bar-location:hover { opacity: 0.85; }
.flebo-header-v2 .top-bar-location-caret { font-size: 10px; opacity: 0.75; margin-left: 2px; }

/* ---------- HEADER (V2) ---------- */
.flebo-header-v2 .site-header {
  background: #fff;
  border-bottom: 1px solid #EEF1F7;
  position: sticky;
  top: 38px;
  z-index: 190;
}

.flebo-header-v2 .site-header-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px var(--site-inset);
  display: flex;
  align-items: center;
  gap: 28px;
}
.flebo-header-v2 .brand-logo { height: 46px; width: auto; }
.flebo-header-v2 .brand-block {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex-shrink: 0;
}
.flebo-header-v2 .brand-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #EAF2FC;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}
.flebo-header-v2 .brand-rating-score { font-weight: 800; }
.flebo-header-v2 .brand-rating-stars { display: inline-flex; gap: 1px; color: #F6B100; font-size: 10px; }
.flebo-header-v2 .brand-rating-count { font-weight: 600; opacity: 0.85; }

/* ---------- MAIN NAV (inline in site-header) ---------- */
.flebo-header-v2 .main-nav-inner {
  /* legacy wrapper — only used if .main-nav-inner is in the DOM */
  display: flex;
  align-items: center;
}
.flebo-header-v2 .main-nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}
.flebo-header-v2 .main-nav-list li { list-style: none; }
.flebo-header-v2 .main-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 18px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.2s;
}
.flebo-header-v2 .main-nav-link i { font-size: 14px; color: var(--text-secondary); transition: color 0.2s; }
.flebo-header-v2 .main-nav-link:hover { color: var(--accent); }
.flebo-header-v2 .main-nav-link:hover i { color: var(--accent); }
.flebo-header-v2 .main-nav-link.active { color: var(--accent); }
.flebo-header-v2 .main-nav-link.active i { color: var(--accent); }
.flebo-header-v2 .main-nav-link.active::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
}
.flebo-header-v2 .main-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  padding: 16px 0;
  align-self: center;
}
.flebo-header-v2 .main-nav-cta:hover { color: #B82A2A; }
.flebo-header-v2 .main-nav-cta i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* Pipe separators between text nav items (2nd, 3rd, 4th, 5th BMI) */
.flebo-header-v2 .main-nav-list > li:nth-child(2) > .main-nav-link::before,
.flebo-header-v2 .main-nav-list > li:nth-child(3) > .main-nav-link::before,
.flebo-header-v2 .main-nav-list > li:nth-child(4) > .main-nav-link::before,
.flebo-header-v2 .main-nav-list > li:nth-child(5) > .main-nav-link::before {
  content: '|';
  color: #D5DAE5;
  font-weight: 400;
  margin-left: -10px;
  margin-right: 20px;
  font-size: 15px;
}

/* Upload Report pill */
.flebo-header-v2 .main-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--accent);
  background: #fff;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.flebo-header-v2 .main-nav-pill:hover { background: var(--accent); color: #fff; }
.flebo-header-v2 .main-nav-pill i { color: var(--accent); font-size: 14px; transition: color 0.2s; }
.flebo-header-v2 .main-nav-pill:hover i { color: #fff; }

/* Upload Report list item: stack pill + sub-line below it */
.flebo-header-v2 .main-nav-upload {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0 14px;
  align-self: center;
}
.flebo-header-v2 .main-nav-upload-sub {
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}
.flebo-header-v2 .main-nav-upload-sub-sep { margin: 0 6px; color: #C5CCDB; }

/* BMI Calculator with colorful gauge */
.flebo-header-v2 .main-nav-bmi { gap: 10px; }

/* ---------- HERO V2 ---------- */
/* Desktop (≥1024px): wrap first-fold elements in a flex column locked to
   100dvh. The hero takes whatever space remains after top-bar + site-header
   + sample-tested strip, so the strip is GUARANTEED at the viewport bottom
   regardless of any chrome height variance. */
@media (min-width: 1024px) {
  /* Compact Doctors panel so 9 specialities always fit on short desktop heights */
}
/* Extra-short desktop heights: shrink hero padding, image + Doctors further */
/* Mid-short heights (821–920px): trim the image without compacting Doctors */

/* Hero content (left column) — pin to top so tab position doesn't shift between panels */

/* Hide benefit pills on desktop only — they stay visible on mobile */

/* Hero category tabs */

/* ---------- Hero panels (per-tab content) ---------- */

/* Benefit pills (Tests) */

/* Shared search bar (Tests / Packages / Labs) */

/* Packages tile grid (2x2 glass-blue cards) */

/* Labs: red CTA pill */

/* Doctors: speciality dropdown + submit + 3x3 grid */

@media (max-width: 540px) {
  /* Drop the forced row break so 9 specialities flow as a clean 3×3 */
}

/* Hero visual (right column) */

/* Floating cards over the image */

@keyframes hero-floater-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ---------- SAMPLE TESTED BY (lab marquee) ---------- */
@keyframes sample-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Hide legacy elements not part of v2 */

/* Hide the floating call button (24x7 is in nav now) */

/* Bottom-nav: hidden on desktop, shown only on mobile (≤768px) */

/* Hide the older .header (mobile) since site-header replaces it */

/* Top-bar baseline override (the cascading older .top-bar-left etc. are unused now) */
.flebo-header-v2 .top-bar-left, .flebo-header-v2 .top-bar-center, .flebo-header-v2 .top-bar-right { display: none !important; }

/* ---------- HEADER / NAV / HERO RESPONSIVE ---------- */

/* Tablet */
@media (max-width: 1100px) {
  :root { --site-inset: 20px; }
  .flebo-header-v2 .top-bar-inner { padding-top: 9px; padding-bottom: 9px; gap: 12px; font-size: 12.5px; }
  .flebo-header-v2 .top-bar-trust, .flebo-header-v2 .top-bar-utility { gap: 16px; }

  .flebo-header-v2 .site-header-inner { padding-top: 12px; padding-bottom: 12px; gap: 12px; }

  /* Below desktop, fall back to hamburger menu */
  .flebo-header-v2 .hamburger-btn {
    display: inline-flex !important;
    margin: 0;
    width: 40px; height: 40px;
    background: #EAF0F7;
    color: var(--primary);
    border-radius: 10px;
  }
  .flebo-header-v2 .header-upload { margin-left: auto; }
}

/* Small tablet / large mobile */

/* Mobile */
@media (max-width: 768px) {

  .flebo-header-v2 .top-bar-trust { gap: 10px; }
  .flebo-header-v2 .top-bar-utility { gap: 14px; }
  .flebo-header-v2 .top-bar-utility a span,
  .flebo-header-v2 .top-bar-location span:not(#topBarLocationDisplay) { font-size: 12px; }
  :root { --site-inset: 16px; }
  .flebo-header-v2 .top-bar { position: sticky; top: 0; margin: 0; border: 0; }
  .flebo-header-v2 .top-bar-inner { font-size: 11.5px; padding-top: 6px; padding-bottom: 6px; gap: 10px; margin: 0; line-height: 1.3; }
  .flebo-header-v2 .top-bar-link span { display: inline; font-size: 11.5px; }

  .flebo-header-v2 .site-header { position: sticky; top: 26px; margin: 0; border-top: 0; }
  .flebo-header-v2 .site-header-inner { padding-top: 10px; padding-bottom: 10px; gap: 10px; margin: 0; }
  .flebo-header-v2 .brand-logo { height: 32px; }
  .flebo-header-v2 .brand-rating { padding: 2px 6px; font-size: 11px; }
  .flebo-header-v2 .brand-rating-stars { font-size: 9px; }
  .flebo-header-v2 .hamburger-btn { display: inline-flex !important; margin: 0; width: 38px; height: 38px; }

  .flebo-header-v2 .header-upload .main-nav-pill {
    padding: 5px 10px;
    font-size: 10.5px;
    gap: 5px;
  }
  .flebo-header-v2 .header-upload .main-nav-pill i { font-size: 11px; }
  .flebo-header-v2 .main-nav-upload-sub { font-size: 10px; margin-top: 2px; white-space: nowrap; }
  .flebo-header-v2 .main-nav-upload-sub-sep { margin: 0 4px; }
  /* Compact brand so the upload block has room */
  .flebo-header-v2 .brand-block { gap: 2px; }
  .flebo-header-v2 .brand-logo { height: 28px; }
  .flebo-header-v2 .brand-rating { padding: 2px 5px; font-size: 10.5px; gap: 4px; }
  .flebo-header-v2 .brand-rating-stars { font-size: 8.5px; }
  .flebo-header-v2 .brand-rating-count { font-size: 10px; }

  /* Hide hero image column on mobile — show panels only */

  /* Check Your Vitals: show only 3 cards on mobile (no Thyroid) */

  /* Tabs: full-width row, equal-sized pills */

  /* Two equal-width benefit pills side by side */
}

@media (max-width: 575.98px) {
  .flebo-header-v2 .site-header-inner {
    /* flex-direction: column; */
    /* align-items: flex-start; */
    /* gap: 8px; */
    justify-content: space-between;
  }
  .flebo-header-v2 .header-upload {
    margin-left: 0;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .flebo-header-v2 .main-nav-upload {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 0;
  }
  .flebo-header-v2 .header-upload .upload-btn {
    padding: 4px 8px 4px 4px !important;
    font-size: 12px !important;
  }
}

/* ---------- POPULAR PACKAGES: horizontal scroll with arrow controls ---------- */

@media (max-width: 768px) {
  /* Stacked deck on mobile: cards layered on top of each other */
}

/* ---------- TRUST SECTION (V2) ---------- */

/* ---------- PROMO BANNER CAROUSEL ---------- */

/* ---------- TESTS BY CATEGORY: single-row horizontal scroll, spread across section width ---------- */

/* ---------- PROMO CTA SECTION (cashback + app download) ---------- */
@media (max-width: 540px) {

  /* Reserve top-right space only for the icon row */

  /* Coupon + CTA side by side */

  /* App store + Play store side by side */
}

/* ---------- REAL STORIES (customer reviews) ---------- */


/* ============================================================
   ===== Hand-written additions (not from source CSS) =========
   ============================================================ */

/* Header-scoped resets — the source CSS had universal and button resets
   under .home2-page, but those don't apply to .flebo-header-v2 since
   it lives outside the redesign-page wrapper. Replicate the FULL reset
   so heights/spacing match the mockup. */
.flebo-header-v2,
.flebo-header-v2 *,
.flebo-header-v2 *::before,
.flebo-header-v2 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.flebo-header-v2 button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}
.flebo-header-v2 a {
  text-decoration: none;
  color: inherit;
}
.flebo-header-v2 ul,
.flebo-header-v2 ol {
  list-style: none;
}
.flebo-header-v2 img {
  max-width: 100%;
  display: block;
}
.flebo-header-v2 h1,
.flebo-header-v2 h2,
.flebo-header-v2 h3,
.flebo-header-v2 h4,
.flebo-header-v2 h5,
.flebo-header-v2 h6,
.flebo-header-v2 p {
  margin: 0;
  font-weight: inherit;
  font-size: inherit;
}

/* Profile dropdown (logged-in branch — selectors don't exist in the
   source mockup, so style here.) */
.flebo-header-v2 .top-bar-profile {
  position: relative;
  margin-left: auto;
}
.flebo-header-v2 .top-bar-profile-trigger {
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}
.flebo-header-v2 .top-bar-profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(27, 42, 91, 0.18);
  padding: 8px 0;
  z-index: 120;
}
.flebo-header-v2 .top-bar-profile-menu li {
  list-style: none;
}
.flebo-header-v2 .top-bar-profile-menu a,
.flebo-header-v2 .top-bar-profile-menu button {
  display: block;
  width: 100%;
  padding: 7px 16px;
  color: #1B2A5B;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
}
.flebo-header-v2 .top-bar-profile-menu a:hover,
.flebo-header-v2 .top-bar-profile-menu button:hover {
  background: #F0F4FB;
}

/* Force UploadReports' desktop variant (.nav-item.d-none.d-lg-block) to be
   visible at every viewport — the component's Bootstrap-class gating is
   too aggressive (≥992px only); the redesign expects it at ≥768px too. */
.flebo-header-v2 .header-upload .nav-item {
  display: block !important;
  list-style: none;
  padding: 0;
}

/* Style the UploadReports component's button to match the redesign's
   .main-nav-pill exactly: white background, red (--accent) border + text,
   pill shape, hover inverts. The cloud GIF is already red so it sits on
   the white background naturally. */
.flebo-header-v2 .header-upload .upload-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--accent, #D33535) !important;
  border: 1.5px solid var(--accent, #D33535) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: background 0.2s, color 0.2s !important;
  box-shadow: none !important;
}
.flebo-header-v2 .header-upload .upload-btn:hover {
  background: var(--accent, #D33535) !important;
  color: #fff !important;
}
.flebo-header-v2 .header-upload .upload-btn .upload-btn-img,
.flebo-header-v2 .header-upload .upload-btn img {
  width: 20px !important;
  height: 20px !important;
}
.flebo-header-v2 .header-upload .upload-btn .icon-white {
  display: inline-flex !important;
  align-items: center !important;
}
/* Hover state on the icon image — invert via filter so it stays visible */
.flebo-header-v2 .header-upload .upload-btn:hover img {
  filter: brightness(0) invert(1) !important;
}
/* The "Upload Report" text span uses font-size-14; the pill is already
   font-size 14 — keep the span inline. */
.flebo-header-v2 .header-upload .upload-btn .font-size-14 {
  font-size: inherit !important;
}

/* On /home2 only, hide the floating WhatsApp widget — it overlaps the
   redesign's fixed bottom navigation. */
html.home2-route .wa-widget-send-button,
html.home2-route [class*='whatsapp'] {
  display: none !important;
}

/* Mobile (<=768px): hide the inline horizontal main-nav (Tests / Packages /
   Reports / Health Trend Graph / BMI Calculator). On mobile these items
   are accessed via the hamburger sidebar. */
@media (max-width: 768px) {
  .flebo-header-v2 .main-nav {
    display: none !important;
  }
}

/* Top-bar location chip: collapse line-height so the chip doesn't add
   extra vertical space to the top-bar (which made the bar look too tall). */
.flebo-header-v2 .top-bar-location {
  line-height: 1 !important;
}