:root {
  --bg: #f4f8ff;
  --bg-2: #eef5ff;
  --ink: #122035;
  --ink-soft: #4f6482;
  --line: rgba(104, 138, 181, 0.24);
  --accent: #4cc9a7;
  --accent-2: #5b8dff;
  --panel: rgba(255, 255, 255, 0.78);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1000px 520px at 12% -12%, #d8ecff 0%, transparent 56%),
    radial-gradient(920px 520px at 92% 8%, #d6f7ed 0%, transparent 58%),
    linear-gradient(180deg, #f8fbff 0%, #eff5ff 100%);
  overflow-x: hidden;
}

.bg-lights { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.light {
  position: absolute;
  border-radius: 50%;
  filter: blur(26px);
  opacity: .25;
  animation: floaty 12s ease-in-out infinite;
}
.l1 { width: 330px; height: 330px; left: -90px; top: 20vh; background: #53ffd1; }
.l2 { width: 420px; height: 420px; right: -120px; top: 12vh; background: #62a5ff; animation-delay: -4s; }
.l3 { width: 260px; height: 260px; right: 20vw; bottom: -80px; background: #88fff0; animation-delay: -8s; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px clamp(14px, 3.5vw, 48px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  background: rgba(248, 251, 255, .84);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #13253d;
  font-weight: 800;
}
.brand-mark {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 14px rgba(91,141,255,.35);
}
.brand-name { letter-spacing: .02em; }

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.site-nav-link {
  color: #405878;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
}

.site-nav-link:hover,
.site-nav-link.active {
  color: #2458bd;
}

.header-cta {
  text-decoration: none;
  color: #081628;
  background: linear-gradient(140deg, #88ffe6, #7db7ff);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .05em;
  transition: transform .2s ease;
}
.header-cta:hover { transform: translateY(-1px); }

.hero {
  position: relative;
  z-index: 1;
  --hero-shift: 0px;
  padding: clamp(18px, 2vw, 30px) clamp(14px, 3.5vw, 48px) 26px;
}

.hero-content {
  width: 100%;
  animation: hero-in .75s cubic-bezier(.2,.8,.2,1) both;
}

.hero-kicker {
  margin: 0 0 10px;
  font-size: .75rem;
  color: #6581aa;
  letter-spacing: .12em;
  font-weight: 700;
}

.hero h1 {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2rem, 6vw, 4.3rem);
  line-height: .95;
  letter-spacing: -.02em;
  max-width: 13ch;
}

.gradient-text {
  display: inline-block;
  background: linear-gradient(90deg, #2fbf9a, #4e7df0, #2fbf9a);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shift 5s linear infinite;
}

.hero-lead {
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  max-width: 52ch;
}

.glass {
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(31, 68, 115, .12);
}

.hero-search {
  width: min(100%, 920px);
  margin: 20px auto 0;
  border-radius: 18px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1.3fr .78fr auto auto;
  gap: 9px;
  align-items: center;
}
.hero-search input[type="text"] {
  width: 100%;
  border: 1px solid rgba(122, 154, 196, .34);
  border-radius: 12px;
  padding: 13px 12px;
  background: rgba(255, 255, 255, .9);
  color: #13253d;
  font-family: inherit;
}
.hero-search input[type="text"]::placeholder { color: #7a92b6; }

.search-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #4f6482;
  font-size: .88rem;
}

#searchBtn {
  border: 0;
  border-radius: 12px;
  padding: 13px 18px;
  color: #ffffff;
  background: linear-gradient(130deg, var(--accent), var(--accent-2));
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
#searchBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(91,141,255,.36);
}

main {
  position: relative;
  z-index: 1;
  padding: 20px clamp(14px, 3.5vw, 48px) 64px;
}

.directory,
.closing-cta,
.blog-preview {
  width: min(100%, 1320px);
  margin-inline: auto;
}

.directory-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 10px;
}
.directory-head h2 {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
}
.directory-head p { margin: 0; color: #5f779b; font-size: .9rem; }

.directory-layout {
  display: grid;
  grid-template-columns: minmax(300px, 410px) 1fr;
  gap: 10px;
}
.results-list {
  border-radius: 16px;
  padding: 8px;
  max-height: 72vh;
  overflow-y: auto;
}
.result-card {
  padding: 12px 8px;
  border-bottom: 1px solid rgba(122,154,196,.18);
  cursor: pointer;
  transform: translateY(8px);
  opacity: 0;
  animation: item-in .45s ease forwards;
}
.result-card:hover {
  background: rgba(91, 141, 255, .09);
  border-radius: 10px;
}
.result-card h3 { margin: 0; font-size: .99rem; color: #162942; }
.result-meta { margin: 4px 0 0; color: #60799f; font-size: .88rem; }
.result-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.badges { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.badge {
  border-radius: 999px;
  padding: 3px 8px;
  font-size: .72rem;
  font-weight: 700;
  background: rgba(76, 201, 167, .14);
  color: #1a7d65;
}
.badge.verified {
  background: rgba(91, 141, 255, .14);
  color: #345ab6;
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  line-height: 1;
}
.badge.muted { background: rgba(120, 138, 167, .14); color: #5f7596; }

.book-open-btn {
  margin-top: 10px;
  border: 1px solid #8ec5ba;
  background: #ecfffa;
  color: #0f5f4d;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.book-open-btn:hover {
  border-color: #66b2a2;
  background: #ddfff6;
}

.report-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.popup-card {
  position: relative;
  min-width: 180px;
  padding-left: 26px;
}

.popup-main {
  margin-top: 2px;
}

.popup-report-wrapper {
  position: absolute;
  top: 0;
  left: 0;
}

.report-trigger {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid #93a8c9;
  background: #ffffff;
  color: #4b6288;
  font-weight: 800;
  font-size: 10px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.report-action {
  display: none;
  position: absolute;
  top: 20px;
  left: 0;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1e3a8a;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  cursor: pointer;
  white-space: nowrap;
  z-index: 10;
}

.report-wrapper.open .report-action {
  display: inline-flex;
}

.report-action:hover,
.report-trigger:hover {
  border-color: #7c9fd9;
  background: #eef4ff;
}

.map-shell {
  border-radius: 16px;
  overflow: hidden;
  min-height: 620px;
}
#homeopathMap {
  width: 100%;
  height: 100%;
  min-height: 620px;
}

.empty-list { padding: 20px 10px; color: #60799f; font-size: .93rem; }

.closing-cta {
  margin-top: 24px;
  border-top: 1px solid rgba(104,138,181,.24);
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.closing-cta p { margin: 0; color: #557096; }
.closing-cta a { color: #3058b9; text-decoration: none; font-weight: 700; }

.blog-preview {
  margin-top: 54px;
  padding-top: 34px;
  border-top: 1px solid rgba(104,138,181,.24);
}

.blog-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 18px;
}

.blog-preview-head h2 {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.blog-preview-head a,
.blog-preview-card a {
  color: #315ebd;
  font-weight: 800;
  text-decoration: none;
}

.blog-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.blog-preview-card {
  display: flex;
  min-height: 220px;
  flex-direction: column;
  padding: 20px;
  border: 1px solid rgba(104, 138, 181, .24);
  border-radius: 16px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 12px 30px rgba(31, 68, 115, .08);
}

.blog-preview-card h3 {
  margin: 0;
  color: #162942;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.08rem;
  line-height: 1.4;
}

.blog-preview-card p {
  margin: 12px 0 18px;
  color: #60799f;
  line-height: 1.6;
}

.blog-preview-card a {
  margin-top: auto;
}

.blog-preview-empty {
  color: #60799f;
}

.landing-footer {
  margin-top: 40px;
  border-top: 1px solid rgba(104, 138, 181, 0.24);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
}

.landing-footer-content {
  padding: 26px clamp(14px, 3.5vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}

.landing-footer-section h4 {
  margin: 0 0 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #1b2f4b;
}

.landing-footer-section p {
  margin: 0;
  color: #5c7497;
}

.landing-footer-section a {
  display: block;
  color: #3b5db3;
  text-decoration: none;
  margin-bottom: 6px;
}

.landing-footer-section a:hover {
  text-decoration: underline;
}

.popular-city-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}

.landing-footer-bottom {
  border-top: 1px solid rgba(104, 138, 181, 0.2);
  padding: 12px clamp(14px, 3.5vw, 48px) 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.landing-footer-bottom p {
  margin: 0;
  color: #6a82a5;
  font-size: .9rem;
}

.adgenius-credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4969b4;
  text-decoration: none;
  font-weight: 700;
  font-size: .9rem;
}

.adgenius-credit img {
  width: 94px;
  height: auto;
  border-radius: 0;
  object-fit: contain;
  display: block;
}

.adgenius-credit:hover {
  text-decoration: underline;
}

.report-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
}

.report-modal.open {
  display: block;
}

.report-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
}

.report-modal-content {
  position: relative;
  width: min(520px, calc(100vw - 24px));
  max-width: 520px;
  max-height: calc(100dvh - 24px);
  margin: 12px auto;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #d7e3f7;
  padding: 18px;
  box-shadow: 0 24px 70px rgba(18, 32, 53, 0.25);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.report-modal-close {
  position: absolute;
  right: 12px;
  top: 10px;
  border: none;
  background: transparent;
  font-size: 24px;
  color: #6b7f9f;
  cursor: pointer;
}

.report-modal-content h3 {
  margin: 0 0 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.report-modal-context {
  margin: 0 0 12px;
  color: #5a7298;
  font-size: .9rem;
}

.report-field {
  margin-bottom: 10px;
}

.report-field label {
  display: block;
  font-size: .86rem;
  color: #2b4368;
  margin-bottom: 5px;
  font-weight: 600;
}

.report-field input,
.report-field textarea {
  width: 100%;
  border: 1px solid #c7d6ee;
  border-radius: 10px;
  font: inherit;
  padding: 10px 11px;
  color: #122035;
}

#reportSubmitBtn {
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  color: #ffffff;
  background: linear-gradient(130deg, #3f73f6, #2fbf9a);
  font-weight: 700;
  cursor: pointer;
}

.report-modal-status {
  min-height: 18px;
  margin: 8px 0 0;
  font-size: .86rem;
  color: #1f6a4d;
}

.report-modal-status.success {
  color: #1f6a4d;
}

.report-modal-status.warning {
  color: #9a6700;
}

.report-modal-status.error {
  color: #b42318;
}

.booking-modal-content {
  width: min(980px, calc(100vw - 24px));
  max-width: 980px;
  max-height: calc(100dvh - 24px);
  margin: 12px auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

.booking-modal-content #bookingForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payment-return-modal-content {
  width: min(560px, calc(100vw - 24px));
  max-width: 560px;
}

.payment-return-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.payment-return-btn {
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.payment-return-btn.primary {
  color: #ffffff;
  background: linear-gradient(130deg, #2f72f3, #31ba98);
}

.payment-return-btn.secondary {
  border: 1px solid #c7d6ee;
  color: #203858;
  background: #ffffff;
}

.booking-week-wrap {
  margin-bottom: 12px;
}

.booking-label {
  margin: 0 0 6px;
  color: #2d466d;
  font-size: .88rem;
  font-weight: 700;
}

.booking-selected-slot {
  margin: 0 0 10px;
  color: #243754;
  font-size: 1rem;
  font-weight: 700;
}

.booking-week-calendar {
  border: 1px solid #d7e3f5;
  background: #f9fbff;
  border-radius: 14px;
  padding: 12px;
}

.booking-week-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.booking-week-range {
  margin: 0;
  color: #405c86;
  font-size: .9rem;
  font-weight: 700;
}

.booking-week-nav {
  display: flex;
  gap: 8px;
}

.booking-week-btn {
  border: 1px solid #c8d9f2;
  background: #ffffff;
  color: #223c66;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}

.booking-week-btn:hover {
  border-color: #94b0de;
  background: #f4f8ff;
}

.booking-week-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.booking-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 8px;
}

.booking-day-card {
  border: 1px solid #d6e2f2;
  background: #ffffff;
  border-radius: 12px;
  padding: 10px;
  min-height: 144px;
}

.booking-day-title {
  margin: 0 0 8px;
  color: #1e2f47;
  font-size: .9rem;
  font-weight: 800;
}

.booking-day-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.booking-day-empty {
  margin: 6px 0 0;
  color: #8aa0bf;
  font-size: .85rem;
  font-weight: 600;
}

.booking-slot-time {
  border: 1px solid #cddcf2;
  background: #f7fbff;
  color: #233f66;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}

.booking-slot-time:hover {
  border-color: #9cb5df;
  background: #ecf4ff;
}

.booking-slot-time.active {
  border-color: #2f72f3;
  background: #2f72f3;
  color: #ffffff;
}

.booking-week-summary {
  margin: 10px 0 0;
  color: #4d668d;
  font-size: .87rem;
  font-weight: 600;
}

.booking-empty {
  margin: 0;
  color: #60799f;
  font-size: .86rem;
}

#bookingSubmitBtn {
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  color: #ffffff;
  background: linear-gradient(130deg, #2f72f3, #31ba98);
  font-weight: 700;
  cursor: pointer;
}

@keyframes hero-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes item-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}
@keyframes floaty {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(12px,-10px,0) scale(1.05); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

@media (max-width: 1040px) {
  .hero-search { grid-template-columns: 1fr; }
  .directory-layout { grid-template-columns: 1fr; }
  .results-list { max-height: 360px; }
  .blog-preview-grid { grid-template-columns: 1fr; }
  .blog-preview-card { min-height: 0; }
  .booking-week-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}

@media (max-width: 640px) {
  .site-header { padding: 10px 12px; }
  .site-nav { gap: 10px; }
  .site-nav-link { display: none; }
  .header-cta { font-size: .72rem; padding: 8px 11px; }
  .hero { padding-left: 12px; padding-right: 12px; }
  .hero h1 { max-width: 100%; }
  main { padding: 16px 12px 50px; }
  .map-shell, #homeopathMap { min-height: 440px; }
  .closing-cta { flex-direction: column; align-items: flex-start; }
  .blog-preview-head { align-items: flex-start; flex-direction: column; }
  .popular-city-links { grid-template-columns: 1fr 1fr; }
  .report-modal-content,
  .booking-modal-content {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    margin: 8px auto;
    padding: 14px;
  }
  .booking-week-calendar {
    padding: 10px;
  }
  .booking-week-grid { grid-template-columns: 1fr; }
}