/* ==========================================================================
  Clinic Map  Interactive SVG map with oblast boundaries
  ========================================================================== */

.clinic-map {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 0;
  align-items: stretch;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 4px 16px rgba(0,0,0,.06),
    0 12px 48px rgba(9,202,143,.08);
  border: 1px solid rgba(9,202,143,.1);
}

/* --- Ліва частина: карта --- */
.clinic-map__left {
  padding: 36px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #fafdfb 0%, #f2f9f5 50%, #edf6f1 100%);
  position: relative;
}

.clinic-map__svg {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Oblast styles --- */
.clinic-map__oblast {
  fill: #eef7f3;
  stroke: #c5ddd2;
  stroke-width: 0.5;
  stroke-linejoin: round;
  transition: fill .25s ease;
  cursor: default;
}

.clinic-map__oblast:hover {
  fill: #ddf0e7;
}

.clinic-map__oblast--has-clinic {
  fill: #e5f2ec;
}

.clinic-map__oblast--has-clinic:hover {
  fill: #d5ede2;
}

/* --- Pin styles --- */
.clinic-map__pin {
  filter: drop-shadow(0 2px 6px rgba(9,202,143,.3));
}

.clinic-map__glow {
  fill: var(--primary-color, #09CA8F);
  opacity: 0;
  transition: opacity .35s ease;
}

.clinic-map__ring {
  fill: none;
  stroke: var(--primary-color, #09CA8F);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity .3s ease, r .3s ease;
}

.clinic-map__dot {
  fill: var(--primary-color, #09CA8F);
  stroke: #fff;
  stroke-width: 2;
  transition: r .3s cubic-bezier(.34,1.56,.64,1), fill .25s ease;
}

.clinic-map__dot-inner {
  fill: #fff;
  transition: r .3s cubic-bezier(.34,1.56,.64,1);
}

/* Hover / Active */
.clinic-map__pin:hover .clinic-map__glow,
.clinic-map__pin--active .clinic-map__glow,
.clinic-map__pin:focus .clinic-map__glow {
  opacity: 0.12;
}

.clinic-map__pin:hover .clinic-map__ring,
.clinic-map__pin--active .clinic-map__ring,
.clinic-map__pin:focus .clinic-map__ring {
  opacity: 0.25;
}

.clinic-map__pin:hover .clinic-map__dot,
.clinic-map__pin--active .clinic-map__dot,
.clinic-map__pin:focus .clinic-map__dot {
  fill: var(--primary-hover, #08AB79);
}

.clinic-map__pin:hover .clinic-map__dot-inner,
.clinic-map__pin--active .clinic-map__dot-inner,
.clinic-map__pin:focus .clinic-map__dot-inner {
}

/* Current branch */
.clinic-map__pin--current .clinic-map__dot {
  fill: var(--primary-color, #09CA8F);
}

.clinic-map__pin--current .clinic-map__dot-inner {
}

.clinic-map__pin--current .clinic-map__ring {
  opacity: 0.15;
}

/* Pulse animation */
.clinic-map__pulse {
  fill: none;
  stroke: var(--primary-color, #09CA8F);
  stroke-width: 2;
  opacity: 0;
  animation: mapPulse 2.8s ease-out infinite;
}

.clinic-map__pulse--delayed {
  animation-delay: 1.4s;
}

@keyframes mapPulse {
  0%  { opacity: 0.6; stroke-width: 2; }
  100% { opacity: 0; stroke-width: 0.5; }
}

/* City label */
.clinic-map__label {
  font-family: var(--font, 'Nunito', sans-serif);
  font-weight: 700;
  fill: var(--text-dark, #3A3A3A);
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.02em;
  paint-order: stroke;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* font-size & stroke-width are set as SVG attributes (PHP start values +
     JS zoom scaling). NOT here — a CSS px value would override the attribute
     and, being in user units, blow up the text when the viewBox shrinks. */
}

.clinic-map__pin--current .clinic-map__label {
  font-weight: 800;
  fill: var(--primary-hover, #08AB79);
}

.clinic-map__pin--active .clinic-map__label {
  fill: var(--primary-hover, #08AB79);
}

.clinic-map__pin:focus {
  outline: none;
}

.clinic-map__pin:focus .clinic-map__dot {
  stroke: var(--primary-hover, #08AB79);
  stroke-width: 2.5;
}


/* --- Zoom control bar --- */
.clinic-map__zoom-bar {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 5;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
  padding: 4px;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .4s ease, transform .4s ease;
  pointer-events: none;
}

.clinic-map__zoom-bar.visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.clinic-map__zoom-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  border-radius: 8px;
  transition: background .2s, color .2s;
  flex-shrink: 0;
}

.clinic-map__zoom-btn:hover {
  background: rgba(9,202,143,.08);
  color: var(--primary-color, #09CA8F);
}

.clinic-map__zoom-btn:active {
  background: rgba(9,202,143,.15);
}

.clinic-map__zoom-btn--home {
  margin-top: 2px;
  border-top: 1px solid #eef2f0;
  border-radius: 0 0 8px 8px;
  padding-top: 4px;
}

.clinic-map__zoom-btn--disabled {
  opacity: .35;
  pointer-events: none;
}

/* Slider track */
.clinic-map__zoom-track {
  position: relative;
  width: 4px;
  height: 80px;
  background: #e5e9ef;
  border-radius: 2px;
  margin: 2px 0;
  cursor: pointer;
  overflow: visible;
}

.clinic-map__zoom-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(to top, rgba(9,202,143,.3), var(--primary-color, #09CA8F));
  border-radius: 2px;
  transition: height .1s ease;
}

.clinic-map__zoom-thumb {
  position: absolute;
  left: 50%;
  bottom: 0%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-bottom: -7px;
  background: #fff;
  border: 2px solid var(--primary-color, #09CA8F);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(9,202,143,.25);
  cursor: grab;
  transition: bottom .1s ease, transform .15s;
}

.clinic-map__zoom-thumb:hover {
  transform: scale(1.15);
}

/* Grab cursor when zoomed */
.clinic-map__svg-wrap {
  position: relative;
  width: 100%;
  cursor: default;
}

/* Hint */
.clinic-map__hint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: #8a9a90;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  pointer-events: none;
  z-index: 5;
  transition: opacity .4s ease;
  white-space: nowrap;
}

/* Hover preview card — appears above the marker on hover/focus */
.clinic-map__preview {
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(.96);
  transform-origin: bottom center;
  width: 232px;
  max-width: calc(100% - 16px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(16,40,32,.18), 0 2px 8px rgba(16,40,32,.08);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 30;
  transition: opacity .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.clinic-map__preview--visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
}
.clinic-map__preview--below {
  transform-origin: top center;
}
/* arrow pointing down to the marker (card sits above) */
.clinic-map__preview::after {
  content: "";
  position: absolute;
  left: var(--arrow-x, 50%);
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 4px 4px 8px rgba(16,40,32,.06);
}
/* card flipped below the marker — arrow points up */
.clinic-map__preview--below::after {
  bottom: auto;
  top: -7px;
  box-shadow: -4px -4px 8px rgba(16,40,32,.06);
}
.clinic-map__preview-photo {
  position: relative;
  width: 100%;
  height: 116px;
  background: #eef4f0;
  overflow: hidden;
}
.clinic-map__preview-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* No-photo fallback: branded gradient header with a location pin */
.clinic-map__preview--no-photo .clinic-map__preview-photo {
  height: 78px;
  background: linear-gradient(135deg, #15bd83 0%, #0d9568 100%);
}
.clinic-map__preview--no-photo .clinic-map__preview-photo img { display: none; }
.clinic-map__preview--no-photo .clinic-map__preview-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 30px;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: .92;
}
.clinic-map__preview-body {
  padding: 11px 14px 13px;
}
.clinic-map__preview-name {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #16281f;
  line-height: 1.25;
}
.clinic-map__preview-addr {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #6e7b76;
  line-height: 1.35;
}
/* Touch devices have no hover and tap opens the side panel — hide preview */
@media (hover: none) {
  .clinic-map__preview { display: none !important; }
}

/* Panel photo header — desktop shows it via hover preview instead, so this is
   only rendered on touch devices where the preview card is unavailable. */
.clinic-map__panel-photo { display: none; }
.clinic-map__panel-photo img {
  width: 100%;
  height: 158px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  margin-bottom: 16px;
}
@media (hover: none) {
  .clinic-map__panel-photo { display: block; }
}


/* --- Права частина: табы + панелі --- */
.clinic-map__right {
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(9,202,143,.08);
  background: #fff;
}

/* Табы */
.clinic-map__tabs {
  display: flex;
  border-bottom: 1px solid #eef2f0;
  background: linear-gradient(180deg, #f9fbfa 0%, #fff 100%);
  padding: 0;
  flex-shrink: 0;
}

.clinic-map__tab {
  flex: 1;
  padding: 16px 10px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-family: var(--font, 'Nunito', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: #8a9a90;
  cursor: pointer;
  transition: color .25s, border-color .25s, background .25s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  position: relative;
}

.clinic-map__tab:hover {
  color: var(--primary-color, #09CA8F);
  background: rgba(9, 202, 143, 0.03);
}

.clinic-map__tab--active {
  color: var(--primary-color, #09CA8F);
  border-bottom-color: var(--primary-color, #09CA8F);
  background: #fff;
  font-weight: 700;
}

.clinic-map__tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary-color, #09CA8F);
  box-shadow: 0 0 0 3px rgba(9, 202, 143, 0.15);
  flex-shrink: 0;
  animation: tabDotPulse 2s ease-in-out infinite;
}

@keyframes tabDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(9,202,143,.15); }
  50% { box-shadow: 0 0 0 6px rgba(9,202,143,.08); }
}

/* Панелі */
.clinic-map__panels {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.clinic-map__panel {
  display: none;
  flex-direction: column;
  padding: 28px 28px;
  animation: panelSlideIn .35s cubic-bezier(.16,1,.3,1);
}

.clinic-map__panel--active {
  display: flex;
}

@keyframes panelSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Panel header */
.clinic-map__panel-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f4f2;
}

.clinic-map__panel-title {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -0.02em;
}

.clinic-map__current-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, #e6f9f1 0%, #d0f4e4 100%);
  color: var(--primary-hover, #08AB79);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.clinic-map__current-badge svg {
  flex-shrink: 0;
}

/* Info rows */
.clinic-map__panel-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.clinic-map__info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text, #4B4F58);
}

.clinic-map__info-row--muted {
  color: #9ca3af;
  font-style: italic;
}

.clinic-map__info-icon {
  flex-shrink: 0;
  color: var(--primary-color, #09CA8F);
  margin-top: 1px;
}

.clinic-map__info-row a {
  font-weight: 600;
  color: var(--primary-color, #09CA8F);
  transition: color .2s;
}

.clinic-map__info-row a:hover {
  color: var(--primary-hover, #08AB79);
}

/* Panel footer */
.clinic-map__panel-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f0f4f2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

/* Primary CTA — Записатися */
.clinic-map__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  background: linear-gradient(135deg, #09CA8F, #08AB79);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, filter .2s;
  box-shadow: 0 4px 16px rgba(9,202,143,.25);
}
.clinic-map__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(9,202,143,.32);
  filter: brightness(1.05);
}

/* Secondary — Прокласти маршрут (outline) */
.clinic-map__route {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: #fff;
  color: #08AB79;
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid #bbe8d6;
  border-radius: 12px;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
.clinic-map__route:hover {
  background: #f0faf6;
  border-color: #09CA8F;
  transform: translateY(-1px);
}
.clinic-map__route svg { transition: transform .25s; }
.clinic-map__route:hover svg { transform: rotate(-8deg) scale(1.08); }

/* Tertiary — Перейти на сайт (text link) */
.clinic-map__panel-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6e7b76;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s;
}
.clinic-map__panel-link:hover { color: #08AB79; }
.clinic-map__panel-link svg { transition: transform .25s; }
.clinic-map__panel-link:hover svg { transform: translateX(3px); }

/* Open / closed live status badge */
.clinic-map__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.clinic-map__status::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
}
.clinic-map__status--open { background: #e8faf2; color: #15803d; }
.clinic-map__status--open::before { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.clinic-map__status--closed { background: #f4f4f5; color: #71717a; }
.clinic-map__status--closed::before { background: #a1a1aa; }


/* ==========================================================================
  Responsive
  ========================================================================== */
@media (max-width: 991px) {
  .clinic-map {
    grid-template-columns: 1fr;
    border-radius: 16px;
  }

  .clinic-map__right {
    border-left: none;
    border-top: 1px solid #eef2f0;
  }

  .clinic-map__left {
    padding: 24px 16px;
  }
}

@media (max-width: 640px) {
  .clinic-map {
    border-radius: 14px;
  }

  .clinic-map__tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .clinic-map__tab {
    font-size: 12px;
    padding: 14px 8px;
  }

  .clinic-map__panel {
    padding: 20px 16px;
  }

  .clinic-map__panel-title {
    font-size: 18px;
  }

  .clinic-map__hint {
    font-size: 10px;
    padding: 5px 12px;
  }

  .clinic-map__left {
    padding: 16px 10px;
  }

  .clinic-map__zoom-bar {
    padding: 3px;
    border-radius: 10px;
  }

  .clinic-map__zoom-track {
    height: 56px;
  }

  .clinic-map__zoom-btn {
    width: 28px;
    height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clinic-map__pulse {
    animation: none;
  }
  .clinic-map__dot,
  .clinic-map__dot-inner,
  .clinic-map__glow,
  .clinic-map__ring,
  .clinic-map__panel,
  .clinic-map__zoom-bar,
  .clinic-map__zoom-btn,
  .clinic-map__oblast {
    transition: none;
  }
  .clinic-map__panel {
    animation: none;
  }
}