/* ============================================================
   LIBFLIX AUTH AREA STYLES
   Shared across all pages. Link with:
   <link rel="stylesheet" href="auth.css">
   Relies on the page already defining these CSS variables:
   --accent, --accent-dark, --accent-light, --card-bg, --border, --text-primary
============================================================ */
.btn-login {
    padding: 8px 16px;
    background: var(--accent);
    color: white;
    text-decoration: none;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    margin-left: 10px;
    white-space: nowrap;
    transition: background 0.2s, transform 0.2s;
}
.btn-login:hover { background: var(--accent-dark); transform: translateY(-1px); }

.auth-user { position: relative; margin-left: 10px; }
.auth-avatar-btn {
    display: flex; align-items: center; gap: 8px;
    background: var(--accent-light);
    border: 2px solid var(--accent);
    border-radius: 24px;
    padding: 4px 12px 4px 4px;
    cursor: pointer;
    transition: border-color 0.2s;
}
.auth-avatar-btn:hover { border-color: var(--accent-dark); }
.auth-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent); color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
}
.auth-email {
    font-size: 0.82rem; font-weight: 600; color: var(--text-primary);
    max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auth-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--card-bg); border: 2px solid var(--border);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.15);
    min-width: 150px; overflow: hidden;
    display: none; z-index: 1100;
}
.auth-dropdown.open { display: block; }
.auth-dropdown-item {
    width: 100%; text-align: left; padding: 12px 14px;
    background: none; border: none; cursor: pointer;
    font-size: 0.88rem; font-weight: 600; color: var(--text-primary);
    transition: background 0.2s;
}
.auth-dropdown-item:hover { background: var(--accent-light); }
@media (max-width: 600px) {
    .auth-email { display: none; }
    .auth-avatar-btn { padding: 4px; border-radius: 50%; }
}