/* Matimim — Advanced Search widget styles */

.masw-root {
  /* ── Theming tokens (overridable via Elementor Style controls) ── */
  --masw-bg: #ffffff;
  --masw-panel-bg: #ffffff;
  --masw-text: #020101;
  --masw-icon: #dd3333;
  --masw-border: #e6e3df;
  --masw-hover-bg: #f6f3ef;
  --masw-highlight: #dd3333;
  --masw-radius: 6px;
  --masw-icon-size: 35px;
  --masw-anim: 0.22s;
  --masw-fixed-width: 320px;
  --masw-field-h: 46px;

  /* ── Internal design tokens ── */
  --masw-shadow: 0 18px 48px -16px rgba(2, 1, 1, 0.28), 0 6px 16px -8px rgba(2, 1, 1, 0.14);
  --masw-ring: rgba(221, 51, 51, 0.22);
  --masw-scrim: rgba(255, 255, 255, 0.72);
  --masw-modal-top: 12vh;
  --masw-modal-field-h: 56px;
  --masw-modal-gap: 10px;
  --masw-modal-width: min(600px, 92vw);
  --masw-mobile-field-h: 60px;

  position: relative;
  direction: rtl;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── The search bar (input row) ── */
.masw-form {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--masw-bg);
  border: 1px solid var(--masw-border);
  border-radius: var(--masw-radius);
  min-height: var(--masw-field-h);
  padding: 0 12px;
  box-sizing: border-box;
  transition: width var(--masw-anim) ease,
              border-width var(--masw-anim) ease,
              border-color var(--masw-anim) ease,
              box-shadow var(--masw-anim) ease;
}

/* Focus ring on the whole bar when the input is focused (a11y). */
.masw-root:not([data-mode="modal"]) .masw-form:focus-within {
  border-color: var(--masw-highlight);
  box-shadow: 0 0 0 3px var(--masw-ring);
}

.masw-toggle,
.masw-submit {
  background: none;
  border: 0;
  color: var(--masw-icon);
  /* Icon never taller than the row, so shrinking the field height stays clean. */
  width: min(var(--masw-icon-size), calc(var(--masw-field-h) - 8px));
  height: min(var(--masw-icon-size), calc(var(--masw-field-h) - 8px));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: 0 0 auto;
  transition: color var(--masw-anim) ease, transform var(--masw-anim) ease;
}

.masw-toggle:hover,
.masw-submit:hover {
  color: var(--masw-highlight);
}

.masw-toggle:active,
.masw-submit:active {
  transform: scale(0.92);
}

.masw-toggle:focus-visible,
.masw-submit:focus-visible {
  outline: 2px solid var(--masw-highlight);
  outline-offset: 3px;
  border-radius: 6px;
}

.masw-toggle svg,
.masw-submit svg {
  width: 100%;
  height: 100%;
}

/* Toggle shows the search icon by default; the close (X) icon only appears
   when the search is open as a floating overlay (modal / mobile full-screen). */
.masw-toggle .masw-ico-close {
  display: none;
}

.masw-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--masw-text);
  outline: none;
  font: inherit;
  line-height: 1.5;
  /* Font auto-adapts to the field height (clamped for readability); an explicit
     Typography control value overrides this via Elementor's inline style. */
  font-size: clamp(12px, calc(var(--masw-field-h) * 0.38), 20px);
}

.masw-input::placeholder {
  color: var(--masw-text);
  opacity: 0.45;
}

/* ── The results panel (floating surface) ── */
.masw-panel {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 8px);
  width: 100%;
  min-width: 280px;
  background: var(--masw-panel-bg, #ffffff);
  border: 1px solid var(--masw-border);
  border-radius: var(--masw-radius);
  box-shadow: var(--masw-shadow);
  z-index: 9999;
  overflow: hidden auto;
  overscroll-behavior: contain;
  max-height: 60vh;
  scrollbar-width: thin;
  scrollbar-color: var(--masw-border) transparent;
}

.masw-panel::-webkit-scrollbar {
  width: 9px;
}

.masw-panel::-webkit-scrollbar-thumb {
  background: var(--masw-border);
  border-radius: 9px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.masw-listbox {
  list-style: none;
  margin: 0;
  padding: 6px;
}

.masw-group-label {
  padding: 12px 12px 6px;
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--masw-text);
  opacity: 0.5;
}

.masw-group-label:first-child {
  padding-top: 6px;
}

.masw-option,
.masw-empty {
  padding: 10px 12px;
  border-radius: 8px;
  line-height: 1.5;
  color: var(--masw-text);
  cursor: pointer;
  transition: background var(--masw-anim) ease, color var(--masw-anim) ease;
}

.masw-option mark {
  background: transparent;
  color: var(--masw-highlight);
  font-weight: 700;
}

.masw-option.masw-active,
.masw-option:hover {
  background: var(--masw-hover-bg);
}

/* "View all results" — a full-width footer action, brand-accented. */
.masw-view-all {
  margin-top: 4px;
  padding: 12px;
  border-top: 1px solid var(--masw-border);
  color: var(--masw-highlight);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--masw-anim) ease;
}

.masw-view-all.masw-active,
.masw-view-all:hover {
  background: var(--masw-hover-bg);
}

.masw-empty {
  opacity: 0.6;
  cursor: default;
}

/* ── Display mode: expand (icon → field grows inline) ── */
.masw-root[data-mode="expand"] .masw-form { width: 0; border-width: 0; padding-inline: 0; overflow: hidden; }
.masw-root[data-mode="expand"].masw-open .masw-form { width: 260px; border-width: 1px; padding-inline: 12px; }
.masw-root[data-mode="expand"] .masw-input { opacity: 0; width: 0; }
.masw-root[data-mode="expand"].masw-open .masw-input { opacity: 1; width: auto; }
.masw-root[data-mode="expand"] .masw-submit { display: none; }

/* ── Display mode: modal (icon → centered floating card) ── */
.masw-root[data-mode="modal"] .masw-form { display: none; }
.masw-root[data-mode="modal"].masw-open .masw-form {
  display: flex;
  position: fixed;
  top: var(--masw-modal-top);
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: var(--masw-modal-width);
  height: var(--masw-modal-field-h);
  padding: 0 16px;
  border-color: var(--masw-border);
  box-shadow: var(--masw-shadow);
  z-index: 10000;
}
.masw-root[data-mode="modal"].masw-open .masw-panel {
  position: fixed;
  top: calc(var(--masw-modal-top) + var(--masw-modal-field-h) + var(--masw-modal-gap));
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: var(--masw-modal-width);
  max-height: calc(88vh - var(--masw-modal-top) - var(--masw-modal-field-h) - var(--masw-modal-gap));
  z-index: 10000;
}
.masw-root[data-mode="modal"].masw-open::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--masw-scrim);
  -webkit-backdrop-filter: blur(5px) saturate(1.05);
  backdrop-filter: blur(5px) saturate(1.05);
  z-index: 9998;
}

/* ── Display mode: fixed (always-visible field) ── */
.masw-root[data-mode="fixed"] .masw-toggle { display: none; }
.masw-root[data-mode="fixed"] .masw-form { width: var(--masw-fixed-width); }
.masw-root[data-mode="fixed"] .masw-input { opacity: 1; width: auto; }

/* ── Display mode: fixed_mobile (always-visible field at EVERY width, incl. mobile —
   does not collapse to the icon/overlay on small screens like plain "fixed" does) ── */
.masw-root[data-mode="fixed_mobile"] .masw-toggle { display: none; }
.masw-root[data-mode="fixed_mobile"] .masw-form { width: var(--masw-fixed-width); max-width: 100%; }
.masw-root[data-mode="fixed_mobile"] .masw-input { opacity: 1; width: auto; }

/* ── Close (X) button while open in an overlay (modal / mobile full-screen) ──
   The toggle turns into a floating circular close button and its icon swaps
   from the magnifier to an X. z-index sits above the form/panel (10000). */
.masw-root[data-mode="modal"].masw-open .masw-toggle,
.masw-root.masw-mobile-full .masw-toggle {
  display: flex;
  position: fixed;
  top: 14px;
  inset-inline-end: 14px;
  width: 44px;
  height: 44px;
  z-index: 10001;
  color: var(--masw-text);
  background: var(--masw-panel-bg, #ffffff);
  border: 1px solid var(--masw-border);
  border-radius: 999px;
  box-shadow: var(--masw-shadow);
}
.masw-root[data-mode="modal"].masw-open .masw-toggle .masw-ico,
.masw-root.masw-mobile-full .masw-toggle .masw-ico {
  width: 20px;
  height: 20px;
}
.masw-root[data-mode="modal"].masw-open .masw-toggle .masw-ico-search,
.masw-root.masw-mobile-full .masw-toggle .masw-ico-search { display: none; }
.masw-root[data-mode="modal"].masw-open .masw-toggle .masw-ico-close,
.masw-root.masw-mobile-full .masw-toggle .masw-ico-close { display: block; }

/* ── Mobile: all 3 modes collapse to an icon that opens a full-screen overlay ── */
@media (max-width: 767px) {
  .masw-root.masw-mobile-full .masw-form,
  .masw-root.masw-mobile-full .masw-panel {
    transition: none;
  }

  .masw-root.masw-mobile-full .masw-form {
    display: flex;
    position: fixed;
    inset: 0 0 auto 0;
    /* !important: must always beat the higher-specificity desktop [data-mode] rules */
    inset-inline-start: 0 !important;
    transform: none !important;
    width: 100%;
    height: var(--masw-mobile-field-h);
    border-radius: 0;
    border-width: 0 0 1px;
    box-shadow: var(--masw-shadow);
    z-index: 10000;
    padding: 0;
    padding-inline-start: 16px;
    padding-inline-end: 58px; /* room for the floating close (X) button */
  }
  /* In the full-screen bar the close (X) replaces the submit magnifier. */
  .masw-root.masw-mobile-full .masw-submit { display: none; }
  .masw-root.masw-mobile-full .masw-panel {
    position: fixed;
    inset: calc(var(--masw-mobile-field-h) + 1px) 0 0 0;
    inset-inline-start: 0 !important;
    transform: none !important;
    width: 100%;
    max-height: none;
    border-radius: 0;
    border-width: 0;
    box-shadow: none;
    z-index: 10000;
  }
  /* Intentionally mirrors the desktop modal-mode overlay (color/z-index above).
     Both rules can target the same ::before when data-mode="modal".masw-open and
     .masw-mobile-full are applied together on mobile — only one wins by cascade
     order, so keep the two in sync if either changes. */
  .masw-root.masw-mobile-full::before {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--masw-scrim);
    -webkit-backdrop-filter: blur(5px) saturate(1.05);
    backdrop-filter: blur(5px) saturate(1.05);
    z-index: 9998;
  }

  .masw-root[data-mode="fixed"] .masw-toggle { display: flex; }
  .masw-root[data-mode="fixed"] .masw-form { width: var(--masw-icon-size); border-width: 0; padding-inline: 0; overflow: hidden; }
  .masw-root[data-mode="fixed"] .masw-input { opacity: 0; width: 0; }
  .masw-root[data-mode="fixed"].masw-mobile-full .masw-form { width: 100%; border-width: 0 0 1px; padding-inline-start: 16px; padding-inline-end: 58px; }
  .masw-root[data-mode="fixed"].masw-mobile-full .masw-input { opacity: 1; width: auto; }
}

/* ── Respect reduced-motion preference ── */
@media (prefers-reduced-motion: reduce) {
  .masw-root .masw-form,
  .masw-root .masw-toggle,
  .masw-root .masw-submit,
  .masw-root .masw-option,
  .masw-root .masw-view-all {
    transition: none;
  }
}