/* === CSS variables consumed by HTML via var() arbitrary-value classes ===
 * --container-site / --container-inner: site-wide layout container widths.
 * --spec-bg is set inline on city-individual specialities cards via style=
 * "--spec-bg: #..." and needs no default.
 */
:root {
  --container-site: 1440px;
  --container-inner: 1380px;
}

/**
 * CFS Homepage - Custom CSS overrides
 * Minimal overrides on top of Tailwind utility classes.
 * Add component-specific styles here only when Tailwind utilities are insufficient.
 */

/* Centres section — card image shadow */
.centre-card__image {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Centres section — backdrop blur on card images */
.centre-card__image {
  backdrop-filter: blur(2px);
}

/* Specialities — inactive triggers 75px, active 92px (desktop only).
 * !important + flex-shrink:0 override Tailwind's `lg:w-auto` + flex-shrink
 * defaults. Without these, flex squeezes inactive triggers to ~54px and the
 * vertical labels overflow visibly. 8 inactive (75) + 1 active (92) +
 * 700px open panel = 1392px (just over 1380 container, accepted overflow). */
@media (min-width: 1024px) {
  .spec-trigger {
    width: 78px !important;
    flex-shrink: 0 !important;
  }
}


/* Doctor cards: hover state per Figma component variant `Doctor Card - Mahipal`
 * (node 71:1591), Default → Variant2 delta. Restored 2026-05-27 after the
 * variant audit found Figma DOES specify hover (just no prototype reactions). */
.doctor-card,
.featured-doctor {
  border: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.doctor-card:hover,
.featured-doctor:hover {
  border-color: #2b286f;
}
.doctor-card:hover .doctor-card__loc-bar {
  background-color: #ffcb05 !important;
}
.doctor-card:hover .doctor-card__city {
  color: #2b286f !important;
}
.doctor-card:hover .doctor-card__spec-pill {
  opacity: 1 !important;
}
.doctor-card:hover .doctor-card__book {
  font-weight: 500 !important;
}
/* Hover effects for doctor-list scroll cards — IR-verified against the Figma
 * "Dr. Lalit Verma" component (Property 1=Default → Variant2):
 *   • image scales up
 *   • location pill #d9d9d9 → #ffcb05 + pin grows (handled inline via group-hover)
 *   • experience bar BACKGROUND STAYS #2b286f — only its text grows (16→~19/23px)
 *   • "Book An Appointment" 13→15px, weight 400→500, gains underline
 * Desktop only (mobile has no hover). */
@media (min-width: 1024px) {
  .doctor-card .doctor-card__image img {
    transition: transform 0.3s ease;
    transform-origin: bottom center;
  }
  .doctor-card:hover .doctor-card__image img {
    transform: scale(1.13);
  }
  /* Experience text grows; the bar background is intentionally NOT recoloured
   * (Figma keeps Rectangle 89 = #2b286f in both states). */
  .doctor-card .doctor-card__exp {
    transition: font-size 0.3s ease;
    /* Figma exp text uses textCase=TITLE; our desktop span is lowercase chars. */
    text-transform: capitalize;
  }
  .doctor-card:hover .doctor-card__exp {
    font-size: 19px;
  }
}
/* CMS-friendly book CTA wrapper hover — weight 400→500 at all sizes; on desktop
 * also 13→15px + underline (Figma Default→Variant2). <p> is CMS-bare, so the
 * styling lives on the wrapper `> p` selector. */
.doctor-card:hover .cms-doctor-card-book > p,
.doctor-card:hover .cms-doctor-card-book-responsive > p,
.featured-doctor:hover .cms-doctor-card-book > p,
.featured-doctor:hover .cms-doctor-card-book-responsive > p {
  font-weight: 500;
}
@media (min-width: 1024px) {
  /* Book CTA hover: underline only (weight 400→500 comes from the rule above).
   * The Figma variants also grow the font ~2px (13→15 scroll, 17→19 featured),
   * but that delta is intentionally omitted — it's visually negligible next to
   * the underline. Rest sizes (scroll 13px, featured 17px) stay unchanged. */
  .doctor-card:hover .cms-doctor-card-book-responsive > p,
  .featured-doctor:hover .cms-doctor-card-book-responsive > p {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

/* Specialisation pill (Figma Component 173 — Group 775 Default → 776 Selected).
 * Pattern reused on multiple sibling pill components in the same family. */
.spec-pill[aria-pressed="true"],
.spec-pill.is-selected {
  background-color: #ffcb05;
  font-weight: 500;
}
/* Same pattern for state filter pills (Component 201) */
.state-pill[aria-pressed="true"],
.state-pill.is-selected {
  background-color: #ffcb05;
  font-weight: 500;
}

/* Callback Submit button hover (Figma Component 203, Default → Hover):
 * 1px inset white ring + text Medium 500. Targets `.cta-submit` inside
 * the callback form. */
.callback-form .cta-submit:hover,
.callback-form__card .cta-submit:hover,
form[data-hero-form] .cta-submit:hover,
form[data-hero-form-mobile] .cta-submit:hover {
  box-shadow: inset 0 0 0 1px #ffffff;
  font-weight: 500;
}

/* Footer address item hover (Figma Component 204/205/206): icon circle
 * fills yellow. Target `.footer-address__icon`. */
.footer-address-item:hover .footer-address__icon {
  background-color: #ffcb05;
  border-color: #ffcb05;
}

/* Why Us: background highlight grid — 10x6 ellipse cells per Figma (60 total).
 * Each cell renders as an ellipse via border-radius:50%. JS sets per-cell opacity
 * based on distance from mouse pointer to create a spotlight effect. */
.whyus-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(6, 1fr);
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.whyus-tile {
  opacity: 0;
  border: 1px solid #2b286f;
  background: transparent;
  transition: opacity 0.2s ease-out;
}

/* Phone bar: text and icon turn navy on hover (yellow bg) */
.phone-bar__item:hover span {
  color: #2b286f;
  transition: color 0.3s;
}
.phone-bar__item:hover svg path {
  fill: #2b286f;
  transition: fill 0.3s;
}

/* === CMS paragraph wrappers — literal CSS (do not use @apply; Play CDN strips it) ===
 * Bare <p> tags inside these wrappers inherit/get all styling. Used so paragraph
 * content can be CMS-edited without classes on <p>. Mirrors css/input.css lines
 * 162-197 (the @apply versions, kept until output.css is deleted in Phase 4).
 */

.cms-card-excerpt > p {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.375;
  color: #1a1a1a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .cms-card-excerpt > p {
    font-size: 14px;
  }
}

.cms-card-excerpt-3 > p {
  -webkit-line-clamp: 3;
}

/* Blog listing card excerpt — same wrapper as .cms-card-excerpt but desktop scales up to
   Poppins 20/33 (Figma 'Desktop blog' instance). Mobile inherits the 13px base. */
.cms-blog-card-excerpt > p {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.375;
  color: #000;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .cms-blog-card-excerpt > p {
    font-size: 20px;
    line-height: 33px;
    letter-spacing: -0.8px;
  }
}

.cms-doctor-card-book {
  margin-top: auto;
}
.cms-doctor-card-book > p {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #000;
  text-align: center;
}

.cms-doctor-card-book-responsive {
  margin-top: auto;
}
.cms-doctor-card-book-responsive > p {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.375;
  color: #000;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding-top: 1rem;
}
@media (min-width: 1024px) {
  .cms-doctor-card-book-responsive > p {
    font-size: 13px;
    text-decoration: none;
    padding-top: 0;
  }
  /* Featured (Mahipal) CTA rest size is larger than the scroll-card CTA
   * (Figma: 17px vs 13px). Scoped to .featured-doctor so scroll cards keep 13px. */
  .featured-doctor .cms-doctor-card-book-responsive > p {
    font-size: 17px;
  }
}

.cms-sidebar-list-title > p {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.25;
  color: #2b286f;
  margin-bottom: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .cms-sidebar-list-title > p {
    font-size: 17px;
    line-height: 25.5px;
    letter-spacing: -0.68px;
  }
}

.cms-doctor-meta > p {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 1024px) {
  .cms-doctor-meta > p {
    gap: 0.75rem;
  }
}


/* === Cataract-page-only rules (selectors prefixed with [data-tabs="..."]
 *     or .cataract-* / .cat-*; inert on non-cataract pages) ===
 */
/**
 * CFS Cataract Page - Custom CSS overrides
 * Tab+panel connected shapes on mobile for cataract-specific sections.
 */

/* Cataract — tab+panel connected gray shape on mobile */
@media (max-width: 1023px) {
  /* All connected tab sections: base tab style */
  [data-tabs="understanding"] .cat-tab,
  [data-tabs="riskfactors"] .cat-tab,
  [data-tabs="surgery-group1"] .cat-tab,
  [data-tabs="surgery-group2"] .cat-tab,
  [data-tabs="iol-group1"] .cat-tab,
  [data-tabs="iol-group2"] .cat-tab {
    background: transparent !important;
    color: #2b286f !important;
    border-radius: 0 !important;
    border: none !important;
    position: relative;
  }

  /* Active tab: gray bg + rounded top + underline */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"],
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"],
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"],
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"],
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"],
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"] {
    background: #f4f4f8 !important;
    border-radius: 13px 13px 0 0 !important;
    border-bottom: none !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-color: #2b286f !important;
    text-decoration-thickness: 2px !important;
  }

  /* Inverse rounded corners: pseudo-elements */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 13px;
    height: 13px;
    background: transparent;
  }

  /* Left scoop */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]::before {
    left: -13px;
    border-bottom-right-radius: 13px;
    box-shadow: 5px 5px 0 5px #f4f4f8;
  }

  /* Right scoop */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]::after,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]::after {
    right: -13px;
    border-bottom-left-radius: 13px;
    box-shadow: -5px 5px 0 5px #f4f4f8;
  }

  /* First tab: hide left scoop */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]:first-child::before,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]:first-child::before {
    display: none;
  }

  /* Last tab: hide right scoop */
  [data-tabs="understanding"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="riskfactors"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="surgery-group1"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="surgery-group2"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="iol-group1"] .cat-tab[aria-selected="true"]:last-child::after,
  [data-tabs="iol-group2"] .cat-tab[aria-selected="true"]:last-child::after {
    display: none;
  }

  /* Risks mobile: navy bg variant */
  [data-tabs="risks-mobile"] .cat-tab {
    background: transparent !important;
    color: #2b286f !important;
    border-radius: 0 !important;
    border: none !important;
    position: relative;
  }

  /* Risks tab active: navy */
  [data-tabs="risks-mobile"] .cat-tab[data-tab="risks-tab"][aria-selected="true"] {
    background: #2b286f !important;
    color: white !important;
    border-radius: 13px 13px 0 0 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-color: white !important;
    text-decoration-thickness: 2px !important;
  }

  /* Prevention tab active: gray */
  [data-tabs="risks-mobile"] .cat-tab[data-tab="prevention-tab"][aria-selected="true"] {
    background: #f4f4f8 !important;
    color: #2b286f !important;
    border-radius: 13px 13px 0 0 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-color: #2b286f !important;
    text-decoration-thickness: 2px !important;
  }

  [data-tabs="risks-mobile"] .cat-tab[aria-selected="true"]::before,
  [data-tabs="risks-mobile"] .cat-tab[aria-selected="true"]::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 13px;
    height: 13px;
    background: transparent;
  }

  /* Risks tab scoops: navy */
  [data-tabs="risks-mobile"] .cat-tab[data-tab="risks-tab"][aria-selected="true"]::before {
    left: -13px;
    border-bottom-right-radius: 13px;
    box-shadow: 5px 5px 0 5px #2b286f;
  }

  [data-tabs="risks-mobile"] .cat-tab[data-tab="risks-tab"][aria-selected="true"]::after {
    right: -13px;
    border-bottom-left-radius: 13px;
    box-shadow: -5px 5px 0 5px #2b286f;
  }

  /* Prevention tab scoops: gray */
  [data-tabs="risks-mobile"] .cat-tab[data-tab="prevention-tab"][aria-selected="true"]::before {
    left: -13px;
    border-bottom-right-radius: 13px;
    box-shadow: 5px 5px 0 5px #f4f4f8;
  }

  [data-tabs="risks-mobile"] .cat-tab[data-tab="prevention-tab"][aria-selected="true"]::after {
    right: -13px;
    border-bottom-left-radius: 13px;
    box-shadow: -5px 5px 0 5px #f4f4f8;
  }

  [data-tabs="risks-mobile"] .cat-tab[aria-selected="true"]:first-child::before {
    display: none;
  }

  [data-tabs="risks-mobile"] .cat-tab[aria-selected="true"]:last-child::after {
    display: none;
  }

  /* Content panel overflow visible for scoops */
  [data-tabs="understanding"] .cat-panel:not(.hidden),
  [data-tabs="riskfactors"] .cat-panel:not(.hidden),
  [data-tabs="surgery-group1"] .cat-panel:not(.hidden),
  [data-tabs="surgery-group2"] .cat-panel:not(.hidden),
  [data-tabs="iol-group1"] .cat-panel:not(.hidden),
  [data-tabs="iol-group2"] .cat-panel:not(.hidden),
  [data-tabs="risks-mobile"] .cat-panel:not(.hidden) {
    position: relative;
    overflow: visible;
  }
}

/* === Hotfix 2026-05-27: regressed rules from input.css ===
 * These rules lived in css/input.css (lines 16-101, 132-154) but were not
 * @apply-based, so they were missed during the v4→v3 CDN migration when
 * cms-* @apply rules got expanded into custom.css. Restoring them here
 * un-breaks: yellow button hover scale, testimonials photo collage transitions,
 * specialities accordion expand/collapse + vertical desktop trigger text,
 * journey eye dot active scale, callback form gradient borders.
 */

/* Yellow button scale-up on hover — kept ONLY for the hero submit + main nav
 * Book An Appointment. Strict-parity strip removed .cta-btn from this rule
 * (Section 10 CTAs should stay static on hover per Figma). */
.cta-button:hover,
.cta-submit:hover {
  transform: scale(1.05);
}
.cta-button,
.cta-submit {
  transition: transform 0.2s ease, filter 0.3s, box-shadow 0.3s;
}

/* Testimonials photo collage — smooth slide between positions */
.testimonial-photo {
  transition: left 0.3s ease, top 0.3s ease, width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}
.testimonial-photo[data-photo-slot="left"] {
  left: 16px; top: 193px; width: 197px; height: 218px; z-index: 0; opacity: 0.6;
}
.testimonial-photo[data-photo-slot="middle"] {
  left: 236px; top: 193px; width: 197px; height: 218px; z-index: 1; opacity: 1;
}
.testimonial-photo[data-photo-slot="main"] {
  left: 456px; top: 130px; width: 258px; height: 286px; z-index: 2; opacity: 1;
}

/* Specialities accordion panel — responsive animation */
.spec-panel {
  overflow: hidden;
  opacity: 0;
  transition: all 0.35s ease;
}

/* Mobile: vertical expand (max-height) */
@media (max-width: 1023px) {
  .spec-panel {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .spec-panel.open {
    max-height: 600px;
    opacity: 1;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

/* Desktop: horizontal expand (max-width) */
@media (min-width: 1024px) {
  .spec-panel {
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: 48px;
    padding-bottom: 32px;
  }
  .spec-panel.open {
    max-width: 700px;
    opacity: 1;
    padding-left: 40px;
    padding-right: 31px;
  }
  /* Figma interaction: the active tab's description panel sits IMMEDIATELY to
     the right of that tab. Each trigger+panel pair is interleaved in DOM order
     (spec-item is lg:contents), so leaving them in source order makes the open
     panel render right after its own trigger — earlier tabs to its left, later
     tabs to its right. (Do NOT force panels to order:1 — that pins every panel
     to the far-right end, detaching the description from a clicked middle tab.) */
}

/* Desktop: trigger text rotated vertically */
@media (min-width: 1024px) {
  .spec-trigger span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
}

/* Journey eye dots */
.journey-dot {
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
}
.journey-dot.active {
  transform: translate(-50%, -50%) scale(1.5);
  box-shadow: 0 0 0 3px rgba(255, 203, 5, 0.4);
}

/* Callback form gradient border with border-radius */
.callback-gradient-border {
  position: relative;
}
.callback-gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 11px;
  padding: 1px;
  background: linear-gradient(180deg, #2B286F 0%, #FFFFFF 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .callback-gradient-border::before {
    display: none;
  }
  .callback-form__card {
    background: white !important;
    backdrop-filter: none !important;
  }
}

/* Callback input gradient border */
.callback-input-border {
  position: relative;
}
.callback-input-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  padding: 1px;
  background: linear-gradient(180deg, #2B286F 0%, #FFFFFF 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .callback-input-border {
    background: white !important;
    backdrop-filter: none !important;
  }
}


/* Section 13 — Blogs (Vision Care Insights) — CMS-friendly blog card excerpt */
.cms-blog-excerpt > p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Blog card hover (Figma "Desktop blog" Default→hover variant): a 2px #2b286f
 * outside border appears + the cover image zooms ~1.13x. Desktop only (mobile
 * card already carries a static border; no hover on touch). box-shadow ring is
 * used so there's no layout shift and it sits outside the rounded corners. */
@media (min-width: 1024px) {
  .blog-card {
    transition: box-shadow 0.3s ease;
  }
  .blog-card:hover {
    box-shadow: 0 0 0 2px #2b286f;
  }
  .blog-card__image img {
    transition: transform 0.3s ease;
    transform-origin: center;
  }
  .blog-card:hover .blog-card__image img {
    transform: scale(1.13);
  }
}

/* Section 14 — callback form input focus border (gradient-border wrapper) */
.callback-input-border:focus-within::before {
  background: linear-gradient(180deg, #2B286F 0%, #2B286F 100%);
}