/* Reset page spacing so hero sits flush with top */
html, body { margin: 0; padding: 0; }

/* Make hero occupy full viewport and remove main padding that pushes it down */
#hero { position: relative; top: 60px; height: 100vh; min-height: 520px; display: block; overflow: hidden; }
main { padding-top: 0 !important; }

/* Account area */
.z-hero-account { position: absolute; top: 18px; right: 20px; z-index: 60; display: flex; align-items: center; gap: 8px; }
.z-hero-account .hero-account-toggle { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); padding: 8px 10px; border-radius: 999px; color: #fff; display: inline-flex; align-items: center; gap:8px; cursor: pointer; }
.z-hero-account .hero-account-toggle i { font-size: 18px; }
.z-hero-account .hero-login-btn { background: rgba(0,0,0,0.6); color: #fff; padding: 8px 12px; border-radius: 8px; text-decoration: none; }

.hero-account-menu { position: absolute; right: 0; top: 48px; width: 180px; background: #fff; color: #111; border-radius: 10px; box-shadow: 0 8px 30px rgba(12,15,25,0.2); transform-origin: top right; opacity: 0; pointer-events: none; transform: translateY(-6px) scale(0.98); transition: all 160ms ease; }
.hero-account-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.hero-account-menu a { display: block; padding: 10px 12px; color: inherit; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,0.04); }
.hero-account-menu a:last-child { border-bottom: none; }

/* Hero slider styles */
.hero-slider { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 18px; }
.hero-slider-track { height: 100%; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Controls (optional) */
.hero-prev, .hero-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.45); color: #fff; border: none; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:30; }
.hero-prev { left: 12px; }
.hero-next { right: 12px; }

/* Floating chips and CTA should stay above slider */
.z-showcase-card { position: relative; z-index: 20; }
.z-float-chip { z-index: 25; }
.z-card-pill { z-index: 25; }

/* Responsive adjustments */
@media (max-width: 768px) {
  .z-hero-account { top: 12px; right: 12px; }
  .hero-account-menu { right: -6px; width: 160px; }
  #hero { min-height: 640px; }
}

/* Navbar account (placed inside .z-top-bar) */
.nav-account { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; position: relative; }
.nav-account .account-toggle { background: transparent; border: none; color: var(--z-text, #111); font-size: 20px; cursor: pointer; display:inline-flex; align-items:center; justify-content:center; padding:6px; border-radius:8px; }
.nav-account .nav-login, .nav-account .nav-register { display: inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; text-decoration:none; background: transparent; border:1px solid rgba(0,0,0,0.06); color:var(--z-text); }
.nav-account .nav-register { background: var(--z-red, #cc0000); color: #fff; border-color: transparent; }
.account-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px; background: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(12,15,25,0.12); opacity: 0; transform: translateY(-6px) scale(0.98); pointer-events: none; transition: all 180ms ease; z-index: 120; overflow: hidden; }
.account-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.account-menu a { display:block; padding:10px 14px; color:var(--z-text,#222); text-decoration:none; border-bottom:1px solid rgba(0,0,0,0.04); }
.account-menu a:last-child{ border-bottom: none; }

@media (max-width: 576px) {
  .nav-account .nav-login, .nav-account .nav-register { padding: 6px 8px; font-size: 14px; }
}