/* ============================================================
   Wanted Property Request — wizard inputs (unit selector)
   --------------------------------------------------------------
   Replica o padrao visual do selector de unidade do /anunciar/
   (listings/css/pages/property_advertise/_layout.css linhas 42-89),
   sem o anel verde de foco. Tudo escopado em
   ``.wanted-request-wizard`` para nao afetar outras telas.
   As faixas min/max vivem em range_fields.css (chips + De/Ate).
   ============================================================ */

/* -- Unit select (desktop) ---------------------------------
   GFSelect (mesmo dropdown do header) enhancea o select nativo.
   Largura contida para o painel nunca ficar mais largo que o input. */
.wanted-request-wizard .unit-select-field__desktop {
  max-width: 340px;
}

/* -- Unit toggle (replica /anunciar/) --------------------- */
.wanted-request-wizard .area-unit-toggle {
  min-height: var(--gf-field-min-height);
  height: var(--gf-field-min-height);
  padding: 0 var(--gf-field-padding-x);
  font-size: var(--gf-field-font-size);
  font-weight: var(--gf-field-font-weight);
  line-height: var(--gf-field-line-height);
  color: var(--gf-color-neutral-900);
  background-color: var(--gf-field-bg);
  border: 1.5px solid var(--gf-field-border);
  border-radius: var(--gf-button-radius);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  align-items: center;
}

.wanted-request-wizard .area-unit-toggle:hover {
  border-color: var(--gf-field-border-hover);
  background-color: var(--gf-field-bg);
  color: var(--gf-color-neutral-900);
}

/* Foco SEM anel verde (Item 2 do feedback): borda primaria apenas,
   mantendo acessibilidade via :focus-visible com outline discreto.
   Override explicito do box-shadow herdado de
   property_preferences.css / _layout.css do /anunciar/. */
.wanted-request-wizard .area-unit-toggle:focus,
.wanted-request-wizard .area-unit-toggle:focus-visible,
.wanted-request-wizard .area-unit-toggle.show {
  outline: none;
  box-shadow: none;
  border-color: var(--gf-color-primary);
  background-color: var(--gf-field-bg);
  color: var(--gf-color-neutral-900);
}

.wanted-request-wizard .area-unit-toggle .material-icons {
  color: var(--gf-color-neutral-600);
  font-size: 1.25rem;
  line-height: 1;
}

.wanted-request-wizard .area-unit-toggle-badge {
  color: var(--gf-color-neutral-700);
  background-color: rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(15, 23, 42, 0.12);
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1.2;
}

/* ============================================================
   M3+M10 — Selector de unidade como bottom-sheet drawer no mobile.
   Anima slide-up entrando, e o JS em wizard_unit_drawer.js adiciona
   drag-to-close usando touch events. Backdrop dedicado para
   bloquear scroll/clique no body enquanto o drawer esta aberto.
   ============================================================ */
@media (max-width: 575.98px) {
  .wanted-request-wizard [data-area-unit-dropdown] {
    display: block;
    width: 100%;
  }

  .wanted-request-wizard .area-unit-toggle {
    width: 100%;
    justify-content: space-between;
  }

  /* Backdrop: elemento criado por JS (data-area-unit-backdrop). */
  .area-unit-drawer-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.4);
    z-index: 1049;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }

  .area-unit-drawer-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .wanted-request-wizard [data-area-unit-dropdown] .dropdown-menu.show {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    /* P3: data-bs-display="static" no toggle desabilita Popper, mas
       mantemos defensivo aqui — translateY(0) eh o estado final do
       slide-in. */
    transform: translateY(0);
    inset: auto 0 0 0 !important;
    width: 100% !important;
    max-height: 70vh;
    overflow-y: auto;
    margin: 0 !important;
    padding: 0.25rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
    border-radius: 1.25rem 1.25rem 0 0;
    border: none;
    box-shadow: 0 -8px 24px -8px rgba(15, 23, 42, 0.18);
    z-index: 1050;
    /* M10: anima slide-up de baixo. Transition controla tambem o
       drag interativo (JS muda transform durante touchmove). */
    animation: wizard-drawer-slide-in 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
    touch-action: pan-y;
    will-change: transform;
  }

  /* P3: garante que o toggle do selector permanece visivel quando o
     drawer abre. Bootstrap as vezes esconde o origem ao posicionar
     dropdown — forcamos visibilidade. */
  .wanted-request-wizard [data-area-unit-dropdown] .area-unit-toggle {
    position: relative;
    z-index: auto;
  }

  /* Quando o usuario arrasta, JS adiciona is-dragging para
     suspender a transition (movimento 1:1 com o dedo). */
  .wanted-request-wizard [data-area-unit-dropdown] .dropdown-menu.show.is-dragging {
    transition: none;
  }

  /* M10: handle decorativo no topo (visual + alvo de drag). */
  .wanted-request-wizard [data-area-unit-dropdown] .dropdown-menu.show::before {
    content: '';
    display: block;
    width: 2.5rem;
    height: 4px;
    border-radius: 2px;
    background-color: rgba(15, 23, 42, 0.25);
    margin: 0.5rem auto 0.6rem;
    cursor: grab;
  }

  .wanted-request-wizard [data-area-unit-dropdown] .dropdown-item {
    padding: 0.85rem 1.25rem;
    font-size: 0.95rem;
  }

  .wanted-request-wizard [data-area-unit-dropdown] .dropdown-item.active {
    background-color: rgba(var(--gf-color-primary-rgb), 0.1);
    color: var(--gf-color-primary);
  }
}

@keyframes wizard-drawer-slide-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .wanted-request-wizard [data-area-unit-dropdown] .dropdown-menu.show {
    animation: none;
    transition: none;
  }
  .area-unit-drawer-backdrop {
    transition: none;
  }
}