/* Montenegro theme — layout fixes and polish (v0.107.0).
 *
 * tailwind.css is compiled once with no build step in the repo, so a utility
 * class it never saw does not exist. Everything new lives here, on semantic
 * classes, in the theme's own colour variables (HSL triplets set in base.html).
 */

/* ── Category strip: in the flow, compact ─────────────────────────────────
   It was `sticky top-[72px]` with tall tiles, so while scrolling it covered
   about 40% of a laptop screen and 37% of a phone, over the cards below it. */
/* `section.` beats legacy.css's 5rem padding on every <section>, which made this
   strip 280px tall and left the gap under the hero. */
section.mx-catstrip { background: hsl(var(--background)); padding: .25rem 0; }
.mx-catstrip__row {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: .75rem 0;
  scroll-snap-type: x proximity;
  justify-content: safe center;  /* centred when it fits, scrollable when not */
}
.mx-catstrip__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .95rem .55rem .75rem;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.mx-catstrip__item:hover,
.mx-catstrip__item:focus-visible {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / .06);
}
.mx-catstrip__item > span:first-child { display: inline-flex; color: hsl(var(--primary)); }
.mx-catstrip__item > span:first-child svg { width: 1.15rem; height: 1.15rem; }
.mx-catstrip__item > span:nth-child(2) { font-size: .9rem; font-weight: 500; white-space: nowrap; }
.mx-catstrip__item > span:nth-child(3) {
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / .6);
  border-radius: 999px;
  padding: .05rem .45rem;
  white-space: nowrap;
}

/* ── Footer: one language switcher ─────────────────────────────────────────
   The theme's own EN · SR switch sits in the footer bar; the localization
   app's select (footer_extra) printed a second one below it. */
footer .morph-lang-switcher { display: none !important; }

/* A card's link is its title (booking_marketplace/_experience_card.html): the link's box
   stretches over the whole card, so the card stays clickable while its link text is the
   title alone, and the focus ring outlines the card. */
.card-stretch { position: relative; }
.card-stretch .card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: .75rem; }
.card-stretch .card-link:focus-visible { outline: none; }
.card-stretch .card-link:focus-visible::after { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; }

/* ── Search bar (booking_marketplace/_search.html, montenegro/search.js) ─────
   One bar on the home hero, /bookings/ and /shop/. On a phone the hero keeps its
   card and the listings show a summary line that opens the form full screen.
   Without JavaScript every field shows and the form submits as it is. */
.mx-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mx-sb { position: relative; z-index: 30; text-align: left; }
.mx-sb--hero { max-width: 62rem; margin: 0 auto; }
.mx-sb--shop { max-width: 40rem; }
.mx-sb__form {
  display: flex; flex-direction: column; gap: .25rem;
  padding: .5rem; border-radius: 1rem;
  background: hsl(var(--background));
  box-shadow: var(--shadow-elevated);
}
.mx-sb--bar .mx-sb__form,
.mx-sb--shop .mx-sb__form { border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-soft); }
.mx-sb__panel-head { display: none; }
.mx-sb__field {
  position: relative; display: flex; align-items: center; gap: .75rem;
  min-width: 0; padding: .5rem .875rem; border-radius: .75rem;
  transition: background-color .15s ease;
}
.mx-sb__field:hover,
.mx-sb__field:focus-within { background: hsl(var(--muted) / .55); }
.mx-sb__field:has(.mx-sb__input:focus-visible) { box-shadow: inset 0 0 0 2px hsl(var(--ring)); }
.mx-sb__field > svg,
.mx-sb__summary > svg,
.mx-sb__submit > svg { flex: none; width: 1.25rem; height: 1.25rem; }
.mx-sb__field > svg { color: hsl(var(--muted-foreground)); }
.mx-sb__control { flex: 1; min-width: 0; }
.mx-sb__label {
  display: block; font-size: .75rem; font-weight: 600; line-height: 1rem;
  color: hsl(var(--foreground)); cursor: pointer;
}
.mx-sb__input {
  display: block; width: 100%; height: 1.5rem; margin: 0; padding: 0; border: 0;
  background: transparent; font: inherit; font-size: .9rem; color: hsl(var(--foreground));
  outline: none; -webkit-appearance: none; appearance: none;
}
select.mx-sb__input { cursor: pointer; text-overflow: ellipsis; }
.mx-sb__input::placeholder { color: hsl(var(--muted-foreground)); opacity: 1; }
.mx-sb__input::-webkit-search-cancel-button,
.mx-sb__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.mx-sb__clear,
.mx-sb__icon-btn {
  position: relative; z-index: 1; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: hsl(var(--muted-foreground)); cursor: pointer;
}
.mx-sb__clear:hover,
.mx-sb__icon-btn:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.mx-sb__clear svg,
.mx-sb__icon-btn svg { width: 1rem; height: 1rem; }
.mx-sb__clear[hidden] { display: none; }
.mx-sb__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 3rem; padding: 0 1.5rem; border: 0; border-radius: .75rem;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: background-color .15s ease;
}
.mx-sb__submit:hover { background: hsl(var(--primary) / .9); }
.mx-sb button:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

/* When: the native date input lies over its label, so a tap opens the system picker. */
.mx-sb__date { position: relative; }
.mx-sb__date-text {
  display: none; height: 1.5rem; line-height: 1.5rem; font-size: .9rem;
  color: hsl(var(--muted-foreground));
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.mx-sb__date-text.is-set { color: hsl(var(--foreground)); }
[data-enhanced] .mx-sb__date-text { display: block; }
[data-enhanced] .mx-sb__date-input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}

/* Suggestions */
.mx-sb__popup {
  position: absolute; top: calc(100% + .375rem); left: 0; z-index: 40;
  width: max(100%, 24rem); max-height: min(28rem, 70vh); overflow-y: auto;
  padding: .375rem; border: 1px solid hsl(var(--border)); border-radius: .875rem;
  background: hsl(var(--popover)); box-shadow: var(--shadow-elevated);
}
.mx-sb__popup[hidden] { display: none; }
.mx-sb__group + .mx-sb__group {
  margin-top: .25rem; padding-top: .25rem; border-top: 1px solid hsl(var(--border));
}
.mx-sb__group-label {
  padding: .375rem .625rem .25rem; font-size: .7rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: hsl(var(--muted-foreground));
}
.mx-sb__opt {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .625rem; border-radius: .625rem; cursor: pointer;
}
.mx-sb__opt:hover,
.mx-sb__opt[aria-selected="true"] { background: hsl(var(--muted)); }
.mx-sb__thumb {
  flex: none; width: 2.5rem; height: 2.5rem; overflow: hidden;
  border-radius: .5rem; background: hsl(var(--muted));
}
.mx-sb__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mx-sb__opt-body { display: flex; flex-direction: column; min-width: 0; }
.mx-sb__opt-name,
.mx-sb__opt-meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mx-sb__opt-name { font-size: .9rem; font-weight: 500; color: hsl(var(--foreground)); }
.mx-sb__opt-meta { font-size: .8rem; color: hsl(var(--muted-foreground)); }

.mx-sb__summary { display: none; }
@media (min-width: 768px) {
  .mx-sb__form { flex-direction: row; align-items: center; }
  .mx-sb__field { flex: 1 1 10rem; }
  .mx-sb__field--what { flex: 1.2 1 15rem; }
  .mx-sb__field + .mx-sb__field::before {
    content: ""; position: absolute; left: 0; top: 25%; width: 1px; height: 50%;
    background: hsl(var(--border));
  }
  .mx-sb__submit { flex: none; }
}
@media (max-width: 767px) {
  /* Category is desktop-only, unless one is chosen or the full-screen panel is open:
     a hidden select still submits, so a filter the visitor cannot see never rides along. */
  .mx-sb__field--category:not(.is-set) { display: none; }
  [data-enhanced].mx-sb.is-open .mx-sb__field--category { display: flex; }
  .mx-sb__popup { width: 100%; }
  .mx-sb__submit { width: 100%; }
  .mx-sb--hero .mx-sb__form { padding: .375rem; gap: 0; }
  .mx-sb--hero .mx-sb__field { padding: .4rem .75rem; }
  /* The listings: a summary line opens the form as a full-screen panel. */
  [data-enhanced].mx-sb--bar .mx-sb__summary,
  [data-enhanced].mx-sb--shop .mx-sb__summary {
    display: flex; align-items: center; gap: .75rem; width: 100%; height: 3.25rem;
    padding: 0 1rem; border: 1px solid hsl(var(--border)); border-radius: 999px;
    background: hsl(var(--background)); box-shadow: var(--shadow-soft);
    color: hsl(var(--foreground)); font: inherit; font-size: .9rem; font-weight: 500;
    text-align: left; cursor: pointer;
  }
  .mx-sb__summary > svg { color: hsl(var(--primary)); }
  .mx-sb__summary-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  [data-enhanced].mx-sb--bar .mx-sb__form,
  [data-enhanced].mx-sb--shop .mx-sb__form { display: none; }
  /* Above every fixed layer the page has: the chat bubble sits at 9997. */
  [data-enhanced].mx-sb.is-open { z-index: 10000; }
  [data-enhanced].mx-sb.is-open .mx-sb__form {
    display: flex; position: fixed; inset: 0; z-index: 90; gap: .5rem;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    border: 0; border-radius: 0; box-shadow: none; overflow-y: auto;
  }
  [data-enhanced].mx-sb.is-open .mx-sb__panel-head {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem;
  }
  .mx-sb__panel-title { font-size: 1.125rem; font-weight: 600; color: hsl(var(--foreground)); }
  [data-enhanced].mx-sb.is-open .mx-sb__field { border: 1px solid hsl(var(--border)); }
  [data-enhanced].mx-sb.is-open .mx-sb__submit { margin-top: auto; }
}
html.mx-sb-locked,
html.mx-sb-locked body { overflow: hidden; }

/* ── Search results (booking_marketplace/list.html) ─────────────────────── */
#results-heading { overflow-wrap: anywhere; }
.mx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.mx-chip {
  display: inline-flex; align-items: center; gap: .375rem; max-width: 100%;
  height: 2rem; padding: 0 .75rem; border: 1px solid hsl(var(--border)); border-radius: 999px;
  background: hsl(var(--card)); color: hsl(var(--foreground)); font-size: .85rem;
  text-decoration: none; transition: border-color .15s ease;
}
.mx-chip > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mx-chip > svg {
  flex: none; width: .875rem; height: .875rem; margin-right: -.25rem;
  color: hsl(var(--muted-foreground));
}
.mx-chip:hover,
.mx-chip:focus-visible { border-color: hsl(var(--primary)); }
.mx-chips__clear {
  font-size: .85rem; font-weight: 500; color: hsl(var(--primary));
  text-decoration: underline; text-underline-offset: 2px;
}
.mx-results__note { margin-top: .75rem; font-size: .875rem; color: hsl(var(--destructive)); }
.mx-results__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; margin: 1.5rem 0 1.25rem;
}
.mx-results__count { font-size: .875rem; color: hsl(var(--muted-foreground)); }
.mx-results__close { margin: 0 0 1rem; font-size: 1.25rem; font-weight: 600; color: hsl(var(--foreground)); }
.mx-empty { padding: 2.5rem 0 1rem; text-align: center; }
.mx-empty--close { padding: 1.5rem 0 .5rem; text-align: left; }
.mx-empty__title {
  font-size: 1.125rem; font-weight: 600; color: hsl(var(--foreground)); overflow-wrap: anywhere;
}
.mx-empty__hint { margin-top: 1rem; font-size: .875rem; color: hsl(var(--muted-foreground)); }
.mx-empty__cats { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .75rem; }
.mx-empty__clear { margin-top: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  .mx-chip { transition: none; }
  .mx-sb__field, .mx-sb__submit { transition: none; }
  .mx-catstrip__item { transition: none; }
}