@charset "utf-8";
/* CSS Document */
:root{
  --bg:#0e0e10;
  --ink:#111317;
  --muted:#7f8596;
  --panel:#ffffff;
  --panel-ink:#0f1222;
  --brand:#f6c043;
  --brand-ink:#2f2504;
  --accent:#d94b4b;
  --ring:rgba(246,192,67,.35);
  --shadow:0 20px 50px rgba(0,0,0,.25);
  --radius-xl:22px;
  --radius-lg:16px;
  --radius:12px;
  --radius-sm:10px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#0b0c10d9;
  -webkit-backdrop-filter:saturate(1.2) blur(8px);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
}
.brand{
  display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none;
  font-weight:800; letter-spacing:.2px; font-size:1.2rem;
}
.brand-badge{
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:9px;
  background:linear-gradient(135deg,var(--brand) 0%, #ffe38a 100%);
  color:#2b2100; font-weight:900;
  box-shadow:0 8px 22px rgba(246,192,67,.35);
}
.nav-links{display:flex; align-items:center; gap:20px}
.nav-links a{
  color:#e8e9ef; text-decoration:none; font-weight:600; font-size:.95rem; opacity:.9;
}
.nav-links a:hover{opacity:1}
.nav-cta{display:flex; align-items:center; gap:10px}
.btn{
  appearance:none; border:0; cursor:pointer;
  padding:10px 16px; border-radius:12px;
  font-weight:700; letter-spacing:.2px;
}
.btn-outline{
  background:transparent; color:#f1f3f9; border:1px solid rgba(255,255,255,.18);
}
.btn-brand{
  background:linear-gradient(135deg,var(--brand) 0%, #ffd76a 100%);
  color:#2b2100;
  box-shadow:0 10px 24px var(--ring);
}
.btn-brand:hover{filter:brightness(1.03)}
.btn:focus{outline:3px solid var(--ring); outline-offset:2px}

/* Hero */
.hero{
  position:relative; min-height:72vh; display:grid; align-items:center;
  background:
    radial-gradient(1200px 400px at 70% 10%, rgba(246,192,67,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.55)),
    url('assets/hero.jpg') center/cover no-repeat fixed;
  color:#fff;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(115deg, rgba(255,215,120,.06), rgba(255,215,120,.06) 14px, transparent 14px, transparent 28px);
  mask:linear-gradient(180deg, rgba(0,0,0,.25), transparent 40%);
  pointer-events:none;
}
.hero-inner{
  position:relative; z-index:1;
  max-width:1200px; margin:0 auto; padding:40px 18px; display:grid; gap:28px;
  grid-template-columns:1.05fr .95fr;
}
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr; gap:22px}
}

.hero-copy{padding-right:8%}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(0,0,0,.45); color:#ffd76a; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,215,120,.35);
  font-weight:700; font-size:.78rem; letter-spacing:.3px; text-transform:uppercase;
}
.hero h1{margin:14px 0 8px; font-size:48px; line-height:1.05; letter-spacing:.2px; text-shadow:0 3px 16px rgba(0,0,0,.35)}
.hero p{margin:0 0 18px; font-size:1.08rem; color:#e9eaef; opacity:.95}

.perks{display:flex; flex-wrap:wrap; gap:18px; margin-top:16px; color:#f5f6fb}
.perk{
  display:flex; align-items:flex-start; gap:10px; padding:10px 12px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
}
.perk svg{flex:0 0 18px}

/* Booking Card */
.card{
  background:var(--panel); color:var(--panel-ink);
  border-radius:var(--radius-xl); box-shadow:var(--shadow);
  border:1px solid #e9ecf3; padding:22px;
}
.card h3{margin:2px 0 14px; font-size:1.4rem}
.grid{display:grid; gap:12px; grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:1fr 1fr 1fr}
.grid-4{grid-template-columns:repeat(4,1fr)}






@media (max-width:860px){
  .grid,.grid-3,.grid-4{grid-template-columns:1fr}
}
label{display:block; font-size:.85rem; font-weight:700; color:#475069; margin:4px 0 6px}
.field{
  display:flex; align-items:center; gap:10px;
  background:#f7f8fb; border:1px solid #e8ebf2; border-radius:12px; padding:12px 14px;
}
.field input,.field select{border:0; outline:0; background:transparent; width:100%; font:inherit; color:#171b2b}
.row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 2px}
.check{display:flex; align-items:center; gap:10px; user-select:none; cursor:pointer; color:#2a3147; font-size:.92rem}
.check input{width:18px; height:18px}
.muted{color:var(--muted); font-size:.9rem}
.note{font-size:.8rem; color:#76809c}

.actions{display:flex; align-items:center; gap:12px; margin-top:14px}
.btn-big{padding:14px 18px; border-radius:14px; font-size:1rem}
.btn-full{width:100%}

/* Footer promo bar */
.promo{
  background:#111214; color:#fff; padding:18px; text-align:center;
  border-top:1px solid rgba(255,255,255,.06);
}
.promo a{color:var(--brand); font-weight:800; text-decoration:none}

/* Toast */
.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  background:#111317; color:#fff; padding:12px 16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.35);
  z-index:9999; transition:opacity .25s ease;
  opacity:0;
}



/* ========== Header / Nav ========== */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: #0f0f10; border-bottom: 1px solid #232326;
  backdrop-filter: saturate(120%) blur(6px);
}

.nav {
  max-width: 1200px; margin: 0 auto; padding: 12px 16px;
  display: grid; grid-template-columns: auto auto; align-items: center; gap: 12px;
}

.brand {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  color: #fff; font-weight: 800; letter-spacing: 0.2px;
}
.brand-badge {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: #f7c948; color: #000; font-weight: 800;
}
.brand-text { font-size: 1rem; }

/* Hamburger */
.nav-toggle {
  justify-self: end;
  display: inline-flex; flex-direction: column; gap: 5px;
  width: 42px; height: 38px; padding: 8px 6px;
  background: transparent; border: 1px solid #2b2b2f; border-radius: 10px;
  cursor: pointer;
}
.nav-toggle:focus-visible { outline: 2px solid #f7c948; outline-offset: 2px; }
.nav-toggle-bar {
  width: 100%; height: 2px; background: #e7e7ea; border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}

/* Menu wrapper */
.nav-wrap {
  grid-column: 1 / -1;
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
  padding: 12px; margin-top: 10px;
  background: #121214; border: 1px solid #232326; border-radius: 12px;
  transform-origin: top; transform: scaleY(0.98);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
}
.nav-wrap.open {
  opacity: 1; visibility: visible; pointer-events: auto; transform: scaleY(1);
  transition: opacity .18s ease, transform .18s ease;
}

/* Links + ctas (stacked on mobile) */
.nav-links, .nav-cta {
  display: flex; flex-wrap: wrap; gap: 12px;
}
.nav-links a, .nav-cta a { text-decoration: none; }
.nav-links a {
  color: #d7d7db; padding: 8px 10px; border-radius: 8px;
}
.nav-links a:hover { background: rgba(255,255,255,0.06); color: #fff; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.btn-brand { background: #f7c948; color: #000; border: 1px solid #f7c948; }
.btn-outline { background: transparent; color: #f7c948; border: 1px solid #f7c948; }
.btn-outline:hover { background: #f7c948; color: #000; }

/* Desktop layout */
@media (min-width: 961px) {
  .nav {
	  max-height: 80px;
    grid-template-columns: auto 1fr auto;
  }
  .nav-toggle { display: none; }
  .nav-wrap {
    grid-column: auto;
    visibility: visible; opacity: 1; pointer-events: auto;
    background: transparent; border: 0; padding: 0; margin: 0;
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    transform: none;
  }
  .nav-links { justify-content: center; }
}

/* Hamburger animate to X when open */
.nav-wrap.open + .nothing{} /* keeps specificity easy */
.nav.opening{} /* placeholder */

body.nav-open .nav-toggle .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nav-wrap, .nav-toggle-bar { transition: none; }
}

/* Subnav */
.admin-subnav{position:relative;margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid var(--card-br)}
.subnav-track{display:flex;gap:10px;overflow:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding-bottom:2px}
.subnav-track::-webkit-scrollbar{height:6px}
.subnav-track::-webkit-scrollbar-thumb{background:#202125;border-radius:4px}
.subnav-pill{
  scroll-snap-align:start;white-space:nowrap;padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.06);color:#ddd;text-decoration:none;font-weight:700;font-size:14px;
  border:1px solid transparent;transition:.2s ease;
}
.subnav-pill:hover{background:rgba(255,255,255,.12);color:#fff}
.subnav-pill.active{background:var(--brand);color:#000}


@media (min-device-width: 150px) and (max-device-width: 736px), screen and (device-width: 768px) and (device-height: 1280), screen and (device-width: 384px) and (device-height: 592px) and (-webkit-device-pixel-ratio: 2), screen and (device-width: 720px) and (device-height: 1280)
 {
 
	 
	 
	 
	 .nav{
		 
		 max-height: 80px;
	 }
}