/* ==========================================================================
   SRK HONDA – GLOBAL PREMIUM THEME
   Path: /home/_admin/app/header.css
   ========================================================================== */

/* ---------- RESET ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f5f5f7;
  color: #0a0a0a;
}

/* ---------- TOKENS ---------- */

:root{
  --red:#d50000;
  --red-dark:#a50000;
  --red-soft:#ffebee;
  --gold:#d4af37;

  --radius-lg:24px;
  --radius-md:16px;
  --radius-pill:999px;

  --shadow-soft:0 12px 36px rgba(0,0,0,.08);
  --shadow-strong:0 20px 50px rgba(0,0,0,.12);

  --maxw:1280px;
}

/* ---------- HEADER ---------- */

.top-bar{
  height:8px;
  background:linear-gradient(90deg,var(--red),var(--gold));
}

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(0,0,0,.05);
}

.nav-container{
  max-width:var(--maxw);
  margin:auto;
  padding:.75rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

/* ---------- BRAND ---------- */

.brand{
  display:flex;
  align-items:center;
  gap:.8rem;
  text-decoration:none;
  font-size:1.7rem;
  font-weight:800;
  color:#000;
  white-space:nowrap;
  flex:0 0 auto;
}

.brand img{
  height:44px;
  width:auto;
  display:block;
}

/* ---------- DESKTOP NAV ---------- */

.nav-pills{
  display:flex;
  align-items:center;
  gap:.8rem;
  background:#fff;
  border-radius:var(--radius-pill);
  padding:.4rem .6rem;
  box-shadow:var(--shadow-soft);
  flex:0 1 auto;
}

.nav-item{ position:relative; }

.nav-pills a,
.nav-pills button{
  all:unset;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.65rem 1.2rem;
  font-size:.95rem;
  font-weight:600;
  border-radius:var(--radius-pill);
  line-height:1;
  user-select:none;
}

.nav-pills a:hover,
.nav-pills button:hover{
  background:var(--red-soft);
  color:var(--red);
}

.nav-pills a.primary{
  background:linear-gradient(45deg,var(--red),var(--red-dark));
  color:#fff;
}

/* ---------- DESKTOP DROPDOWN ---------- */

.dropdown-menu{
  position:absolute;
  top:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  min-width:220px;

  background:#fff;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-strong);
  padding:.6rem 0;
  display:none;
  text-align:center;
  z-index:1200;
}

.dropdown-menu a{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.75rem 1rem;
  text-decoration:none;
  color:#000;
}

.dropdown-menu a:hover{ background:var(--red-soft); }

.nav-item.open .dropdown-menu{ display:block; }

/* ---------- MOBILE ACTIONS (Login + Menu) ---------- */

.mobile-actions{
  display:none; /* desktop hidden */
  align-items:center;
  gap:.65rem;
  flex:0 0 auto;
}

.mobile-auth-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:.6rem 1.05rem;
  border-radius:var(--radius-pill);

  font-weight:900;
  font-size:.95rem;
  text-decoration:none;

  background:#fff;
  color:#000;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--shadow-soft);
  white-space:nowrap;
}

.mobile-auth-btn:hover{
  background:var(--red-soft);
  color:var(--red);
}

.mobile-auth-btn:active{ transform:scale(.98); }

/* ---------- MOBILE TOGGLE ---------- */

.mobile-toggle{
  display:none;
  background:linear-gradient(45deg,var(--red),var(--red-dark));
  color:#fff;
  border-radius:var(--radius-pill);
  padding:.6rem 1.1rem;
  font-weight:900;
  border:none;
  cursor:pointer;
  box-shadow:var(--shadow-soft);
  white-space:nowrap;
}

.mobile-toggle:active{ transform:scale(.98); }

/* ---------- MOBILE MENU ---------- */

@media (max-width:992px){

  .mobile-actions{ display:inline-flex; }

  .mobile-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  /* hide desktop login button on mobile */
  .nav-primary-desktop{ display:none !important; }

  .nav-pills{
    position:fixed;
    top:72px;
    left:50%;
    transform:translateX(-50%);

    width:calc(100vw - 24px);
    max-width:420px;

    flex-direction:column;
    gap:1.1rem;
    padding:1.2rem;

    border-radius:28px;
    box-shadow:0 20px 60px rgba(0,0,0,.35);

    display:none;
    background:#fff;

    max-height:calc(100vh - 110px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    z-index:2000;
  }

  .nav-pills.show{ display:flex; }

  .nav-pills a,
  .nav-pills button{
    width:100%;
    justify-content:center;
    text-align:center;
    padding:.9rem 0;
  }

  .dropdown-menu{
    position:static;
    transform:none;
    width:100%;
    box-shadow:none;
    background:#f7f7f7;
    border-radius:16px;
    margin-top:.4rem;
    padding:.4rem 0;
  }

  .dropdown-menu a{
    width:100%;
    justify-content:center;
    padding:.7rem 0;
  }
}

@media (max-width:420px){

  .brand{ font-size:1.5rem; }
  .nav-pills{ max-width:calc(100vw - 16px); padding:1rem; }

  .mobile-auth-btn{
    padding:.58rem .9rem;
    font-size:.92rem;
  }

  .mobile-toggle{
    padding:.58rem .9rem;
    font-size:.92rem;
  }

@media (max-width:420px){
  .pwa-install-inner{
    grid-template-columns:40px 1fr auto 36px;
    padding:10px 10px;
    border-radius:16px;
  }
}