/* TASK Search & Map (FAZA 2/3) + Finalizare UX Search (2026-07-30, revizuit) - formular public
   [crd_estate_search]. Mobile-first (min. 360px), pozitionat obligatoriu TOP pe orice pagina de listare
   (vezi docs/CRD_ESTATE_PUBLIC_SEARCH_AND_MAP.md si docs/CRD_ESTATE_SEARCH_UX_FINALIZATION.md).
   Layout cerut explicit: campurile (Tip proprietate/Tip oferta/Judet/Oras-Sector/Cartier/Zona) cate 3
   pe rand -> 2 randuri pe tableta/desktop, iar butonul Cauta STAT SEPARAT, sub campuri, aliniat
   dreapta-jos (.crd-estate-search-actions mai jos) - nu mai face parte din grid-ul campurilor. */

.crd-estate-search-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 16px;
    margin: 0 0 20px;
    box-sizing: border-box;
    max-width: 100%;
}

.crd-estate-search-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.crd-estate-search-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #333;
    min-width: 0;
}

.crd-estate-search-field span {
    font-weight: 600;
}

.crd-estate-search-field select,
.crd-estate-search-field input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #cfd4d9;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    min-height: 40px;
}

.crd-estate-search-field select:focus,
.crd-estate-search-field input[type="number"]:focus {
    outline: 2px solid #1a73e8;
    outline-offset: 1px;
    border-color: #1a73e8;
}

/* Cerinta directa (2026-08-05) - "Mai multe filtre" (panoul avansat, mai jos) sta acum ALATURI de butonul
   Cauta, in ordinea "Mai multe filtre" -> "Cauta" - randul devine flex-wrap, ca sa se poata aseza cate 2
   pe acelasi rand cand incap, si sa treaca fiecare pe randul lui (fara sa se suprapuna) sub 360px. */
.crd-estate-search-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 10px;
}

/* Ambele butoane ale randului (toggle-ul "Mai multe filtre" si "Cauta") primesc EXACT aceeasi latime SI
   inaltime, ca sa arate identic ca dimensiune, indiferent ca textul "Cauta" e mult mai scurt sau ca
   "Mai multe filtre" are bordura si "Cauta" nu (bordura ar fi adaugat 2px in plus la inaltimea calculata
   doar din padding/min-height - `height` fix, cu `box-sizing:border-box` pe amandoua, elimina orice
   diferenta indiferent de bordura/padding). */
.crd-estate-search-submit,
.crd-estate-search-advanced-toggle {
    min-width: 160px;
    height: 44px;
    box-sizing: border-box;
    justify-content: center;
}

.crd-estate-search-submit {
    /* BUG REAL RAPORTAT (2026-08-05) - "flex: 1 1 auto" facea acest buton sa se intinda pe tot spatiul
       ramas din rand (uriaș fata de "Mai multe filtre") - corectat la aceeasi regula de dimensionare ca
       butonul de langa el (flex:0 0 auto, acelasi padding/inaltime/font/latime minima). */
    flex: 0 0 auto;
    padding: 0 16px;
    border: none;
    border-radius: 6px;
    background: #1a73e8;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}

.crd-estate-search-submit:hover {
    background: #1558b0;
}

.crd-estate-search-submit:focus-visible {
    outline: 2px solid #0d47a1;
    outline-offset: 2px;
}

.crd-estate-search-row-reset {
    display: flex;
    justify-content: flex-end;
}

.crd-estate-search-reset {
    font-size: 13px;
    color: #5f6b7a;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.crd-estate-search-reset:hover,
.crd-estate-search-reset:focus-visible {
    color: #1a73e8;
}

/* ------------------------------------------------------------------ */
/* TASK Filtre avansate (2026-07-31) - panoul colapsabil "Mai multe filtre", randat DOAR dupa ce
   rezultatele (harta/grid) chiar apar (vezi $view in class-crd-property-public-search-form.php) - nu la
   prima incarcare a unei pagini de tip "hub" (require_search). <details>/<summary> nativ - acordeon fara
   nicio linie de JS, complet accesibil din cutie (tastatura + screen reader). */
/* ------------------------------------------------------------------ */

/* Cerinta directa (2026-08-05) - devine un buton propriu-zis, langa "Cauta", cu o culoare DIFERITA de
   albastrul butonului de submit (stilul secundar/outline deja folosit in restul plugin-ului, vezi
   .crd-estate-pd-btn-outline din public.css) - fara sa schimbe mecanismul <details>/<summary> (acelasi
   comportament de deschidere/inchidere ca inainte, nativ, fara nicio linie de JS). Cutia cu bordura nu mai
   invaluie STRICT tot elementul <details> (asa incape natural, ca latime, langa butonul Cauta cand e
   inchis) - bordura/fundalul traiesc acum pe buton (inchis) si pe panoul cu campuri (deschis), separat.
   `.crd-estate-search-advanced` ramane doar un flex-item: latime naturala (dupa continutul butonului) cat
   timp e inchis, latime completa a randului (`[open]`, mai jos) cat timp e deschis - ca panoul de campuri
   sa aiba loc sa se desfasoare pe randul lui, sub cele doua butoane. */
.crd-estate-search-advanced {
    flex: 0 0 auto;
}

.crd-estate-search-advanced[open] {
    flex: 1 1 100%;
}

.crd-estate-search-advanced-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 0 16px;
    border: 1px solid #cfdbe4;
    border-radius: 6px;
    background: #ffffff;
    font-weight: 700;
    font-size: 15px;
    color: #0d2438;
    list-style: none;
    user-select: none;
}

.crd-estate-search-advanced-toggle:hover {
    background: #f2f6fa;
    border-color: #1a73e8;
}

/* Elimina sageata implicita a browser-ului (marker triunghiular) - inlocuita cu una desenata prin CSS,
   ca sa poata fi rotita consistent la deschidere pe toate browserele. */
.crd-estate-search-advanced-toggle::-webkit-details-marker {
    display: none;
}

.crd-estate-search-advanced-toggle::after {
    content: "▾";
    font-size: 12px;
    transition: transform .15s ease;
}

.crd-estate-search-advanced[open] .crd-estate-search-advanced-toggle::after {
    transform: rotate(180deg);
}

.crd-estate-search-advanced-toggle:focus-visible {
    outline: 2px solid #1a73e8;
    outline-offset: 2px;
}

.crd-estate-search-row--advanced {
    padding: 12px 12px 16px;
    margin-top: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafbfc;
    box-sizing: border-box;
}

@media (min-width: 480px) {
    .crd-estate-search-row--advanced {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .crd-estate-search-row--advanced {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------------ */
/* Combobox cautabil (Judet / Oras-Sector / Cartier / Zona) - fara librarie externa, progressive
   enhancement peste <select>-ul nativ (ramane in DOM ca sursa de adevar pentru submit/cascada). */
/* ------------------------------------------------------------------ */

.crd-estate-combobox {
    position: relative;
    display: block;
    width: 100%;
}

/* TASK 46.1 - ROOT CAUSE overflow orizontal mobil (homepage/oferte-imobiliare/vanzari/inchirieri):
   selectorul de mai jos avea o singura clasa (specificitate 0,0,1,0), invins de
   `.crd-estate-search-field select` (0,0,1,1, mai jos in acest fisier) - select-ul nativ ascuns
   mostenea `width:100%; box-sizing:border-box; min-height:40px` de la campul vizibil in loc sa ramana
   1x1px, iar fiind `position:absolute` intr-un parinte in flux normal, cutia lui reala (nu doar
   continutul, care era oricum clip-uit vizual) impingea `document.documentElement.scrollWidth` peste
   `clientWidth` cu pana la ~325px la 320-430px latime - verificat direct (Playwright/Edge headless,
   getBoundingClientRect().right pe select = exact scrollWidth-ul documentului, la fiecare breakpoint).
   Fix: `select.crd-estate-combobox__native` (element+clasa = 0,0,1,1, egalitate cu regula care castiga
   azi) - la specificitate egala castiga regula declarata ULTIMA in fisier, iar aceasta ramane sub cea
   de mai sus - deci acum e garantat sa castige, indiferent de ordinea viitoare din fisier. */
select.crd-estate-combobox__native {
    /* Vizual ascuns (nu display:none - ramane un element valid, doar scos din fluxul vizual/tab order;
       AT foloseste input-ul de mai jos, care poarta rolul combobox). */
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.crd-estate-combobox__input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #cfd4d9;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    min-height: 40px;
}

.crd-estate-combobox__input:focus {
    outline: 2px solid #1a73e8;
    outline-offset: 1px;
    border-color: #1a73e8;
}

.crd-estate-combobox__listbox {
    position: absolute;
    z-index: 60;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #cfd4d9;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
    max-height: 260px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.crd-estate-combobox__option {
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.3;
    color: #222;
    cursor: pointer;
    min-height: 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.crd-estate-combobox__option.is-active,
.crd-estate-combobox__option:hover {
    background: #eaf1fd;
}

.crd-estate-combobox__empty {
    padding: 10px 12px;
    font-size: 13px;
    color: #777;
}

/* ------------------------------------------------------------------ */
/* Breakpoints - mobil (base, 1 coloana) -> tableta -> desktop/laptop.
   Layout cerut: campurile cate 3 pe rand (2 randuri pentru cele 6 campuri), butonul Cauta separat,
   sub ele, aliniat dreapta-jos - la orice latime incepand de la 480px (sub 480px, o singura coloana,
   butonul ramane totusi aliniat la dreapta din motive de consistenta vizuala). */
/* ------------------------------------------------------------------ */

@media (min-width: 480px) {
    .crd-estate-search-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    /* Cate 3 pe rand -> exact 2 randuri pentru cele 6 campuri (Tip proprietate/Tip oferta/Judet/
       Oras-Sector/Cartier/Zona). Nu se mai adauga coloane suplimentare la latimi mai mari (1024/1280/
       1920px) - layout-ul ramane fix la 3 coloane, cerinta explicita a beneficiarului. */
    .crd-estate-search-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .crd-estate-search-row--main {
        align-items: end;
    }
}

/* ==========================================================================
   DARK MODE (2026-07-30) - comutatorul real de pe site e `body.dark-mode`/
   `body.light-mode` (evimo-toggle.js, tema astra-child). Formularul de cautare
   nu avea niciun stil pentru acest mod - fundal alb + inputuri albe fixe,
   ramase neschimbate pe fundal navy (noapte). Butonul de submit (`#1a73e8`)
   ramane neschimbat - e deja auto-colorat, vizibil in ambele moduri. */

body.dark-mode .crd-estate-search-form {
    background: #0d2340;
    border-color: rgba(0, 207, 166, .28);
}

body.dark-mode .crd-estate-search-field {
    color: #d9e7f5;
}

body.dark-mode .crd-estate-search-field select,
body.dark-mode .crd-estate-search-field input[type="number"],
body.dark-mode .crd-estate-combobox__input {
    background: #0b2036;
    border-color: rgba(0, 207, 166, .35);
    color: #f1f7ff;
}

body.dark-mode .crd-estate-search-reset {
    color: #a9bdd0;
}

body.dark-mode .crd-estate-search-advanced-toggle {
    background: #0b2036;
    border-color: rgba(0, 207, 166, .35);
    color: #f1f7ff;
}

body.dark-mode .crd-estate-search-advanced-toggle:hover {
    background: #123a5c;
    border-color: #00d5ad;
}

body.dark-mode .crd-estate-search-row--advanced {
    background: #0b2036;
    border-color: rgba(0, 207, 166, .28);
}

body.dark-mode .crd-estate-combobox__listbox {
    background: #0d2340;
    border-color: rgba(0, 207, 166, .35);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}

body.dark-mode .crd-estate-combobox__option {
    color: #f1f7ff;
}

body.dark-mode .crd-estate-combobox__option.is-active,
body.dark-mode .crd-estate-combobox__option:hover {
    background: rgba(0, 207, 166, .18);
}

body.dark-mode .crd-estate-combobox__empty {
    color: #a9bdd0;
}