/* Salons tab (/salons): the list and the map, laid out once for every width.

   Earlier layers (styles.css, customer-brand.css, mobile.css,
   mobile-refresh.css) shaped this page at fixed window widths, so the split,
   the cards and the search row changed abruptly between them. This file loads
   after all of them and is the one that decides:

   - Above 768px the list and the map sit side by side. The list takes 42% of
     the width, never less than 360px nor more than 760px; a width the
     customer dragged to is kept but never leaves the map under 320px. The
     map takes the rest.
   - The cards reflow by the list's own width (a container query), not the
     window's: one column of compact cards when the list is narrow, then two,
     three and four columns of tall cards. Cards in a row are the same height
     and their buttons line up at the bottom.
   - Search and Filters are one slim capsule across the whole top of the map
     at every width; when the map is narrow Filters shrinks to its icon.
   - At 768px and below the capsule is a bar on top and the list or the map
     fills the rest.
   - The Filters drawer is a floating glass sheet in the same style.

   Motion follows the booking flow: the same ease (--bk-ease), soft rises and
   springy presses. The page re-renders often and the map canvas is moved into
   each new render, so nothing here uses an entrance keyframe that would
   replay; cards rise in from ui/customer-motion.js, once per visit.

   Search selectors run through .salon-directory-controls so they outrank the
   phone rules in mobile.css and mobile-refresh.css. */

html body.salon-directory-mode {
  --dir-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dir-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dir-ink: #1d1a24;
  --dir-muted: #6d6778;
  --dir-line: #ebe7f3;
  --dir-violet: var(--rl-violet, #916be8);
  --dir-violet-ink: var(--rl-violet-ink, #5236b3);
  --dir-violet-soft: var(--rl-violet-soft, #f4f0fd);
  --dir-violet-line: var(--rl-violet-line, #d9cdf8);
  --dir-glass: rgba(255, 255, 255, 0.9);
  --dir-float: 0 18px 40px -20px rgba(36, 24, 72, 0.42), 0 2px 6px rgba(36, 24, 72, 0.07);
  --dir-grad-line: linear-gradient(120deg, rgba(143, 247, 210, 0.95), rgba(147, 162, 247, 0.95) 50%, rgba(145, 107, 232, 0.95));
  --dir-fill: var(--bk-fill, linear-gradient(135deg, #4fcfa9 0%, #6f84ea 55%, #7a52dd 100%));
}

/* ---- Split ---------------------------------------------------------------- */

@media (min-width: 769px) {
  html body.salon-directory-mode .salon-map-directory {
    --dir-list: clamp(360px, 42%, 760px);
    grid-template-columns: minmax(0, var(--dir-list)) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  html body.salon-directory-mode .salon-map-directory.has-custom-split {
    --dir-list: clamp(340px, var(--directory-list-width), calc(100% - 332px));
  }

  html body.salon-directory-mode .salon-directory-page.directory-view-map .salon-map-directory,
  html body.salon-directory-mode .salon-directory-page.directory-view-list .salon-map-directory {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.salon-directory-mode .salon-directory-page.directory-view-list .salon-map-directory {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  /* The search capsule spans the whole top of the map. */
  html body.salon-directory-mode .salon-directory-page:not(.directory-view-list) .salon-directory-controls {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: stretch;
    width: auto;
    margin: 14px !important;
    padding: 0;
    container: dir-search / inline-size;
  }

  html body.salon-directory-mode .salon-directory-page.directory-view-map .salon-directory-controls {
    grid-column: 1;
  }

  html body.salon-directory-mode .salon-directory-page.directory-view-list .salon-directory-controls {
    width: min(760px, 100%);
    container: dir-search / inline-size;
  }

  html body.salon-directory-mode .directory-map-panel {
    overflow: hidden;
    border: 1px solid var(--dir-line);
    border-radius: 24px;
    background: #eef1f0;
  }

  /* While the divider is dragged the canvas keeps one size, pinned to the
     right, and the panel shows more or less of it (holdDirectoryMapForDrag
     in app.js): the map never resizes mid-drag, so it never blinks. */
  html body.salon-directory-mode .directory-map-panel .directory-map-canvas.is-held {
    right: 0 !important;
    left: auto !important;
    width: var(--directory-map-hold-width) !important;
  }
}

/* ---- Search capsule --------------------------------------------------------
   One slim glass bar with a gradient edge: the search icon and field, a hair
   divider, and Filters as a pill inside it. */

html body.salon-directory-mode .salon-directory-controls .directory-search-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  grid-template-rows: auto !important;
  align-items: center;
  gap: 0;
  min-height: 48px;
  height: 48px;
  padding: 4px;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93)) padding-box,
    var(--dir-grad-line) border-box;
  box-shadow: var(--dir-float);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  transition:
    box-shadow 0.45s var(--dir-ease),
    transform 0.45s var(--dir-ease);
}

html body.salon-directory-mode .salon-directory-controls .directory-search-actions:focus-within {
  box-shadow:
    0 0 0 4px rgba(145, 107, 232, 0.16),
    0 22px 44px -22px rgba(82, 54, 179, 0.5);
}

/* One row, always: an old stacked layout put the field on a second row. */
html body.salon-directory-mode .salon-directory-controls .directory-search-actions > .directory-search {
  grid-row: 1 !important;
  grid-column: 1 !important;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 38px !important;
  height: 38px;
  padding: 0 12px 0 14px;
  border: 0;
  border-radius: 999px;
  color: var(--dir-muted);
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html body.salon-directory-mode .salon-directory-controls .directory-search-actions > .directory-search:focus-within {
  border: 0;
  background: transparent;
  box-shadow: none;
}

html body.salon-directory-mode .salon-directory-controls .directory-search input,
html body.salon-directory-mode .salon-directory-controls .directory-search input:is(:focus, :focus-visible) {
  min-height: 0 !important;
  height: 36px !important;
  padding: 0 !important;
  color: var(--dir-ink);
  font-size: 0.92rem;
  font-weight: 550;
}

html body.salon-directory-mode .salon-directory-controls .directory-search input::placeholder {
  color: #8a8496;
  font-weight: 500;
}

html body.salon-directory-mode .salon-directory-controls .directory-search-leading {
  width: 20px;
  height: 20px;
  color: var(--dir-violet-ink);
}

html body.salon-directory-mode .salon-directory-controls .directory-search-leading .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.45s var(--dir-spring);
}

html body.salon-directory-mode .salon-directory-controls .directory-search:focus-within .directory-search-leading .icon {
  transform: scale(1.1) rotate(-8deg);
}

html body.salon-directory-mode .salon-directory-controls .directory-search-actions > .directory-search-divider {
  display: block !important;
  grid-row: 1;
  grid-column: 2;
  width: 1px;
  height: 22px;
  margin: 0 6px 0 2px;
  background: var(--dir-line);
}

html body.salon-directory-mode .salon-directory-controls .directory-search-actions > .discovery-filter-trigger {
  position: relative;
  grid-row: 1 !important;
  grid-column: 3 !important;
  display: inline-flex;
  width: auto;
  min-width: 0 !important;
  min-height: 38px !important;
  height: 38px !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px 0 13px !important;
  border: 0;
  border-radius: 999px;
  color: var(--dir-violet-ink);
  background: var(--dir-violet-soft);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: 0.84rem;
  font-weight: 750;
  transform: none;
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.45s var(--dir-ease),
    transform 0.4s var(--dir-spring);
}

html body.salon-directory-mode .salon-directory-controls .discovery-filter-trigger > .icon {
  width: 17px;
  height: 17px;
  color: currentColor;
  transition: transform 0.55s var(--dir-ease);
}

@media (hover: hover) and (pointer: fine) {
  html body.salon-directory-mode .salon-directory-controls .directory-search-actions > .discovery-filter-trigger:hover {
    color: #fff;
    background: var(--dir-fill);
    box-shadow: 0 10px 22px -12px rgba(122, 82, 221, 0.7);
  }

  html body.salon-directory-mode .salon-directory-controls .discovery-filter-trigger:hover > .icon {
    transform: rotate(180deg);
  }
}

html body.salon-directory-mode .salon-directory-controls .directory-search-actions > .discovery-filter-trigger:active {
  transform: scale(0.95);
}

html body.salon-directory-mode .salon-directory-controls .directory-search-actions > .discovery-filter-trigger[aria-expanded="true"] {
  color: #fff;
  background: var(--dir-fill);
}

html body.salon-directory-mode .salon-directory-controls .discovery-filter-trigger .filter-count {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  color: var(--dir-violet-ink);
  background: #fff;
  box-shadow: 0 0 0 1px var(--dir-violet-line);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

/* A narrow map: Filters keeps its icon (and its count). */
@container dir-search (max-width: 430px) {
  html body.salon-directory-mode .salon-directory-controls .directory-search-actions > .discovery-filter-trigger {
    width: 38px;
    padding: 0 !important;
  }

  html body.salon-directory-mode .salon-directory-controls .discovery-filter-trigger > span {
    display: none;
  }

  html body.salon-directory-mode .salon-directory-controls .discovery-filter-trigger .filter-count {
    position: absolute;
    top: -5px;
    right: -5px;
  }
}

@container dir-search (max-width: 300px) {
  html body.salon-directory-mode .salon-directory-controls .directory-search input::placeholder {
    color: transparent;
  }
}

/* "Search this area": a glass pill under the capsule. */
html body.salon-directory-mode .directory-search-area-button {
  top: 76px;
  gap: 8px;
  min-height: 36px;
  padding: 0 15px 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  color: var(--dir-violet-ink);
  background: var(--dir-glass);
  box-shadow: var(--dir-float);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  font-size: 0.82rem;
  font-weight: 750;
  transition:
    transform 0.45s var(--dir-spring),
    box-shadow 0.45s var(--dir-ease),
    background-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  html body.salon-directory-mode .directory-search-area-button:hover {
    background: #fff;
    box-shadow: 0 22px 44px -22px rgba(82, 54, 179, 0.5);
  }
}

/* ---- Filters drawer ---------------------------------------------------------
   A floating glass sheet that glides in from the right (a bottom sheet on a
   phone), with the booking flow's cards, gradient and ease. */

html body.salon-directory-mode .discovery-filter-scrim {
  background: rgba(24, 20, 34, 0.26);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  backdrop-filter: blur(6px) saturate(1.1);
  transition:
    opacity 0.4s var(--dir-ease),
    visibility 0s linear 0.4s;
}

html body.salon-directory-mode .discovery-filter-scrim.is-open {
  transition-delay: 0s;
}

@media (min-width: 769px) {
  html body.salon-directory-mode .discovery-filter-panel.discovery-filter-drawer {
    top: calc(var(--discovery-drawer-top, 74px) + 12px);
    right: 12px;
    bottom: 12px;
    width: min(420px, calc(100vw - 24px));
    height: auto;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 26px;
    transform: translate3d(calc(100% + 40px), 0, 0);
    transition:
      transform 0.6s var(--dir-ease),
      opacity 0.3s ease,
      visibility 0s linear 0.6s;
  }

  html body.salon-directory-mode .discovery-filter-panel.discovery-filter-drawer.is-open {
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
  }
}

html body.salon-directory-mode .discovery-filter-panel.discovery-filter-drawer {
  overflow: hidden;
  background: rgba(252, 251, 255, 0.95);
  box-shadow:
    0 40px 90px -30px rgba(36, 24, 72, 0.5),
    0 2px 8px rgba(36, 24, 72, 0.08);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
}

html body.salon-directory-mode .discovery-filter-drawer-header {
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--dir-line);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html body.salon-directory-mode .discovery-filter-drawer-header > div > span {
  width: fit-content;
  color: transparent;
  background: var(--bk-grad-x, linear-gradient(90deg, #4fcfa9, #6f84ea, #7a52dd));
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

html body.salon-directory-mode .discovery-filter-drawer-header strong {
  color: var(--dir-ink);
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 750;
  letter-spacing: -0.03em;
}

html body.salon-directory-mode .discovery-filter-drawer-header .icon-button {
  display: grid;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--dir-line);
  border-radius: 999px;
  color: var(--dir-ink);
  background: #fff;
  box-shadow: 0 6px 16px -10px rgba(36, 24, 72, 0.4);
  transition: transform 0.45s var(--dir-spring), background-color 0.25s ease;
}

html body.salon-directory-mode .discovery-filter-drawer-header .icon-button:hover {
  background: var(--dir-violet-soft);
  transform: rotate(90deg);
}

html body.salon-directory-mode .discovery-filter-drawer .discovery-filter-fields {
  gap: 18px;
  padding: 20px 22px 24px;
}

html body.salon-directory-mode .discovery-filter-drawer .discovery-filter-fields > label > span,
html body.salon-directory-mode .discovery-filter-drawer .discovery-sort-options > legend {
  color: var(--dir-muted);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

html body.salon-directory-mode .discovery-filter-drawer .discovery-filter-fields > label,
html body.salon-directory-mode .discovery-filter-drawer .discovery-sort-options {
  transform: translateX(26px);
  transition:
    opacity 0.35s ease,
    transform 0.6s var(--dir-ease);
}

html body.salon-directory-mode .discovery-filter-drawer.is-open .discovery-filter-fields > label,
html body.salon-directory-mode .discovery-filter-drawer.is-open .discovery-sort-options {
  transform: none;
}

/* Sort: three cards like the booking flow's choices. */
html body.salon-directory-mode .discovery-sort-options {
  gap: 8px;
}

html body.salon-directory-mode .discovery-sort-option {
  min-height: 104px;
  padding: 12px !important;
  border: 1px solid var(--dir-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(36, 24, 72, 0.04);
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.45s var(--dir-ease),
    transform 0.45s var(--dir-spring);
}

@media (hover: hover) and (pointer: fine) {
  html body.salon-directory-mode .discovery-sort-option:hover:not(.disabled) {
    border-color: var(--dir-violet-line);
    box-shadow: 0 16px 30px -22px rgba(82, 54, 179, 0.5);
    transform: translateY(-2px);
  }
}

html body.salon-directory-mode .discovery-sort-option:active:not(.disabled) {
  transform: scale(0.97);
}

html body.salon-directory-mode .discovery-sort-option.active {
  border-color: transparent;
  background:
    linear-gradient(#f7f3ff, #f7f3ff) padding-box,
    var(--dir-grad-line) border-box;
  box-shadow: 0 16px 30px -22px rgba(82, 54, 179, 0.55);
}

html body.salon-directory-mode .discovery-sort-icon {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  color: var(--dir-violet-ink);
  background: var(--dir-violet-soft);
  transition: background 0.3s ease, color 0.3s ease;
}

html body.salon-directory-mode .discovery-sort-option.active .discovery-sort-icon {
  color: #fff;
  background: var(--dir-fill);
}

html body.salon-directory-mode .discovery-sort-option strong {
  color: var(--dir-ink);
  font-size: 0.76rem;
}

html body.salon-directory-mode .discovery-sort-option > i {
  top: 11px;
  right: 11px;
  width: 16px;
  height: 16px;
  border: 1.5px solid #d6d0e0;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.4s var(--dir-spring);
}

html body.salon-directory-mode .discovery-sort-option.active > i {
  border: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat,
    var(--dir-fill);
  transform: scale(1.06);
}

/* The dropdowns. */
html body.salon-directory-mode .discovery-filter-drawer .prelook-select-trigger,
html body.salon-directory-mode .discovery-filter-drawer select {
  min-height: 46px;
  border-color: var(--dir-line);
  border-radius: 14px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(36, 24, 72, 0.04);
  transition: border-color 0.25s ease, box-shadow 0.45s var(--dir-ease);
}

html body.salon-directory-mode .discovery-filter-drawer .prelook-select-trigger:hover:not(:disabled) {
  border-color: var(--dir-violet-line);
  box-shadow: 0 12px 24px -18px rgba(82, 54, 179, 0.5);
}

html body.salon-directory-mode .discovery-filter-drawer .prelook-select-trigger[aria-expanded="true"],
html body.salon-directory-mode .discovery-filter-drawer select:focus-visible {
  border-color: var(--dir-violet);
  box-shadow: 0 0 0 4px rgba(145, 107, 232, 0.16);
}

/* Clear all and Show results. */
html body.salon-directory-mode .discovery-filter-drawer-actions {
  gap: 10px;
  padding: 14px 22px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--dir-line);
  background: rgba(255, 255, 255, 0.7);
}

html body.salon-directory-mode .discovery-filter-drawer-actions button {
  min-height: 46px;
  border-radius: 14px;
  font-weight: 750;
  transition:
    transform 0.4s var(--dir-spring),
    box-shadow 0.45s var(--dir-ease),
    background-position 0.8s var(--dir-ease),
    background-color 0.25s ease,
    color 0.25s ease;
}

html body.salon-directory-mode .discovery-filter-drawer-actions .discovery-clear-filters {
  border: 1px solid var(--dir-line);
  color: var(--dir-ink);
  background: #fff;
}

html body.salon-directory-mode .discovery-filter-drawer-actions .solid-button.customer {
  border: 0;
  color: #fff;
  background: var(--bk-cta, linear-gradient(100deg, #4fcfa9 0%, #6f84ea 38%, #7a52dd 70%, #6f84ea 100%) 0 50% / 220% 100%);
  box-shadow: var(--bk-glow, 0 18px 40px -26px rgba(122, 82, 221, 0.55));
}

@media (hover: hover) and (pointer: fine) {
  html body.salon-directory-mode .discovery-filter-drawer-actions .solid-button.customer:hover {
    background-position: 100% 50%;
    box-shadow: 0 22px 40px -22px rgba(122, 82, 221, 0.75);
    transform: translateY(-1px);
  }

  html body.salon-directory-mode .discovery-filter-drawer-actions .discovery-clear-filters:hover {
    border-color: var(--dir-violet-line);
    color: var(--dir-violet-ink);
    background: var(--dir-violet-soft);
  }
}

html body.salon-directory-mode .discovery-filter-drawer-actions button:active {
  transform: scale(0.97);
}

/* ---- Map controls ---------------------------------------------------------- */

/* Location above zoom, stacked at the bottom right, clear of the attribution.
   They appear once the map is ready (styles.css hides them until then). */
html body.salon-directory-mode .directory-map-ui :is(.map-controls, .map-location-control) {
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: var(--dir-glass);
  box-shadow: var(--dir-float);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}

html body.salon-directory-mode .directory-map-ui .map-controls {
  top: auto;
  right: 16px;
  bottom: 36px;
  left: auto;
  display: grid;
  gap: 0;
  width: 46px;
  padding: 4px;
  border-radius: 18px;
}

html body.salon-directory-mode .directory-map-ui .map-controls button {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  min-width: 0;
  min-height: 0;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 13px;
  color: var(--dir-ink);
  background: transparent;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.4s var(--dir-spring);
}

html body.salon-directory-mode .directory-map-ui .map-controls button + button::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 9px;
  right: 9px;
  height: 1px;
  background: var(--dir-line);
}

html body.salon-directory-mode .directory-map-ui .map-controls .icon {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
}

html body.salon-directory-mode .directory-map-ui .map-location-control {
  top: auto;
  right: 16px;
  bottom: 128px;
  left: auto;
  width: 46px;
  height: 46px;
  border-radius: 18px;
  color: var(--dir-violet-ink);
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.45s var(--dir-ease),
    transform 0.4s var(--dir-spring);
}

html body.salon-directory-mode .directory-map-ui .map-location-control .icon {
  width: 19px;
  height: 19px;
}

@media (hover: hover) and (pointer: fine) {
  html body.salon-directory-mode .directory-map-ui .map-controls button:hover {
    color: var(--dir-violet-ink);
    background: var(--dir-violet-soft);
    transform: none;
  }

  html body.salon-directory-mode .directory-map-ui .map-location-control:hover {
    color: var(--dir-violet-ink);
    background: #fff;
    box-shadow: 0 22px 44px -22px rgba(82, 54, 179, 0.5);
    transform: translateY(-2px);
  }
}

html body.salon-directory-mode .directory-map-ui .map-controls button:active,
html body.salon-directory-mode .directory-map-ui .map-location-control:active {
  transform: scale(0.88);
}

/* Finding the customer: the arrow breathes and a ring spreads. */
html body.salon-directory-mode .directory-map-ui .map-location-control.is-locating {
  color: #fff;
  background: var(--dir-fill);
}

html body.salon-directory-mode .directory-map-ui .map-location-control.is-locating .icon {
  animation: dir-locate 1.1s ease-in-out infinite;
}

html body.salon-directory-mode .directory-map-ui .map-location-control.is-locating::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(145, 107, 232, 0.5);
  animation: dir-locate-ring 1.4s var(--dir-ease) infinite;
  pointer-events: none;
}

@keyframes dir-locate {
  50% { transform: scale(0.82); opacity: 0.75; }
}

@keyframes dir-locate-ring {
  to { box-shadow: 0 0 0 14px rgba(145, 107, 232, 0); }
}

/* The controls slide up a little as the map becomes ready. A transition, so
   a later render (already ready) shows them in place. */
html body.salon-directory-mode .directory-map-ui :is(.map-controls, .map-location-control) {
  translate: 0 0;
  transition-property: background-color, color, box-shadow, transform, translate, opacity;
}

html body.salon-directory-mode .directory-map-canvas:not(.ready) ~ .directory-map-ui :is(.map-controls, .map-location-control) {
  opacity: 0;
  translate: 0 10px;
}

/* ---- Results list ---------------------------------------------------------- */

html body.salon-directory-mode .salon-directory-panel {
  container: dir-list / inline-size;
}

html body.salon-directory-mode .salon-directory-panel .directory-list {
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 12px;
  padding: 4px 6px 28px 2px;
}

@container dir-list (min-width: 600px) {
  html body.salon-directory-mode .salon-directory-panel .directory-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
  }
}

@container dir-list (min-width: 1040px) {
  html body.salon-directory-mode .salon-directory-panel .directory-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@container dir-list (min-width: 1440px) {
  html body.salon-directory-mode .salon-directory-panel .directory-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ---- Salon card ------------------------------------------------------------
   Compact (photo beside the details) while the list is narrow, tall (photo
   on top) once it fits two columns. The details stretch, so the price line
   and the buttons sit at the bottom: cards in a row line up. */

html body.salon-directory-mode .directory-list .directory-salon-row {
  position: relative;
  display: grid !important;
  grid-template-columns: 128px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "media main"
    "actions actions";
  align-items: stretch;
  gap: 12px 14px !important;
  min-height: 0 !important;
  padding: 10px !important;
  border: 1px solid var(--dir-line);
  border-radius: 20px !important;
  background: #fff;
  box-shadow: 0 1px 2px rgba(36, 24, 72, 0.04), 0 12px 28px -24px rgba(36, 24, 72, 0.4);
  transition:
    transform 0.5s var(--dir-ease),
    box-shadow 0.5s var(--dir-ease),
    border-color 0.3s ease,
    background-color 0.3s ease;
}

html body.salon-directory-mode .directory-salon-row .directory-salon-media {
  position: relative;
  grid-area: media;
  align-self: stretch;
  width: 100% !important;
  height: auto !important;
  min-height: 118px;
  overflow: hidden;
  border-radius: 14px;
  isolation: isolate;
}

html body.salon-directory-mode .directory-list .directory-salon-row .directory-salon-thumb.salon-thumb {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background-position: center;
  background-size: cover;
  transform: scale(1.001);
  transition: transform 0.9s var(--dir-ease), filter 0.5s ease;
}

/* The distance, as a small glass tag on the photo's corner. */
html body.salon-directory-mode .directory-salon-row .directory-salon-thumb > span {
  position: absolute;
  top: auto;
  right: auto;
  bottom: 8px;
  left: 8px;
  width: auto;
  max-width: calc(100% - 16px);
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--dir-ink);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1.25;
  text-align: left;
}

html body.salon-directory-mode .directory-salon-row .salon-row-main {
  display: flex;
  grid-area: main;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  min-height: 0 !important;
  padding: 2px 2px 0 0;
}

html body.salon-directory-mode .directory-salon-row .directory-salon-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
}

html body.salon-directory-mode .directory-salon-row .directory-salon-heading h3 {
  margin: 0 0 3px;
  overflow: visible;
  color: var(--dir-ink);
  font-size: 0.98rem;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.012em;
  white-space: normal;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

html body.salon-directory-mode .directory-salon-row .directory-salon-heading p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--dir-muted);
  font-size: 0.78rem;
  line-height: 1.4;
  white-space: normal;
  text-overflow: clip;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html body.salon-directory-mode .directory-salon-row .directory-rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--dir-violet-ink);
  background: var(--dir-violet-soft);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

html body.salon-directory-mode .directory-salon-row .directory-rating > span {
  color: #f0a83a;
}

html body.salon-directory-mode .directory-salon-row .tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  overflow: visible;
}

html body.salon-directory-mode .directory-salon-row .tag-row span {
  padding: 3px 8px;
  border: 0;
  border-radius: 999px;
  color: #5c566b;
  background: #f5f3f9;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
}

/* The price line rides at the bottom of the details. */
html body.salon-directory-mode .directory-salon-row .directory-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
  margin-top: auto;
  padding-top: 2px;
  color: var(--dir-muted);
  font-size: 0.76rem;
  font-weight: 650;
}

html body.salon-directory-mode .directory-salon-row .directory-meta b {
  color: var(--dir-ink);
  font-size: 0.84rem;
  font-weight: 800;
}

html body.salon-directory-mode .directory-salon-row .directory-actions {
  display: grid !important;
  grid-area: actions;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-self: end;
  gap: 8px;
  width: 100%;
}

html body.salon-directory-mode .directory-salon-row .directory-actions button {
  display: inline-flex;
  min-width: 0;
  min-height: 36px !important;
  height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 750;
  line-height: 1;
  transition:
    transform 0.4s var(--dir-spring),
    box-shadow 0.45s var(--dir-ease),
    background-position 0.8s var(--dir-ease),
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

html body.salon-directory-mode .directory-salon-row .directory-actions button .icon {
  width: 15px;
  height: 15px;
}

html body.salon-directory-mode .directory-salon-row .directory-actions .directory-book-button.solid-button {
  border: 0;
  color: #fff;
  background: var(--bk-cta, linear-gradient(100deg, #4fcfa9 0%, #6f84ea 38%, #7a52dd 70%, #6f84ea 100%) 0 50% / 220% 100%);
  box-shadow: 0 10px 22px -16px rgba(122, 82, 221, 0.7);
}

html body.salon-directory-mode .directory-salon-row .directory-actions .directory-detail-button.outline-button {
  border: 1px solid var(--dir-line);
  color: var(--dir-ink);
  background: #fff;
}

@media (hover: hover) and (pointer: fine) {
  html body.salon-directory-mode .directory-list .directory-salon-row:hover {
    border-color: var(--dir-violet-line);
    box-shadow: 0 2px 4px rgba(36, 24, 72, 0.04), 0 26px 50px -30px rgba(82, 54, 179, 0.5);
    transform: translateY(-3px);
  }

  html body.salon-directory-mode .directory-list .directory-salon-row:hover .directory-salon-thumb {
    transform: scale(1.06);
  }

  html body.salon-directory-mode .directory-salon-row .directory-actions .directory-book-button.solid-button:hover {
    background-position: 100% 50%;
    box-shadow: 0 16px 28px -16px rgba(122, 82, 221, 0.8);
    transform: translateY(-1px);
  }

  html body.salon-directory-mode .directory-salon-row .directory-actions .directory-detail-button.outline-button:hover {
    border-color: var(--dir-violet-line);
    color: var(--dir-violet-ink);
    background: var(--dir-violet-soft);
    transform: translateY(-1px);
  }
}

html body.salon-directory-mode .directory-salon-row .directory-actions button:active {
  transform: scale(0.96);
}

/* The salon picked on the map: a violet ring that eases in. */
html body.salon-directory-mode .directory-list .directory-salon-row.active {
  border-color: var(--dir-violet);
  background: #fff;
  box-shadow:
    0 0 0 3px rgba(145, 107, 232, 0.22),
    0 26px 50px -30px rgba(82, 54, 179, 0.55);
}

html body.salon-directory-mode .directory-list .directory-salon-row:focus-visible {
  outline: 3px solid rgba(145, 107, 232, 0.55);
  outline-offset: 3px;
}

/* Rows a new search adds rise in, a little after each other. */
html body.salon-directory-mode .directory-list .directory-salon-row.is-entering {
  animation: dir-card-rise 0.6s var(--dir-ease) both;
  animation-delay: calc(var(--directory-card-index, 0) * 40ms);
}

@keyframes dir-card-rise {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
}

/* A very narrow list (a phone): a smaller photo, the rating under the name. */
@container dir-list (max-width: 440px) {
  html body.salon-directory-mode .directory-list .directory-salon-row {
    grid-template-columns: 100px minmax(0, 1fr) !important;
    gap: 10px 12px !important;
    border-radius: 18px !important;
  }

  html body.salon-directory-mode .directory-salon-row .directory-salon-media {
    min-height: 104px;
    border-radius: 13px;
  }

  html body.salon-directory-mode .directory-salon-row .directory-salon-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  html body.salon-directory-mode .directory-salon-row .directory-rating {
    justify-self: start;
  }

  html body.salon-directory-mode .directory-salon-row .directory-actions button {
    min-height: 40px !important;
    height: 40px;
  }
}

/* Two columns or more: the photo on top. */
@container dir-list (min-width: 600px) {
  html body.salon-directory-mode .directory-list .directory-salon-row {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "media"
      "main"
      "actions";
    gap: 12px !important;
  }

  html body.salon-directory-mode .directory-salon-row .directory-salon-media {
    align-self: start;
    height: auto !important;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  html body.salon-directory-mode .directory-salon-row .salon-row-main {
    padding: 0 4px;
  }
}

/* ---- 768px and below: a search bar, then the list or the map --------------- */

@media (max-width: 768px) {
  html body.salon-directory-mode .salon-map-directory {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  html body.salon-directory-mode .salon-directory-controls {
    position: relative;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto;
    margin: 0 !important;
    container: dir-search / inline-size;
  }

  html body.salon-directory-mode :is(.salon-directory-panel, .directory-map-panel) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  html body.salon-directory-mode .directory-view-list .salon-directory-panel {
    padding-top: 0 !important;
  }

  html body.salon-directory-mode .salon-directory-controls .directory-search-actions {
    min-height: 46px;
    height: 46px;
    box-shadow: 0 8px 20px -16px rgba(36, 24, 72, 0.45);
  }

  html body.salon-directory-mode .salon-directory-controls .directory-search-actions > .directory-search {
    min-height: 36px !important;
    height: 36px;
  }

  html body.salon-directory-mode .salon-directory-controls .directory-search-actions > .discovery-filter-trigger {
    min-height: 36px !important;
    height: 36px !important;
  }

  html body.salon-directory-mode .salon-directory-controls .directory-search input {
    font-size: 16px;
  }

  /* Touch-sized: 44px buttons, the location button above the zoom pair. */
  html body.salon-directory-mode .directory-map-ui .map-controls {
    right: 12px;
    bottom: 96px;
    width: 54px;
  }

  html body.salon-directory-mode .directory-map-ui .map-controls button {
    width: 44px;
    height: 44px;
  }

  html body.salon-directory-mode .directory-map-ui .map-location-control {
    right: 12px;
    bottom: 206px;
    width: 54px;
    height: 54px;
  }

  html body.salon-directory-mode .directory-search-area-button {
    top: 12px;
  }

  /* The Filters drawer: a glass bottom sheet. */
  html body.salon-directory-mode .discovery-filter-panel.discovery-filter-drawer {
    border-radius: 26px 26px 0 0;
    transition:
      transform 0.55s var(--dir-ease),
      visibility 0s linear 0.55s;
  }

  html body.salon-directory-mode .discovery-filter-panel.discovery-filter-drawer.is-open {
    transition-delay: 0s;
  }

  /* The List / Map switch: a dark glass pill. */
  html body.salon-directory-mode .directory-mobile-view-switch {
    gap: 2px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    background: rgba(24, 20, 34, 0.86);
    box-shadow: 0 18px 40px -16px rgba(24, 20, 34, 0.55);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
  }

  html body.salon-directory-mode .directory-mobile-view-switch button {
    border: 0;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.78);
    background: transparent;
    font-weight: 750;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--dir-spring);
  }

  html body.salon-directory-mode .directory-mobile-view-switch button.active {
    color: var(--dir-ink);
    background: #fff;
  }

  html body.salon-directory-mode .directory-mobile-view-switch button:active {
    transform: scale(0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.salon-directory-mode :is(
      .directory-search-actions,
      .discovery-filter-trigger,
      .discovery-filter-trigger > .icon,
      .directory-search-leading .icon,
      .directory-search-area-button,
      .discovery-filter-drawer,
      .discovery-filter-scrim,
      .discovery-sort-option,
      .discovery-filter-drawer-actions button,
      .directory-salon-row,
      .directory-salon-thumb,
      .directory-actions button,
      .map-controls,
      .map-controls button,
      .map-location-control,
      .directory-mobile-view-switch button
    ) {
    transition: none !important;
    animation: none !important;
  }

  html body.salon-directory-mode .directory-list .directory-salon-row:hover,
  html body.salon-directory-mode .directory-list .directory-salon-row:hover .directory-salon-thumb {
    transform: none;
  }

  html body.salon-directory-mode .directory-map-ui .map-location-control.is-locating::after {
    animation: none;
  }
}

/* The phone map's salon card: a tapped pin's salon rises over the tab bar
   with Details and Book; the List / Map switch steps aside while it is up and
   the map's buttons move above it. Only the map view on a phone shows it. */
.directory-map-peek-slot { display: none; }

@media (max-width: 768px) {
  html body.salon-directory-mode .directory-view-map .directory-map-peek-slot { display: block; }
  html body.salon-directory-mode .directory-map-peek {
    position: fixed;
    z-index: 630;
    left: 10px;
    right: 10px;
    bottom: calc(var(--native-tabbar-total, 60px) + 10px);
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-areas: "media copy" "actions actions";
    gap: 10px 12px;
    padding: 14px 12px 12px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 22px 48px -22px rgba(24, 20, 34, 0.5), 0 2px 8px rgba(24, 20, 34, 0.06);
    touch-action: pan-x;
    will-change: transform;
  }
  html body.salon-directory-mode .directory-map-peek-grip {
    position: absolute;
    top: 5px;
    left: 50%;
    width: 34px;
    height: 4px;
    margin-left: -17px;
    border-radius: 4px;
    background: #ddd8e6;
  }
  html body.salon-directory-mode .directory-map-peek-media {
    grid-area: media;
    width: 92px;
    height: 92px;
    min-height: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background-color: #efecf4;
    background-position: center;
    background-size: cover;
  }
  html body.salon-directory-mode .directory-map-peek-copy {
    grid-area: copy;
    display: grid;
    align-content: center;
    gap: 3px;
    min-width: 0;
    padding-right: 30px;
  }
  html body.salon-directory-mode .directory-map-peek-copy > strong {
    overflow: hidden;
    color: var(--dir-ink, #17131f);
    font-size: 16.5px;
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html body.salon-directory-mode .directory-map-peek-copy > strong .sample-salon-badge { margin-left: 4px; padding: 1px 6px; font-size: 9.5px; vertical-align: 2px; }
  html body.salon-directory-mode .directory-map-peek-copy > span { display: flex; align-items: center; gap: 5px; min-width: 0; color: #6b6478; font-size: 13px; line-height: 1.3; }
  html body.salon-directory-mode .directory-map-peek-copy > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body.salon-directory-mode .directory-map-peek-copy .icon { width: 14px; height: 14px; flex: none; }
  html body.salon-directory-mode .directory-map-peek-rating { color: #2f2a3a !important; font-weight: 650; }
  html body.salon-directory-mode .directory-map-peek-rating b { color: #f2a618; }
  html body.salon-directory-mode .directory-map-peek-price { color: #5236b3 !important; font-weight: 700; }
  html body.salon-directory-mode .directory-map-peek-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    min-height: 30px !important;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f3f1f7;
    color: #5c5568;
  }
  html body.salon-directory-mode .directory-map-peek-close .icon { width: 15px; height: 15px; }
  html body.salon-directory-mode .directory-map-peek-actions { grid-area: actions; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; }
  html body.salon-directory-mode .directory-map-peek-actions > button { width: 100%; height: 44px; min-height: 44px !important; margin: 0; border-radius: 14px; font-size: 15px; }
  html body.salon-directory-mode .directory-map-peek-media:active,
  html body.salon-directory-mode .directory-map-peek-actions > button:active { transform: scale(0.97); }

  html body.salon-directory-mode .salon-directory-page .directory-mobile-view-switch { transition: opacity 0.22s ease, translate 0.32s var(--dir-ease, ease), visibility 0s; }
  html body.salon-directory-mode .salon-directory-page.has-map-peek .directory-mobile-view-switch {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    translate: 0 16px;
    transition: opacity 0.18s ease, translate 0.3s var(--dir-ease, ease), visibility 0s linear 0.3s;
  }
  html body.salon-directory-mode .directory-map-ui :is(.map-controls, .map-location-control) { transition: transform 0.38s var(--dir-ease, ease), opacity 0.2s ease; }
  html body.salon-directory-mode .has-map-peek .directory-map-ui :is(.map-controls, .map-location-control) { transform: translateY(-96px); }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  html body.salon-directory-mode .directory-map-ui :is(.map-controls, .map-location-control),
  html body.salon-directory-mode .salon-directory-page .directory-mobile-view-switch { transition: none; }
}

/* Phones: the list as an app's list. The search sits on the page's own
   ground with no line under it; a row is a photo, the name, where it is with
   its rating, the price, and Book and Details. Every salon books online and
   most are featured, so those chips say nothing here. */
@media (max-width: 760px) {
  html body.customer-mode.salon-directory-mode .salon-directory-controls { border-bottom: 0; background: var(--native-ground, #f7f6fa); box-shadow: none; }
  html body.customer-mode.salon-directory-mode .salon-directory-panel { background: var(--native-ground, #f7f6fa); box-shadow: none; }
  html body.customer-mode.salon-directory-mode .directory-list .directory-salon-row {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 10px 12px !important;
    padding: 10px !important;
    border-radius: 18px !important;
  }
  html body.customer-mode.salon-directory-mode .directory-salon-row .directory-salon-media { align-self: start; height: 88px !important; min-height: 0; border-radius: 14px; }
  html body.customer-mode.salon-directory-mode .directory-salon-row .directory-salon-heading { gap: 2px; }
  html body.customer-mode.salon-directory-mode .directory-salon-row .directory-salon-heading h3 { font-size: 16px; line-height: 1.25; }
  html body.customer-mode.salon-directory-mode .directory-salon-row .directory-salon-heading p { font-size: 13px; line-height: 1.35; }
  html body.customer-mode.salon-directory-mode .directory-salon-row .directory-rating { padding: 2px 8px; font-size: 12.5px; }
  html body.customer-mode.salon-directory-mode .directory-salon-row .tag-row { display: none; }
  html body.customer-mode.salon-directory-mode .directory-salon-row .directory-meta { font-size: 12.5px; }
  html body.customer-mode.salon-directory-mode .directory-salon-row .salon-row-main { align-content: start; gap: 6px; }
  html body.customer-mode.salon-directory-mode .directory-salon-row .directory-actions button { min-height: 40px !important; height: 40px; border-radius: 12px; }
  html body.customer-mode.salon-directory-mode .directory-salon-row .directory-media-save { width: 30px; height: 30px; min-height: 30px !important; }
}