/* Universal Header Styles - Shared across all templates */
/* New modern header (match songPage) */
.header { 
  display:flex; 
  align-items:center; 
  gap:12px; 
  justify-content:space-between; 
  padding:12px 14px; 
  background: rgba(20, 20, 25, 0.95); 
  border-radius:12px; 
  margin-bottom:14px; 
  box-shadow: 0 4px 20px rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(255,255,255,0.06);
}
.header h1 {
  font-size:1.35rem; 
  background:linear-gradient(90deg,#00ff88,#9900ff); 
  background-clip:text;
  -webkit-background-clip:text; 
  -webkit-text-fill-color:transparent; 
  display:flex; 
  align-items:center; 
  gap:8px;
}
.jp-tag{font-size:0.8rem; color:#fff; opacity:0.6; -webkit-text-fill-color:initial}
.search-bar{flex:1; margin:0 12px; position:relative}
.search-bar input{width:100%; height:38px; padding:8px 40px 8px 12px; border-radius:12px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.10); color:#fff; font-family: 'Vazir', 'Poppins', sans-serif;}
.search-bar i{position:absolute; right:10px; top:50%; transform:translateY(-50%); color:rgba(255,255,255,0.75); cursor:pointer}
.nav-buttons{display:flex; align-items:center; gap:8px}
.nav-buttons button{background:none;border:none;color:rgba(255,255,255,0.8);font-size:1.05rem;cursor:pointer}
.nav-buttons button:hover{color:var(--primary)}

/* search suggestions */
.search-suggestions{position:absolute; left:0; right:0; top:calc(100% + 6px); background:rgba(20,20,25,0.98); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:8px; z-index:50; box-shadow: 0 10px 24px rgba(0,0,0,0.35); display:none; max-height: 50vh; overflow:auto}
.search-suggestion{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; color:#e6ffea; cursor:pointer}
.search-suggestion i{opacity:0.8}
.search-suggestion:hover{background:rgba(255,255,255,0.06)}

/* Drawer, bottom nav, and FAB */
.icon-btn{width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.06);color:#e6ffea;display:grid;place-items:center;cursor:pointer;transition:transform .2s ease,background .2s ease}
.icon-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,0.1)}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:1000}
.drawer{position:fixed;top:0;left:-280px;width:260px;height:100%;background:rgba(20,20,28,0.98);backdrop-filter:blur(8px);border-right:1px solid rgba(0,204,102,0.2);transition:left .25s ease;z-index:1001;display:flex;flex-direction:column}
.drawer-header{padding:16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,0.06)}
.drawer-nav{padding:10px;display:grid;gap:8px}
.drawer-link{display:flex;align-items:center;gap:10px;padding:12px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.04);color:#e6ffea;text-decoration:none;font-weight:500}
.drawer-open .drawer{left:0}
.drawer-open .drawer-overlay{opacity:1;pointer-events:auto}

/* User profile menu */
.user-menu-container{position:relative}
.user-avatar{width:36px;height:36px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all 0.2s ease;object-fit:cover}
.user-avatar:hover{border-color:var(--primary);box-shadow:0 0 10px rgba(0,255,136,0.3)}
.user-menu-dropdown{position:absolute;right:0;top:calc(100% + 10px);background:rgba(20,20,25,0.98);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:8px;min-width:200px;box-shadow:0 10px 30px rgba(0,0,0,0.5);z-index:1000;display:none}
.user-menu-dropdown.show{display:block}
.user-menu-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:all 0.2s ease;text-decoration:none;color:#e6ffea}
.user-menu-item:hover{background:rgba(255,255,255,0.05)}
.user-menu-item i{width:20px;text-align:center}
.user-menu-divider{height:1px;background:rgba(255,255,255,0.1);margin:6px 0}
.login-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:linear-gradient(90deg,var(--primary),#9900ff);color:#000;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:0.9rem}
.login-btn:hover{opacity:0.9}

/* Responsive */
@media (max-width: 880px) {
  .header-container > .header{
    padding:10px 12px;
    gap:10px;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:auto auto !important;
    flex-wrap:nowrap !important;
    flex-direction:row !important;
    align-items:center;
  }
  .header-container > .header > h1{
    font-size:1.15rem;
    grid-column:1;
    grid-row:1;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .jp-tag{display:none}
  .header-container > .header > .nav-buttons{
    grid-column:2;
    grid-row:1;
    flex:0 0 auto;
    margin-left:8px;
    justify-self:end;
  }
  .header-container > .header > .search-bar{
    grid-column:1 / -1;
    grid-row:2;
    margin:8px 0 0;
  }
  .search-bar input{height:40px; border-radius:10px}
}
@media (max-width: 480px) {
  .header{padding:8px 10px}
  .header h1{font-size:1.05rem}
  .nav-buttons{gap:6px}
  .icon-btn{width:32px;height:32px}
  .search-bar input{height:40px}
}