/**handles:vet-finder**/
/* ==========================================================================
   Vet Finder — Main Stylesheet
   Pixel-perfect match to the Figma design.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens (CSS custom properties)
   -------------------------------------------------------------------------- */
.vme-widget {
  --vme-primary: #00bba7;
  --vme-primary-light: rgba(25, 232, 207, 0.2);
  --vme-badge-bg: #e8f7f4;
  --vme-badge-text: #0d6e63;
  --vme-text: #1a2332;
  --vme-text-secondary: #4a5568;
  --vme-border: #dbe7f3;
  --vme-card-bg: #ffffff;
  --vme-card-radius: 24px;
  --vme-card-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
  --vme-filter-radius: 999px;
  --vme-map-width: 46%;
  --vme-active-border: #00bba7;
  --vme-transition: 0.2s ease;
  --vme-font:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  font-family: var(--vme-font);
  color: var(--vme-text);
  box-sizing: border-box;
}

.vme-widget *,
.vme-widget *::before,
.vme-widget *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. Layout
   -------------------------------------------------------------------------- */
.vme-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.vme-left {
  flex: 1 1 0%;
  min-width: 0;
}

.vme-map {
  flex: 0 0 var(--vme-map-width);
  width: var(--vme-map-width);
  position: sticky;
  top: 24px;
}

.vme-map-inner {
  width: 100%;
  height: 520px;
  border-radius: var(--vme-card-radius);
  overflow: hidden;
  box-shadow: var(--vme-card-shadow);
}

/* Single-column mode */
.vme-cols-1 .vme-layout {
  flex-direction: column;
}

.vme-cols-1 .vme-map {
  flex: none;
  width: 100%;
  position: static;
}

/* --------------------------------------------------------------------------
   3. Filter bar
   -------------------------------------------------------------------------- */
.vme-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* Location input */
.vme-filter--location {
  flex: 1 1 220px;
  min-width: 180px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--vme-border);
  border-radius: var(--vme-filter-radius);
  background: var(--vme-card-bg);
  color: var(--vme-text);
  font-size: 14px;
  font-family: var(--vme-font);
  line-height: 1.4;
  outline: none;
  transition:
    border-color var(--vme-transition),
    box-shadow var(--vme-transition);
}

.vme-filter--location::placeholder {
  color: #94a3b8;
}

.vme-filter--location:hover {
  border-color: var(--vme-primary);
}

.vme-filter--location:focus {
  border-color: var(--vme-primary);
  box-shadow: 0 0 0 3px var(--vme-primary-light);
}

/* Location autocomplete wrapper */
.vme-loc-ac {
  position: relative;
  flex: 1 1 220px;
  min-width: 180px;
}

.vme-loc-ac .vme-filter--location {
  width: 100%;
  flex: none;
}

/* Location suggestion dropdown */
.vme-loc-suggest {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  margin-top: 6px;
  background: var(--vme-card-bg);
  border: 1px solid var(--vme-border);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
}

.vme-loc-suggest.is-open {
  display: block;
}

.vme-loc-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 14px;
  color: var(--vme-text);
  transition: background var(--vme-transition);
  border-bottom: 1px solid #f1f5f9;
}

.vme-loc-item:last-child {
  border-bottom: 0;
}

.vme-loc-item:hover,
.vme-loc-item.is-highlighted {
  background: #f0fdfa;
  color: var(--vme-primary);
}

/* Category select (native fallback) */
.vme-filter--category {
  flex: 1 1 220px;
  min-width: 180px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--vme-border);
  border-radius: var(--vme-filter-radius);
  background: var(--vme-card-bg);
  color: var(--vme-text);
  font-size: 14px;
  font-family: var(--vme-font);
  outline: none;
  cursor: pointer;
  transition:
    border-color var(--vme-transition),
    box-shadow var(--vme-transition);
}

.vme-filter--category:hover {
  border-color: var(--vme-primary);
}

.vme-filter--category:focus {
  border-color: var(--vme-primary);
  box-shadow: 0 0 0 3px var(--vme-primary-light);
}

/* --------------------------------------------------------------------------
   4. Choices.js overrides (category dropdown)
   -------------------------------------------------------------------------- */

.vme-widget .choices {
  margin-bottom: 0 !important;
}

.vme-widget .choices[data-vme="category"] {
  flex: 1 1 220px !important;
  min-width: 180px !important;
}

.vme-widget .choices[data-vme="category"] .choices__inner {
  min-height: 48px !important;
  max-height: 50px !important;
  overflow-y: auto !important;
  padding: 8px 16px !important;
  border: 1px solid var(--vme-border) !important;
  border-radius: var(--vme-filter-radius) !important;
  background: var(--vme-card-bg) !important;
  font-size: 14px !important;
  font-family: var(--vme-font);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  transition:
    border-color var(--vme-transition),
    box-shadow var(--vme-transition);
}

.vme-widget .choices[data-vme="category"]:hover .choices__inner {
  border-color: var(--vme-primary) !important;
}

.vme-widget .choices[data-vme="category"].is-focused .choices__inner {
  border-color: var(--vme-primary) !important;
  box-shadow: 0 0 0 3px var(--vme-primary-light) !important;
}

.vme-widget .choices[data-vme="category"].is-open .choices__inner {
  border-radius: 24px 24px 4px 4px;
}

/* Placeholder */
.vme-widget .choices[data-vme="category"] .choices__placeholder {
  color: #94a3b8;
  opacity: 1;
}

/* Tags list container */
.vme-widget .choices[data-vme="category"] .choices__list--multiple {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Tags (selected items) */
.vme-widget
  .choices[data-vme="category"]
  .choices__list--multiple
  .choices__item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  background: var(--vme-badge-bg) !important;
  border: 1px solid transparent !important;
  color: var(--vme-badge-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  word-break: keep-all;
  white-space: nowrap;
}

/* Remove button on tags */
.vme-widget .choices[data-vme="category"] .choices__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  margin-left: 2px;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 50%;
  background: transparent !important;
  background-image: none !important;
  color: var(--vme-badge-text) !important;
  font-size: 0 !important;
  cursor: pointer;
  opacity: 0.6;
  transition:
    opacity var(--vme-transition),
    background-color var(--vme-transition);
  flex-shrink: 0;
  text-indent: 0;
}

/* Cross icon via pseudo-element */
.vme-widget .choices[data-vme="category"] .choices__button::after {
  content: "\00d7";
  font-size: 16px;
  line-height: 1;
  color: inherit;
}

.vme-widget .choices[data-vme="category"] .choices__button:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.08) !important;
}

/* Dropdown list */
.vme-widget .choices[data-vme="category"] .choices__list--dropdown {
  background: var(--vme-card-bg);
  border: 1px solid var(--vme-border);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  margin-top: 0;
  z-index: 100;
  overflow: hidden;
}

.vme-widget
  .choices[data-vme="category"]
  .choices__list--dropdown
  .choices__list {
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
}

/* Dropdown items with checkboxes */
.vme-widget
  .choices[data-vme="category"]
  .choices__list--dropdown
  .choices__item--selectable {
  position: relative !important;
  padding: 10px 16px 10px 42px !important;
  font-size: 14px !important;
  color: var(--vme-text) !important;
  cursor: pointer;
  transition:
    background var(--vme-transition),
    color var(--vme-transition);
  border-bottom: 1px solid #f1f5f9;
}

.vme-widget
  .choices[data-vme="category"]
  .choices__list--dropdown
  .choices__item--selectable:last-child {
  border-bottom: 0 !important;
}

/* Checkbox pseudo-element */
.vme-widget
  .choices[data-vme="category"]
  .choices__list--dropdown
  .choices__item--selectable::before {
  content: "" !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px;
  border: 2px solid var(--vme-border);
  border-radius: 4px;
  background: var(--vme-card-bg);
  transition: all var(--vme-transition);
}

/* Checked state */
.vme-widget
  .choices[data-vme="category"]
  .choices__list--dropdown
  .choices__item--selectable.is-selected::before {
  background: var(--vme-primary);
  border-color: var(--vme-primary);
  box-shadow: inset 0 0 0 3px var(--vme-card-bg);
}

/* Hover state */
.vme-widget
  .choices[data-vme="category"]
  .choices__list--dropdown
  .choices__item--selectable.is-highlighted {
  background: #f0fdfa;
  color: var(--vme-primary);
}

.vme-widget
  .choices[data-vme="category"]
  .choices__list--dropdown
  .choices__item--selectable.is-selected {
  background: #f0fdfa;
}

/* Hide Choices.js default input when no search */
.vme-widget .choices[data-vme="category"] .choices__input {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-family: var(--vme-font) !important;
  color: var(--vme-text) !important;
  margin-bottom: 0 !important;
}


.vme-widget .choices[data-vme="category"] .choices__input {
  margin-bottom: 0 !important;
}

.vme-widget .choices[data-vme="category"] .choices__input::placeholder {
  color: #94a3b8;
}

/* --------------------------------------------------------------------------
   5. Filter buttons
   -------------------------------------------------------------------------- */
.vme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1.5px solid var(--vme-primary);
  border-radius: var(--vme-filter-radius);
  background: var(--vme-primary);
  color: var(--vme-card-bg);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--vme-font);
  line-height: 1.25;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--vme-transition);
  white-space: nowrap;
}

.vme-btn:hover,
.vme-btn:focus {
  background: #009e8e;
  border-color: #009e8e;
  color: var(--vme-card-bg);
  box-shadow: 0 4px 14px var(--vme-primary-light);
}

.vme-btn--reset {
  background: transparent;
  color: var(--vme-primary);
}

.vme-btn--reset:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.vme-btn--reset:hover:not(:disabled),
.vme-btn--reset:focus:not(:disabled) {
  background: var(--vme-badge-bg);
  color: var(--vme-primary);
}

/* --------------------------------------------------------------------------
   6. Card list
   -------------------------------------------------------------------------- */
.vme-list {
  display: grid;
  gap: 24px;
}

.vme-cols-2 .vme-list {
  grid-template-columns: repeat(2, 1fr);
}

.vme-cols-1 .vme-list {
  grid-template-columns: 1fr;
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.vme-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: var(--vme-card-bg);
  border-radius: var(--vme-card-radius);
  box-shadow: var(--vme-card-shadow);
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    border-color var(--vme-transition),
    box-shadow var(--vme-transition),
    transform var(--vme-transition);
}

.vme-card:hover {
  border-color: var(--vme-active-border);
  box-shadow: 0 12px 32px rgba(0, 187, 167, 0.12);
  transform: translateY(-2px);
}

.vme-card.is-active {
  border-color: var(--vme-active-border);
  box-shadow: 0 12px 32px rgba(0, 187, 167, 0.18);
}

/* Badges container */
.vme-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-self: flex-start;
}

/* Badge */
.vme-badge {
  display: inline-flex;
  padding: 5px 14px;
  border-radius: 12px;
  background: var(--vme-badge-bg);
  color: var(--vme-badge-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Title */
.vme-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--vme-text);
}

/* Structure name */
.vme-structure {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--vme-text-secondary);
}

/* Veterinarian name */
.vme-vet-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--vme-text);
}

/* Address / meta */
.vme-meta {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--vme-text-secondary);
}

/* Phone link */
.vme-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vme-primary);
  text-decoration: none;
  transition: opacity var(--vme-transition);
}

.vme-phone:hover {
  opacity: 0.75;
}

/* Website link button */
.vme-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
  margin-top: 4px;
  padding: 0.75rem 1.5rem;
  border: 1.5px solid var(--vme-primary);
  border-radius: 6.25rem;
  background: var(--vme-card-bg);
  color: var(--vme-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.00106rem;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--vme-transition);
  box-shadow: 0 4px 14px var(--vme-primary-light);
}

.vme-link:hover,
.vme-link:focus {
  background: var(--vme-primary);
  color: var(--vme-card-bg);
  box-shadow: 0 6px 20px var(--vme-primary-light);
}

/* External link icon via SVG */
.vme-link::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  flex-shrink: 0;
}

/* Empty state */
.vme-empty {
  padding: 40px 20px;
  text-align: center;
  font-size: 15px;
  color: var(--vme-text-secondary);
  grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   8. Map overrides
   -------------------------------------------------------------------------- */

/* Leaflet tile sizing fix */
.vme-map-inner .leaflet-tile-pane img {
  max-width: none !important;
  max-height: none !important;
}

/* Leaflet marker icon fix */
.vme-map-inner img.leaflet-marker-icon {
  max-width: none !important;
}

/* Leaflet attribution */
.vme-map-inner .leaflet-control-attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.75);
  padding: 2px 6px;
  border-radius: 4px;
}

.vme-map-inner .leaflet-control-attribution.is-hidden {
  display: none !important;
}

/* Leaflet popup */
.vme-map-inner .leaflet-popup-content-wrapper {
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  font-family: var(--vme-font);
  font-size: 13px;
}

.vme-map-inner .leaflet-popup-content {
  margin: 10px 14px;
  line-height: 1.45;
}

/* Google Maps border radius */
.vme-map-inner > div {
  border-radius: var(--vme-card-radius);
}

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .vme-layout {
    flex-direction: column;
  }

  .vme-map {
    flex: none;
    width: 100%;
    position: static;
    order: -1;
  }

  .vme-map-inner {
    height: 360px;
  }

  .vme-cols-2 .vme-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .vme-filters {
    flex-direction: column;
    gap: 12px;
  }

  .vme-loc-ac,
  .vme-widget .choices[data-vme="category"] {
    flex: 1!important;
    width: 100%;
  }

  .vme-cols-2 .vme-list {
    grid-template-columns: 1fr;
  }

  .vme-map-inner {
    height: 280px;
  }

  .vme-card {
    padding: 16px;
  }
}

/* --------------------------------------------------------------------------
   10. Animations
   -------------------------------------------------------------------------- */
@keyframes vme-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vme-card {
  animation: vme-fade-in 0.3s ease both;
}

.vme-card:nth-child(2) {
  animation-delay: 0.05s;
}
.vme-card:nth-child(3) {
  animation-delay: 0.1s;
}
.vme-card:nth-child(4) {
  animation-delay: 0.15s;
}
.vme-card:nth-child(5) {
  animation-delay: 0.2s;
}
.vme-card:nth-child(6) {
  animation-delay: 0.25s;
}

/* --------------------------------------------------------------------------
   11. Accessibility
   -------------------------------------------------------------------------- */
.vme-card:focus-visible,
.vme-link:focus-visible,
.vme-btn:focus-visible,
.vme-filter--location:focus-visible {
  outline: 2px solid var(--vme-primary);
  outline-offset: 2px;
}