/* =============================================================================
   PAGINA DE CAUTARE AVANSATA
   Coloana de filtre in stanga + rezultate in dreapta; pe mobil una sub alta.
   ============================================================================= */

.bt-srch-head { padding: 34px 0 22px; background: #f8fafc; border-bottom: 1px solid #eef2f6; }
.bt-srch-head h1 { margin: 0 0 6px; font-size: clamp(26px, 3vw, 36px); font-weight: 800; color: #0f172a; }
.bt-srch-head p  { margin: 0; color: #64748b; font-size: 15px; }

.bt-srch-results { padding-top: 26px; padding-bottom: 56px; }

/* ---------------- Bara de sus: cautare simpla + buton de filtre ---------------- */
.bt-srch-head .bt-search { margin-top: 18px; }

.bt-srch-adv-btn {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 0 20px;
    border: 1px solid #e2e8f0; border-radius: 20px;
    background: #fff; color: #334155;
    font-family: inherit; font-size: 14.5px; font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.bt-srch-adv-btn:hover { border-color: #16a34a; color: #16a34a; }
.bt-srch-adv-count {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px;
    background: #16a34a; color: #fff;
    font-size: 11.5px; font-weight: 700;
}

/* ---------------- Overlay-ul de filtre ---------------- */
body.bt-adv-lock { overflow: hidden; }

.bt-adv { position: fixed; inset: 0; z-index: 1300; display: flex; }
.bt-adv[hidden] { display: none; }
.bt-adv-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); animation: btAdvFade .16s ease; }

.bt-adv-panel {
    position: relative;
    display: flex; flex-direction: column;
    width: min(980px, 100%);
    max-height: 100%;
    margin: auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .3);
    animation: btAdvIn .18s ease;
}
@keyframes btAdvFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes btAdvIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.bt-adv-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid #eef2f6;
    flex: 0 0 auto;
}
.bt-adv-head h2 { margin: 0; font-size: 18px; font-weight: 700; color: #0f172a; }
.bt-adv-head-actions { display: inline-flex; align-items: center; gap: 14px; }

.bt-adv-x {
    width: 34px; height: 34px;
    display: inline-grid; place-items: center;
    border: 0; border-radius: 10px;
    background: #f1f5f9; color: #475569;
    cursor: pointer;
}
.bt-adv-x:hover { background: #e2e8f0; color: #0f172a; }

/* Un singur sir, de sus in jos: cinci sectiuni mari, toate pliate.

   A fost `columns: 300px 2`. Cu coloane CSS continutul umple intai coloana
   stanga pe toata inaltimea si abia apoi trece in dreapta, deci ordinea citita
   nu era ordinea din pagina. Latimea nu se pierde: ce are de aratat mult
   (categoriile, tagurile) se imparte pe coloane inauntru. */
.bt-adv-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 6px 22px 18px;
}

/* ---- Sectiunile mari, fiecare in caseta ei ----
   Cu o simpla linie despartitoare, o sectiune deschisa se scurgea vizual in
   urmatoarea: nu se vedea unde se termina continutul ei. Caseta o inchide. */
.bt-adv-sec {
    margin-top: 12px;
    border: 1px solid #e8eef3;
    border-radius: 14px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.bt-adv-sec:first-of-type { margin-top: 6px; }
.bt-adv-sec[open] {
    border-color: #dbe6ee;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}

/* Antetul are doua randuri: titlul cu ce e ales, apoi descrierea. De aceea
   `block`, nu `flex` — randul de sus isi face singur flex-ul. */
.bt-adv-sec > summary {
    display: block;
    /* Zona de apasare tine toata latimea casetei, nu doar cat scrie */
    padding: 14px 16px;
    border-radius: 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.bt-adv-sec-head { display: flex; align-items: center; gap: 12px; }
.bt-adv-sec[open] > summary { border-bottom: 1px solid #f1f5f9; border-radius: 14px 14px 0 0; }
.bt-adv-sec > summary:hover { background: #fafcfd; }
.bt-adv-sec > summary::-webkit-details-marker { display: none; }
.bt-adv-sec > summary:hover .bt-adv-sec-title { color: #16a34a; }
.bt-adv-sec > summary:focus-visible { outline: 2px solid #16a34a; outline-offset: 2px; border-radius: 8px; }

.bt-adv-sec-title {
    flex: 0 0 auto;
    font-size: 15px; font-weight: 700; color: #0f172a;
    transition: color .15s ease;
}

/* Ce e ales, pe acelasi rand cu titlul.

   `min-width: 0` si `flex: 1 1 0` sunt esentiale: fac elementul sa ia exact
   spatiul ramas, nu cat ii cer insignele. Asa `scrollWidth > clientWidth`
   inseamna chiar „nu incape", iar JS-ul poate taia lista pana incape. */
.bt-adv-sec-sel {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    overflow: hidden;
}
.bt-adv-sec-sel[hidden] { display: none; }

/* Insigna unei alegeri, cu butonul care o scoate */
.bt-adv-tag {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 3px;
    /* Mai stramt in dreapta: acolo sta „×", care are latimea lui */
    padding: 3px 4px 3px 10px;
    border-radius: 999px;
    background: #eaf7ee; color: #15803d;
    font-size: 12px; font-weight: 600; line-height: 1.5;
    white-space: nowrap;
}
.bt-adv-tag--rest {
    padding: 3px 10px;
    background: #f1f5f9; color: #64748b;
}

.bt-adv-tag-x {
    width: 17px; height: 17px;
    display: inline-grid; place-items: center;
    padding: 0;
    border: 0; border-radius: 50%;
    background: transparent; color: #15803d;
    font: inherit; font-size: 15px; line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.bt-adv-tag-x:hover { background: #15803d; color: #fff; }
.bt-adv-tag-x:focus-visible { outline: 2px solid #15803d; outline-offset: 1px; }

/* Sageata proprie, ca cea implicita difera intre browsere. Sta pe randul de
   sus, langa titlu, nu langa descriere. */
.bt-adv-sec-head::after {
    content: "";
    /* `auto` doar cand rezumatul lipseste — altfel el impinge sageata la capat */
    margin-left: auto;
    flex: 0 0 auto;
    width: 8px; height: 8px;
    border-right: 2px solid #94a3b8;
    border-bottom: 2px solid #94a3b8;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}
.bt-adv-sec[open] .bt-adv-sec-head::after { transform: rotate(-135deg) translate(-2px, -2px); }
.bt-adv-sec > summary:hover .bt-adv-sec-head::after { border-color: #16a34a; }

/* Doua vorbe despre ce se filtreaza in sectiune. Stau in <summary>, deci se
   citesc si cu sectiunea inchisa — atunci sunt de folos, cand alegi ce sa
   deschizi. `max-width` in `ch` tine randurile citibile: pe toata latimea
   panoului, ochiul pierde inceputul randului urmator. */
.bt-adv-sec-desc {
    display: block;
    margin-top: 5px;
    max-width: 78ch;
    font-size: 12.5px; line-height: 1.5; color: #8fa0b0;
}

/* Continutul sectiunii, in caseta */
.bt-adv-sec > *:not(summary) { margin: 0 16px 16px; }
.bt-adv-sec > *:not(summary):first-of-type { margin-top: 14px; }
.bt-adv-sec .bt-srch-sublabel:first-of-type { margin-top: 0; }

/* ---- Locatie: harta SAU lista ----
   Doua butoane lipite, ca la un comutator: se vede dintr-o privire ca sunt
   doua cai intre care alegi, nu doua filtre care se aduna. */
.bt-srch-mode {
    display: inline-flex;
    padding: 3px;
    border: 1px solid #e2e8f0; border-radius: 999px;
    background: #f8fafc;
}
.bt-srch-mode-btn {
    padding: 7px 16px;
    border: 0; border-radius: 999px;
    background: transparent; color: #64748b;
    font-family: inherit; font-size: 13.5px; font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.bt-srch-mode-btn:hover { color: #0f172a; }
.bt-srch-mode-btn[aria-pressed="true"] {
    background: #16a34a; color: #fff;
    box-shadow: 0 1px 4px rgba(22, 163, 74, .3);
}
.bt-srch-mode-btn:focus-visible { outline: 2px solid #16a34a; outline-offset: 2px; }
[data-loc-panel][hidden] { display: none; }
/* Categoria intreaga — prima din grup — se deosebeste de subcategoriile ei:
   e mai apasata, ca sa nu para inca o subcategorie pusa din greseala prima. */
.bt-srch-chip--d0 span { font-weight: 700; border-color: #cbd5e1; }
/* Nivelul al treilea, mai sters, ca sa se vada ca atarna de cel de dinaintea lui */
.bt-srch-chip--d2 span { background: #f8fafc; color: #64748b; }

/* ---- Grupuri pe o coloana, totul vizibil (categorii si taguri) ----
   Fara nivel al doilea: numele grupului e o eticheta, sub ea stau butoanele.
   O singura coloana — pe doua, un grup lung ar sari peste unul scurt si
   ordinea citita n-ar mai fi cea din pagina. */
.bt-srch-groups { display: flex; flex-direction: column; gap: 14px; }
.bt-srch-grup { min-width: 0; }
.bt-srch-grup .bt-srch-sublabel { margin: 0 0 7px; }

/* ---- Campurile scurte nu se intind pe toata latimea ----
   Panoul are ~930px inauntru. Doua casute de pret de 450px fiecare, sau o
   harta lata si joasa ca o fasie, arata rau — latimea se leaga de cat au de
   aratat, nu de cat loc e. */
.bt-adv-sec .bt-srch-row { max-width: 430px; }
.bt-srch-geo-body { max-width: 620px; }
.bt-srch-geo .bt-srch-map { height: 250px; }

.bt-adv-foot {
    display: flex; align-items: center; justify-content: flex-end; gap: 12px;
    padding: 16px 22px;
    border-top: 1px solid #eef2f6;
    flex: 0 0 auto;
}
.bt-adv-foot .bt-srch-submit { width: auto; min-width: 180px; }
.bt-adv-cancel {
    padding: 12px 18px;
    border: 1px solid #e2e8f0; border-radius: 14px;
    background: #fff; color: #475569;
    font-family: inherit; font-size: 14.5px; font-weight: 600;
    cursor: pointer;
}
.bt-adv-cancel:hover { background: #f8fafc; color: #0f172a; }

.bt-srch-reset {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: #dc2626; text-decoration: none;
}
.bt-srch-reset:hover { text-decoration: underline; }

.bt-srch-block { padding: 12px 0; border-bottom: 1px solid #f1f5f9; }
.bt-srch-block:last-of-type { border-bottom: 0; }

.bt-srch-block > summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    font-size: 14px; font-weight: 600; color: #0f172a;
    cursor: pointer;
    list-style: none;
}
.bt-srch-block > summary::-webkit-details-marker { display: none; }
.bt-srch-block > summary::after {
    content: '\f078';                        /* chevron-down */
    font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: 11px; color: #94a3b8;
    transition: transform .16s ease;
}
.bt-srch-block[open] > summary::after { transform: rotate(180deg); }
.bt-srch-block > summary b { color: #16a34a; font-weight: 700; }

.bt-srch-label,
.bt-srch-sublabel {
    display: block;
    margin: 10px 0 6px;
    font-size: 12.5px; font-weight: 600; color: #475569;
}
.bt-srch-block > .bt-srch-label:first-child { margin-top: 0; }

.bt-srch-input {
    position: relative;
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: border-color .15s ease, background .15s ease;
}
.bt-srch-input:focus-within { border-color: #16a34a; background: #fff; }
.bt-srch-input > i { font-size: 13px; color: #94a3b8; flex: 0 0 auto; }
.bt-srch-input input,
.bt-srch-input select {
    flex: 1; min-width: 0;
    border: 0; background: transparent; padding: 0;
    font-family: inherit; font-size: 14.5px; color: #0f172a;
}
.bt-srch-input input:focus, .bt-srch-input select:focus { outline: none; }
.bt-srch-input input::placeholder { color: #94a3b8; }

.bt-srch-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* liste lungi (categorii, judete) — inaltime limitata, cu derulare proprie */
.bt-srch-scroll { max-height: 250px; overflow-y: auto; margin-top: 8px; padding-right: 4px; }

.bt-srch-check {
    display: flex; align-items: center; gap: 9px;
    padding: 5px 2px;
    font-size: 14px; color: #334155;
    cursor: pointer;
}
.bt-srch-check:hover { color: #0f172a; }
.bt-srch-check input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: #16a34a; cursor: pointer; }

/* chips (dificultate, durata, nota) */
.bt-srch-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.bt-srch-chip { position: relative; cursor: pointer; }
.bt-srch-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.bt-srch-chip span {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 13px;
    border: 1px solid #e2e8f0; border-radius: 999px;
    background: #fff;
    font-size: 13px; color: #475569;
    transition: all .15s ease;
}
.bt-srch-chip:hover span { border-color: #cbd5e1; }
.bt-srch-chip input:checked + span { background: #16a34a; border-color: #16a34a; color: #fff; }
.bt-srch-chip input:focus-visible + span { outline: 2px solid #16a34a; outline-offset: 2px; }

/* ---------------- Cautarea pe raza ---------------- */
.bt-srch-geo { position: relative; }
.bt-srch-geo-me {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px;
    background: #eef2f6; color: #475569;
    cursor: pointer;
}
.bt-srch-geo-me:hover { background: #e2e8f0; color: #0f172a; }
.bt-srch-geo-me.is-busy i { animation: btSpin .8s linear infinite; }
.bt-srch-geo-me.is-denied { background: #fee2e2; color: #dc2626; }
@keyframes btSpin { to { transform: rotate(360deg); } }

/* Harta pentru alegerea punctului de referinta */
.bt-srch-map {
    height: 190px;
    margin-top: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #eef2f6;
}
.bt-srch-map-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 7px;
    font-size: 12.5px; color: #475569;
}
.bt-srch-map-btns { display: inline-flex; gap: 6px; flex: 0 0 auto; }
/* Leaflet isi pune panourile pe z-index mare; panoul selectului trebuie deasupra */
.bt-srch-map .leaflet-pane,
.bt-srch-map .leaflet-control { z-index: 1; }

.bt-srch-geo-list {
    position: absolute; z-index: 30; left: 0; right: 0;
    margin: 4px 0 0; padding: 6px;
    list-style: none;
    max-height: 260px; overflow-y: auto;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .14);
}
.bt-srch-geo-item { padding: 8px 10px; border-radius: 9px; cursor: pointer; }
.bt-srch-geo-item:hover, .bt-srch-geo-item.is-active { background: #f1f5f9; }
.bt-srch-geo-item strong { display: block; font-size: 14px; font-weight: 600; color: #0f172a; }
.bt-srch-geo-item small  { font-size: 12px; color: #94a3b8; }

.bt-srch-radius { margin-top: 12px; }
.bt-srch-radius-head { display: flex; justify-content: space-between; font-size: 12.5px; color: #475569; }
.bt-srch-radius-head b { color: #16a34a; }
.bt-srch-radius input[type="range"] { width: 100%; margin: 6px 0 2px; accent-color: #16a34a; }
.bt-srch-radius-scale {
    display: flex; justify-content: space-between;
    font-size: 10px; color: #94a3b8;
}
.bt-srch-hint { margin: 6px 0 0; font-size: 12px; color: #b45309; }

.bt-srch-submit {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 20px;
    border: 0; border-radius: 14px;
    background: #16a34a; color: #fff;
    font-family: inherit; font-size: 15px; font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease;
}
.bt-srch-submit:hover { background: #15803d; box-shadow: 0 10px 26px rgba(22, 163, 74, .3); }

/* ---------------- Rezultate ---------------- */
.bt-srch-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.bt-srch-count { margin: 0; font-size: 15px; color: #475569; }
.bt-srch-count strong { color: #0f172a; font-size: 18px; }

.bt-srch-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #64748b; }
.bt-srch-sort select {
    border: 1px solid #e2e8f0; border-radius: 10px;
    padding: 8px 12px; background: #fff;
    font-family: inherit; font-size: 14px; color: #0f172a;
}

.bt-srch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.bt-srch-card {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid #e9eef3;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
.bt-srch-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(15, 23, 42, .10); }

.bt-srch-card-media { position: relative; display: block; aspect-ratio: 16 / 10; background: #f1f5f9; }
.bt-srch-card-media img { width: 100%; height: 100%; object-fit: cover; }
.bt-srch-card-noimg { display: grid; place-items: center; height: 100%; color: #cbd5e1; font-size: 26px; }

.bt-srch-badge, .bt-srch-dist {
    position: absolute; top: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
}
.bt-srch-badge { left: 10px; background: #ff7a00; color: #fff; }
.bt-srch-dist  { right: 10px; background: rgba(15, 23, 42, .78); color: #fff; }

.bt-srch-card-body { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px 16px; flex: 1; }
.bt-srch-card-body h3 { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 700; }
.bt-srch-card-body h3 a { color: #0f172a; text-decoration: none; }
.bt-srch-card-body h3 a:hover { color: #16a34a; }

.bt-srch-card-meta { margin: 0; font-size: 13px; color: #64748b; }
.bt-srch-card-rating { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; color: #64748b; }
.bt-srch-card-rating .stars { color: #f59e0b; font-size: 12px; }

.bt-srch-card-foot {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin: auto 0 0; padding-top: 8px;
}
.bt-srch-price { font-size: 16px; font-weight: 800; color: #0f172a; }
.bt-srch-card-provider { font-size: 12.5px; color: #64748b; text-decoration: none; }
.bt-srch-card-provider:hover { color: #16a34a; }
.bt-srch-card-provider i { color: #16a34a; font-size: 11px; }

.bt-srch-empty { padding: 56px 20px; text-align: center; color: #64748b; }
.bt-srch-empty i { font-size: 34px; color: #cbd5e1; }
.bt-srch-empty h3 { margin: 14px 0 6px; font-size: 18px; color: #0f172a; }
.bt-srch-empty p  { margin: 0; font-size: 14.5px; }

.bt-srch-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 28px; }
.bt-srch-pager a {
    min-width: 38px; padding: 8px 10px;
    text-align: center;
    border: 1px solid #e2e8f0; border-radius: 10px;
    color: #334155; text-decoration: none; font-size: 14px;
}
.bt-srch-pager a:hover { border-color: #16a34a; color: #16a34a; }
.bt-srch-pager a.is-current { background: #16a34a; border-color: #16a34a; color: #fff; font-weight: 700; }

/* ---------------- Responsive ---------------- */
@media (max-width: 700px) {
    .bt-adv-panel { width: 100%; max-height: 100%; border-radius: 0; margin: 0; }
    .bt-adv-body { padding: 6px 14px 18px; }
    .bt-adv-foot .bt-srch-submit { flex: 1; min-width: 0; }
    .bt-adv-sec > summary { padding: 13px 13px; gap: 9px; }
    .bt-adv-sec > *:not(summary) { margin: 0 13px 13px; }
    /* Pe telefon randul e prea ingust pentru nume — JS scrie doar numarul.
       Pragul e acelasi ca in `ingust` din search-page.js: daca il schimbi
       aici, schimba-l si acolo. */
    .bt-adv-sec-sel { flex: 0 0 auto; font-size: 12.5px; }
    .bt-adv-sec > summary::after { margin-left: auto; }
	.bt-srch-adv-btn{
		width:100%;
		display:block;
		padding:15px;
		
	}
}

/* ---------------------------------------------------------------------------
   „Poate te interesează și…" — activitatile adaugate de noi, fara organizator.

   Apar aici, separat de rezultate, cand cautarea are filtre pe care nu le pot
   respecta (pret, durata, dificultate, nota). Nu sunt rezultate ale cautarii,
   deci nu stau in aceeasi lista; o linie de sus si un fundal mai palid le
   despart fara sa le ascunda.
   --------------------------------------------------------------------------- */

.bt-srch-extra {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid #e2e8f0;
}

.bt-srch-extra-head {
    margin-bottom: 20px;
}

.bt-srch-extra-head h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #17252b;
}

.bt-srch-extra-head p {
    margin: 0;
    font-size: 14px;
    color: #667085;
}

@media (max-width: 640px) {
    .bt-srch-extra {
        margin-top: 28px;
        padding-top: 24px;
    }
    .bt-srch-extra-head h2 { font-size: 19px; }
}