/* ================================================================
   SHAHMIE TRAVEL & TOURS — V21 MOBILE HEADER & TYPOGRAPHY STABILITY
   Fokus: hamburger stabil, header/logo lebih jelas, contact dock lebih
   mudah dibaca, dan perlindungan responsive pada semua halaman awam.
   ================================================================ */
:root{
  --v21-maroon-950:#2b0309;
  --v21-maroon-900:#43070f;
  --v21-maroon-800:#64101b;
  --v21-maroon-700:#7e1425;
  --v21-gold:#d9a93e;
  --v21-gold-soft:#f3d67e;
  --v21-cream:#fffaf1;
  --v21-ink:#35282b;
  --v21-muted:#75656a;
  --v21-line:rgba(103,16,31,.16);
}

html,body{max-width:100%;overflow-x:hidden}
body.mobile-menu-open{overflow:hidden!important;touch-action:none}
img,svg,video,canvas,iframe{max-width:100%}

/* ---------- Public header: clearer logo and standard menu font ---------- */
html body[data-layout="public"] .site-header{
  z-index:1000!important;
  background:rgba(255,250,242,.985)!important;
  border-bottom:1px solid rgba(40,40,40,.20)!important;
  box-shadow:0 8px 26px rgba(50,4,12,.07)!important;
  backdrop-filter:blur(18px)!important;
}
html body[data-layout="public"] .header-inner{
  min-height:78px!important;
  gap:20px!important;
}
html body[data-layout="public"] .brand{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex:0 0 238px!important;
  width:238px!important;
  min-width:238px!important;
  height:66px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
html body[data-layout="public"] .brand img{
  display:block!important;
  width:226px!important;
  max-width:226px!important;
  height:60px!important;
  object-fit:contain!important;
  object-position:left center!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
html body[data-layout="public"] .main-nav-clean{
  gap:4px!important;
  min-width:0!important;
}
html body[data-layout="public"] .main-nav-clean a{
  min-height:44px!important;
  padding:10px 11px!important;
  gap:8px!important;
  border-radius:12px!important;
  color:#554348!important;
  font-size:.96rem!important;
  line-height:1.15!important;
  font-weight:800!important;
}
html body[data-layout="public"] .main-nav-clean a i{
  flex:0 0 auto!important;
  color:var(--v21-gold)!important;
  font-size:.98rem!important;
  opacity:1!important;
  visibility:visible!important;
}
html body[data-layout="public"] .main-nav-clean a:hover,
html body[data-layout="public"] .main-nav-clean a.active{
  color:var(--v21-maroon-800)!important;
  background:#f8eee2!important;
}
html body[data-layout="public"] .main-nav-clean a:hover i,
html body[data-layout="public"] .main-nav-clean a.active i{color:var(--v21-maroon-700)!important}
html body[data-layout="public"] .header-actions{gap:10px!important;flex:0 0 auto!important}
html body[data-layout="public"] .header-actions>.btn{
  min-height:46px!important;
  padding:10px 17px!important;
  font-size:.94rem!important;
}
html body[data-layout="public"] .mobile-toggle{
  position:relative!important;
  z-index:1405!important;
  width:48px!important;
  height:48px!important;
  border-radius:14px!important;
  border:1px solid rgba(217,169,62,.48)!important;
  background:#fffaf1!important;
  color:var(--v21-maroon-800)!important;
  box-shadow:0 8px 24px rgba(66,6,16,.08)!important;
  font-size:1.18rem!important;
}

/* ---------- Contact dock typography ---------- */
html body[data-layout="public"] .assalik-contact-dock .hero-side-card{
  padding:24px 28px!important;
}
html body[data-layout="public"] .hero-contact-layout-clean{gap:22px!important}
html body[data-layout="public"] .hero-contact-profile{gap:18px!important}
html body[data-layout="public"] .hero-contact-profile img{
  width:82px!important;
  height:82px!important;
  flex:0 0 82px!important;
  object-fit:contain!important;
}
html body[data-layout="public"] .hero-contact-profile .eyebrow{
  font-size:.82rem!important;
  line-height:1.3!important;
  letter-spacing:.09em!important;
}
html body[data-layout="public"] .hero-contact-profile h3{
  margin:7px 0 5px!important;
  font-size:1.42rem!important;
  line-height:1.2!important;
}
html body[data-layout="public"] .hero-contact-profile p{
  margin:0!important;
  color:var(--v21-muted)!important;
  font-size:1rem!important;
  line-height:1.58!important;
}
html body[data-layout="public"] .contact-info-card{
  min-height:82px!important;
  padding:16px 18px!important;
  border-radius:17px!important;
}
html body[data-layout="public"] .contact-info-card span{
  font-size:.9rem!important;
  line-height:1.35!important;
}
html body[data-layout="public"] .contact-info-card strong,
html body[data-layout="public"] .contact-info-value{
  margin-top:6px!important;
  font-size:1.05rem!important;
  line-height:1.4!important;
  overflow-wrap:anywhere!important;
}
html body[data-layout="public"] .hero-contact-actions .btn{
  min-height:50px!important;
  padding:11px 17px!important;
  font-size:.96rem!important;
  line-height:1.25!important;
}

/* ---------- Mobile drawer: replaces conflicting old menu rules ---------- */
.mobile-menu-backdrop{
  position:fixed;
  inset:0;
  z-index:1380;
  background:rgba(28,2,7,.62);
  backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .24s ease,visibility .24s ease;
}
body.mobile-menu-open .mobile-menu-backdrop{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.mobile-nav-head,.mobile-nav-login{display:none}

/* ---------- Shared responsive safeguards for public pages ---------- */
html body[data-layout="public"] .table-responsive,
html body[data-layout="public"] .table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
html body[data-layout="public"] input,
html body[data-layout="public"] select,
html body[data-layout="public"] textarea{max-width:100%}
html body[data-layout="public"] .page-hero h1,
html body[data-layout="public"] .section-heading h2,
html body[data-layout="public"] .card h2,
html body[data-layout="public"] .card h3{overflow-wrap:anywhere}

@media(max-width:1280px){
  html body[data-layout="public"] .header-inner{gap:12px!important}
  html body[data-layout="public"] .brand{flex-basis:210px!important;width:210px!important;min-width:210px!important}
  html body[data-layout="public"] .brand img{width:202px!important;max-width:202px!important;height:56px!important}
  html body[data-layout="public"] .main-nav-clean a{padding:9px 8px!important;font-size:.88rem!important;gap:6px!important}
  html body[data-layout="public"] .header-actions>.btn{padding-inline:13px!important;font-size:.88rem!important}
}

@media(max-width:1050px) and (min-width:921px){
  html body[data-layout="public"] .brand{flex-basis:205px!important;width:205px!important;min-width:205px!important}
  html body[data-layout="public"] .brand img{width:198px!important;max-width:198px!important}
  html body[data-layout="public"] .main-nav-clean a span{display:none!important}
  html body[data-layout="public"] .main-nav-clean a{display:grid!important;place-items:center!important;width:44px!important;height:44px!important;padding:0!important}
  html body[data-layout="public"] .main-nav-clean a i{display:block!important;font-size:1.05rem!important}
}

@media(max-width:920px){
  html body[data-layout="public"] .top-strip{display:none!important}
  html body[data-layout="public"] .site-header{top:0!important}
  html body[data-layout="public"] .header-inner{min-height:72px!important;padding-block:4px!important}
  html body[data-layout="public"] .brand{
    flex:0 1 200px!important;
    width:200px!important;
    min-width:0!important;
    height:60px!important;
  }
  html body[data-layout="public"] .brand img{
    width:194px!important;
    max-width:194px!important;
    height:55px!important;
  }
  html body[data-layout="public"] .header-actions>.btn{display:none!important}
  html body[data-layout="public"] .mobile-toggle{display:grid!important;place-items:center!important}

  html body[data-layout="public"] #main-nav.main-nav-clean{
    display:flex!important;
    position:fixed!important;
    inset:0 0 0 auto!important;
    top:0!important;
    right:0!important;
    left:auto!important;
    width:min(370px,90vw)!important;
    max-width:90vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:88px 20px 28px!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:7px!important;
    border:0!important;
    border-left:1px solid rgba(244,215,125,.22)!important;
    border-radius:0!important;
    background:linear-gradient(180deg,var(--v21-maroon-950),var(--v21-maroon-800) 62%,#4d0712)!important;
    box-shadow:-26px 0 70px rgba(30,1,6,.36)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    transform:translateX(104%)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:none!important;
    transition:transform .27s cubic-bezier(.22,.75,.22,1)!important;
    z-index:1400!important;
  }
  html body[data-layout="public"] #main-nav.main-nav-clean.open{
    transform:translateX(0)!important;
    pointer-events:auto!important;
  }
  html body[data-layout="public"] #main-nav.main-nav-clean .mobile-nav-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    position:absolute!important;
    top:14px!important;
    left:18px!important;
    right:18px!important;
    min-height:58px!important;
    padding-bottom:12px!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
  }
  html body[data-layout="public"] #main-nav.main-nav-clean .mobile-nav-head img{
    width:178px!important;
    max-width:178px!important;
    height:52px!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  html body[data-layout="public"] #main-nav.main-nav-clean .mobile-nav-close{
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    height:42px!important;
    flex:0 0 42px!important;
    border:1px solid rgba(244,215,125,.32)!important;
    border-radius:12px!important;
    color:#fff!important;
    background:rgba(255,255,255,.08)!important;
    font-size:1.1rem!important;
    cursor:pointer!important;
  }
  html body[data-layout="public"] #main-nav.main-nav-clean>a{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    height:auto!important;
    min-height:52px!important;
    padding:13px 15px!important;
    gap:13px!important;
    border:1px solid transparent!important;
    border-radius:14px!important;
    color:#fff5e8!important;
    background:transparent!important;
    font-size:1rem!important;
    line-height:1.3!important;
    text-decoration:none!important;
    white-space:normal!important;
  }
  html body[data-layout="public"] #main-nav.main-nav-clean>a span{
    display:inline!important;
    color:inherit!important;
    font-size:inherit!important;
    opacity:1!important;
    visibility:visible!important;
  }
  html body[data-layout="public"] #main-nav.main-nav-clean>a i{
    display:grid!important;
    place-items:center!important;
    width:25px!important;
    height:25px!important;
    flex:0 0 25px!important;
    color:var(--v21-gold-soft)!important;
    font-size:1.02rem!important;
  }
  html body[data-layout="public"] #main-nav.main-nav-clean>a:hover,
  html body[data-layout="public"] #main-nav.main-nav-clean>a.active{
    color:var(--v21-maroon-800)!important;
    background:#fff4e3!important;
    border-color:rgba(242,209,128,.48)!important;
  }
  html body[data-layout="public"] #main-nav.main-nav-clean>a:hover i,
  html body[data-layout="public"] #main-nav.main-nav-clean>a.active i{color:var(--v21-maroon-700)!important}
  html body[data-layout="public"] #main-nav.main-nav-clean .mobile-nav-login{
    display:flex!important;
    margin-top:12px!important;
    color:#2d1609!important;
    background:linear-gradient(135deg,#f7db88,#d8a538)!important;
    border-color:#f4dc9a!important;
  }
  html body[data-layout="public"] #main-nav.main-nav-clean .mobile-nav-login i{color:var(--v21-maroon-800)!important}

  html body[data-layout="public"] .assalik-contact-dock{margin-top:-18px!important}
  html body[data-layout="public"] .hero-contact-layout-clean{grid-template-columns:1fr!important}
  html body[data-layout="public"] .hero-contact-info-clean{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body[data-layout="public"] .hero-contact-actions{grid-column:auto!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}

  html body[data-layout="public"] .purchase-layout,
  html body[data-layout="public"] .checkout-shell,
  html body[data-layout="public"] .contact-grid,
  html body[data-layout="public"] .contact-map-shell,
  html body[data-layout="public"] .customer-hero-grid{grid-template-columns:1fr!important}
}

@media(max-width:640px){
  html{font-size:16px!important}
  html body[data-layout="public"] .container{width:min(100% - 28px,1180px)!important}
  html body[data-layout="public"] .header-inner{min-height:68px!important}
  html body[data-layout="public"] .brand{flex-basis:184px!important;width:184px!important;height:56px!important}
  html body[data-layout="public"] .brand img{width:180px!important;max-width:180px!important;height:52px!important}
  html body[data-layout="public"] .mobile-toggle{width:46px!important;height:46px!important}
  html body[data-layout="public"] #main-nav.main-nav-clean{width:min(350px,92vw)!important;max-width:92vw!important;padding-inline:16px!important}
  html body[data-layout="public"] #main-nav.main-nav-clean .mobile-nav-head{left:15px!important;right:15px!important}
  html body[data-layout="public"] #main-nav.main-nav-clean .mobile-nav-head img{width:164px!important;max-width:164px!important}

  html body[data-layout="public"] .section{padding-top:48px!important;padding-bottom:48px!important}
  html body[data-layout="public"] .assalik-contact-dock .hero-side-card{padding:20px!important}
  html body[data-layout="public"] .hero-contact-profile img{width:72px!important;height:72px!important;flex-basis:72px!important}
  html body[data-layout="public"] .hero-contact-profile h3{font-size:1.28rem!important}
  html body[data-layout="public"] .hero-contact-profile p{font-size:.98rem!important}
  html body[data-layout="public"] .hero-contact-info-clean{grid-template-columns:1fr!important}
  html body[data-layout="public"] .contact-info-card{min-height:78px!important}
  html body[data-layout="public"] .contact-info-card span{font-size:.9rem!important}
  html body[data-layout="public"] .contact-info-card strong,
  html body[data-layout="public"] .contact-info-value{font-size:1rem!important}
  html body[data-layout="public"] .hero-contact-actions{grid-template-columns:1fr!important}
  html body[data-layout="public"] .hero-contact-actions .btn{font-size:.98rem!important}

  html body[data-layout="public"] input,
  html body[data-layout="public"] select,
  html body[data-layout="public"] textarea,
  html body[data-layout="public"] button{font-size:max(16px,1rem)}
  html body[data-layout="public"] .modal{padding:8px!important}
  html body[data-layout="public"] .modal-dialog{width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important}
}

@media(max-width:380px){
  html body[data-layout="public"] .brand{flex-basis:164px!important;width:164px!important}
  html body[data-layout="public"] .brand img{width:160px!important;max-width:160px!important}
  html body[data-layout="public"] #main-nav.main-nav-clean{width:94vw!important;max-width:94vw!important}
}