/* ============================================================
   auth-nav.css — Shortcode [auth_nav] Styles
   ============================================================ */

/* ── Shared wrapper ──────────────────────────────────────────── */
.auth-nav {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ── Guest buttons ───────────────────────────────────────────── */
.auth-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 25px;
    border-radius: 6px;
    font-size: 17px;
    font-weight: 400;
    text-decoration: none;
    line-height: 1;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
    cursor: pointer;
}

/* Đăng ký – outline */
.auth-nav__btn--register {
    background: transparent;
    color: #30358B;
}

body.home .auth-nav__btn--register {
    color: #FFFFFF;
}

@media (max-width: 768px) {
    .auth-nav__btn {
        min-height: 37px;
    }
    .auth-nav__btn--register {
        color: #fff !important;
        background: linear-gradient(276.97deg, #0200B9 0.03%, #020207 99.97%);
        border-radius: 51px;
    }
}

/* Đăng nhập – solid */
.auth-nav__btn--login {
    color: #fff !important;
    background: linear-gradient(276.97deg, #0200B9 0.03%, #020207 99.97%);
    border-radius: 51px;
}

/* ── Profile button ──────────────────────────────────────────── */
.auth-nav__profile {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(321.04deg, #0200B9 22.36%, #020207 77.64%);
    color: #fff !important;
    padding: 8px 12px;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

/* Avatar circle */
.auth-nav__avatar-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background: #2a2a4e;
    flex-shrink: 0;
}

.auth-nav__avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: block;
    object-fit: cover;
}

/* Default avatar fallback (letter) */
.auth-nav__avatar-wrap svg {
    color: rgba(255, 255, 255, 0.8);
    width: 16px;
    height: 16px;
}

/* Name */
.auth-nav__name {
    white-space: nowrap;
    font-size: 16px;
    font-weight: 400;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 480px) {
    .auth-nav__btn {
        padding: 7px 12px;
        font-size: 0.8rem;
    }

    .auth-nav__name {
        max-width: 90px;
    }
}