/* ===================================================================
   SHEILA UROLOGY & LAPAROSCOPY CENTRE — Stylesheet
   Design tokens drawn from the client brief:
   Primary #0B5ED7 | Secondary #0DCAF0 | Success #20C997
   Background #F8FBFF | Text #1E293B | Font: Poppins
   Signature motif: line-art kidney / urinary tract, echoed from
   the practice's own logo, used as a recurring graphic thread
   (navbar mark, section dividers, stat icons, hero backdrop).
=================================================================== */

:root{
  --primary:#0B5ED7;
  --primary-dark:#084298;
  --secondary:#0DCAF0;
  --success:#20C997;
  --bg:#F8FBFF;
  --text:#1E293B;
  --text-soft:#5B6B82;
  --white:#FFFFFF;
  --grad-main: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  --grad-deep: linear-gradient(160deg, #06306e 0%, var(--primary) 55%, var(--secondary) 100%);
  --shadow-soft: 0 10px 30px -10px rgba(11,94,215,0.18);
  --shadow-card: 0 4px 24px rgba(15,42,86,0.08);
  --shadow-lift: 0 20px 45px -12px rgba(11,94,215,0.28);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --glass-bg: rgba(255,255,255,0.65);
  --glass-border: rgba(255,255,255,0.5);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--secondary); color:#fff; }

h1,h2,h3,h4,h5{ font-family:'Poppins',sans-serif; letter-spacing:-0.02em; }

.container-px{ padding-left:1.25rem; padding-right:1.25rem; }
@media (min-width:768px){ .container-px{ padding-left:2.5rem; padding-right:2.5rem; } }
@media (min-width:1280px){ .container-px{ padding-left:5rem; padding-right:5rem; } }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* Visible keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--secondary);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------------- Eyebrow / label ---------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--primary);
  background:rgba(11,94,215,0.08);
  padding:.45rem 1rem; border-radius:999px;
}
.eyebrow::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--grad-main); flex-shrink:0;
}
.eyebrow.on-dark{ color:#fff; background:rgba(255,255,255,0.15); }
.eyebrow.on-dark::before{ background:var(--secondary); }

/* ---------------- Loading screen ---------------- */
#loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--grad-deep);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
#loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{ width:86px; height:86px; }
.loader-mark svg{ width:100%; height:100%; }
.loader-ring{
  fill:none; stroke:rgba(255,255,255,0.25); stroke-width:3;
}
.loader-ring-progress{
  fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round;
  stroke-dasharray:251; stroke-dashoffset:251;
  animation: loaderspin 1.4s ease-in-out infinite;
  transform-origin:center;
}
@keyframes loaderspin{
  0%{ stroke-dashoffset:251; transform:rotate(0deg);}
  50%{ stroke-dashoffset:60; transform:rotate(180deg);}
  100%{ stroke-dashoffset:251; transform:rotate(360deg);}
}
.loader-text{ color:#fff; font-size:.8rem; letter-spacing:.25em; text-transform:uppercase; margin-top:1.25rem; opacity:.85; text-align:center; }

/* ---------------- Scroll progress bar ---------------- */
#scrollProgress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--grad-main); z-index:9998; transition:width .08s linear;
}

/* ---------------- Top bar ---------------- */
.topbar{
  background:var(--grad-deep);
  color:#fff; font-size:.82rem;
}
.topbar a{ color:#fff; opacity:.9; transition:opacity .2s; }
.topbar a:hover{ opacity:1; }

/* ---------------- Navbar ---------------- */
#navbar{
  position:sticky; top:0; z-index:1000;
  background:var(--glass-bg);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--glass-border);
  transition:padding .35s ease, box-shadow .35s ease;
}
#navbar.shrink{ box-shadow:0 8px 30px rgba(15,42,86,0.08); }
.navbar-inner{ display:flex; align-items:center; justify-content:space-between; transition:padding .35s ease; padding-top:1.1rem; padding-bottom:1.1rem; }
#navbar.shrink .navbar-inner{ padding-top:.6rem; padding-bottom:.6rem; }
.nav-logo-img{ height:52px; width:52px; transition:height .35s ease, width .35s ease; border-radius:50%; }
#navbar.shrink .nav-logo-img{ height:40px; width:40px; }

.nav-link{
  position:relative; font-weight:500; font-size:.93rem; color:var(--text);
  padding:.4rem .1rem;
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0%;
  background:var(--grad-main); transition:width .3s ease;
}
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.nav-link:hover{ color:var(--primary); }

.btn-grad{
  background:var(--grad-main); color:#fff; font-weight:600;
  padding:.75rem 1.6rem; border-radius:999px; display:inline-flex; align-items:center; gap:.5rem;
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease, box-shadow .25s ease;
  position:relative; overflow:hidden; isolation:isolate;
}
.btn-grad:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }

.btn-outline{
  border:1.5px solid var(--primary); color:var(--primary); font-weight:600;
  padding:.7rem 1.5rem; border-radius:999px; display:inline-flex; align-items:center; gap:.5rem;
  transition:all .25s ease; background:transparent;
}
.btn-outline:hover{ background:var(--primary); color:#fff; transform:translateY(-3px); }

/* Ripple effect for buttons */
.ripple-btn{ position:relative; overflow:hidden; }
.ripple{
  position:absolute; border-radius:50%; background:rgba(255,255,255,0.55);
  transform:scale(0); animation:rippleAnim .6s ease-out;
  pointer-events:none;
}
@keyframes rippleAnim{ to{ transform:scale(3.2); opacity:0; } }

/* ---------------- Mobile menu ---------------- */
#mobileMenu{
  max-height:0; overflow:hidden; transition:max-height .4s ease;
}
#mobileMenu.open{ max-height:560px; }

/* ---------------- Hero ---------------- */
.hero{
  position:relative; background:var(--grad-deep); overflow:hidden;
  padding-top:4.5rem; padding-bottom:5rem;
}
.hero-bg-shape{ position:absolute; border-radius:50%; filter:blur(0px); opacity:.5; }
.hero-orbit{
  position:absolute; border:1.5px dashed rgba(255,255,255,0.18); border-radius:50%;
  animation:spin-slow 40s linear infinite;
}
@keyframes spin-slow{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
.float-y{ animation:floatY 5s ease-in-out infinite; }
.float-y-delay{ animation:floatY 5s ease-in-out infinite; animation-delay:1.2s; }
@keyframes floatY{ 0%,100%{ transform:translateY(0px);} 50%{ transform:translateY(-16px);} }

.glass-card{
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.25);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-radius:var(--radius-md);
}
.glass-card-light{
  background:rgba(255,255,255,0.85);
  border:1px solid rgba(255,255,255,0.6);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
}

.hero-feature{ display:flex; align-items:center; gap:.65rem; color:rgba(255,255,255,0.92); font-size:.95rem; }
.hero-feature svg{ flex-shrink:0; color:var(--secondary); }

.doctor-frame{
  position:relative; border-radius:32px; overflow:hidden;
  box-shadow:0 30px 60px -15px rgba(0,0,0,0.45);
}

.typed-cursor{ display:inline-block; width:3px; background:var(--secondary); margin-left:4px; animation:blink 0.9s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* ---------------- Section heading ---------------- */
.section-head{ max-width:680px; }
.section-head h2{ font-size:clamp(1.8rem,3.2vw,2.6rem); font-weight:700; line-height:1.15; }

/* ---------------- Stats ---------------- */
.stat-card{
  background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-card);
  padding:2rem 1.25rem; text-align:center; transition:transform .3s ease, box-shadow .3s ease;
  border:1px solid rgba(11,94,215,0.06);
}
.stat-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lift); }
.stat-num{ font-size:clamp(1.9rem,4vw,2.6rem); font-weight:800; color:var(--primary); }

/* ---------------- Services ---------------- */
.service-card{
  background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-card);
  overflow:hidden; transition:transform .35s ease, box-shadow .35s ease; display:flex; flex-direction:column;
  border:1px solid rgba(15,42,86,0.05);
}
.service-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-lift); }
.service-img-wrap{ position:relative; height:170px; overflow:hidden; }
.service-img-wrap img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.service-card:hover .service-img-wrap img{ transform:scale(1.08); }
.service-icon-badge{
  position:absolute; bottom:-26px; left:1.4rem; width:54px; height:54px; border-radius:16px;
  background:var(--grad-main); display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 10px 24px -6px rgba(11,94,215,0.45);
}
.service-readmore{
  color:var(--primary); font-weight:600; font-size:.88rem; display:inline-flex; align-items:center; gap:.4rem;
}
.service-readmore svg{ transition:transform .25s ease; }
.service-card:hover .service-readmore svg{ transform:translateX(4px); }

#serviceSearch{
  width:100%; border:1.5px solid rgba(11,94,215,0.15); border-radius:999px;
  padding:.85rem 1.4rem .85rem 2.8rem; font-size:.95rem; background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
#serviceSearch:focus{ border-color:var(--primary); box-shadow:0 0 0 4px rgba(11,94,215,0.1); outline:none; }

.filter-chip{
  font-size:.82rem; font-weight:600; padding:.5rem 1.1rem; border-radius:999px;
  border:1.5px solid rgba(11,94,215,0.15); color:var(--text-soft); transition:all .25s ease; background:#fff;
  white-space:nowrap;
}
.filter-chip.active, .filter-chip:hover{ background:var(--grad-main); color:#fff; border-color:transparent; }

/* ---------------- About Doctor ---------------- */
.timeline-item{ position:relative; padding-left:2.2rem; }
.timeline-item::before{
  content:''; position:absolute; left:0; top:.3rem; width:14px; height:14px; border-radius:50%;
  background:var(--grad-main); box-shadow:0 0 0 4px rgba(11,94,215,0.12);
}
.timeline-item::after{
  content:''; position:absolute; left:6px; top:1.3rem; width:2px; height:calc(100% + .5rem);
  background:rgba(11,94,215,0.18);
}
.timeline-item:last-child::after{ display:none; }

.cert-card{
  background:#fff; border-radius:var(--radius-sm); padding:1.1rem 1.3rem; box-shadow:var(--shadow-card);
  display:flex; align-items:center; gap:.9rem; transition:transform .25s ease;
}
.cert-card:hover{ transform:translateY(-4px); }

/* ---------------- Why choose us ---------------- */
.why-card{
  background:#fff; border-radius:var(--radius-md); padding:2rem 1.5rem; text-align:center;
  box-shadow:var(--shadow-card); transition:transform .3s ease, box-shadow .3s ease;
  border-top:3px solid transparent;
}
.why-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lift); border-top-color:var(--secondary); }
.why-icon{
  width:64px; height:64px; border-radius:18px; margin:0 auto 1.1rem; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(11,94,215,0.1), rgba(13,202,240,0.12)); color:var(--primary);
}

/* ---------------- Process timeline ---------------- */
.process-line{
  position:absolute; top:34px; left:0; right:0; height:2px;
  background:repeating-linear-gradient(90deg, rgba(11,94,215,0.25) 0 10px, transparent 10px 18px);
}
.process-dot{
  width:68px; height:68px; border-radius:50%; background:var(--grad-main); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.2rem;
  box-shadow:0 10px 26px -8px rgba(11,94,215,0.5); position:relative; z-index:2; margin:0 auto;
}

/* ---------------- Before / After slider ---------------- */
.ba-slider{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); user-select:none; }
.ba-slider img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.ba-after{ clip-path:inset(0 0 0 50%); }
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%; width:4px; background:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,0.4); cursor:ew-resize; transform:translateX(-50%);
}
.ba-handle-grip{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background:#fff; box-shadow:var(--shadow-card);
  display:flex; align-items:center; justify-content:center; color:var(--primary);
}
.ba-label{ position:absolute; top:1rem; padding:.3rem .9rem; border-radius:999px; font-size:.75rem; font-weight:700; letter-spacing:.05em; color:#fff; }
.ba-label.before{ left:1rem; background:rgba(30,41,59,0.65); }
.ba-label.after{ right:1rem; background:var(--success); }

/* ---------------- Gallery ---------------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; grid-auto-flow:dense; }
@media(min-width:768px){ .gallery-grid{ grid-template-columns:repeat(4,1fr); } }
.gallery-item{ position:relative; border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; aspect-ratio:1/1; }
.gallery-item.tall img{ aspect-ratio:1/1.4; }
@media(min-width:768px){ .gallery-item.tall{ grid-row:span 2; } }
.gallery-overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(8,30,70,0.78));
  display:flex; align-items:flex-end; padding:.9rem; opacity:0; transition:opacity .3s ease;
}
.gallery-item:hover .gallery-overlay{ opacity:1; }
.gallery-item:hover img{ transform:scale(1.08); }

#lightbox{ position:fixed; inset:0; background:rgba(8,15,30,0.92); z-index:2000; display:none; align-items:center; justify-content:center; padding:1.5rem; }
#lightbox.open{ display:flex; }
#lightbox img{ max-width:min(900px,92vw); max-height:85vh; border-radius:14px; box-shadow:0 30px 60px rgba(0,0,0,0.5); }

/* ---------------- Testimonials ---------------- */
.testi-card{
  background:#fff; border-radius:var(--radius-md); padding:1.8rem; box-shadow:var(--shadow-card);
  min-width:300px; max-width:340px; flex-shrink:0;
}
.testi-track{ display:flex; gap:1.5rem; animation:scrollLeft 32s linear infinite; }
.testi-track:hover{ animation-play-state:paused; }
@keyframes scrollLeft{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.testi-stars{ color:#FFB400; letter-spacing:2px; }
.testi-avatar{
  width:46px; height:46px; border-radius:50%; background:var(--grad-main); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
}

/* ---------------- FAQ ---------------- */
.faq-item{ background:#fff; border-radius:var(--radius-sm); box-shadow:var(--shadow-card); overflow:hidden; }
.faq-q{
  width:100%; text-align:left; padding:1.25rem 1.4rem; display:flex; align-items:center; justify-content:space-between;
  font-weight:600; gap:1rem; background:none; border:none; cursor:pointer; color:var(--text);
}
.faq-q .chev{ transition:transform .3s ease; flex-shrink:0; color:var(--primary); }
.faq-item.open .chev{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a-inner{ padding:0 1.4rem 1.25rem; color:var(--text-soft); font-size:.92rem; line-height:1.65; }
.faq-item.hidden-by-search{ display:none; }

/* ---------------- Appointment form ---------------- */
.appointment-wrap{ background:var(--grad-deep); position:relative; overflow:hidden; }
.form-glass{
  background:rgba(255,255,255,0.92); backdrop-filter:blur(16px);
  border-radius:var(--radius-lg); box-shadow:0 30px 70px -20px rgba(0,0,0,0.4); padding:2.2rem;
}
.field-label{ font-size:.82rem; font-weight:600; color:var(--text-soft); margin-bottom:.4rem; display:block; }
.field-input, .field-select, .field-textarea{
  width:100%; border:1.5px solid #DEE7F5; border-radius:var(--radius-sm); padding:.8rem 1rem; font-size:.94rem;
  transition:border-color .2s ease, box-shadow .2s ease; background:#fff; color:var(--text); font-family:'Poppins',sans-serif;
}
.field-input:focus, .field-select:focus, .field-textarea:focus{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(11,94,215,0.12);
}
.field-error{ color:#DC2626; font-size:.78rem; margin-top:.3rem; display:none; }
.field-input.invalid, .field-select.invalid, .field-textarea.invalid{ border-color:#DC2626; }
.field-input.invalid + .field-error, .field-select.invalid ~ .field-error, .field-textarea.invalid + .field-error{ display:block; }

/* ---------------- Contact ---------------- */
.contact-card{ background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:1.6rem; display:flex; gap:1rem; align-items:flex-start; }
.contact-icon{ width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg, rgba(11,94,215,0.12), rgba(13,202,240,0.14)); color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ---------------- Footer ---------------- */
footer{ background:#06112B; color:rgba(255,255,255,0.75); }
.footer-link{ transition:color .2s ease, padding-left .2s ease; display:inline-block; }
.footer-link:hover{ color:var(--secondary); padding-left:4px; }
.social-icon{
  width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center;
  transition:all .25s ease; color:#fff;
}
.social-icon:hover{ background:var(--grad-main); transform:translateY(-4px); }

/* ---------------- Floating action buttons ---------------- */
.fab-stack{ position:fixed; right:1.25rem; bottom:1.25rem; z-index:900; display:flex; flex-direction:column; gap:.8rem; align-items:flex-end; }
.fab{
  width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px -8px rgba(0,0,0,0.35); color:#fff; transition:transform .25s ease;
}
.fab:hover{ transform:scale(1.1); }
.fab.whatsapp{ background:#25D366; }
.fab.call{ background:var(--grad-main); }
.fab.top{ background:#fff; color:var(--primary); box-shadow:var(--shadow-card); opacity:0; pointer-events:none; transform:translateY(10px); }
.fab.top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.pulse-ring{ position:absolute; inset:0; border-radius:50%; background:inherit; opacity:.55; animation:pulseRing 2s ease-out infinite; z-index:-1; }
@keyframes pulseRing{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(1.7); opacity:0; } }

.sticky-appt{
  position:fixed; left:0; right:0; bottom:0; z-index:899; background:var(--grad-main); color:#fff;
  display:flex; align-items:center; justify-content:center; gap:.6rem; padding:.85rem; font-weight:600; font-size:.92rem;
  box-shadow:0 -8px 24px rgba(0,0,0,0.12); transform:translateY(100%); transition:transform .4s ease;
}
.sticky-appt.show{ transform:translateY(0); }
@media(min-width:768px){ .sticky-appt{ display:none; } }

/* ---------------- Dark mode ---------------- */
html.dark body{ background:#0A1530; color:#E2E8F5; }
html.dark .bg-white, html.dark .stat-card, html.dark .service-card, html.dark .why-card, html.dark .faq-item, html.dark .contact-card, html.dark .cert-card, html.dark .testi-card{
  background:#101D3D !important; color:#E2E8F5;
}
html.dark .text-slate-900, html.dark .text-\[\#1E293B\]{ color:#E2E8F5 !important; }
html.dark #navbar{ background:rgba(10,21,48,0.75); border-color:rgba(255,255,255,0.08); }
html.dark .nav-link{ color:#E2E8F5; }
html.dark #serviceSearch, html.dark .field-input, html.dark .field-select, html.dark .field-textarea{ background:#101D3D; border-color:rgba(255,255,255,0.12); color:#E2E8F5; }
html.dark .form-glass{ background:rgba(16,29,61,0.92); }
html.dark .filter-chip{ background:#101D3D; }
html.dark section[class*="bg-\\[#F8FBFF\\]"], html.dark .bg-\[\#F8FBFF\]{ background:#0A1530 !important; }

/* ---------------- AOS-like reveal (custom, lightweight) ---------------- */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
[data-reveal].revealed{ opacity:1; transform:translateY(0); }
[data-reveal="zoom"]{ transform:scale(.9) translateY(0); }
[data-reveal="zoom"].revealed{ transform:scale(1) translateY(0); }
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="left"].revealed{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="right"].revealed{ transform:translateX(0); }

/* Custom scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#EAF2FF; }
::-webkit-scrollbar-thumb{ background:var(--grad-main); border-radius:6px; }


/* ===== Sponsored Ad Banners (services / appointment / footer) ===== */
.ad-banner-wrap { max-width: 1100px; margin: 2.5rem auto; padding: 0 1rem; }
.ad-banner-media { position: relative; display: block; border-radius: 1.25rem; overflow: hidden; box-shadow: 0 10px 35px rgba(11,94,215,0.12); }
.ad-banner-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-tag {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(15,23,42,0.6); color: #fff; font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px;
  backdrop-filter: blur(3px);
}

/* Banner size variants */
.ad-size-compact .ad-banner-media img { aspect-ratio: 21 / 5; }
.ad-size-medium  .ad-banner-media img { aspect-ratio: 16 / 6; }
.ad-size-full    .ad-banner-media img { aspect-ratio: 21 / 9; }

/* ===== Popup Ad ===== */
#adPopupOverlay {
  display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.72);
  backdrop-filter: blur(5px); align-items: center; justify-content: center;
  z-index: 9999; padding: 1.25rem;
}
#adPopupOverlay.is-open { display: flex; }

.ad-popup-card {
  position: relative; border-radius: 1.5rem; overflow: hidden; background: #fff;
  box-shadow: 0 30px 70px rgba(0,0,0,0.4); animation: adPopIn .25s ease-out;
}
.ad-popup-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ad-popup-close {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px;
  border-radius: 999px; background: rgba(15,23,42,0.6); color: #fff;
  display: flex; align-items: center; justify-content: center; z-index: 2;
  border: none; cursor: pointer; transition: transform .2s ease;
}
.ad-popup-close:hover { transform: scale(1.1); background: rgba(15,23,42,0.85); }

.ad-popup-tag {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: rgba(15,23,42,0.6); color: #fff; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px;
  z-index: 2; backdrop-filter: blur(3px);
}

/* Popup size variants */
#adPopupOverlay.ad-size-compact .ad-popup-card { width: min(420px, 90vw); max-height: 70vh; }
#adPopupOverlay.ad-size-medium  .ad-popup-card { width: min(600px, 92vw); max-height: 82vh; }
#adPopupOverlay.ad-size-full    .ad-popup-card { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; }

@keyframes adPopIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ===== News Ticker Box ===== */
.news-ticker-box {
  width: 900px;
  max-width: 92%;
  margin: 2.5rem auto;
  background: #fff;
  border: 1px solid rgba(11,94,215,0.12);
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(11,94,215,0.08);
  overflow: hidden;
}
.news-ticker-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #0B5ED7, #11315f);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}
.news-ticker-viewport {
  height: 160px;
  overflow: hidden;
  position: relative;
  padding: 10px 18px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
          mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}
.news-ticker-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation-name: newsScrollUp;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.news-ticker-item {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #1E293B;
  padding: 8px 12px;
  background: #F8FBFF;
  border-left: 3px solid #0DCAF0;
  border-radius: 0.5rem;
  word-break: break-word;
}
@keyframes newsScrollUp {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.news-ticker-box:hover .news-ticker-track {
  animation-play-state: paused;
}