/**
 * Hero search panel.
 *
 * One compact row of cells over the footage: five equal dropdowns (project,
 * bedrooms, floor, area, price) and an action cell holding the currency switch
 * and the submit, split by full-height hairlines. Each cell is a label over
 * its current value; the pickers open a list, the ranges a panel with a
 * "from" and a "to" field.
 *
 * Every colour here is translucent white on the glass; the brand layer
 * re-points the accents (fill, active currency, submit) in deka-brand.css.
 */

.deka-search {
  position: relative;
  isolation: isolate;
  /* No overflow clipping: the dropdowns open out of the bar. */
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: var(--deka-radius-sm);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%), 0 24px 60px rgb(0 0 0 / 22%);
  color: var(--deka-white);
  font-family: var(--deka-font-body);
}

/* The frosted glass is a layer of its own. A backdrop-filter on the bar
   itself would make the bar the backdrop of everything inside it, and the
   dropdowns' own frosting would blur only the bar, not the footage. */
.deka-search::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgb(0 0 0 / 38%);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  pointer-events: none;
}

/* The dropdowns: frosted like the bar, darker, with a thin scrollbar. */
.deka-search__menu,
.deka-search__panel {
  background: rgb(23 22 23 / 74%);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
}

.deka-search__menu,
.deka-search__panel,
.deka-search__list {
  scrollbar-width: thin;
  scrollbar-color: var(--dk-cashmere, rgb(255 255 255 / 40%)) transparent;
}

/* Safari, which has no scrollbar-color (browsers that do ignore these). */
.deka-search__menu::-webkit-scrollbar,
.deka-search__panel::-webkit-scrollbar,
.deka-search__list::-webkit-scrollbar { width: 3px; height: 3px; }

.deka-search__menu::-webkit-scrollbar-track,
.deka-search__panel::-webkit-scrollbar-track,
.deka-search__list::-webkit-scrollbar-track { background: transparent; }

.deka-search__menu::-webkit-scrollbar-thumb,
.deka-search__panel::-webkit-scrollbar-thumb,
.deka-search__list::-webkit-scrollbar-thumb { background: var(--dk-cashmere, rgb(255 255 255 / 40%)); }

.deka-search__grid {
  display: grid;
  /* project, bedrooms, floor, area, price — equal — then currency + submit */
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  align-items: stretch;
  min-height: 4.5rem; /* 72 */
}

.deka-search__field {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.875rem 1.25rem;
  transition: background-color var(--deka-duration-base) var(--deka-ease-out);
}

/* A picker or range cell opens from anywhere on it, label included: the
   trigger's hit area is stretched over the whole cell. */
.deka-search__field:is(.deka-search__field--picker, .deka-search__field--range) { cursor: pointer; }

.deka-search__dropdown-trigger::before {
  content: '';
  position: absolute;
  inset: 0;
}

.deka-search__field + .deka-search__field {
  border-inline-start: 1px solid rgb(255 255 255 / 12%);
}

/* The cell being edited gets a line along its foot. */
.deka-search__field::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--deka-white);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--deka-duration-base) var(--deka-ease-out);
  pointer-events: none;
}

.deka-search__field:hover { background: rgb(255 255 255 / 4%); }
.deka-search__field:focus-within { background: rgb(255 255 255 / 7%); }
.deka-search__field:focus-within::after { transform: scaleX(1); }

.deka-search__field.is-disabled { opacity: 0.45; }

.deka-search__label {
  font-family: var(--deka-font-body);
  font-size: 0.75rem; /* 12 */
  font-weight: var(--deka-weight-medium);
  line-height: 1.2;
  white-space: nowrap;
  color: rgb(255 255 255 / 72%);
}

/* ==========================================================================
   Pickers: project, bedrooms
   ========================================================================== */

.deka-search__dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--deka-white);
  font-family: inherit;
  font-size: 0.9375rem; /* 15 */
  font-weight: var(--deka-weight-regular);
  line-height: 1.375rem;
  text-align: start;
  cursor: pointer;
}

/* No underline of its own: like the range cells, the cell's foot line marks
   focus and an open menu. */
.deka-search__dropdown-trigger:focus-visible { outline: 0; }
.deka-search__field:has(.deka-search__dropdown-trigger[aria-expanded='true'])::after { transform: scaleX(1); }

.deka-search__dropdown-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deka-search__chevron {
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.4375rem;
  opacity: 0.8;
  transition: transform var(--deka-duration-base) var(--deka-ease-out);
}

.deka-search__dropdown-trigger[aria-expanded='true'] .deka-search__chevron { transform: rotate(180deg); }

/* Positioned against the cell, not the trigger, so it spans the cell. */
.deka-search__menu {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: -1px;
  z-index: var(--deka-z-dropdown);
  width: max(calc(100% + 2px), 15rem);
  max-height: 17.5rem; /* smart-search.js lowers it when the screen has less room */
  margin: 0;
  padding: 0.375rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: var(--deka-radius-sm);
  box-shadow: 0 18px 48px rgb(0 0 0 / 35%);
  color: var(--deka-white);
}

.deka-search__menu.is-up {
  top: auto;
  bottom: calc(100% + 0.375rem);
}

.deka-search__menu:not([hidden]) {
  animation: deka-search-menu var(--deka-duration-base) var(--deka-ease-out);
}

.deka-search__menu.is-up:not([hidden]) {
  animation-name: deka-search-menu-up;
}

@keyframes deka-search-menu {
  from { opacity: 0; transform: translateY(-6px); }
}

@keyframes deka-search-menu-up {
  from { opacity: 0; transform: translateY(6px); }
}

.deka-search__menu:focus { outline: 0; }

.deka-search__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4375rem 0.75rem;
  border-radius: var(--deka-radius-2xs);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(255 255 255 / 82%);
  cursor: pointer;
  transition: background-color var(--deka-duration-fast) var(--deka-ease-out),
              color var(--deka-duration-fast) var(--deka-ease-out);
}

.deka-search__option:hover,
.deka-search__option.is-active {
  background: rgb(255 255 255 / 9%);
  color: var(--deka-white);
}

.deka-search__option[aria-selected='true'] {
  color: var(--deka-white);
  font-weight: var(--deka-weight-medium);
}

/* A small mark before the chosen project. */
.deka-search__option-name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.deka-search__option-name::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--deka-duration-fast) var(--deka-ease-out);
}

.deka-search__option[aria-selected='true'] .deka-search__option-name::before { opacity: 1; }

.deka-search__option-count {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: rgb(255 255 255 / 50%);
}

/* ==========================================================================
   Range panels: floor, area, price
   ========================================================================== */

/* Opens like the pickers' menus — under the cell, or over it (.is-up) — and
   is wider than a narrow cell: a "from" and a "to" field side by side, the
   list of round values under the active one, then reset and save. .is-end
   lines it up with the cell's far edge where it would run off the screen. */
.deka-search__panel {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: -1px;
  z-index: var(--deka-z-dropdown);
  width: max(calc(100% + 2px), 23rem);
  max-width: calc(100vw - 2rem);
  padding: 0.625rem;
  overflow-y: auto; /* smart-search.js caps the height where the screen is short */
  overscroll-behavior: contain;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: var(--deka-radius-sm);
  box-shadow: 0 18px 48px rgb(0 0 0 / 35%);
  color: var(--deka-white);
}

.deka-search__panel.is-up {
  top: auto;
  bottom: calc(100% + 0.375rem);
}

.deka-search__panel.is-end {
  left: auto;
  right: -1px;
}

.deka-search__panel:not([hidden]) {
  animation: deka-search-menu var(--deka-duration-base) var(--deka-ease-out);
}

.deka-search__panel.is-up:not([hidden]) {
  animation-name: deka-search-menu-up;
}

.deka-search__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 0.375rem;
}

.deka-search__pair-dash {
  line-height: 2.5rem;
  color: rgb(255 255 255 / 45%);
}

.deka-search__combo { min-width: 0; }

.deka-search__input {
  display: block;
  width: 100%;
  height: 2.5rem;
  margin: 0;
  padding: 0 0.625rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 0;
  background: rgb(255 255 255 / 6%);
  color: var(--deka-white);
  font-family: inherit;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.25rem;
  outline: 0;
  transition: border-color var(--deka-duration-fast) var(--deka-ease-out),
              background-color var(--deka-duration-fast) var(--deka-ease-out);
  -webkit-appearance: none;
  appearance: none;
}

.deka-search__input::placeholder {
  color: rgb(255 255 255 / 45%);
  font-size: 0.8125rem;
}

/* The unit ($, ₾, m²) inside the field's right edge. */
.deka-search__control {
  position: relative;
  display: block;
}

.deka-search__control--unit .deka-search__input { padding-right: 2rem; }

.deka-search__unit {
  position: absolute;
  top: 50%;
  right: 0.625rem;
  transform: translateY(-50%);
  font-size: 0.875rem;
  line-height: 1;
  color: rgb(255 255 255 / 55%);
  pointer-events: none;
}

.deka-search__combo.is-active .deka-search__unit { color: var(--dk-cashmere, var(--deka-white)); }

.deka-search__combo.is-active .deka-search__input {
  border-color: var(--dk-cashmere, var(--deka-white));
  background: rgb(255 255 255 / 9%);
}

/* About five values in view; the rest scroll. */
.deka-search__list {
  max-height: 9.5rem;
  margin: 0.1875rem 0 0;
  padding: 0.125rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  background: rgb(255 255 255 / 4%);
}

.deka-search__list .deka-search__option {
  padding: 0.3125rem 0.625rem;
  font-variant-numeric: tabular-nums;
}

.deka-search__panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}

.deka-search__panel-reset,
.deka-search__panel-save {
  margin: 0;
  border: 0;
  border-radius: 0;
  font-family: var(--dk-mono, inherit);
  font-size: 0.75rem;
  font-weight: var(--deka-weight-medium);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--deka-duration-fast) var(--deka-ease-out),
              color var(--deka-duration-fast) var(--deka-ease-out);
}

.deka-search__panel-reset {
  padding: 0.5rem 0;
  background: none;
  color: rgb(255 255 255 / 55%);
}

.deka-search__panel-reset:hover { color: var(--deka-white); }

.deka-search__panel-save {
  padding: 0.625rem 1.25rem;
  background: var(--dk-cashmere, var(--deka-white));
  color: var(--dk-black, #141414);
}

.deka-search__panel-save:hover { background: var(--dk-off, var(--deka-white)); }

.deka-search__panel-reset:focus-visible,
.deka-search__panel-save:focus-visible {
  outline: 2px solid var(--dk-cashmere, var(--deka-white));
  outline-offset: 2px;
}

/* ==========================================================================
   Action cell: currency switch and submit
   ========================================================================== */

/* Doubled class: the breakpoints below re-pad every field. */
.deka-search__field.deka-search__field--action {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
}

.deka-search__field--action::after { display: none; }

.deka-search__field--action:hover,
.deka-search__field--action:focus-within { background: none; }

.deka-search__currency {
  display: inline-flex;
  align-self: center;
  flex-shrink: 0;
  margin-inline: 0.875rem;
  padding: 2px;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: var(--deka-radius-pill);
}

.deka-search__currency-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;  /* 28 */
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--deka-radius-pill);
  background: transparent;
  color: rgb(255 255 255 / 72%);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: var(--deka-weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--deka-duration-base) var(--deka-ease-out),
              color var(--deka-duration-base) var(--deka-ease-out);
}

.deka-search__currency-btn:hover { color: var(--deka-white); }

.deka-search__currency-btn.is-active {
  background: var(--deka-white);
  color: var(--deka-oxblood-900);
}

.deka-search__currency-btn:focus-visible {
  outline: 2px solid var(--deka-white);
  outline-offset: 1px;
}

.deka-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 100%;
  margin: 0;
  padding: 0 2rem;
  border: 0;
  border-radius: 0 var(--deka-radius-sm) var(--deka-radius-sm) 0;
  background: var(--deka-oxblood-700);
  color: var(--deka-white);
  font-family: var(--deka-font-body);
  font-size: 0.875rem;
  font-weight: var(--deka-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--deka-duration-base) var(--deka-ease-out),
    color var(--deka-duration-base) var(--deka-ease-out);
}

.deka-search__submit:hover { background: var(--deka-oxblood-600); }

.deka-search__submit:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -5px;
}

.deka-search__submit-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform var(--deka-duration-base) var(--deka-ease-out);
}

.deka-search__submit:hover .deka-search__submit-icon { transform: translateX(3px); }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Below 1280px: three cells to a row — project, bedrooms, floor over area,
   price and the actions. */
@media (max-width: 80rem) {
  .deka-search__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .deka-search__field:nth-child(3n + 1) { border-inline-start: 0; }
  .deka-search__field:nth-child(-n + 3) { border-bottom: 1px solid rgb(255 255 255 / 12%); }

  .deka-search__submit {
    flex: 1 1 auto;
    min-height: 3.5rem;
    border-radius: 0 0 var(--deka-radius-sm) 0;
  }
}

/* Phones: the project across the top, then bedrooms and the ranges two to a
   row with their bounds under the label, the actions across the foot. */
@media (max-width: 47.9375rem) {
  .deka-search__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .deka-search__field {
    gap: 0.4375rem;
    padding: 0.8125rem 1rem;
    border-bottom: 0;
  }

  .deka-search__field + .deka-search__field,
  .deka-search__field:nth-child(3n + 1) {
    border-inline-start: 0;
    border-top: 1px solid rgb(255 255 255 / 12%);
  }

  .deka-search__field:nth-child(-n + 3) { border-bottom: 0; }
  .deka-search__field:first-child { border-top: 0; }

  .deka-search__field--project,
  .deka-search__field--action { grid-column: 1 / -1; }

  /* Right-hand column: floor and price, beside bedrooms and area. */
  .deka-search__field--range:nth-child(odd) { border-inline-start: 1px solid rgb(255 255 255 / 12%); }

  .deka-search__currency { margin-inline: 0.875rem; }

  .deka-search__submit {
    min-height: 3.125rem;
    border-radius: 0 0 var(--deka-radius-sm) 0;
  }

  .deka-search__menu { width: max(calc(100% + 2px), 12rem); }
}

/* Backdrop blur is expensive on low-end devices and unsupported in a few
   browsers; fall back to a solid translucent panel. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .deka-search::before { background: rgb(20 20 20 / 82%); }
  .deka-search__menu,
  .deka-search__panel { background: rgb(23 22 23 / 96%); }
}

@media (prefers-reduced-motion: reduce) {
  .deka-search__menu:not([hidden]),
  .deka-search__panel:not([hidden]) { animation: none; }
}