/* Noman's Dental Care & Implant Center — public website (Premium Warm theme) */

:root {
  --navy: #0b2042;
  --navy-deep: #071730;
  --gold: #c9973a;
  --gold-deep: #a97a24;
  --gold-light: #f6ecd8;
  --blue: #1f9ee0;
  --blue-light: #eaf6fd;
  --pink: #e0245e;
  --ink: #1c2436;
  --ink-faint: #6b7488;
  --line: #ecdfc8;
  --paper: #ffffff;
  --bg: #fbf8f2;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Poppins', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}
h1, h2, h3, h4 { font-family: 'Playfair Display', 'Poppins', serif; margin: 0 0 .5em; color: var(--navy); font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--blue); text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.script { font-family: 'Dancing Script', cursive; }

/* Bengali script renders better with a dedicated font */
html[data-lang="bn"] body,
html[data-lang="bn"] h1, html[data-lang="bn"] h2, html[data-lang="bn"] h3, html[data-lang="bn"] h4 {
  font-family: 'Hind Siliguri', 'Poppins', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Header / nav */
.site-header {
  background: var(--navy);
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 16px rgba(0,0,0,.18);
  border-bottom: 3px solid var(--gold);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 80px; position: relative; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.brand img { height: 58px; width: auto; }
.brand-text { line-height: 1.15; }
.brand-text .name { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.15rem; color: #fff; white-space: nowrap; }
.brand-text .sub { font-size: .72rem; color: var(--gold); letter-spacing: .04em; white-space: nowrap; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: #d7e6f5; font-weight: 500; font-size: .95rem; transition: color .2s; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--gold); }
.nav-cta {
  background: var(--gold); color: #fff !important; padding: 11px 22px; border-radius: 4px;
  font-weight: 600; font-size: .9rem !important; transition: background .2s; white-space: nowrap;
}
.nav-cta:hover { background: var(--gold-deep); }
.nav-toggle { display: none; background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; }
.lang-toggle-pub { display: flex; gap: 4px; background: rgba(255,255,255,.1); border-radius: 20px; padding: 3px; }
.lang-toggle-pub a { padding: 5px 12px; border-radius: 16px; font-size: .82rem; font-weight: 600; color: #d7e6f5 !important; }
.lang-toggle-pub a.active { background: var(--gold); color: #fff !important; }

/* Lowered from 1150px to 1060px after shortening "Services & Pricing" to "Services":
   that alone freed up ~70px, so the nav now comfortably fits on one line down to a
   narrower width than before. Below this width there still isn't enough room for every
   nav label + the lang toggle + the Book Appointment button on one line, and since
   nav-links doesn't wrap, individual multi-word labels ("Our Doctors", "Book
   Appointment") would wrap onto a second line instead — the "double line" look.
   Collapsing to the hamburger here avoids that squeeze entirely. */
@media (max-width: 1060px) {
  .nav-links {
    position: absolute; top: 80px; left: 0; right: 0; background: var(--navy);
    flex-direction: column; align-items: flex-start; padding: 16px 24px 24px; gap: 16px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
  .nav-cta { align-self: flex-start; }
}

/* Same collapsed-menu look as the media query above, but triggered by JS (site_header.php)
   whenever the nav actually doesn't fit on one line at the current width/zoom/text-size —
   e.g. a browser text-size setting above 100%, or long translated labels — instead of the
   "double line" wrapped look (see the comment above the 1060px breakpoint). */
.site-header.nav-compact .nav-links {
  position: absolute; top: 80px; left: 0; right: 0; background: var(--navy);
  flex-direction: column; align-items: flex-start; padding: 16px 24px 24px; gap: 16px;
  display: none;
}
.site-header.nav-compact .nav-links.open { display: flex; }
.site-header.nav-compact .nav-toggle { display: block; }
.site-header.nav-compact .nav-cta { align-self: flex-start; }

/* Hero */
.hero {
  background: linear-gradient(120deg, var(--navy) 0%, #123a6b 75%);
  color: #fff;
  padding: 76px 0 60px;
  position: relative; overflow: hidden;
}
.hero:before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 88% 15%, rgba(201,151,58,.22), transparent 42%),
    radial-gradient(circle at 8% 92%, rgba(201,151,58,.14), transparent 42%);
}
.hero .container { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; position: relative; z-index: 1; }
.trust-row { display: flex; gap: 22px; margin-bottom: 20px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: #e9d9b8; font-weight: 600; }
.hero-eyebrow { color: var(--gold); font-weight: 700; letter-spacing: .1em; font-size: .8rem; text-transform: uppercase; margin-bottom: 14px; }
.hero h1 { color: #fff; font-size: 2.7rem; line-height: 1.15; margin-bottom: 18px; }
.hero h1 span { color: #f6c453; }
.hero p.lead { color: #d8e2f0; font-size: 1.08rem; max-width: 46ch; }
.hero-cta { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 13px 28px; border-radius: 4px; font-weight: 600; font-size: .95rem;
  border: 2px solid transparent; cursor: pointer; transition: all .2s;
}
.btn-primary { background: var(--gold); color: #fff; }
.btn-primary:hover { background: var(--gold-deep); }
.btn-outline { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,.12); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-deep); }
/* Hero photo: asymmetric arc-corner frame with an auto-rotating photo slideshow. */
.hero-shape-outer {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 6 / 5;
  margin: 0 auto;
}
.hero-shape-decor {
  position: absolute;
  top: 26px; left: 26px; right: -18px; bottom: -18px;
  border-radius: 46% 0 0 0;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  z-index: 0;
}
.hero-shape-frame {
  position: absolute;
  inset: 0;
  border-radius: 46% 0 0 0;
  overflow: hidden;
  z-index: 1;
  border: 6px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 60px rgba(0,0,0,.4);
  background: var(--navy-deep);
}
.hero-shape-frame:after {
  content: "";
  position: absolute;
  top: -8px; left: -8px;
  width: 46%; height: 46%;
  border-top: 3px solid rgba(255,255,255,.5);
  border-left: 3px solid rgba(255,255,255,.5);
  border-radius: 100% 0 0 0;
  pointer-events: none;
  z-index: 3;
}
.hero-shape-frame .slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-shape-frame .slide.active { opacity: 1; z-index: 2; }
.hero-shape-frame .slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1);
  transition: transform 5200ms ease-out;
}
.hero-shape-frame .slide.active img { transform: scale(1.09); }
@media (prefers-reduced-motion: reduce) {
  .hero-shape-frame .slide, .hero-shape-frame .slide img { transition: none !important; }
}
.hero-shape-outer .float-badge {
  position: absolute; bottom: -18px; right: -14px; background: #fff; color: var(--navy);
  border-radius: 10px; padding: 14px 18px; box-shadow: 0 14px 34px rgba(0,0,0,.25); text-align: center;
  z-index: 4;
}
.hero-shape-outer .float-badge .num { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 700; color: var(--gold); line-height: 1; }
.hero-shape-outer .float-badge .lbl { font-size: .68rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-shape-outer { max-width: 360px; margin: 36px auto 0; }
}

/* Highlight strip */
.highlights { background: #fff; border-bottom: 1px solid var(--line); }
.highlights .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 30px 24px; }
.highlight-item { display: flex; align-items: center; gap: 12px; }
.highlight-item .ic {
  width: 44px; height: 44px; border-radius: 50%; background: var(--gold-light); color: var(--gold-deep);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0;
}
.highlight-item .txt { font-weight: 600; font-size: .88rem; color: var(--navy); }
@media (max-width: 860px) { .highlights .container { grid-template-columns: repeat(2, 1fr); } }

/* Sections */
section.section { padding: 76px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.section-eyebrow {
  color: var(--gold-deep); font-weight: 600; margin-bottom: 2px;
  font-family: 'Dancing Script', cursive; font-size: 2.2rem; text-transform: none; letter-spacing: 0; line-height: 1;
}
.section-head h2 { font-size: 2rem; }
.section-head p { color: var(--ink-faint); }

/* Cards grid (services preview / doctors) */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 30px;
  box-shadow: 0 10px 28px rgba(11,32,66,.06); transition: transform .25s, box-shadow .25s;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(11,32,66,.12); }
.card h3 { font-size: 1.15rem; }
.card .ic {
  width: 52px; height: 52px; border-radius: 12px; margin-bottom: 14px;
  background: linear-gradient(135deg, var(--gold), #e3b768); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}

/* Why choose us */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; } }
.why-list { list-style: none; padding: 0; margin: 0; }
.why-list li { display: flex; gap: 14px; margin-bottom: 20px; align-items: flex-start; }
.why-list .check {
  width: 28px; height: 28px; border-radius: 50%; background: var(--gold-light); color: var(--gold-deep);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700;
}
.why-list .txt strong { display: block; color: var(--navy); margin-bottom: 2px; }
.why-list .txt span { color: var(--ink-faint); font-size: .92rem; }
.why-visual { border-radius: 10px; overflow: hidden; box-shadow: 0 24px 50px rgba(11,32,66,.15); }
.why-visual img { aspect-ratio: 4/5; object-fit: cover; object-position: top center; }

/* Why choose us — stat tile grid (replaces a doctor photo with 4 credibility numbers) */
.why-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.why-stat {
  border-radius: 14px; padding: 26px 20px; text-align: center;
  background: linear-gradient(150deg, var(--navy), #123a6b); color: #fff;
}
.why-stat.alt { background: linear-gradient(150deg, #fff, var(--gold-light)); color: var(--navy); border: 1px solid var(--line); }
.why-stat .icon { width: 36px; height: 36px; margin: 0 auto 12px; display: block; }
.why-stat .num { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; line-height: 1; }
.why-stat .lbl { font-size: .82rem; margin-top: 6px; opacity: .9; }
@media (max-width: 480px) { .why-stat .num { font-size: 1.5rem; } }

/* Doctor cards */
.doctor-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; border-top: 4px solid var(--gold); }
.doctor-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: top center; }
.doctor-photo-wrap { background: linear-gradient(180deg, var(--gold-light) 0%, #fff 68%); padding: 40px 20px 14px; display: flex; justify-content: center; }
.doctor-card .body { padding: 26px; }
.doctor-card h3 { margin-bottom: 2px; }
.doctor-card .cred { color: var(--gold-deep); font-weight: 600; font-size: .88rem; margin-bottom: 12px; }
.doctor-card .specialty, .specialty { background: var(--gold-light); border: 1px solid #e8d3a4; color: var(--navy); display: inline-block; padding: 6px 14px; border-radius: 20px; font-size: .8rem; font-weight: 600; margin-bottom: 14px; }
.doctor-card .quote { font-style: italic; color: var(--ink-faint); border-left: 3px solid var(--gold); padding-left: 14px; margin: 14px 0 0; }
.doctor-more { margin-top: 12px; color: var(--gold-deep); font-weight: 600; }

/* Pricing plans */
.plan-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; }
.plan-tab {
  border: 2px solid var(--line); background: #fff; padding: 10px 22px; border-radius: 30px;
  font-weight: 600; cursor: pointer; font-size: .92rem; color: var(--navy);
}
.plan-tab.active { border-color: var(--gold); background: var(--gold); color: #fff; }
.plan-panel { display: none; }
.plan-panel.active { display: block; }
.plan-card { background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 10px 34px rgba(11,32,66,.08); }
.plan-card .plan-head { padding: 26px 30px; color: #fff; }
.plan-card.essential .plan-head { background: linear-gradient(120deg,#1c8a5c,#2fae78); }
.plan-card.standard .plan-head { background: linear-gradient(120deg, var(--navy), #123a6b); }
.plan-card.premium .plan-head { background: linear-gradient(120deg,var(--gold-deep),var(--gold)); }
.plan-card .plan-head h3 { color: #fff; margin-bottom: 4px; }
.plan-card .plan-head p { color: rgba(255,255,255,.85); margin: 0; font-size: .9rem; }
.plan-rows { padding: 8px 30px 26px; }
.plan-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.plan-row:last-child { border-bottom: none; }
.plan-row .price { font-weight: 700; color: var(--navy); white-space: nowrap; }
.plan-note { text-align: center; color: var(--ink-faint); font-size: .85rem; margin-top: 18px; }

/* Simple treatment list (index preview) */
.svc-list { columns: 2; column-gap: 32px; }
.svc-list li { break-inside: avoid; padding: 8px 0; border-bottom: 1px dashed var(--line); list-style: none; }
@media (max-width: 640px) { .svc-list { columns: 1; } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-item { display: flex; gap: 16px; margin-bottom: 22px; }
.contact-item .ic {
  width: 46px; height: 46px; border-radius: 50%; background: var(--gold-light); color: var(--gold-deep);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0;
}
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.hours-table td:last-child { text-align: right; font-weight: 600; color: var(--navy); }
/* .map-wrap is a grid item next to the address/hours column in .contact-grid;
   grid items stretch to the row's tallest sibling by default, so the iframe
   must fill that stretched height (not a fixed px) or it leaves blank space
   below itself. On mobile the grid collapses to a single stacked column, so
   there's no sibling height to stretch to — fall back to a fixed height there. */
.map-wrap { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(11,32,66,.06); }
.map-wrap iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
@media (max-width: 860px) {
  .map-wrap iframe { height: 340px; }
}

/* Form */
.form-card { background: #fff; border-radius: 16px; border: 1px solid var(--line); padding: 32px; box-shadow: 0 10px 34px rgba(11,32,66,.08); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; color: var(--navy); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: .95rem; font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field textarea { resize: vertical; min-height: 90px; }
.alert { padding: 16px 20px; border-radius: 12px; margin-bottom: 20px; font-weight: 500; }
.alert-success { background: #e7f8ef; color: #146c43; border: 1px solid #b5e6cb; }
.alert-error { background: #fdeeee; color: #a3242c; border: 1px solid #f3c2c4; }

/* Appointment date picker — custom so we can gray out past dates, Fridays
   (the clinic's weekly closed day) and Bangladesh public holidays, which a
   plain native <input type="date"> can't do. See bd_public_holidays() in
   site_config.php for the holiday list and the calendar script in
   site_footer.php. */
.date-picker { position: relative; }
.date-display { cursor: pointer; background: #fff; }
.date-cal {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 36px rgba(11,32,66,.16); padding: 14px;
}
.date-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.date-cal-title { font-weight: 700; color: var(--navy); font-size: .95rem; }
.date-nav {
  background: var(--gold-light); color: var(--gold-deep); border: none; border-radius: 6px;
  width: 30px; height: 30px; font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.date-nav:hover { background: var(--gold); color: #fff; }
.date-nav:disabled { opacity: .35; cursor: not-allowed; background: var(--gold-light); color: var(--gold-deep); }
.date-cal-dow, .date-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.date-cal-dow span { font-size: .72rem; font-weight: 700; color: var(--ink-faint); padding-bottom: 4px; }
.date-cal-grid button {
  width: 100%; aspect-ratio: 1; border: none; background: none; border-radius: 8px;
  font-size: .85rem; color: var(--ink); cursor: pointer;
}
.date-cal-grid button:hover:not(:disabled) { background: var(--gold-light); color: var(--gold-deep); }
.date-cal-grid button:disabled {
  color: #c7cbd4; cursor: not-allowed; text-decoration: line-through; text-decoration-color: #dfe2e8;
}
.date-cal-grid button.is-today:not(:disabled) { border: 1px solid var(--gold); }
.date-cal-grid button.is-selected { background: var(--gold); color: #fff !important; }
.date-cal-grid span.pad { visibility: hidden; }
.date-cal-legend { margin-top: 10px; font-size: .72rem; color: var(--ink-faint); display: flex; align-items: center; gap: 6px; }
.lg-dot { width: 8px; height: 8px; border-radius: 50%; background: #dfe2e8; display: inline-block; }

/* CTA band */
.cta-band { background: var(--navy); color: #fff; padding: 60px 0; text-align: center; position: relative; overflow: hidden; }
.cta-band:before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(201,151,58,.2), transparent 60%); }
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #cfe1f2; }

/* Footer */
.site-footer { background: var(--navy-deep); color: #b9c9dd; padding: 50px 0 26px; font-size: .9rem; border-top: 3px solid var(--gold); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; font-family: 'Poppins', sans-serif; }
.site-footer a { color: #b9c9dd; }
.site-footer a:hover { color: var(--gold); }
.site-footer .brand { margin-bottom: 12px; }
.site-footer .brand strong { font-family: 'Playfair Display', serif; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; text-align: center; color: #7f93ac; font-size: .82rem; }

/* ================= Offers & Promotions page — luxe animated ticket style ================= */
.promo-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(140deg, var(--navy-deep) 0%, var(--navy) 55%, #123a6b 100%);
  padding:78px 0 64px; text-align:center; color:#fff;
}
.promo-hero:before, .promo-hero:after{
  content:""; position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none;
}
.promo-hero:before{ width:360px; height:360px; background:rgba(201,151,58,.35); top:-140px; left:-80px; }
.promo-hero:after{ width:300px; height:300px; background:rgba(201,151,58,.25); bottom:-120px; right:-60px; }
.promo-hero .sparkle{ position:absolute; font-size:1.1rem; opacity:.85; color:var(--gold); animation:sparkleTwinkle 2.6s ease-in-out infinite; }
@keyframes sparkleTwinkle{ 0%,100%{ opacity:.2; transform:scale(.8) rotate(0deg); } 50%{ opacity:1; transform:scale(1.15) rotate(15deg); } }
.promo-pill{
  display:inline-flex; align-items:center; gap:8px; position:relative; z-index:1;
  background:rgba(255,255,255,.12); border:1px solid rgba(201,151,58,.5); color:var(--gold-light);
  font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 18px; border-radius:30px; margin-bottom:20px;
  animation:pillGlow 2.4s ease-in-out infinite;
}
@keyframes pillGlow{ 0%,100%{ box-shadow:0 0 0 rgba(201,151,58,0); } 50%{ box-shadow:0 0 22px rgba(201,151,58,.55); } }
.promo-hero h1{
  position:relative; z-index:1; font-size:2.7rem; margin-bottom:14px;
  background:linear-gradient(100deg,#fff 20%, var(--gold) 40%, #f6e7c4 50%, var(--gold) 60%, #fff 80%);
  background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shineText 5s linear infinite;
}
@keyframes shineText{ 0%{ background-position:0% 0; } 100%{ background-position:-220% 0; } }
.promo-hero p.lead{ position:relative; z-index:1; color:#d8e2f0; max-width:52ch; margin:0 auto; }

.ticket-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:960px){ .ticket-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .ticket-grid{ grid-template-columns:1fr; } }
.ticket-card{
  position:relative; display:flex; background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 14px 34px rgba(11,32,66,.1);
  opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease;
}
.ticket-card.in{ opacity:1; transform:translateY(0); }
.ticket-card:hover{ box-shadow:0 22px 48px rgba(11,32,66,.18); transform:translateY(-4px); }
.ticket-stub{
  position:relative; width:104px; flex-shrink:0;
  background:linear-gradient(160deg, var(--gold), #a97a24);
  color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:14px 8px; overflow:hidden;
}
.ticket-stub .pct{ font-family:'Playfair Display',serif; font-weight:700; font-size:1.05rem; line-height:1.15; position:relative; z-index:1; }
.ticket-stub:after{
  content:""; position:absolute; top:-60%; left:-60%; width:60%; height:220%;
  background:linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%);
  animation:ticketShine 3.2s ease-in-out infinite;
}
@keyframes ticketShine{ 0%{ transform:translateX(-40%) rotate(20deg); } 100%{ transform:translateX(320%) rotate(20deg); } }
.ticket-divider{ position:relative; width:0; border-left:2px dashed rgba(255,255,255,.6); }
.ticket-divider:before, .ticket-divider:after{
  content:""; position:absolute; width:16px; height:16px; background:var(--bg); border-radius:50%;
}
.ticket-divider:before{ top:-8px; left:-9px; }
.ticket-divider:after{ bottom:-8px; left:-9px; }
.ticket-body{ flex:1; padding:22px 22px 22px 24px; position:relative; }
.ticket-ribbon{
  position:absolute; top:14px; right:-32px; background:var(--pink); color:#fff; font-size:.66rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; padding:4px 38px; transform:rotate(35deg);
  box-shadow:0 4px 10px rgba(0,0,0,.2);
}
.ticket-ribbon.gold{ background:linear-gradient(135deg,var(--gold),#a97a24); }
.ticket-body h3{ font-size:1.08rem; margin-bottom:6px; padding-right:30px; }
.ticket-body p.t-desc{ color:var(--ink-faint); font-size:.88rem; margin-bottom:14px; }
.t-countdown{ display:flex; gap:8px; margin-bottom:16px; }
.t-countdown .cbox{ background:var(--navy); color:#fff; border-radius:8px; padding:6px 9px; text-align:center; min-width:44px; }
.t-countdown .cbox .n{ font-family:'Playfair Display',serif; font-weight:700; font-size:1rem; color:var(--gold); line-height:1; }
.t-countdown .cbox .l{ font-size:.6rem; text-transform:uppercase; letter-spacing:.04em; color:#cfd9e8; }
.t-ongoing{ font-size:.78rem; font-weight:700; color:#1c8a5c; margin-bottom:16px; display:inline-flex; align-items:center; gap:6px; }
.t-cta{
  display:inline-block; background:linear-gradient(135deg,var(--gold),#a97a24); color:#fff; font-weight:700;
  padding:10px 20px; border-radius:8px; font-size:.9rem; animation:ctaPulse 2.6s ease-in-out infinite;
}
@keyframes ctaPulse{ 0%,100%{ box-shadow:0 0 0 rgba(201,151,58,.5); } 50%{ box-shadow:0 0 0 8px rgba(201,151,58,0); } }

.promo-empty { text-align: center; padding: 70px 20px; color: var(--ink-faint); }
.promo-empty .ic { font-size: 2.6rem; margin-bottom: 16px; }
.promo-empty h3 { color: var(--navy); margin-bottom: 8px; }

/* Whatsapp float */
.wa-float {
  position: fixed; bottom: 22px; right: 22px; z-index: 60;
  background: #25D366; color: #fff; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* ===== Services page: price calculator + photo grid + detail modal ===== */
.calc-card{background:var(--navy);border-radius:16px;overflow:hidden;box-shadow:0 24px 50px rgba(11,32,66,.25);}
.calc-body{padding:30px 32px 22px;}
.calc-body label{display:block;color:var(--gold-light);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.calc-field{margin-bottom:16px;}
.calc-field select{width:100%;padding:11px 14px;border-radius:8px;border:none;font-size:.94rem;font-family:inherit;background:#fff;color:var(--navy);}
.calc-result{background:linear-gradient(120deg,var(--gold-deep),var(--gold));padding:22px 32px;text-align:center;}
.calc-result .lbl{color:#fff;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.9;}
.calc-result .amount{font-family:'Playfair Display',serif;font-size:2.2rem;font-weight:700;color:#fff;margin-top:4px;}
.calc-result .note{color:#fff;opacity:.85;font-size:.76rem;margin-top:4px;font-style:italic;}
.calc-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
.calc-visual{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px;text-align:center;}
.calc-visual .big-icon{width:100%;height:150px;margin:0 auto 16px;border-radius:12px;background:var(--gold-light);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.calc-visual .big-icon svg{width:54px;height:54px;stroke:var(--navy);}
.calc-visual .big-icon img{width:100%;height:100%;object-fit:cover;}
.calc-visual h3{margin-bottom:6px;}
.calc-visual p{color:var(--ink-faint);font-size:.9rem;margin:0;}

.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.svc-grid-3col{grid-template-columns:repeat(3,1fr);}
.svc-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 18px 20px;text-align:center;cursor:pointer;transition:transform .2s, box-shadow .2s;}
.svc-card:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(11,32,66,.12);border-color:var(--gold);}
.svc-card .pic{width:100%;height:130px;border-radius:12px;margin:0 auto 14px;background:linear-gradient(135deg,var(--gold-light),#fff);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.svc-card .pic img{width:100%;height:100%;object-fit:cover;}
.svc-card .pic svg{width:48px;height:48px;stroke:var(--navy);}
.svc-card h4{font-family:'Poppins',sans-serif;font-weight:700;font-size:.96rem;color:var(--navy);margin:0 0 4px;}
.svc-card .tagline{font-size:.78rem;color:var(--ink-faint);margin-bottom:10px;min-height:32px;}
.svc-card .price-tag{display:inline-block;background:var(--gold-light);color:var(--gold-deep);font-size:.78rem;font-weight:700;padding:4px 12px;border-radius:20px;}
.svc-card .view-link{display:block;margin-top:10px;font-size:.78rem;color:var(--navy);font-weight:600;}
.svc-card .view-link:after{content:" →";}

.modal-overlay{position:fixed;inset:0;background:rgba(7,23,48,.6);display:none;align-items:center;justify-content:center;z-index:50;padding:20px;}
.modal-overlay.open{display:flex;}
.modal-box{background:#fff;border-radius:18px;max-width:640px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 40px 80px rgba(0,0,0,.35);}
.modal-close{position:absolute;top:14px;right:16px;background:rgba(255,255,255,.18);border:none;width:32px;height:32px;border-radius:50%;font-size:1.1rem;cursor:pointer;color:#fff;line-height:1;}
.modal-close:hover{background:rgba(255,255,255,.3);}
.modal-hero{background:linear-gradient(120deg,var(--navy),#123a6b);padding:34px 32px 26px;border-radius:18px 18px 0 0;text-align:center;}
.modal-hero .pic{width:100%;max-width:340px;height:180px;border-radius:12px;margin:0 auto 14px;background:linear-gradient(135deg,var(--gold),var(--gold-deep));display:flex;align-items:center;justify-content:center;overflow:hidden;}
.modal-hero .pic img{width:100%;height:100%;object-fit:cover;}
.modal-gallery{display:flex;gap:8px;justify-content:center;margin-top:14px;}
.modal-gallery img{width:52px;height:52px;border-radius:8px;object-fit:cover;border:2px solid rgba(255,255,255,.5);}
.modal-hero .pic svg{width:56px;height:56px;stroke:#fff;}
.modal-hero h2{color:#fff;margin:0 0 6px;}
.modal-hero .price{color:var(--gold);font-weight:700;font-size:1.15rem;font-family:'Poppins',sans-serif;}
.modal-body{padding:26px 32px 30px;}
.modal-body p.desc{color:#444;line-height:1.6;font-size:.94rem;margin:0 0 22px;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px;}
.stat-chip{background:var(--gold-light);border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;}
.stat-chip .ic{font-size:1.2rem;}
.stat-chip .lbl{font-size:.68rem;color:var(--gold-deep);font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.stat-chip .val{font-size:.86rem;color:var(--navy);font-weight:600;}
.modal-actions{display:flex;gap:12px;}
.btn-book{background:var(--gold);color:#fff;}
.btn-book:hover{background:var(--gold-deep);}
.btn-wa{background:#25D366;color:#fff;}
.btn-wa:hover{background:#1ebc59;}

@media (max-width:900px){ .svc-grid{grid-template-columns:repeat(2,1fr);} .calc-wrap{grid-template-columns:1fr;} }

/* ===== Homepage: Sterilization & Infection Control orbit ===== */
.safety-orbit-section{
  background:radial-gradient(ellipse at top, #0f2a52 0%, var(--navy-deep) 70%);
  padding-top:64px; padding-bottom:64px;
}
.safety-orbit-section .section-eyebrow{ color:var(--gold); }
.safety-orbit-section .section-head h2{ color:#fff; }
.safety-orbit-section .section-head p{ color:#aab6ca; }

.orbit-wrap{ position:relative; width:320px; height:320px; margin:36px auto 0; }
.orbit-track{
  position:absolute; inset:36px; border-radius:50%;
  border:1px dashed rgba(201,151,58,.45);
}
.orbit-center{
  position:absolute; top:50%; left:50%; width:100px; height:100px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:var(--navy-deep); border:3px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 8px rgba(201,151,58,.08), 0 20px 40px -12px rgba(0,0,0,.6);
  z-index:3; overflow:hidden;
}
.orbit-center-photo{
  width:100%; height:100%; border-radius:50%; overflow:hidden;
  transition:opacity .18s ease, transform .18s ease;
}
.orbit-center-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.orbit-center-photo.fade{ opacity:0; transform:scale(.85); }

.orbit-spin{ position:absolute; inset:0; animation:orbit-rotate 32s linear infinite; }
.orbit-wrap.paused .orbit-spin,
.orbit-wrap.paused .orbit-node-inner{ animation-play-state:paused; }

.orbit-item{ position:absolute; top:50%; left:50%; width:0; height:0; }
.orbit-node{ position:absolute; top:0; left:0; width:64px; height:64px; transform:translate(-50%,-50%); }
.orbit-node-fix{
  width:100%; height:100%; border-radius:50%; overflow:hidden;
  border:3px solid var(--gold); cursor:pointer;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.5);
  transform:rotate(var(--fix-angle, 0deg));
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.orbit-node-fix:hover, .orbit-node-fix.active{
  transform:rotate(var(--fix-angle, 0deg)) scale(1.14);
  border-color:#fff;
  box-shadow:0 0 0 6px rgba(201,151,58,.35), 0 10px 24px -6px rgba(0,0,0,.6);
}
.orbit-node-inner{ width:100%; height:100%; animation:orbit-counter 32s linear infinite; }
.orbit-node-inner img{ width:100%; height:100%; object-fit:cover; display:block; }

@keyframes orbit-rotate{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
@keyframes orbit-counter{ from{ transform:rotate(0deg);} to{ transform:rotate(-360deg);} }

.orbit-caption{
  max-width:480px; margin:32px auto 0; text-align:center;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:22px 26px; min-height:104px;
}
.orbit-caption .cap-title{ color:#fff; font-family:'Playfair Display',serif; font-size:1.2rem; margin-bottom:8px; }
.orbit-caption .cap-desc{ color:#aab6ca; font-size:.92rem; line-height:1.55; }
.orbit-dots{ display:flex; justify-content:center; gap:8px; margin-top:18px; }
.orbit-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.25); transition:background .2s, transform .2s; }
.orbit-dot.active{ background:var(--gold); transform:scale(1.3); }

.safety-orbit-section .safety-note{ text-align:center; color:#aab6ca; font-size:.86rem; font-style:italic; max-width:680px; margin:30px auto 0; }

@media (min-width:640px){
  .orbit-wrap{ width:480px; height:480px; }
  .orbit-track{ inset:55px; }
  .orbit-center{ width:140px; height:140px; }
  .orbit-node{ width:82px; height:82px; }
}
@media (prefers-reduced-motion: reduce){
  .orbit-spin, .orbit-node-inner{ animation:none; }
}

/* ---- Doctor orbit portrait (homepage mini-cards + doctors page) ----
   Single continuous cutout photo (no internal seam/split) placed in front of
   a dashed ring: the head/hair rises above the ring naturally (following the
   photo's own transparent silhouette, not a clipped window), and the ring is
   simply hidden wherever the torso/arms are opaque in front of it. Matches
   the exact reference composition supplied for this component. */
.doc-portrait { position:relative; width:320px; height:320px; margin:0 auto; overflow:visible; }
.doc-layer { position:absolute; transition:transform .4s cubic-bezier(.22,1,.36,1); }
.doc-glow { inset:0; border-radius:50%; background:radial-gradient(circle, rgba(201,151,58,.20) 0%, rgba(201,151,58,0) 65%); }
.doc-ring-wrap { left:26.5px; top:16.5px; width:260px; height:260px; }
.doc-ring-spin { width:100%; height:100%; animation:docSpin 60s linear infinite; display:block; }
.doc-frame-wrap { inset:0; animation:docIdleBob 6s ease-in-out infinite; }
.doc-photo {
  position:absolute; inset:0; z-index:1;
  background-repeat:no-repeat;
  background-size: var(--pw) var(--ph); background-position: center var(--py);
  /* Soft grounding shadow that follows the cutout's own silhouette (not a
     rectangle) so the photo reads as resting in front of the ring rather
     than pasted flat on top of it. Two layers: a tight close shadow for
     contact, a wider soft one for ambient depth. */
  filter: drop-shadow(0 6px 10px rgba(11,32,66,.16)) drop-shadow(0 18px 24px rgba(11,32,66,.16));
}
.doc-badges { inset:0; pointer-events:none; }
.doc-badge {
  position:absolute; width:42px; height:42px; border-radius:11px; background:#fff;
  box-shadow:0 10px 20px rgba(11,32,66,.18); display:flex; align-items:center; justify-content:center;
  animation:docFloatBadge 4.5s ease-in-out infinite; z-index:2;
}
.doc-badge-ic { width:21px; height:21px; }
.doc-badge-ic svg { width:100%; height:100%; }
.doc-b-top-right { left:252px; top:-10px; }
.doc-b-left { left:-8px; top:118px; }
.doc-b-bottom-right { left:284px; top:222px; }

@keyframes docSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes docIdleBob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@keyframes docFloatBadge { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }

/* Safety valve: the ring/frame/badge animations pause while the page is actively
   scrolling (toggled by the script in site_footer.php). Keeping several elements
   continuously animating during a scroll previously overloaded the compositor and
   made the sticky header glitch — pausing during scroll (and resuming a moment
   after it settles) keeps the "living" idle look without that risk. */
body.doc-scrolling .doc-ring-spin,
body.doc-scrolling .doc-frame-wrap,
body.doc-scrolling .doc-badge {
  animation-play-state: paused;
}

@media (max-width:480px) {
  .doc-portrait { width:280px; height:280px; }
  .doc-ring-wrap { left:23.2px; top:14.4px; width:227.5px; height:227.5px; }
  .doc-photo {
    background-size: calc(var(--pw) * .875) calc(var(--ph) * .875);
    background-position: center calc(var(--py) * .875);
    filter: drop-shadow(0 5px 9px rgba(11,32,66,.16)) drop-shadow(0 16px 21px rgba(11,32,66,.16));
  }
  .doc-badge { width:36.75px; height:36.75px; border-radius:10px; }
  .doc-badge-ic { width:18px; height:18px; }
  .doc-b-top-right { left:220.5px; top:-8.75px; }
  .doc-b-left { left:-7px; top:103.25px; }
  .doc-b-bottom-right { left:248.5px; top:194.25px; }
}

@media (prefers-reduced-motion: reduce) {
  .doc-ring-spin, .doc-frame-wrap, .doc-badge { animation:none !important; }
  .doc-layer { transition:none !important; }
}

/* ---------- Blog ---------- */
.blog-grid-pub{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:26px; }
.blog-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; color:inherit; transition:transform .2s, box-shadow .2s; }
.blog-card:hover{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(11,32,66,.14); border-color:var(--gold); }
.blog-card-img{ height:170px; background:linear-gradient(135deg,var(--navy),#1f4f8f) center/cover no-repeat; display:flex; align-items:center; justify-content:center; font-size:3rem; }
.blog-card-body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:6px; flex:1; }
.blog-card-date{ font-size:.78rem; color:var(--ink-faint); }
.blog-card h3{ font-size:1.15rem; line-height:1.35; margin:0; }
.blog-card p{ color:var(--ink-faint); font-size:.92rem; margin:0; }
.blog-card-more{ margin-top:auto; padding-top:8px; color:var(--blue); font-weight:600; font-size:.9rem; }
.blog-article{ padding:44px 0 56px; }
.blog-article .container{ max-width:760px; }
.blog-back{ display:inline-block; margin-bottom:18px; font-size:.9rem; }
.blog-article h1{ font-size:2.1rem; line-height:1.25; margin-bottom:10px; }
.blog-meta{ color:var(--ink-faint); font-size:.88rem; margin-bottom:22px; }
.blog-cover{ width:100%; border-radius:14px; margin-bottom:26px; }
.blog-body{ font-size:1.05rem; line-height:1.8; }
.blog-body h2{ font-size:1.5rem; margin:1.6em 0 .5em; }
.blog-body h3{ font-size:1.2rem; margin:1.4em 0 .4em; }
.blog-body ul, .blog-body ol{ padding-left:1.3em; margin:0 0 1.1em; }
.blog-body li{ margin-bottom:.4em; }
.blog-body a{ text-decoration:underline; }
.blog-body table{ width:100%; border-collapse:collapse; margin:1.2em 0; font-size:.95rem; display:block; overflow-x:auto; }
.blog-body th, .blog-body td{ border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top; }
.blog-body th{ background:var(--gold-light); color:var(--navy); }
.blog-disclaimer{ margin-top:34px; padding-top:16px; border-top:1px solid var(--line); color:var(--ink-faint); font-size:.85rem; }
@media (max-width:640px){ .blog-article h1{ font-size:1.65rem; } }