/* ============================================================
   v2-matching header/footer for booking.html ONLY.
   Deliberately namespaced (ehv2- prefix, all values literal — no shared
   custom properties) so this cannot collide with either styles.css (the
   booking app's own stylesheet, untouched) or v2-styles.css (the marketing
   site's stylesheet). Both of those also define .btn/.icon/.brand-style
   classes — reusing those names here would silently restyle the booking
   flow's own buttons/cards, which is explicitly out of scope.
   Fonts (Sora/Inter) are already loaded by booking.html's own <link>.
   ============================================================ */

.ehv2-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 24px; background:rgba(255,255,255,.9); backdrop-filter:blur(14px);
  box-shadow:0 8px 30px -20px rgba(0,0,0,.25);
}
.ehv2-row{ max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.ehv2-brand{
  display:flex; align-items:center; gap:10px; font-family:'Sora',sans-serif; font-weight:800;
  font-size:1.15rem; color:#111317; text-decoration:none;
}
.ehv2-brand-mark{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(100deg,#A8D93E 0%,#4FAE72 38%,#1FA3A0 68%,#0EA5C4 100%);
  display:grid; place-items:center; font-weight:900; color:#08201C;
}
.ehv2-nav{ display:flex; align-items:center; gap:30px; }
.ehv2-nav a{ font-size:.92rem; font-weight:600; color:#5B5F66; text-decoration:none; padding:6px 0; }
.ehv2-nav a:hover, .ehv2-nav a[aria-current="page"]{ color:#111317; }
.ehv2-header-actions{ display:flex; align-items:center; gap:14px; }
.ehv2-header-call{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:.9rem; color:#111317; text-decoration:none; }
.ehv2-header-call svg{ color:#1FA3A0; flex-shrink:0; }
.ehv2-nav-toggle{ display:none; background:none; border:none; padding:0; margin:0; color:#111317; cursor:pointer; }
@media (max-width:900px){
  .ehv2-nav{ display:none; }
  .ehv2-header-call span{ display:none; }
  .ehv2-nav-toggle{ display:grid; place-items:center; width:44px; height:44px; }
}

.ehv2-mobile-nav{
  position:fixed; inset:0; z-index:99; background:#071513; padding:110px 28px 40px;
  display:flex; flex-direction:column; gap:40px;
}
.ehv2-mobile-nav[hidden]{ display:none; }
.ehv2-mobile-nav nav{ display:flex; flex-direction:column; gap:6px; }
.ehv2-mobile-nav nav a{
  color:#fff; font-family:'Sora',sans-serif; font-weight:700; font-size:1.6rem; padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.1); min-height:44px; display:flex; align-items:center; text-decoration:none;
}
.ehv2-mobile-actions{ display:flex; flex-direction:column; gap:14px; margin-top:auto; }
.ehv2-mobile-actions a{
  display:flex; align-items:center; justify-content:center; gap:10px; padding:16px 30px; border-radius:999px;
  font-weight:700; font-size:.98rem; min-height:44px; text-decoration:none;
}
.ehv2-btn-primary{ background:linear-gradient(100deg,#A8D93E 0%,#4FAE72 38%,#1FA3A0 68%,#0EA5C4 100%); color:#08201C; }
.ehv2-btn-ghost{ border:1.5px solid rgba(255,255,255,.3); color:#fff; }

.ehv2-footer{ background:#0B0F0E; color:rgba(255,255,255,.7); padding:70px 24px 30px; }
.ehv2-footer-grid{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.ehv2-footer-brand .ehv2-brand{ color:#fff; margin-bottom:14px; }
.ehv2-footer-grid h4{ color:#fff; font-family:'Sora',sans-serif; font-size:.92rem; margin:0 0 16px; font-weight:700; }
.ehv2-footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:.88rem; }
.ehv2-footer-grid a{ color:rgba(255,255,255,.7); text-decoration:none; }
.ehv2-footer-grid a:hover{ color:#fff; }
.ehv2-footer-bottom{
  max-width:1240px; margin:50px auto 0; padding-top:24px; border-top:1px solid rgba(255,255,255,.1);
  font-size:.8rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
@media (max-width:900px){ .ehv2-footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ehv2-footer-grid{ grid-template-columns:1fr; } }