/* auth-header.css
   Combined header layout fixes + user avatar/menu styles.
   Save this as auth-header.css (or append to the bottom of Sponsorlar.css / Index.css).
*/

/* ---------- Header layout: center logo + left/right flows ---------- */
.header-inner {
  position: relative;              /* for absolute-centering the logo */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 20px 0;    /* restore previous padding */
  min-height: 76px;   /* adjust to match original header height */
  box-sizing: border-box;
}

/* Left nav (kept in normal flow) */
.left-nav {
  display: flex;
  gap: 18px;
  align-items: center;
  z-index: 40;
  order: 1;
  flex: 0 0 auto;
}

/* Logo: absolute center so it doesn't push other items */
.logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto; /* set to auto if you want it clickable */
  order: 2;
}
.logo img {
  display: block;
  height: 48px;
  width: auto;
  max-height: 64px;
}

/* Right actions: stay to the right and do not collapse */
.header-inner > .right-actions,
.header-inner > .left-nav {
  flex: 0 0 auto;
  align-items: center;
}

/* ensure the right-actions is pushed to the far right */
.right-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  z-index: 40;
  order: 3;
  flex: 0 0 auto;
}

/* ---------- User badge / avatar styles (both class variants supported) ---------- */
.user-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}

/* button wrappers to remove default button visuals and keep circular crop */
.user-avatar-btn,
.user-logo-btn {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

/* circular avatar image (used by auth.js: .user-avatar) */
.user-avatar,
.user-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

/* user name text next to avatar */
.user-name {
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  margin-right: 6px;
}

/* logout button styling */
.btn-logout,
.btn.btn-logout {
  background: linear-gradient(180deg,#083f78,#042b56);
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
}

/* auth button group when logged out */
.auth-buttons { display:flex; gap:8px; align-items:center; }

/* user menu styling (if you create a dropdown) */
.user-menu {
  background: #07142a;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 8px;
  min-width: 140px;
  z-index: 12000;
  box-shadow: 0 10px 30px rgba(2,6,23,0.6);
}
.user-menu-item {
  display: block;
  padding: 8px 10px;
  color: #e8f2ff;
  text-decoration: none;
  border-radius: 6px;
  margin-bottom: 4px;
}
.user-menu-item:hover { background: rgba(255,255,255,0.02); }

/* ---------- Ensure buttons keep consistent sizing ---------- */
.btn, .btn-outline, .btn-logout {
  padding: 8px 12px;
  height: auto;
  line-height: 1;
}

/* ---------- Accessibility and small-screen tweaks ---------- */
@media (max-width: 1024px) {
  .logo img { height: 44px; }
  .user-name { font-size: 13px; }
}

@media (max-width: 820px) {
  .header-inner { padding: 12px 0; min-height: 56px; }
  .logo img { height: 40px; }
  .user-name { display: none; } /* hide long username on smaller screens */
  .left-nav { gap: 10px; }
}

/* ---------- Debug helpers (optional, can be removed) ---------- */
/* Uncomment during debugging to see header box sizes */
/*
.header-inner { outline: 1px dashed rgba(255,255,255,0.06); }
.left-nav { outline: 1px solid rgba(0,255,0,0.06); }
.right-actions { outline: 1px solid rgba(0,0,255,0.06); }
.logo { outline: 1px dashed rgba(255,0,0,0.06); }
*/