/* ==========================================================================
   HealthDex 369 — Homepage Design System
   One cohesive, premium, conversion-focused UI layer.
   Brand: emerald green. Type: Inter. Icons: Lucide.
   Scoped to homepage section classes so shared pages stay safe.
   ========================================================================== */

:root {
  /* Brand — emerald scale */
  --hd-green-50: #ecfdf5;
  --hd-green-100: #d1fae5;
  --hd-green-200: #a7f3d0;
  --hd-green-300: #6ee7b7;
  --hd-green-400: #34d399;
  --hd-green-500: #10b981;
  --hd-green-600: #059669;
  --hd-green-700: #047857;
  --hd-green-800: #065f46;

  --hd-brand: #059669;
  --hd-brand-strong: #047857;
  --hd-brand-soft: #10b981;

  --hd-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --hd-gradient-hover: linear-gradient(135deg, #059669 0%, #047857 100%);
  --hd-gradient-soft: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);

  /* Ink / text */
  --hd-ink-900: #0b1a13;
  --hd-ink-800: #0f172a;
  --hd-ink-700: #334155;
  --hd-ink-600: #475569;
  --hd-ink-500: #64748b;
  --hd-ink-400: #94a3b8;

  /* Surfaces & borders */
  --hd-surface: #ffffff;
  --hd-surface-2: #f7faf9;
  --hd-surface-3: #f1f6f4;
  --hd-surface-green: #f0fdf4;
  --hd-border: #e7edf1;
  --hd-border-2: #dbe4ea;
  --hd-border-green: rgba(16, 185, 129, .18);

  /* Shadows — soft, layered, premium */
  --hd-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
  --hd-shadow-sm: 0 2px 10px rgba(15, 23, 42, .06);
  --hd-shadow-md: 0 12px 34px -14px rgba(15, 23, 42, .20);
  --hd-shadow-lg: 0 34px 64px -24px rgba(15, 23, 42, .28);
  --hd-shadow-green: 0 16px 34px -12px rgba(5, 150, 105, .42);
  --hd-shadow-green-sm: 0 8px 20px -8px rgba(5, 150, 105, .40);

  /* Radii */
  --hd-r-xs: 10px;
  --hd-r-sm: 14px;
  --hd-r-md: 18px;
  --hd-r-lg: 22px;
  --hd-r-xl: 28px;
  --hd-r-pill: 999px;

  /* Layout */
  --hd-container: 1460px;
  --hd-section-py: clamp(2.5rem, 5vw, 3.75rem);
  /* section top: 60px desktop */
  --hd-section-pb: clamp(2.25rem, 4.5vw, 3.125rem);
  /* section bottom: 50px desktop */

  /* Type */
  --hd-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Motion */
  --hd-ease: cubic-bezier(.4, 0, .2, 1);
  --hd-ease-out: cubic-bezier(.16, 1, .3, 1);
  --hd-t: .28s;
}

/* --------------------------------------------------------------------------
   Base — applied to homepage sections only (kept off shared pages via scope)
   -------------------------------------------------------------------------- */
.luxury-hero,
.packages-premium-section,
.booking-process-section,
.tests-premium-section,
.app-download-section,
.why-choose-section,
.process-style-two,
.testimonial-style-two,
.categories-premium-section,
.offers-premium-section,
.labs-premium-section,
.faq-premium-section,
.vision-premium-section,
.blog-premium-section {
  font-family: var(--hd-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.luxury-hero *,
.packages-premium-section *,
.booking-process-section *,
.tests-premium-section *,
.app-download-section *,
.why-choose-section *,
.process-style-two *,
.testimonial-style-two *,
.blog-premium-section * {
  box-sizing: border-box;
}

/* Prevent horizontal overflow: images fit, and grid/flex children may shrink
   below their intrinsic (min-content) size instead of forcing tracks wider. */
.luxury-hero img,
.app-download-section img,
.blog-premium-section img,
.testimonial-style-two img,
.process-style-two img,
.premium-package-card img,
.premium-test-card img {
  max-width: 100%;
  height: auto;
}

.luxury-hero-grid>*,
.app-content-grid>*,
.blog-grid-wrapper>*,
.packages-section-header>*,
.tests-section-header>*,
.blog-section-header>* {
  min-width: 0;
}

/* Consistent container width for homepage sections */
.luxury-hero>.container,
.packages-premium-section>.auto-container,
.booking-process-section>.container,
.tests-premium-section>.auto-container,
.app-download-section>.auto-container,
.why-choose-section>.auto-container,
.process-style-two>.auto-container,
.testimonial-style-two>.auto-container,
.categories-premium-section>.auto-container,
.offers-premium-section>.auto-container,
.labs-premium-section>.auto-container,
.faq-premium-section>.auto-container,
.vision-premium-section>.auto-container,
.blog-premium-section>.auto-container,
.blog-hero-section>.auto-container,
.blog-listing-section>.auto-container,
.blog-cta-section>.auto-container,
.about-hero-section>.auto-container,
.about-main-section>.auto-container {
  max-width: var(--hd-container);
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3.5vw, 2.5rem);
}

/* Vertical rhythm */
.packages-premium-section,
.booking-process-section,
.tests-premium-section,
.app-download-section,
.why-choose-section,
.process-style-two,
.testimonial-style-two,
.categories-premium-section,
.offers-premium-section,
.labs-premium-section,
.faq-premium-section,
.vision-premium-section,
.blog-premium-section,
.contact-main-section,
.blog-listing-section,
.blog-cta-section,
.about-main-section {
  padding-block: var(--hd-section-py) var(--hd-section-pb);
  position: relative;
}

.packages-premium-section {
  background: var(--hd-surface);
}

.tests-premium-section {
  background: var(--hd-surface-2);
}

.booking-process-section {
  background: var(--hd-surface);
}

/* Icon sizing — Lucide replaces <i data-lucide> with <svg class="lucide ...">.
   Size to inherited font-size; custom classes on the <i> are copied to the svg. */
i[data-lucide] {
  display: inline-flex;
  width: 1.05em;
  height: 1.05em;
}

svg.lucide {
  width: 1.05em;
  height: 1.05em;
  stroke-width: 2;
  vertical-align: -0.14em;
  flex-shrink: 0;
}

/* ==========================================================================
   SHARED PRIMITIVES (design system)
   ========================================================================== */

/* --- Eyebrow badge --- */
.packages-section-badge,
.tests-section-badge,
.booking-section-badge,
.app-section-badge,
.why-section-badge,
.categories-section-badge,
.offers-section-badge,
.labs-section-badge,
.faq-section-badge,
.vision-section-badge,
.blog-section-badge,
.contact-section-badge,
.about-section-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .95rem;
  background: var(--hd-surface-green);
  border: 1px solid var(--hd-border-green);
  border-radius: var(--hd-r-pill);
  color: var(--hd-brand-strong);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: 1.15rem;
}

.packages-section-badge-icon,
.tests-section-badge-icon,
.booking-section-badge-icon,
.app-section-badge-icon,
.why-section-badge-icon,
.categories-section-badge-icon,
.offers-section-badge-icon,
.labs-section-badge-icon,
.faq-section-badge-icon,
.vision-section-badge-icon,
.blog-section-badge-icon,
.contact-section-badge-icon,
.about-section-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  font-size: .72rem;
  color: #fff;
  background: var(--hd-gradient);
  border-radius: var(--hd-r-pill);
}

/* --- Section titles + descriptions --- */
.packages-section-title,
.tests-section-title,
.booking-section-title,
.app-section-title,
.why-section-title,
.categories-section-title,
.offers-section-title,
.labs-section-title,
.faq-section-title,
.vision-section-title,
.blog-section-title,
.contact-section-title,
.about-section-title {
  font-family: var(--hd-font);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--hd-ink-900);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  margin: 0 0 .7rem;
}

.packages-section-description,
.tests-section-description,
.booking-section-description,
.app-section-description,
.why-section-description,
.categories-section-description,
.offers-section-description,
.labs-section-description,
.faq-section-description,
.vision-section-description,
.blog-section-description,
.contact-section-description,
.about-section-description {
  color: var(--hd-ink-500);
  font-size: clamp(.98rem, 1.3vw, 1.075rem);
  line-height: 1.6;
  font-weight: 400;
  margin: 0;
  max-width: 46ch;
}

/* --- Section headers (title left, action right) --- */
.packages-section-header,
.tests-section-header,
.categories-section-header,
.offers-section-header,
.labs-section-header,
.faq-section-header,
.vision-section-header,
.blog-section-header,
.booking-section-header,
.why-section-header,
.contact-section-header,
.about-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  flex-wrap: wrap;
  text-align: left;
  margin-bottom: 1.5rem;
  /* heading → cards: 24px */
}

/* --- Button system --- */
.premium-btn,
.packages-view-all-btn,
.tests-view-all-btn,
.categories-view-all-btn,
.blog-view-all-btn,
.booking-cta-button,
.blog-read-more-btn,
.blog-card-link,
.luxury-hero-search-btn,
.luxury-lab-cta,
.footer-btn,
.app-store-btn {
  font-family: var(--hd-font);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--hd-t) var(--hd-ease-out),
    box-shadow var(--hd-t) var(--hd-ease),
    background var(--hd-t) var(--hd-ease),
    color var(--hd-t) var(--hd-ease),
    border-color var(--hd-t) var(--hd-ease);
}

.premium-btn svg,
.packages-view-all-btn svg,
.tests-view-all-btn svg,
.categories-view-all-btn svg,
.blog-view-all-btn svg,
.booking-cta-button svg,
.blog-read-more-btn svg,
.blog-card-link svg {
  width: 1.05em;
  height: 1.05em;
  transition: transform var(--hd-t) var(--hd-ease-out);
}

/* Primary — green gradient, arrow nudges on hover */
.premium-btn-primary,
.booking-cta-button,
.luxury-hero-search-btn,
.luxury-lab-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--hd-r-pill);
  background: var(--hd-gradient);
  color: #fff !important;
  box-shadow: var(--hd-shadow-green-sm);
  font-size: .95rem;
}

.premium-btn-primary:hover,
.booking-cta-button:hover,
.luxury-hero-search-btn:hover,
.luxury-lab-cta:hover {
  background: var(--hd-gradient-hover);
  box-shadow: var(--hd-shadow-green);
  transform: translateY(-2px);
  color: #fff !important;
}

.premium-btn-primary:hover svg,
.booking-cta-button:hover svg {
  transform: translateX(3px);
}

/* Secondary — white, green border; hover swaps the background itself so the
   label (a bare text node) can never be painted over and always stays readable */
.premium-btn-secondary,
.packages-view-all-btn,
.tests-view-all-btn,
.categories-view-all-btn,
.blog-view-all-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.35rem;
  border-radius: var(--hd-r-pill);
  border: 1.5px solid var(--hd-border-green);
  background: #fff;
  color: var(--hd-brand-strong) !important;
  font-size: .95rem;
}

.premium-btn-secondary:hover,
.packages-view-all-btn:hover,
.tests-view-all-btn:hover,
.categories-view-all-btn:hover,
.blog-view-all-btn:hover {
  background: var(--hd-gradient);
  color: #fff !important;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: var(--hd-shadow-green-sm);
}

.packages-view-all-btn:hover svg,
.tests-view-all-btn:hover svg,
.categories-view-all-btn:hover svg,
.blog-view-all-btn:hover svg {
  transform: translateX(3px);
}

/* --- Swiper nav arrows --- */
.packages-swiper-btn,
.tests-swiper-btn,
.categories-swiper-btn,
.custom-swiper-nav button {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--hd-r-pill);
  border: 1.5px solid var(--hd-border-2);
  background: #fff;
  color: var(--hd-ink-700);
  cursor: pointer;
  transition: all var(--hd-t) var(--hd-ease);
  box-shadow: var(--hd-shadow-xs);
}

.packages-swiper-btn:hover,
.tests-swiper-btn:hover,
.categories-swiper-btn:hover,
.custom-swiper-nav button:hover {
  background: var(--hd-gradient);
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--hd-shadow-green-sm);
}

.packages-swiper-nav,
.tests-swiper-nav,
.categories-swiper-nav,
.custom-swiper-nav {
  display: inline-flex;
  gap: .6rem;
}

.packages-action-group,
.tests-action-group,
.categories-action-group {
  display: flex;
  align-items: center;
  gap: .75rem 1rem;
  flex-wrap: wrap;
}

.swiper-button-lock {
  display: none !important;
}

/* --- Swiper pagination bullets --- */
.packages-premium-section .swiper-pagination-bullet,
.tests-premium-section .swiper-pagination-bullet,
.process-style-two .swiper-pagination-bullet,
.testimonial-style-two .swiper-pagination-bullet,
.categories-premium-section .swiper-pagination-bullet,
.offers-premium-section .swiper-pagination-bullet,
.labs-premium-section .swiper-pagination-bullet {
  background: var(--hd-green-200);
  opacity: 1;
  width: 8px;
  height: 8px;
  transition: all var(--hd-t) var(--hd-ease);
}

.packages-premium-section .swiper-pagination-bullet-active,
.tests-premium-section .swiper-pagination-bullet-active,
.process-style-two .swiper-pagination-bullet-active,
.testimonial-style-two .swiper-pagination-bullet-active,
.categories-premium-section .swiper-pagination-bullet-active,
.offers-premium-section .swiper-pagination-bullet-active,
.labs-premium-section .swiper-pagination-bullet-active {
  background: var(--hd-brand);
  width: 22px;
  border-radius: var(--hd-r-pill);
}

.swiper-pagination {
  margin-top: 1.25rem;
  position: relative;
}

/* Equal-height slides */
.packageSwiper .swiper-slide,
.testSwiper .swiper-slide,
.categorySwiper .swiper-slide,
.labSwiper .swiper-slide {
  height: auto;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.luxury-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  font-family: var(--hd-font);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--hd-border);
  transition: box-shadow var(--hd-t) var(--hd-ease), background var(--hd-t) var(--hd-ease);
}

.luxury-header.scrolled {
  box-shadow: 0 10px 30px -18px rgba(15, 23, 42, .35);
  background: rgba(255, 255, 255, .96);
}

.luxury-header .container {
  max-width: var(--hd-container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3.5vw, 2.5rem);
}

.luxury-top-bar {
  background: linear-gradient(135deg, var(--hd-green-800), var(--hd-brand-strong));
  color: #eafff6;
}

.luxury-top-bar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  font-size: .82rem;
}

.luxury-top-bar-text {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.luxury-top-bar-text span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  opacity: .95;
}

.luxury-top-bar-text span svg,
.luxury-top-bar-text span i {
  color: var(--hd-green-300);
  font-size: .82rem;
}

.luxury-main-header {
  padding: .55rem 0;
}

.luxury-header-grid {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.luxury-logo {
  flex: 0 0 auto;
}

.luxury-logo img {
  max-height: 52px;
  width: auto;
  display: block;
}

.luxury-nav {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-inline: auto;
}

.luxury-nav-link {
  position: relative;
  padding: .55rem .9rem;
  border-radius: var(--hd-r-sm);
  color: var(--hd-ink-700);
  font-weight: 600;
  font-size: .93rem;
  text-decoration: none;
  transition: color var(--hd-t) var(--hd-ease), background var(--hd-t) var(--hd-ease);
}

.luxury-nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--hd-gradient);
  transform: translateX(-50%);
  transition: width var(--hd-t) var(--hd-ease-out);
}

.luxury-nav-link:hover {
  color: var(--hd-brand-strong);
  background: var(--hd-surface-green);
}

.luxury-nav-link.active {
  color: var(--hd-brand-strong);
}

.luxury-nav-link.active::after {
  width: 22px;
}

.luxury-header-actions .rightpanel {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.luxury-header-action {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .7rem;
  border-radius: var(--hd-r-sm);
  color: var(--hd-ink-700);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
  transition: color var(--hd-t) var(--hd-ease), background var(--hd-t) var(--hd-ease);
}

.luxury-header-action svg,
.luxury-header-action i {
  font-size: 1.15rem;
  color: var(--hd-brand);
}

.luxury-header-action:hover {
  color: var(--hd-brand-strong);
  background: var(--hd-surface-green);
}

.luxury-header-cart {
  position: relative;
}

.luxury-cart-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  border-radius: var(--hd-r-pill);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 3px 8px rgba(217, 119, 6, .4);
}

.luxury-header-action.dropdown-toggle::after {
  border-top-color: currentColor;
}

.luxury-header .dropdown-menu {
  margin-top: .5rem;
  border-radius: var(--hd-r-md) !important;
  box-shadow: var(--hd-shadow-md) !important;
  border: 1px solid var(--hd-border) !important;
}

.luxury-header .dropdown-item {
  border-radius: var(--hd-r-xs);
  font-weight: 600;
  color: var(--hd-ink-700);
}

.luxury-header .dropdown-item:hover {
  background: var(--hd-surface-green);
  color: var(--hd-brand-strong);
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1100;
  visibility: hidden;
}

.mobile-menu.active {
  visibility: visible;
}

.mobile-menu .menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 26, 19, .5);
  opacity: 0;
  transition: opacity var(--hd-t) var(--hd-ease);
}

.mobile-menu.active .menu-backdrop {
  opacity: 1;
}

.mobile-menu .menu-box {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(340px, 86vw);
  background: #fff;
  transform: translateX(100%);
  transition: transform var(--hd-t) var(--hd-ease-out);
  box-shadow: var(--hd-shadow-lg);
  overflow-y: auto;
}

.mobile-menu.active .menu-box {
  transform: translateX(0);
}

.mobile-menu .close-btn {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--hd-r-pill);
  background: var(--hd-surface-green);
  color: var(--hd-brand-strong);
  cursor: pointer;
}

.mobile-menu .menu-outer ul li a {
  color: var(--hd-ink-800) !important;
  transition: color var(--hd-t) var(--hd-ease);
}

.mobile-menu .menu-outer ul li a:hover {
  color: var(--hd-brand) !important;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.luxury-hero {
  position: relative;
  padding: clamp(2rem, 4vw, 3.75rem) 0 clamp(2.5rem, 4.5vw, 4.25rem);
  background:
    radial-gradient(1200px 560px at 92% -10%, rgba(16, 185, 129, .16), transparent 60%),
    radial-gradient(820px 520px at 2% 112%, rgba(5, 150, 105, .10), transparent 55%),
    linear-gradient(180deg, var(--hd-surface-green) 0%, #ffffff 60%);
  overflow: hidden;
}

/* Ambient background decor */
.luxury-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.luxury-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(6px);
}

.luxury-hero-blob-1 {
  width: 460px;
  height: 460px;
  top: -170px;
  right: -130px;
  background: radial-gradient(circle, rgba(16, 185, 129, .22), transparent 68%);
}

.luxury-hero-blob-2 {
  width: 380px;
  height: 380px;
  bottom: -180px;
  left: -140px;
  background: radial-gradient(circle, rgba(5, 150, 105, .16), transparent 70%);
}

.luxury-hero-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(5, 150, 105, .11) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(1000px 620px at 72% 26%, #000, transparent 72%);
  mask-image: radial-gradient(1000px 620px at 72% 26%, #000, transparent 72%);
  opacity: .55;
}

.luxury-hero>.container {
  position: relative;
  z-index: 1;
}

.luxury-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 3.75rem);
}

/* Left column entrance (staggered fade-up, CSS only) */
.luxury-hero-content {
  position: relative;
}

.luxury-hero-content>* {
  animation: hd-fade-up .7s var(--hd-ease-out) both;
}

.luxury-hero-content>*:nth-child(1) {
  animation-delay: .02s;
}

.luxury-hero-content>*:nth-child(2) {
  animation-delay: .09s;
}

.luxury-hero-content>*:nth-child(3) {
  animation-delay: .16s;
}

.luxury-hero-content>*:nth-child(4) {
  animation-delay: .23s;
}

.luxury-hero-content>*:nth-child(5) {
  animation-delay: .30s;
}

.luxury-hero-content>*:nth-child(6) {
  animation-delay: .37s;
}

.luxury-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem .5rem .8rem;
  background: #fff;
  border: 1px solid var(--hd-border-green);
  border-radius: var(--hd-r-pill);
  color: var(--hd-brand-strong);
  font-weight: 600;
  font-size: .84rem;
  box-shadow: var(--hd-shadow-xs);
}

.luxury-hero-badge svg {
  color: var(--hd-brand);
}

.luxury-hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hd-brand);
  animation: hd-pulse 2.2s ease-out infinite;
}

.luxury-hero-title {
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.03;
  color: var(--hd-ink-900);
  font-size: clamp(2.6rem, 5.6vw, 4.25rem);
  margin: 1.1rem 0 1rem;
}

.luxury-hero-title-accent {
  background: var(--hd-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.luxury-hero-subtitle {
  color: var(--hd-ink-600);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.6;
  max-width: 44ch;
  margin: 0 0 1.5rem;
}

/* Premium 60px pill search */
.luxury-hero-search-form {
  margin: 0;
}

.luxury-hero-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 60px;
  background: #fff;
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-pill);
  padding: 6px 6px 6px 20px;
  box-shadow: 0 20px 44px -22px rgba(5, 150, 105, .38), var(--hd-shadow-sm);
  max-width: 560px;
  transition: box-shadow var(--hd-t) var(--hd-ease), border-color var(--hd-t) var(--hd-ease);
}

.luxury-hero-search:focus-within {
  border-color: var(--hd-border-green);
  box-shadow: 0 24px 50px -20px rgba(5, 150, 105, .48);
}

.luxury-hero-search-icon {
  display: inline-flex;
  color: var(--hd-brand);
  flex: 0 0 auto;
}

.luxury-hero-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--hd-font);
  font-size: 1rem;
  color: var(--hd-ink-800);
  padding: 0 .25rem;
  min-width: 0;
  height: 100%;
}

.luxury-hero-search-input::placeholder {
  color: var(--hd-ink-400);
}

.luxury-hero-search-btn {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 1.5rem;
  font-size: .98rem;
}

.luxury-hero-search-btn svg {
  width: 1.05em;
  height: 1.05em;
  transition: transform var(--hd-t) var(--hd-ease-out);
}

.luxury-hero-search-btn:hover svg {
  transform: translateX(3px);
}

/* Feature cards (Upload / Download) */
.luxury-hero-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.35rem 0;
}

.luxury-hero-action-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.05rem 1.15rem;
  background: #fff;
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-lg);
  text-decoration: none;
  box-shadow: var(--hd-shadow-sm);
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), border-color var(--hd-t) var(--hd-ease);
}

.luxury-hero-action-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--hd-shadow-md);
  border-color: var(--hd-border-green);
}

.luxury-hero-action-icon {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  border-radius: var(--hd-r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-gradient-soft);
  color: var(--hd-brand-strong);
  font-size: 1.3rem;
  transition: background var(--hd-t) var(--hd-ease), color var(--hd-t) var(--hd-ease);
}

.luxury-hero-action-card:hover .luxury-hero-action-icon {
  background: var(--hd-gradient);
  color: #fff;
}

.luxury-hero-action-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.luxury-hero-action-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--hd-ink-800);
  line-height: 1.2;
}

.luxury-hero-action-desc {
  font-size: .82rem;
  color: var(--hd-ink-500);
  margin-top: .12rem;
}

.luxury-hero-action-arrow {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--hd-ink-400);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: all var(--hd-t) var(--hd-ease);
}

.luxury-hero-action-card:hover .luxury-hero-action-arrow {
  opacity: 1;
  transform: none;
  color: var(--hd-brand);
}

/* Right visual — framed image + floating chips */
.luxury-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  animation: hd-fade-up .8s var(--hd-ease-out) .15s both;
}

.luxury-hero-visual-frame {
  position: relative;
  width: 100%;
  max-width: 480px;
  border-radius: var(--hd-r-xl);
  background: linear-gradient(160deg, var(--hd-green-100) 0%, #ffffff 62%);
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 44px 84px -32px rgba(5, 150, 105, .45), 0 10px 26px -14px rgba(15, 23, 42, .18);
  animation: hd-float 6s ease-in-out infinite;
}

.luxury-hero-main-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--hd-r-xl) - 10px);
}

.luxury-hero-chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .85rem;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-md);
  box-shadow: var(--hd-shadow-md);
}

.luxury-hero-chip-1 {
  top: 7%;
  left: -5%;
  animation: hd-float 5s ease-in-out infinite;
}

.luxury-hero-chip-2 {
  bottom: 8%;
  right: -4%;
  animation: hd-float 5.6s ease-in-out .5s infinite;
}

.luxury-hero-chip-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: var(--hd-r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-gradient);
  color: #fff;
  font-size: 1.05rem;
}

.luxury-hero-chip-body {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.luxury-hero-chip-body strong {
  font-size: .96rem;
  font-weight: 800;
  color: var(--hd-ink-900);
}

.luxury-hero-chip-body span {
  font-size: .74rem;
  color: var(--hd-ink-500);
}

@keyframes hd-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hd-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(5, 150, 105, .5);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(5, 150, 105, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0);
  }
}

@keyframes hd-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

/* ==========================================================================
   PRODUCT / TEST CARDS  (packages + tests share the system)
   ========================================================================== */
.premium-package-card,
.premium-test-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-lg);
  box-shadow: var(--hd-shadow-sm);
  overflow: hidden;
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), border-color var(--hd-t) var(--hd-ease);
}

.premium-package-card::before,
.premium-test-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--hd-gradient);
  opacity: 0;
  transition: opacity var(--hd-t) var(--hd-ease);
}

.premium-package-card:hover,
.premium-test-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hd-shadow-lg);
  border-color: var(--hd-border-green);
}

.premium-package-card:hover::before,
.premium-test-card:hover::before {
  opacity: 1;
}

.premium-package-discount,
.premium-test-discount {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .6rem;
  background: var(--hd-gradient);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  border-radius: var(--hd-r-pill);
  box-shadow: var(--hd-shadow-green-sm);
}

.premium-package-discount svg,
.premium-test-discount svg {
  width: .85em;
  height: .85em;
}

.premium-package-header,
.premium-test-header {
  padding: 1.5rem 1.5rem 1rem;
}

.premium-package-icon-wrapper,
.premium-test-icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: var(--hd-r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-gradient-soft);
  color: var(--hd-brand-strong);
  font-size: 1.3rem;
  margin-bottom: .9rem;
}

.premium-package-name,
.premium-test-name {
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--hd-ink-900);
  line-height: 1.3;
  margin: 0 0 .55rem;
  letter-spacing: -.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
}

.premium-package-params,
.premium-test-params {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--hd-brand-strong);
  background: var(--hd-surface-green);
  padding: .3rem .7rem;
  border-radius: var(--hd-r-pill);
}

.premium-package-params svg,
.premium-test-params svg {
  width: .95em;
  height: .95em;
}

.premium-package-body,
.premium-test-body {
  padding: 0 1.5rem 1.1rem;
  flex: 1 1 auto;
}

.premium-package-features-title,
.premium-test-features-title {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--hd-ink-400);
  margin-bottom: .65rem;
}

.premium-features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}

.premium-feature-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .88rem;
  color: var(--hd-ink-600);
}

.premium-feature-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: var(--hd-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-surface-green);
  color: var(--hd-brand);
}

.premium-feature-icon svg {
  width: 13px;
  height: 13px;
}

.premium-feature-more {
  color: var(--hd-brand-soft);
  font-weight: 500;
}

.premium-feature-more .premium-feature-icon {
  background: var(--hd-gradient-soft);
}

.premium-package-pricing,
.premium-test-pricing {
  padding: 1.15rem 1.5rem 1.4rem;
  margin-top: auto;
  border-top: 1px solid var(--hd-border);
}

.premium-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .9rem;
}

.premium-price-label {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--hd-ink-400);
  margin-bottom: .15rem;
}

.premium-price-values {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
}

.premium-price-original {
  font-size: .95rem;
  color: var(--hd-ink-400);
  text-decoration: line-through;
}

.premium-price-current {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--hd-ink-900);
  letter-spacing: -.02em;
}

.premium-price-current span {
  font-size: 1rem;
  font-weight: 700;
}

.premium-savings-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .74rem;
  font-weight: 700;
  color: var(--hd-brand-strong);
  background: var(--hd-surface-green);
  padding: .35rem .6rem;
  border-radius: var(--hd-r-pill);
  white-space: nowrap;
}

.premium-savings-badge svg {
  width: .85em;
  height: .85em;
}

.premium-package-actions,
.premium-test-actions {
  display: flex;
  gap: .6rem;
}

.premium-package-actions .premium-btn,
.premium-test-actions .premium-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: .72rem .5rem;
  font-size: .88rem;
  white-space: nowrap;
}

.premium-package-actions .premium-btn svg,
.premium-test-actions .premium-btn svg {
  flex: 0 0 auto;
}

/* ==========================================================================
   BOOKING PROCESS
   ========================================================================== */
.process-cards-wrapper {
  position: relative;
}

.process-connector {
  display: none;
}

.process-cards-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.1rem;
}

.process-card {
  position: relative;
  text-align: center;
  padding: 2.25rem 1.15rem 1.5rem;
  background: #fff;
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-lg);
  box-shadow: var(--hd-shadow-sm);
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), border-color var(--hd-t) var(--hd-ease);
}

.process-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hd-shadow-md);
  border-color: var(--hd-border-green);
}

.process-step-number {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-radius: var(--hd-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-gradient);
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  box-shadow: var(--hd-shadow-green-sm);
  border: 3px solid #fff;
}

.process-icon-wrapper {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: var(--hd-r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-surface-green);
  color: var(--hd-brand-strong);
  font-size: 1.5rem;
  transition: all var(--hd-t) var(--hd-ease);
}

.process-card:hover .process-icon-wrapper {
  background: var(--hd-gradient);
  color: #fff;
}

.process-card-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--hd-ink-900);
  margin: 0 0 .4rem;
}

.process-card-description {
  font-size: .85rem;
  color: var(--hd-ink-500);
  line-height: 1.5;
  margin: 0;
}

.booking-cta-section {
  text-align: center;
  margin-top: clamp(2rem, 3.5vw, 3rem);
}

.booking-cta-button {
  padding: .9rem 1.75rem;
  font-size: 1rem;
}

.booking-trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem 1.5rem;
  margin-top: 1.5rem;
}

.trust-badge-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--hd-ink-600);
}

.trust-badge-icon {
  width: 20px;
  height: 20px;
  border-radius: var(--hd-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-gradient);
  color: #fff;
  font-size: .7rem;
}

.trust-badge-icon svg {
  width: 12px;
  height: 12px;
}

/* ==========================================================================
   DOWNLOAD APP
   ========================================================================== */
.app-download-section {
  background: var(--hd-surface-2);
}

.app-gradient-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--hd-r-xl);
  background: linear-gradient(135deg, var(--hd-green-800) 0%, var(--hd-brand-strong) 55%, var(--hd-brand) 100%);
  padding: clamp(2rem, 4vw, 3.5rem);
  box-shadow: var(--hd-shadow-lg);
}

.app-medical-pattern {
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .6) 1px, transparent 1.6px);
  background-size: 26px 26px;
}

.app-floating-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  filter: blur(2px);
}

.app-floating-shape-1 {
  width: 220px;
  height: 220px;
  top: -60px;
  right: -40px;
}

.app-floating-shape-2 {
  width: 150px;
  height: 150px;
  bottom: -50px;
  left: 10%;
}

.app-floating-shape-3 {
  width: 90px;
  height: 90px;
  top: 30%;
  left: -30px;
}

.app-content-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.app-phone-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
}

.app-floating-icon {
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: var(--hd-r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 1.05rem;
  animation: hd-float 5s ease-in-out infinite;
}

.app-floating-icon-1 {
  top: 6%;
  left: 8%;
}

.app-floating-icon-2 {
  top: 22%;
  right: 6%;
  animation-delay: .4s;
}

.app-floating-icon-3 {
  bottom: 24%;
  left: 2%;
  animation-delay: .8s;
}

.app-floating-icon-4 {
  bottom: 8%;
  right: 12%;
  animation-delay: 1.2s;
}

.app-floating-icon-5 {
  top: 50%;
  right: -2%;
  animation-delay: 1.6s;
}

.app-phone-mockup {
  position: relative;
  width: 250px;
  max-width: 74vw;
  background: #0b1a13;
  border-radius: 40px;
  padding: 12px;
  box-shadow: 0 40px 70px -20px rgba(0, 0, 0, .5);
}

.app-phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 20px;
  background: #0b1a13;
  border-radius: var(--hd-r-pill);
  z-index: 2;
}

.app-phone-screen {
  background: linear-gradient(180deg, var(--hd-surface-green), #fff);
  border-radius: 30px;
  overflow: hidden;
  min-height: 460px;
}

.app-phone-content {
  padding: 2.5rem 1.25rem 1.5rem;
  text-align: center;
}

.app-phone-logo {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: var(--hd-r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-gradient);
  color: #fff;
  font-size: 1.5rem;
}

.app-phone-title {
  font-weight: 800;
  color: var(--hd-ink-900);
  font-size: 1.15rem;
}

.app-phone-subtitle {
  color: var(--hd-ink-500);
  font-size: .82rem;
  margin-bottom: 1.25rem;
}

.app-phone-cards {
  display: grid;
  gap: .7rem;
  text-align: left;
}

.app-phone-card {
  display: flex;
  align-items: center;
  gap: .7rem;
  background: #fff;
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-sm);
  padding: .7rem .8rem;
  box-shadow: var(--hd-shadow-xs);
}

.app-phone-card-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--hd-r-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-surface-green);
  color: var(--hd-brand-strong);
}

.app-phone-card-title {
  font-weight: 700;
  font-size: .85rem;
  color: var(--hd-ink-800);
}

.app-phone-card-desc {
  font-size: .74rem;
  color: var(--hd-ink-500);
}

.app-content-wrapper {
  color: #eafff6;
}

.app-section-badge {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
}

.app-section-badge-icon {
  background: #fff;
  color: var(--hd-brand-strong);
}

.app-section-title {
  color: #fff;
}

.app-section-description {
  color: rgba(255, 255, 255, .85);
  max-width: 52ch;
}

.app-features-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem 1.25rem;
  margin: 1.5rem 0;
}

.app-feature-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .92rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .92);
}

.app-feature-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: var(--hd-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: .72rem;
}

.app-feature-icon svg {
  width: 13px;
  height: 13px;
}

.app-buttons-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-bottom: 1.5rem;
}

.app-store-btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem 1.25rem;
  background: #0b1a13;
  color: #fff !important;
  border-radius: var(--hd-r-md);
  border: 1px solid rgba(255, 255, 255, .14);
  text-decoration: none;
}

.app-store-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--hd-shadow-md);
  background: #08130d;
}

.app-store-btn-icon {
  font-size: 1.6rem;
}

.app-store-btn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}

.app-store-btn-label {
  font-size: .68rem;
  opacity: .8;
}

.app-store-btn-name {
  font-size: .98rem;
  font-weight: 700;
}

.app-qr-wrapper {
  margin-bottom: 1.5rem;
}

.app-qr-card {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--hd-r-md);
  padding: .7rem .9rem;
}

.app-qr-image img {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: var(--hd-r-xs);
  background: #fff;
  padding: 4px;
}

.app-qr-label {
  font-weight: 700;
  color: #fff;
  font-size: .9rem;
}

.app-qr-desc {
  font-size: .76rem;
  color: rgba(255, 255, 255, .8);
}

.app-stats-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.app-rating {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.app-rating-stars {
  color: #fbbf24;
  display: inline-flex;
  gap: .1rem;
}

.app-rating-value,
.app-stat-value {
  font-weight: 800;
  color: #fff;
}

.app-stat-item {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.app-stat-value {
  font-size: 1.05rem;
}

.app-stat-label {
  font-size: .78rem;
  color: rgba(255, 255, 255, .8);
}

/* ==========================================================================
   WHY CHOOSE US
   ========================================================================== */
.why-choose-section {
  background: var(--hd-surface-2);
  overflow: hidden;
}

.why-floating-shape {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, .14), transparent 70%);
  z-index: 0;
}

.why-floating-shape-1 {
  width: 340px;
  height: 340px;
  top: -80px;
  right: -60px;
}

.why-floating-shape-2 {
  width: 240px;
  height: 240px;
  bottom: -60px;
  left: -50px;
}

.why-floating-shape-3 {
  width: 160px;
  height: 160px;
  top: 40%;
  left: 45%;
}

.why-choose-section>.auto-container {
  position: relative;
  z-index: 1;
}

.why-features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.why-feature-card {
  background: #fff;
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-lg);
  padding: 1.85rem 1.6rem;
  box-shadow: var(--hd-shadow-sm);
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), border-color var(--hd-t) var(--hd-ease);
}

.why-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hd-shadow-lg);
  border-color: var(--hd-border-green);
}

.why-feature-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: var(--hd-r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-gradient-soft);
  color: var(--hd-brand-strong);
  font-size: 1.45rem;
  margin-bottom: 1.15rem;
  transition: all var(--hd-t) var(--hd-ease);
}

.why-feature-card:hover .why-feature-icon-wrapper {
  background: var(--hd-gradient);
  color: #fff;
}

.why-feature-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--hd-ink-900);
  margin: 0 0 .55rem;
}

.why-feature-description {
  font-size: .9rem;
  color: var(--hd-ink-500);
  line-height: 1.6;
  margin: 0 0 1.15rem;
}

.why-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--hd-brand-strong);
  background: var(--hd-surface-green);
  padding: .4rem .8rem;
  border-radius: var(--hd-r-pill);
}

.why-trust-badge-icon {
  color: var(--hd-brand);
}

/* Equal-height feature cards: badge pinned to a common baseline */
.why-feature-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.why-feature-card .why-trust-badge {
  margin-top: auto;
}

.why-feature-description {
  margin-bottom: 1.15rem;
}

/* ==========================================================================
   OFFERS + LABS (sec-title shared)
   ========================================================================== */
.process-style-two,
.testimonial-style-two {
  background: var(--hd-surface);
}

.testimonial-style-two {
  background: var(--hd-surface-2);
}

.process-style-two .sec-title,
.testimonial-style-two .sec-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
  flex-wrap: wrap;
}

.process-style-two .newstyle,
.testimonial-style-two .newstyle {
  font-family: var(--hd-font);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--hd-ink-900);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin: 0;
}

.category-block {
  border-radius: var(--hd-r-lg);
  overflow: hidden;
  box-shadow: var(--hd-shadow-sm);
  border: 1px solid var(--hd-border);
  background: #fff;
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease);
}

.category-block:hover {
  transform: translateY(-5px);
  box-shadow: var(--hd-shadow-md);
}

.category-block img {
  display: block;
  width: 100%;
  height: auto;
}

/* Lab card */
.luxury-lab-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-lg);
  padding: 1.5rem;
  box-shadow: var(--hd-shadow-sm);
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), border-color var(--hd-t) var(--hd-ease);
}

.luxury-lab-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hd-shadow-lg);
  border-color: var(--hd-border-green);
}

.luxury-lab-card,
.luxury-lab-card * {
  min-width: 0;
}

.luxury-lab-header {
  margin-bottom: 1rem;
}

.luxury-lab-name {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--hd-ink-900);
  margin: 0 0 .5rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.luxury-lab-distance {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--hd-brand-strong);
  background: var(--hd-surface-green);
  padding: .3rem .65rem;
  border-radius: var(--hd-r-pill);
  white-space: nowrap;
}

.luxury-lab-address {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .88rem;
  color: var(--hd-ink-500);
  line-height: 1.55;
  flex: 1 1 auto;
  margin-bottom: 1.15rem;
}

.luxury-lab-address svg {
  flex: 0 0 auto;
  color: var(--hd-brand);
  margin-top: 2px;
}

.luxury-lab-address span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: normal;
  -webkit-line-clamp: unset;
  text-overflow: clip;
}

.luxury-lab-cta {
  width: 100%;
  padding: .72rem 1rem;
  font-size: .9rem;
}

.luxury-lab-cta:disabled {
  background: var(--hd-surface-3);
  color: var(--hd-ink-400) !important;
  box-shadow: none;
  cursor: not-allowed;
}

.luxury-lab-cta:disabled:hover {
  background: var(--hd-surface-3);
  transform: none;
  box-shadow: none;
  color: var(--hd-ink-400) !important;
}

/* ==========================================================================
   BLOGS
   ========================================================================== */
.blog-premium-section {
  background: var(--hd-surface);
}

.blog-grid-wrapper {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1.5rem;
  align-items: stretch;
}

.blog-featured-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-lg);
  box-shadow: var(--hd-shadow-sm);
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), border-color var(--hd-t) var(--hd-ease);
}

.blog-featured-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--hd-shadow-lg);
  border-color: var(--hd-border-green);
}

.blog-featured-image-wrapper {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.blog-featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--hd-ease-out);
}

.blog-featured-card:hover .blog-featured-image {
  transform: scale(1.05);
}

.blog-featured-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 26, 19, .35));
}

.blog-featured-badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  gap: .5rem;
  z-index: 2;
}

.blog-category-badge,
.blog-card-category {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  background: var(--hd-gradient);
  padding: .3rem .65rem;
  border-radius: var(--hd-r-pill);
}

.blog-date-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--hd-ink-700);
  background: rgba(255, 255, 255, .92);
  padding: .3rem .65rem;
  border-radius: var(--hd-r-pill);
}

.blog-date-badge svg {
  width: .9em;
  height: .9em;
}

.blog-featured-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.blog-featured-meta,
.blog-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .85rem;
}

.blog-author {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.blog-author-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--hd-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-gradient);
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
}

.blog-author-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--hd-ink-700);
}

.blog-reading-time,
.blog-card-date {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  color: var(--hd-ink-500);
}

.blog-reading-time svg,
.blog-card-date svg {
  width: .95em;
  height: .95em;
}

.blog-featured-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--hd-ink-900);
  line-height: 1.3;
  margin: 0 0 .6rem;
  letter-spacing: -.01em;
}

.blog-featured-excerpt {
  font-size: .92rem;
  color: var(--hd-ink-500);
  line-height: 1.6;
  margin: 0 0 1.15rem;
}

.blog-read-more-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: auto;
  align-self: flex-start;
  color: var(--hd-brand-strong) !important;
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
}

.blog-read-more-btn:hover svg {
  transform: translateX(3px);
}

.blog-sidebar-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.blog-card {
  display: flex;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-md);
  padding: .8rem;
  box-shadow: var(--hd-shadow-sm);
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), border-color var(--hd-t) var(--hd-ease);
}

.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--hd-shadow-md);
  border-color: var(--hd-border-green);
}

.blog-card-image-wrapper {
  position: relative;
  flex: 0 0 120px;
  width: 120px;
  aspect-ratio: 1;
  border-radius: var(--hd-r-sm);
  overflow: hidden;
}

.blog-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card-badges {
  position: absolute;
  top: .5rem;
  left: .5rem;
}

.blog-card-image-wrapper .blog-card-category {
  font-size: .62rem;
  padding: .2rem .5rem;
}

.blog-card-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.blog-card-content .blog-card-category {
  display: none;
}

.blog-card-title {
  font-size: .98rem;
  font-weight: 700;
  color: var(--hd-ink-900);
  line-height: 1.35;
  margin: .35rem 0 .4rem;
}

.blog-card-excerpt {
  font-size: .82rem;
  color: var(--hd-ink-500);
  line-height: 1.5;
  margin: 0 0 .6rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: auto;
  align-self: flex-start;
  color: var(--hd-brand-strong) !important;
  font-weight: 700;
  font-size: .82rem;
  text-decoration: none;
}

.blog-card-link:hover svg {
  transform: translateX(3px);
}

/* ==========================================================================
   SEO CONTENT BLOCK
   ========================================================================== */
.doctor-details {
  padding-block: var(--hd-section-py);
  background: var(--hd-surface-2);
}

.doctor-details>.auto-container {
  max-width: var(--hd-container);
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3.5vw, 2.5rem);
}

.doctor-details .clinic-block-one .inner-box {
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-lg);
  box-shadow: var(--hd-shadow-sm);
  background: #fff;
}

.doctor-details .content-box h3 {
  font-family: var(--hd-font);
  font-weight: 800;
  color: var(--hd-ink-900);
  letter-spacing: -.01em;
}

.doctor-details .descriptiontxt {
  color: var(--hd-ink-600);
  line-height: 1.7;
  max-height: 120px;
  overflow: hidden;
  position: relative;
  transition: max-height .4s var(--hd-ease);
}

.doctor-details .descriptiontxt.expanded {
  max-height: 2000px;
}

.read-more-btn {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 1.3rem;
  border: none;
  cursor: pointer;
  background: var(--hd-gradient);
  color: #fff;
  border-radius: var(--hd-r-pill);
  font-family: var(--hd-font);
  font-weight: 600;
  font-size: .9rem;
  box-shadow: var(--hd-shadow-green-sm);
  transition: all var(--hd-t) var(--hd-ease);
}

.read-more-btn:hover {
  background: var(--hd-gradient-hover);
  transform: translateY(-2px);
  box-shadow: var(--hd-shadow-green);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.premium-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #08140e 0%, #0b1a13 100%);
  color: rgba(255, 255, 255, .75);
  font-family: var(--hd-font);
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
}

.premium-footer .container {
  max-width: var(--hd-container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3.5vw, 2.5rem);
  position: relative;
  z-index: 1;
}

.footer-glow-1 {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, .22), transparent 68%);
  top: -160px;
  right: -80px;
}

.footer-glow-2 {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(5, 150, 105, .16), transparent 70%);
  bottom: -160px;
  left: -80px;
}

.footer-cta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(16, 185, 129, .14), rgba(5, 150, 105, .08));
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--hd-r-xl);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.footer-cta-title {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 .35rem;
  letter-spacing: -.02em;
}

.footer-cta-description {
  margin: 0;
  color: rgba(255, 255, 255, .75);
  font-size: .95rem;
}

.footer-cta-buttons {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

.footer-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.4rem;
  border-radius: var(--hd-r-pill);
  font-weight: 700;
  font-size: .93rem;
  text-decoration: none;
}

.footer-btn svg {
  width: 1.05em;
  height: 1.05em;
  transition: transform var(--hd-t) var(--hd-ease-out);
}

.footer-btn-primary {
  background: var(--hd-gradient);
  color: #fff !important;
  box-shadow: var(--hd-shadow-green-sm);
}

.footer-btn-primary:hover {
  background: var(--hd-gradient-hover);
  transform: translateY(-2px);
  box-shadow: var(--hd-shadow-green);
}

.footer-btn-primary:hover svg {
  transform: translateX(3px);
}

.footer-btn-secondary {
  background: rgba(255, 255, 255, .08);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .18);
}

.footer-btn-secondary:hover {
  background: rgba(255, 255, 255, .16);
  transform: translateY(-2px);
}

.footer-main {
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 2rem;
}

.footer-logo {
  display: inline-block;
  margin-bottom: 1.1rem;
}

.footer-logo img {
  max-height: 46px;
  width: auto;
}

.footer-description {
  font-size: .9rem;
  line-height: 1.65;
  margin: 0 0 1.25rem;
  color: rgba(255, 255, 255, .7);
}

.footer-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.35rem;
}

.footer-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--hd-green-200);
  background: rgba(16, 185, 129, .12);
  border: 1px solid rgba(16, 185, 129, .2);
  padding: .35rem .7rem;
  border-radius: var(--hd-r-pill);
}

.footer-trust-badge svg,
.footer-trust-badge i {
  color: var(--hd-green-300);
}

.footer-social {
  display: flex;
  gap: .6rem;
}

.footer-social-link {
  width: 40px;
  height: 40px;
  border-radius: var(--hd-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .14);
  transition: all var(--hd-t) var(--hd-ease);
}

.footer-social-link:hover {
  background: var(--hd-gradient);
  border-color: transparent;
  transform: translateY(-3px);
  color: #fff;
  box-shadow: var(--hd-shadow-green-sm);
}

.footer-title {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
  margin: 0 0 1.15rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255, 255, 255, .72);
  font-size: .9rem;
  text-decoration: none;
  transition: color var(--hd-t) var(--hd-ease), transform var(--hd-t) var(--hd-ease);
}

.footer-link svg {
  width: .85em;
  height: .85em;
  color: var(--hd-green-400);
  opacity: 0;
  transform: translateX(-4px);
  transition: all var(--hd-t) var(--hd-ease);
}

.footer-link:hover {
  color: #fff;
  transform: translateX(3px);
}

.footer-link:hover svg {
  opacity: 1;
  transform: translateX(0);
}

.footer-contact-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.footer-contact-item {
  display: flex;
  gap: .8rem;
}

.footer-contact-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--hd-r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, .14);
  color: var(--hd-green-300);
}

.footer-contact-label {
  margin: 0 0 .1rem;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .5);
}

.footer-contact-value {
  margin: 0;
  font-size: .9rem;
  color: #fff;
  text-decoration: none;
}

a.footer-contact-value:hover {
  color: var(--hd-green-300);
}

.footer-app-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--hd-r-md);
  padding: 1rem;
}

.footer-app-title {
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 .75rem;
}

.footer-app-buttons {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.footer-app-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .8rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--hd-r-sm);
  color: #fff;
  text-decoration: none;
  transition: all var(--hd-t) var(--hd-ease);
}

.footer-app-btn:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.footer-app-btn i,
.footer-app-btn [data-lucide] {
  font-size: 1.3rem;
}

.footer-app-btn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.footer-app-btn-label {
  font-size: .62rem;
  opacity: .7;
}

.footer-app-btn-name {
  font-size: .85rem;
  font-weight: 700;
}

/* Floating WhatsApp */
.floating-whatsapp-a {
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 999;
}

.floating-whatsapp-a img {
  width: 54px;
  height: 54px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .25));
  transition: transform var(--hd-t) var(--hd-ease-out);
}

.floating-whatsapp-a img:hover {
  transform: scale(1.08);
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s var(--hd-ease-out), transform .6s var(--hd-ease-out);
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1024px) {
  .luxury-hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* Content first, image below (per spec) */
  .luxury-hero-visual {
    order: 2;
    margin-top: .5rem;
  }

  .luxury-hero-visual-frame {
    max-width: 460px;
    margin-inline: auto;
  }

  .luxury-hero-content>* {
    animation: none;
  }

  .app-content-grid {
    grid-template-columns: 1fr;
  }

  .app-phone-wrapper {
    order: -1;
  }

  .why-features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 1.1rem;
  }

  .blog-grid-wrapper {
    grid-template-columns: 1fr;
  }

  .blog-sidebar-column {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .blog-sidebar-column .blog-card {
    flex: 1 1 260px;
  }
}

@media (max-width: 860px) {
  .luxury-top-bar-content {
    justify-content: center;
  }

  .luxury-top-bar-text:last-child {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .app-features-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  :root {
    --hd-section-py: clamp(2.25rem, 7vw, 2.75rem);
    --hd-section-pb: clamp(2rem, 6vw, 2.5rem);
  }

  .luxury-hero-title {
    font-size: clamp(2rem, 8vw, 2.7rem);
  }

  .luxury-hero-quick-actions {
    grid-template-columns: 1fr;
  }

  .luxury-hero-search {
    height: auto;
    flex-wrap: wrap;
    border-radius: var(--hd-r-lg);
    padding: .6rem;
  }

  .luxury-hero-search-input {
    width: 100%;
    height: 44px;
    padding: .5rem .6rem;
  }

  .luxury-hero-search-btn {
    width: 100%;
  }

  .luxury-hero-chip {
    padding: .5rem .65rem;
  }

  .luxury-hero-chip-1 {
    left: 2%;
    top: 4%;
  }

  .luxury-hero-chip-2 {
    right: 2%;
    bottom: 4%;
  }

  .packages-section-header,
  .tests-section-header,
  .blog-section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .process-cards-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .why-features-grid {
    grid-template-columns: 1fr;
  }

  .premium-package-actions,
  .premium-test-actions {
    flex-wrap: wrap;
  }

  .app-features-grid {
    grid-template-columns: 1fr;
  }

  .app-stats-wrapper {
    gap: 1rem;
  }

  .blog-sidebar-column .blog-card {
    flex: 1 1 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-cta-strip {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}

@media (max-width: 420px) {
  .blog-card {
    flex-direction: column;
  }

  .blog-card-image-wrapper {
    flex-basis: auto;
    width: 100%;
    aspect-ratio: 16/9;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .luxury-hero-visual-frame,
  .luxury-hero-chip,
  .luxury-hero-badge-dot,
  .app-floating-icon,
  .luxury-hero-content>*,
  .luxury-hero-visual {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }

  * {
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   V2 ADDITIONS — categories, stats band, offers, labs, FAQ, header upgrades,
   mobile drawer, callback FAB, micro-interactions
   ========================================================================== */

.categories-premium-section *,
.offers-premium-section *,
.labs-premium-section *,
.faq-premium-section *,
.vision-premium-section * {
  box-sizing: border-box;
}

/* Section background alternation */
.categories-premium-section {
  background: var(--hd-surface-2);
}

.offers-premium-section {
  background: var(--hd-surface);
}

.labs-premium-section {
  background: var(--hd-surface-2);
}

.faq-premium-section {
  background: linear-gradient(180deg, #ffffff 0%, var(--hd-surface-green) 100%);
}

/* Subtle noise texture over the hero gradient */
.luxury-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* Parallax targets move on transform only (GPU) */
[data-hd-parallax] {
  will-change: transform;
}

/* --------------------------------------------------------------------------
   HEADER — shrink on scroll, CTA, animated hamburger
   -------------------------------------------------------------------------- */
/* position: sticky dies inside an overflow-hidden ancestor; the theme sets
   overflow: hidden !important on .boxed_wrapper. Clip at the body instead. */
body {
  overflow-x: hidden;
}

.boxed_wrapper {
  overflow: visible !important;
}

.luxury-top-bar {
  overflow: hidden;
  max-height: 60px;
  transition: max-height .35s var(--hd-ease), opacity .3s var(--hd-ease);
}

.luxury-header.scrolled .luxury-top-bar {
  max-height: 0;
  opacity: 0;
}

.luxury-main-header {
  transition: padding .3s var(--hd-ease);
}

.luxury-header.scrolled .luxury-main-header {
  padding: .35rem 0;
}

.luxury-logo img {
  transition: max-height .3s var(--hd-ease);
}

.luxury-header.scrolled .luxury-logo img {
  max-height: 44px;
}

.luxury-header-cta {
  align-items: center;
  gap: .5rem;
  padding: .62rem 1.25rem;
  border-radius: var(--hd-r-pill);
  background: var(--hd-gradient);
  color: #fff !important;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  box-shadow: var(--hd-shadow-green-sm);
  position: relative;
  overflow: hidden;
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), background var(--hd-t) var(--hd-ease);
}

.luxury-header-cta svg {
  transition: transform var(--hd-t) var(--hd-ease-out);
}

.luxury-header-cta:hover {
  background: var(--hd-gradient-hover);
  transform: translateY(-2px);
  box-shadow: var(--hd-shadow-green);
}

.luxury-header-cta:hover svg {
  transform: translateX(3px);
}

.luxury-hamburger {
  padding: .55rem .6rem;
}

.luxury-hamburger-box {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 22px;
  height: 18px;
}

.luxury-hamburger-bar {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--hd-ink-800);
  transform-origin: center;
  transition: transform .3s var(--hd-ease-out), opacity .2s var(--hd-ease), width .3s var(--hd-ease-out);
}

.luxury-hamburger .luxury-hamburger-bar:nth-child(2) {
  width: 70%;
  align-self: flex-start;
}

.luxury-hamburger:hover .luxury-hamburger-bar:nth-child(2) {
  width: 100%;
}

.luxury-hamburger.is-open .luxury-hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.luxury-hamburger.is-open .luxury-hamburger-bar:nth-child(2) {
  opacity: 0;
}

.luxury-hamburger.is-open .luxury-hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

body.hd-menu-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   MOBILE DRAWER — premium internals + staggered entrance
   -------------------------------------------------------------------------- */
.mobile-menu .menu-box {
  display: flex;
  flex-direction: column;
}

.mobile-menu .menu-box>* {
  opacity: 0;
  transform: translateX(18px);
  transition: opacity .3s var(--hd-ease), transform .3s var(--hd-ease-out);
}

.mobile-menu.active .menu-box>* {
  opacity: 1;
  transform: none;
}

.mobile-menu.active .menu-box>*:nth-child(1) {
  transition-delay: .06s;
}

.mobile-menu.active .menu-box>*:nth-child(2) {
  transition-delay: .12s;
}

.mobile-menu.active .menu-box>*:nth-child(3) {
  transition-delay: .18s;
}

.mobile-menu.active .menu-box>*:nth-child(4) {
  transition-delay: .24s;
}

.hd-mobile-logo {
  padding: 20px;
  border-bottom: 1px solid var(--hd-border);
}

.hd-mobile-logo img {
  max-height: 42px;
  width: auto;
}

.hd-mobile-nav {
  padding: 12px 14px;
}

.hd-mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.hd-mobile-nav a {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .85rem .9rem;
  border-radius: var(--hd-r-sm);
  color: var(--hd-ink-800);
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  font-family: var(--hd-font);
  transition: background var(--hd-t) var(--hd-ease), color var(--hd-t) var(--hd-ease);
}

.hd-mobile-nav a svg {
  color: var(--hd-brand);
  font-size: 1.1rem;
}

.hd-mobile-nav a:hover,
.hd-mobile-nav a.active {
  background: var(--hd-surface-green);
  color: var(--hd-brand-strong);
}

.hd-mobile-nav-arrow {
  margin-left: auto;
  color: var(--hd-ink-400) !important;
  opacity: 0;
  transform: translateX(-4px);
  transition: all var(--hd-t) var(--hd-ease);
}

.hd-mobile-nav a:hover .hd-mobile-nav-arrow,
.hd-mobile-nav a.active .hd-mobile-nav-arrow {
  opacity: 1;
  transform: none;
  color: var(--hd-brand) !important;
}

.hd-mobile-cta {
  padding: 8px 20px 18px;
}

.hd-mobile-cta .premium-btn {
  width: 100%;
}

.hd-mobile-contact {
  margin-top: auto;
  background: var(--hd-surface-2);
  border-top: 1px solid var(--hd-border);
  padding: 18px 20px;
}

.hd-mobile-contact h4 {
  font-family: var(--hd-font);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--hd-ink-500);
  margin: 0 0 .75rem;
}

.hd-mobile-contact ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}

.hd-mobile-contact li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .9rem;
  color: var(--hd-ink-600);
}

.hd-mobile-contact li svg {
  color: var(--hd-brand);
}

.hd-mobile-contact a {
  color: var(--hd-ink-700);
  text-decoration: none;
  font-weight: 600;
}

.hd-mobile-contact a:hover {
  color: var(--hd-brand-strong);
}

/* --------------------------------------------------------------------------
   CITY MODAL — pill links
   -------------------------------------------------------------------------- */
.hd-city-link {
  display: inline-block;
  padding: 8px 16px;
  background: #f3f4f6;
  color: #374151;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--hd-font);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--hd-ease), color .2s var(--hd-ease), transform .2s var(--hd-ease-out), box-shadow .2s var(--hd-ease);
}

.hd-city-link:hover {
  background: var(--hd-green-100);
  color: var(--hd-brand-strong);
  transform: translateY(-1px);
}

.hd-city-link-active {
  background: var(--hd-gradient);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--hd-shadow-green-sm);
}

.hd-city-link-active:hover {
  background: var(--hd-gradient-hover);
  color: #fff;
}

.hd-city-link-soon {
  opacity: .55;
  cursor: not-allowed;
}

.hd-city-link-soon:hover {
  background: #f3f4f6;
  color: #374151;
  transform: none;
}

.hd-city-link small {
  color: #9ca3af;
  font-size: 11px;
}

/* --------------------------------------------------------------------------
   CATEGORIES — health-concern cards
   -------------------------------------------------------------------------- */
.hd-category-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .35rem;
  height: 100%;
  padding: 1.7rem 1.1rem 1.35rem;
  background: #fff;
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-lg);
  text-decoration: none;
  box-shadow: var(--hd-shadow-sm);
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), border-color var(--hd-t) var(--hd-ease);
}

.hd-category-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--hd-gradient);
  opacity: 0;
  transition: opacity var(--hd-t) var(--hd-ease);
}

.hd-category-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hd-shadow-md);
  border-color: var(--hd-border-green);
}

.hd-category-card:hover::before {
  opacity: 1;
}

.hd-category-icon {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-gradient-soft);
  margin-bottom: .55rem;
  transition: transform var(--hd-t) var(--hd-ease-out);
}

.hd-category-icon img {
  width: 56%;
  height: 56%;
  object-fit: contain;
}

.hd-category-card:hover .hd-category-icon {
  transform: scale(1.08);
}

.hd-category-name {
  font-weight: 700;
  color: var(--hd-ink-900);
  font-size: .98rem;
  line-height: 1.35;
  letter-spacing: -.01em;
}

.hd-category-link {
  margin-top: auto;
  padding-top: .55rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--hd-brand-strong);
  font-size: .8rem;
  font-weight: 700;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--hd-t) var(--hd-ease), transform var(--hd-t) var(--hd-ease-out);
}

.hd-category-card:hover .hd-category-link {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .hd-category-link {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   OFFERS — banner cards with shine sweep
   -------------------------------------------------------------------------- */
.hd-offer-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--hd-r-lg);
  border: 1px solid var(--hd-border);
  background: #fff;
  box-shadow: var(--hd-shadow-sm);
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), border-color var(--hd-t) var(--hd-ease);
}

.hd-offer-card img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .55s var(--hd-ease-out);
}

.hd-offer-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--hd-shadow-md);
  border-color: var(--hd-border-green);
}

.hd-offer-card:hover img {
  transform: scale(1.04);
}

.hd-offer-card-shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}

.hd-offer-card:hover .hd-offer-card-shine {
  animation: hd-shine .9s var(--hd-ease-out);
}

@keyframes hd-shine {
  to {
    left: 130%;
  }
}

/* Equal-height offer cards: uniform banner ratio, image covers */
.offerSwiper .swiper-slide {
  height: auto;
}

.hd-offer-card {
  height: 100%;
  display: flex;
}

.hd-offer-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Equal-height blog sidebar cards: share the featured card's column height */
@media (min-width: 1025px) {
  .blog-sidebar-column .blog-card {
    flex: 1 1 0;
  }
}

/* Slider pagination sits in flow (beats Swiper's absolute positioning) */
.packages-premium-section .swiper-pagination,
.tests-premium-section .swiper-pagination,
.categories-premium-section .swiper-pagination,
.offers-premium-section .swiper-pagination,
.labs-premium-section .swiper-pagination {
  position: relative;
  bottom: auto;
  margin-top: 1.25rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   FAQ — standard header + two-column spring accordion
   -------------------------------------------------------------------------- */
.faq-header-cta {
  white-space: nowrap;
}

.faq-accordion {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem 1rem;
  align-items: start;
}

.hd-faq-item {
  background: #fff;
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-md);
  box-shadow: var(--hd-shadow-xs);
  overflow: hidden;
  transition: box-shadow var(--hd-t) var(--hd-ease), border-color var(--hd-t) var(--hd-ease);
}

.hd-faq-item.open {
  border-color: var(--hd-border-green);
  box-shadow: var(--hd-shadow-md);
}

.hd-faq-question {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--hd-font);
  font-size: 1rem;
  font-weight: 700;
  color: var(--hd-ink-900);
  transition: color var(--hd-t) var(--hd-ease);
}

.hd-faq-question:hover {
  color: var(--hd-brand-strong);
}

.hd-faq-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--hd-r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-surface-green);
  color: var(--hd-brand-strong);
  font-size: .9rem;
  transition: transform .3s var(--hd-ease-out), background var(--hd-t) var(--hd-ease), color var(--hd-t) var(--hd-ease);
}

.hd-faq-item.open .hd-faq-icon {
  transform: rotate(45deg);
  background: var(--hd-gradient);
  color: #fff;
}

.hd-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s var(--hd-ease-out);
}

.hd-faq-item.open .hd-faq-answer {
  grid-template-rows: 1fr;
}

.hd-faq-answer-inner {
  overflow: hidden;
  min-height: 0;
}

.hd-faq-answer-inner p {
  margin: 0;
  padding: 0 1.25rem 1.15rem;
  color: var(--hd-ink-600);
  font-size: .92rem;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   FLOATING CALLBACK FAB (opens the "Need help" modal)
   -------------------------------------------------------------------------- */
.hd-callback-fab {
  position: fixed;
  left: 20px;
  bottom: 22px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1.1rem .55rem .6rem;
  border: none;
  cursor: pointer;
  border-radius: var(--hd-r-pill);
  background: var(--hd-gradient);
  color: #fff;
  font-family: var(--hd-font);
  font-weight: 700;
  font-size: .88rem;
  box-shadow: var(--hd-shadow-green);
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), background var(--hd-t) var(--hd-ease);
}

.hd-callback-fab:hover {
  transform: translateY(-3px);
  background: var(--hd-gradient-hover);
  box-shadow: 0 20px 40px -12px rgba(5, 150, 105, .55);
}

.hd-callback-fab-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .18);
  font-size: 1rem;
  animation: hd-ring 3.2s ease-in-out infinite;
}

@keyframes hd-ring {

  0%,
  100% {
    transform: rotate(0);
  }

  4% {
    transform: rotate(12deg);
  }

  8% {
    transform: rotate(-10deg);
  }

  12% {
    transform: rotate(6deg);
  }

  16% {
    transform: rotate(0);
  }
}

/* --------------------------------------------------------------------------
   MICRO-INTERACTION UTILITIES (driven by hd-home.js)
   -------------------------------------------------------------------------- */
.hd-ripple-host {
  position: relative;
  overflow: hidden;
}

.hd-ripple {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  background: rgba(255, 255, 255, .45);
  transform: scale(0);
  pointer-events: none;
  animation: hd-ripple .6s var(--hd-ease-out) forwards;
}

@keyframes hd-ripple {
  to {
    transform: scale(2.6);
    opacity: 0;
  }
}

[data-hd-magnetic] {
  will-change: transform;
}

/* Staggered child reveal inside .reveal sections */
.reveal .why-features-grid>*,
.reveal .process-cards-grid>*,
.reveal .faq-accordion>* {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s var(--hd-ease-out), transform .55s var(--hd-ease-out);
}

.reveal.active .why-features-grid>*,
.reveal.active .process-cards-grid>*,
.reveal.active .faq-accordion>* {
  opacity: 1;
  transform: none;
}

.reveal.active .why-features-grid>*:nth-child(1),
.reveal.active .process-cards-grid>*:nth-child(1),
.reveal.active .faq-accordion>*:nth-child(1) {
  transition-delay: .06s;
}

.reveal.active .why-features-grid>*:nth-child(2),
.reveal.active .process-cards-grid>*:nth-child(2),
.reveal.active .faq-accordion>*:nth-child(2) {
  transition-delay: .13s;
}

.reveal.active .why-features-grid>*:nth-child(3),
.reveal.active .process-cards-grid>*:nth-child(3),
.reveal.active .faq-accordion>*:nth-child(3) {
  transition-delay: .2s;
}

.reveal.active .why-features-grid>*:nth-child(4),
.reveal.active .process-cards-grid>*:nth-child(4),
.reveal.active .faq-accordion>*:nth-child(4) {
  transition-delay: .27s;
}

.reveal.active .why-features-grid>*:nth-child(5),
.reveal.active .process-cards-grid>*:nth-child(5),
.reveal.active .faq-accordion>*:nth-child(5) {
  transition-delay: .34s;
}

.reveal.active .why-features-grid>*:nth-child(6),
.reveal.active .process-cards-grid>*:nth-child(6),
.reveal.active .faq-accordion>*:nth-child(6) {
  transition-delay: .41s;
}

/* SEO content card padding (was inline) */
.doctor-details .clinic-block-one .inner-box {
  padding: clamp(1.6rem, 3.5vw, 2.5rem) !important;
}

/* --------------------------------------------------------------------------
   V2 RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .faq-accordion {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {

  .categories-section-header,
  .offers-section-header,
  .labs-section-header,
  .faq-section-header,
  .vision-section-header,
  .booking-section-header,
  .why-section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .hd-category-icon {
    width: 74px;
    height: 74px;
  }

  .hd-faq-question {
    font-size: .95rem;
    padding: 1rem 1.05rem;
  }
}

@media (max-width: 480px) {
  .hd-callback-fab-label {
    display: none;
  }

  .hd-callback-fab {
    padding: .55rem .6rem;
  }

  .floating-whatsapp-a img {
    width: 48px;
    height: 48px;
  }
}

/* V2 reduced motion */
@media (prefers-reduced-motion: reduce) {

  .hd-callback-fab-icon,
  .hd-offer-card-shine {
    animation: none !important;
  }

  .hd-ripple {
    display: none !important;
  }

  .mobile-menu .menu-box>* {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .reveal .why-features-grid>*,
  .reveal .process-cards-grid>*,
  .reveal .faq-accordion>* {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  [data-hd-parallax] {
    transform: none !important;
  }
}

/* ==========================================================================
   AUTH PAGES — login & register (same design language as the homepage)
   ========================================================================== */
.hd-auth-section {
  position: relative;
  overflow: hidden;
  font-family: var(--hd-font);
  -webkit-font-smoothing: antialiased;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(16, 185, 129, .15), transparent 60%),
    radial-gradient(800px 480px at 4% 110%, rgba(5, 150, 105, .10), transparent 55%),
    linear-gradient(180deg, var(--hd-surface-green) 0%, #ffffff 62%);
}

.hd-auth-section * {
  box-sizing: border-box;
}

.hd-auth-section>.auto-container {
  max-width: var(--hd-container);
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3.5vw, 2.5rem);
  position: relative;
  z-index: 1;
}

.hd-auth-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hd-auth-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(6px);
}

.hd-auth-blob-1 {
  width: 420px;
  height: 420px;
  top: -160px;
  right: -120px;
  background: radial-gradient(circle, rgba(16, 185, 129, .20), transparent 68%);
}

.hd-auth-blob-2 {
  width: 340px;
  height: 340px;
  bottom: -160px;
  left: -120px;
  background: radial-gradient(circle, rgba(5, 150, 105, .15), transparent 70%);
}

.hd-auth-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(5, 150, 105, .10) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(900px 560px at 70% 20%, #000, transparent 72%);
  mask-image: radial-gradient(900px 560px at 70% 20%, #000, transparent 72%);
  opacity: .55;
}

/* Breadcrumb */
.hd-auth-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--hd-ink-500);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.hd-auth-breadcrumb a {
  color: var(--hd-brand-strong);
  text-decoration: none;
  transition: color var(--hd-t) var(--hd-ease);
}

.hd-auth-breadcrumb a:hover {
  color: var(--hd-brand);
}

.hd-auth-breadcrumb svg {
  width: .9em;
  height: .9em;
  color: var(--hd-ink-400);
}

/* Card */
.hd-auth-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: var(--hd-r-xl);
  box-shadow: 0 40px 80px -30px rgba(5, 150, 105, .35), var(--hd-shadow-md);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  animation: hd-fade-up .6s var(--hd-ease-out) both;
}

.hd-auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--hd-gradient);
  border-radius: var(--hd-r-xl) var(--hd-r-xl) 0 0;
}

.hd-auth-card-lg {
  max-width: 760px;
}

/* Head */
.hd-auth-head {
  text-align: center;
  margin-bottom: 1.6rem;
}

.hd-auth-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--hd-r-md);
  background: var(--hd-gradient);
  color: #fff;
  font-size: 1.6rem;
  box-shadow: var(--hd-shadow-green-sm);
}

.hd-auth-title {
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--hd-ink-900);
  margin: 0 0 .35rem;
}

.hd-auth-subtitle {
  font-size: .95rem;
  color: var(--hd-ink-500);
  line-height: 1.55;
  margin: 0;
}

.hd-auth-switch {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .6rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--hd-brand-strong);
  text-decoration: none;
  transition: color var(--hd-t) var(--hd-ease);
}

.hd-auth-switch:hover {
  color: var(--hd-brand);
}

.hd-auth-switch svg {
  width: .95em;
  height: .95em;
  transition: transform var(--hd-t) var(--hd-ease-out);
}

.hd-auth-switch:hover svg {
  transform: translateX(3px);
}

/* Session alert (bootstrap markup, premium skin) */
.hd-auth-card .alert {
  border-radius: var(--hd-r-sm);
  border: 1px solid var(--hd-border);
  font-family: var(--hd-font);
  font-size: .9rem;
  margin-bottom: 1.25rem;
}

.hd-auth-card .alert-success {
  background: var(--hd-surface-green);
  border-color: var(--hd-border-green);
  color: var(--hd-brand-strong);
}

.hd-auth-card .alert-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.hd-auth-card .alert-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

/* Fields */
.hd-auth-form .hd-auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.1rem;
}

.hd-field {
  margin-bottom: 1.1rem;
  min-width: 0;
}

.hd-auth-grid .hd-field {
  margin-bottom: 0;
}

.hd-field-full {
  grid-column: 1 / -1;
}

.hd-auth-card .hd-field label,
.hd-dash-card .hd-field label {
  display: block;
  font-family: var(--hd-font);
  font-size: .82rem;
  font-weight: 700;
  color: var(--hd-ink-700);
  letter-spacing: .01em;
  margin: 0 0 .45rem;
}

.hd-input-wrap {
  position: relative;
}

.hd-input-wrap>svg,
.hd-input-wrap>i[data-lucide] {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  color: var(--hd-brand);
  pointer-events: none;
  z-index: 1;
}

.hd-auth-card .hd-input-wrap input,
.hd-auth-card .hd-input-wrap select,
.hd-dash-card .hd-input-wrap input,
.hd-dash-card .hd-input-wrap select {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 1rem 0 2.7rem;
  font-family: var(--hd-font);
  font-size: .95rem;
  color: var(--hd-ink-800);
  background: #fff;
  border: 1.5px solid var(--hd-border-2);
  border-radius: var(--hd-r-sm);
  outline: none;
  transition: border-color var(--hd-t) var(--hd-ease), box-shadow var(--hd-t) var(--hd-ease), background var(--hd-t) var(--hd-ease);
  -webkit-appearance: none;
  appearance: none;
}

.hd-auth-card .hd-input-wrap input::placeholder,
.hd-dash-card .hd-input-wrap input::placeholder {
  color: var(--hd-ink-400);
}

.hd-auth-card .hd-input-wrap input:focus,
.hd-auth-card .hd-input-wrap select:focus,
.hd-dash-card .hd-input-wrap input:focus,
.hd-dash-card .hd-input-wrap select:focus {
  border-color: var(--hd-brand);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .14);
  background: #fff;
}

.hd-auth-card .hd-input-wrap select,
.hd-dash-card .hd-input-wrap select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

/* Remove number-input spinners on the phone field */
.hd-auth-card .hd-input-wrap input[type=number]::-webkit-outer-spin-button,
.hd-auth-card .hd-input-wrap input[type=number]::-webkit-inner-spin-button,
.hd-dash-card .hd-input-wrap input[type=number]::-webkit-outer-spin-button,
.hd-dash-card .hd-input-wrap input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.hd-auth-card .hd-input-wrap input[type=number],
.hd-dash-card .hd-input-wrap input[type=number] {
  -moz-appearance: textfield;
}

/* Terms checkbox (existing material-checkbox markup, premium skin) */
.hd-auth-card .custom-check-box {
  margin: .35rem 0 0;
}

.hd-auth-card .material-checkbox,
.hd-dash-card .material-checkbox {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.hd-auth-card .material-checkbox .material-control-input,
.hd-dash-card .material-checkbox .material-control-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.hd-auth-card .material-checkbox .material-control-indicator,
.hd-dash-card .material-checkbox .material-control-indicator {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid var(--hd-border-2);
  border-radius: 6px;
  background: #fff center / 12px no-repeat;
  transition: background var(--hd-t) var(--hd-ease), border-color var(--hd-t) var(--hd-ease), box-shadow var(--hd-t) var(--hd-ease);
  display: inline-block;
  position: static;
  transform: none;
}

.hd-auth-card .material-checkbox .material-control-input:checked~.material-control-indicator,
.hd-dash-card .material-checkbox .material-control-input:checked~.material-control-indicator {
  background-color: var(--hd-brand);
  border-color: var(--hd-brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.hd-auth-card .material-checkbox .material-control-input:focus-visible~.material-control-indicator,
.hd-dash-card .material-checkbox .material-control-input:focus-visible~.material-control-indicator {
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .14);
}

.hd-auth-card .material-checkbox .description,
.hd-dash-card .material-checkbox .description {
  font-family: var(--hd-font);
  font-size: .85rem;
  color: var(--hd-ink-600);
  line-height: 1.55;
}

.hd-auth-card .material-checkbox .description a,
.hd-dash-card .material-checkbox .description a {
  color: var(--hd-brand-strong);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--hd-t) var(--hd-ease), color var(--hd-t) var(--hd-ease);
}

.hd-auth-card .material-checkbox .description a:hover,
.hd-dash-card .material-checkbox .description a:hover {
  color: var(--hd-brand);
  border-bottom-color: currentColor;
}

/* Submit (existing theme-btn-one class, premium skin) */
.hd-auth-card .theme-btn-one.hd-auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  height: 54px;
  margin-top: 1.35rem;
  padding: 0 1.5rem;
  border: none;
  cursor: pointer;
  border-radius: var(--hd-r-pill);
  background: var(--hd-gradient);
  color: #fff;
  font-family: var(--hd-font);
  font-size: 1rem;
  font-weight: 700;
  box-shadow: var(--hd-shadow-green-sm);
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), background var(--hd-t) var(--hd-ease);
}

.hd-auth-card .theme-btn-one.hd-auth-submit:hover {
  background: var(--hd-gradient-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--hd-shadow-green);
}

.hd-auth-card .theme-btn-one.hd-auth-submit svg {
  width: 1.1em;
  height: 1.1em;
  transition: transform var(--hd-t) var(--hd-ease-out);
}

.hd-auth-card .theme-btn-one.hd-auth-submit:hover svg {
  transform: translateX(3px);
}

/* Divider + footer link */
.hd-auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  color: var(--hd-ink-400);
  font-size: .82rem;
  font-weight: 600;
  text-transform: lowercase;
}

.hd-auth-divider::before,
.hd-auth-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--hd-border);
}

.hd-auth-card .login-now {
  text-align: center;
}

.hd-auth-card .login-now p {
  margin: 0;
  font-family: var(--hd-font);
  font-size: .92rem;
  color: var(--hd-ink-600);
}

.hd-auth-card .login-now a {
  color: var(--hd-brand-strong);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color var(--hd-t) var(--hd-ease), color var(--hd-t) var(--hd-ease);
}

.hd-auth-card .login-now a:hover {
  color: var(--hd-brand);
  border-bottom-color: currentColor;
}

/* Trust hints under the card */
.hd-auth-hints {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.5rem;
  margin: 1.4rem auto 0;
  max-width: 760px;
}

.hd-auth-hints span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--hd-ink-500);
}

.hd-auth-hints svg {
  width: 1em;
  height: 1em;
  color: var(--hd-brand);
}

@media (max-width: 680px) {
  .hd-auth-form .hd-auth-grid {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }

  .hd-auth-card {
    border-radius: var(--hd-r-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hd-auth-card {
    animation: none;
  }
}

/* Auth validation states */
.hd-field-error {
  margin-top: .4rem;
  font-family: var(--hd-font);
  font-size: .8rem;
  font-weight: 600;
  color: #dc2626;
  display: flex;
  align-items: center;
  gap: .3rem;
}

.hd-field-verified {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-left: .4rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--hd-brand-strong);
  background: var(--hd-surface-green);
  padding: .12rem .5rem;
  border-radius: var(--hd-r-pill);
}

.hd-field-verified svg {
  width: .95em;
  height: .95em;
}

.hd-auth-card .hd-input-wrap input[readonly] {
  background: var(--hd-surface-2);
  color: var(--hd-ink-600);
  cursor: default;
}

.hd-auth-card .hd-input-wrap input[readonly]:focus {
  border-color: var(--hd-border-2);
  box-shadow: none;
}

/* ==========================================================================
   OTP VERIFICATION PAGE
   ========================================================================== */
.hd-otp-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  max-width: 1080px;
  margin-inline: auto;
}

/* Left visual panel */
.hd-otp-visual {
  position: relative;
  overflow: hidden;
  border-radius: var(--hd-r-xl);
  background: linear-gradient(150deg, var(--hd-green-800) 0%, var(--hd-brand-strong) 55%, var(--hd-brand) 100%);
  padding: clamp(2.25rem, 4vw, 3.5rem);
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--hd-shadow-lg);
  animation: hd-fade-up .6s var(--hd-ease-out) both;
}

.hd-otp-visual-pattern {
  position: absolute;
  inset: 0;
  opacity: .13;
  background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .6) 1px, transparent 1.6px);
  background-size: 26px 26px;
}

.hd-otp-visual-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hd-otp-visual-glow-1 {
  width: 300px;
  height: 300px;
  top: -110px;
  right: -70px;
  background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 68%);
}

.hd-otp-visual-glow-2 {
  width: 260px;
  height: 260px;
  bottom: -110px;
  left: -60px;
  background: radial-gradient(circle, rgba(110, 231, 183, .24), transparent 70%);
}

.hd-otp-float {
  position: absolute;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--hd-r-sm);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 1.15rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: hd-float 5.5s ease-in-out infinite;
}

.hd-otp-float-1 {
  top: 9%;
  left: 10%;
}

.hd-otp-float-2 {
  top: 16%;
  right: 12%;
  animation-delay: .5s;
}

.hd-otp-float-3 {
  bottom: 18%;
  left: 7%;
  animation-delay: 1s;
}

.hd-otp-float-4 {
  bottom: 10%;
  right: 9%;
  animation-delay: 1.5s;
}

.hd-otp-visual-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #eafff6;
}

.hd-otp-visual-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--hd-r-lg);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 2.2rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hd-otp-visual-title {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 .6rem;
}

.hd-otp-visual-text {
  font-size: .95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .85);
  max-width: 40ch;
  margin: 0 auto 1.5rem;
}

.hd-otp-visual-points {
  display: grid;
  gap: .6rem;
  justify-content: center;
}

.hd-otp-visual-points span {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
}

.hd-otp-visual-points svg {
  color: var(--hd-green-300);
}

/* Right card */
.hd-otp-card {
  max-width: 480px;
  margin: 0;
}

.hd-otp-phone-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .35rem .6rem;
  margin-top: .6rem;
  font-size: .92rem;
  color: var(--hd-ink-600);
}

.hd-otp-phone-row strong {
  color: var(--hd-ink-900);
  font-weight: 800;
  letter-spacing: .04em;
}

.hd-otp-edit {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--hd-brand-strong);
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: color var(--hd-t) var(--hd-ease), border-color var(--hd-t) var(--hd-ease);
}

.hd-otp-edit:hover {
  color: var(--hd-brand);
  border-bottom-color: currentColor;
}

.hd-otp-edit svg {
  width: .9em;
  height: .9em;
}

/* Segmented OTP boxes */
.hd-otp-boxes {
  display: flex;
  justify-content: center;
  gap: .8rem;
  margin: 1.5rem 0 .5rem;
}

.hd-otp-box {
  width: 60px;
  height: 64px;
  text-align: center;
  font-family: var(--hd-font);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--hd-ink-900);
  background: #fff;
  border: 1.5px solid var(--hd-border-2);
  border-radius: var(--hd-r-sm);
  outline: none;
  caret-color: var(--hd-brand);
  transition: border-color var(--hd-t) var(--hd-ease), box-shadow var(--hd-t) var(--hd-ease), transform .15s var(--hd-ease-out), background var(--hd-t) var(--hd-ease);
  -webkit-appearance: none;
  appearance: none;
}

.hd-otp-box:focus {
  border-color: var(--hd-brand);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .14);
  transform: translateY(-2px);
}

.hd-otp-box.hd-otp-filled {
  border-color: var(--hd-border-green);
  background: var(--hd-surface-green);
}

.hd-otp-boxes.hd-otp-error .hd-otp-box {
  border-color: #f87171;
  background: #fef2f2;
  animation: hd-otp-shake .35s var(--hd-ease);
}

.hd-otp-boxes.hd-otp-success .hd-otp-box {
  border-color: var(--hd-brand);
  background: var(--hd-surface-green);
  color: var(--hd-brand-strong);
}

@keyframes hd-otp-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  55% {
    transform: translateX(5px);
  }

  80% {
    transform: translateX(-2px);
  }
}

/* Inline message (#messageotp gets alert-* classes from the JS) */
.hd-otp-message {
  display: none;
  margin: .75rem 0 0;
  padding: 0;
  border: none;
  font-family: var(--hd-font);
  font-size: .88rem;
  font-weight: 600;
  text-align: center;
}

.hd-otp-message.alert-danger {
  display: block;
  color: #b91c1c;
  background: transparent;
}

.hd-otp-message.alert-success {
  display: block;
  color: var(--hd-brand-strong);
  background: transparent;
}

/* Verify button loading state */
.hd-auth-submit.is-loading {
  pointer-events: none;
  opacity: .75;
}

.hd-otp-spinner {
  display: none;
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  border: 2.5px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hd-spin .7s linear infinite;
}

.hd-auth-submit.is-loading .hd-otp-spinner {
  display: inline-block;
}

.hd-auth-submit.is-loading .hd-otp-submit-arrow {
  display: none;
}

@keyframes hd-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Resend row */
.hd-otp-resend {
  text-align: center;
  margin-top: 1.4rem;
  font-family: var(--hd-font);
  font-size: .92rem;
  color: var(--hd-ink-600);
}

.hd-otp-resend a {
  color: var(--hd-brand-strong);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: color var(--hd-t) var(--hd-ease), border-color var(--hd-t) var(--hd-ease);
}

.hd-otp-resend a:hover {
  color: var(--hd-brand);
  border-bottom-color: currentColor;
}

.hd-otp-resend #resendTimer {
  font-variant-numeric: tabular-nums;
  color: var(--hd-ink-400);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .hd-otp-split {
    grid-template-columns: 1fr;
    max-width: 520px;
  }

  .hd-otp-visual {
    display: none;
  }

  .hd-otp-card {
    margin-inline: auto;
  }
}

@media (max-width: 420px) {
  .hd-otp-boxes {
    gap: .5rem;
  }

  .hd-otp-box {
    width: 52px;
    height: 58px;
    font-size: 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hd-otp-visual,
  .hd-otp-float {
    animation: none !important;
  }

  .hd-otp-boxes.hd-otp-error .hd-otp-box {
    animation: none;
  }

  .hd-otp-box:focus {
    transform: none;
  }
}

/* OTP field label */
.hd-otp-label {
  display: block;
  text-align: center;
  font-family: var(--hd-font);
  font-size: .82rem;
  font-weight: 700;
  color: var(--hd-ink-700);
  letter-spacing: .01em;
  margin: 1.5rem 0 0;
}

/* ==========================================================================
   OUR VISION
   ========================================================================== */
.vision-premium-section {
  background: var(--hd-surface);
  position: relative;
  overflow: hidden;
}

.vision-premium-section>.auto-container {
  position: relative;
  z-index: 1;
}

.vision-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.vision-blob {
  position: absolute;
  border-radius: 50%;
}

.vision-blob-1 {
  width: 380px;
  height: 380px;
  top: -140px;
  right: -110px;
  background: radial-gradient(circle, rgba(16, 185, 129, .14), transparent 68%);
}

.vision-blob-2 {
  width: 320px;
  height: 320px;
  bottom: -140px;
  left: -100px;
  background: radial-gradient(circle, rgba(5, 150, 105, .10), transparent 70%);
}

.vision-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(5, 150, 105, .10) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(900px 560px at 18% 30%, #000, transparent 72%);
  mask-image: radial-gradient(900px 560px at 18% 30%, #000, transparent 72%);
  opacity: .5;
}

/* 40 / 60 split */
.vision-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

/* Left: stat panel */
.vision-stat-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--hd-r-xl);
  background: linear-gradient(165deg, var(--hd-surface-green) 0%, #ffffff 72%);
  border: 1px solid var(--hd-border-green);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: var(--hd-shadow-sm);
}

.vision-stat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--hd-gradient);
}

.vision-float {
  position: absolute;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--hd-r-sm);
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--hd-border);
  color: var(--hd-brand);
  font-size: 1.05rem;
  box-shadow: var(--hd-shadow-xs);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: hd-float 5.5s ease-in-out infinite;
}

.vision-float-1 {
  top: 14%;
  right: 8%;
}

.vision-float-2 {
  top: 44%;
  right: 16%;
  animation-delay: .7s;
}

.vision-float-3 {
  bottom: 30%;
  right: 6%;
  animation-delay: 1.3s;
}

.vision-stat-number {
  font-size: clamp(3rem, 6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  background: var(--hd-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

.vision-stat-label {
  margin: .9rem 0 0;
  max-width: 32ch;
  color: var(--hd-ink-600);
  font-size: .95rem;
  line-height: 1.65;
}

.vision-illustration {
  margin-top: auto;
  padding-top: 1.75rem;
}

.vision-illustration svg {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
}

/* Right: narrative */
.vision-content {
  min-width: 0;
}

.vision-lead {
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.45;
  color: var(--hd-ink-900);
  margin: 0 0 1.6rem;
}

.vision-lead span {
  background: var(--hd-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.vision-points {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.vision-points li {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  color: var(--hd-ink-600);
  font-size: .98rem;
  line-height: 1.65;
}

.vision-point-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin-top: .1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--hd-r-sm);
  background: var(--hd-gradient-soft);
  color: var(--hd-brand-strong);
  font-size: .95rem;
}

.vision-callout {
  margin: 0 0 .6rem;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--hd-brand-strong);
}

.vision-closing {
  margin: 0;
  color: var(--hd-ink-600);
  font-size: .98rem;
  line-height: 1.65;
  max-width: 58ch;
}

/* Bottom: mission quote card */
.vision-quote-card {
  position: relative;
  overflow: hidden;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-radius: var(--hd-r-xl);
  background: linear-gradient(135deg, var(--hd-green-800) 0%, var(--hd-brand-strong) 55%, var(--hd-brand) 100%);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  box-shadow: var(--hd-shadow-lg);
}

.vision-quote-pattern {
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .55) 1px, transparent 1.6px);
  background-size: 24px 24px;
}

.vision-quote-mark {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  top: -22px;
  font-size: 11rem;
  line-height: 1;
  color: rgba(255, 255, 255, .08);
  font-weight: 800;
  pointer-events: none;
  font-family: Georgia, serif;
}

.vision-quote-icon {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  margin-bottom: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--hd-r-md);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 1.3rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.vision-quote-text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.55;
  color: rgba(255, 255, 255, .88);
  max-width: 64ch;
}

.vision-quote-text span {
  color: #fff;
  border-bottom: 2px solid var(--hd-green-300);
}

/* Entrance: stat fades up, narrative fades in from the right, quote follows */
.reveal .vision-stat-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--hd-ease-out), transform .6s var(--hd-ease-out);
}

.reveal .vision-content {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity .6s var(--hd-ease-out) .12s, transform .6s var(--hd-ease-out) .12s;
}

.reveal .vision-quote-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--hd-ease-out) .24s, transform .6s var(--hd-ease-out) .24s;
}

.reveal.active .vision-stat-card,
.reveal.active .vision-content,
.reveal.active .vision-quote-card {
  opacity: 1;
  transform: none;
}

@media (max-width: 1024px) {
  .vision-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .vision-stat-card {
    max-width: 560px;
  }
}

@media (max-width: 680px) {
  .vision-stat-card {
    max-width: none;
    align-items: center;
    text-align: center;
  }

  .vision-stat-label {
    max-width: 40ch;
  }

  .vision-illustration svg {
    margin-inline: auto;
  }

  .vision-content {
    text-align: center;
  }

  .vision-points li {
    text-align: left;
  }

  .vision-closing {
    margin-inline: auto;
  }

  .vision-quote-card {
    text-align: center;
  }

  .vision-quote-mark {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vision-float {
    animation: none !important;
  }

  .reveal .vision-stat-card,
  .reveal .vision-content,
  .reveal .vision-quote-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   USER DASHBOARD
   ========================================================================== */
.hd-dash-section {
  font-family: var(--hd-font);
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 3.75rem);
  background:
    radial-gradient(1000px 480px at 92% -10%, rgba(16, 185, 129, .12), transparent 60%),
    linear-gradient(180deg, var(--hd-surface-green) 0%, var(--hd-surface-2) 30%, var(--hd-surface-2) 100%);
  min-height: 60vh;
}

.hd-dash-section * {
  box-sizing: border-box;
}

.hd-dash-section>.auto-container {
  max-width: var(--hd-container);
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3.5vw, 2.5rem);
  position: relative;
  z-index: 1;
}

/* Page head: breadcrumb + title */
.hd-dash-head {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.hd-dash-breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--hd-ink-500);
  margin-bottom: .4rem;
}

.hd-dash-breadcrumb a {
  color: var(--hd-brand-strong);
  text-decoration: none;
  transition: color var(--hd-t) var(--hd-ease);
}

.hd-dash-breadcrumb a:hover {
  color: var(--hd-brand);
}

.hd-dash-breadcrumb svg {
  width: .85em;
  height: .85em;
  color: var(--hd-ink-400);
}

.hd-dash-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--hd-ink-900);
  margin: 0;
}

/* Shell: sidebar + main */
.hd-dash-layout {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}

/* --- Sidebar --- */
.hd-dash-sidebar {
  position: sticky;
  top: 96px;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: var(--hd-r-lg);
  box-shadow: var(--hd-shadow-md);
  overflow: hidden;
  animation: hd-fade-up .5s var(--hd-ease-out) both;
}

.hd-dash-profile {
  position: relative;
  text-align: center;
  padding: 1.75rem 1.25rem 1.4rem;
  background: linear-gradient(165deg, var(--hd-surface-green) 0%, rgba(255, 255, 255, 0) 85%);
  border-bottom: 1px solid var(--hd-border);
}

.hd-dash-profile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--hd-gradient);
}

.hd-dash-avatar {
  width: 84px;
  height: 84px;
  margin: 0 auto .8rem;
  border-radius: 50%;
  padding: 3px;
  background: var(--hd-gradient);
  box-shadow: var(--hd-shadow-green-sm);
}

.hd-dash-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
  display: block;
}

.hd-dash-profile h3 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--hd-ink-900);
  margin: 0 0 .25rem;
}

.hd-dash-profile p {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--hd-ink-500);
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.hd-dash-profile p svg {
  color: var(--hd-brand);
  flex: 0 0 auto;
}

.hd-dash-nav-toggle {
  display: none;
  width: calc(100% - 2rem);
  margin: 1rem;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1rem;
  border: 1.5px solid var(--hd-border-green);
  border-radius: var(--hd-r-pill);
  background: #fff;
  font-family: var(--hd-font);
  font-weight: 700;
  font-size: .9rem;
  color: var(--hd-brand-strong);
  cursor: pointer;
}

.hd-dash-nav {
  padding: .9rem;
}

.hd-dash-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .25rem;
}

.hd-dash-nav a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .72rem .9rem;
  border-radius: var(--hd-r-sm);
  color: var(--hd-ink-700);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  transition: background var(--hd-t) var(--hd-ease), color var(--hd-t) var(--hd-ease), transform var(--hd-t) var(--hd-ease-out);
}

.hd-dash-nav a svg {
  color: var(--hd-brand);
  font-size: 1.05rem;
  flex: 0 0 auto;
  transition: color var(--hd-t) var(--hd-ease);
}

.hd-dash-nav a:hover {
  background: var(--hd-surface-green);
  color: var(--hd-brand-strong);
  transform: translateX(3px);
}

.hd-dash-nav a.current {
  background: var(--hd-gradient);
  color: #fff;
  box-shadow: var(--hd-shadow-green-sm);
}

.hd-dash-nav a.current svg {
  color: #fff;
}

.hd-dash-nav a.hd-dash-logout {
  color: #b91c1c;
}

.hd-dash-nav a.hd-dash-logout svg {
  color: #dc2626;
}

.hd-dash-nav a.hd-dash-logout:hover {
  background: #fef2f2;
  color: #b91c1c;
}

/* --- Main column --- */
.hd-dash-main {
  min-width: 0;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Welcome card */
.hd-dash-welcome {
  position: relative;
  overflow: hidden;
  border-radius: var(--hd-r-xl);
  background: linear-gradient(135deg, var(--hd-green-800) 0%, var(--hd-brand-strong) 55%, var(--hd-brand) 100%);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--hd-shadow-lg);
  animation: hd-fade-up .5s var(--hd-ease-out) both;
}

.hd-dash-welcome-pattern {
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .55) 1px, transparent 1.6px);
  background-size: 24px 24px;
}

.hd-dash-welcome-glow {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  top: -120px;
  right: -60px;
  background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 68%);
  pointer-events: none;
}

.hd-dash-welcome-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  flex-wrap: wrap;
}

.hd-dash-greeting {
  font-size: .9rem;
  font-weight: 600;
  color: var(--hd-green-200);
  margin: 0 0 .2rem;
}

.hd-dash-welcome h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 .35rem;
}

.hd-dash-welcome-sub {
  font-size: .95rem;
  color: rgba(255, 255, 255, .85);
  margin: 0;
}

.hd-dash-welcome-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

.hd-dash-welcome-actions .hd-dash-btn-light {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.25rem;
  border-radius: var(--hd-r-pill);
  background: #fff;
  color: var(--hd-brand-strong) !important;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  box-shadow: var(--hd-shadow-sm);
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease);
}

.hd-dash-welcome-actions .hd-dash-btn-light:hover {
  transform: translateY(-2px);
  box-shadow: var(--hd-shadow-md);
}

.hd-dash-welcome-actions .hd-dash-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.25rem;
  border-radius: var(--hd-r-pill);
  background: rgba(255, 255, 255, .12);
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .25);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  transition: background var(--hd-t) var(--hd-ease), transform var(--hd-t) var(--hd-ease-out);
}

.hd-dash-welcome-actions .hd-dash-btn-ghost:hover {
  background: rgba(255, 255, 255, .2);
  transform: translateY(-2px);
}

/* Stats */
.hd-dash-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.hd-dash-stat {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-lg);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--hd-shadow-sm);
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), border-color var(--hd-t) var(--hd-ease);
}

.hd-dash-stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--hd-shadow-md);
  border-color: var(--hd-border-green);
}

.hd-dash-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--hd-r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-gradient-soft);
  color: var(--hd-brand-strong);
  font-size: 1.15rem;
  margin-bottom: .8rem;
}

.hd-dash-stat-value {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--hd-ink-900);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.hd-dash-stat-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--hd-ink-500);
  margin-top: .25rem;
}

/* Grid children may shrink below the table's intrinsic width, so the
   .hd-dash-table-scroll wrapper scrolls instead of blowing out the card. */
.hd-dash-main>* {
  min-width: 0;
}

/* Quick actions */
.hd-dash-card {
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-lg);
  box-shadow: var(--hd-shadow-sm);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.hd-dash-card-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--hd-ink-900);
  margin: 0 0 1.1rem;
}

.hd-dash-card-title svg {
  color: var(--hd-brand);
}

.hd-dash-actions {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .85rem;
}

.hd-dash-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: 1.1rem .5rem;
  text-align: center;
  background: #fff;
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-md);
  text-decoration: none;
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), border-color var(--hd-t) var(--hd-ease);
}

.hd-dash-action:hover {
  transform: translateY(-4px);
  box-shadow: var(--hd-shadow-md);
  border-color: var(--hd-border-green);
}

.hd-dash-action-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--hd-r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-gradient-soft);
  color: var(--hd-brand-strong);
  font-size: 1.15rem;
  transition: background var(--hd-t) var(--hd-ease), color var(--hd-t) var(--hd-ease);
}

.hd-dash-action:hover .hd-dash-action-icon {
  background: var(--hd-gradient);
  color: #fff;
}

.hd-dash-action span {
  font-size: .78rem;
  font-weight: 700;
  color: var(--hd-ink-700);
  line-height: 1.25;
}

/* Appointments card: filters */
.hd-dash-appts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.hd-dash-filters {
  display: inline-flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.hd-dash-filters .theme-btn-one,
.hd-dash-filters .theme-btn-two {
  display: inline-flex;
  align-items: center;
  padding: .5rem 1.1rem;
  border-radius: var(--hd-r-pill);
  font-family: var(--hd-font);
  font-weight: 700;
  font-size: .84rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: all var(--hd-t) var(--hd-ease);
}

.hd-dash-filters .theme-btn-one {
  background: var(--hd-gradient);
  color: #fff !important;
  box-shadow: var(--hd-shadow-green-sm);
}

.hd-dash-filters .theme-btn-two {
  background: #fff;
  color: var(--hd-ink-600) !important;
  border-color: var(--hd-border-2);
}

.hd-dash-filters .theme-btn-two:hover {
  border-color: var(--hd-border-green);
  color: var(--hd-brand-strong) !important;
  background: var(--hd-surface-green);
}

/* Appointments table */
.hd-dash-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--hd-r-md);
  border: 1px solid var(--hd-border);
}

.hd-dash-section table.doctors-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .88rem;
}

.hd-dash-section .doctors-table thead th {
  background: var(--hd-surface-green);
  color: var(--hd-ink-700);
  font-weight: 700;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--hd-border-green);
  white-space: nowrap;
}

.hd-dash-section .doctors-table tbody td {
  padding: .9rem 1rem;
  color: var(--hd-ink-600);
  border-bottom: 1px solid var(--hd-border);
  vertical-align: middle;
}

.hd-dash-section .doctors-table tbody tr:last-child td {
  border-bottom: none;
}

.hd-dash-section .doctors-table tbody tr {
  transition: background var(--hd-t) var(--hd-ease);
}

.hd-dash-section .doctors-table tbody tr:hover {
  background: var(--hd-surface-2);
}

/* Status badges (existing .status classes, premium skin, scoped) */
.hd-dash-section .status {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .7rem;
  border-radius: var(--hd-r-pill);
  font-size: .74rem;
  font-weight: 700;
  background: var(--hd-surface-green);
  color: var(--hd-brand-strong);
  border: 1px solid var(--hd-border-green);
  white-space: nowrap;
}

.hd-dash-section .status.pending {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

.hd-dash-section .status.cancel {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

.hd-dash-section .print {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: var(--hd-r-pill);
  font-size: .76rem;
  font-weight: 700;
  background: #fff;
  color: var(--hd-brand-strong);
  border: 1.5px solid var(--hd-border-green);
  transition: all var(--hd-t) var(--hd-ease);
  white-space: nowrap;
}

.hd-dash-section .print:hover {
  background: var(--hd-gradient);
  color: #fff;
  border-color: transparent;
}

.hd-dash-section .doctors-table .theme-btn-one {
  display: inline-flex;
  padding: .3rem .7rem !important;
  border-radius: var(--hd-r-pill);
  background: var(--hd-gradient);
  color: #fff !important;
  font-weight: 700;
  font-size: .74rem;
  text-decoration: none;
  box-shadow: var(--hd-shadow-green-sm);
  white-space: nowrap;
}

/* DataTables chrome */
.hd-dash-section .dataTables_wrapper {
  font-family: var(--hd-font);
}

.hd-dash-section .dataTables_filter input,
.hd-dash-section .dataTables_length select {
  border: 1.5px solid var(--hd-border-2);
  border-radius: var(--hd-r-sm);
  padding: .4rem .7rem;
  margin-left: .4rem;
  outline: none;
  font-family: var(--hd-font);
  font-size: .85rem;
  color: var(--hd-ink-800);
  background: #fff;
  transition: border-color var(--hd-t) var(--hd-ease), box-shadow var(--hd-t) var(--hd-ease);
}

.hd-dash-section .dataTables_filter input:focus {
  border-color: var(--hd-brand);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
}

.hd-dash-section .dataTables_wrapper .dataTables_length,
.hd-dash-section .dataTables_wrapper .dataTables_filter {
  margin-bottom: .9rem;
  font-size: .84rem;
  color: var(--hd-ink-500);
}

.hd-dash-section .dataTables_wrapper .dataTables_info {
  font-size: .8rem;
  color: var(--hd-ink-500);
  padding-top: 1rem;
}

.hd-dash-section .dataTables_wrapper .dataTables_paginate {
  padding-top: .75rem;
}

.hd-dash-section .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--hd-r-sm) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--hd-ink-600) !important;
  padding: .35rem .75rem;
  margin-left: .2rem;
}

.hd-dash-section .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--hd-surface-green) !important;
  color: var(--hd-brand-strong) !important;
}

.hd-dash-section .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--hd-gradient) !important;
  color: #fff !important;
  box-shadow: var(--hd-shadow-green-sm);
}

/* Modals (scoped polish, markup untouched) */
#addfeedback .modal-content,
#reportModal .modal-content {
  border: none;
  border-radius: var(--hd-r-lg);
  overflow: hidden;
  font-family: var(--hd-font);
}

#addfeedback .modal-header,
#reportModal .modal-header {
  background: var(--hd-surface-green);
  border-bottom: 1px solid var(--hd-border-green);
}

#addfeedback .modal-title,
#reportModal .modal-title {
  font-weight: 800;
  color: var(--hd-ink-900);
}

#addfeedback textarea {
  width: 100%;
  border: 1.5px solid var(--hd-border-2);
  border-radius: var(--hd-r-sm);
  padding: .8rem 1rem;
  font-family: var(--hd-font);
  font-size: .92rem;
  outline: none;
  transition: border-color var(--hd-t) var(--hd-ease), box-shadow var(--hd-t) var(--hd-ease);
}

#addfeedback textarea:focus {
  border-color: var(--hd-brand);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .14);
}

#addfeedback .btn-success {
  background: var(--hd-gradient);
  border: none;
  border-radius: var(--hd-r-pill);
  font-weight: 700;
  padding: .6rem 1.4rem;
}

/* Entrance stagger for main column */
.hd-dash-main>* {
  animation: hd-fade-up .55s var(--hd-ease-out) both;
}

.hd-dash-main>*:nth-child(1) {
  animation-delay: .05s;
}

.hd-dash-main>*:nth-child(2) {
  animation-delay: .12s;
}

.hd-dash-main>*:nth-child(3) {
  animation-delay: .19s;
}

.hd-dash-main>*:nth-child(4) {
  animation-delay: .26s;
}

/* Responsive */
@media (max-width: 1200px) {
  .hd-dash-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hd-dash-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .hd-dash-layout {
    grid-template-columns: 1fr;
  }

  .hd-dash-sidebar {
    position: static;
  }

  .hd-dash-nav-toggle {
    display: inline-flex;
  }

  .hd-dash-nav {
    display: none;
    padding-top: 0;
  }

  .hd-dash-sidebar.nav-open .hd-dash-nav {
    display: block;
  }
}

@media (max-width: 680px) {
  .hd-dash-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hd-dash-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }

  .hd-dash-stat {
    padding: 1rem;
  }

  .hd-dash-stat-value {
    font-size: 1.3rem;
  }

  .hd-dash-welcome-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hd-dash-sidebar,
  .hd-dash-welcome,
  .hd-dash-main>* {
    animation: none !important;
  }
}

/* ==========================================================================
   FAMILY MEMBERS PAGE (account area)
   ========================================================================== */
/* Flash alerts inside the account shell */
.hd-dash-section .alert {
  border-radius: var(--hd-r-sm);
  border: 1px solid var(--hd-border);
  font-family: var(--hd-font);
  font-size: .9rem;
}

.hd-dash-section .alert-success {
  background: var(--hd-surface-green);
  border-color: var(--hd-border-green);
  color: var(--hd-brand-strong);
}

.hd-dash-section .alert-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.hd-dash-section .alert-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

/* Page header row: title + add button */
.hd-fam-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
}

.hd-fam-header-text h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--hd-ink-900);
  margin: 0 0 .3rem;
}

.hd-fam-header-text p {
  margin: 0;
  color: var(--hd-ink-500);
  font-size: .92rem;
}

/* Member cards */
.hd-fam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 1rem;
}

.hd-fam-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-lg);
  padding: 1.35rem 1.25rem 1.2rem;
  box-shadow: var(--hd-shadow-sm);
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), border-color var(--hd-t) var(--hd-ease);
}

.hd-fam-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--hd-gradient);
  opacity: 0;
  transition: opacity var(--hd-t) var(--hd-ease);
}

.hd-fam-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--hd-shadow-md);
  border-color: var(--hd-border-green);
}

.hd-fam-card:hover::before {
  opacity: 1;
}

.hd-fam-top {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .9rem;
}

.hd-fam-avatar {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-gradient);
  color: #fff;
  font-weight: 800;
  font-size: 1.25rem;
  box-shadow: var(--hd-shadow-green-sm);
}

.hd-fam-id {
  min-width: 0;
}

.hd-fam-id h3 {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--hd-ink-900);
  margin: 0 0 .3rem;
  overflow-wrap: anywhere;
}

.hd-fam-relation {
  display: inline-flex;
  padding: .18rem .6rem;
  border-radius: var(--hd-r-pill);
  background: var(--hd-surface-green);
  border: 1px solid var(--hd-border-green);
  color: var(--hd-brand-strong);
  font-size: .72rem;
  font-weight: 700;
}

.hd-fam-meta {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  gap: .45rem;
}

.hd-fam-meta li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--hd-ink-600);
  min-width: 0;
  overflow-wrap: anywhere;
}

.hd-fam-meta svg {
  color: var(--hd-brand);
  flex: 0 0 auto;
}

.hd-fam-actions {
  margin-top: auto;
  display: flex;
  gap: .6rem;
}

.hd-fam-btn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .58rem .5rem;
  border-radius: var(--hd-r-pill);
  font-family: var(--hd-font);
  font-weight: 700;
  font-size: .84rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--hd-t) var(--hd-ease);
}

.hd-fam-btn svg {
  width: .95em;
  height: .95em;
}

.hd-fam-btn-edit {
  border: 1.5px solid var(--hd-border-green);
  background: #fff;
  color: var(--hd-brand-strong);
}

.hd-fam-btn-edit:hover {
  background: var(--hd-gradient);
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--hd-shadow-green-sm);
}

.hd-fam-btn-delete {
  border: 1.5px solid #fecaca;
  background: #fff;
  color: #dc2626;
}

.hd-fam-btn-delete:hover {
  background: #dc2626;
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(220, 38, 38, .5);
}

/* Empty state */
.hd-fam-empty {
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 1rem;
}

.hd-fam-empty-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-gradient-soft);
  color: var(--hd-brand-strong);
  font-size: 2.3rem;
}

.hd-fam-empty h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--hd-ink-900);
  margin: 0 0 .4rem;
}

.hd-fam-empty p {
  color: var(--hd-ink-500);
  font-size: .92rem;
  margin: 0 0 1.4rem;
}

/* Add/Edit member modals — same fields, premium skin */
#addmember .modal-content,
#editmember .modal-content {
  border: none;
  border-radius: var(--hd-r-lg);
  overflow: hidden;
  font-family: var(--hd-font);
}

#addmember .modal-header,
#editmember .modal-header {
  background: var(--hd-surface-green);
  border-bottom: 1px solid var(--hd-border-green);
  padding: 1.1rem 1.5rem;
}

#addmember .modal-title,
#editmember .modal-title {
  font-weight: 800;
  color: var(--hd-ink-900);
  font-size: 1.05rem;
}

#addmember .modal-body,
#editmember .modal-body {
  padding: 1.5rem;
}

#addmember .form-group label,
#editmember .form-group label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--hd-ink-700);
  letter-spacing: .01em;
  margin: 0 0 .4rem;
}

#addmember .form-group input[type=text],
#editmember .form-group input[type=text],
#addmember .form-group input[type=email],
#editmember .form-group input[type=email],
#addmember .form-group input[type=date],
#editmember .form-group input[type=date],
#addmember .form-group select,
#editmember .form-group select {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 .9rem;
  font-family: var(--hd-font);
  font-size: .9rem;
  color: var(--hd-ink-800);
  background: #fff;
  border: 1.5px solid var(--hd-border-2);
  border-radius: var(--hd-r-sm);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--hd-t) var(--hd-ease), box-shadow var(--hd-t) var(--hd-ease);
}

#addmember .form-group input:focus,
#editmember .form-group input:focus,
#addmember .form-group select:focus,
#editmember .form-group select:focus {
  border-color: var(--hd-brand);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .14);
}

#addmember .form-group select,
#editmember .form-group select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
}

/* Gender radios (existing material-checkbox markup) */
#addmember .material-checkbox,
#editmember .material-checkbox {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  margin: 0 0 .4rem;
}

#addmember .material-checkbox .material-control-input,
#editmember .material-checkbox .material-control-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

#addmember .material-checkbox .material-control-indicator,
#editmember .material-checkbox .material-control-indicator {
  display: inline-block;
  position: static;
  transform: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--hd-border-2);
  background: #fff;
  transition: border-color var(--hd-t) var(--hd-ease), background var(--hd-t) var(--hd-ease), box-shadow var(--hd-t) var(--hd-ease);
}

#addmember .material-checkbox .material-control-input:checked~.material-control-indicator,
#editmember .material-checkbox .material-control-input:checked~.material-control-indicator {
  border-color: var(--hd-brand);
  background: var(--hd-brand);
  box-shadow: inset 0 0 0 4px #fff;
}

#addmember .material-checkbox .material-control-input:focus-visible~.material-control-indicator,
#editmember .material-checkbox .material-control-input:focus-visible~.material-control-indicator {
  box-shadow: inset 0 0 0 4px #fff, 0 0 0 4px rgba(16, 185, 129, .14);
}

#addmember .material-checkbox .description,
#editmember .material-checkbox .description {
  font-size: .88rem;
  color: var(--hd-ink-700);
  font-weight: 600;
}

#addmember .modal-footer,
#editmember .modal-footer {
  border-top: 1px solid var(--hd-border);
  padding: 1rem 1.5rem;
}

#addmember .btn-success,
#editmember .btn-success {
  background: var(--hd-gradient);
  border: none;
  border-radius: var(--hd-r-pill);
  font-family: var(--hd-font);
  font-weight: 700;
  font-size: .9rem;
  padding: .6rem 1.4rem;
  color: #fff;
  box-shadow: var(--hd-shadow-green-sm);
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), background var(--hd-t) var(--hd-ease);
}

#addmember .btn-success:hover,
#editmember .btn-success:hover {
  background: var(--hd-gradient-hover);
  transform: translateY(-2px);
  box-shadow: var(--hd-shadow-green);
}

#addmember .btn-danger,
#editmember .btn-danger {
  background: #fff;
  border: 1.5px solid #fecaca;
  color: #dc2626;
  border-radius: var(--hd-r-pill);
  font-family: var(--hd-font);
  font-weight: 700;
  font-size: .9rem;
  padding: .6rem 1.4rem;
  transition: all var(--hd-t) var(--hd-ease);
}

#addmember .btn-danger:hover,
#editmember .btn-danger:hover {
  background: #dc2626;
  border-color: transparent;
  color: #fff;
}

/* ==========================================================================
   ACCOUNT PAGES — shared pieces (addresses, home visit, prescription,
   profile, change password)
   ========================================================================== */

/* Generic premium form-modal skin (class-based so the layout's same-id
   member modal is never affected) */
.hd-form-modal .modal-content {
  border: none;
  border-radius: var(--hd-r-lg);
  overflow: hidden;
  font-family: var(--hd-font);
}

.hd-form-modal .modal-header {
  background: var(--hd-surface-green);
  border-bottom: 1px solid var(--hd-border-green);
  padding: 1.1rem 1.5rem;
}

.hd-form-modal .modal-title {
  font-weight: 800;
  color: var(--hd-ink-900);
  font-size: 1.05rem;
}

.hd-form-modal .modal-body {
  padding: 1.5rem;
}

.hd-form-modal .form-group label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--hd-ink-700);
  letter-spacing: .01em;
  margin: 0 0 .4rem;
}

.hd-form-modal .form-group label .reqfield {
  color: #dc2626;
}

.hd-form-modal .form-group input[type=text],
.hd-form-modal .form-group input[type=email],
.hd-form-modal .form-group input[type=date],
.hd-form-modal .form-group select {
  display: block;
  width: 100%;
  height: 46px;
  padding: 0 .9rem;
  font-family: var(--hd-font);
  font-size: .9rem;
  color: var(--hd-ink-800);
  background: #fff;
  border: 1.5px solid var(--hd-border-2);
  border-radius: var(--hd-r-sm);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--hd-t) var(--hd-ease), box-shadow var(--hd-t) var(--hd-ease);
}

.hd-form-modal .form-group input:focus,
.hd-form-modal .form-group select:focus {
  border-color: var(--hd-brand);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .14);
}

.hd-form-modal .form-group select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
}

.hd-form-modal .material-checkbox {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  margin: 0 0 .4rem;
}

.hd-form-modal .material-checkbox .material-control-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.hd-form-modal .material-checkbox .material-control-indicator {
  display: inline-block;
  position: static;
  transform: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--hd-border-2);
  background: #fff;
  transition: border-color var(--hd-t) var(--hd-ease), background var(--hd-t) var(--hd-ease), box-shadow var(--hd-t) var(--hd-ease);
}

.hd-form-modal .material-checkbox .material-control-input:checked~.material-control-indicator {
  border-color: var(--hd-brand);
  background: var(--hd-brand);
  box-shadow: inset 0 0 0 4px #fff;
}

.hd-form-modal .material-checkbox .description {
  font-size: .88rem;
  color: var(--hd-ink-700);
  font-weight: 600;
}

.hd-form-modal .modal-footer {
  border-top: 1px solid var(--hd-border);
  padding: 1rem 1.5rem;
}

.hd-form-modal .btn-success {
  background: var(--hd-gradient);
  border: none;
  border-radius: var(--hd-r-pill);
  font-family: var(--hd-font);
  font-weight: 700;
  font-size: .9rem;
  padding: .6rem 1.4rem;
  color: #fff;
  box-shadow: var(--hd-shadow-green-sm);
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), background var(--hd-t) var(--hd-ease);
}

.hd-form-modal .btn-success:hover {
  background: var(--hd-gradient-hover);
  transform: translateY(-2px);
  box-shadow: var(--hd-shadow-green);
}

.hd-form-modal .btn-danger {
  background: #fff;
  border: 1.5px solid #fecaca;
  color: #dc2626;
  border-radius: var(--hd-r-pill);
  font-family: var(--hd-font);
  font-weight: 700;
  font-size: .9rem;
  padding: .6rem 1.4rem;
  transition: all var(--hd-t) var(--hd-ease);
}

.hd-form-modal .btn-danger:hover {
  background: #dc2626;
  border-color: transparent;
  color: #fff;
}

/* Location-picker maps inside the address modals */
.hd-form-modal #us2,
.hd-form-modal #us2_edit {
  width: 100% !important;
  height: 220px !important;
  border-radius: var(--hd-r-sm);
  border: 1px solid var(--hd-border);
}

.hd-form-modal .map {
  margin-bottom: .5rem;
}

/* Home-visit status pills (existing bootstrap button markup) */
.hd-fam-card .btn-sm {
  pointer-events: none;
  border: none;
  border-radius: var(--hd-r-pill);
  font-family: var(--hd-font);
  font-weight: 700;
  font-size: .74rem;
  padding: .32rem .75rem;
}

.hd-fam-card .btn-warning {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.hd-fam-card .btn-success {
  background: var(--hd-surface-green);
  color: var(--hd-brand-strong);
  border: 1px solid var(--hd-border-green);
}

.hd-fam-card .btn-danger {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.hd-fam-card .btn-primary {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.hd-fam-status {
  margin-bottom: .9rem;
}

/* Account forms (profile, change password) inside a hd-dash-card */
.hd-dash-form .hd-auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.1rem;
}

.hd-dash-form label {
  display: block;
  font-family: var(--hd-font);
  font-size: .8rem;
  font-weight: 700;
  color: var(--hd-ink-700);
  letter-spacing: .01em;
  margin: 0 0 .4rem;
}

.hd-dash-form label .reqfield {
  color: #dc2626;
}

.hd-dash-form input[type=text],
.hd-dash-form input[type=email],
.hd-dash-form input[type=password] {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 1rem;
  font-family: var(--hd-font);
  font-size: .92rem;
  color: var(--hd-ink-800);
  background: #fff;
  border: 1.5px solid var(--hd-border-2);
  border-radius: var(--hd-r-sm);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--hd-t) var(--hd-ease), box-shadow var(--hd-t) var(--hd-ease);
}

.hd-dash-form input:focus {
  border-color: var(--hd-brand);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .14);
}

.hd-dash-form-actions {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}

.hd-dash-form .theme-btn-one {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.6rem;
  border: none;
  cursor: pointer;
  border-radius: var(--hd-r-pill);
  background: var(--hd-gradient);
  color: #fff;
  font-family: var(--hd-font);
  font-size: .95rem;
  font-weight: 700;
  box-shadow: var(--hd-shadow-green-sm);
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), background var(--hd-t) var(--hd-ease);
}

.hd-dash-form .theme-btn-one:hover {
  background: var(--hd-gradient-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--hd-shadow-green);
}

.hd-dash-form .theme-btn-one svg {
  width: 1.05em;
  height: 1.05em;
}

.hd-dash-form .cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .75rem 1.5rem;
  border-radius: var(--hd-r-pill);
  background: #fff;
  border: 1.5px solid var(--hd-border-2);
  color: var(--hd-ink-600);
  font-family: var(--hd-font);
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--hd-t) var(--hd-ease);
}

.hd-dash-form .cancel-btn:hover {
  border-color: var(--hd-border-green);
  color: var(--hd-brand-strong);
  background: var(--hd-surface-green);
}

/* Profile picture uploader (existing markup, premium skin) */
.hd-dash-form .upload-btn-wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.hd-dash-form .upload-btn-wrapper .btn.imgcatlog {
  border: none;
  background: none;
  padding: 0;
  cursor: default;
}

.hd-dash-form .imgsize {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
  padding: 0;
  box-shadow: 0 0 0 3px var(--hd-brand), var(--hd-shadow-green-sm);
  background: #fff;
}

.hd-dash-form input[type=file] {
  font-family: var(--hd-font);
  font-size: .85rem;
  color: var(--hd-ink-600);
  border: 1.5px dashed var(--hd-border-2);
  border-radius: var(--hd-r-sm);
  padding: .7rem .9rem;
  background: var(--hd-surface-2);
  max-width: 320px;
  transition: border-color var(--hd-t) var(--hd-ease);
}

.hd-dash-form input[type=file]:hover {
  border-color: var(--hd-brand);
}

.hd-dash-form input[type=file]::file-selector-button {
  border: none;
  border-radius: var(--hd-r-pill);
  background: var(--hd-gradient);
  color: #fff;
  font-family: var(--hd-font);
  font-weight: 700;
  font-size: .8rem;
  padding: .45rem .9rem;
  margin-right: .8rem;
  cursor: pointer;
}

@media (max-width: 680px) {
  .hd-dash-form .hd-auth-grid {
    grid-template-columns: 1fr;
  }
}

/* Wider tracks for address/visit/prescription cards; narrow password form */
.hd-addr-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.hd-pass-grid {
  max-width: 520px;
}

/* ==========================================================================
   CHECKOUT — CSS-only reskin over the existing wired markup.
   Everything scoped under .hd-checkout so page-local styles are outranked
   by specificity without touching any JS-bound structure.
   ========================================================================== */
section.hd-checkout {
  font-family: var(--hd-font);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1000px 480px at 92% -10%, rgba(16, 185, 129, .12), transparent 60%),
    linear-gradient(180deg, var(--hd-surface-green) 0%, var(--hd-surface-2) 30%, var(--hd-surface-2) 100%) !important;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 3.75rem);
}

.hd-checkout * {
  box-sizing: border-box;
}

.hd-checkout .auto-container {
  max-width: var(--hd-container);
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3.5vw, 2.5rem);
}

.hd-checkout-head {
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.hd-checkout-sub {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: .45rem 0 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--hd-ink-500);
}

.hd-checkout-sub svg {
  color: var(--hd-brand);
}

/* Error banner (#msg keeps its show/hide JS; inline styles overridden) */
.hd-checkout #msg {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca;
  border-radius: var(--hd-r-sm);
  font-weight: 600;
  font-size: .9rem;
}

.hd-checkout .alert {
  border-radius: var(--hd-r-sm);
  font-family: var(--hd-font);
}

/* --- Step panels (existing accordion) --- */
.hd-checkout .panel {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-lg);
  box-shadow: var(--hd-shadow-sm);
  margin-bottom: 1rem;
}

.hd-checkout .panel-heading {
  padding: .35rem .5rem;
}

.hd-checkout .panel-title {
  margin: 0;
}

.hd-checkout .panel-title>a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem .9rem !important;
  font-family: var(--hd-font);
  font-size: .98rem !important;
  font-weight: 800;
  color: var(--hd-ink-900);
  text-decoration: none;
  letter-spacing: -.01em;
}

.hd-checkout .panel-title>a i {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--hd-r-sm);
  background: var(--hd-gradient-soft);
  color: var(--hd-brand-strong);
  font-size: .95rem;
}

.hd-checkout .panel-body {
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--hd-border);
}

.hd-checkout .panel-body label {
  font-family: var(--hd-font);
  font-size: .85rem;
  font-weight: 600;
  color: var(--hd-ink-700);
}

.hd-checkout lable {
  color: var(--hd-ink-700);
  font-weight: 700;
  letter-spacing: .01em;
}

/* --- Inputs: every text/tel/number/date/select becomes a boxed field --- */
.hd-checkout .panel-body input[type=text],
.hd-checkout .panel-body input[type=tel],
.hd-checkout .panel-body input[type=number],
.hd-checkout .panel-body input[type=date],
.hd-checkout .panel-body select {
  display: block;
  width: 100%;
  height: 44px !important;
  padding: 0 .9rem !important;
  font-family: var(--hd-font);
  font-size: .9rem !important;
  color: var(--hd-ink-800);
  background: #fff !important;
  border: 1.5px solid var(--hd-border-2) !important;
  border-radius: var(--hd-r-sm) !important;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--hd-t) var(--hd-ease), box-shadow var(--hd-t) var(--hd-ease);
}

.hd-checkout .panel-body input:focus,
.hd-checkout .panel-body select:focus {
  border-color: var(--hd-brand) !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .14) !important;
}

.hd-checkout .panel-body select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .9rem center !important;
}

/* Guest OTP boxes */
.hd-checkout .otp-container {
  gap: .7rem;
  margin-top: .6rem;
}

.hd-checkout .otp-input {
  width: 52px !important;
  height: 54px !important;
  font-size: 1.4rem !important;
  font-weight: 800;
  color: var(--hd-ink-900);
  border: 1.5px solid var(--hd-border-2) !important;
  border-radius: var(--hd-r-sm) !important;
  caret-color: var(--hd-brand);
  transition: border-color var(--hd-t) var(--hd-ease), box-shadow var(--hd-t) var(--hd-ease);
}

.hd-checkout .otp-input:focus {
  border-color: var(--hd-brand) !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .14);
}

.hd-checkout .gender-container label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-right: 1rem;
  font-weight: 600;
}

.hd-checkout .gender-container input[type=radio] {
  accent-color: var(--hd-brand);
  width: 17px;
  height: 17px;
}

/* --- Buttons --- */
.hd-checkout .theme-btn-one {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .6rem 1.35rem !important;
  border: none;
  cursor: pointer;
  border-radius: var(--hd-r-pill) !important;
  background: var(--hd-gradient) !important;
  color: #fff !important;
  font-family: var(--hd-font) !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  box-shadow: var(--hd-shadow-green-sm) !important;
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), background var(--hd-t) var(--hd-ease);
}

.hd-checkout .theme-btn-one:hover {
  background: var(--hd-gradient-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--hd-shadow-green) !important;
}

.hd-checkout #dropdownMenuButton {
  border-radius: var(--hd-r-pill);
  border: 1.5px solid var(--hd-border-green);
  background: #fff;
  color: var(--hd-brand-strong);
  font-family: var(--hd-font);
  font-weight: 700;
  font-size: .85rem;
  padding: .55rem 1.1rem;
  transition: all var(--hd-t) var(--hd-ease);
}

.hd-checkout #dropdownMenuButton:hover {
  background: var(--hd-surface-green);
}

/* --- Cards inside steps --- */
.hd-checkout .card-box,
.hd-checkout .card-box-member,
.hd-checkout .card-box-city {
  background: #fff;
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-md);
  box-shadow: var(--hd-shadow-xs);
  transition: border-color var(--hd-t) var(--hd-ease), box-shadow var(--hd-t) var(--hd-ease);
}

.hd-checkout .card-box-member:hover {
  border-color: var(--hd-border-green);
  box-shadow: var(--hd-shadow-sm);
}

.hd-checkout .card-box-member label {
  cursor: pointer;
}

/* Brand accents on the page's custom controls */
.hd-checkout input[type="checkbox"] {
  border-color: var(--hd-border-2);
}

.hd-checkout input[type="checkbox"]:checked {
  background-color: var(--hd-brand) !important;
  border-color: var(--hd-brand) !important;
}

.hd-checkout .yellow-radio {
  accent-color: var(--hd-brand);
}

.hd-checkout .yellow-radio:checked {
  accent-color: var(--hd-brand) !important;
}

.hd-checkout input[type=radio] {
  accent-color: var(--hd-brand);
}

/* Address dropdown + selected pills */
.hd-checkout .dropdown-menu {
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-md);
  box-shadow: var(--hd-shadow-md);
  padding: .5rem;
}

.hd-checkout .dropdown-item {
  border-bottom: 1px dashed var(--hd-border-2);
  border-radius: var(--hd-r-xs);
  padding: .55rem .6rem;
}

.hd-checkout .dropdown-item:last-child {
  border-bottom: none;
}

.hd-checkout .dropdown-item:hover {
  background: var(--hd-surface-green);
}

.hd-checkout .house-number,
.hd-checkout .house-number-select {
  display: inline-block;
  background: var(--hd-gradient) !important;
  color: #fff;
  border-radius: var(--hd-r-pill) !important;
  padding: 2px 10px !important;
  font-weight: 700 !important;
  font-size: .74rem !important;
}

.hd-checkout .address-details {
  color: var(--hd-ink-600);
}

.hd-checkout #cardA i.fa-check {
  color: var(--hd-brand) !important;
}

/* Payment method rows as selectable cards */
.hd-checkout .cc-selectors .row {
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--hd-border);
  border-radius: var(--hd-r-md);
  padding: .8rem 1rem;
  margin: 0 0 .7rem !important;
  transition: border-color var(--hd-t) var(--hd-ease), box-shadow var(--hd-t) var(--hd-ease);
}

.hd-checkout .cc-selectors .row:hover {
  border-color: var(--hd-border-green);
  box-shadow: var(--hd-shadow-xs);
}

.hd-checkout .cc-selectors input[type=radio] {
  width: 18px;
  height: 18px;
  accent-color: var(--hd-brand);
}

.hd-checkout .cc-selectors label {
  margin: 0 0 0 .6rem !important;
  font-weight: 700;
  color: var(--hd-ink-800);
  cursor: pointer;
}

/* Trust badges under Book Now */
.hd-checkout-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  margin-top: 1.1rem;
}

.hd-checkout-trust span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--hd-ink-500);
}

.hd-checkout-trust svg {
  color: var(--hd-brand);
  width: 1.05em;
  height: 1.05em;
}

/* --- Right column: sticky dark-emerald summary --- */
@media (min-width: 992px) {
  .hd-checkout .sidebar-side {
    position: sticky;
    top: 96px;
    align-self: flex-start;
  }
}

.hd-checkout .clinic-sidebar {
  margin-bottom: 1rem;
}

.hd-checkout .clinic-sidebar .form-widget {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--hd-green-800) 0%, var(--hd-brand-strong) 60%, var(--hd-brand) 100%);
  border-radius: var(--hd-r-lg);
  padding: 1.35rem 1.25rem;
  box-shadow: var(--hd-shadow-lg);
}

.hd-checkout .clinic-sidebar .form-widget::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .55) 1px, transparent 1.6px);
  background-size: 24px 24px;
}

.hd-checkout .clinic-sidebar .form-title {
  position: relative;
}

.hd-checkout .clinic-sidebar .form-title h3 {
  color: #fff !important;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: .35rem;
}

.hd-checkout .clinic-sidebar .form-title span,
.hd-checkout .clinic-sidebar .form-title p {
  color: rgba(255, 255, 255, .92) !important;
}

.hd-checkout .sidebar-side .team-block-three .inner-box {
  position: relative;
  background: rgba(255, 255, 255, .1) !important;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--hd-r-md);
  box-shadow: none;
  overflow: hidden;
}

.hd-checkout .sidebar-side .team-block-three .lower-content {
  padding: .85rem 1rem;
}

.hd-checkout .sidebar-side .team-block-three h5 a,
.hd-checkout .sidebar-side .team-block-three h3 a {
  color: #fff !important;
  font-weight: 700;
}

.hd-checkout .sidebar-side .team-block-three .designation {
  color: var(--hd-green-200) !important;
  font-size: .8rem;
}

.hd-checkout .sidebar-side .cart-item {
  border-top: 1px solid rgba(255, 255, 255, .16) !important;
  padding-top: .5rem;
  margin-top: .35rem;
}

.hd-checkout .sidebar-side .cart-item p {
  margin-bottom: .3rem;
}

.hd-checkout .sidebar-side .cart-item small {
  color: rgba(255, 255, 255, .75);
}

.hd-checkout .sidebar-side .member_Cart {
  margin-bottom: .75rem;
}

.hd-checkout .sidebar-side .fa-trash {
  opacity: .85;
  transition: opacity var(--hd-t) var(--hd-ease);
}

.hd-checkout .sidebar-side .fa-trash:hover {
  opacity: 1;
}

/* Totals block */
.hd-checkout .sidebar-side .name-box li.name {
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  padding: .45rem 0 !important;
}

.hd-checkout .sidebar-side .name-box li.name:last-child {
  border-bottom: none;
  padding-top: .6rem !important;
}

.hd-checkout .sidebar-side .name-box li.name:last-child h3 a,
.hd-checkout .sidebar-side .name-box li.name:last-child p {
  font-size: 1.1rem !important;
  font-weight: 800;
}

/* --- Coupon tickets in the modal --- */
.hd-form-modal .cardcp {
  border: 1.5px dashed var(--hd-border-green);
  border-radius: var(--hd-r-md);
  background: var(--hd-surface-green);
  padding: .9rem .8rem;
  margin: 0 .4rem .8rem;
  text-align: center;
  max-width: 200px;
}

.hd-form-modal .coupon-code {
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--hd-brand-strong);
  font-size: .95rem;
}

.hd-form-modal .coupon-value {
  font-size: .8rem;
  font-weight: 700;
  color: var(--hd-ink-800);
  margin-top: .2rem;
}

.hd-form-modal .coupon-type {
  font-size: .72rem;
  color: var(--hd-ink-500);
}

.hd-form-modal .apply-button {
  margin-top: .6rem;
  border: none;
  cursor: pointer;
  border-radius: var(--hd-r-pill);
  background: var(--hd-gradient);
  color: #fff;
  font-family: var(--hd-font);
  font-weight: 700;
  font-size: .78rem;
  padding: .45rem 1rem;
  box-shadow: var(--hd-shadow-green-sm);
  transition: transform var(--hd-t) var(--hd-ease-out), background var(--hd-t) var(--hd-ease);
}

.hd-form-modal .apply-button:hover {
  background: var(--hd-gradient-hover);
  transform: translateY(-1px);
}

.hd-form-modal .btn-close {
  border: none;
  background: none;
  font-weight: 700;
  color: var(--hd-ink-500);
  cursor: pointer;
}

.hd-form-modal .btn-secondary {
  border-radius: var(--hd-r-pill);
  font-family: var(--hd-font);
  font-weight: 700;
}

@media (max-width: 991px) {
  .hd-checkout .sidebar-side {
    margin-top: 1.25rem;
  }
}

@media (max-width: 680px) {
  .hd-checkout .otp-input {
    width: 46px !important;
    height: 50px !important;
  }

  .hd-checkout .panel-body {
    padding: .9rem 1rem 1.1rem;
  }
}

/* ==========================================================================
   CHECKOUT v2 — premium elevation pass (still zero functional changes)
   ========================================================================== */
/* Tighter page rhythm */
section.hd-checkout {
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.hd-checkout-head {
  margin-bottom: 1.1rem;
}

/* Step panels: 20px radius, numbered gradient chips, entrance stagger */
.hd-checkout .panel {
  border-radius: 20px;
  margin-bottom: .9rem;
  animation: hd-fade-up .5s var(--hd-ease-out) both;
}

.hd-checkout .panel:nth-child(1) {
  animation-delay: .03s;
}

.hd-checkout .panel:nth-child(2) {
  animation-delay: .09s;
}

.hd-checkout .panel:nth-child(3) {
  animation-delay: .15s;
}

.hd-checkout .panel:nth-child(4) {
  animation-delay: .21s;
}

.hd-checkout #accordion {
  counter-reset: hd-step;
}

.hd-checkout #accordion>.panel {
  counter-increment: hd-step;
}

.hd-checkout .panel-title>a {
  padding: 1rem 1.1rem !important;
  font-size: 1.02rem !important;
}

.hd-checkout .panel-title>a::before {
  content: counter(hd-step);
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--hd-gradient);
  color: #fff;
  font-size: .95rem;
  font-weight: 800;
  box-shadow: var(--hd-shadow-green-sm);
}

.hd-checkout .panel-title>a i {
  display: none;
}

.hd-checkout .panel-body {
  padding: 1.15rem 1.4rem 1.4rem;
}

/* Nested boxes become soft surfaces instead of border-on-border */
.hd-checkout .card-box,
.hd-checkout .card-box-city {
  background: var(--hd-surface-2);
  border: 1px solid transparent;
  border-radius: 16px;
  box-shadow: none;
  padding: 1rem 1.1rem;
}

/* --- Member tiles --- */
.hd-checkout .memberapend>div {
  padding-left: 8px;
  padding-right: 8px;
}

.hd-checkout .card-box-member {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--hd-border);
  border-radius: 16px;
  padding: .95rem 1rem;
  min-height: 0;
  box-shadow: var(--hd-shadow-xs);
  transition: transform var(--hd-t) var(--hd-ease-out), border-color var(--hd-t) var(--hd-ease), background var(--hd-t) var(--hd-ease), box-shadow var(--hd-t) var(--hd-ease);
}

.hd-checkout .card-box-member:hover {
  transform: translateY(-3px);
  border-color: var(--hd-border-green);
  box-shadow: var(--hd-shadow-sm);
}

.hd-checkout .card-box-member .row {
  display: flex;
  align-items: center;
  margin: 0;
}

.hd-checkout .card-box-member .col-2 {
  position: absolute;
  top: .65rem;
  right: .65rem;
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
}

.hd-checkout .card-box-member .col-10 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 1.4rem 0 0;
}

.hd-checkout .card-box-member label {
  display: flex !important;
  align-items: center;
  gap: .7rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--hd-ink-600);
}

.hd-checkout .card-box-member label b {
  font-size: .92rem;
  color: var(--hd-ink-900);
}

.hd-mem-avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-gradient);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  font-style: normal;
  box-shadow: var(--hd-shadow-green-sm);
}

.hd-mem-info {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Selected state (modern browsers; the brand checkbox itself is the fallback) */
.hd-checkout .card-box-member:has(input:checked) {
  border-color: var(--hd-brand);
  background: var(--hd-surface-green);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .14), var(--hd-shadow-sm);
}

/* Selected-address card */
.hd-checkout #cardA {
  background: linear-gradient(165deg, var(--hd-surface-green) 0%, #ffffff 80%);
  border: 1.5px solid var(--hd-border-green);
  border-radius: 16px;
  box-shadow: var(--hd-shadow-xs);
}

/* Date & time: icons inside the fields */
.hd-checkout #collection_date {
  padding-left: 2.7rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left .95rem center !important;
}

.hd-checkout #collection_time {
  padding-left: 2.7rem !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: left .95rem center, right .9rem center !important;
}

.hd-checkout .panel-body lable {
  display: block;
  margin: .35rem 0 .6rem;
  font-size: .78rem !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hd-brand-strong) !important;
}

/* Add Member as premium outlined button (Next stays gradient) */
.hd-checkout [data-target="#add_members"].theme-btn-one {
  background: #fff !important;
  color: var(--hd-brand-strong) !important;
  border: 1.5px solid var(--hd-border-green) !important;
  box-shadow: none !important;
}

.hd-checkout [data-target="#add_members"].theme-btn-one:hover {
  background: var(--hd-surface-green) !important;
  transform: translateY(-2px);
  box-shadow: var(--hd-shadow-xs) !important;
}

/* Payment methods: selectable cards with icons + active state */
.hd-checkout .cc-selectors .row {
  border-radius: 16px;
  padding: .95rem 1.1rem;
  cursor: pointer;
}

.hd-checkout .cc-selectors label {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}

.hd-checkout .cc-selectors label svg {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 9px;
  background: var(--hd-gradient-soft);
  color: var(--hd-brand-strong);
}

.hd-checkout .cc-selectors .row:has(input:checked) {
  border-color: var(--hd-brand);
  background: var(--hd-surface-green);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .14);
}

.hd-checkout .cc-selectors .row:has(input:checked) label svg {
  background: var(--hd-gradient);
  color: #fff;
}

/* Wallet & coupon rows inside payment step */
.hd-checkout #collapse4 .card-box .row {
  align-items: center;
}

.hd-checkout #collapse4 .card-box lable {
  margin-top: 0;
}

.hd-checkout #collapse4 .card-box a[data-target="#couponModal"] {
  color: var(--hd-brand-strong) !important;
  font-size: .8rem !important;
  font-weight: 700;
  text-decoration: none !important;
  border-bottom: 1.5px solid currentColor;
}

/* Book Now: full width + centered trust row */
.hd-checkout #btnappointment {
  margin-top: 1.1rem;
}

.hd-checkout #btnappointment .theme-btn-one {
  width: 100%;
  padding: .85rem 1.5rem !important;
  font-size: 1rem !important;
}

.hd-checkout-trust {
  justify-content: center;
}

/* --- Order summary refinement --- */
.hd-checkout .clinic-sidebar .form-widget {
  border-radius: 20px;
  padding: 1.5rem 1.4rem;
}

.hd-checkout .clinic-sidebar .form-title {
  background: none !important;
  padding: 0 !important;
  margin-bottom: .9rem;
}

.hd-checkout .clinic-sidebar .form-title h3 {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: 1.05rem !important;
  letter-spacing: .02em;
  margin-bottom: .2rem;
}

.hd-checkout .clinic-sidebar .form-title h3::before {
  content: "";
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: rgba(255, 255, 255, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E") center / 16px no-repeat;
  border: 1px solid rgba(255, 255, 255, .22);
}

.hd-checkout .sidebar-side .name-box li.name h3 {
  font-size: .88rem !important;
}

.hd-checkout .sidebar-side .name-box li.name h3 a {
  color: rgba(255, 255, 255, .82) !important;
  font-weight: 600;
}

.hd-checkout .sidebar-side .name-box li.name p {
  font-size: .95rem !important;
  font-weight: 700;
}

.hd-checkout .sidebar-side .name-box li.name:last-child {
  margin-top: .25rem;
  border-top: 1px solid rgba(255, 255, 255, .28);
}

.hd-checkout .sidebar-side .name-box li.name:last-child h3 a {
  color: #fff !important;
  font-weight: 800;
}

.hd-checkout .sidebar-side .name-box li.name:last-child p {
  font-size: 1.3rem !important;
}

@media (prefers-reduced-motion: reduce) {
  .hd-checkout .panel {
    animation: none !important;
  }

  .hd-checkout .card-box-member {
    transition: none;
  }
}

@media (max-width: 680px) {
  .hd-checkout .panel-body {
    padding: 1rem 1.1rem 1.2rem;
  }

  .hd-checkout .memberapend>div {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Single calendar icon: the field itself opens the picker (existing showPicker handler) */
.hd-checkout #collection_date::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}

/* ==========================================================================
   CHECKOUT v3 — borderless glass panels + selected-test price breakdown
   ========================================================================== */
/* Step cards: no visible grey outline, homepage-style soft depth */
.hd-checkout .panel {
  border: 1px solid rgba(255, 255, 255, .65);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 34px -16px rgba(15, 23, 42, .16), 0 2px 8px rgba(15, 23, 42, .04);
}

.hd-checkout .panel-body {
  border-top: 1px solid var(--hd-surface-3);
}

/* Selected test/package price breakdown (on the gradient widget) */
.hd-sel-breakdown {
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
  position: relative;
}

.hd-sel-breakdown li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font-size: .88rem;
  color: rgba(255, 255, 255, .85);
}

.hd-sel-breakdown li>span:last-child {
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

.hd-sel-strike {
  text-decoration: line-through;
  color: rgba(255, 255, 255, .6) !important;
  font-weight: 600 !important;
}

.hd-sel-badge {
  display: inline-flex;
  margin-left: .4rem;
  padding: .1rem .5rem;
  border-radius: var(--hd-r-pill);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .25);
  color: var(--hd-green-200);
  font-size: .68rem;
  font-weight: 800;
  font-style: normal;
  letter-spacing: .03em;
}

.hd-sel-save {
  color: var(--hd-green-200) !important;
}

.hd-sel-note {
  font-size: .78rem !important;
}

.hd-sel-note>span:last-child {
  font-weight: 500 !important;
  color: rgba(255, 255, 255, .65) !important;
  white-space: normal !important;
  text-align: right;
  font-size: .74rem;
}

.hd-sel-total {
  border-bottom: none !important;
  padding-top: .7rem !important;
}

.hd-sel-total>span:first-child {
  font-weight: 800;
  color: #fff;
  font-size: .95rem;
}

.hd-sel-total>span:last-child {
  font-size: 1.25rem;
  font-weight: 800;
}

.hd-sel-hint {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: .8rem 0 0;
  position: relative;
  font-size: .76rem;
  color: rgba(255, 255, 255, .75);
}

.hd-sel-hint svg {
  width: .95rem;
  height: .95rem;
  flex: 0 0 auto;
  color: var(--hd-green-200);
}

/* ==========================================================================
   TRACK APPOINTMENT
   ========================================================================== */
/* Dashboard table button */
.hd-dash-section .hd-track-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: var(--hd-r-pill);
  background: var(--hd-gradient);
  color: #fff !important;
  font-size: .76rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--hd-shadow-green-sm);
  white-space: nowrap;
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease);
}

.hd-dash-section .hd-track-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--hd-shadow-green);
}

.hd-dash-section .hd-track-btn svg {
  width: .9em;
  height: .9em;
}

/* Hero badge */
.hd-track-hero h2 {
  margin: .35rem 0 .4rem;
}

.hd-track-badge {
  display: inline-flex;
  align-items: center;
  padding: .4rem 1rem;
  border-radius: var(--hd-r-pill);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.hd-track-badge-done {
  background: #fff;
  color: var(--hd-brand-strong);
}

.hd-track-badge-progress {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
}

.hd-track-badge-pending {
  background: #fffbeb;
  color: #b45309;
}

.hd-track-badge-cancel {
  background: #fef2f2;
  color: #b91c1c;
}

.hd-track-hero-meta {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.hd-track-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255, 255, 255, .92);
  font-size: .9rem;
  font-weight: 600;
}

.hd-track-hero-meta svg {
  color: var(--hd-green-200);
}

/* Layout */
.hd-track-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1.25rem;
  align-items: start;
}

.hd-track-side {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

/* Timeline */
.hd-track-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.hd-track-timeline::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--hd-border-2);
  border-radius: 2px;
}

.hd-track-timeline li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 0 0 1.35rem 0;
  animation: hd-fade-up .5s var(--hd-ease-out) both;
}

.hd-track-timeline li:nth-child(1) {
  animation-delay: .05s;
}

.hd-track-timeline li:nth-child(2) {
  animation-delay: .1s;
}

.hd-track-timeline li:nth-child(3) {
  animation-delay: .15s;
}

.hd-track-timeline li:nth-child(4) {
  animation-delay: .2s;
}

.hd-track-timeline li:nth-child(5) {
  animation-delay: .25s;
}

.hd-track-timeline li:nth-child(6) {
  animation-delay: .3s;
}

.hd-track-timeline li:nth-child(7) {
  animation-delay: .35s;
}

.hd-track-timeline li:nth-child(8) {
  animation-delay: .4s;
}

.hd-track-timeline li:last-child {
  padding-bottom: 0;
}

.hd-track-node {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid var(--hd-border-2);
  color: var(--hd-ink-400);
  font-size: 1rem;
}

.hd-track-timeline li.is-done .hd-track-node {
  background: var(--hd-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--hd-shadow-green-sm);
}

.hd-track-timeline li.is-current .hd-track-node {
  border-color: var(--hd-brand);
  color: var(--hd-brand-strong);
  box-shadow: 0 0 0 5px rgba(16, 185, 129, .15);
  animation: hd-pulse 2.2s ease-out infinite;
}

.hd-track-timeline li.is-cancelled .hd-track-node {
  background: #dc2626;
  border-color: transparent;
  color: #fff;
}

.hd-track-step-body {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding-top: .35rem;
  min-width: 0;
}

.hd-track-step-label {
  font-weight: 700;
  font-size: .92rem;
  color: var(--hd-ink-400);
}

.hd-track-timeline li.is-done .hd-track-step-label {
  color: var(--hd-ink-900);
}

.hd-track-timeline li.is-current .hd-track-step-label {
  color: var(--hd-brand-strong);
}

.hd-track-timeline li.is-cancelled .hd-track-step-label {
  color: #b91c1c;
}

.hd-track-step-time {
  font-size: .78rem;
  color: var(--hd-ink-500);
  overflow-wrap: anywhere;
}

/* Booking details */
.hd-track-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: .7rem;
}

.hd-track-item {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--hd-surface-2);
  border-radius: var(--hd-r-md);
  padding: .8rem .9rem;
}

.hd-track-item-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--hd-r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-gradient-soft);
  color: var(--hd-brand-strong);
}

.hd-track-item-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.hd-track-item-body b {
  font-size: .9rem;
  color: var(--hd-ink-900);
  overflow-wrap: anywhere;
}

.hd-track-item-body small {
  font-size: .76rem;
  color: var(--hd-ink-500);
}

.hd-track-item-price {
  margin-left: auto;
  font-weight: 800;
  color: var(--hd-ink-900);
  white-space: nowrap;
}

.hd-track-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}

.hd-track-meta li {
  display: grid;
  grid-template-columns: 22px 130px minmax(0, 1fr);
  gap: .5rem;
  align-items: start;
  font-size: .86rem;
}

.hd-track-meta svg {
  color: var(--hd-brand);
  margin-top: 2px;
}

.hd-track-meta span {
  color: var(--hd-ink-500);
  font-weight: 600;
}

.hd-track-meta b {
  color: var(--hd-ink-800);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.hd-track-meta a {
  color: var(--hd-brand-strong);
  text-decoration: none;
  font-weight: 700;
}

/* Payment summary */
.hd-track-pay {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hd-track-pay li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--hd-border);
  font-size: .88rem;
  color: var(--hd-ink-600);
}

.hd-track-pay li:last-child {
  border-bottom: none;
}

.hd-track-pay b {
  color: var(--hd-ink-900);
  font-weight: 700;
  white-space: nowrap;
}

.hd-track-save {
  color: var(--hd-brand-strong) !important;
}

.hd-track-pay-total {
  border-top: 2px solid var(--hd-border-2);
}

.hd-track-pay-total span {
  font-weight: 800;
  color: var(--hd-ink-900);
}

.hd-track-pay-total b {
  font-size: 1.2rem;
}

/* Actions */
.hd-track-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.hd-track-actions .premium-btn {
  padding: .65rem 1.1rem;
  font-size: .86rem;
}

@media (max-width: 1200px) {
  .hd-track-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hd-track-timeline li {
    animation: none !important;
  }

  .hd-track-timeline li.is-current .hd-track-node {
    animation: none;
  }
}

/* ==========================================================================
   NEED HELP CALLBACK MODAL (#needhelp)
   ========================================================================== */
.hd-help-modal .modal-dialog { max-width: 420px; }
.hd-help-modal .modal-content {
  border: none; border-radius: 20px; overflow: hidden;
  font-family: var(--hd-font);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 40px 80px -30px rgba(5,150,105,.4), var(--hd-shadow-lg);
}
/* Smooth scale-in on open (bootstrap fade drives opacity) */
.hd-help-modal.fade .modal-dialog { transform: translateY(14px) scale(.97); transition: transform .28s var(--hd-ease-out); }
.hd-help-modal.show .modal-dialog { transform: none; }

/* Gradient header */
.hd-help-head {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: .9rem;
  background: linear-gradient(135deg, var(--hd-green-800) 0%, var(--hd-brand-strong) 55%, var(--hd-brand) 100%);
  border: none; padding: 1.25rem 3rem 1.25rem 1.25rem;
}
.hd-help-glow { position: absolute; width: 200px; height: 200px; border-radius: 50%; top: -90px; right: -50px; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 68%); pointer-events: none; }
.hd-help-icon {
  position: relative; flex: 0 0 auto;
  width: 48px; height: 48px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-size: 1.3rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hd-help-head-text { position: relative; min-width: 0; }
.hd-help-modal .modal-title { color: #fff; font-weight: 800; font-size: 1.08rem; letter-spacing: -.01em; margin: 0 0 .15rem; }
.hd-help-head-text p { margin: 0; color: rgba(255,255,255,.85); font-size: .8rem; line-height: 1.45; }
.hd-help-close {
  position: absolute; top: .9rem; right: .9rem;
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25);
  color: #fff !important; font-size: 1.2rem; font-weight: 500;
  opacity: 1 !important; text-shadow: none; line-height: 1;
  transition: background var(--hd-t) var(--hd-ease), transform var(--hd-t) var(--hd-ease-out);
}
.hd-help-close:hover { background: rgba(255,255,255,.28); transform: rotate(90deg); color: #fff; }

/* Body */
.hd-help-body { padding: 1.35rem 1.35rem 1.25rem; text-align: left; }
.hd-help-sub { margin: 0 0 1rem; font-size: .86rem; color: var(--hd-ink-500); line-height: 1.55; }
.hd-help-field { position: relative; margin-bottom: .9rem; }
.hd-help-field > svg {
  position: absolute; left: .95rem; top: 50%; transform: translateY(-50%);
  width: 1.05rem; height: 1.05rem; color: var(--hd-brand); pointer-events: none; z-index: 1;
}
.hd-help-modal .hd-help-field input.form-control {
  height: 48px; padding: 0 1rem 0 2.6rem;
  font-family: var(--hd-font); font-size: .92rem; color: var(--hd-ink-800);
  background: #fff; border: 1.5px solid var(--hd-border-2); border-radius: var(--hd-r-sm);
  box-shadow: none; text-align: left;
  transition: border-color var(--hd-t) var(--hd-ease), box-shadow var(--hd-t) var(--hd-ease);
}
.hd-help-modal .hd-help-field input.form-control:focus {
  border-color: var(--hd-brand);
  box-shadow: 0 0 0 4px rgba(16,185,129,.14);
  outline: none;
}
.hd-help-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; height: 50px; margin-top: .2rem;
  border: none; cursor: pointer;
  border-radius: var(--hd-r-pill);
  background: var(--hd-gradient); color: #fff;
  font-family: var(--hd-font); font-size: .95rem; font-weight: 700;
  box-shadow: var(--hd-shadow-green-sm);
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), background var(--hd-t) var(--hd-ease);
}
.hd-help-submit:hover { background: var(--hd-gradient-hover); transform: translateY(-2px); box-shadow: var(--hd-shadow-green); }
.hd-help-submit svg { width: 1.05em; height: 1.05em; transition: transform var(--hd-t) var(--hd-ease-out); }
.hd-help-submit:hover svg { transform: translateX(3px); }

/* Divider + direct contacts */
.hd-help-divider {
  display: flex; align-items: center; gap: .9rem;
  margin: 1.1rem 0 .9rem; color: var(--hd-ink-400);
  font-size: .76rem; font-weight: 600;
}
.hd-help-divider::before, .hd-help-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--hd-border); }
.hd-help-contacts { display: flex; gap: .7rem; }
.hd-help-call, .hd-help-wa {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .65rem .5rem; border-radius: var(--hd-r-pill);
  font-family: var(--hd-font); font-size: .85rem; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  transition: all var(--hd-t) var(--hd-ease);
}
.hd-help-call { border: 1.5px solid var(--hd-border-green); background: #fff; color: var(--hd-brand-strong); }
.hd-help-call:hover { background: var(--hd-gradient); border-color: transparent; color: #fff; transform: translateY(-2px); }
.hd-help-call svg { width: 1em; height: 1em; }
.hd-help-wa { border: 1.5px solid #bbf3cd; background: #f0fdf4; color: #16a34a; }
.hd-help-wa:hover { background: #25d366; border-color: transparent; color: #fff; transform: translateY(-2px); }
.hd-help-wa .fab { font-size: 1.05rem; }
.hd-help-trust {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  margin: 1rem 0 0; font-size: .74rem; font-weight: 600; color: var(--hd-ink-500);
}
.hd-help-trust svg { width: .95em; height: .95em; color: var(--hd-brand); }

@media (max-width: 480px) {
  .hd-help-contacts { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-help-modal.fade .modal-dialog { transition: none; transform: none; }
  .hd-help-close:hover { transform: none; }
}

/* ==========================================================================
   DOWNLOAD REPORT MODULE (login step-toggle + dashboard + details)
   ========================================================================== */

/* Two-step login card: hide the OTP step until JS reveals it */
.hd-auth-card .otp { display: none; }
.hd-rpt-otp-sent {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-bottom: 1.1rem; padding: .8rem .95rem;
  background: #f0fdf4; border: 1px solid var(--hd-border-green); border-radius: var(--hd-r-sm);
  color: var(--hd-ink-700, #1f2937);
}
.hd-rpt-otp-sent svg { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; color: var(--hd-brand); margin-top: .1rem; }
.hd-rpt-otp-sent p { margin: 0; font-size: .85rem; line-height: 1.5; }
.hd-rpt-otp-boxes { justify-content: flex-start; }
.hd-rpt-message { display: none; margin-top: 1rem; }

/* User summary card */
.hd-rpt-user {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem; margin-bottom: 1.5rem;
}
.hd-rpt-user-id { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.hd-rpt-user-id .hd-fam-avatar { width: 56px; height: 56px; font-size: 1.35rem; flex: 0 0 auto; }
.hd-rpt-user-text h2 { margin: 0 0 .3rem; font-size: 1.2rem; font-weight: 800; color: var(--hd-ink-800); }
.hd-rpt-user-text ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.hd-rpt-user-text ul li { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; color: var(--hd-ink-500); }
.hd-rpt-user-text ul li svg { width: .95em; height: .95em; color: var(--hd-brand); }
.hd-rpt-user-stats { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.hd-rpt-user-stat { display: flex; align-items: center; gap: .7rem; }
.hd-rpt-user-stat .hd-dash-stat-icon { position: static; margin: 0; }
.hd-rpt-user-stat .hd-dash-stat-value { font-size: 1.35rem; line-height: 1.1; }
.hd-rpt-user-stat .hd-dash-stat-label { font-size: .72rem; }
.hd-rpt-stat-date { font-size: 1rem !important; }

/* Reports grid */
.hd-rpt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.35rem; }
.hd-rpt-card { display: flex; flex-direction: column; gap: 1.1rem; }
.hd-rpt-hero { margin-bottom: 1.5rem; }
.hd-rpt-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .9rem; }
.hd-rpt-card-title h3 { margin: 0 0 .4rem; font-size: 1.08rem; font-weight: 800; color: var(--hd-ink-800); }
.hd-rpt-ids { display: flex; flex-wrap: wrap; gap: .9rem; }
.hd-rpt-ids span { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--hd-ink-500); }
.hd-rpt-ids svg { width: .9em; height: .9em; color: var(--hd-brand); }

.hd-rpt-badges { display: flex; flex-wrap: wrap; gap: .5rem; flex: 0 0 auto; }
.hd-rpt-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .8rem; border-radius: var(--hd-r-pill);
  font-size: .76rem; font-weight: 700; white-space: nowrap;
}
.hd-rpt-badge svg { width: .95em; height: .95em; }
.hd-rpt-badge-ready { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.hd-rpt-badge-processing { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.hd-rpt-badge-pending { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.hd-rpt-badge-due { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.hd-rpt-badge-delivered { background: #eef2ff; color: #4f46e5; border: 1px solid #c7d2fe; }

.hd-rpt-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.hd-rpt-meta li { display: flex; align-items: flex-start; gap: .65rem; font-size: .84rem; }
.hd-rpt-meta li svg { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: .15rem; color: var(--hd-brand); }
.hd-rpt-meta li span { flex: 0 0 auto; min-width: 130px; color: var(--hd-ink-400); }
.hd-rpt-meta li strong { color: var(--hd-ink-800); font-weight: 700; }
.hd-rpt-meta li strong em { font-weight: 500; font-style: normal; color: var(--hd-ink-500); }
.hd-rpt-meta-col li span { min-width: 150px; }

/* Pending / processing progress */
.hd-rpt-progress {
  padding: .9rem 1rem; border-radius: var(--hd-r-sm);
  background: #fafaf9; border: 1px dashed var(--hd-border-2);
}
.hd-rpt-progress-track { display: flex; align-items: center; gap: 6px; margin-bottom: .65rem; }
.hd-rpt-progress-step { flex: 1 1 0; height: 5px; border-radius: 3px; background: var(--hd-border-2); }
.hd-rpt-progress-step.done { background: var(--hd-gradient); }
.hd-rpt-progress p { margin: 0; display: flex; align-items: flex-start; gap: .5rem; font-size: .8rem; color: var(--hd-ink-500); line-height: 1.5; }
.hd-rpt-progress p svg { flex: 0 0 auto; width: 1rem; height: 1rem; color: var(--hd-brand); margin-top: .1rem; }

/* Actions row */
.hd-rpt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: auto; padding-top: .3rem; }
.hd-rpt-note { font-size: .82rem; color: var(--hd-ink-500); display: inline-flex; align-items: center; gap: .4rem; }
.hd-rpt-note svg { width: 1rem; height: 1rem; color: var(--hd-brand); }
.hd-rpt-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1rem; border-radius: var(--hd-r-pill);
  border: 1.5px solid var(--hd-border-green); background: #fff; color: var(--hd-brand-strong);
  font-family: var(--hd-font); font-size: .82rem; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: all var(--hd-t) var(--hd-ease);
}
.hd-rpt-btn svg { width: 1em; height: 1em; }
.hd-rpt-btn:hover { background: var(--hd-gradient); border-color: transparent; color: #fff; transform: translateY(-2px); }
.hd-rpt-btn-primary { background: var(--hd-gradient); border-color: transparent; color: #fff; box-shadow: var(--hd-shadow-green-sm); }
.hd-rpt-btn-primary:hover { background: var(--hd-gradient-hover); box-shadow: var(--hd-shadow-green); }
.hd-rpt-btn-back { border-color: var(--hd-border-2); color: var(--hd-ink-500); margin-left: auto; }
.hd-rpt-btn-back:hover { background: var(--hd-ink-800); border-color: var(--hd-ink-800); color: #fff; }

/* Timeline (report details hero) */
.hd-rpt-timeline { display: flex; gap: 0; padding: .5rem 0 .2rem; overflow-x: auto; }
.hd-rpt-tl-step { flex: 1 1 0; min-width: 140px; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 .5rem; }
.hd-rpt-tl-step::before {
  content: ""; position: absolute; top: 19px; left: -50%; width: 100%; height: 2px;
  background: var(--hd-border-2); z-index: 0;
}
.hd-rpt-tl-step:first-child::before { display: none; }
.hd-rpt-tl-step.done::before { background: var(--hd-brand); }
.hd-rpt-tl-dot {
  position: relative; z-index: 1;
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--hd-border-2); color: var(--hd-ink-400);
  margin-bottom: .55rem;
}
.hd-rpt-tl-dot svg { width: 1.05rem; height: 1.05rem; }
.hd-rpt-tl-step.done .hd-rpt-tl-dot { background: var(--hd-gradient); border-color: transparent; color: #fff; }
.hd-rpt-tl-step.current .hd-rpt-tl-dot { border-color: var(--hd-brand); color: var(--hd-brand); box-shadow: 0 0 0 4px rgba(16,185,129,.14); }
.hd-rpt-tl-text strong { display: block; font-size: .82rem; font-weight: 700; color: var(--hd-ink-800); }
.hd-rpt-tl-text small { display: block; margin-top: .2rem; font-size: .72rem; color: var(--hd-ink-400); }
.hd-rpt-tl-step.pending .hd-rpt-tl-text strong { color: var(--hd-ink-400); }

/* Details page grid + panels */
.hd-rpt-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.35rem; margin-bottom: 1.35rem; }
.hd-rpt-panel { margin-bottom: 1.35rem; }
.hd-rpt-detail-grid .hd-rpt-panel { margin-bottom: 0; }

.hd-rpt-tests { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.hd-rpt-tests li { display: flex; align-items: center; gap: .8rem; padding: .75rem .9rem; border-radius: var(--hd-r-sm); background: #fafaf9; border: 1px solid var(--hd-border); }
.hd-rpt-test-icon {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ecfdf5; color: var(--hd-brand-strong);
}
.hd-rpt-test-icon svg { width: 1.05rem; height: 1.05rem; }
.hd-rpt-test-name { flex: 1 1 auto; min-width: 0; }
.hd-rpt-test-name strong { display: block; font-size: .88rem; font-weight: 700; color: var(--hd-ink-800); }
.hd-rpt-test-name small { display: block; margin-top: .1rem; font-size: .74rem; color: var(--hd-ink-400); }
.hd-rpt-test-price { flex: 0 0 auto; font-size: .88rem; font-weight: 800; color: var(--hd-ink-800); }

@media (max-width: 992px) {
  .hd-rpt-grid { grid-template-columns: 1fr; }
  .hd-rpt-detail-grid { grid-template-columns: 1fr; }
  .hd-rpt-user { flex-direction: column; align-items: flex-start; }
  .hd-rpt-user-stats { width: 100%; justify-content: space-between; gap: 1rem; }
}
@media (max-width: 600px) {
  .hd-rpt-meta li span { min-width: 100px; }
  .hd-rpt-actions { flex-direction: column; align-items: stretch; }
  .hd-rpt-btn, .hd-rpt-actions .premium-btn { justify-content: center; }
  .hd-rpt-btn-back { margin-left: 0; }
  .hd-rpt-timeline { gap: .5rem; }
}

/* ==========================================================================
   CONTACT US PAGE
   ========================================================================== */

/* --- Hero --- */
.contact-hero-section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 5vw, 3.5rem);
  background: var(--hd-surface);
}
.contact-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.contact-hero-blob { position: absolute; border-radius: 50%; }
.contact-hero-blob-1 {
  width: 420px; height: 420px; top: -160px; right: -120px;
  background: radial-gradient(circle, rgba(16,185,129,.16), transparent 68%);
}
.contact-hero-blob-2 {
  width: 340px; height: 340px; bottom: -160px; left: -110px;
  background: radial-gradient(circle, rgba(5,150,105,.11), transparent 70%);
}
.contact-hero-pattern {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(5,150,105,.10) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(900px 560px at 82% 20%, #000, transparent 72%);
  mask-image: radial-gradient(900px 560px at 82% 20%, #000, transparent 72%);
}
.contact-hero-section > .auto-container { position: relative; max-width: var(--hd-container); }

.contact-hero-breadcrumb {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--hd-font); font-size: .84rem; font-weight: 600;
  color: var(--hd-ink-400); margin-bottom: 1.75rem;
}
.contact-hero-breadcrumb a { color: var(--hd-ink-500); text-decoration: none; transition: color var(--hd-t) var(--hd-ease); }
.contact-hero-breadcrumb a:hover { color: var(--hd-brand-strong); }
.contact-hero-breadcrumb svg { width: .85em; height: .85em; color: var(--hd-ink-400); }
.contact-hero-breadcrumb span { color: var(--hd-brand-strong); }

.contact-hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  align-items: center; gap: clamp(2rem, 4vw, 3.5rem);
}
.contact-hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem; margin-bottom: 1.25rem;
  background: var(--hd-surface-green); border: 1px solid var(--hd-border-green);
  border-radius: var(--hd-r-pill); color: var(--hd-brand-strong);
  font-family: var(--hd-font); font-size: .8rem; font-weight: 600;
}
.contact-hero-badge-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; color: #fff; background: var(--hd-gradient); border-radius: var(--hd-r-pill);
}
.contact-hero-badge-icon svg { width: .68rem; height: .68rem; }
.contact-hero-title {
  font-family: var(--hd-font); font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  font-size: clamp(2rem, 4.2vw, 3.1rem); color: var(--hd-ink-900); margin: 0 0 1rem;
}
.contact-hero-title-accent {
  background: var(--hd-gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.contact-hero-subtitle {
  font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.65; color: var(--hd-ink-500);
  max-width: 52ch; margin: 0 0 1.75rem;
}
.contact-hero-quicklinks { display: flex; flex-wrap: wrap; gap: .85rem; }

.contact-hero-visual {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 300px;
}
.contact-hero-visual-ring {
  width: 220px; height: 220px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(16,185,129,.14), rgba(16,185,129,0) 72%);
  border: 1.5px dashed var(--hd-border-green);
  animation: hd-contact-ring-spin 26s linear infinite;
}
@keyframes hd-contact-ring-spin { to { transform: rotate(360deg); } }
.contact-hero-visual-core {
  width: 128px; height: 128px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hd-gradient); color: #fff; box-shadow: var(--hd-shadow-green);
  animation: hd-contact-ring-spin-reverse 26s linear infinite;
}
@keyframes hd-contact-ring-spin-reverse { to { transform: rotate(-360deg); } }
.contact-hero-visual-core svg { width: 2.6rem; height: 2.6rem; }
.contact-hero-float {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px;
  background: #fff; box-shadow: var(--hd-shadow-md, var(--hd-shadow-sm));
  border: 1px solid var(--hd-border); color: var(--hd-brand-strong);
  animation: hd-float-bob 5s ease-in-out infinite;
}
.contact-hero-float svg { width: 1.3rem; height: 1.3rem; }
.contact-hero-float-1 { top: 6%; left: 4%; animation-delay: 0s; }
.contact-hero-float-2 { top: 12%; right: 2%; animation-delay: .5s; }
.contact-hero-float-3 { bottom: 10%; left: 0; animation-delay: 1s; }
.contact-hero-float-4 { bottom: 4%; right: 8%; animation-delay: 1.5s; }
@keyframes hd-float-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* --- Get In Touch section header + grid --- */
.contact-section-title-wrapper { max-width: 640px; }
.contact-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.5rem, 3vw, 2.25rem); align-items: start;
}

/* --- Form card --- */
.contact-form-card {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--hd-border);
  border-radius: 20px;
  box-shadow: var(--hd-shadow-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.contact-form-card-glow {
  position: absolute; top: -80px; right: -80px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(16,185,129,.16), transparent 70%); pointer-events: none;
}
.hd-contact-form { position: relative; }

.hd-float-field { position: relative; margin-top: .2rem; }
.hd-float-icon {
  position: absolute; left: 1rem; top: 1.55rem; transform: translateY(-50%);
  width: 1.05rem; height: 1.05rem; color: var(--hd-brand); pointer-events: none; z-index: 1;
  transition: color var(--hd-t) var(--hd-ease);
}
.hd-float-field-textarea .hd-float-icon { top: 1.7rem; }

.hd-contact-form .hd-float-field input.form-control,
.hd-contact-form .hd-float-field textarea.form-control {
  height: 56px; width: 100%; padding: 1.55rem 1rem .5rem 2.65rem;
  font-family: var(--hd-font); font-size: .92rem; color: var(--hd-ink-800);
  background: #fff; border: 1.5px solid var(--hd-border-2); border-radius: var(--hd-r-sm);
  box-shadow: none; transition: border-color var(--hd-t) var(--hd-ease), box-shadow var(--hd-t) var(--hd-ease);
}
.hd-contact-form .hd-float-field textarea.form-control { height: auto; min-height: 116px; resize: vertical; padding-top: 1.75rem; }
.hd-contact-form .hd-float-field input.form-control:focus,
.hd-contact-form .hd-float-field textarea.form-control:focus {
  border-color: var(--hd-brand); box-shadow: 0 0 0 4px rgba(16,185,129,.14); outline: none;
}
.hd-float-field label {
  position: absolute; left: 2.65rem; top: 1.55rem; transform: translateY(-50%);
  font-family: var(--hd-font); font-size: .92rem; color: var(--hd-ink-400);
  pointer-events: none; transition: all var(--hd-t) var(--hd-ease-out);
  background: transparent;
}
.hd-float-field-textarea label { top: 1.75rem; }
.hd-contact-form .hd-float-field input.form-control:focus + label,
.hd-contact-form .hd-float-field input.form-control:not(:placeholder-shown) + label,
.hd-contact-form .hd-float-field textarea.form-control:focus + label,
.hd-contact-form .hd-float-field textarea.form-control:not(:placeholder-shown) + label {
  top: .78rem; left: 2.65rem; font-size: .7rem; font-weight: 700;
  color: var(--hd-brand-strong); transform: translateY(0);
}
.hd-contact-form .hd-float-field input.form-control:focus ~ .hd-float-icon,
.hd-contact-form .hd-float-field textarea.form-control:focus ~ .hd-float-icon { color: var(--hd-brand-strong); }

/* --- CAPTCHA --- */
.hd-contact-captcha { margin-top: .3rem; }
.hd-contact-captcha-label { display: block; font-family: var(--hd-font); font-size: .8rem; font-weight: 700; color: var(--hd-ink-700, #374151); margin-bottom: .55rem; }
.hd-contact-captcha-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.hd-contact-captcha-img-wrap {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .6rem; background: #fafaf9; border: 1.5px solid var(--hd-border-2); border-radius: var(--hd-r-sm);
}
.hd-contact-captcha-img-wrap img { display: block; border-radius: 6px; }
.hd-contact-captcha-reload {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--hd-surface-green); color: var(--hd-brand-strong);
  transition: transform var(--hd-t) var(--hd-ease-out), background var(--hd-t) var(--hd-ease);
}
.hd-contact-captcha-reload:hover { background: var(--hd-gradient); color: #fff; transform: rotate(120deg); }
.hd-contact-captcha-reload svg { width: .95rem; height: .95rem; }
.hd-contact-form .hd-contact-captcha-input {
  flex: 1 1 180px; height: 46px; font-family: var(--hd-font); font-size: .9rem;
  border: 1.5px solid var(--hd-border-2); border-radius: var(--hd-r-sm); padding: 0 1rem;
}
.hd-contact-form .hd-contact-captcha-input:focus { border-color: var(--hd-brand); box-shadow: 0 0 0 4px rgba(16,185,129,.14); outline: none; }

/* --- Submit button (gradient, loading state) --- */
.hd-contact-submit {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; height: 54px; margin-top: .3rem; border: none; cursor: pointer;
  border-radius: var(--hd-r-pill); background: var(--hd-gradient); color: #fff;
  font-family: var(--hd-font); font-size: .98rem; font-weight: 700;
  box-shadow: var(--hd-shadow-green-sm);
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), background var(--hd-t) var(--hd-ease);
}
.hd-contact-submit:hover { background: var(--hd-gradient-hover); transform: translateY(-2px); box-shadow: var(--hd-shadow-green); }
.hd-contact-submit-icon { width: 1.05em; height: 1.05em; transition: transform var(--hd-t) var(--hd-ease-out); }
.hd-contact-submit:hover .hd-contact-submit-icon { transform: translateX(3px); }
.hd-contact-submit-spinner {
  display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: hd-contact-spin .7s linear infinite;
}
@keyframes hd-contact-spin { to { transform: rotate(360deg); } }
.hd-contact-submit.is-loading { cursor: default; opacity: .88; }
.hd-contact-submit.is-loading .hd-contact-submit-text,
.hd-contact-submit.is-loading .hd-contact-submit-icon { display: none; }
.hd-contact-submit.is-loading .hd-contact-submit-spinner { display: inline-block; }

/* --- Alert --- */
.hd-contact-alert {
  display: flex; align-items: flex-start; gap: .65rem;
  border-radius: var(--hd-r-sm); border: 1px solid var(--hd-border);
  font-family: var(--hd-font); font-size: .88rem; padding: .85rem 2.6rem .85rem 1rem;
  margin-bottom: 1.25rem;
}
.hd-contact-alert-icon svg { width: 1.1rem; height: 1.1rem; margin-top: .1rem; }
.hd-contact-alert.alert-success { background: var(--hd-surface-green); border-color: var(--hd-border-green); color: var(--hd-brand-strong); }
.hd-contact-alert.alert-danger { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.hd-contact-alert.alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }

/* --- Info column --- */
.contact-info-stack { display: flex; flex-direction: column; gap: 1rem; }
.contact-info-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 1.25rem; background: #fff; border: 1px solid var(--hd-border);
  border-radius: 18px; box-shadow: var(--hd-shadow-sm); text-decoration: none;
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), border-color var(--hd-t) var(--hd-ease);
}
a.contact-info-card:hover { transform: translateY(-4px); box-shadow: var(--hd-shadow-lg); border-color: var(--hd-border-green); }
.contact-info-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px; background: var(--hd-gradient); color: #fff;
}
.contact-info-icon svg { width: 1.3rem; height: 1.3rem; }
.contact-info-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.contact-info-text strong { font-family: var(--hd-font); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--hd-ink-400); }
.contact-info-text span { font-family: var(--hd-font); font-size: .96rem; font-weight: 600; color: var(--hd-ink-800); word-break: break-word; }
.contact-info-arrow { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; color: var(--hd-ink-400); transition: all var(--hd-t) var(--hd-ease); }
a.contact-info-card:hover .contact-info-arrow { color: var(--hd-brand-strong); transform: translate(2px, -2px); }
.contact-info-card-static { cursor: default; }
.contact-info-card-static:hover { transform: none; box-shadow: var(--hd-shadow-sm); border-color: var(--hd-border); }

.contact-map-card {
  border-radius: 18px; overflow: hidden; border: 1px solid var(--hd-border); box-shadow: var(--hd-shadow-sm);
  line-height: 0;
}
.contact-map-card iframe { width: 100%; height: 300px; border: 0; display: block; }

@media (max-width: 992px) {
  .contact-hero-grid { grid-template-columns: 1fr; }
  .contact-hero-visual { order: -1; min-height: 220px; }
  .contact-hero-visual-ring { width: 170px; height: 170px; }
  .contact-hero-visual-core { width: 96px; height: 96px; }
  .contact-hero-visual-core svg { width: 2rem; height: 2rem; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .contact-hero-quicklinks { flex-direction: column; align-items: stretch; }
  .contact-hero-quicklinks .premium-btn { justify-content: center; }
  .hd-contact-captcha-row { flex-direction: column; align-items: stretch; }
  .hd-contact-form .hd-contact-captcha-input { flex: none; height: 46px; }
  .contact-info-card { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-hero-visual-ring, .contact-hero-visual-core, .contact-hero-float { animation: none; }
}

/* ==========================================================================
   UPLOAD PRESCRIPTION PAGE
   ========================================================================== */
.hd-rx-hero-sub {
  margin: .5rem 0 0;
  max-width: 62ch;
  font-size: .96rem;
  line-height: 1.6;
  color: var(--hd-ink-500);
}

.hd-dash-section .hd-rx-upload-card,
.hd-dash-section .hd-rx-details-card {
  margin-bottom: 1.5rem;
}

/* Field grid reused from the auth-card pattern, scoped to this card only
   so its plain (non-icon) sibling rules elsewhere don't apply here. */
.hd-rx-details-card .hd-auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.1rem;
}

/* --- Upload zone --- */
.hd-rx-upload-grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  align-items: stretch;
}

.hd-rx-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  text-align: center;
  min-height: 220px;
  padding: 2rem 1.5rem;
  border: 2px dashed var(--hd-border-green);
  border-radius: var(--hd-r-lg);
  background: var(--hd-surface-green);
  cursor: pointer;
  transition: border-color var(--hd-t) var(--hd-ease), background var(--hd-t) var(--hd-ease), transform var(--hd-t) var(--hd-ease-out);
}

.hd-rx-dropzone:hover {
  border-color: var(--hd-brand);
  transform: translateY(-2px);
}

.hd-rx-dropzone.is-dragover {
  border-color: var(--hd-brand);
  background: #d9f7e6;
  transform: scale(1.01);
}

.hd-rx-dropzone.has-file {
  border-style: solid;
  border-color: var(--hd-brand);
}

.hd-rx-dropzone input[type=file] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.hd-rx-dropzone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--hd-gradient);
  color: #fff;
  box-shadow: var(--hd-shadow-green-sm);
}

.hd-rx-dropzone-icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.hd-rx-dropzone-title {
  font-family: var(--hd-font);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--hd-ink-800);
}

.hd-rx-dropzone-sub {
  font-family: var(--hd-font);
  font-size: .86rem;
  color: var(--hd-ink-500);
}

.hd-rx-dropzone-browse {
  color: var(--hd-brand-strong);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Selected file preview --- */
.hd-rx-preview {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-top: 1rem;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-sm);
  box-shadow: var(--hd-shadow-sm);
  animation: hd-fade-up .35s var(--hd-ease-out) both;
}

.hd-rx-preview-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--hd-surface-green);
  color: var(--hd-brand-strong);
}

.hd-rx-preview-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.hd-rx-preview-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.hd-rx-preview-info strong {
  font-family: var(--hd-font);
  font-size: .9rem;
  font-weight: 700;
  color: var(--hd-ink-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hd-rx-preview-info span {
  font-family: var(--hd-font);
  font-size: .78rem;
  color: var(--hd-ink-400);
}

.hd-rx-preview-remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: #fef2f2;
  color: #dc2626;
  transition: background var(--hd-t) var(--hd-ease), transform var(--hd-t) var(--hd-ease-out);
}

.hd-rx-preview-remove:hover {
  background: #fee2e2;
  transform: rotate(90deg);
}

.hd-rx-preview-remove svg {
  width: .95rem;
  height: .95rem;
}

/* --- Accepted formats info box --- */
.hd-rx-info-box {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin-top: 1rem;
  padding: .75rem .9rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--hd-r-sm);
  font-family: var(--hd-font);
  font-size: .82rem;
  color: #1d4ed8;
  line-height: 1.55;
}

.hd-rx-info-box svg {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .1rem;
}

/* --- Illustration --- */
.hd-rx-illustration {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  border-radius: var(--hd-r-lg);
  background: radial-gradient(circle, rgba(16,185,129,.10), transparent 72%);
}

.hd-rx-illu-core {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--hd-gradient);
  color: #fff;
  box-shadow: var(--hd-shadow-green);
}

.hd-rx-illu-core svg {
  width: 2.4rem;
  height: 2.4rem;
}

.hd-rx-illu-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--hd-border);
  box-shadow: var(--hd-shadow-sm);
  color: var(--hd-brand-strong);
  animation: hd-float-bob 5s ease-in-out infinite;
}

.hd-rx-illu-float svg {
  width: 1.15rem;
  height: 1.15rem;
}

.hd-rx-illu-float-1 { top: 6%; left: 10%; animation-delay: 0s; }
.hd-rx-illu-float-2 { top: 10%; right: 8%; animation-delay: .6s; }
.hd-rx-illu-float-3 { bottom: 10%; left: 20%; animation-delay: 1.2s; }

/* --- Submit --- */
.hd-rx-submit-row {
  margin-top: 1.5rem;
  display: flex;
}

.hd-rx-submit-row .hd-contact-submit {
  max-width: 340px;
}

/* --- Trust row --- */
.hd-rx-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.hd-rx-trust-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-lg);
  box-shadow: var(--hd-shadow-sm);
  font-family: var(--hd-font);
  font-size: .88rem;
  font-weight: 700;
  color: var(--hd-ink-800);
  transition: transform var(--hd-t) var(--hd-ease-out), box-shadow var(--hd-t) var(--hd-ease), border-color var(--hd-t) var(--hd-ease);
}

.hd-rx-trust-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--hd-shadow-lg);
  border-color: var(--hd-border-green);
}

.hd-rx-trust-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--hd-gradient);
  color: #fff;
}

.hd-rx-trust-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

@media (max-width: 992px) {
  .hd-rx-upload-grid { grid-template-columns: 1fr; }
  .hd-rx-illustration { display: none; }
  .hd-rx-details-card .hd-auth-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .hd-rx-trust { grid-template-columns: 1fr; }
  .hd-rx-submit-row .hd-contact-submit { max-width: none; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-rx-illu-float { animation: none; }
}

/* ==========================================================================
   BLOG LISTING PAGE
   ========================================================================== */

/* --- Hero --- */
.blog-hero-section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 5vw, 3.5rem);
  background: var(--hd-surface);
}
.blog-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.blog-hero-blob { position: absolute; border-radius: 50%; }
.blog-hero-blob-1 {
  width: 420px; height: 420px; top: -160px; right: -120px;
  background: radial-gradient(circle, rgba(16,185,129,.16), transparent 68%);
}
.blog-hero-blob-2 {
  width: 340px; height: 340px; bottom: -160px; left: -110px;
  background: radial-gradient(circle, rgba(5,150,105,.11), transparent 70%);
}
.blog-hero-pattern {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(5,150,105,.10) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(900px 560px at 82% 20%, #000, transparent 72%);
  mask-image: radial-gradient(900px 560px at 82% 20%, #000, transparent 72%);
}

.blog-hero-breadcrumb {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--hd-font); font-size: .84rem; font-weight: 600;
  color: var(--hd-ink-400); margin-bottom: 1.75rem; position: relative;
}
.blog-hero-breadcrumb a { color: var(--hd-ink-500); text-decoration: none; transition: color var(--hd-t) var(--hd-ease); }
.blog-hero-breadcrumb a:hover { color: var(--hd-brand-strong); }
.blog-hero-breadcrumb svg { width: .85em; height: .85em; color: var(--hd-ink-400); }
.blog-hero-breadcrumb span { color: var(--hd-brand-strong); }

.blog-hero-grid {
  position: relative;
  display: grid; grid-template-columns: 1.15fr .85fr;
  align-items: center; gap: clamp(2rem, 4vw, 3.5rem);
}
.blog-hero-title {
  font-family: var(--hd-font); font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  font-size: clamp(2rem, 4.2vw, 3.1rem); color: var(--hd-ink-900); margin: .75rem 0 1rem;
}
.blog-hero-title-accent {
  background: var(--hd-gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.blog-hero-subtitle {
  font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.65; color: var(--hd-ink-500);
  max-width: 52ch; margin: 0 0 1.75rem;
}

.blog-hero-search-wrap { margin-bottom: 1.25rem; }

.blog-filter-pills { display: flex; flex-wrap: wrap; gap: .55rem; }
.blog-filter-pill {
  display: inline-flex; align-items: center;
  padding: .5rem 1.05rem; border-radius: var(--hd-r-pill);
  border: 1.5px solid var(--hd-border-2); background: #fff;
  font-family: var(--hd-font); font-size: .82rem; font-weight: 700; color: var(--hd-ink-600);
  cursor: pointer; transition: all var(--hd-t) var(--hd-ease);
}
.blog-filter-pill:hover { border-color: var(--hd-border-green); color: var(--hd-brand-strong); }
.blog-filter-pill.is-active { background: var(--hd-gradient); border-color: transparent; color: #fff; box-shadow: var(--hd-shadow-green-sm); }

.blog-hero-visual {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 300px;
}
.blog-hero-visual-ring {
  width: 220px; height: 220px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(16,185,129,.14), rgba(16,185,129,0) 72%);
  border: 1.5px dashed var(--hd-border-green);
  animation: hd-contact-ring-spin 26s linear infinite;
}
.blog-hero-visual-core {
  width: 128px; height: 128px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hd-gradient); color: #fff; box-shadow: var(--hd-shadow-green);
  animation: hd-contact-ring-spin-reverse 26s linear infinite;
}
.blog-hero-visual-core svg { width: 2.6rem; height: 2.6rem; }
.blog-hero-float {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 16px;
  background: #fff; box-shadow: var(--hd-shadow-sm);
  border: 1px solid var(--hd-border); color: var(--hd-brand-strong);
  animation: hd-float-bob 5s ease-in-out infinite;
}
.blog-hero-float svg { width: 1.3rem; height: 1.3rem; }
.blog-hero-float-1 { top: 6%; left: 4%; animation-delay: 0s; }
.blog-hero-float-2 { top: 12%; right: 2%; animation-delay: .5s; }
.blog-hero-float-3 { bottom: 10%; left: 0; animation-delay: 1s; }
.blog-hero-float-4 { bottom: 4%; right: 8%; animation-delay: 1.5s; }

/* --- Listing section layout --- */
.blog-featured-wrap { margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.blog-featured-label {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-bottom: .9rem; font-family: var(--hd-font); font-size: .8rem; font-weight: 700;
  color: var(--hd-brand-strong);
}
.blog-featured-label svg { width: 1em; height: 1em; }

/* Featured article: horizontal (image left, content right) on desktop */
.blog-featured-card-full { flex-direction: row; }
.blog-featured-card-full .blog-featured-image-wrapper { flex: 0 0 46%; aspect-ratio: auto; }
.blog-featured-card-full .blog-featured-content { flex: 1 1 auto; justify-content: center; }
.blog-featured-card-full .blog-featured-title { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }

.blog-main-grid {
  display: grid; grid-template-columns: 1fr 340px;
  gap: clamp(1.75rem, 3vw, 2.5rem); align-items: start;
}

.blog-cards-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.blog-cards-grid .blog-featured-card { height: 100%; }
.blog-grid-item[hidden] { display: none; }

.blog-no-results {
  text-align: center; padding: 2.5rem 1rem;
  font-family: var(--hd-font); color: var(--hd-ink-500); font-size: .95rem;
}

/* --- Sidebar --- */
.blog-sidebar-col { display: flex; flex-direction: column; gap: 1.5rem; }
.blog-sidebar-widget { padding: clamp(1.25rem, 2.5vw, 1.5rem); }

.blog-sidebar-categories { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.blog-sidebar-categories button {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  width: 100%; padding: .65rem .8rem; border: none; background: transparent; border-radius: var(--hd-r-sm);
  font-family: var(--hd-font); font-size: .88rem; font-weight: 600; color: var(--hd-ink-700);
  cursor: pointer; text-align: left; transition: background var(--hd-t) var(--hd-ease), color var(--hd-t) var(--hd-ease);
}
.blog-sidebar-categories button:hover,
.blog-sidebar-categories button.is-active { background: var(--hd-surface-green); color: var(--hd-brand-strong); }
.blog-sidebar-categories button span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px; padding: 0 .35rem; border-radius: var(--hd-r-pill);
  background: #fff; border: 1px solid var(--hd-border); font-size: .72rem; font-weight: 700; color: var(--hd-ink-500);
}

.blog-sidebar-list { display: flex; flex-direction: column; gap: .85rem; }
.blog-sidebar-list .blog-card { text-decoration: none; }
.blog-sidebar-list .blog-card-title { color: var(--hd-ink-900); }
.blog-popular-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .74rem; font-weight: 700; color: #dc2626;
}
.blog-popular-badge svg { width: .85em; height: .85em; }

/* --- Pagination --- */
.blog-pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem; margin-top: clamp(2rem, 3.5vw, 2.75rem);
}
.blog-pagination button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 .85rem;
  border: 1.5px solid var(--hd-border-2); background: #fff; border-radius: var(--hd-r-pill);
  font-family: var(--hd-font); font-size: .88rem; font-weight: 700; color: var(--hd-ink-600);
  cursor: pointer; transition: all var(--hd-t) var(--hd-ease);
}
.blog-pagination button:hover:not(:disabled) { border-color: var(--hd-border-green); color: var(--hd-brand-strong); transform: translateY(-2px); }
.blog-pagination button.is-active { background: var(--hd-gradient); border-color: transparent; color: #fff; box-shadow: var(--hd-shadow-green-sm); }
.blog-pagination button:disabled { opacity: .4; cursor: default; }
.blog-pagination button:disabled:hover { transform: none; }
.blog-pagination button svg { width: 1rem; height: 1rem; }

/* --- CTA (reuses .footer-cta-strip inside a dark wrapper) --- */
.blog-cta-section {
  background: linear-gradient(180deg, #08140e 0%, #0b1a13 100%);
}
.blog-cta-strip { margin-bottom: 0; }

@media (max-width: 1200px) {
  .blog-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 992px) {
  .blog-hero-grid { grid-template-columns: 1fr; }
  .blog-hero-visual { order: -1; min-height: 220px; }
  .blog-hero-visual-ring { width: 170px; height: 170px; }
  .blog-hero-visual-core { width: 96px; height: 96px; }
  .blog-hero-visual-core svg { width: 2rem; height: 2rem; }
  .blog-main-grid { grid-template-columns: 1fr; }
  .blog-sidebar-col { flex-direction: row; flex-wrap: wrap; }
  .blog-sidebar-widget { flex: 1 1 280px; }
  .blog-featured-card-full { flex-direction: column; }
  .blog-featured-card-full .blog-featured-image-wrapper { flex: none; aspect-ratio: 16/9; }
}
@media (max-width: 680px) {
  .blog-cards-grid { grid-template-columns: 1fr; }
  .blog-sidebar-col { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-hero-visual-ring, .blog-hero-visual-core, .blog-hero-float { animation: none; }
}

/* ==========================================================================
   PACKAGE / TEST CARD GRID — HOVER-OVERLAP ROOT-CAUSE FIX
   Applies to the Popular Packages / Popular Tests listing pages
   (.pricing-section > .inner-content > .row.clearfix > .pricing-block
   > .premium-package-card / .premium-test-card).

   Root cause (not a z-index/overflow band-aid):
   1. Bootstrap's `.row` is flex+wrap with only a horizontal gutter
      (margin: 0 -15px on the row, 15px side padding on each column) —
      there is no vertical gap between wrapped rows at all, so the
      hover lift had nowhere to go but into the row above.
   2. The shared theme `.inner-content` wrapper sets `overflow: hidden`,
      which clipped the first row's lift and any card's shadow bleed.

   Fix: give every column real vertical breathing room (matching the
   30px horizontal gutter) and let this specific wrapper paint outside
   its box. Both rules are scoped to `.pricing-section` only, since
   `.inner-content` / `.pricing-block` are reused unmodified elsewhere.
   ========================================================================== */
.pricing-section .inner-content {
  overflow: visible;
}
.pricing-section .row.clearfix > .pricing-block {
  margin-bottom: 30px;
}
.pricing-section .row.clearfix {
  margin-bottom: -30px;
}

/* ==========================================================================
   ABOUT US PAGE
   ========================================================================== */

/* --- Hero --- */
.about-hero-section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
  background: var(--hd-surface);
}
.about-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.about-hero-blob { position: absolute; border-radius: 50%; }
.about-hero-blob-1 {
  width: 420px; height: 420px; top: -160px; right: -120px;
  background: radial-gradient(circle, rgba(16,185,129,.16), transparent 68%);
}
.about-hero-blob-2 {
  width: 340px; height: 340px; bottom: -160px; left: -110px;
  background: radial-gradient(circle, rgba(5,150,105,.11), transparent 70%);
}
.about-hero-pattern {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(5,150,105,.10) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(900px 460px at 50% 20%, #000, transparent 72%);
  mask-image: radial-gradient(900px 460px at 50% 20%, #000, transparent 72%);
}
.about-hero-section>.auto-container { position: relative; }
.about-hero-breadcrumb {
  display: flex; align-items: center; gap: .4rem; justify-content: center;
  font-family: var(--hd-font); font-size: .84rem; font-weight: 600;
  color: var(--hd-ink-400); margin-bottom: 1.5rem;
}
.about-hero-breadcrumb a { color: var(--hd-ink-500); text-decoration: none; transition: color var(--hd-t) var(--hd-ease); }
.about-hero-breadcrumb a:hover { color: var(--hd-brand-strong); }
.about-hero-breadcrumb svg { width: .85em; height: .85em; color: var(--hd-ink-400); }
.about-hero-breadcrumb span { color: var(--hd-brand-strong); }
.about-hero-content { max-width: 760px; margin: 0 auto; text-align: center; }
.about-hero-content .about-section-badge { margin-inline: auto; }
.about-hero-title {
  font-family: var(--hd-font); font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  font-size: clamp(2.1rem, 4.5vw, 3.2rem); color: var(--hd-ink-900); margin: 1rem 0 0;
}

/* --- Main content rhythm --- */
.about-main-section .about-intro-card,
.about-main-section .about-content-block,
.about-main-section .about-mission-banner,
.about-main-section .about-promise-card,
.about-main-section .about-closing-brand {
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
.about-main-section > .auto-container > *:last-child { margin-bottom: 0; }

/* --- Intro card --- */
.about-intro-card {
  background: rgba(255,255,255,.9);
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-xl);
  box-shadow: var(--hd-shadow-sm);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.about-intro-card .about-tagline {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 600;
  color: var(--hd-ink-800);
  line-height: 1.6;
  margin: 0 0 1rem;
}
.about-intro-card p { color: var(--hd-ink-600); line-height: 1.7; margin: 0 0 1rem; }
.about-intro-card p:last-child { margin-bottom: 0; }
.about-highlight {
  background: var(--hd-gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; font-weight: 800;
}

/* --- Content blocks (Purpose / Vision) --- */
.about-content-block {
  background: #fff;
  border: 1px solid var(--hd-border);
  border-radius: var(--hd-r-xl);
  box-shadow: var(--hd-shadow-sm);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.about-section-title {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--hd-font); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem); color: var(--hd-ink-900); margin: 0 0 .5rem;
}
.about-section-title-icon {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--hd-r-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hd-gradient); color: #fff; padding: .5rem; box-sizing: border-box;
}
.about-section-description { color: var(--hd-ink-500); font-size: 1rem; line-height: 1.6; margin: 0; }
.about-prose { margin-top: 1.35rem; color: var(--hd-ink-600); }
.about-prose p { line-height: 1.75; margin: 0 0 1rem; }
.about-prose p:last-child { margin-bottom: 0; }
.about-prose strong { color: var(--hd-ink-800); }

/* --- Dot list (reused visual language across intro/purpose/vision) --- */
.about-dot-list {
  list-style: none; margin: 0 0 1.1rem; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .8rem;
}
.about-dot-list li {
  position: relative; padding-left: 1.35rem;
  color: var(--hd-ink-700, #374151); font-size: .95rem; line-height: 1.5;
}
.about-dot-list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--hd-gradient);
}

/* --- Values grid spacing (cards themselves reuse .why-feature-card) --- */
.about-values-grid { margin-top: 1.5rem; }

/* --- National Mission banner (dark gradient quote card) --- */
.about-mission-banner {
  position: relative; overflow: hidden; text-align: center;
  border-radius: var(--hd-r-xl);
  background: linear-gradient(135deg, var(--hd-green-800) 0%, var(--hd-brand-strong) 55%, var(--hd-brand) 100%);
  padding: clamp(2rem, 4.5vw, 3.25rem) clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--hd-shadow-lg);
}
.about-mission-pattern {
  position: absolute; inset: 0; opacity: .12;
  background-image: radial-gradient(circle at 30% 20%, rgba(255,255,255,.55) 1px, transparent 1.6px);
  background-size: 24px 24px;
}
.about-mission-icon {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 1.1rem; border-radius: var(--hd-r-md);
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #fff;
}
.about-mission-icon svg { width: 1.5rem; height: 1.5rem; }
.about-mission-title {
  position: relative; z-index: 1;
  font-family: var(--hd-font); font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem); color: #fff; margin: 0 auto .9rem; max-width: 46ch;
}
.about-mission-text {
  position: relative; z-index: 1;
  color: rgba(255,255,255,.82); font-size: 1rem; line-height: 1.7;
  max-width: 62ch; margin: 0 auto 1.35rem;
}
.about-mission-highlight {
  position: relative; z-index: 1;
  font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 700; color: #fff;
  margin: 0; letter-spacing: -.01em;
}

/* --- Our Promise card --- */
.about-promise-card {
  text-align: center;
  background: var(--hd-surface-green);
  border: 1px solid var(--hd-border-green);
  border-radius: var(--hd-r-xl);
  padding: clamp(2rem, 4vw, 2.75rem);
}
.about-promise-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 1rem; border-radius: 50%;
  background: var(--hd-gradient); color: #fff; box-shadow: var(--hd-shadow-green-sm);
}
.about-promise-icon svg { width: 1.5rem; height: 1.5rem; }
.about-promise-title {
  font-family: var(--hd-font); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.3rem, 2.4vw, 1.65rem); color: var(--hd-ink-900); margin: 0 0 1rem;
}
.about-promise-card p {
  color: var(--hd-ink-700, #374151); line-height: 1.75; max-width: 58ch; margin: 0 auto .75rem;
}
.about-promise-card p:last-child { margin-bottom: 0; }

/* --- Closing brand statement --- */
.about-closing-brand {
  text-align: center;
  padding: clamp(1.5rem, 3vw, 2rem) 1rem 0;
}
.about-closing-brand h3 {
  font-family: var(--hd-font); font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--hd-ink-900); margin: 0 0 .5rem;
}
.about-closing-brand p { color: var(--hd-ink-500); font-size: .95rem; line-height: 1.7; margin: 0; }

@media (max-width: 680px) {
  .about-dot-list { grid-template-columns: 1fr; }
}