/* =================================================================
   SANEVEDA — site.css
   Shared components added on top of styles.css:
   cookie banner · HCP gate · legal/prose pages · adverse-event helpers
   (styles.css is left untouched)
   ================================================================= */

/* ---- Utility-bar adverse-event link ---- */
.utility-bar__alert {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--c-cream);
  font-weight: 600;
}
.utility-bar__alert svg { width: 15px; height: 15px; }
.utility-bar__alert:hover { color: var(--c-orange); }

/* ---- Cookie consent banner (DPDP-style: accept / reject / manage) ---- */
.cookie-banner {
  position: fixed;
  left: var(--s-4); right: var(--s-4); bottom: var(--s-4);
  max-width: 760px;
  margin-inline: auto;
  background: var(--c-white);
  border: 1px solid var(--c-grey-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--s-5) var(--s-6);
  z-index: var(--z-toast);
  display: none;
  gap: var(--s-4);
  align-items: center;
  flex-wrap: wrap;
}
.cookie-banner.is-visible { display: flex; }
.cookie-banner__text { flex: 1 1 320px; font-size: var(--text-sm); color: var(--c-grey-700); line-height: var(--lh-base); }
.cookie-banner__text strong { color: var(--c-navy); display: block; margin-bottom: 2px; }
.cookie-banner__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ---- HCP self-declaration gate ---- */
.gate {
  position: fixed; inset: 0;
  background: rgba(6,20,37,.72);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: none;
  align-items: center; justify-content: center;
  padding: var(--s-5);
}
.gate.is-visible { display: flex; }
.gate__card {
  background: var(--c-white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  max-width: 520px; width: 100%;
  padding: clamp(var(--s-6), 4vw, var(--s-10));
  text-align: center;
}
.gate__icon {
  width: 56px; height: 56px; margin: 0 auto var(--s-4);
  border-radius: var(--r-lg);
  background: var(--c-orange-100); color: var(--c-orange-600);
  display: inline-flex; align-items: center; justify-content: center;
}
.gate__icon svg { width: 28px; height: 28px; }
.gate h2 { font-size: var(--text-2xl); margin-bottom: var(--s-3); }
.gate p { color: var(--c-grey-600); font-size: var(--text-sm); line-height: var(--lh-relaxed); margin-bottom: var(--s-6); }
.gate__actions { display: flex; flex-direction: column; gap: var(--s-3); }

/* ---- Legal / prose pages ---- */
.prose { max-width: 760px; }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--s-10); margin-bottom: var(--s-3); scroll-margin-top: 120px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--text-lg); margin-top: var(--s-6); margin-bottom: var(--s-2); }
.prose p, .prose li { color: var(--c-grey-700); line-height: var(--lh-relaxed); }
.prose p + p { margin-top: var(--s-3); }
.prose ul, .prose ol { margin-top: var(--s-3); }
.prose strong { color: var(--c-navy); }
.prose__meta { color: var(--c-grey-500); font-size: var(--text-sm); margin-bottom: var(--s-8); }
.prose a { text-decoration: underline; }

/* Two-column legal layout with sticky table of contents */
.legal-layout { display: grid; gap: var(--s-10); }
@media (min-width: 1000px) { .legal-layout { grid-template-columns: 240px 1fr; } }
.legal-toc { align-self: start; }
@media (min-width: 1000px) { .legal-toc { position: sticky; top: 120px; } }
.legal-toc h4 {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--c-grey-500); margin-bottom: var(--s-3);
}
.legal-toc ul { list-style: none; padding: 0; }
.legal-toc li { margin: 0; }
.legal-toc li + li { margin-top: var(--s-1); }
.legal-toc a { color: var(--c-grey-600); font-size: var(--text-sm); display: block; padding: var(--s-1) 0; }
.legal-toc a:hover { color: var(--c-orange-600); }

/* ---- Adverse-event page helpers ---- */
.pv-officer {
  background: var(--c-navy);
  color: var(--c-cream);
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-7);
}
.pv-officer h3 { color: var(--c-white); font-size: var(--text-lg); margin-bottom: var(--s-3); }
.pv-officer a { color: var(--c-cream); text-decoration: underline; }
.pv-officer a:hover { color: var(--c-orange); }
.pv-officer__row { display: flex; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-3); font-size: var(--text-sm); }
.pv-officer__row svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--c-orange); margin-top: 2px; }

.reg-note {
  display: flex; gap: var(--s-3); align-items: flex-start;
  font-size: var(--text-sm); color: var(--c-grey-700); line-height: var(--lh-base);
}
.reg-note svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--c-info); margin-top: 2px; }

/* Page footer crumb spacing for inner pages */
.inner-bottom { padding-block: var(--s-16); }

/* ---- Important Safety Information (ISI) block ---- */
.isi {
  background: var(--c-danger-100);
  border: 1px solid var(--c-danger);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-7);
}
.isi h2 { color: var(--c-danger); font-size: var(--text-xl); margin-bottom: var(--s-3); }
.isi h3 { font-size: var(--text-base); margin-top: var(--s-4); margin-bottom: var(--s-1); color: var(--c-grey-900); }
.isi p, .isi li { font-size: var(--text-sm); color: var(--c-grey-800); line-height: var(--lh-base); }
.isi ul { margin-top: var(--s-2); }
.isi__boxed {
  border: 2px solid var(--c-danger);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  background: var(--c-white);
}
.isi__boxed strong { color: var(--c-danger); text-transform: uppercase; letter-spacing: .04em; font-size: var(--text-xs); }

/* ---- Product detail: pack image on branded surface ---- */
.pack-shot {
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(229,115,42,.10) 0%, rgba(229,115,42,0) 55%),
    linear-gradient(160deg, var(--c-cream) 0%, var(--c-offwhite) 48%, #fff 100%);
}
.pack-shot img { max-width: 78%; max-height: 78%; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(15,34,54,.20)); }

/* product hero chip row spacing */
.product-detail-hero .cluster { margin-block: var(--s-3); }

/* ---- Homepage: Principles strip ---- */
.principle {
  background: var(--c-white);
  border: 1px solid var(--c-grey-200);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.principle__n {
  font-family: var(--font-display); font-size: var(--text-2xl);
  color: var(--c-orange); font-weight: 600; line-height: 1;
}
.principle h3 { font-size: var(--text-lg); margin: var(--s-2) 0; }
.principle p { font-size: var(--text-sm); color: var(--c-grey-700); line-height: var(--lh-base); }

/* ---- Homepage: 3-pillar science framing ---- */
.pillar { text-align: center; padding: var(--s-6); }
.pillar__icon {
  width: 64px; height: 64px; margin: 0 auto var(--s-4);
  border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-orange-100); color: var(--c-orange-600);
}
.pillar--green .pillar__icon { background: var(--c-green-100); color: var(--c-green-700); }
.pillar--navy .pillar__icon { background: var(--c-navy); color: var(--c-cream); }
.pillar__icon svg { width: 30px; height: 30px; }
.pillar h3 { font-size: var(--text-xl); margin-bottom: var(--s-2); }
.pillar p { color: var(--c-grey-600); font-size: var(--text-sm); line-height: var(--lh-base); }

/* =================================================================
   SCROLL REVEAL — fade + rise on enter (toggled by site.js)
   ================================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease-out, cubic-bezier(.2,.8,.2,1)),
              transform .6s var(--ease-out, cubic-bezier(.2,.8,.2,1));
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* =================================================================
   THERAPY-AREA VISUAL CARDS — imagery/gradient header per area
   (upgrades the plain icon+text cards on the homepage)
   ================================================================= */
.therapy-card--visual {
  padding: 0;
  overflow: hidden;
}
.therapy-card--visual .therapy-card__figure {
  position: relative;
  height: 168px;
  display: flex; align-items: flex-end;
  padding: var(--s-5);
  overflow: hidden;
}
/* Neuropathic — orange/nerve gradient */
.therapy-card--visual .therapy-card__figure {
  background:
    radial-gradient(120% 120% at 80% 10%, rgba(255,255,255,.35), transparent 45%),
    linear-gradient(135deg, #F6953F 0%, #E5732A 60%, #C25A18 100%);
}
.therapy-card--green .therapy-card__figure {
  background:
    radial-gradient(120% 120% at 80% 10%, rgba(255,255,255,.35), transparent 45%),
    linear-gradient(135deg, #7BB855 0%, #5B9837 60%, #3F7321 100%);
}
.therapy-card--navy .therapy-card__figure {
  background:
    radial-gradient(120% 120% at 80% 10%, rgba(255,255,255,.18), transparent 45%),
    linear-gradient(135deg, #1B3A57 0%, #0F2236 60%, #061425 100%);
}
/* faint motif watermark in the figure corner */
.therapy-card--visual .therapy-card__motif {
  position: absolute; top: -12px; right: -12px;
  width: 132px; height: 132px;
  color: rgba(255,255,255,.18);
  pointer-events: none;
}
.therapy-card--visual .therapy-card__motif svg { width: 100%; height: 100%; }
.therapy-card--visual .therapy-card__figtitle {
  position: relative;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 12px rgba(15,34,54,.25);
}
.therapy-card--visual .therapy-card__pad {
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-4);
  flex: 1;
}
.therapy-card--visual::before { display: none; } /* hide the old top accent bar */
.therapy-card--visual:hover .therapy-card__motif { color: rgba(255,255,255,.28); }

/* =================================================================
   UTILITY-BAR ALIGNMENT FIX
   Keep the top bar on ONE clean line; never break text mid-item.
   The row is trimmed of non-essential items (location, then email)
   before it would ever wrap. (Location & email remain in the footer.)
   ================================================================= */
.utility-bar__inner { flex-wrap: nowrap; }
.utility-bar__msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.utility-bar__contact { flex-wrap: nowrap; flex-shrink: 0; }
.utility-bar__contact-item,
.utility-bar__alert { white-space: nowrap; }
[data-lang-select] { flex-shrink: 0; }
/* Location pill ("Bengaluru") is decorative in the top bar — drop it there. */
.utility-bar__contact span.utility-bar__contact-item { display: none; }
/* On tighter desktops, also drop the email link to protect one-line layout. */
@media (min-width: 769px) and (max-width: 1200px) {
  .utility-bar__contact a[href^="mailto:"] { display: none; }
}