/* ============================================================
   Staylo — Stiluri responsive mobile
   ============================================================ */

/* ── Tablet (max 900px) ── */
@media (max-width: 900px) {
  .detalii-layout { grid-template-columns: 1fr !important; }
  /* Cardul de rezervare rămâne după conținut (poze, descriere, disponibilitate) */
  .rez-card { position: static !important; }
  .galerie { grid-template-columns: 1fr !important; grid-template-rows: 260px !important; }
  .gal-main { grid-row: 1 !important; }
  .gal-item { display: none !important; }
}

@media (max-width: 700px) {
  .cazari-grid { grid-template-columns: 1fr !important; }
}

/* ── Mobile (max 768px) ── */
@media (max-width: 768px) {
  nav { padding: 0 14px; height: 58px; }
  /*  mobile.css se încarcă după <style>-ul din index.html, deci la
      specificitate egală câștigă el. Repetăm aici marginea de siguranță de
      sus, altfel regula de mai sus ar anula-o pe telefon — exact acolo unde
      contează. */
  #navbar {
    padding: env(safe-area-inset-top, 0px) calc(14px + env(safe-area-inset-right, 0px))
             0 calc(14px + env(safe-area-inset-left, 0px));
    height: calc(58px + env(safe-area-inset-top, 0px));
  }
  .logo { font-size: 19px; }

  /* Hero */
  /* Padding-ul de sus ține cont de bara care acum îl acoperă (vezi .hero din index.html) */
  .hero { min-height: 70vh !important; padding: 80px 16px 36px; padding-top: calc(80px + var(--navbar-h, 58px)) !important; background-position: center center !important; align-items: flex-end !important; }
  .hero-title { font-size: 32px !important; letter-spacing: -.3px !important; }
  .hero-sub { font-size: 15px !important; margin-bottom: 22px; }
  .autocomplete-dropdown { min-width: calc(100vw - 48px) !important; left: -10px !important; }

  /* Search box → stivuit vertical */
  .search-box {
    flex-direction: column !important;
    border-radius: var(--r-lg) !important;
    gap: 0 !important;
    padding: 4px !important;
  }
  .search-field {
    border-left: none !important;
    border-bottom: 1px solid var(--border);
    border-radius: 0 !important;
    min-width: unset !important;
  }
  .search-field:last-of-type { border-bottom: none; }
  .search-btn {
    width: 100% !important;
    justify-content: center;
    padding: 14px !important;
    border-radius: var(--r) !important;
    margin: 4px !important;
  }

  /* Filters */
  .filters-bar { padding-bottom: 2px; gap: 6px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .filter-chip { flex-shrink: 0; }

  /* Container */
  .container { padding: 16px !important; }

  /* Cards */
  .cazare-card { border-radius: var(--r-lg); }
  .cazare-img { height: 180px; }

  /* Detalii */
  .detalii-wrap { padding: 14px !important; }
  .detalii-titlu { font-size: 22px !important; }
  .detalii-stats { gap: 12px !important; }
  /* Fără înălțime fixă aici: rândul de 260px de mai sus era tăiat la 220px de
     „overflow:hidden", exact peste butonul „Toate pozele". */
  .galerie { border-radius: var(--r-lg) !important; }

  /* Calendar */
  .cal-zi { height: 32px !important; font-size: 12px !important; border-radius: 6px !important; }

  /* Dotări */
  .dotari-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Dashboard */
  .dash-header { padding: 16px 16px 0 !important; }
  .dash-title { font-size: 20px !important; }
  .stat-cards { grid-template-columns: 1fr 1fr !important; }
  .stat-val { font-size: 22px !important; }
  /* Cardul de rezervare — layout vertical (detalii complete în index.html) */
  .rez-item { flex-wrap: wrap; gap: 12px; }
  .rez-item-img { width: 52px !important; height: 52px !important; }

  /* Auth — layout split-screen: pe mobil imaginea e ascunsă, rămâne doar formularul */
  .auth-wrap { padding: 0 !important; margin: 0 !important; min-height: auto !important; }
  .auth-form-side { padding: 28px 18px !important; align-items: flex-start !important; }
  .auth-card { padding: 0 !important; max-width: 100% !important; }
  .auth-title { font-size: 24px !important; }
  .tip-selector { gap: 8px; }

  /* Form */
  .form-row { grid-template-columns: 1fr !important; }
  input, select, textarea { font-size: 16px !important; } /* previne zoom iOS */

  /* Modals */
  .modal { padding: 20px 16px !important; border-radius: 20px 20px 0 0 !important; }
  .modal-title { font-size: 16px !important; }

  /* Nav notif dropdown */
  .notif-dropdown { left: 8px !important; right: 8px !important; min-width: unset !important; top: 66px !important; }

  /* Buton toate pozele */
  .btn-toate-pozele { font-size: 12px; padding: 6px 10px; bottom: 10px; right: 10px; }

  /* Proprietar row */
  .proprietar-row { flex-wrap: wrap; }

  /* Dash tabs scroll */
  .dash-tabs { overflow-x: auto; }
  .dash-tab { padding: 8px 14px; font-size: 13px; white-space: nowrap; }

  /* Buttons */
  button, .btn, [onclick] {
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    touch-action: manipulation;
  }
}

/* ══════════════════════════════════════════════════════════════
   ȚINTE TACTILE — 44px, pragul recomandat și de Apple, și de Google.
   Din padding-ul de bază, butoanele ieșeau 36-40px: „Intră în cont",
   „Rezervă", filtrele de categorie, butoanele +/− de la număr de persoane.

   Regula stă AICI, nu în <style> din index.html: mobile.css se încarcă
   după el, deci la specificitate egală tot ce e aici câștigă. O regulă
   scrisă acolo ar fi arătat corect în cod și n-ar fi făcut nimic.
   ══════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  .btn, .filter-chip, .tip-option, .sf-step, .search-btn, .auth-switch a,
  .cod-retrimite button, .cazare-fav, .logo {
    min-height: 44px;
  }
  /* Inima de pe card e pătrată: îi dau și lățimea, altfel iese ovală */
  .cazare-fav { width: 44px !important; height: 44px !important; }
  /* Logoul e un link de text — îi dau înălțime din padding, fără să-l mut */
  .logo { display: inline-flex; align-items: center; }
  /* Butoanele au deja text centrat pe verticală doar dacă sunt flex */
  .btn, .filter-chip, .sf-step, .cod-retrimite button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Linkurile din text („Ai uitat parola?", „Înregistrează-te") sunt inline:
     le dau înălțime fără să le rup poziția în frază. */
  .auth-switch a, .auth-card a[onclick] {
    display: inline-block;
    padding: 12px 6px;
  }
}

/* ── Telefoane mici (max 390px) ── */
@media (max-width: 390px) {
  .hero-title { font-size: 22px !important; }
  .logo { font-size: 17px; }
  .stat-cards { grid-template-columns: 1fr !important; }
  .dotari-grid { grid-template-columns: 1fr !important; }
  .cazare-img { height: 160px; }
}

/* ============================================================
   Ținte de atingere — minimul de 44×44 px
   ============================================================
   Pragul vine din ghidurile Apple (Human Interface Guidelines) și Google
   (Material). Apple respinge la review aplicațiile cu butoane prea mici —
   ghidul 4.0 Design. Regulile de mai jos au fost scrise după ce scriptul
   `npm run qa:afisare` a măsurat fiecare element interactiv de pe cele 27 de
   ecrane, la 320, 390 și 768 px.

   Blocul stă la finalul fișierului, și `mobile.css` se încarcă după `<style>`-ul
   din index.html: la specificitate egală câștigă ce vine ultimul, deci regulile
   astea nu pot fi anulate din greșeală de o declarație anterioară.

   `(pointer: coarse)` prinde ecranele atinse cu degetul, nu lățimea ferestrei:
   o fereastră îngustă pe laptop nu are nevoie de ținte mari, iar o tabletă
   lată are.
   ============================================================ */
@media (pointer: coarse) {

  /* ── Câmpuri de formular ──
     Erau la 43px — un pixel sub prag, din padding + line-height. */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="number"], input[type="date"], input[type="url"],
  input[type="search"], select, textarea {
    min-height: 44px;
  }
  textarea { min-height: 88px; }

  /* Câmpul de căutare stă într-o casetă compusă; îi dau înălțimea casetei,
     altfel ținta reală e doar rândul de text de 21px. */
  #inp-destinatie, .sf-input input { min-height: 44px; }

  /* ── Pașii pentru numărul de persoane ── */
  .sf-step { min-width: 44px; min-height: 44px; }
  .sf-step-input, #inp-persoane { min-height: 44px; min-width: 44px; }

  /* ── Calendare ──
     Zilele sunt pătrate într-o grilă de 7 coloane. La 320px lățimea nu permite
     44px pe coloană, deci creștem pe înălțime, care e liberă: ținta rămâne
     suficient de mare la atingere chiar dacă e puțin mai îngustă. */
  .cal-btn, #cald-prev, #cald-next { min-width: 44px; min-height: 44px; }
  .cal-zi, .cald-zi { min-height: 44px; }

  /* ── Bara de sus ── */
  .notif-btn, #btn-mesaje, #btn-notif { min-width: 44px; min-height: 44px; }

  /* ── Taburile de dashboard ── */
  .dash-tab { min-height: 44px; }

  /* ── Formularul de adăugare cazare ── */
  .nav-back, .nav-save, #btn-save-top { min-height: 44px; }

  /* ── Pastila „Vezi pe hartă" de pe pagina cazării ── */
  #det-maps-btn { min-height: 44px; padding-top: 0; padding-bottom: 0; }

  /* ── Închiderea modalelor și a galeriei ── */
  .modal-close, .lbx-close, .lbx-nav { min-width: 44px; min-height: 44px; }
  /*  Săgețile din galerie și butoanele de paginare apar doar când există
      destul conținut, deci au scăpat primei măsurători — se văd abia cu
      cel puțin două pagini de anunțuri și o cazare cu mai multe poze. */
  .lbx-arrow, #lbx-prev, #lbx-next { min-width: 44px; min-height: 44px; }
  .page-btn { min-width: 44px; min-height: 44px; }

  /* ── Bifele ──
     O bifă de 17px e greu de nimerit. O mărim și păstrăm eticheta clicabilă. */
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
    min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
  }
}