/* Mielova search — a floating functional glass layer inspired by Apple's
   material hierarchy: content remains behind it, controls stay legible, and
   the sheet becomes more opaque when transparency is unavailable or reduced. */

:root { --ml-ui: "Alexandria", "Noto Sans Arabic", system-ui, sans-serif; }

.search-ov {
  isolation: isolate;
  align-content: start;
  overflow-y: auto;
  padding: clamp(92px, 13vh, 150px) 20px 48px;
  background: rgba(50, 42, 26, .24) !important;
  box-shadow: none !important;
  backdrop-filter: blur(20px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
}

.search-orb {
  position: fixed;
  z-index: -1;
  width: min(48vw, 660px);
  aspect-ratio: 1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(54px);
  opacity: .72;
  transform: scale(.84);
  transition: transform 700ms cubic-bezier(.16, 1, .3, 1), opacity 500ms ease;
}

.search-orb-one {
  top: -24%;
  right: -9%;
  background: rgba(239, 179, 48, .54);
}

.search-orb-two {
  bottom: -34%;
  left: -8%;
  background: rgba(70, 113, 79, .42);
}

.search-ov[data-open="true"] .search-orb { opacity: 1; transform: scale(1); }

.search-sheet {
  position: relative;
  width: min(900px, 100%);
  margin-inline: auto;
  padding: clamp(22px, 3vw, 34px);
  overflow: hidden;
  color: #292621;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(255, 252, 242, .62));
  border-radius: 28px;
  box-shadow:
    0 34px 90px rgba(49, 37, 18, .24),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(255, 255, 255, .42);
  backdrop-filter: blur(34px) saturate(175%);
  -webkit-backdrop-filter: blur(34px) saturate(175%);
  opacity: 0;
  transform: translateY(22px) scale(.975);
  transform-origin: center top;
  transition: opacity 220ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1);
}

.search-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 60% at 10% 0%, rgba(255, 255, 255, .74), transparent 58%),
    radial-gradient(55% 65% at 100% 100%, rgba(234, 178, 55, .13), transparent 68%);
}

.search-ov[data-open="true"] .search-sheet { opacity: 1; transform: none; }
.search-sheet > * { position: relative; }

.search-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 25px;
}

.search-sheet-head span {
  display: block;
  margin-bottom: 4px;
  color: #7b5b20;
  font: 600 .78rem/1.7 var(--ml-ui);
}

.search-sheet-head h2 {
  margin: 0;
  color: #292621;
  font: 700 clamp(1.45rem, 3vw, 2.15rem)/1.45 var(--ml-ui);
}

.search-ov .search-close {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  color: #39342d !important;
  background: rgba(255, 255, 255, .62) !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 1px rgba(82, 61, 30, .08) !important;
  transition: transform 180ms cubic-bezier(.16, 1, .3, 1), background-color 180ms ease;
}

.search-ov .search-close:hover { background: #fff !important; transform: rotate(4deg) scale(1.04); }
.search-ov .search-close:active { transform: scale(.96); }

.search-ov .search-form {
  min-height: 76px;
  gap: 13px;
  padding: 9px 10px 9px 19px;
  background: rgba(255, 255, 255, .72) !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow:
    0 7px 8px rgba(79, 57, 24, .07),
    inset 0 0 0 1px rgba(92, 65, 24, .10),
    inset 0 1px 0 rgba(255, 255, 255, .95) !important;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  transition: box-shadow 220ms ease, background-color 220ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1);
}

.search-ov .search-form:focus-within {
  background: rgba(255, 255, 255, .91) !important;
  box-shadow:
    0 8px 8px rgba(79, 57, 24, .09),
    0 0 0 4px rgba(233, 173, 50, .22),
    inset 0 0 0 1px rgba(116, 76, 13, .18) !important;
  transform: translateY(-1px);
}

.search-field-icon {
  width: 24px;
  height: 24px;
  color: #89621b;
}

.search-ov .search-form input {
  min-width: 0;
  min-height: 58px;
  padding: 6px 0 !important;
  color: #292621 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0;
  font: 600 clamp(1.05rem, 2.3vw, 1.55rem)/1.6 var(--ml-ui);
}

.search-ov .search-form input::placeholder { color: #756c61 !important; opacity: 1; }

.search-ov .search-form input:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

.search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 104px;
  min-height: 56px;
  padding-inline: 20px;
  color: #fff !important;
  background: #294a36 !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 5px 8px rgba(35, 68, 48, .17) !important;
  font: 700 .9rem/1 var(--ml-ui);
  cursor: pointer;
  transition: transform 180ms cubic-bezier(.16, 1, .3, 1), background-color 180ms ease, box-shadow 180ms ease;
}

.search-submit:hover {
  background: #203c2b !important;
  box-shadow: 0 7px 8px rgba(35, 68, 48, .22) !important;
  transform: translateY(-1px);
}
.search-submit:active { transform: translateY(0) scale(.98); }

.search-start {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  flex-wrap: wrap;
  margin-top: 19px;
}

.search-ov[data-typing="true"] .search-start { display: none; }
.search-hint { margin: 0; color: #625b52; font: 500 .8rem/1.8 var(--ml-ui); }

.search-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.search-quick a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: 15px;
  color: #4d463e;
  background: rgba(255, 255, 255, .54);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(82, 61, 30, .09);
  font: 600 .76rem/1 var(--ml-ui);
  transition: color 180ms ease, background-color 180ms ease, transform 180ms cubic-bezier(.16, 1, .3, 1);
}
.search-quick a:hover { color: #294a36; background: #fff; transform: translateY(-1px); }

.search-ov .suggest {
  display: grid;
  gap: 9px;
  max-height: min(48vh, 430px);
  margin-top: 17px;
  padding-inline: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(71, 56, 35, .28) transparent;
}

.search-ov .suggest:empty { display: none; }

.search-ov .suggest a {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-height: 78px;
  padding: 8px 10px;
  color: #292621;
  background: rgba(255, 255, 255, .55);
  border: 0;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(82, 61, 30, .07);
  transition: background-color 180ms ease, transform 180ms cubic-bezier(.16, 1, .3, 1), box-shadow 180ms ease;
  animation: search-result-in 260ms cubic-bezier(.16, 1, .3, 1) both;
}

.search-ov .suggest a:hover,
.search-ov .suggest a.on {
  color: #294a36;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 5px 8px rgba(69, 52, 26, .08), inset 0 0 0 1px rgba(41, 74, 54, .15);
  transform: translateY(-1px);
}

.search-ov .suggest-thumb {
  width: 62px;
  height: 62px;
  border-radius: 14px;
  background: rgba(246, 230, 181, .72);
}
.search-ov .suggest b { font: 700 .88rem/1.65 var(--ml-ui); }
.search-ov .suggest .price { margin-inline-start: 0; color: #5c4316; font-weight: 800; white-space: nowrap; }

.search-skeleton { display: grid; gap: 10px; }
.search-skeleton i {
  height: 78px;
  border-radius: 18px;
  background: linear-gradient(105deg, rgba(255,255,255,.38) 30%, rgba(255,255,255,.82) 48%, rgba(255,255,255,.38) 66%);
  background-size: 260% 100%;
  animation: search-shimmer 1.1s linear infinite;
}

@keyframes search-result-in { from { opacity: .35; transform: translateY(7px); } }
@keyframes search-shimmer { to { background-position: -160% 0; } }

@media (max-width: 640px) {
  .search-ov { align-content: end; padding: 16px 10px max(84px, env(safe-area-inset-bottom)); }
  .search-sheet {
    width: 100%;
    max-height: calc(100svh - 100px);
    padding: 20px 14px;
    overflow-y: auto;
    border-radius: 26px;
    transform: translateY(28px) scale(.985);
  }
  .search-sheet-head { margin-bottom: 17px; }
  .search-sheet-head h2 { font-size: 1.35rem; }
  .search-sheet-head span { font-size: .7rem; }
  .search-ov .search-close { width: 42px; height: 42px; flex-basis: 42px; }
  .search-ov .search-form { min-height: 64px; padding: 6px 7px 6px 13px; border-radius: 19px !important; }
  .search-ov .search-form input { min-height: 50px; font-size: .94rem; }
  .search-field-icon { width: 20px; height: 20px; }
  .search-submit { min-width: 54px; min-height: 50px; padding-inline: 16px; border-radius: 14px !important; }
  .search-submit span { display: none; }
  .search-start { align-items: flex-start; flex-direction: column; margin-top: 15px; }
  .search-quick { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
  .search-quick::-webkit-scrollbar { display: none; }
  .search-quick a { flex: 0 0 auto; }
  .search-ov .suggest { max-height: 43vh; }
  .search-ov .suggest a { grid-template-columns: 54px minmax(0, 1fr); min-height: 70px; }
  .search-ov .suggest-thumb { width: 54px; height: 54px; }
  .search-ov .suggest .price { grid-column: 2; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .search-ov { background: rgba(52, 45, 31, .76) !important; }
  .search-sheet { background: #fffdf7; }
  .search-ov .search-form,
  .search-ov .suggest a { background: #fff; }
}

@media (prefers-reduced-transparency: reduce) {
  .search-ov { background: rgba(52, 45, 31, .78) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .search-sheet { background: #fffdf7; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .search-ov .search-form,
  .search-ov .suggest a { background: #fff !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .search-sheet,
  .search-orb,
  .search-ov .search-form,
  .search-ov .search-close,
  .search-submit,
  .search-quick a,
  .search-ov .suggest a,
  .search-skeleton i { animation: none !important; transition: none !important; }
}