/* =========================================================
   ZAR Web Neighborhood Menu — Compact Pill Version
   For portaled submenu opened from the Web city trigger
========================================================= */

.zar-neighborhood-popover.is-portaled {
  position: fixed;
  z-index: 10030;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;

  width: auto;
  min-width: 0;
  max-width: min(320px, calc(100vw - 24px));

  padding: 12px;
  border: 1px solid rgba(150, 170, 255, 0.30);
  border-radius: 22px;

  background:
    radial-gradient(circle at 20% 15%, rgba(110, 130, 255, 0.18), transparent 42%),
    linear-gradient(135deg, rgba(18, 22, 42, 0.96), rgba(8, 10, 22, 0.97));

  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(0.98);
  transform-origin: bottom left;

  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 160ms ease;
}

.zar-neighborhood-popover.is-portaled.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* ---------------------------------------------------------
   Compact pill buttons inside submenu
--------------------------------------------------------- */
.zar-neighborhood-popover.is-portaled .zar-chip, .zar-neighborhood-popover.is-portaled button {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 120px;
    min-width: 118px;
    max-width: 132px;
    height: 37px;
    min-height: 37px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    margin: 0;
    border: 1px solid rgba(142, 162, 255, 0.55);
    border-radius: 999px;
    /* background: linear-gradient(180deg, rgba(94, 108, 186, 0.42), rgba(56, 65, 120, 0.38)); */
    color: rgba(239, 243, 255, 0.96);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.20);
    transition: transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease;
}

.zar-neighborhood-popover.is-portaled .zar-chip:hover,
.zar-neighborhood-popover.is-portaled button:hover {
  transform: translateY(-1px);
  border-color: rgba(174, 190, 255, 0.78);
  /* background:
    linear-gradient(180deg, rgba(112, 128, 220, 0.54), rgba(65, 75, 138, 0.48)); */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 10px 22px rgba(0, 0, 0, 0.24);
}

.zar-neighborhood-popover.is-portaled .zar-chip:active,
.zar-neighborhood-popover.is-portaled button:active {
  transform: scale(0.98);
}

.zar-neighborhood-popover.is-portaled .zar-chip:focus-visible,
.zar-neighborhood-popover.is-portaled button:focus-visible {
  outline: 2px solid rgba(185, 203, 255, 0.96);
  outline-offset: 3px;
}

/* ---------------------------------------------------------
   Web parent button active state
--------------------------------------------------------- */
.zar-city-parent--web.is-open {
  border-color: rgba(170, 186, 255, 0.78);
  background:
    linear-gradient(180deg, rgba(104, 119, 210, 0.44), rgba(61, 70, 128, 0.38));
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.zar-city-parent--web .zar-city-parent-caret {
  transition: transform 160ms ease;
}

.zar-city-parent--web.is-open .zar-city-parent-caret {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------
   Mobile tuning
--------------------------------------------------------- */
@media (max-width: 768px) {
  .zar-neighborhood-popover.is-portaled {
    gap: 8px;
    padding: 10px;
    max-width: calc(46vw - 18px);
    border-radius: 18px;
  }

  .zar-neighborhood-popover.is-portaled .zar-chip,
  .zar-neighborhood-popover.is-portaled button {
    width: 118px;
    min-width: 118px;
    max-width: 118px;
    height: 40px;
    min-height: 40px;
    font-size: 13px;
    padding: 0 12px;
  }
}

/*COMPATIBILITY*/
.zar-city-parent--web.active,
.zar-city-parent--web.is-active {
  border-color: rgba(170, 186, 255, 0.78);
  background:
    linear-gradient(180deg, rgba(104, 119, 210, 0.44), rgba(61, 70, 128, 0.38));
}

.zar-city-parent--web.is-open .zar-city-parent-caret,
.zar-city-parent--web[aria-expanded="true"] .zar-city-parent-caret {
  transform: rotate(180deg);
}

.zar-neighborhood-popover.is-portaled.active,
.zar-neighborhood-popover.is-portaled.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}