/* =====================================================================
   common.css — folosit pe TOATE paginile (index.php, cautare.php, ...):
   tokens de culoare/tipografie, resetări de bază, header, footer,
   cartușul de căutare (reutilizat identic pe orice pagină) și câteva
   componente mici refolosibile (stele, rând de preț, buton mic).
   Stilurile specifice unei singure pagini stau în fișierul paginii
   (ex: css/index.css, css/rezultate.css).
   ===================================================================== */
:root{
  --white:#ffffff;
  --mist:#f3f7f5;
  --primary:#617ea1;
  --primary-dark:#41577a;
  --primary-deep:#2c3e56;
  --accent:#ff9639;
  --accent-dark:#e77e1f;
  --mint:#8ac2b3;
  --mint-dark:#5fa190;
  --ink:#2b3a4d;
  --ink-soft:#5b6b80;
  --line:#e2e8ee;
  --danger:#d64545;
  --shadow: 0 20px 45px -20px rgba(43,58,77,.28);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 9px;
  --font-display: 'Fraunces', serif;
  --font-body: 'Public Sans', sans-serif;
  --gutter: clamp(14px, 4vw, 28px);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html,body{ max-width:100%; overflow-x:hidden; }

/* orice regulă de autor cu `display` (ex: .btn{display:inline-flex}, .rate-row{display:grid})
   are ÎNTOTDEAUNA prioritate față de stylesheet-ul implicit al browserului ([hidden]{display:none}),
   indiferent de specificitate — fără regula de mai jos, atributul HTML `hidden` nu are niciun
   efect vizual pe ORICE element care mai are și o clasă cu `display` propriu (confirmat de două
   ori cu bug-uri reale, 2026-09-12/13: mai întâi .rate-row/.rate-list, apoi .btn — de-aici
   regulă GLOBALĂ, cu !important, ca să nu mai apară din nou pe un al treilea selector) */
[hidden]{ display:none !important; }
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height:1.5;
  font-size:15px;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}
.wrap{ max-width:1180px; margin:0 auto; padding:0 var(--gutter); }
.eyebrow{
  font-family: var(--font-body);
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color: var(--mint-dark);
}
h1,h2,h3{ font-family: var(--font-display); color: var(--primary-deep); font-weight:600; line-height:1.14; word-wrap:break-word; }

/* key-teeth divider — motiv de semnătură, ecou al cheii din logo */
.key-divider{
  height:12px; width:100%;
  background-image: repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 26px);
  background-position:center; position:relative;
}
.key-divider::before{
  content:""; position:absolute; inset:0;
  background-image: repeating-linear-gradient(90deg, var(--mint) 0 2px, transparent 2px 130px);
  opacity:.55;
}

/* ---------- HEADER ---------- */
header.site{ background: var(--white); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.top-links{ background: var(--primary-deep); color:#dfe7ef; font-size:.88rem; }
.top-links .wrap{
  display:flex; align-items:center;
  padding-top:6px; padding-bottom:6px; gap:14px;
}
/* scroll-ul orizontal stă DOAR pe .seo-links, nu pe tot rândul — altfel
   „justify-content:space-between” pe un container cu overflow rupe scroll-ul
   (bug clasic, mai ales pe Safari/iOS: .aux ajunge greu accesibil sau
   primul link din .seo-links devine inaccesibil la scroll spre stânga) */
.top-links .seo-links{
  display:flex; gap:16px; white-space:nowrap;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  flex:1 1 auto; min-width:0;
}
.top-links .seo-links::-webkit-scrollbar{ display:none; }
.top-links .seo-links a{ opacity:.85; }
.top-links .seo-links a:hover{ opacity:1; color: var(--accent); }
.top-links .aux{ white-space:nowrap; flex-shrink:0; }
.top-links .aux a{ opacity:.85; margin-left:14px; }

.main-nav{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; gap:10px; }
.logo img{ height:47px; width:auto; }
.nav-actions{ display:flex; align-items:center; gap:18px; font-weight:600; font-size:.88rem; }
.nav-actions a{ color: var(--primary-dark); white-space:nowrap; }
.nav-actions a:hover{ color: var(--accent-dark); }
.lang-switch{ display:flex; align-items:center; gap:2px; font-size:.8rem; font-weight:700; }
.lang-switch .lang-link{ display:flex; align-items:center; gap:4px; padding:4px 8px; border-radius:6px; color: var(--primary-dark); opacity:.55; }
.lang-switch .lang-link:hover{ opacity:.85; }
.lang-switch .lang-link.is-active{ opacity:1; background: var(--line); }
.lang-switch .lang-flag{ font-size:1rem; line-height:1; }
.nav-toggle{
  display:none; background:none; border:1.5px solid var(--line); border-radius:8px;
  width:38px; height:38px; align-items:center; justify-content:center; flex-shrink:0;
}
/* pe mobil, declanșatorul arată steagul limbii curente (nu un hamburger) - user, 2026-09-17:
   "As inlocui semnul cu simbolul limbii curente si cand se da click sa apara limbile vertical" */
.nav-toggle-flag{ font-size:1.3rem; line-height:1; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius: 999px; padding:10px 20px; font-weight:700; font-size:.88rem; border:none;
  transition: all .18s ease; white-space:nowrap;
}
.btn-accent{ background: var(--accent); color:#fff; box-shadow: 0 10px 20px -8px rgba(255,150,57,.55); }
.btn-accent:hover{ background: var(--accent-dark); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--primary-dark); border:1.5px solid var(--line); }
.btn-ghost:hover{ border-color: var(--primary); }

@media (max-width: 720px){
  .nav-actions{
    display:none; position:absolute; top:100%; right: var(--gutter); left:auto; background:#fff;
    flex-direction:column; align-items:stretch; gap:0; border:1px solid var(--line); border-radius:10px;
    box-shadow: var(--shadow); padding:6px; min-width:150px;
  }
  .nav-actions.open{ display:flex; }
  .nav-actions a{ padding:10px 4px; border-bottom:1px solid var(--line); }
  .nav-actions .btn{ margin-top:8px; }
  /* lista de limbi - verticală pe mobil (nu mai încape orizontal, la 7 limbi) - user, 2026-09-17 */
  .nav-actions .lang-switch{ flex-direction:column; align-items:stretch; gap:2px; }
  .nav-actions .lang-switch .lang-link{ padding:10px 12px; border-radius:8px; }
  .nav-toggle{ display:flex; }
  header.site{ position:relative; }
  .main-nav{ position:relative; }
}

/* ---------- CARTUȘ DE CĂUTARE (reutilizat identic pe orice pagină) ---------- */
.search-cartridge-wrap{ padding: 22px 0 26px; }
.search-cartridge{
  position:relative; z-index:3;
  max-width:1020px; margin:0 auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border:1px solid var(--line);
  padding: clamp(14px, 3vw, 22px) clamp(14px, 3vw, 20px) 18px;
}
.sc-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.sc-row:first-child{ margin-top:0; }   /* :first-child, nu +, ca alte elemente (buton reset date etc.) să nu strice ritmul */

.reset-dates-btn{
  display:inline-block; margin-top:10px;
  background:none; border:none; padding:0;
  font-family:inherit; font-size:.78rem; font-weight:600;
  color:var(--primary-dark); text-decoration:underline; cursor:pointer;
}
.reset-dates-btn:hover{ color:var(--accent-dark); }
.reset-dates-btn[hidden]{ display:none; }   /* fără asta, display:inline-block de mai sus bate [hidden] */
.sc-field{
  flex:1 1 100%;
  min-width:0;
  position:relative;
  border:1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding:8px 12px 7px;
  transition:border-color .15s;
}
/* rândul de date: Sosire | Plecare | Nopți
   - sub 340px: toate 3 unul sub altul (regula de bază .sc-field: flex 1 1 100%)
   - de la 340px în sus: toate 3 pe aceeași linie (datele mai late, Nopți mai îngust —
     valoarea din Nopți e doar cifra, fără „noapte/nopți”, ca să încapă) */
@media (min-width:340px){
  .sc-row-dates .date-field{ flex:2 1 0; }
  .sc-row-dates .nights-field{ flex:1 1 0; }
}
.sc-field:focus-within{ border-color: var(--primary); }
.sc-field label{
  display:block; font-size:.65rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color: var(--ink-soft); margin-bottom:3px;
}
.sc-field input{
  border:none; outline:none; width:100%; min-width:0;
  font-family:var(--font-body); font-size:.95rem; color:var(--ink); background:transparent;
}
.sc-suggest{
  position:absolute; top:100%; left:0; right:0; margin-top:8px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow: var(--shadow); z-index:10; overflow:hidden; display:none;
}
.sc-suggest.show{ display:block; }
.sc-suggest button{
  display:flex; width:100%; align-items:center; gap:10px; text-align:left;
  padding:10px 14px; border:none; background:none; font-size:.86rem; color:var(--ink);
  border-bottom:1px solid var(--line);
}
.sc-suggest button:last-child{ border-bottom:none; }
.sc-suggest button:hover{ background: var(--mist); }
.sc-suggest .tag{
  font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  padding:2px 7px; border-radius:5px; background: var(--mint); color:#fff; flex-shrink:0;
}
.sc-suggest .tag.city{ background: var(--primary); }
.sc-suggest .tag.hotel{ background: var(--accent); }
.sc-suggest-loading, .sc-suggest-empty{ padding:10px 14px; font-size:.82rem; color:var(--ink-soft); }

/* stare de eroare pe câmpuri (ex: destinație neselectată la trimiterea căutării) */
.sc-field.invalid{ border-color: var(--danger); }
.field-error{ color: var(--danger); font-size:.74rem; margin-top:6px; }

/* câmpuri de dată — buton custom + calendar propriu (format zz.ll.aaaa fix) */
.date-field{ position:relative; }
.date-btn{
  width:100%; text-align:left; background:none; border:none; padding:0;
  font-family:inherit; font-size:.95rem; color:var(--ink); cursor:pointer;
}
.date-btn.placeholder{ color: var(--ink-soft); }
.calendar-panel{
  display:none; position:absolute; top:100%; left:0; margin-top:8px;
  width:280px; max-width:88vw;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow);
  padding:14px; z-index:25;
}
.calendar-panel.show{ display:block; }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cal-head strong{ font-size:.86rem; color:var(--primary-dark); text-transform:capitalize; }
.cal-nav{ width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line); background:#fff; color:var(--primary); font-weight:700; flex-shrink:0; }
.cal-nav:disabled{ opacity:.3; cursor:not-allowed; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-dow{ font-size:.6rem; text-align:center; color:var(--ink-soft); font-weight:700; padding-bottom:4px; text-transform:uppercase; }
.cal-day{ aspect-ratio:1; border:none; background:none; border-radius:8px; font-size:.78rem; color:var(--ink); }
.cal-day:hover:not(:disabled){ background:var(--mist); }
.cal-day.today{ font-weight:700; color:var(--primary-dark); }
.cal-day.selected{ background:var(--accent); color:#fff; font-weight:700; }
.cal-day:disabled{ color:#ccd3db; cursor:not-allowed; }
.cal-hint{ font-size:.72rem; color:var(--ink-soft); margin-top:8px; }
/* câmp „Nopți" — arată ca celelalte câmpuri, dar cu design de câmp nemodificabil */
.nights-field{ background:var(--mist); cursor:default; text-align:center; }
.nights-value{ display:block; font-size:.95rem; font-weight:600; color:var(--primary-dark); white-space:nowrap; }
.nights-value.is-empty{ color:var(--ink-soft); font-weight:500; }

/* --- Număr camere: câmp pe linie proprie (select, 1 implicit) --- */
.roomcount-field{ max-width:280px; }
.roomcount-field select{
  width:100%; margin-top:2px; border:none; outline:none; background:transparent;
  font-family:var(--font-body); font-size:.95rem; color:var(--ink); cursor:pointer;
}

/* --- Ocupare pe cameră: blocuri afișate direct în cartuș, unul sub altul --- */
#roomBlocks{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.room-block{
  background:var(--mist); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px;
}
.room-block-head{ margin-bottom:8px; }
.room-block-head span{ font-weight:700; font-size:.82rem; color:var(--primary-dark); }
.room-fields{ display:flex; flex-wrap:wrap; gap:10px; }
.room-fields .rf{ flex:1 1 100%; min-width:0; }
/* de la 270px (lățimea containerului, indiferent de pagină) în sus: exact 2 pe linie —
   Adulți+Copii pe primul rând, cele două vârste de copii (dacă există) pe al doilea */
@media (min-width:270px){
  .room-fields .rf{ flex:1 1 calc(50% - 5px); }
}
/* dacă rămâne un singur element orfan pe ultimul rând (ex: un singur copil cu vârstă),
   îl întinde pe toată lățimea, în loc să stea la jumătate cu spațiu gol lângă el */
.room-fields .rf:nth-child(3):last-child{ flex-basis:100%; }
.room-fields label{
  display:block; font-size:.62rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:3px;
}
.room-fields select{
  width:100%; padding:7px 8px; border-radius:var(--radius-sm); border:1.5px solid var(--line);
  background:#fff; font-family:var(--font-body); font-size:.86rem; color:var(--ink); cursor:pointer;
}
.room-fields select:focus{ outline:none; border-color:var(--primary); }

.sc-submit-row{ display:flex; justify-content:center; margin-top:14px; }
.btn-key{
  width:100%; background: var(--accent); color:#fff; border-radius:999px; padding:13px 22px;
  font-weight:700; font-size:.98rem; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  box-shadow: 0 12px 22px -8px rgba(255,150,57,.55); border:none;
}
@media (min-width:600px){ .btn-key{ width:auto; padding:13px 30px; } }
.btn-key:hover{ background:var(--accent-dark); }
.no-dates-note{ font-size:.74rem; color:var(--ink-soft); margin-top:6px; line-height:1.4; }

/* când datele stau pe un rând, calendarul de Plecare se aliniază la dreapta ca să nu iasă din ecran */
@media (min-width:340px){
  #checkoutCalendar{ left:auto; right:0; }
}

/* ---------- COMPONENTE REFOLOSIBILE (stele, rând de preț, buton mic) ---------- */
.stars{ color:var(--accent); font-size:.82rem; letter-spacing:1px; margin-bottom:8px; }
.price-row{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:12px; gap:8px; flex-wrap:wrap; }
.price-row .from{ font-size:.68rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.price-row .amount{ font-family:var(--font-display); font-size:1.2rem; color:var(--primary-deep); font-weight:600; }
.price-row .amount small{ font-family:var(--font-body); font-size:.68rem; color:var(--ink-soft); font-weight:400; }
.btn-sm{ padding:8px 14px; font-size:.8rem; border-radius:999px; }

/* ---------- FOOTER ---------- */
footer.site{ background: var(--primary-deep); color:#c9d5e3; padding-top:40px; }
.footer-top{ display:grid; grid-template-columns:1fr; gap:28px; padding-bottom:30px; }
@media (min-width:640px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .footer-top{ grid-template-columns:1.4fr 1fr 1fr 1.3fr; } }
.footer-top h4{ color:#fff; font-family:var(--font-body); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; }
.footer-top ul li{ margin-bottom:8px; font-size:.86rem; }
.footer-top ul li a:hover{ color:var(--accent); }
.footer-judete{ display:flex; flex-wrap:wrap; gap:6px 12px; font-size:.8rem; }
.footer-brand .logo-white{ filter:brightness(0) invert(1); opacity:.92; height:47px; margin-bottom:12px; }
.footer-brand p{ font-size:.84rem; color:#a9b8ca; max-width:280px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); padding:16px 0 24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 16px;
  font-size:.76rem; color:#8fa0b6;
}
.footer-bottom a{ margin-left:14px; }
.footer-bottom a:first-child{ margin-left:0; }
.footer-bottom a:hover{ color:#fff; }

/* ---------- pagini de conținut static (Despre noi, Contact, Termeni, GDPR, Cookie) ---------- */
.legal-page{ max-width:820px; margin:0 auto; padding:40px var(--gutter) 64px; }
.legal-page h1{ font-size:1.7rem; margin-bottom:18px; }
.legal-page h2{ font-size:1.15rem; margin:28px 0 10px; }
.legal-page p{ color:var(--ink-soft); font-size:.94rem; line-height:1.6; margin-bottom:12px; }
.legal-page ul{ margin:0 0 12px 20px; color:var(--ink-soft); font-size:.94rem; line-height:1.6; }
.legal-page li{ margin-bottom:6px; }
.legal-page a{ color:var(--primary-dark); font-weight:600; text-decoration:underline; }
.legal-page .contact-grid{ display:grid; gap:14px; margin:18px 0 26px; }
@media (min-width:640px){ .legal-page .contact-grid{ grid-template-columns:1fr 1fr; } }
.legal-page .contact-card{ background:var(--mist); border:1px solid var(--line); border-radius:var(--radius-md); padding:16px 18px; }
.legal-page .contact-card strong{ display:block; margin-bottom:4px; color:var(--primary-deep); }
.legal-page .vacanta-note{ background:var(--mist); border:1px solid var(--line); border-radius:var(--radius-md); padding:14px 18px; font-size:.9rem; color:var(--ink); }

/* ---------- BREADCRUMB (orice pagină, sub header) ---------- */
.breadcrumb{ padding:12px var(--gutter); font-size:.8rem; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.breadcrumb a{ color:var(--primary-dark); font-weight:600; }
.breadcrumb a:hover{ color:var(--accent-dark); }
.breadcrumb span[aria-current]{ color:var(--ink); font-weight:600; }
.breadcrumb .sep{ color:var(--ink-soft); font-weight:700; }

@media (max-width:340px){
  :root{ --gutter:12px; }
  .btn{ padding:9px 14px; font-size:.82rem; }
  .top-links .seo-links{ gap:10px; }
}