/* ============================================
   HI69 — Layout Styles (Header, Nav, Footer)
   ============================================ */

/* ---- Top Header ---- */
.header {
    position: fixed; top: 0; left: 50%;
    transform: translateX(-50%);
    width: 100%; max-width: var(--max-width);
    height: var(--header-height);
    background: var(--gradient-header);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-light);
    z-index: var(--z-header);
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-lg);
}
.header-left { display: flex; align-items: center; gap: var(--space-sm); }
.header-logo { height: 32px; width: auto; }
.header-right { display: flex; align-items: center; gap: var(--space-md); }

.header-balance {
    display: flex; align-items: center; gap: 6px;
    background: var(--bg-tertiary); padding: 5px 12px;
    border-radius: var(--radius-pill); font-size: var(--font-size-sm);
    font-weight: 600; color: var(--gold);
    border: 1px solid rgba(255,215,0,0.2);
}
.header-balance .currency { font-size: 11px; color: var(--text-muted); }

.header-btn {
    padding: 6px 14px; border-radius: var(--radius-pill);
    font-size: var(--font-size-xs); font-weight: 600;
    transition: all var(--transition-normal);
}
.header-btn-login {
    background: transparent; border: 1.5px solid var(--green);
    color: var(--green);
}
.header-btn-signup {
    background: var(--gradient-green); color: #fff;
    border: none;
}

.header-icon {
    width: 36px; height: 36px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-tertiary); color: var(--text-secondary);
    font-size: 18px; position: relative;
    transition: all var(--transition-normal);
}
.header-icon:active { transform: scale(0.9); }
.header-icon .notif-dot {
    position: absolute; top: 4px; right: 4px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--red); border: 2px solid var(--bg-primary);
}

/* ---- Bottom Navigation ---- */
.bottom-nav {
    position: fixed; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 100%; max-width: var(--max-width);
    height: var(--nav-height);
    background: linear-gradient(180deg, rgba(15,25,35,0.95), #0f1923);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-light);
    z-index: var(--z-nav);
    display: flex; align-items: center;
    justify-content: space-around;
    padding: 0 var(--space-sm);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-item {
    display: flex; flex-direction: column;
    align-items: center; gap: 2px;
    color: var(--text-muted); font-size: var(--font-size-xs);
    padding: 6px 12px; border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    text-decoration: none; position: relative;
    -webkit-tap-highlight-color: transparent;
}
.nav-item.active {
    color: var(--green);
}
.nav-item.active .nav-icon {
    color: var(--green);
    filter: drop-shadow(0 0 6px rgba(0,200,150,0.4));
}
.nav-icon { font-size: 22px; transition: all var(--transition-normal); }
.nav-label { font-weight: 500; }

/* Center deposit button */
.nav-item-center {
    position: relative; top: -12px;
}
.nav-item-center .nav-icon-center {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--gradient-green);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: #fff;
    box-shadow: 0 4px 20px rgba(0,200,150,0.4);
    animation: pulse 2s ease-in-out infinite;
}

/* ---- Sidebar Menu ---- */
.sidebar-overlay {
    position: fixed; inset: 0;
    background: var(--bg-overlay);
    z-index: 300; display: none;
}
.sidebar-overlay.active { display: block; }
.sidebar {
    position: fixed; top: 0; left: -280px;
    width: 280px; height: 100%; background: var(--bg-secondary);
    z-index: 301; transition: left 0.3s ease;
    overflow-y: auto;
}
.sidebar.active { left: 0; }
.sidebar-header {
    padding: var(--space-xl);
    background: linear-gradient(135deg, #1e3a4f, #0f2636);
    border-bottom: 1px solid var(--border-color);
}
.sidebar-user { display: flex; align-items: center; gap: var(--space-md); }
.sidebar-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--gradient-green);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; color: #fff;
}
.sidebar-username { font-weight: 600; font-size: var(--font-size-md); }
.sidebar-uid { font-size: var(--font-size-xs); color: var(--text-muted); }

.sidebar-menu { padding: var(--space-md); }
.sidebar-item {
    display: flex; align-items: center; gap: var(--space-md);
    padding: 12px var(--space-lg); border-radius: var(--radius-md);
    color: var(--text-secondary); font-size: var(--font-size-base);
    transition: all var(--transition-normal);
    margin-bottom: 2px;
}
.sidebar-item:active { background: var(--bg-card); }
.sidebar-item .sidebar-item-icon { font-size: 20px; width: 24px; text-align: center; }
.sidebar-divider {
    height: 1px; background: var(--border-color);
    margin: var(--space-md) var(--space-lg);
}

/* ---- Page Header (inner pages) ---- */
.page-header {
    position: fixed; top: 0; left: 50%;
    transform: translateX(-50%);
    width: 100%; max-width: var(--max-width);
    height: var(--header-height);
    background: var(--bg-secondary);
    z-index: var(--z-header);
    display: flex; align-items: center;
    padding: 0 var(--space-lg);
    border-bottom: 1px solid var(--border-light);
}
.page-header-back {
    width: 32px; height: 32px; display: flex;
    align-items: center; justify-content: center;
    font-size: 20px; color: var(--text-secondary);
    margin-right: var(--space-md);
}
.page-header-title {
    flex: 1; font-size: var(--font-size-md);
    font-weight: 600; text-align: center;
    margin-right: 32px;
}