@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Poppins:wght@300;400;500;600&display=swap');

:root{
  --primary-bg:#1B3A2F;
  --secondary-bg:#3A5A40;
  --accent:#6B8E23;
  --hover:#A3B18A;

  --page-bg:#F4F6F3;
  --card-bg:#FAF9F6;
  --border:#DAD7CD;

  --text-main:#2E2E2E;
  --text-heading:#1A1A1A;
  --muted:#6C757D;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Poppins,sans-serif;background:var(--page-bg);color:var(--text-main)}
h1,h2,h3{font-family:"Playfair Display",serif;color:var(--text-heading)}
.container{max-width:1100px;margin:0 auto;padding:28px}
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 8px 20px rgba(0,0,0,.05)}
.navbar{background:var(--primary-bg);padding:16px}
.navbar a{color:#fff;margin-right:18px;text-decoration:none;font-weight:500}
.navbar a:hover{color:var(--hover)}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:10px 18px;border-radius:30px;text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:var(--hover);color:var(--primary-bg)}
.footer{margin-top:50px;background:var(--secondary-bg);color:#fff;text-align:center;padding:18px}
input,select,textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:10px;margin-top:6px}
label{display:block;margin-top:12px;font-weight:500}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
.badge{padding:4px 10px;border-radius:14px;font-size:12px;background:var(--hover);color:var(--primary-bg)}

/* -------- Modern Navbar UX -------- */
.navbar-modern {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(27, 58, 47, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.navbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.22);
  background: linear-gradient(135deg, var(--secondary-bg), var(--hover));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-text strong {
  font-family: "Playfair Display", serif;
  font-size: 16px;
  letter-spacing: 0.2px;
}

.brand-text span {
  font-size: 12px;
  opacity: 0.85;
  font-weight: 500;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.nav-links a {
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 500;
  transition: 0.2s ease;
}

.nav-links a:hover {
  background: rgba(255,255,255,0.10);
  color: #fff;
}

.nav-links a.active {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

.nav-cta {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
}

.nav-cta:hover {
  background: var(--hover) !important;
  color: var(--primary-bg) !important;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hamburger {
  display: none;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
}

.mobile-panel {
  display: none;
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.mobile-panel a {
  display: block;
  padding: 12px 12px;
  border-radius: 12px;
  margin-top: 8px;
  background: rgba(255,255,255,0.07);
  color: #fff;
  text-decoration: none;
}

.mobile-panel a:hover {
  background: rgba(255,255,255,0.12);
}

/* Responsive */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .hamburger { display: inline-flex; }
  .mobile-panel.show { display: block; }
}

/* ---------- Carousel ---------- */
.carousel {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
}

.carousel-track {
  display: flex;
  transition: transform 450ms ease;
  will-change: transform;
}

.carousel-slide {
  min-width: 100%;
  position: relative;
}

.carousel-slide img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
}

@media (max-width: 700px) {
  .carousel-slide img { height: 220px; }
}

.carousel-overlay {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(27,58,47,0.78);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
  color: #fff;
  max-width: 720px;
}

.carousel-overlay h2 {
  color: #fff;
  margin-bottom: 6px;
  font-size: 20px;
}

.carousel-overlay p {
  margin: 0;
  opacity: 0.92;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(0,0,0,0.35);
  color: #fff;
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
  user-select: none;
}

.carousel-btn:hover { background: rgba(0,0,0,0.55); }
.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }

.carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.carousel-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.15);
  cursor: pointer;
}

.carousel-dot.active {
  background: var(--hover);
}

/* ==========================================================
   NIGHTEXPLORES 2028 — unified night-safari design system
   All existing PHP/business logic is intentionally untouched.
   ========================================================== */
:root {
  --ne-night: #071411;
  --ne-forest: #102c23;
  --ne-leaf: #294b35;
  --ne-gold: #e5c777;
  --ne-gold-bright: #f4dc94;
  --ne-text: #f4f4e9;
  --ne-muted: #c3cec2;
  --ne-glass: rgba(11, 29, 23, .82);
  --ne-glass-soft: rgba(17, 42, 32, .72);
  --ne-stroke: rgba(232, 205, 129, .24);
  --primary-bg: #102c23;
  --secondary-bg: #294b35;
  --accent: #d5b45f;
  --hover: #f0d991;
  --page-bg: #071411;
  --card-bg: rgba(14, 34, 27, .88);
  --border: rgba(232, 205, 129, .2);
  --text-main: #e9eee5;
  --text-heading: #fff7df;
  --muted: #c3cec2;
}
html { min-height:100%; background:#071411; scroll-behavior:smooth; }
body { min-height:100vh; background:transparent !important; color:var(--ne-text); font-family:'Trebuchet MS', 'Segoe UI', sans-serif; line-height:1.65; position:relative; isolation:isolate; }
body > *:not(.night-safari-scene):not(.ne-whatsapp-float) {
    position: relative;
    z-index: 1;
}
h1,h2,h3,h4,h5,h6 { color:var(--ne-text); font-family:Georgia, 'Palatino Linotype', serif; letter-spacing:.015em; }
p,li,small { color:inherit; }
a { transition:color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.night-safari-scene { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:#071411; }
.ns-sky { position:absolute; inset:0; background:radial-gradient(ellipse at 72% 17%,rgba(194,207,158,.15),transparent 23%),linear-gradient(180deg,#071411 0%,#102820 47%,#07130f 100%); }
.ns-moon { position:absolute; top:9%; right:14%; width:clamp(50px,6vw,86px); aspect-ratio:1; border-radius:50%; background:#f0e6bd; box-shadow:0 0 35px rgba(240,230,189,.2),0 0 95px rgba(222,213,171,.1); opacity:.8; }
.ns-mist { position:absolute; width:65vw; height:16vh; border-radius:50%; filter:blur(26px); background:rgba(167,194,160,.08); }
.ns-mist-one { top:34%; left:-10%; animation:nsMist 22s ease-in-out infinite alternate; }
.ns-mist-two { top:51%; right:-18%; animation:nsMist 28s ease-in-out infinite alternate-reverse; }
.ns-tree-line { position:absolute; left:-3%; right:-3%; height:45%; bottom:16%; opacity:.7; background-repeat:repeat-x; background-size:260px 100%; }
.ns-tree-back { bottom:21%; opacity:.46; background-image:linear-gradient(75deg,transparent 0 11%,#081b14 11% 14%,transparent 14% 25%,#0a2117 25% 29%,transparent 29% 46%,#071a13 46% 51%,transparent 51% 66%,#0a2118 66% 70%,transparent 70%),linear-gradient(180deg,transparent 0 48%,#0a2118 48%); }
.ns-tree-front { height:54%; bottom:7%; opacity:.62; background-size:330px 100%; background-image:linear-gradient(78deg,transparent 0 6%,#030e0a 6% 10%,transparent 10% 22%,#06160f 22% 28%,transparent 28% 43%,#04120d 43% 48%,transparent 48% 70%,#06160f 70% 76%,transparent 76%),linear-gradient(180deg,transparent 0 58%,#06150f 58%); }
.ns-road { position:absolute; left:-12%; right:-12%; bottom:-15%; height:43%; border-radius:50% 50% 0 0 / 18% 18% 0 0; transform:perspective(420px) rotateX(7deg); background:linear-gradient(180deg,#26352a 0%,#101b15 72%); border-top:3px solid rgba(210,194,133,.28); box-shadow:0 -8px 40px rgba(0,0,0,.3); }
.ns-road-edge { position:absolute; left:7%; right:7%; top:14%; height:100%; border-left:2px dashed rgba(232,214,157,.17); border-right:2px dashed rgba(232,214,157,.17); border-radius:50% 50% 0 0 / 18% 18% 0 0; }
.ns-road-dash { position:absolute; top:16%; left:49.5%; width:3px; height:95%; background:repeating-linear-gradient(to bottom,rgba(238,218,158,.42) 0 25px,transparent 25px 50px); opacity:.4; }
.ns-route-stop { position:absolute; z-index:1; bottom:clamp(110px,17vh,190px); display:flex; align-items:center; gap:7px; color:#f3e5b6; font-size:clamp(9px,.8vw,12px); letter-spacing:.08em; text-transform:uppercase; opacity:.72; text-shadow:0 2px 6px #000; }
.ns-route-stop i { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(229,199,119,.7); background:rgba(8,25,17,.8); color:var(--ne-gold-bright); font-size:9px; font-style:normal; }
.ns-stop-1{left:7%;bottom:24%}.ns-stop-2{left:25%;bottom:16%}.ns-stop-3{left:46%;bottom:23%}.ns-stop-4{right:23%;bottom:15%}.ns-stop-5{right:5%;bottom:24%}
.ns-jeep-track { position:absolute; z-index:3; left:0; right:0; bottom:clamp(72px,11vh,135px); height:145px; animation:nsJeepTravel 34s linear infinite; }
.ns-jeep { position:absolute; width:clamp(145px,19vw,250px); height:auto; left:0; bottom:0; filter:drop-shadow(0 9px 10px rgba(0,0,0,.6)); animation:nsJeepBounce .55s ease-in-out infinite alternate; }
.ns-scene-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,12,8,.45),transparent 38%,rgba(3,12,8,.16)),linear-gradient(180deg,rgba(2,9,6,.24),rgba(2,10,7,.28) 56%,rgba(2,9,6,.38)); }
@keyframes nsJeepTravel { 0%{transform:translateX(-270px)} 100%{transform:translateX(calc(100vw + 270px))} }
@keyframes nsJeepBounce { from{transform:translateY(0) rotate(-.5deg)} to{transform:translateY(-2px) rotate(.5deg)} }
@keyframes nsMist { from{transform:translateX(-4vw)} to{transform:translateX(9vw)} }

/* Shared page content and glass surfaces */
.container { width:min(1180px,100%); max-width:1180px; margin:0 auto; padding:clamp(16px,3vw,34px); background:transparent; }
.card, .panel, .booking-card, .form-card, .content-card, .dashboard-card, .stat-card, .modal-content, .alert, .table-responsive {
  color:var(--ne-text); background:var(--ne-glass) !important; border:1px solid var(--ne-stroke) !important; border-radius:18px !important; box-shadow:0 16px 45px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035) !important; backdrop-filter:blur(13px);
}
.card, .panel, .booking-card, .form-card, .content-card, .dashboard-card, .stat-card { padding:clamp(17px,2.2vw,28px); }
.navbar-modern { background:rgba(5,18,13,.91) !important; border-bottom:1px solid var(--ne-stroke) !important; box-shadow:0 8px 30px rgba(0,0,0,.22) !important; backdrop-filter:blur(18px) !important; }
.navbar-modern .brand-logo { border-color:var(--ne-stroke) !important; background:linear-gradient(145deg,#284a32,#10271c) !important; }
.navbar-modern .brand-text strong { color:#fff7df; font-family:Georgia,serif; letter-spacing:.05em; }
.navbar-modern .brand-text span { color:#d1d9c6; }
.navbar-modern .nav-links a { color:#e6ecdf; }
.navbar-modern .nav-links a:hover,.navbar-modern .nav-links a.active:not(.nav-cta) { background:rgba(229,199,119,.11) !important; color:var(--ne-gold-bright) !important; }
.navbar-modern .nav-links a.nav-cta,.navbar-modern .mobile-panel a.mobile-cta { color:#17251a !important; background:linear-gradient(135deg,#f0d991,#c7a653) !important; border:0 !important; }
.navbar-modern .hamburger { border-color:var(--ne-stroke); background:rgba(255,255,255,.06); color:#fff4d3; }
.navbar-modern .mobile-panel a { background:rgba(7,22,15,.97); border-color:var(--ne-stroke); }
.site-footer { background:rgba(4,16,11,.95) !important; border-top:1px solid var(--ne-stroke) !important; }
.site-footer * { color:inherit; }

/* Form controls and booking/WhatsApp confirmation UI */
label { color:#e8e6d7; font-size:.92rem; font-weight:700; }
input:not([type=checkbox]):not([type=radio]):not([type=submit]), select, textarea {
 width:100%; color:#f4f4e9 !important; background:rgba(3,15,10,.76) !important; border:1px solid rgba(223,204,143,.25) !important; border-radius:12px !important; padding:12px 14px !important; outline:none; box-shadow:none !important;
}
input::placeholder,textarea::placeholder { color:#aab8a9 !important; }
input:focus,select:focus,textarea:focus { border-color:rgba(229,199,119,.8) !important; box-shadow:0 0 0 3px rgba(229,199,119,.1) !important; }
select option { background:#10251b; color:#f4f4e9; }
input[type=checkbox],input[type=radio] { accent-color:#d9bb68; }
button,.btn,button[type=submit],input[type=submit],.button,.btn-primary {
 border-radius:999px; font-weight:800; transition:transform .2s ease,filter .2s ease; }
.btn,button[type=submit],input[type=submit],.button,.btn-primary { background:linear-gradient(135deg,#f0d991,#c7a653) !important; color:#17251a !important; border:1px solid rgba(255,236,173,.35) !important; box-shadow:0 7px 18px rgba(0,0,0,.18); }
.btn:hover,button[type=submit]:hover,input[type=submit]:hover,.button:hover,.btn-primary:hover { transform:translateY(-2px); filter:brightness(1.06); }
.btn-secondary,.btn-outline-secondary { background:rgba(255,255,255,.06) !important; color:#f2ecd8 !important; border:1px solid var(--ne-stroke) !important; }
table { color:var(--ne-text) !important; background:rgba(8,24,16,.55); }
th { background:rgba(229,199,119,.12) !important; color:#f2dc9a !important; }
th,td { border-color:rgba(229,199,119,.14) !important; }
tr:hover td { background:rgba(229,199,119,.045); }
.text-muted, .muted, small.text-muted { color:#bdc9bb !important; }
hr { border-color:rgba(229,199,119,.2) !important; opacity:1; }
.alert-success { background:rgba(25,87,52,.8) !important; border-color:rgba(120,203,143,.35) !important; color:#e6ffe9 !important; }
.alert-danger,.alert-warning,.alert-info { color:#fff0ce !important; }
img { max-width:100%; }

/* Headings, booking panels, and small-screen layout */
.page-title,.section-title { color:#fff2c7; text-shadow:0 3px 18px rgba(0,0,0,.4); }
.booking-form,.booking-container,.booking-wrapper,.form-container { color:var(--ne-text); }
.booking-form button,.booking-form .btn,.booking-container .btn { min-height:46px; padding-inline:22px; }
@media(max-width:700px) {
 .ns-moon { right:10%; top:12%; }
 .ns-route-stop { font-size:8px; gap:4px; }
 .ns-route-stop i { width:21px;height:21px;font-size:8px; }
 .ns-stop-1{left:2%;bottom:25%}.ns-stop-2{left:21%;bottom:15%}.ns-stop-3{left:41%;bottom:24%}.ns-stop-4{right:18%;bottom:15%}.ns-stop-5{right:1%;bottom:25%}
 .ns-jeep-track { bottom:75px; }
 .ns-jeep { width:155px; }
 .container { padding:15px 12px; }
 .table-responsive { overflow-x:auto; }
}
@media(prefers-reduced-motion:reduce) {
 html {scroll-behavior:auto}
 .ns-jeep-track,.ns-jeep,.ns-mist { animation:none !important; }
 * {transition:none !important;}
}


/* NightExplores professional typography + always-visible WhatsApp icon */
body { font-family:'Manrope',Arial,sans-serif; }
h1,h2,h3,h4,.hero-title,.section-title,.navbar-brand,.brand-text strong { font-family:'Oswald','Manrope',sans-serif; letter-spacing:.015em; }
.ne-whatsapp-float{position:fixed!important;right:22px!important;bottom:22px!important;z-index:2147483000;width:68px;height:68px;display:grid;place-items:center;padding:0;border:3px solid #fff;border-radius:50%;background:#25D366;color:#fff!important;text-decoration:none!important;box-shadow:0 8px 25px rgba(0,0,0,.34),0 0 0 6px rgba(37,211,102,.22);transition:transform .2s ease,box-shadow .2s ease,background .2s ease;animation:ne-wa-attention 2.1s ease-in-out infinite;font-family:'Manrope',Arial,sans-serif}
.ne-whatsapp-float>svg{display:block;width:39px;height:39px;z-index:2;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
.ne-whatsapp-float:hover{transform:scale(1.09);background:#18b957;box-shadow:0 12px 32px rgba(0,0,0,.38),0 0 0 9px rgba(37,211,102,.25);color:#fff!important;animation:none}
.ne-whatsapp-float:focus-visible{outline:3px solid #e6c879;outline-offset:5px}
.ne-whatsapp-float[aria-disabled="true"]{opacity:.8}
.ne-whatsapp-float:after{content:'Message admin';position:absolute;right:78px;top:50%;transform:translate(5px,-50%);padding:9px 13px;border-radius:9px;background:#102b2a;color:#fff;font-size:12px;font-weight:800;letter-spacing:.01em;white-space:nowrap;box-shadow:0 5px 18px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.ne-whatsapp-float:hover:after,.ne-whatsapp-float:focus-visible:after{opacity:1;transform:translate(0,-50%)}
.ne-wa-pulse{position:absolute;inset:-7px;border:2px solid rgba(37,211,102,.75);border-radius:50%;animation:ne-wa-ring 2.1s ease-out infinite;pointer-events:none}
@keyframes ne-wa-ring{0%{transform:scale(.88);opacity:.85}75%,100%{transform:scale(1.28);opacity:0}}
@keyframes ne-wa-attention{0%,100%{box-shadow:0 8px 25px rgba(0,0,0,.34),0 0 0 5px rgba(37,211,102,.18)}50%{box-shadow:0 10px 28px rgba(0,0,0,.36),0 0 0 9px rgba(37,211,102,.28)}}
@media(max-width:600px){.ne-whatsapp-float{right:15px!important;bottom:15px!important;width:60px;height:60px}.ne-whatsapp-float>svg{width:34px;height:34px}.ne-whatsapp-float:after{right:69px;font-size:11px;padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.ne-whatsapp-float,.ne-wa-pulse{animation:none!important;transition:none!important}}