/* =====================================================================
   rezultate.css — pagina de rezultate (cautare.php): layout sidebar +
   listă, hartă/filtre, taburi pe mobil, cartușe de unitate cu carusel.
   Se încarcă după css/common.css.
   ===================================================================== */

.results-page{ padding:22px 0 56px; }

.results-main-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-bottom:18px;
}
.results-main-head h1{ font-size:clamp(1.25rem, 3vw, 1.7rem); }
.results-count{ font-size:.82rem; color:var(--ink-soft); white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.results-spinner{
  display:inline-block; width:22px; height:22px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--primary-dark);
  animation:results-spinner-rotire .7s linear infinite;
}
@keyframes results-spinner-rotire{ to{ transform:rotate(360deg); } }

/* position:relative AICI (nu doar pe .results-main) - pe mobil (sub 1024px), .results-main
   NU mai e positioned (vezi mai jos), deci .results-overlay (copil al lui, absolute inset:0)
   urcă până la ACEST context și acoperă și cartușul de căutare din .results-sidebar, nu doar
   lista de unități - user, 2026-09-17: "pe mobil, rotita ... nu se vede decat la scroll ...
   as prefera ca patura si rotita sa acopere si cartusul de cautare". La 1024px+, .results-main
   redevine positioned (mai jos) și restaurează comportamentul vechi (overlay DOAR pe listă) -
   pe desktop cartușul e deja vizibil lângă listă, fără nevoie de scroll, deci nu era nicio
   problemă de reparat acolo. */
.results-layout{ display:flex; flex-direction:column; gap:24px; position:relative; }
@media (min-width:1024px){
  .results-layout{
    display:grid;
    grid-template-columns: minmax(290px, 23%) 1fr;
    align-items:start;
    gap:28px;
  }
}

/* ---------- SIDEBAR: cartuș + (pe mobil) taburi Hartă/Filtre ---------- */
.results-sidebar{ display:flex; flex-direction:column; gap:18px; }
.results-sidebar .search-cartridge{ margin:0; max-width:none; }

/* la 1024px+ sidebar-ul e îngust (~290px) — mult mai strâns decât rândul
   cartușului din pagina principală. Fără asta, "12.09.2026" nu mai încape
   în câmpul de dată și textul iese din cadru. Se aplică DOAR la breakpoint-ul
   de desktop: pe mobil cartușul din sidebar e la fel de lat ca oriunde
   altundeva, nu are nevoie de strângere. */
@media (min-width:1024px){
  .results-sidebar .sc-field{ padding:7px 8px 6px; }
  .results-sidebar .sc-row-dates{ gap:6px; }
  .results-sidebar .date-btn{ font-size:.82rem; }
  .results-sidebar .nights-value{ font-size:.82rem; }
  .results-sidebar .sc-row-dates .date-field{ flex:5 1 0; }
  .results-sidebar .sc-row-dates .nights-field{ flex:2.5 1 0; }
}

.sidebar-tabs{ display:flex; gap:6px; background:var(--mist); padding:4px; border-radius:999px; }
.sidebar-tab{
  flex:1; text-align:center; padding:9px 10px; border:none; border-radius:999px; background:none;
  font-weight:700; font-size:.82rem; color:var(--ink-soft);
}
.sidebar-tab.active{ background:#fff; color:var(--primary-dark); box-shadow:var(--shadow); }

@media (min-width:1024px){
  .sidebar-tabs{ display:none; }        /* pe desktop harta și filtrele sunt mereu vizibile, nu mai e nevoie de taburi */
  /* !important necesar — de la regula globală [hidden]{display:none!important} din common.css
     (specificitate egală, deci decide ordinea în cascadă: fără !important aici, panourile ar
     rămâne ascunse pe desktop dacă au rămas cu atributul `hidden` de la modul mobil) */
  .sidebar-panel{ display:block !important; }
}

.sidebar-panel-title{
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-soft); margin-bottom:10px;
}

/* hartă — Leaflet + OpenStreetMap (js/harta.js) */
.map-placeholder{
  position:relative; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;
  height:220px;
}
.map-placeholder .map-note{
  position:absolute; left:10px; bottom:10px; max-width:calc(100% - 20px);
  background:rgba(255,255,255,.92); color:var(--ink-soft);
  font-size:.66rem; font-weight:600; padding:4px 9px; border-radius:999px;
}
.leaflet-map{ width:100%; height:100%; background:var(--mist); }
/* cauza reală a "drapelului" era regula veche `.map-placeholder svg{width:100%;height:100%}`
   (rămasă de la mock-ul SVG dinaintea hărții reale) — prindea, ca selector descendent, orice
   svg din hartă, inclusiv steguletul intern Leaflet (leaflet-attribution-flag, 12×8px, gest de
   solidaritate cu Ucraina, din 2022, lângă linkul "Leaflet" din atribuire) — ȘTEARSĂ, 2026-09-13
   (harta reală e un <div>, nu un <svg>, deci regula n-avea ce mai prinde legitim). Atribuirea
   rămâne totuși ascunsă mai jos — cerință explicită a userului, nu strict necesară după fix. */
.leaflet-control-attribution{ display:none !important; }
/* click pe harta miniaturală (sidebar) -> modal mare, interactiv — vezi js/harta.js,
   deschideHartaModal()/initHartaLeaflet() */
.leaflet-map-clickabil{ cursor:pointer; }

/* unitate/căutare fără nicio coordonată cunoscută (nici htl_coordonate, nici furnizor) */
.map-unavailable{
  display:flex; align-items:center; justify-content:center; height:100%; margin:0;
  padding:0 16px; text-align:center; font-size:.8rem; color:var(--ink-soft);
}

/* ---------- modal hartă (click pe harta miniaturală, js/harta.js) ---------- */
.harta-modal-overlay{
  position:fixed; inset:0; z-index:2000; background:rgba(20,30,25,.6);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.harta-modal-cutie{
  position:relative; width:85vw; height:85vh; max-width:1340px;   /* 70% -> 85%, user 2026-09-13 (plafonul a crescut proporțional) */
  background:#fff; border-radius:var(--radius-md); overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.4);
}
.harta-modal-harta{ width:100%; height:100%; }
.harta-modal-close{
  position:absolute; top:10px; right:10px; z-index:1001; width:36px; height:36px;
  border:none; border-radius:50%; background:#fff; box-shadow:var(--shadow);
  font-size:1.5rem; line-height:1; color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.harta-modal-close:hover{ background:var(--mist); }
/* blochează scroll-ul paginii din spate cât modalul e deschis */
body.harta-modal-deschisa{ overflow:hidden; }

/* popup marker (harta mare, interactivă) — nume + tarif (dacă e sejur+ofertă), centrate;
   TOATĂ zona (un <a>, dacă avem href) e clic-abilă spre pagina unității — fără buton
   separat — vezi initHartaLeaflet()/rezultate.js, js/harta.js */
.harta-popup{
  display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center;
  font-size:.86rem; min-width:140px; text-decoration:none; color:inherit;
}
a.harta-popup{ cursor:pointer; }
.harta-popup strong{ color:var(--primary-dark); }
a.harta-popup:hover strong{ text-decoration:underline; }
.harta-popup-pret{ color:var(--accent-dark); font-weight:700; }

/* marker DISTINCT pentru punctul de referință (ex: "hoteluri în apropiere") — pin colorat cu
   punct alb, diferit de pin-ul albastru implicit Leaflet — vezi ICONA_MARKER_REFERINTA, js/harta.js */
.harta-marker-referinta-pin{ display:block; width:26px; height:32px; position:relative; }
.harta-marker-referinta-pin::before{
  content:""; position:absolute; top:0; left:3px; width:20px; height:20px;
  background:var(--accent); border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.harta-marker-referinta-pin::after{
  content:""; position:absolute; top:7px; left:9px; width:8px; height:8px;
  background:#fff; border-radius:50%;
}

@media (max-width:720px){
  .harta-modal-cutie{ width:94vw; height:82vh; }
}

/* filtre */
.filters-panel{ display:flex; flex-direction:column; gap:18px; }
.filter-group-title{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:8px; }
.filter-price{ display:flex; align-items:center; gap:8px; }
.filter-price input[type="number"]{
  width:100%; padding:7px 8px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  font-family:inherit; font-size:.84rem; color:var(--ink);
}
.filter-price span{ color:var(--ink-soft); }
.filter-options{ display:flex; flex-direction:column; gap:7px; }
.filter-option{ display:flex; align-items:center; gap:8px; font-size:.84rem; color:var(--ink); cursor:pointer; }
.filter-option input{ accent-color:var(--primary); width:16px; height:16px; flex-shrink:0; }
.filter-stars{ display:flex; gap:6px; flex-wrap:wrap; }
.filter-star-btn{
  border:1.5px solid var(--line); border-radius:var(--radius-sm); background:#fff; padding:6px 11px;
  font-size:.8rem; color:var(--ink-soft); font-weight:600;
}
.filter-star-btn.active{ border-color:var(--accent); color:var(--accent-dark); background:#fff6ee; }
.filter-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.filters-reset{ background:none; border:none; padding:0; font-size:.78rem; color:var(--ink-soft); text-decoration:underline; cursor:pointer; }
.filters-reset:hover{ color:var(--accent-dark); }

/* ---------- listă de unități ---------- */
.results-main{ min-height:320px; }
@media (min-width:1024px){
  /* positioned DOAR la desktop - vezi nota de la .results-layout mai sus - readuce contextul
     de poziționare al .results-overlay la .results-main (comportamentul dinainte, neschimbat) */
  .results-main{ position:relative; }
}
.unit-list{ display:flex; flex-direction:column; gap:16px; }

/* pătură peste unitățile deja randate, cât timp căutarea încă rulează — le lasă vizibile
   (translucid), dar blochează click-urile pe ele — user, 2026-09-14: „spinner-ul sa fie
   mult mai mare, central pe zona de hoteluri ... o patura care lasa sa se vada unitatile
   dar blocheaza accesul la ele". Pătura acoperă TOATĂ zona (.results-main), care crește în
   înălțime pe măsură ce apar unități — .results-overlay-inner e `sticky`, centrat pe partea
   CURENT VIZIBILĂ a ecranului (nu pe toată înălțimea, deja mult mai mare decât ecranul la o
   căutare cu multe rezultate), altfel spinner-ul „alunecă" sub ce se vede efectiv — user,
   2026-09-14: „la prima randare cand incep sa apara unitatile, dispare spinnerul, ramanand
   patura activa". */
.results-overlay{
  position:absolute; inset:0; z-index:20;
  background:rgba(255,255,255,.5); backdrop-filter:blur(1px);
  border-radius:var(--radius-md);
}
.results-overlay[hidden]{ display:none; }
.results-overlay-inner{
  position:sticky; top:50vh; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.results-overlay-spinner{
  width:64px; height:64px; border-radius:50%;
  border:6px solid var(--line); border-top-color:var(--primary-dark);
  animation:results-spinner-rotire .7s linear infinite;
}
.results-overlay-text{
  margin:0; font-size:1.05rem; font-weight:700; color:var(--ink);
  background:#fff; padding:9px 20px; border-radius:999px; box-shadow:var(--shadow);
}

/* grup de unități pe localitate (căutare pe județ) — renderUnitListGrupatPeLocalitate(),
   js/rezultate.js — titlul e chiar lista de cartușe a grupului (gap identic cu .unit-list) */
.unit-group{ display:flex; flex-direction:column; gap:16px; }
.unit-group + .unit-group{ margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.unit-group-title{
  display:flex; align-items:baseline; gap:8px; font-size:1.15rem; margin:0;
}
.unit-group-title a{ color:var(--primary-dark); text-decoration:none; }
.unit-group-title a:hover{ text-decoration:underline; }
.unit-group-count{
  font-size:.76rem; font-weight:700; color:var(--ink-soft); background:var(--mist);
  padding:2px 9px; border-radius:999px;
}

/* căutare fără niciun rezultat (renderUnitList(), js/rezultate.js) */
.results-empty{
  text-align:center; padding:48px 20px; border:1px solid var(--line); border-radius:var(--radius-md);
  background:#fff; color:var(--ink-soft);
}
.results-empty p{ margin:4px 0; }
.results-empty p:first-child{ color:var(--ink); font-weight:600; }

.unit-card{
  position:relative;
  border:1px solid var(--line); border-radius:var(--radius-md); background:#fff; overflow:hidden;
  transition:box-shadow .2s, transform .2s;
}
.unit-card:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }

/* < 460px: poză (carusel derulabil dacă are 2+ poze) sus, pe toată lățimea, restul dedesubt.
   460–699px: poză 200x155 în stânga; în dreapta, centrate pe verticală, nume+stele și
   adresă; descrierea trece SUB tot rândul (poză + nume/adresă), pe toată lățimea.
   >= 700px: poză 260x200 în stânga; în dreapta, o singură coloană — nume+stele și
   adresă aliniate sus, cu descrierea imediat dedesubt, tot lângă poză (nu pe rând separat). */
@media (min-width:460px) and (max-width:699.98px){
  .unit-card{
    display:grid;
    grid-template-columns: 200px 1fr;
    grid-template-areas:
      "photo content"
      "extra extra";
    align-items:center;
  }
  .unit-carousel{ grid-area:photo; }
  .unit-content{ display:contents; }   /* dispare din box model — .unit-header/.unit-extra devin item-uri grid directe ale .unit-card */
  .unit-header{ grid-area:content; align-self:center; }
  .unit-extra{ grid-area:extra; align-self:start; }
}
@media (min-width:700px){
  .unit-card{ display:flex; align-items:flex-start; }
  .unit-content{ flex:1; min-width:0; }
}

/* carusel de poze */
.unit-carousel{ position:relative; width:100%; height:190px; background:var(--mist); overflow:hidden; }
@media (min-width:460px) and (max-width:699.98px){ .unit-carousel{ width:200px; height:155px; } }
@media (min-width:700px){ .unit-carousel{ width:260px; height:200px; flex:0 0 260px; } }
.unit-carousel-track{ display:flex; height:100%; transition:transform .25s ease; }
.unit-carousel-track > div{ flex:0 0 100%; height:100%; }
/* pozele sunt relativ pătratoase — le umplem fără să le deformăm (crop, nu stretch) */
.unit-carousel-track svg,
.unit-carousel-track img{ width:100%; height:100%; object-fit:cover; display:block; }
.unit-carousel .badge{
  position:absolute; top:10px; left:10px; z-index:2;
  background:var(--mint); color:#fff; font-size:.66rem; font-weight:700; padding:4px 9px; border-radius:999px;
}
.carousel-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:28px; height:28px; border-radius:50%; border:none; background:rgba(43,58,77,.55); color:#fff;
  font-size:.9rem; line-height:1; display:flex; align-items:center; justify-content:center;
}
.carousel-nav:hover{ background:rgba(43,58,77,.8); }
.carousel-nav[hidden]{ display:none; }   /* fără asta, display:flex de mai sus bate [hidden] (poze reale: săgețile pornesc ascunse) */
.carousel-prev{ left:8px; }
.carousel-next{ right:8px; }
.carousel-dots{ position:absolute; left:0; right:0; bottom:8px; z-index:2; display:flex; justify-content:center; gap:5px; }
.carousel-dots[hidden]{ display:none; }   /* fără asta, display:flex de mai sus bate [hidden] */
.carousel-dots button{ width:6px; height:6px; border-radius:50%; border:none; background:rgba(255,255,255,.6); padding:0; }
.carousel-dots button.active{ background:#fff; }

/* antet cartuș unitate — nume + stele pe același rând, apoi adresă */
.unit-header{ padding:16px 16px 4px; min-width:0; }
@media (min-width:700px){ .unit-header{ padding:12px 16px 4px; } }
.unit-name-row{ display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; }
.unit-name-row h3{ font-size:1.08rem; }
.unit-name-row .stars{ margin-bottom:0; }   /* .stars normal e gândit ca bloc separat; aici stă pe rândul numelui */
.unit-card-link::after{ content:""; position:absolute; inset:0; z-index:1; }  /* „stretched link”: tot cartușul devine clicabil */
.unit-address{ display:flex; align-items:flex-start; gap:6px; font-size:.8rem; color:var(--ink-soft); margin:4px 0 0; }
.unit-address svg{ flex-shrink:0; margin-top:2px; color:var(--mint-dark); }
/* distanța față de unitatea de referință — doar pe "hoteluri în apropiere" (vezi u.distanta_km, js/rezultate.js) */
.unit-distanta{ font-size:.8rem; font-weight:600; color:var(--accent-dark); margin-top:4px; }

/* descriere + ofertă — imediat sub antet, tot lângă poză */
.unit-extra{ padding:4px 16px 16px; display:flex; flex-direction:column; gap:8px; }
.unit-desc{ font-size:.85rem; color:var(--ink-soft); }   /* trunchiată deja la 300 caractere în JS, nu mai clampăm vizual */
.unit-offer{
  background:var(--mist); border-radius:var(--radius-sm); padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.unit-offer .offer-desc{ font-size:.78rem; color:var(--ink-soft); }
.unit-offer .offer-price{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; color:var(--primary-deep); white-space:nowrap; }
.unit-offer .offer-price small{ font-family:var(--font-body); font-size:.66rem; font-weight:400; color:var(--ink-soft); }
.unit-no-offer{ font-size:.78rem; color:var(--ink-soft); font-style:italic; }

/* linie de diagnostic ADMIN (vezi debug_coduri_unitate() din includes/functii.php) —
   apare DOAR pentru SUNT_ADMIN, la căutări cu sejur; roșu = unitate neasociată încă
   unei unități proprii (prestatori), verde = deja asociată (codprest cunoscut) */
.unit-debug{ font-size:.72rem; font-style:italic; margin:0; }
.unit-debug.lipsa{ color:#c0392b; }
.unit-debug.ok{ color:#1f8a4c; }