/* =============================================
   NUBAGAME CLIENT THEME — GOLD & RED
   Loaded after index.css to override SPA styles
   ============================================= */

:root {
    --nuba-gold:       #FFD700;
    --nuba-gold-dark:  #D4A000;
    --nuba-red:        #CC0000;
    --nuba-red-dark:   #8B0000;
    --nuba-dark:       #1C0500;
    --nuba-dark2:      #2A0700;
    --nuba-border:     #3D0A00;
}

/* =============================================
   TOPBAR — dark red background, gold text
   ============================================= */

.c-topbar {
    background-color: var(--nuba-dark) !important;
    border-bottom: 1px solid var(--nuba-border) !important;
}
.c-topbar,
.c-topbar .c-topbar__contacts-info,
.c-topbar .c-topbar__contacts-info a {
    color: var(--nuba-gold) !important;
}
.c-topbar .c-topbar__contacts-icons a {
    color: var(--nuba-gold) !important;
    opacity: 0.85;
}
.c-topbar .c-topbar__contacts-icons a:hover {
    color: #fff !important;
    opacity: 1;
}

/* =============================================
   NAVBAR — dark background, gold menu links
   ============================================= */

.c-navbar {
    background-color: var(--nuba-dark2) !important;
    border-bottom: 2px solid var(--nuba-red) !important;
    box-shadow: 0 2px 10px rgba(204,0,0,0.2) !important;
}
.c-navbar__container {
    background-color: transparent !important;
}

/* Desktop menu links */
.c-navbar__menu-desktop .c-menu-link > a,
.c-navbar__menu-desktop .c-menu-link > span.link {
    color: #E8C97A !important;
    font-weight: 500;
    transition: color 0.2s;
}
.c-navbar__menu-desktop .c-menu-link > a:hover,
.c-navbar__menu-desktop .c-menu-link > span.link:hover,
.c-navbar__menu-desktop .c-menu-link > a.router-link-active {
    color: var(--nuba-gold) !important;
}

/* Mobile menu toggle button */
.c-navbar-toggle,
.c-topbar-toggle {
    color: var(--nuba-gold) !important;
}

/* Mobile dropdown menu */
.c-navbar__menu-mobile {
    background-color: var(--nuba-dark) !important;
}
.c-navbar__menu-mobile > li.c-menu-link {
    border-bottom-color: var(--nuba-border) !important;
}
.c-navbar__menu-mobile > li.c-menu-link > a,
.c-navbar__menu-mobile > li.c-menu-link > span.link {
    color: #E8C97A !important;
}
.c-navbar__menu-mobile > li.c-menu-link > a:hover,
.c-navbar__menu-mobile > li.c-menu-link > span.link:hover {
    color: var(--nuba-gold) !important;
}

/* Navbar buttons (login/register) */
.c-navbar__menu__btn .btn-danger,
.c-navbar .btn-danger {
    background-color: var(--nuba-red) !important;
    border-color: var(--nuba-red) !important;
}
.c-navbar__menu__btn .btn-danger:hover,
.c-navbar .btn-danger:hover {
    background-color: var(--nuba-red-dark) !important;
    border-color: var(--nuba-red-dark) !important;
}
.c-navbar__menu__btn .btn-primary,
.c-navbar .btn-primary {
    background-color: var(--nuba-gold) !important;
    border-color: var(--nuba-gold) !important;
    color: #1A0000 !important;
    font-weight: 600;
}
.c-navbar__menu__btn .btn-primary:hover,
.c-navbar .btn-primary:hover {
    background-color: var(--nuba-gold-dark) !important;
    color: #1A0000 !important;
}

/* =============================================
   FOOTER — dark with gold accents
   ============================================= */

footer {
    background-color: var(--nuba-dark) !important;
    border-top: 2px solid var(--nuba-red) !important;
    color: #C8A055 !important;
}
footer a {
    color: var(--nuba-gold) !important;
}
footer a:hover {
    color: #fff !important;
}
footer h4, footer h5, footer h6 {
    color: var(--nuba-gold) !important;
}
.c-footer__info h4 {
    border-bottom: 1px solid var(--nuba-border);
    padding-bottom: 0.5rem;
}
.c-footer__address li i {
    color: var(--nuba-red) !important;
}

/* =============================================
   BUTTONS — global overrides
   ============================================= */

.btn-danger {
    background-color: var(--nuba-red) !important;
    border-color: var(--nuba-red) !important;
    color: #fff !important;
}
.btn-danger:hover, .btn-danger:active {
    background-color: var(--nuba-red-dark) !important;
    border-color: var(--nuba-red-dark) !important;
}
.btn-primary {
    background-color: var(--nuba-gold) !important;
    border-color: var(--nuba-gold) !important;
    color: #1A0000 !important;
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:active {
    background-color: var(--nuba-gold-dark) !important;
    border-color: var(--nuba-gold-dark) !important;
    color: #1A0000 !important;
}
.btn-outline-danger {
    color: var(--nuba-red) !important;
    border-color: var(--nuba-red) !important;
}
.btn-outline-danger:hover {
    background-color: var(--nuba-red) !important;
    color: #fff !important;
}

/* =============================================
   PAGE TITLES & DECORATIVE LINES
   ============================================= */

.c-title__line {
    background-color: var(--nuba-red) !important;
}
.c-title {
    color: #1A0000 !important;
}

/* =============================================
   CATEGORY BOXES
   ============================================= */

.c-category-box:hover {
    border-color: var(--nuba-gold) !important;
    box-shadow: 0 4px 15px rgba(255,215,0,0.15) !important;
}
.c-category-box__name {
    color: #1A0000 !important;
}

/* =============================================
   TAGS / BADGES
   ============================================= */

.c-tag-warning {
    color: var(--nuba-gold-dark) !important;
    border-color: var(--nuba-gold) !important;
    background-color: rgba(255,215,0,0.08) !important;
}

/* =============================================
   PAGINATION
   ============================================= */

.page-item.active .page-link {
    background-color: var(--nuba-red) !important;
    border-color: var(--nuba-red) !important;
}
.page-link {
    color: var(--nuba-red) !important;
}
.page-link:hover {
    color: var(--nuba-red-dark) !important;
}

/* =============================================
   FORM FOCUS
   ============================================= */

.form-control:focus,
.form-select:focus {
    border-color: var(--nuba-gold) !important;
    box-shadow: 0 0 0 0.2rem rgba(255,215,0,0.2) !important;
}

/* =============================================
   GO-TO-TOP BUTTON
   ============================================= */

.c-layout-go2top > i {
    color: var(--nuba-red) !important;
}
.c-layout-go2top > i:hover {
    color: var(--nuba-gold) !important;
}

/* =============================================
   SOCIAL ICONS
   ============================================= */

.c-social-icon--facebook i,
.c-social-icon--youtube i,
.c-social-icon--tiktok i,
.c-social-icon--mail i {
    color: var(--nuba-gold) !important;
}