/* ============================================================
   MCCF Design System — mccf.css
   Mahaveer Cancer Care Foundation | "A New Hope"
   Bootstrap 5 custom layer — mobile-first
   ============================================================ */

/* === Design Tokens === */
:root {
  /* MCCF Official Brand Palette — visual-color-guide.md */
  --navy: #145446;
  /* MCCF Green — primary / trust. 8.80:1 on white */
  --navy-mid: #0E5733;
  /* MCCF Green Dark — strong emphasis. Was #0E3733: a transposition typo,
     corrected to the value in visual-branding.md + visual-color-guide.md */
  --navy-light: #1A6B54;
  /* Derived lighter green */

  /* --- MCCF Orange, in three accessible roles ---------------------------
     The brand orange #EB5026 reaches only 3.68:1 on white and 2.39:1 on the
     navy hero, so it fails WCAG 2.1 AA (4.5:1) for text on EVERY background
     this site uses. It is kept for the two jobs it can legitimately do —
     large filled surfaces and icons, which need just 3:1 — and paired with
     two accessible variants for anything that carries words.
     Ratios below are computed, not estimated. */
  --orange: #EB5026;
  /* Brand orange. Fills + icons ONLY (>=3:1). NOT for body text. */
  --orange-text: #C43D18;
  /* Text/links on light: 5.21 white · 4.95 cream · 4.90 soft-mint */
  --orange-on-dark: #FFB183;
  /* Text/links on navy: 4.97 navy · 4.88 navy-mid · 7.37 darkest */
  --orange-fill: #C43D18;
  /* Filled CTA needing white label text: #fff on it = 5.21:1 */
  --orange-hover: #A62F0E;
  /* Hover for filled CTAs: #fff on it = 6.92:1 */
  --orange-soft: #FEF0EA;
  --warm-white: #FFF8EF;
  /* MCCF Cream — warm backgrounds */
  --cream: #FFF8EF;
  --mint: #DFF3EA;
  /* MCCF Mint — secondary */
  --soft-mint: #F1FAF6;
  /* MCCF Soft Mint — card backgrounds */
  --gold: #F8B84B;
  /* MCCF Gold — accent / warmth */
  --border: #D8E8E2;
  --text-dark: #1F202A;
  /* MCCF Charcoal */
  --text-mid: #64746F;
  /* MCCF Muted — 4.92 white · 4.67 cream · 4.62 soft-mint (AA) */
  --text-light: #64746F;
  /* Was #8FA09A at 2.74:1 — well below AA, and it was used for struck-through
     retail prices and testimonial attributions, i.e. real information rather
     than decoration. #64746F is the lightest grey that clears 4.5:1 on all
     three page backgrounds, so this now matches --text-mid by necessity;
     the token is kept so the intent ("de-emphasised") survives in the markup. */
  --green: #1B7A42;
  /* Healing Green — savings / positive indicators. Darkened from #1E8449,
     which reached only 4.44:1 against --green-soft; that pairing is exactly
     what .save-badge and .impact-equiv use to show the savings figure, the
     single number a patient is most likely to be looking for.
     Now 5.37:1 on white · 5.05:1 on soft-mint. */
  --green-soft: #F1FAF6;
  /* MCCF Soft Mint */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --sh-sm: 0 2px 8px rgba(20, 84, 70, .07);
  --sh-md: 0 8px 28px rgba(20, 84, 70, .11);
  --sh-lg: 0 20px 56px rgba(20, 84, 70, .16);
  --ease: all .28s ease;
}

/* === Base === */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--warm-white);
  color: var(--text-dark);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Google Sans Flex', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.22;
  color: var(--navy);
}

p {
  color: var(--text-mid);
  margin-bottom: 1rem;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--orange-text);
  text-decoration: none;
  transition: var(--ease);
}

a:hover {
  color: var(--orange-hover);
  text-decoration: underline;
}

/* Links inside body copy get a persistent underline. Colour alone cannot be
   the only means of identifying a link (WCAG 1.4.1 Use of Colour), and the
   orange/charcoal pairing here is not distinguishable to many readers with
   red-green colour vision deficiency. Scoped to <p> so navigation, buttons
   and card links — where position and shape already signal the role — are
   left alone. */
p a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

p a.btn-mccf-primary,
p a.btn-mccf-outline,
p a.btn-mccf-orange-outline,
p a.btn-hero-primary,
p a.btn-band-white {
  text-decoration: none;
}

img {
  max-width: 100%;
}

/* === Utility Classes === */
/* .text-orange is applied to ~112 elements, ~102 of them <i> icons where the
   3:1 non-text threshold applies and brand orange is fine. The remainder are
   small bold links, which need 4.5:1 — so the default is the accessible text
   variant and icons opt back into the brand hue. */
.text-orange {
  color: var(--orange-text) !important;
}

i.text-orange,
.text-orange > i {
  color: var(--orange) !important;
}

.text-navy {
  color: var(--navy) !important;
}

.text-mid {
  color: var(--text-mid) !important;
}

.bg-warm {
  background: var(--warm-white) !important;
}

.bg-navy {
  background: var(--navy) !important;
}

.bg-cream {
  background: var(--cream) !important;
}

.section-label {
  display: inline-block;
  color: var(--orange-text);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: .65rem;
}

.section-heading {
  font-size: clamp(1.75rem, 3.5vw, 2.625rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.section-sub {
  font-size: 1.05rem;
  color: var(--text-mid);
  max-width: 580px;
  line-height: 1.75;
}

section {
  padding: 5.5rem 0;
}

/* ===================================================
   NAVBAR
   =================================================== */
.brand-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: .65rem;
}

/* The emblem already carries its own ring and colour, so it is never given a
   background tile — framing a circular badge inside a square reads as two
   competing shapes. */
.navbar-brand {
  display: inline-flex;
  align-items: center;
}

@media (max-width: 575.98px) {
  .brand-logo { width: 36px; height: 36px; margin-right: .5rem; }
}

.navbar-mccf {
  background: #fff;
  box-shadow: 0 2px 16px rgba(20, 84, 70, .08);
  padding: .75rem 0;
}

.brand-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.brand-main {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.4px;
}

.brand-sub {
  font-size: .65rem;
  font-weight: 700;
  color: var(--orange-text);
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.navbar-mccf .nav-link {
  color: var(--text-dark);
  font-size: .875rem;
  font-weight: 600;
  padding: .45rem .85rem !important;
  border-radius: 50px;
  transition: var(--ease);
}

.navbar-mccf .nav-link:hover,
.navbar-mccf .nav-link.active {
  color: var(--orange-text);
  background: var(--orange-soft);
}

.navbar-mccf .dropdown-menu {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  padding: .5rem;
  margin-top: .5rem !important;
}

.navbar-mccf .dropdown-item {
  border-radius: var(--r-sm);
  font-size: .875rem;
  font-weight: 600;
  padding: .55rem .9rem;
  color: var(--text-dark);
  transition: var(--ease);
}

.navbar-mccf .dropdown-item:hover {
  background: var(--orange-soft);
  color: var(--orange-text);
}

.lang-toggle {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-mid);
  border: 1.5px solid var(--border);
  border-radius: 50px;
  padding: .28rem .8rem;
  cursor: pointer;
  transition: var(--ease);
  background: none;
}

.lang-toggle:hover {
  border-color: var(--orange);
  color: var(--orange-text);
}

.btn-donate-nav {
  background: var(--orange-fill);
  color: #fff !important;
  border-radius: 50px;
  padding: .42rem 1.25rem !important;
  font-weight: 700;
  font-size: .85rem;
  transition: var(--ease);
  border: none;
}

.btn-donate-nav:hover {
  background: var(--orange-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(235, 80, 38, .38);
}

/* ===================================================
   HERO — Homepage
   =================================================== */
.hero-section {
  background: linear-gradient(135deg, #0A3829 0%, var(--navy) 45%, var(--navy-mid) 100%);
  min-height: 94vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -8%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(235, 80, 38, .13) 0%, transparent 68%);
  border-radius: 50%;
  pointer-events: none;
}

.hero-section::after {
  content: '';
  position: absolute;
  bottom: -15%;
  left: -4%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(255, 255, 255, .04) 0%, transparent 68%);
  border-radius: 50%;
  pointer-events: none;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(235, 80, 38, .14);
  border: 1px solid rgba(235, 80, 38, .3);
  color: #F08060;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: .35rem 1rem;
  border-radius: 50px;
  margin-bottom: 1.5rem;
}

.hero-section h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.25rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.12;
  margin-bottom: 1.5rem;
}

.hero-section h1 em {
  font-style: normal;
  color: var(--orange-on-dark);
}

.hero-lead {
  color: rgba(255, 255, 255, .72);
  font-size: 1.1rem;
  line-height: 1.78;
  max-width: 555px;
  margin-bottom: 1.25rem;
}

.hero-motto {
  /* Was .45 = 3.12:1. This is the mandated tagline, not decoration. */
  color: rgba(255, 255, 255, .75);
  font-size: .875rem;
  font-style: italic;
  margin-bottom: 2.25rem;
}

.hero-motto strong {
  color: rgba(255, 255, 255, .85);
}

.btn-hero-primary {
  background: var(--orange-fill);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: .9rem 2.1rem;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(235, 80, 38, .38);
  transition: var(--ease);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.btn-hero-primary:hover {
  background: var(--orange-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(235, 80, 38, .5);
}

.btn-hero-ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .35);
  border-radius: 50px;
  padding: .9rem 2.1rem;
  font-size: 1rem;
  font-weight: 600;
  transition: var(--ease);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.btn-hero-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 2.5rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50px;
  padding: .38rem .9rem;
  color: rgba(255, 255, 255, .8);
  font-size: .78rem;
  font-weight: 600;
}

.hero-badge i {
  color: var(--orange);
}

/* Hero metric card */
.hero-metric-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-lg);
  padding: 2.5rem 2rem;
  backdrop-filter: blur(12px);
}

.metric-val {
  font-size: 2.6rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.metric-val span {
  color: var(--orange-on-dark);
}

.metric-lbl {
  font-size: .75rem;
  font-weight: 600;
  /* Was .52 = 3.64:1. Labels the numbers beside them — without it the
     figures are meaningless. */
  color: rgba(255, 255, 255, .75);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: .3rem;
}

.metric-div {
  border: none;
  border-right: 1px solid rgba(255, 255, 255, .12);
  height: 60px;
  align-self: center;
}

/* ===================================================
   TRUST TICKER
   =================================================== */
.trust-ticker {
  background: var(--navy-mid);
  padding: .7rem 0;
  overflow: hidden;
}

.ticker-inner {
  display: flex;
  gap: 3rem;
  animation: ticker-scroll 28s linear infinite;
  white-space: nowrap;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .3px;
  flex-shrink: 0;
}

.ticker-item i {
  opacity: .8;
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ===================================================
   Built for Accessible Healthcare section 
   =================================================== */
.bah-section {
  background: #fff;
  padding: 5.5rem 0 5rem;
}

/* Fade-up shared animation */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .58s cubic-bezier(.22, .68, 0, 1.2),
    transform .58s cubic-bezier(.22, .68, 0, 1.2);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 {
  transition-delay: .10s;
}

.delay-2 {
  transition-delay: .22s;
}

.delay-3 {
  transition-delay: .34s;
}

.delay-4 {
  transition-delay: .46s;
}

/* Card */
.bah-card {
  background: var(--warm-white);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  height: 100%;
  transition: var(--ease);
}

.bah-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(20, 84, 70, .12);
  border-color: rgba(20, 84, 70, .35);
}

/* Icon box */
.bah-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
}

.bah-icon-orange {
  background: var(--orange-soft);
  color: var(--orange);
}

.bah-icon-green {
  background: var(--green-soft);
  color: var(--green);
}

.bah-card-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: .6rem;
}

.bah-card-desc {
  font-size: .9rem;
  color: var(--text-mid);
  line-height: 1.75;
  margin: 0;
}

/* Tagline */
.bah-tagline {
  text-align: center;
  margin-top: 3.5rem;
  font-style: italic;
  font-size: .9rem;
  color: var(--text-light);
  letter-spacing: .2px;
}

.bah-tagline strong {
  color: var(--green);
}

/* ===================================================
   HOW WE HELP
   =================================================== */
.how-section {
  background: #fff;
}

.step-card {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2.25rem 2rem 2rem;
  position: relative;
  height: 100%;
  transition: var(--ease);
}

.step-card:hover {
  box-shadow: var(--sh-md);
  border-color: rgba(235, 80, 38, .35);
  transform: translateY(-4px);
}

.step-num {
  position: absolute;
  top: -14px;
  left: 1.75rem;
  background: var(--orange-fill);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-icon {
  width: 54px;
  height: 54px;
  background: var(--orange-soft);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  color: var(--orange);
  margin-bottom: 1.25rem;
}

/* ===================================================
   WHO WE SERVE
   =================================================== */
.serve-section {
  background: var(--warm-white);
}

.serve-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2rem 1.75rem;
  height: 100%;
  transition: var(--ease);
}

.serve-card:hover {
  box-shadow: var(--sh-md);
  border-color: rgba(235, 80, 38, .25);
}

.serve-icon-wrap {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.si-blue {
  background: #EEF4FF;
  color: #3B6FE8;
}

.si-orange {
  background: var(--orange-soft);
  color: var(--orange);
}

.si-green {
  background: var(--green-soft);
  color: var(--green);
}

.si-purple {
  background: rgba(248, 184, 75, .18);
  color: #9A6C14;
}

/* ===================================================
   IMPACT NUMBERS
   =================================================== */
.impact-section {
  background: var(--navy);
  position: relative;
  overflow: hidden;
}

.impact-section::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -5%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(235, 80, 38, .1) 0%, transparent 65%);
  border-radius: 50%;
}

.impact-num {
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.impact-num span {
  color: var(--orange-on-dark);
}

.impact-lbl {
  /* Was .58 = 4.12:1 */
  color: rgba(255, 255, 255, .75);
  font-size: .85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: .5rem;
}

.impact-sep {
  border: none;
  border-right: 1px solid rgba(255, 255, 255, .1);
  height: 70px;
  align-self: center;
}

/* ===================================================
   SERVICES OVERVIEW
   =================================================== */
.services-section {
  background: #fff;
}

.svc-card {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2.5rem 2.25rem;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: var(--ease);
}

.svc-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--ease);
}

.svc-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-5px);
}

.svc-card:hover::after {
  transform: scaleX(1);
}

.svc-icon {
  width: 62px;
  height: 62px;
  background: var(--orange-soft);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--orange);
  margin-bottom: 1.5rem;
}

.svc-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
}

.svc-list li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .875rem;
  color: var(--text-mid);
  padding: .28rem 0;
}

.svc-list li i {
  color: var(--green);
  flex-shrink: 0;
  margin-top: 3px;
}

/* ===================================================
   GENERICS EXPLAINER
   =================================================== */
.generics-section {
  background: var(--warm-white);
}

.generics-highlight {
  background: var(--navy);
  border-radius: var(--r-lg);
  padding: 3rem;
  color: #fff;
}

.generics-highlight h3 {
  color: #fff;
}

.generics-highlight p {
  color: rgba(255, 255, 255, .72);
}

.gen-stat {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  padding: 1.5rem 1.25rem;
  text-align: center;
}

.gen-stat-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--orange-on-dark);
}

.gen-stat-lbl {
  font-size: .8rem;
  /* Was .6 = 4.31:1 — close, but still short of 4.5:1 */
  color: rgba(255, 255, 255, .75);
  margin-top: .25rem;
}

.compare-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: #fff;
  margin-bottom: .5rem;
}

.compare-label {
  font-weight: 700;
  font-size: .875rem;
  min-width: 130px;
  color: var(--navy);
}

.compare-branded {
  color: var(--text-light);
  text-decoration: line-through;
  font-size: .875rem;
}

.compare-mccf {
  color: var(--green);
  font-weight: 700;
  font-size: .875rem;
}

.compare-save {
  background: var(--green-soft);
  color: var(--green);
  font-size: .72rem;
  font-weight: 700;
  border-radius: 50px;
  padding: .18rem .55rem;
  margin-left: auto;
}

/* ===================================================
   PRICE SAMPLE / TICKER SECTION
   =================================================== */
.price-section {
  background: #fff;
}

.price-pill-table {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.price-pill-table table {
  margin: 0;
}

.price-pill-table thead th {
  background: var(--navy);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  padding: .9rem 1.1rem;
  border: none;
}

.price-pill-table tbody td {
  font-size: .875rem;
  padding: .8rem 1.1rem;
  vertical-align: middle;
  border-color: var(--border);
  color: var(--text-mid);
}

.price-pill-table tbody tr:hover td {
  background: #fff;
}

.price-strike {
  text-decoration: line-through;
  color: var(--text-light);
}

.price-mccf {
  font-weight: 700;
  color: var(--navy);
}

.save-badge {
  background: var(--green-soft);
  color: var(--green);
  font-size: .72rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: 50px;
}

/* ===================================================
   TESTIMONIALS
   =================================================== */
.testimonials-section {
  background: var(--warm-white);
}

.testi-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2.25rem 2rem;
  height: 100%;
  box-shadow: var(--sh-sm);
  position: relative;
  overflow: hidden;
}

.testi-card::before {
  content: '\201C';
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 5.5rem;
  line-height: 1;
  color: var(--orange);
  opacity: .1;
  font-family: Georgia, serif;
}

.testi-stars {
  color: #FBBF24;
  font-size: .85rem;
  margin-bottom: .9rem;
}

.testi-text {
  font-size: .92rem;
  line-height: 1.75;
  font-style: italic;
  color: var(--text-mid);
  margin-bottom: 1.5rem;
}

.testi-author {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.testi-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.testi-name {
  font-weight: 700;
  font-size: .875rem;
  color: var(--navy);
}

.testi-detail {
  font-size: .78rem;
  color: var(--text-light);
}

/* ===================================================
   PARTNER LOGOS
   =================================================== */
.partners-section {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 2.75rem 0;
}

.partner-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: .5rem 1.5rem;
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-light);
  transition: var(--ease);
}

.partner-chip:hover {
  border-color: var(--navy);
  color: var(--navy);
  box-shadow: var(--sh-sm);
}

/* ===================================================
   DONATE CTA BAND
   =================================================== */
.donate-band {
  /* Holds white headings AND white body copy, so the fill must clear 4.5:1
     against #fff, not just the 3:1 large-text threshold. */
  background: var(--orange-fill);
  padding: 4.5rem 0;
  position: relative;
  overflow: hidden;
}

.donate-band::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -4%;
  width: 450px;
  height: 450px;
  background: rgba(255, 255, 255, .06);
  border-radius: 50%;
}

.donate-band h2 {
  color: #fff;
}

.donate-band p {
  /* Fully opaque: on the orange fill even 88% white only reaches 4.38:1.
     Softening this text costs more than it gains — use size and weight for
     hierarchy here instead of transparency. */
  color: #fff;
}

.btn-band-white {
  background: #fff;
  color: var(--orange-text);
  border-radius: 50px;
  padding: .9rem 2.1rem;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  transition: var(--ease);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.btn-band-white:hover {
  background: var(--navy);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

.btn-band-outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .5);
  border-radius: 50px;
  padding: .9rem 2.1rem;
  font-weight: 600;
  font-size: 1rem;
  transition: var(--ease);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.btn-band-outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

/* ===================================================
   FOOTER
   =================================================== */
.footer-top {
  background: var(--navy);
  padding: 5rem 0 3rem;
}

.footer-brand-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
}

.footer-brand-tag {
  font-size: .65rem;
  font-weight: 700;
  color: var(--orange-on-dark);
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.footer-tagline {
  /* Was .45 = 3.12:1 */
  color: rgba(255, 255, 255, .75);
  font-size: .85rem;
  font-style: italic;
  line-height: 1.65;
  margin-top: 1rem;
}

.footer-cred-box {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-sm);
  padding: .85rem 1rem;
  margin-top: 1.25rem;
}

.footer-cred-box p {
  /* Was .48 = 3.33:1. The drug licence and trust registration numbers are a
     statutory disclosure and brand rule #4 — they must be legible, not faint. */
  color: rgba(255, 255, 255, .78);
  font-size: .75rem;
  margin: 0;
  line-height: 1.6;
}

.footer-cred-box strong {
  color: rgba(255, 255, 255, .72);
}

.footer-col-head {
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: .6rem;
}

.footer-links a {
  /* Was .55 = 3.87:1 */
  color: rgba(255, 255, 255, .75);
  font-size: .875rem;
  transition: var(--ease);
}

.footer-links a:hover {
  color: var(--orange-on-dark);
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  /* Was .6 = 4.31:1. Address, phone and opening hours — the details a patient
     actually needs to reach the pharmacy. */
  color: rgba(255, 255, 255, .78);
  font-size: .875rem;
  margin-bottom: .85rem;
}

.footer-contact-item i {
  color: var(--orange-on-dark);
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1rem;
}

.footer-social {
  display: flex;
  gap: .65rem;
  margin-top: .5rem;
}

.social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .6);
  font-size: .9rem;
  transition: var(--ease);
}

.social-btn:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.footer-bottom {
  background: var(--green-soft);
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding: 1.25rem 0;
}

.footer-bottom p {
  color: var(--text-dark);
  font-size: .78rem;
  margin: 0;
}

.footer-bottom a {
  color: var(--text-dark);
  font-size: .78rem;
}

.footer-bottom a:hover {
  color: var(--orange);
}

/* ===================================================
   WHATSAPP FLOAT
   =================================================== */
.wa-float {
  position: fixed;
  bottom: 1.75rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}

.wa-tooltip {
  background: var(--navy);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: .3rem .75rem;
  border-radius: 50px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: var(--ease);
  pointer-events: none;
}

.wa-float:hover .wa-tooltip {
  opacity: 1;
  transform: translateX(0);
}

.wa-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(37, 211, 102, .42);
  transition: var(--ease);
  animation: wa-pulse 2.5s ease infinite;
}

.wa-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37, 211, 102, .55);
}

.wa-btn svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}

/* ===================================================
   INNER PAGE HERO
   =================================================== */
.page-hero {
  background: linear-gradient(135deg, #0A3829 0%, var(--navy) 55%, var(--navy-mid) 100%);
  padding: 5.5rem 0 4rem;
}

.page-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 4.5vw, 3rem);
}

.page-hero .lead {
  color: rgba(255, 255, 255, .68);
  font-size: 1.05rem;
}

.breadcrumb {
  background: transparent;
  padding: 0;
}

.breadcrumb-item a {
  /* Was .52 = 3.64:1 */
  color: rgba(255, 255, 255, .75);
  font-size: .85rem;
}

.breadcrumb-item.active {
  color: var(--orange-on-dark);
  font-size: .85rem;
}

.breadcrumb-item+.breadcrumb-item::before {
  /* Purely decorative separator glyph, so the 4.5:1 text rule does not bind —
     but .3 was 2.18:1, below even the 3:1 non-text floor. */
  color: rgba(255, 255, 255, .55);
}

/* ===================================================
   MEDICINE PRICE LIST PAGE
   =================================================== */
.search-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2rem;
  box-shadow: var(--sh-sm);
  margin-bottom: 2rem;
}

.search-wrap .form-control {
  border-radius: 50px;
  padding: .75rem 1.25rem;
  font-size: .9rem;
  border: 1.5px solid var(--border);
  transition: var(--ease);
}

.search-wrap .form-control:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(235, 80, 38, .12);
}

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}

.filter-tab {
  border: 1.5px solid var(--border);
  border-radius: 50px;
  padding: .35rem .9rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-mid);
  cursor: pointer;
  background: #fff;
  transition: var(--ease);
}

.filter-tab.active,
.filter-tab:hover {
  background: var(--orange-soft);
  border-color: var(--orange);
  color: var(--orange-text);
}

.price-table-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.price-table-card .table {
  margin: 0;
}

.price-table-card thead th {
  background: var(--navy);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  padding: 1rem 1.1rem;
  border: none;
}

.price-table-card tbody td {
  font-size: .875rem;
  padding: .85rem 1.1rem;
  vertical-align: middle;
  border-color: var(--border);
}

.price-table-card tbody tr:nth-child(even) td {
  background: var(--warm-white);
}

.price-table-card tbody tr:hover td {
  background: var(--orange-soft);
}

/* ===================================================
   FOR DOCTORS PAGE
   =================================================== */
.doc-step {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2rem;
  display: flex;
  gap: 1.25rem;
  transition: var(--ease);
}

.doc-step:hover {
  box-shadow: var(--sh-md);
  border-color: rgba(235, 80, 38, .25);
}

.doc-step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--orange-fill);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ===================================================
   CONTACT PAGE
   =================================================== */
.contact-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2rem;
  box-shadow: var(--sh-sm);
  height: 100%;
  transition: var(--ease);
}

.contact-card:hover {
  box-shadow: var(--sh-md);
}

.contact-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2.5rem;
  box-shadow: var(--sh-sm);
}

.form-card .form-control,
.form-card .form-select,
.form-card textarea {
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: .75rem 1rem;
  font-size: .9rem;
  transition: var(--ease);
}

.form-card .form-control:focus,
.form-card .form-select:focus,
.form-card textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(235, 80, 38, .1);
}

.form-card label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .35rem;
}

/* ===================================================
   SUPPORT/DONATE PAGE
   =================================================== */
.amount-btn {
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  padding: .7rem 1rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--navy);
  background: #fff;
  cursor: pointer;
  transition: var(--ease);
  width: 100%;
}

.amount-btn.active,
.amount-btn:hover {
  border-color: var(--orange);
  background: var(--orange-soft);
  color: var(--orange-text);
}

.impact-equiv {
  background: var(--green-soft);
  color: var(--green);
  font-size: .8rem;
  font-weight: 600;
  border-radius: var(--r-sm);
  padding: .6rem 1rem;
  margin-top: .5rem;
}

.csr-tier {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  padding: 2rem;
  text-align: center;
  transition: var(--ease);
  height: 100%;
}

.csr-tier:hover,
.csr-tier.featured {
  border-color: var(--orange);
  box-shadow: var(--sh-md);
}

.csr-tier.featured {
  background: var(--orange-soft);
}

/* ===================================================
   ACCORDION / FAQ
   =================================================== */
.accordion-mccf .accordion-item {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  margin-bottom: .5rem;
  overflow: hidden;
}

.accordion-mccf .accordion-button {
  font-weight: 700;
  font-size: .95rem;
  color: var(--navy);
  background: #fff;
  box-shadow: none;
  border-radius: 0 !important;
}

.accordion-mccf .accordion-button:not(.collapsed) {
  background: var(--orange-soft);
  color: var(--orange-text);
}

.accordion-mccf .accordion-button::after {
  background-size: 14px;
  filter: invert(0);
}

/* ===================================================
   BUTTON HELPERS
   =================================================== */
.btn-mccf-primary {
  background: var(--orange-fill);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: .75rem 1.75rem;
  font-weight: 700;
  font-size: .9rem;
  transition: var(--ease);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.btn-mccf-primary:hover {
  background: var(--orange-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(235, 80, 38, .35);
}

.btn-mccf-outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 50px;
  padding: .75rem 1.75rem;
  font-weight: 700;
  font-size: .9rem;
  transition: var(--ease);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.btn-mccf-outline:hover {
  background: var(--navy);
  color: #fff;
}

.btn-mccf-orange-outline {
  background: transparent;
  color: var(--orange-text);
  border: 2px solid var(--orange);
  border-radius: 50px;
  padding: .75rem 1.75rem;
  font-weight: 700;
  font-size: .9rem;
  transition: var(--ease);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.btn-mccf-orange-outline:hover {
  background: var(--orange-fill);
  color: #fff;
}

/* ===================================================
   RESPONSIVE
   =================================================== */
@media (max-width: 991.98px) {
  .hero-section {
    min-height: auto;
    padding: 5rem 0 4rem;
    text-align: center;
  }

  .hero-badges {
    justify-content: center;
  }

  .hero-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-metric-card {
    margin-top: 3rem;
  }

  .impact-sep {
    display: none;
  }

  section {
    padding: 4rem 0;
  }
}

@media (max-width: 767.98px) {
  .hero-section h1 {
    font-size: 2.2rem;
  }

  .footer-top {
    padding: 3.5rem 0 2rem;
  }

  .donate-band {
    padding: 3.5rem 0;
  }

  .navbar-mccf .btn-donate-nav {
    margin-top: .5rem;
  }

  .ticker-inner {
    animation-duration: 18s;
  }
}

/* ============================================================
   ANIMATION SYSTEM v2 — scroll reveal, float, blobs, UI polish
   ============================================================ */

/* ===================================================
   KEYFRAMES
   =================================================== */

/* Page entry — very subtle fade so content doesn't flash */
@keyframes page-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Hero metric card float */
@keyframes float {

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

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

/* Background blob drift — orange accent glow */
@keyframes blob-drift {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(22px, -14px) scale(1.07);
  }

  66% {
    transform: translate(-16px, 18px) scale(0.95);
  }
}

/* Blob drift variant for ::after */
@keyframes blob-drift-2 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  42% {
    transform: translate(-18px, -10px) scale(1.09);
  }

  78% {
    transform: translate(14px, 20px) scale(0.93);
  }
}

/* ===================================================
   PAGE ENTRY
   =================================================== */
body {
  animation: page-enter .35s ease both;
}

/* ===================================================
   HERO — FLOATING METRIC CARD
   =================================================== */
.hero-metric-card {
  animation: float 5.5s ease-in-out infinite;
  will-change: transform;
}

/* ===================================================
   HERO — BACKGROUND BLOB MOVEMENT
   =================================================== */
.hero-section::before {
  animation: blob-drift 11s ease-in-out infinite;
  will-change: transform;
}

.hero-section::after {
  animation: blob-drift-2 15s ease-in-out infinite;
  will-change: transform;
}

.page-hero::before {
  animation: blob-drift 13s ease-in-out infinite;
  will-change: transform;
}

/* ===================================================
   NAVBAR — SCROLLED STATE
   =================================================== */
.navbar-mccf.scrolled {
  box-shadow: 0 4px 24px rgba(20, 84, 70, .14);
  backdrop-filter: blur(6px);
}

/* ===================================================
   CARD HOVER — spring easing on all card types
   =================================================== */
.step-card,
.serve-card,
.svc-card,
.testi-card,
.bah-card,
.contact-card,
.csr-tier,
.doc-step,
.partner-chip,
.gen-stat {
  transition: transform .32s cubic-bezier(.22, .68, 0, 1.2),
    box-shadow .32s ease,
    border-color .28s ease !important;
}

.step-card:hover,
.serve-card:hover,
.testi-card:hover,
.contact-card:hover,
.doc-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(20, 84, 70, .13);
  border-color: rgba(20, 84, 70, .22);
}

.gen-stat:hover {
  transform: translateY(-3px);
}

/* ===================================================
   BUTTON HOVER — spring easing + lift
   =================================================== */
.btn-mccf-primary,
.btn-mccf-outline,
.btn-mccf-orange-outline,
.btn-hero-primary,
.btn-hero-ghost,
.btn-donate-nav,
.btn-band-white,
.btn-band-outline {
  transition: all .26s cubic-bezier(.22, .68, 0, 1.2) !important;
}

/* ===================================================
   ACCORDION — smoother collapse
   =================================================== */
.accordion-collapse {
  transition: height .36s cubic-bezier(.22, .68, 0, 1.2) !important;
}

.accordion-mccf .accordion-button {
  transition: color .22s ease, background .22s ease !important;
}

/* ===================================================
   WHATSAPP FLOAT — enhanced pulse + hover
   =================================================== */
@keyframes wa-pulse {

  0%,
  100% {
    box-shadow: 0 4px 18px rgba(37, 211, 102, .42);
  }

  50% {
    box-shadow: 0 6px 28px rgba(37, 211, 102, .56),
      0 0 0 10px rgba(37, 211, 102, .08);
  }
}

.wa-float:hover .wa-btn {
  transform: scale(1.12);
  box-shadow: 0 8px 32px rgba(37, 211, 102, .6);
}

.wa-float:hover .wa-tooltip {
  opacity: 1;
  transform: translateX(0);
}

/* ===================================================
   TRUST TICKER — pause on hover
   =================================================== */
.trust-ticker:hover .ticker-inner {
  animation-play-state: paused;
}

/* ===================================================
   SOCIAL BUTTONS — scale on hover
   =================================================== */
.social-btn {
  transition: background .22s ease,
    border-color .22s ease,
    color .22s ease,
    transform .22s cubic-bezier(.22, .68, 0, 1.2) !important;
}

.social-btn:hover {
  transform: scale(1.12);
}

/* ===================================================
   PARTNER CHIPS — lift on hover
   =================================================== */
.partner-chip:hover {
  transform: translateY(-3px);
}

/* ===================================================
   FILTER TAB — scale feedback on click
   =================================================== */
.filter-tab {
  transition: all .22s cubic-bezier(.22, .68, 0, 1.2) !important;
}

.filter-tab:active {
  transform: scale(.95);
}

/* ===================================================
   FORM INPUTS — focus ring animation
   =================================================== */
@keyframes focus-ring {
  from {
    box-shadow: 0 0 0 0 rgba(235, 80, 38, .28);
  }

  to {
    box-shadow: 0 0 0 4px rgba(235, 80, 38, .12);
  }
}

.form-control:focus,
.form-select:focus,
textarea:focus {
  animation: focus-ring .2s ease forwards;
}

/* ===================================================
   PRICE TABLE ROW — smooth bg transition
   =================================================== */
.price-pill-table tbody tr,
.price-table-card tbody tr {
  transition: background .18s ease;
}

/* ===================================================
   LANG TOGGLE — smooth border/color
   =================================================== */
.lang-toggle {
  transition: border-color .22s ease, color .22s ease !important;
}

/* ===================================================
   SECTION HEADING — tighter line-height for display font
   =================================================== */
.section-heading,
h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: -.3px;
}

/* ===================================================
   REDUCED-MOTION — respect user preference
   =================================================== */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .fade-up {
    opacity: 1;
    transform: none;
  }

  .hero-metric-card {
    animation: none;
  }

  .spinner {
    animation: none;
  }

}

/* ===================================================
   FOCUS VISIBILITY  (WCAG 2.4.7 Focus Visible)
   This stylesheet previously defined no focus indicator anywhere, and the
   custom button rules override Bootstrap's default — so a keyboard or
   switch-access user had no way to tell where they were on the page.

   :focus-visible rather than :focus, so a mouse click does not leave a ring.
   =================================================== */
:focus-visible {
  outline: 3px solid var(--orange-fill);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Bootstrap ships `.nav-link:focus-visible { outline: 0 }` and substitutes a
   box-shadow ring. Our .navbar-mccf .nav-link rules override that shadow, so
   the net effect was NO focus indicator anywhere in the main navigation — the
   bare `:focus-visible` rule above loses on specificity (0,1,0 vs 0,2,0).
   Restated here at equal specificity to win it back.
   Verified with CDP forcePseudoState: outline-style was resolving to `none`
   on every .nav-link despite the element matching :focus-visible. */
.nav-link:focus-visible,
.navbar-mccf .nav-link:focus-visible,
.dropdown-item:focus-visible,
.navbar-toggler:focus-visible {
  outline: 3px solid var(--orange-fill);
  outline-offset: 2px;
  /* No fade-in on the ring. `.navbar-mccf .nav-link` sets
     `transition: all .28s ease`, which includes outline-color, so the ring
     animated up from the link's own #1F202A — for the first frames it was a
     near-black hairline on white (1.1:1), only reaching the intended 4.6:1
     after 280ms. A focus indicator has to be legible the instant focus lands,
     so outline is excluded from the transition here. */
  transition: color .28s ease, background-color .28s ease;
}

/* The dark-orange ring vanishes against the navy surfaces — lighten it there. */
.hero-section :focus-visible,
.page-hero :focus-visible,
.footer-top :focus-visible,
.trust-ticker :focus-visible,
.impact-section :focus-visible,
.generics-highlight :focus-visible,
.donate-band :focus-visible,
.bg-navy :focus-visible {
  outline-color: #FFD9C2;
}

/* NB: .navbar-mccf is a WHITE surface (background: #fff, line 215), not a navy
   one, so it must NOT get the light #FFD9C2 ring — that would be 1.3:1 and
   effectively invisible. It keeps the default --orange-fill ring, which is
   5.21:1 on white. */

/* Skip link — first tab stop, revealed only on focus. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100000;
  background: var(--navy);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: .875rem;
  font-weight: 700;
}

.skip-link:focus {
  top: 0;
  color: #fff;
}

/* ===================================================
   NAV AUTH STATE  (injected by mccf-auth.js on every page)
   =================================================== */
.nav-auth {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.nav-auth-link {
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy);
  padding: .42rem .5rem;
  white-space: nowrap;
}

.nav-auth-link:hover {
  color: var(--orange-text);
}

.nav-auth-btn-outline {
  font-size: .85rem;
  font-weight: 700;
  color: var(--navy);
  border: 1.5px solid var(--border);
  border-radius: 50px;
  padding: .35rem 1rem;
  white-space: nowrap;
  transition: var(--ease);
}

.nav-auth-btn-outline:hover {
  border-color: var(--navy);
  background: var(--soft-mint);
  color: var(--navy);
}

.nav-auth-btn {
  font-size: .85rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--soft-mint);
  border: 1.5px solid var(--border);
  border-radius: 50px;
  padding: .35rem .9rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  cursor: pointer;
}

.nav-auth-btn:hover {
  border-color: var(--navy);
}

/* ===================================================
   FORM FALLBACK — replaces forms that have no backend endpoint
   (injected by mccf.js; gated on the contactForms feature flag)
   =================================================== */
.form-fallback {
  background: var(--mint);
  border: 1px solid rgba(20, 84, 70, .18);
  border-radius: var(--r-md);
  padding: 1.5rem;
}

.form-fallback-head {
  display: flex;
  gap: .7rem;
  margin-bottom: 1.15rem;
}

.form-fallback-head i {
  color: var(--navy);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.form-fallback-title {
  font-size: .95rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: .3rem;
}

.form-fallback-text {
  font-size: .85rem;
  color: var(--text-mid);
  line-height: 1.65;
  margin: 0;
}

.form-fallback-actions {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.form-fallback-note {
  font-size: .78rem;
  color: var(--text-mid);
  line-height: 1.6;
  margin: 1rem 0 0;
}

/* ===================================================
   LIVE PRICE TABLE  (rendered by mccf-prices.js)
   =================================================== */
.price-status {
  font-size: .82rem;
  line-height: 1.6;
  color: var(--text-mid);
  margin-bottom: 1rem;
  padding: .7rem 1rem;
  border-radius: var(--r-sm);
  background: #fff;
  border: 1px solid var(--border);
}

/* The stale-data warning must read as a warning, and not by colour alone —
   the wording itself says the figures are not current. */
.price-status.is-error {
  background: var(--orange-soft);
  border-color: rgba(196, 61, 24, .28);
  color: #8F2A0D;
  font-weight: 500;
}

.price-status.is-loading {
  color: var(--text-mid);
  font-style: italic;
}

.price-generic {
  font-size: .78rem;
  font-weight: 400;
  color: var(--text-mid);
  margin-top: .15rem;
}

/* "Rx" marker. The visible glyph is aria-hidden and the element carries
   aria-label="Prescription required", since "Rx" conveys nothing to a screen
   reader (or to many sighted readers) on its own. */
.price-rx {
  display: inline-block;
  background: var(--mint);
  color: var(--navy);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .5px;
  padding: .1rem .35rem;
  border-radius: 4px;
  margin-top: .3rem;
}

.price-cat {
  font-size: .72rem;
  font-weight: 700;
}

.price-lowstock {
  font-size: .72rem;
  font-weight: 600;
  color: #8F2A0D;
  margin-top: .2rem;
}

.price-empty {
  text-align: center;
  color: var(--text-mid);
  font-size: .875rem;
  line-height: 1.7;
  padding: 2.5rem 1.5rem !important;
}

/* "Show all categories" escape hatch inside the empty state. Styled as a real
   link so it reads as the action it is. */
.price-clearcat {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--orange-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.price-clearcat:hover {
  color: var(--orange-hover);
}

/* A category with no matches for the current query.
   Deliberately NOT dimmed with opacity: --text-light (#64746F) is 4.62:1 on
   --soft-mint at full strength, but opacity .75 blends it to #879691 = 2.90:1,
   below the 4.5:1 minimum — and no alpha below 1 clears the bar. The "(0)" in
   the label already states there is nothing there, in text rather than colour,
   so the dimming would have cost legibility to say what words already say.
   The tab stays fully clickable so a user is never trapped in an empty
   category. */
.filter-tab.is-empty:not(.active) {
  color: var(--text-light);
  font-weight: 500;
}

/* Spinner for busy buttons. The label also changes to "Please wait…", so the
   busy state is conveyed by text and not by motion alone. */
.spinner {
  display: inline-block;
  width: .85em;
  height: .85em;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: mccf-spin .6s linear infinite;
  vertical-align: -.1em;
}

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

/* Honeypot field for the six public forms (mccf.js's bindLiveForm()).
   Real visitors never see or reach this input; a filled value on submit is a
   near-certain bot (see backend/app/schemas/contact.py's `website` field).

   Off-screen positioning, not display:none/visibility:hidden — some bots skip
   display:none inputs deliberately, defeating the trap. Off-screen still
   exists in the layout and accepts autofill the way a real hidden field a
   scraper is probing for would. Kept out of both the visual flow and the
   keyboard tab order (the field itself carries tabindex="-1"
   aria-hidden="true" autocomplete="off" in the markup) so a sighted or
   keyboard user can never land on it by accident. */
.mccf-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  left: -9999px;
  top: -9999px;
}