/* ================================================================
   SpielZent universal top navigation
   Loaded by the root layout and Area layouts.
   Button surfaces stay neutral; ONLY the icons receive accent colors.
   ================================================================ */

.sz-navbar-brand {
    display: inline-flex;
    align-items: center;
    margin-right: 1rem;
    padding: .15rem 0;
    text-decoration: none;
}

.sz-navbar-brand img {
    display: block;
    width: auto;
    height: 46px;
    max-width: 210px;
    object-fit: contain;
}

.sz-navbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    color: #fff;
}

.sz-navbar-actions .sz-login-partial {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

/* Neutral button surface. No red/colorful button boxes. */
.sz-navbar-actions .sz-icon-btn,
.sz-navbar-actions .sz-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 38px;
    padding: .4rem .65rem;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.045) !important;
    color: #fff !important;
    box-shadow: none !important;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.sz-navbar-actions .sz-icon-btn:hover,
.sz-navbar-actions .sz-icon-btn:focus,
.sz-navbar-actions .sz-auth-btn:hover,
.sz-navbar-actions .sz-auth-btn:focus {
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.55) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Text always remains white. */
.sz-navbar-actions .sz-nav-label,
.sz-navbar-actions .sz-auth-btn span,
.sz-navbar-actions .sz-profile-name {
    color: #fff !important;
}

/* ONLY icons are colorful. */
.sz-navbar-actions .sz-wishlist-btn .bi { color: #ff3b72 !important; }
.sz-navbar-actions .sz-cart-btn .bi     { color: #34c9ff !important; }
.sz-navbar-actions .sz-address-btn .bi  { color: #ffc107 !important; }
.sz-navbar-actions .sz-login-btn .bi    { color: #36e39a !important; }
.sz-navbar-actions .sz-register-btn .bi { color: #b783ff !important; }
.sz-navbar-actions .sz-logout-btn .bi   { color: #ff5a5f !important; }

.sz-navbar-actions .sz-icon-btn .bi,
.sz-navbar-actions .sz-auth-btn .bi {
    font-size: 1.05rem;
    line-height: 1;
    transition: filter .18s ease, transform .18s ease;
}

.sz-navbar-actions .sz-icon-btn:hover .bi,
.sz-navbar-actions .sz-auth-btn:hover .bi {
    filter: brightness(1.18);
    transform: scale(1.08);
}

/* Logged-in profile remains neutral; the photo provides the visual identity. */
.sz-profile-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 40px;
    padding: .2rem .55rem .2rem .22rem;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    color: #fff !important;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.sz-profile-link:hover,
.sz-profile-link:focus {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.55);
    color: #fff !important;
    transform: translateY(-1px);
}

.sz-navbar-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #111;
    box-shadow: 0 0 0 2px rgba(220,53,69,.75);
}

.sz-profile-name {
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .84rem;
}

.sz-logout-form { margin: 0; }
.sz-logout-form button { white-space: nowrap; }

/* Logo helpers shared by top/footer branding. */
.sz-site-logo { display:block; width:auto; max-width:100%; object-fit:contain; }
.sz-site-logo--nav { height:46px; max-width:210px; }
.sz-site-logo--footer { height:64px; max-width:280px; margin-inline:auto; }
.sz-footer-brand { display:flex; justify-content:flex-start; align-items:center; padding:.25rem 0 .75rem; }

@media (max-width: 1199.98px) {
    .sz-navbar-actions { justify-content:flex-start; }
}

@media (max-width: 575.98px) {
    .sz-navbar-brand img,
    .sz-site-logo--nav { height:38px; max-width:170px; }
    .sz-navbar-actions { gap:.35rem !important; }
    .sz-navbar-actions .sz-login-partial { gap:.35rem !important; }
    .sz-nav-label,
    .sz-profile-name,
    .sz-auth-btn span { display:none; }
    .sz-navbar-actions .sz-icon-btn,
    .sz-navbar-actions .sz-auth-btn { width:38px; padding:.4rem; }
    .sz-profile-link { padding:.18rem; border-radius:50%; }
    .sz-site-logo--footer { height:50px; max-width:220px; }
}