/* ===================================================================
   VARIABLES & RESETS
=================================================================== */
:root{
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --secondary:#1d4ed8;
  --dark:#1e293b;
  --light:#f8fafc;
  --gray:#94a3b8;
  --danger:#dc2626;
  --success:#16a34a;
  --form-bg:#ffffff;
  --btn-hover:#0056b3;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background:#f1f5f9;
  color:var(--dark);
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto}
.hidden{display:none !important}

/* ===================================================================
   LAYOUT HELPERS
=================================================================== */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1rem}
.section{padding:3rem 0}
.text-center{text-align:center}

/* ===================================================================
   TYPOGRAPHY & BUTTONS
=================================================================== */
h1,h2,h3,h4{margin-bottom:1rem;line-height:1.2}
.btn{
  display:inline-block; padding:.75rem 1.5rem;
  background:#003a77; color:#fff; text-decoration:none;
  border-radius:.5rem; font-weight:600; border:none; cursor:pointer;
  transition:all .3s ease;
}
.btn:hover{background:var(--primary-dark); transform:translateY(-2px)}
.btn-secondary{background:var(--secondary)}
.btn-secondary:hover{background:#007bff}

/* ===================================================================
   HEADER & NAVBAR (+ Drawer)
=================================================================== */
header{
  position:sticky; top:0; background:#fff; z-index:100;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
  padding-top:env(safe-area-inset-top);
}
nav{
  display:flex; align-items:center; justify-content:space-between; padding:1rem 0;
}
.logo img{height:50px; width:auto}

.nav-links{display:flex; gap:2rem; list-style:none}
.nav-links a{
  font-weight:600; text-decoration:none; color:var(--dark); transition:color .3s;
}
.nav-links a:hover{color:var(--primary)}

.mobile-menu-btn{display:none; font-size:1.5rem; border:none; background:0; cursor:pointer; color:var(--dark)}

.language-switcher{display:flex; gap:.5rem}
.language-btn{
  background:0; border:0; cursor:pointer; padding:.25rem; border-radius:.25rem; transition:.3s;
}
.language-btn:hover,.language-btn.active{background:rgba(0,0,0,.05)}

/* Drawer mobil */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(1px);
  opacity:0; transition:.2s; z-index:700;
}
.drawer-overlay.active{opacity:1}
.drawer{
  position:fixed; inset:0 auto 0 0; width:min(86%,380px);
  background:#fff; color:#0b1220;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transform:translateX(-101%); transition:transform .25s ease;
  display:flex; flex-direction:column; z-index:710; outline:none;
  height:100dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain;
  contain:layout paint size;
  padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
}
.drawer.open{transform:translateX(0)}
.drawer-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid #e6e8ee; position:sticky; top:0; background:#fff; z-index:1;
}
.drawer-title{font-weight:700}
.drawer-close{background:0; border:0; font-size:28px; line-height:1; cursor:pointer}
.drawer-content{flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px 14px}
.drawer-nav{display:flex; flex-direction:column; gap:4px; padding:10px 0}
.drawer-nav a{padding:12px 16px; border-radius:10px; color:#0b1220; text-decoration:none; font-weight:600}
.drawer-nav a:hover{background:#f3f5f9}
.drawer-section{padding:12px 14px; border-top:1px solid #eef0f4}
.lang-switcher-mobile{display:flex; gap:10px}
.drawer .language-btn{background:#f3f5f9; border:1px solid #e6e8ee; border-radius:8px; padding:8px 10px; font-weight:600}
.drawer .language-btn.active,.drawer .language-btn:hover{background:#e9eefb; border-color:#dbe2ff}
.drawer-btn{
  display:flex; align-items:center; gap:8px; justify-content:center; width:100%;
  padding:10px 14px; border-radius:12px; background:#0ea5e9; color:#fff; text-decoration:none; font-weight:700;
}
.drawer-btn.outline{background:transparent; border:1px solid #cfd6e6; color:#0b1220}
.drawer-btn.phone{background:#0077cc}
.grid-buttons{display:grid; grid-template-columns:1fr; gap:10px}
.drawer-footer{
  margin-top:auto; padding:12px 14px; color:#6b7280; border-top:1px solid #eef0f4;
  position:sticky; bottom:0; background:#fff; z-index:1;
}

/* Ascundem vechiul dropdown pe mobil (folosim drawer) */
@media (max-width:768px){
  .nav-links{position:static; transform:none !important; display:none !important}
  .mobile-menu-btn{display:block}
}

/* ===================================================================
   HERO
=================================================================== */
.hero{
  background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.438)), url("/imagini/ChatGPT Image Aug 14, 2025, 11_37_40 PM.png");
  background-size:cover; background-position:center; color:#fff; padding:5rem 0; text-align:center;
}
.hero h1{font-size:2.5rem; margin-bottom:1.5rem}
.hero p{font-size:1.25rem; max-width:800px; margin:0 auto 2rem}
@media (max-width:768px){
  .hero h1{font-size:2rem}
  .hero p{font-size:1rem}
}

/* ===================================================================
   BOOKING FORM (clean grid + mobile)
=================================================================== */
.container-booking{
  max-width:1100px; margin:40px auto; padding:30px;
  background:rgba(255,255,255,.98);
  border-radius:15px; box-shadow:0 10px 20px rgba(0,0,0,.2);
  /* spațiu pentru CTA-uri plutitoare */
  padding-bottom:calc(30px + env(safe-area-inset-bottom));
}

/* Titlu secțiune */
.container-booking h2{
  text-align:center; color:#007bff; margin-bottom:30px; font-size:2rem;
}

/* GRID 2C -> 1C */
form#reservationForm{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:20px 18px;
  justify-content:space-between;
}
.form-group-booking{
  display:flex; flex-direction:column; min-width:0;
}
/* Elemente pe întreg rândul */
.form-group-booking.full{grid-column:1/-1}
#reservationForm .btn-submit{grid-column:1/-1; width:100%}

/* Labels & fields */
label{margin-bottom:8px; font-weight:600; font-size:1.1rem}
input[type="text"],input[type="date"],input[type="time"],select{
  width:90%; padding:12px 15px; border:2px solid #ccc; border-radius:10px; font-size:16px;
  transition:border-color .3s, box-shadow .3s; height:48px;
}
input:focus,select:focus{border-color:#007bff; box-shadow:0 0 10px rgba(0,123,255,.3); outline:none}

/* Select cu săgeată custom și spațiu */
#reservationForm select{
  -webkit-appearance:none; appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%);
  background-position:calc(100% - 22px) 20px, calc(100% - 14px) 20px; background-size:8px 8px; background-repeat:no-repeat;
  padding-right:42px;
}

/* Submit */
.btn-submit{
  background:#0056b3; color:#fff; padding:16px 32px; font-size:1.3rem; border:0; border-radius:10px; cursor:pointer;
  margin-top:10px; transition:background .3s, transform .2s;
}
.btn-submit:hover{background:#0056b3; transform:translateY(-2px)}

/* Rezultate */
.result{
  grid-column:1/-1;
  margin-top:10px; padding:30px; background:#fff; border-radius:15px; box-shadow:0 8px 20px rgba(0,0,0,.15);
}
.result h3{text-align:center; color:#007bff; font-size:1.8rem; margin-bottom:20px}
.result p{font-size:1.1rem; margin:10px 0}

/* Mobile 1C + padding compact */
@media (max-width:768px){
  .container-booking{margin:20px 10px; padding:20px; border-radius:12px}
  .container-booking h2{font-size:1.5rem; margin-bottom:20px}
  form#reservationForm{grid-template-columns:1fr; gap:15px}
  .form-group-booking.full{grid-column:auto}
  label{font-size:1rem}
  input[type="text"],input[type="date"],input[type="time"],select{
    padding:10px 12px; font-size:16px; height:46px; border-radius:8px;
  }
  .btn-submit{width:100%; font-size:1.2rem}
  .result h3{font-size:1.6rem}
  .result p{font-size:1rem}
}

/* ===================================================================
   FEATURES
=================================================================== */
.features{background:#fff}
.features-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:2rem; margin-top:2rem;
}
.feature-card{
  background:var(--light); border-radius:1rem; padding:2rem; text-align:center; transition:.3s transform;
}
.feature-card:hover{transform:translateY(-5px)}
.feature-icon{font-size:2.5rem; color:var(--primary); margin-bottom:1rem}

/* ===================================================================
   FAQ
=================================================================== */
.faq-item{background:#fff; border-radius:.5rem; margin-bottom:1rem; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.1)}
.faq-question{padding:1.5rem; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600}
.faq-answer{padding:0 1.5rem; max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease}
.faq-item.active .faq-answer{padding:0 1.5rem 1.5rem; max-height:500px}

/* ===================================================================
   CONTACT
=================================================================== */
.contact-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
  gap:2rem; padding:3rem; justify-items:center;
}
.contact-info{
  background:var(--form-bg); border-radius:1rem; padding:2rem; box-shadow:0 10px 20px rgba(0,0,0,.1);
  max-width:500px; width:100%;
}
.contact-info h3{font-size:1.75rem; color:var(--primary); margin-bottom:1.5rem; font-weight:600}
.contact-info .form-group{margin-bottom:1.5rem}
.contact-info label{font-size:1rem; margin-bottom:.5rem}
.contact-info input,.contact-info textarea{
  width:100%; padding:.75rem; border:1px solid #ccc; border-radius:.5rem; font-size:1rem; transition:border-color .3s;
}
.contact-info input:focus,.contact-info textarea:focus{border-color:var(--primary); outline:none}
.contact-info button{
  padding:1rem; border:0; background:#005cbe; color:#fff; font-size:1rem; border-radius:.5rem; cursor:pointer; transition:background .3s;
}
.contact-info button:hover{background:var(--btn-hover)}

/* ===================================================================
   FOOTER
=================================================================== */
.site-footer{background:#006ebd; color:#fff; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.site-footer a{color:#fff; text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-inner{max-width:1200px; margin:0 auto; padding:40px 20px 24px}
.footer-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:56px; align-items:start}
.footer-col h3{font-size:16px; font-weight:700; margin:0 0 10px; border-bottom:1px solid #d6d9de; padding-bottom:10px}
.footer-links{list-style:none; padding:0; margin:0; display:grid; gap:12px; line-height:1.35}
.pay-logos{display:flex; align-items:center; border-radius:10px}
.pay-logos img{height:34px; display:block; object-fit:contain; filter:brightness(.98) contrast(1.05)}
.anpc-logos{display:flex; gap:14px; align-items:center; margin-top:18px; flex-wrap:wrap}
.anpc-logos img{height:54px; width:auto; display:block; border-radius:10px; background:#fff}
.footer-divider{border:0; border-top:1px solid #d6d9de; margin:26px 0 16px}
.footer-bottom{display:flex; gap:24px; flex-wrap:wrap; align-items:center; color:#fff; font-size:14px}

@media (max-width:960px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px}
  .pay-logos img{height:30px}
  .anpc-logos img{height:50px}
}
@media (max-width:640px){
  .footer-grid{grid-template-columns:1fr}
  .pay-logos,.anpc-logos{justify-content:flex-start}
  .footer-bottom{flex-direction:column; gap:6px; align-items:flex-start}
}

/* ===================================================================
   MODALS / POPUPS / TABLES (utilitare existente)
=================================================================== */
/* Overlay modal generic */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); z-index:999999}
.modal.is-open{display:flex}
.modal__dialog{
  background:#fff; color:#111; width:min(92vw,560px); max-height:88vh; overflow:auto;
  border-radius:14px; padding:20px 20px 24px; box-shadow:0 25px 80px rgba(0,0,0,.35); position:relative; -webkit-overflow-scrolling:touch;
}
.modal__dialog, .modal__dialog *{line-height:1.45; font-size:clamp(14px,1.6vw,16px)}
.modal__close{position:sticky; top:0; margin-left:auto; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; font-size:28px; border:0; background:transparent; color:#333; cursor:pointer}
@media (max-width:480px){
  .modal__dialog{width:100vw; height:100vh; max-height:none; border-radius:0; padding:16px; padding-top:calc(16px + env(safe-area-inset-top))}
}
@media (prefers-reduced-motion:no-preference){
  .modal{animation:fadeIn .2s ease-out}
  .modal__dialog{animation:popIn .2s ease-out}
}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
@keyframes popIn{from{transform:translateY(6px); opacity:.96} to{transform:none; opacity:1}}
.modal__dialog *{color:inherit}

/* Policy table */
.policy-table-wrap{margin:1.5rem 0}
.policy-table{width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid #e6e6e6; border-radius:8px; overflow:hidden; font-size:.98rem; line-height:1.5}
.policy-table thead th{text-align:left; background:#f7f7f8; font-weight:600; padding:14px 16px; border-bottom:1px solid #e6e6e6}
.policy-table td{vertical-align:top; padding:16px; border-top:1px solid #f0f0f0; width:50%}
.policy-table td ul{margin:0; padding-left:18px}
.policy-table td li{margin:6px 0}
.policy-table tbody tr:first-child td{border-top:none}
@media (max-width:640px){
  .policy-table thead{display:none}
  .policy-table,.policy-table tbody,.policy-table tr,.policy-table td{display:block; width:100%}
  .policy-table tr{border-top:1px solid #e6e6e6}
  .policy-table td{border:none; border-bottom:1px solid #f0f0f0; padding:12px 16px}
  .policy-table td::before{content:attr(data-label); display:block; font-weight:600; margin-bottom:6px; color:#333}
  .policy-table tbody tr:first-child{border-top:none}
}

/* Popup simplu */
.popup{position:fixed; inset:0; z-index:9999; display:grid; place-items:center}
.popup-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(2px); opacity:0; animation:fadeIn .2s forwards}
.popup-card{
  position:relative; width:min(92vw,460px); background:#fff; color:#111; border-radius:16px; padding:24px 20px 18px;
  box-shadow:0 20px 60px rgba(0,0,0,.25); transform:translateY(8px) scale(.98); opacity:0; animation:popIn .25s forwards
}
.popup-close{position:absolute; top:10px; right:12px; border:0; background:transparent; font-size:26px; line-height:1; cursor:pointer}
.popup-icon{width:64px; height:64px; border-radius:50%; margin:6px auto 12px; display:grid; place-items:center; font-size:32px; font-weight:700}
.popup.is-success .popup-icon{background:#e9f9ee; color:#0a7a33}
.popup.is-error .popup-icon{background:#ffebee; color:#b00020}
.popup h4{margin:6px 0 6px; font-size:1.2rem; text-align:center}
.popup p{margin:0 0 14px; text-align:center}
.popup .popup-ok{width:100%}
@media (prefers-color-scheme:dark){.popup-card{background:#ffffff; color:#000}}

/* ===================================================================
   FLOATING CTAs & UTILITIES
=================================================================== */
.fab-reserve{
  position:fixed; right:16px; bottom:16px; z-index:2;
  display:inline-flex; align-items:center; gap:.5rem; padding:12px 16px; border-radius:999px;
  background:#1e90ff; color:#fff; text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,.18);
  font-weight:700; letter-spacing:.2px; transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.fab-reserve i{font-size:1rem}
.fab-reserve:hover{transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,0,0,.22); background:#127fe6}
.fab-reserve:active{transform:translateY(0)}
@media (max-width:480px){
  .fab-reserve{right:12px; bottom:12px; padding:12px 14px}
  .fab-reserve span{font-size:.95rem}
}

/* Back to top */
.back-to-top{
  position:fixed; right:16px; bottom:76px; width:44px; height:44px; border-radius:999px;
  background:#fff; color:#1e90ff; border:2px solid #1e90ff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.18); z-index:9999; opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease;
}
.back-to-top:hover{transform:translateY(6px)}
.back-to-top.show{opacity:1; pointer-events:auto; transform:translateY(0)}
@media (max-width:480px){.back-to-top{right:12px; bottom:72px; width:42px; height:42px}}

/* ===================================================================
   MAINTENANCE OVERLAY (optional)
=================================================================== */
.maint-overlay{position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:16px}
.maint-card{width:100%; max-width:520px; background:#fff; border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.25); overflow:hidden; text-align:center; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.maint-header{background:#1e90ff; color:#fff; padding:16px 20px; display:flex; align-items:center; justify-content:center; gap:10px}
.maint-body{padding:20px; color:#222}
.maint-body p{margin:0 0 12px; line-height:1.45}
.maint-actions{display:grid; gap:10px; padding:0 20px 22px}
.maint-btn{appearance:none; border:none; cursor:pointer; padding:12px 16px; border-radius:12px; font-weight:600; font-size:16px}
.maint-btn.primary{background:#1e90ff; color:#fff}
.maint-btn.secondary{background:#f1f5f9; color:#0f172a}
.maint-note{font-size:13px; color:#475569}
.maint-close{all:unset; cursor:pointer; position:absolute; top:10px; right:14px; font-size:26px; line-height:1; color:#fff}
.maint-wrap{position:relative; width:100%; max-width:520px}