/* ==========================================================================
   SHIV AADI RENTAL — Global chrome v3 (Black · Gold · Ivory)
   Header + Bottom nav. Shared by every customer page.
   ========================================================================== */
:root{
  --sa-ink:#0a0a0c; --sa-ink-2:#141417; --sa-ink-3:#1d1d22;
  --sa-gold:#d4a62a; --sa-gold-hi:#f3cf63; --sa-gold-lo:#a47a12;
  --sa-ivory:#faf8f3; --sa-line:#ece6d6; --sa-muted:#7c7566;
  --sa-gold-grad:linear-gradient(135deg,#f3cf63 0%,#d4a62a 48%,#a47a12 100%);
  /* re-point the legacy theme tokens so every page picks up the new palette */
  --primary:#d4a62a; --primary-dark:#a47a12; --primary-light:#fbf5e3;
  --primary-glow:rgba(212,166,42,.20); --secondary:#0a0a0c; --accent:#b8891a;
  --text-main:#0a0a0c; --shadow-primary:0 8px 24px rgba(212,166,42,.30);
}

/* ---------------- HEADER ---------------- */
/* overflow-x:clip (not hidden) keeps the sticky header working while still preventing sideways scroll */
html,body{overflow-x:clip}
body{overflow-x:clip!important}
.top-header{
  background:#08080a!important;
  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  border-bottom:0!important;height:66px!important;padding:0 16px!important;
  box-shadow:0 8px 24px -16px rgba(10,10,12,.55)!important;
}
.top-header .back-btn{color:rgba(255,255,255,.9)}
.top-header .header-title{color:rgba(255,255,255,.92)}
.top-header .hd-icon-btn{color:#fff}
.top-header::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent 0%,#a47a12 18%,#f3cf63 50%,#a47a12 82%,transparent 100%);
  opacity:.85;pointer-events:none;
}
.top-header .logo img{height:46px!important;max-height:46px;filter:drop-shadow(0 4px 14px rgba(243,207,99,.25))}
.top-header .logo img:hover{transform:scale(1.03);filter:drop-shadow(0 4px 12px rgba(212,166,42,.35))}
.top-header .whatsapp-btn{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--sa-ink);color:var(--sa-gold-hi)!important;
  box-shadow:0 8px 18px -8px rgba(10,10,12,.7),inset 0 0 0 1.5px rgba(243,207,99,.45);
  transition:transform .15s,box-shadow .15s;
}
.top-header .whatsapp-btn:active{transform:scale(.93)}
.top-header .whatsapp-btn svg{width:19px;height:19px}
@media(min-width:768px){
  .top-header{height:72px!important;padding:0 28px!important}
  .top-header .logo img{height:54px!important}
  .desktop-nav .nav-item{color:#cfc9b8!important;border-radius:12px!important;position:relative}
  .desktop-nav .nav-item:hover{color:#fff!important;background:rgba(243,207,99,.14)!important}
  .desktop-nav .nav-item.active{color:#fff!important;background:rgba(243,207,99,.18)!important}
  .desktop-nav .nav-item.active::after{
    content:"";position:absolute;left:18px;right:18px;bottom:3px;height:2px;border-radius:2px;background:var(--sa-gold-grad)
  }
}

/* sign-in / profile button in header */
.profile-login-btn{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;width:auto!important;height:auto!important;padding:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.profile-login-btn:hover{background:none!important;box-shadow:none!important;transform:scale(1.06)}
.profile-login-btn .login-icon-img{width:54px!important;height:54px!important;max-width:none;object-fit:contain;display:block;filter:drop-shadow(0 4px 8px rgba(10,10,12,.22))}
.profile-avatar-btn{width:48px!important;height:48px!important}
.top-header .header-right{gap:6px!important}

/* ---------------- BOTTOM NAV (floating white + gold dock) ---------------- */
.liquid-dock{
  position:fixed;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));
  max-width:500px;margin:0 auto;height:68px;z-index:500;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(252,249,241,.98));
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  border-radius:26px;
  box-shadow:0 20px 40px -16px rgba(120,90,15,.45),0 0 0 1.5px rgba(212,166,42,.45),inset 0 1px 0 #fff;
  -webkit-tap-highlight-color:transparent;
}
.dock__cast,.dock__skin,.dock__bead{display:none}
.dock__tabs{position:absolute;inset:0;display:flex;align-items:stretch;justify-content:space-between;padding:7px 8px;gap:2px}
.tab{
  position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  height:auto;padding:0 2px;border-radius:19px;color:#9a927c;text-decoration:none;
  transition:color .25s,background .25s,transform .15s;
}
.tab:active{transform:scale(.94)}
.tab:focus-visible{outline:2px solid var(--sa-gold);outline-offset:2px}
.tab__icon{width:23px;height:23px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.tab__icon .fill-dot{fill:currentColor;stroke:none}
.tab__label{
  max-width:100%;opacity:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;
  font-size:10px;font-weight:600;letter-spacing:.02em;line-height:1;transition:color .25s
}
.tab[aria-current="page"]{
  color:#3d2c05;padding:0 2px;
  background:linear-gradient(160deg,#f7d96f 0%,#e0b434 55%,#c9971c 100%);
  box-shadow:0 10px 18px -10px rgba(164,122,18,.95),inset 0 1px 0 rgba(255,255,255,.65);
}
.tab[aria-current="page"] .tab__icon{transform:translateY(-1px) scale(1.08)}
.tab[aria-current="page"] .tab__label{color:#3d2c05;max-width:100%;margin:0;font-weight:800}
.tab[aria-current="page"]::before{
  content:"";position:absolute;top:-8px;left:50%;width:26px;height:3px;transform:translateX(-50%);
  border-radius:0 0 4px 4px;background:var(--sa-gold-grad);box-shadow:0 2px 10px rgba(212,166,42,.8)
}
body{padding-bottom:calc(98px + env(safe-area-inset-bottom))}
@media(min-width:768px){.liquid-dock{display:none!important}body{padding-bottom:0}}
@media(max-width:350px){.tab__label{font-size:9px}.tab__icon{width:21px;height:21px}}
@media(prefers-reduced-motion:reduce){.tab,.tab__icon,.tab__label{transition:none}}