@charset "UTF-8";
/* ==========================================================================
   NEST — property catalog
   The reference puts its listings page on a light band with one horizontal
   filter row above the grid, and a sort row beneath it. Same here, in our
   palette and with the fields the brief specifies.
   ========================================================================== */

.cat__head { margin-block-end: clamp(1.8rem, 3vw, 2.6rem); }

/* --------------------------------------------------------------------------
   FILTER BAR
   -------------------------------------------------------------------------- */
.filt {
  display: grid;
  grid-template-columns: 1.6fr repeat(2, .8fr) 1.1fr 1fr .7fr auto;
  gap: clamp(.7rem, 1.3vw, 1.3rem);
  align-items: end;
  padding: clamp(1.1rem, 1.9vw, 1.6rem) clamp(1.1rem, 2vw, 1.8rem);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--bone-line);
  border-end-end-radius: 22px;
}

.filt__field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; position: relative; }

.filt__label {
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--bone-mute);
}

.filt select,
.filt input[type="text"] {
  width: 100%;
  padding: .62rem .7rem;
  font: inherit;
  font-size: .95rem;
  color: var(--bone-ink);
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--bone-line);
  border-radius: 0;
  transition: border-color var(--dur) var(--ease-inout);
}
.filt select { appearance: none; padding-inline-end: 1.4rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7178' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left .35rem center;
}
.filt select:focus,
.filt input[type="text"]:focus { outline: 0; border-block-end-color: var(--blue-500); }

/* --- price: fields + slider --- */
.filt__range { display: flex; align-items: center; gap: .4rem; }
.filt__num { text-align: center; direction: ltr; }
.filt__dash { color: var(--bone-mute); }

.rng { position: relative; height: 22px; margin-block-start: .2rem; }
.rng__track {
  position: absolute; inset-block-start: 9px; inset-inline: 0;
  height: 3px; background: var(--bone-line); border-radius: 2px;
  display: block;
}
.rng__fill {
  position: absolute; inset-block: 0;
  background: linear-gradient(104deg, var(--blue-400), var(--blue-600));
  border-radius: 2px;
}
.rng__in {
  position: absolute; inset-block-start: 0; inset-inline: 0;
  width: 100%; height: 22px;
  margin: 0; padding: 0;
  background: none; appearance: none;
  pointer-events: none;
}
.rng__in::-webkit-slider-thumb {
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 2px var(--blue-500), 0 2px 6px rgba(19,37,58,.25);
  cursor: grab; pointer-events: auto;
}
.rng__in::-moz-range-thumb {
  width: 16px; height: 16px; border: 0;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 2px var(--blue-500), 0 2px 6px rgba(19,37,58,.25);
  cursor: grab; pointer-events: auto;
}

/* --- neighbourhood picker --- */
.hood { position: relative; }
.hood__clear {
  position: absolute; inset-block-start: .3rem; inset-inline-end: .1rem;
  width: 22px; height: 22px;
  font-size: 1.15rem; line-height: 1;
  color: var(--bone-mute);
}
.hood__clear:hover { color: var(--bone-ink); }

.hood__list {
  position: absolute; z-index: 40;
  inset-block-start: calc(100% + .4rem); inset-inline: 0;
  min-width: 240px;
  max-height: 320px; overflow-y: auto;
  background: var(--white);
  box-shadow: 0 18px 44px rgba(19,37,58,.16), inset 0 0 0 1px var(--bone-line);
  border-end-end-radius: 16px;
  padding: .3rem 0;
}
.hood__opt {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  width: 100%;
  padding: .58rem .95rem;
  line-height: 1.3;
  font-size: .94rem;
  text-align: start;
  color: var(--bone-ink);
  transition: background var(--dur-fast) var(--ease-inout);
}
.hood__opt:hover:not(:disabled) { background: rgba(44,90,144,.09); }
.hood__count { font-size: .76rem; color: var(--bone-mute); white-space: nowrap; flex: 0 0 auto; }

/* A neighbourhood with nothing in it is greyed and inert — the visitor sees
   it exists and sees at once that it is empty, instead of clicking through to
   a blank page. This grey is derived from a live count, never set by hand. */
.hood__opt.is-empty {
  color: #aab0b7;
  cursor: not-allowed;
}
.hood__opt.is-empty .hood__count { color: #bfc4ca; }
.hood__list.is-none::after {
  content: "לא נמצאה שכונה בשם הזה";
  display: block; padding: .8rem .95rem;
  font-size: .9rem; color: var(--bone-mute);
}

/* --- street autocomplete --- */
.ac { position: relative; }
.ac__list {
  position: absolute; z-index: 40;
  inset-block-start: calc(100% + .4rem); inset-inline: 0;
  background: var(--white);
  box-shadow: 0 18px 44px rgba(19,37,58,.16), inset 0 0 0 1px var(--bone-line);
  border-end-end-radius: 16px;
  padding: .3rem 0;
  max-height: 240px; overflow-y: auto;
}
.ac__opt {
  display: block; width: 100%;
  padding: .55rem .95rem;
  text-align: start; font-size: .94rem;
  color: var(--bone-ink);
}
.ac__opt:hover { background: rgba(44,90,144,.09); }

.filt__go { display: flex; flex-direction: column; align-items: stretch; gap: .4rem; }
.filt__go .btn { padding-block: .78rem; justify-content: center; gap: .7rem; }
.filt__reset { font-size: .82rem; color: var(--bone-mute); text-align: center; }
.filt__reset:hover { color: var(--blue-500); }

@media (max-width: 1280px) { .filt { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } .filt__go { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; align-items: center; gap: 1rem; } }
@media (max-width: 700px)  { .filt { grid-template-columns: 1fr 1fr; } .filt__field--price, .filt__field--hood, .filt__field--street { grid-column: 1 / -1; } }

/* --------------------------------------------------------------------------
   RESULT BAR
   -------------------------------------------------------------------------- */
.cat__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-block: clamp(1.4rem, 2.4vw, 2rem) clamp(1rem, 1.8vw, 1.4rem);
}
.cat__count {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  color: var(--bone-ink);
}
.cat__count span { color: var(--bone-mute); font-size: .8em; }
.cat__sort { display: flex; align-items: center; gap: .6rem; }
.cat__sort select {
  padding: .45rem 1.4rem .45rem .5rem;
  font: inherit; font-size: .92rem;
  color: var(--bone-ink);
  background: transparent; border: 0;
  border-block-end: 1px solid var(--bone-line);
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7178' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left .2rem center;
}

/* --------------------------------------------------------------------------
   RESULTS
   -------------------------------------------------------------------------- */
.cards--cat {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(260px, 26vw, 400px);
}
.cards--cat .card:nth-child(n) { grid-column: span 1; }

/* One or two results fill the row instead of leaving a sparse grid — a
   mandatory rule in the brief. */
.cards--sparse { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); grid-auto-rows: clamp(320px, 34vw, 500px); }

@media (max-width: 1100px) { .cards--cat { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .cards--cat { grid-template-columns: 1fr; } }

.cat__empty { padding-block: clamp(2.5rem, 6vw, 5rem); max-width: 56ch; }

/* --------------------------------------------------------------------------
   PAGER
   -------------------------------------------------------------------------- */
.cat__pager, .pagination { margin-block-start: clamp(2rem, 4vw, 3.2rem); }
.cat__pager .nav-links, .pagination .nav-links { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.cat__pager a, .cat__pager span,
.pagination a, .pagination span {
  display: grid; place-items: center;
  min-width: 42px; height: 42px; padding-inline: .7rem;
  font-family: var(--font-display);
  color: var(--bone-ink);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--bone-line);
  border-end-end-radius: 12px;
  transition: background var(--dur) var(--ease-inout), color var(--dur) var(--ease-inout);
}
.cat__pager a:hover, .pagination a:hover { background: rgba(44,90,144,.1); }
.cat__pager .current, .pagination .current {
  background: linear-gradient(104deg, #4d8ad0, var(--blue-600));
  color: var(--white); box-shadow: none;
}

/* --------------------------------------------------------------------------
   ACTIVE FILTER CHIPS
   Replaces the old "ניקוי" link, which sat next to the search button whether
   or not there was anything to clear. A chip shows what is actually filtering
   the list and peels that one filter off; the last chip clears the lot.
   -------------------------------------------------------------------------- */
.chips {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .45rem;
  margin-block-start: clamp(.9rem, 1.6vw, 1.2rem);
}
.chips__k {
  font-size: .76rem; letter-spacing: .12em;
  color: var(--bone-mute);
  margin-inline-end: .3rem;
}

.chip {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .8rem .42rem .6rem;
  font-size: .88rem;
  color: var(--bone-ink);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--bone-line);
  border-end-end-radius: 12px;
  transition: color var(--dur) var(--ease-inout), box-shadow var(--dur) var(--ease-inout);
}
/* the brand's diagonal sweep, at chip scale */
.chip::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(104deg, #4d8ad0, var(--blue-600));
  transform: translateX(-110%) skewX(-18deg);
  transition: transform var(--dur) var(--ease-out);
}
.chip:hover, .chip:focus-visible { color: var(--white); box-shadow: none; }
.chip:hover::before, .chip:focus-visible::before { transform: translateX(0) skewX(-18deg); }

.chip__x {
  display: grid; place-items: center;
  width: 15px; height: 15px;
  opacity: .55;
  transition: opacity var(--dur-fast) var(--ease-inout), transform var(--dur) var(--ease-out);
}
.chip__x svg { width: 100%; height: 100%; }
.chip:hover .chip__x { opacity: 1; transform: rotate(90deg); }

.chip--clear {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(44,90,144,.35);
  color: var(--blue-500);
}
.chip--clear:hover .chip__x { transform: rotate(-180deg); }

/* --------------------------------------------------------------------------
   NSEL — the select, in our own clothes
   The native <select> stays in the form and keeps working; this rides on top
   of it so the open list is ours instead of the operating system's.
   -------------------------------------------------------------------------- */
.nsel { position: relative; }
.nsel__native {
  position: absolute; opacity: 0; pointer-events: none;
  width: 100%; height: 100%; inset: 0;
}

.nsel__btn {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  width: 100%;
  padding: .62rem .7rem;
  font: inherit; font-size: .95rem;
  text-align: start;
  color: var(--bone-ink);
  background: transparent;
  border-block-end: 1px solid var(--bone-line);
  transition: border-color var(--dur) var(--ease-inout), color var(--dur) var(--ease-inout);
}
.nsel__btn:hover { border-block-end-color: var(--blue-400); }
.nsel.is-open .nsel__btn { border-block-end-color: var(--blue-500); color: var(--blue-500); }
.nsel__val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nsel__caret {
  width: 10px; height: 6px; flex: 0 0 auto;
  color: var(--bone-mute);
  transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-inout);
}
.nsel.is-open .nsel__caret { transform: rotate(180deg); color: var(--blue-500); }

.nsel__list {
  position: absolute; z-index: 45;
  inset-block-start: calc(100% + .4rem); inset-inline: 0;
  min-width: 100%;
  padding: .3rem 0;
  background: var(--white);
  box-shadow: 0 18px 44px rgba(19,37,58,.18), inset 0 0 0 1px var(--bone-line);
  border-end-end-radius: 16px;
  max-height: 300px; overflow-y: auto;
  /* wipes down from its own top edge, like the header dropdown */
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition: clip-path var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-inout);
}
.nsel.is-open .nsel__list { clip-path: inset(0 0 0 0); opacity: 1; }

.nsel__opt {
  position: relative;
  display: flex; align-items: center; gap: .5rem;
  width: 100%;
  padding: .58rem .95rem;
  font-size: .94rem;
  text-align: start;
  color: var(--bone-ink);
  transition: background var(--dur-fast) var(--ease-inout), color var(--dur-fast) var(--ease-inout);
}
.nsel__opt::before {
  content: "";
  width: 0; height: 1px;
  background: var(--blue-400);
  transition: width var(--dur) var(--ease-out);
}
.nsel__opt:hover, .nsel__opt.is-active { background: rgba(44,90,144,.08); }
.nsel__opt:hover::before, .nsel__opt.is-active::before { width: .6rem; }
.nsel__opt.is-on { color: var(--blue-500); }
.nsel__opt.is-on::before { width: .6rem; background: var(--blue-500); }

/* on the result bar the control is small and sits on the bone band */
.cat__sort .nsel { min-width: 168px; }
.cat__sort .nsel__btn { padding: .45rem .5rem; font-size: .92rem; }

@media (prefers-reduced-motion: reduce) {
  .nsel__list, .nsel__opt, .nsel__opt::before, .chip::before, .chip__x { transition-duration: .01ms; }
}

/* --------------------------------------------------------------------------
   NEIGHBOURHOOD PICKER — matching feedback while typing
   -------------------------------------------------------------------------- */
.hood__hint {
  display: block;
  padding: .5rem .95rem .55rem;
  font-size: .74rem; letter-spacing: .08em;
  color: var(--bone-mute);
  border-block-end: 1px solid var(--bone-line);
  margin-block-end: .25rem;
}
/* the part of the name that matched what was typed */
.hood__opt mark {
  background: none;
  color: var(--blue-500);
  font-weight: 500;
}
.hood__opt.is-active { background: rgba(44,90,144,.09); }