/* ================================================================
   ATM Travels & Tours — Website Stylesheet
   Responsive · PWA-ready · Luxury Navy + Gold
   Fonts: Poppins + Inter
   Dev: TUVAMBES Technologies (A unit of TUVAMBES Enterprises)
   ================================================================ */

/* ── Variable aliases for cross-file compatibility ── */
:root {
  --gold:   #c4a45a;
  --gold-d: #a8893a;
  --gold-l: #d4b870;
  --gold-lt:#d4b870;
  --gold-dk:#a8893a;
  --white:  #ffffff;
  --bg2:    #f2ede5;
  --navy:   #0a1628;
  --navy2:  #1a2e55;
  --text:   #1a2035;
  --text2:  #374151;
  --text3:  #6b7280;
  --surface:#ffffff;
  --surface2:#f9f7f3;
  --border: #e8e0d0;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --sh-sm:  0 2px 8px rgba(0,0,0,.07);
  --sh-md:  0 6px 20px rgba(0,0,0,.10);
  --gold-bg:rgba(196,164,90,.08);
  --gold-bdr:rgba(196,164,90,.22);
  --r:      10px;
  --nav-h:  70px;
}

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

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0a1628;--navy2:#1a2e55;--navy3:#142040;
  --gold:#c4a45a;--gold-d:#a8893a;--gold-l:#d4b870;
  --text:#1a2035;--text2:#374151;--text3:#6b7280;
  --surface:#fff;--surface2:#f9f7f3;--border:#e8e0d0;
  --ok:#16a34a;--err:#dc2626;
  --r:10px;--r-lg:16px;--r-xl:24px;
  --sh:0 4px 24px rgba(0,0,0,.08);--sh-lg:0 12px 40px rgba(0,0,0,.12);
  --nav-h:70px;
}
html{font-size:16px;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;color:var(--text);background:var(--surface)}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}
button{cursor:pointer;font-family:'Inter',sans-serif}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}

/* ══════════════════════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════════════════════ */
#navbar-inject,#navbar-inject *{box-sizing:border-box}

.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;
  padding:0 40px;transition:background .3s,box-shadow .3s;
  background:#fff;
  box-shadow:0 2px 16px rgba(10,22,40,.10);
}
.navbar.scrolled{
  background:#fff;
  box-shadow:0 4px 24px rgba(10,22,40,.13);
}

.nav-logo{display:flex;align-items:center;flex-shrink:0}
.nav-logo img{height:48px;width:auto;object-fit:contain;transition:height .2s}
.navbar.scrolled .nav-logo img{height:42px}

.nav-links{display:flex;align-items:center;gap:6px}
.nav-link{
  padding:8px 14px;font-size:14px;font-weight:500;color:var(--navy);
  border-radius:8px;transition:all .18s;white-space:nowrap;
}
.nav-link:hover,.nav-link.active{color:var(--navy);background:rgba(10,22,40,.06)}
.nav-link.active{color:var(--gold-d) !important;background:rgba(196,164,90,.12) !important;font-weight:600}

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

/* CTA button */
.nav-cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 20px;background:var(--gold);color:#fff;
  border:none;border-radius:8px;font-weight:700;font-size:14px;
  transition:all .2s;white-space:nowrap;font-family:'Poppins',sans-serif;
}
.nav-cta:hover{background:var(--gold-d);transform:translateY(-1px);box-shadow:0 6px 20px rgba(196,164,90,.4)}

/* ── HAMBURGER BUTTON ── */
.nav-ham{
  display:none;background:none;border:none;padding:6px;
  flex-direction:column;gap:5px;z-index:1010;position:relative;
}
.nav-ham span{
  display:block;width:24px;height:2px;background:var(--navy);
  border-radius:2px;transition:all .28s cubic-bezier(.4,0,.2,1);
}
.nav-ham:focus-visible{outline:2px solid var(--gold);border-radius:4px}

/* ── MOBILE NAV DRAWER ── */
.mob-nav{
  position:fixed;top:0;right:0;width:min(300px,85vw);height:100vh;
  background:var(--navy);z-index:1005;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;overflow-y:auto;
  box-shadow:-8px 0 40px rgba(0,0,0,.4);
}
.mob-nav.open{transform:translateX(0)}

.mob-nav-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.1);
}
.mob-nav-close{
  background:rgba(255,255,255,.1);border:none;color:#fff;
  width:36px;height:36px;border-radius:50%;font-size:16px;
  display:flex;align-items:center;justify-content:center;transition:.18s;
}
.mob-nav-close:hover{background:rgba(255,255,255,.2)}

.mob-nav-links{display:flex;flex-direction:column;padding:12px 0;flex:1}
.mob-nav-links .nav-link{
  padding:14px 24px;font-size:15px;border-radius:0;
  border-bottom:1px solid rgba(255,255,255,.05);
  display:flex;align-items:center;
}
.mob-nav-links .nav-link:hover{background:rgba(255,255,255,.07);padding-left:32px}
.mob-nav-links .nav-link.active{color:var(--gold);border-left:3px solid var(--gold);padding-left:21px}

.mob-nav-contact{padding:16px 20px;border-top:1px solid rgba(255,255,255,.1)}
.mob-contact-btn{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:rgba(255,255,255,.07);border-radius:10px;color:#fff;
  font-size:14px;margin-bottom:8px;transition:.18s;
}
.mob-contact-btn:hover{background:rgba(196,164,90,.2);color:var(--gold)}

/* ── NAV OVERLAY ── */
.nav-overlay{
  display:none;position:fixed;inset:0;z-index:1004;
  background:rgba(0,0,0,.5);backdrop-filter:blur(2px);
}
.nav-overlay.active{display:block}

/* ══════════════════════════════════════════════════════
   HERO SPACER
   ══════════════════════════════════════════════════════ */
.hero-spacer{height:var(--nav-h)}

/* ══════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════ */
.container{max-width:1160px;margin:0 auto;padding:0 24px}
.section-title{font-family:'Poppins',sans-serif;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;color:var(--navy);margin-bottom:10px}
.section-sub{font-size:15px;color:var(--text3);max-width:560px;margin:0 auto 36px;line-height:1.7}

/* ══════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:10px;font-weight:700;font-size:14px;transition:all .2s;border:none;font-family:'Poppins',sans-serif}
.btn-primary{background:var(--gold);color:#fff}
.btn-primary:hover{background:var(--gold-d);transform:translateY(-2px);box-shadow:0 8px 24px rgba(196,164,90,.38)}
.btn-outline{background:transparent;border:2px solid var(--gold);color:var(--gold)}
.btn-outline:hover{background:var(--gold);color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy2);transform:translateY(-2px)}

/* ══════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════ */
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form-label{font-size:12px;font-weight:600;color:var(--text2);letter-spacing:.3px;text-transform:uppercase}
.form-control{
  padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--r);
  font-size:14px;font-family:'Inter',sans-serif;color:var(--text);
  background:var(--surface);outline:none;transition:border-color .18s,box-shadow .18s;width:100%;
}
.form-control:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(196,164,90,.12)}
select.form-control{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M5 6L0 0h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
textarea.form-control{resize:vertical;min-height:80px}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ══════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════ */
.footer{background:#2c3e5a;color:#e8ecf2;padding:56px 0 0}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:40px;max-width:1160px;margin:0 auto;padding:0 24px 48px}
.footer-logo{height:44px;width:auto;object-fit:contain;margin-bottom:16px}
.footer-tagline{font-size:13.5px;color:rgba(232,236,242,.65);line-height:1.8;margin-bottom:16px}
.footer-contact{display:flex;flex-direction:column;gap:8px}
.footer-contact-item{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:rgba(255,255,255,.65);transition:.18s}
a.footer-contact-item:hover{color:var(--gold,#c4a45a)}
.footer-socials{display:flex;gap:8px;margin-top:16px}
.footer-social{
  width:34px;height:34px;border-radius:8px;
  background:rgba(255,255,255,.1);color:rgba(232,236,242,.8);
  display:flex;align-items:center;justify-content:center;
  transition:all .18s;text-decoration:none;
}
.footer-social:hover{background:var(--gold,#c4a45a);color:#fff;transform:translateY(-2px)}
.footer-col-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:13px;letter-spacing:.5px;text-transform:uppercase;color:var(--gold,#c4a45a);margin-bottom:14px}
.footer-link{display:block;font-size:13.5px;color:rgba(232,236,242,.7);padding:4px 0;transition:.18s}
.footer-link:hover{color:var(--gold,#c4a45a);padding-left:6px}
.footer-erp-link{opacity:.5;font-size:11.5px;margin-top:8px}
.footer-erp-link:hover{opacity:.8}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.18);padding:18px 24px;max-width:1160px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.footer-copy{font-size:12.5px;color:rgba(232,236,242,.55)}
.footer-dev{font-size:12px;color:rgba(232,236,242,.45)}
.footer-dev strong{color:rgba(232,236,242,.65)}

/* ══════════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(10,22,40,.6);z-index:2000;
  display:flex;align-items:center;justify-content:center;padding:16px;
  opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(4px);
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{
  background:#fff;border-radius:var(--r-xl);padding:28px;width:100%;max-width:520px;
  max-height:92vh;overflow-y:auto;transform:scale(.95) translateY(16px);
  transition:transform .25s ease;box-shadow:0 24px 64px rgba(0,0,0,.2);
}
.modal-overlay.open .modal-box{transform:scale(1) translateY(0)}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
.modal-close{width:30px;height:30px;border-radius:50%;background:#f3f4f6;border:none;font-size:14px;color:#6b7280;display:flex;align-items:center;justify-content:center;transition:.18s}
.modal-close:hover{background:#e5e7eb;color:var(--text)}

/* ══════════════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════════════ */
#toast-wrap{position:fixed;top:80px;right:16px;z-index:3000;display:flex;flex-direction:column;gap:8px;max-width:320px;width:calc(100vw - 32px)}
.toast{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px 14px;display:flex;align-items:flex-start;gap:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);animation:tSlide .3s ease}
.toast.ok{border-left:3px solid var(--ok)}.toast.err{border-left:3px solid var(--err)}
.toast-msg{font-size:13px;line-height:1.5;color:var(--text2)}
@keyframes tSlide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* ══════════════════════════════════════════════════════
   REVEAL ANIMATION
   ══════════════════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:translateY(0)}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */

/* Tablet 1024px */
@media(max-width:1024px){
  .navbar{padding:0 24px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}

/* Large Mobile 768px */
@media(max-width:768px){
  :root{--nav-h:62px}
  .navbar{padding:0 16px}
  .nav-links{display:none} /* hidden, replaced by drawer */
  .nav-ham{display:flex}   /* show hamburger */
  .nav-logo img{height:40px}
  .navbar.scrolled .nav-logo img{height:36px}
  /* Footer */
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px;padding:0 16px 40px}
  .footer-col-brand{grid-column:1/-1}
  .footer-bottom{flex-direction:column;text-align:center;padding:16px}
  /* Modal */
  .modal-overlay{padding:12px;align-items:flex-end}
  .modal-overlay.open .modal-box{border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:90vh}
  .form-grid-2{grid-template-columns:1fr}
  /* Container */
  .container{padding:0 16px}
}

/* Small Mobile 480px */
@media(max-width:480px){
  :root{--nav-h:58px}
  .footer-grid{grid-template-columns:1fr;gap:20px}
  .section-sub{font-size:14px}
  .btn{padding:11px 18px;font-size:13px}
  #toast-wrap{max-width:calc(100vw - 24px);right:12px}
}

/* ══════════════════════════════════════════════════════
   MISC UTILITY
   ══════════════════════════════════════════════════════ */
.text-gold{color:var(--gold)}
.text-navy{color:var(--navy)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ══════════════════════════════════════════════════════
   WHATSAPP FLOATING BUTTON
   ══════════════════════════════════════════════════════ */
.wa-float{
  position:fixed;bottom:24px;right:24px;z-index:700;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 24px rgba(37,211,102,.5);
  transition:transform .22s,box-shadow .22s;
  text-decoration:none;
  animation:wa-pop .4s cubic-bezier(.34,1.56,.64,1) both;
}
.wa-float:hover{transform:scale(1.12);box-shadow:0 10px 32px rgba(37,211,102,.6)}
.wa-float svg{width:30px;height:30px;fill:#fff}
@keyframes wa-pop{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:scale(1)}}

/* ── Enquiry sticky (mobile) ── */
.sticky-enq-btn{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%);
  z-index:598;display:none;
  background:var(--gold);color:#fff;
  padding:13px 28px;border-radius:32px;
  font-weight:700;font-size:14px;border:none;
  box-shadow:0 6px 20px rgba(196,164,90,.5);
  white-space:nowrap;cursor:pointer;
}
@media(max-width:600px){.sticky-enq-btn{display:block}}

/* ══════════════════════════════════════════════════════
   SHARED PAGE LAYOUT CLASSES
   (used by all inner pages)
   ══════════════════════════════════════════════════════ */

/* Page hero banner (inner pages) */
.page-top{
  background:linear-gradient(135deg,var(--navy) 0%,#1B3055 60%,#0F2540 100%);
  padding:80px 5vw 60px;
  margin-top:var(--nav-h);
  text-align:center;
}
.page-top .page-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(200,150,46,.15);border:1px solid rgba(200,150,46,.3);
  border-radius:20px;padding:5px 14px;
  font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold-l);margin-bottom:16px;
}
.page-top h1{
  font-family:'Poppins',sans-serif;font-weight:800;
  font-size:clamp(28px,4vw,46px);color:#fff;margin-bottom:14px;line-height:1.15;
}
.page-top h1 span{color:var(--gold-l,#d4b870)}
.page-top p{font-size:16px;color:rgba(255,255,255,.65);max-width:560px;margin:0 auto;line-height:1.75}

/* Sections */
.section{padding:64px 5vw}
.section-white{padding:64px 5vw;background:#fff}
.section-bg{padding:64px 5vw;background:var(--surface2,#f9f7f3)}
.section-dark{padding:64px 5vw;background:var(--navy);color:#fff}
.sec-head{text-align:center;margin-bottom:44px}
.sec-eyebrow{
  display:inline-block;font-size:11px;font-weight:700;
  letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold-d,#a8893a);background:rgba(200,150,46,.1);
  border-radius:20px;padding:5px 14px;margin-bottom:12px;
}
.sec-title{
  font-family:'Poppins',sans-serif;font-weight:800;
  font-size:clamp(22px,3.5vw,36px);color:var(--navy);line-height:1.18;margin-bottom:10px;
}
.sec-title span{color:var(--gold-d,#a8893a)}
.sec-desc{font-size:14.5px;color:var(--text3,#6b7280);max-width:520px;margin:0 auto;line-height:1.78}

/* CSS variable aliases (shared between pages) */
:root{
  --white:#fff;--bg:#f9f7f3;--bg2:#f2ede5;
  --navy2:#1a2e55;--navy3:#142040;
  --gold-lt:#d4b870;--gold-bdr:rgba(200,150,46,.22);--gold-bg:rgba(200,150,46,.08);
  --gold-dk:#9B6E1A;
  --r-md:12px;--sh-sm:0 2px 8px rgba(0,0,0,.07);--sh-md:0 6px 20px rgba(0,0,0,.10);
}

/* Grid layouts */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1160px;margin:0 auto}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1160px;margin:0 auto}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1160px;margin:0 auto}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;max-width:1160px;margin:0 auto}

@media(max-width:960px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .section,.section-white,.section-bg,.section-dark{padding:44px 5vw}
}

/* Badge */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;
}
.badge-gold{background:rgba(200,150,46,.12);color:var(--gold-dk,#9B6E1A)}
.badge-navy{background:rgba(10,22,40,.1);color:var(--navy,#0a1628)}
.badge-green{background:#dcfce7;color:#15803d}

/* Ghost white button (for dark bg sections) */
.btn-ghost-white{
  background:transparent;color:#fff;
  border:2px solid rgba(255,255,255,.45);
}
.btn-ghost-white:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* Btn sizes */
.btn-lg{padding:14px 28px;font-size:15px}
.btn-sm{padding:8px 16px;font-size:12px}

/* CTA section */
.cta-section{background:linear-gradient(135deg,var(--navy),#1B3055);padding:72px 5vw;text-align:center}
.cta-section h2{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(22px,3.5vw,36px);color:#fff;margin-bottom:14px}
.cta-section h2 span{color:var(--gold-lt,#d4b870)}
.cta-section p{font-size:15px;color:rgba(255,255,255,.65);max-width:480px;margin:0 auto 28px;line-height:1.75}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}


.fci-icon{width:18px;text-align:center;flex-shrink:0;font-size:14px}
.footer-contact-item{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:rgba(232,236,242,.75);transition:.18s;padding:3px 0}

/* ══════════════════════════════════════════════════════
   RESPONSIVE ENHANCEMENTS — Mobile-first improvements
   ══════════════════════════════════════════════════════ */

/* Grid helpers — mobile collapse */
@media(max-width:768px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr !important}
  .grid-2-sm{grid-template-columns:1fr 1fr}
  /* Tours grid */
  .grid-3.tours-grid{grid-template-columns:1fr}
  /* Stats bar */
  .stat-bar{grid-template-columns:1fr 1fr}
  /* Hero */
  .hero-inner{padding:0 20px}
  .hero-h1{font-size:clamp(1.8rem,7vw,2.8rem)}
  /* Page top */
  .page-top{padding:70px 20px 44px}
  /* Section */
  .section,.section-white,.section-bg{padding:44px 20px}
  /* Service cards */
  .svc-card{margin:0}
  /* Tour cards */
  .tcard{width:100%;min-width:0}
  /* CTA */
  .cta-actions{flex-direction:column;gap:12px}
  .cta-actions .btn{width:100%;justify-content:center}
  /* Contact layout */
  .contact-layout{grid-template-columns:1fr;gap:24px;padding:32px 0}
  /* About grid */
  .grid-2{gap:32px}
}

@media(max-width:480px){
  .stat-bar{grid-template-columns:1fr 1fr}
  .stat-bar-val{font-size:22px}
  .hero-h1{font-size:1.7rem}
  .hero-sub{font-size:14px}
  .hero-acts{flex-direction:column;gap:10px}
  .hero-acts .btn{width:100%;justify-content:center}
  /* Footer columns single on very small */
  .footer-grid{grid-template-columns:1fr;gap:24px}
  /* Page top smaller padding */
  .page-top{padding:60px 16px 36px}
  /* Enquiry modal fullscreen-ish */
  .modal-box{max-height:95vh;overflow-y:auto}
}

/* Touch-friendly tap targets */
@media(hover:none){
  .btn{min-height:44px}
  .nav-link{min-height:44px;display:flex;align-items:center}
  .footer-link{min-height:36px;display:flex;align-items:center}
}

/* Notch / safe area support (iOS PWA) */
@supports(padding:max(0px)){
  .navbar{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
  .mob-nav{padding-bottom:max(20px,env(safe-area-inset-bottom))}
  body{padding-bottom:env(safe-area-inset-bottom)}
}

/* Print styles */
@media print{
  .navbar,.mob-nav,.wa-float,#sticky-btn,.footer{display:none!important}
  body{color:#000;background:#fff}
  .page-top{margin-top:0;padding:24px 0}
}