/*+------------------------------------------------------------------------|
| CTROOTs | CORE Management System | style.css
| Purpose: Main stylesheet for ROC Heroes theme template system
+--------------------------------------------------------------------------|
| FilePath: /templates/roc/style.css
| FileVersion: v1.1.0  FileLastUpdated: 10/24/2025
| CoreVersion: 2.11.00
| IncludeDepth: (2)
| Authors: CTROOTs Core Development Team (devs@ctroots.net)
+--------------------------------------------------------------------------|
| Dependencies:
|   - Bootstrap 5 CSS framework
|   - Font Awesome icons
|   - Custom ROC Heroes theme images (/templates/roc/images/)
+--------------------------------------------------------------------------|
| Key Functions:
|   - Modal styling and animations
|   - Authentication form styling
|   - Responsive design breakpoints
|   - ROC Heroes theme color scheme
|   - Component styling (buttons, forms, cards)
+--------------------------------------------------------------------------|
| Notes:
|   - Comprehensive theme stylesheet for ROC Heroes
|   - Includes modal, form, and UI component styles
|   - Responsive design with mobile-first approach
|   - Custom checkbox and input styling
|   - Animation and transition effects
+--------------------------------------------------------------------------|*/

/* --- RoC Login Modal Fixes --- */
.modal-window .modal-close-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    background: transparent;
    border: none;
    width: 38px;
    height: 38px;
    padding: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-window .modal-close-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.modal-window .modal-close-btn::after {
    display: none !important;
}
.roc-login-form {
    margin-top: 0;
}
.roc-login-field {
    margin-bottom: 15px !important;
}

/* Navbar dropdown fixes: ensure dropdowns can escape collapse clipping and render above other content */
.navbar .navbar-collapse { overflow: visible !important; }
.navbar .collapse { overflow: visible !important; }
.navbar .dropdown-menu { position: absolute !important; z-index: 3000 !important; margin-top: 6px; }
.navbar .dropdown { position: static !important; } /* Allow dropdowns to position relative to navbar */
.navbar .dropdown-menu { transform: translateZ(0); } /* Force hardware acceleration for positioning */
.navbar-nav { overflow: visible !important; } /* Prevent scrollbar on hover */
.navbar { overflow: visible !important; } /* Prevent scrollbar on navbar itself */
#auth-controls { 
    overflow: visible !important; 
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
} /* Prevent scrollbar on auth controls, force single line */

.roc-login-btn-row {
    margin-top: -6%;
}
.roc-remember-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
#remember-me-checkbox-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}
.show-pw-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 4px 6px;
    font-size: 0.9rem;
    z-index: 2;
}

/* CRITICAL: Force proper vertical centering on ALL navbar buttons regardless of plugin CSS
   This rule MUST override any plugin-specific rules that may shift text vertically */
#home-btn, #hero-combos-btn, [id*="faq-btn"], 
.navbar .nav-link, .navbar .nav-button, .navbar-nav .nav-item .nav-link,
.navbar-nav .nav-item .nav-button {
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.5 !important;
    padding: 0.5rem 1rem !important;
    vertical-align: middle !important;
    top: auto !important;
    transform: none !important;
}

/* FALLBACK: Catch any plugin-registered nav links that don't have specific IDs */
.navbar-nav li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
}
/*
 * Filename: p:\System_Server\~gitea_repos\CT ROOTS DEVELOPMENTS\LIVE Development\ACT_PROJECTS\rocheroes.top\core\templates\roc\style.css
 * Author: CTR - DURTY
 * Copyright (c) 2025 CTR00Ts Developments
 *
 * --- REFACTORED & CORRECTED BY GEMINI ---
 * This version restores broken layout elements, fixes specificity conflicts, and correctly
 * merges plugin styles for a stable and functional design.
*/

/*+--------------------------------------------------------------------|
 | CTR00Ts | CORE Management System | style.css
 |----------------------------------------------------------------------|
 | FileVersion: 2.8.0 (Header Ribbon Alignment Fixes) FileLastUpdated: 09/29/2025
 | CoreVersion: v1.9.07
 | Author: CTR - DURTY (devs@ctroots.net)
 |----------------------------------------------------------------------|
 | Copyright (c) 2025 CTR00Ts Developments
 +----------------------------------------------------------------------|*/

/* --- Root Variables & Global Body Styles --- */
:root {
    --bs-body-bg: #1f1e1c;
    --bs-body-color: #d1d5db;
    --theme-filter: none;
    --selection-glow-color: #0d6efd;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bs-body-bg);
    background-image: url('https://rocheroes.top/templates/roc/images/components/roc_ui_mobile_bg.png');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    margin: 0;
    box-sizing: border-box;
}

/* --- Core Layout & Structure --- */
header,
footer {
    width: 100%;
    box-sizing: border-box;
}

.app-body {
    width: 83%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .app-body {
        width: 95% !important;
        padding: 0 0.5rem;
    }
}

@media (max-width: 480px) {
    .app-body {
        width: 98% !important;
        padding: 0 0.25rem;
    }
}

#app-wrapper {
    padding-bottom: 140px;
    opacity: 0;
    transition: opacity 0.5s ease-in;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#app-wrapper.visible {
    opacity: 1;
}

#main-content {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
    margin-top: auto;
    display: block !important;
    z-index: 5;
}

.bg-card {
    background-color: rgba(57, 55, 55, 0.85);
}

/* --- General Components: Buttons, Tabs, Inputs --- */
.roc-primary-navbar-btn,
.nav-button {
    border: none;
    color: white;
    font-weight: bold;
    cursor: pointer;
    background-color: transparent;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: transform 0.2s ease, filter 0.3s ease;
}

/* Ensure navbar buttons never exceed 50px height and custom buttons use site-wide defaults
   so plugin buttons render consistently (also used by cookie consent banner). */
.nav-button, #header .nav-button, .navbar .nav-button, .navbar-nav .nav-link {
    max-height: 50px !important;
    height: auto !important;
    line-height: normal !important;
}

/* Ensure nav items align equally from top/bottom within the navbar */
.navbar .navbar-nav .nav-item .nav-link,
.navbar .navbar-nav .nav-item .nav-button {
    padding: 8px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.5 !important;
    height: 38px !important;
    vertical-align: middle !important;
}

/* Match Home left spacing to Install right spacing - symmetric 12px spacing */
/* Center Home button text - ensure proper vertical alignment */
#home-btn { 
    margin-left: 12px !important; 
    padding: 8px 12px !important; 
    display: inline-flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    line-height: 1.5 !important; 
    height: 38px !important;
    vertical-align: middle !important;
}
.navbar-brand .home-text { display:inline-block; vertical-align:middle; line-height: 1.5 !important; }

/* Ensure all nav buttons have consistent height and alignment */
.navbar-nav .nav-button, .navbar-nav .nav-link {
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
}
/* Ensure install button sits 12px from the right edge and 5px from adjacent icons (10px total gap) */
#install-pwa-item { margin-right: 12px !important; margin-left: 5px !important; padding-right: 6px !important; }

/* Fix navbar scaling and prevent right-side cutoff */
    .navbar .nav-link, .navbar .nav-button, .nav-button.themeable, .navbar .nav-icon, .nav-avatar-img {
        transition: color 120ms ease, transform 120ms ease, box-shadow 180ms ease, filter 120ms ease;
        will-change: transform, box-shadow, color;
    }

    /* Hover: slightly darker text and a tiny 'pressed' preview (no layout shift) */
    .navbar .nav-link:hover, .navbar .nav-button:hover, .navbar .nav-icon:hover, .nav-avatar-img:hover {
        color: rgba(255,255,255,0.94) !important; /* slightly brighter white on dark background */
        filter: brightness(0.96) !important; /* subtle darken effect */
        transform: translateY(1px) scale(0.998); /* micro-press effect */
    }

    /* Active / pressed (mouse down / :active) - stronger press */
    .navbar .nav-link:active, .navbar .nav-button:active, .navbar .nav-icon:active, .nav-avatar-img:active {
        transform: translateY(2px) scale(0.995) !important;
        filter: brightness(0.92) !important;
    }

    /* Selected (current page) - faint glow and slightly elevated contrast */
    .navbar .nav-link.active, .navbar .nav-button.active, .navbar .nav-link[aria-current="page"], .nav-button[aria-current="page"] {
        color: #ffffff !important;
        box-shadow: 0 6px 18px rgba(13,110,253,0.08); /* faint blue glow using --selection-glow-color */
        border-radius: 6px; /* keeps glow rounded and consistent */
    }

    /* Ensure icon images don't overflow when transformed */
    .navbar .nav-icon, .nav-avatar-img {
        display: inline-block;
        width: 20px;
        height: 20px;
        object-fit: contain;
        vertical-align: middle;
        transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
    }

    /* Make sure nav anchors with inline styles still get hover feedback by targeting common utility classes */
    .nav-button[style], .nav-link[style] {
        -webkit-tap-highlight-color: transparent;
    }

    /* Accessibility: keyboard focus visible state */
    .navbar .nav-link:focus, .navbar .nav-button:focus {
        outline: 3px solid rgba(13,110,253,0.14);
        outline-offset: 2px;
    }

    .navbar {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    box-sizing: border-box !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.navbar .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important; /* align left spacing to match install right spacing */
    padding-right: 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Responsive navbar buttons - scale down on smaller screens */
@media (max-width: 1400px) {
    .roc-primary-navbar-btn, .nav-button {
        min-width: 90px !important;
        padding: 0.45rem 0.9rem !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 1200px) {
    .roc-primary-navbar-btn, .nav-button {
        min-width: 80px !important;
        padding: 0.4rem 0.8rem !important;
        font-size: 0.85rem !important;
    }
}

@media (max-width: 992px) {
    .roc-primary-navbar-btn, .nav-button {
        min-width: 70px !important;
        padding: 0.35rem 0.7rem !important;
        font-size: 0.8rem !important;
    }
}

@media (max-width: 768px) {
    .roc-primary-navbar-btn, .nav-button {
        min-width: 60px !important;
        padding: 0.3rem 0.6rem !important;
        font-size: 0.75rem !important;
    }
}

/* Smaller screens - ensure navbar doesn't overflow */
@media (max-width: 600px) {
    .navbar-nav {
        gap: 0.25rem !important;
    }
    
    .roc-primary-navbar-btn, .nav-button {
        min-width: 50px !important;
        padding: 0.25rem 0.5rem !important;
        font-size: 0.7rem !important;
        margin: 0.1rem !important;
    }
}

/* Very small screens - minimal button sizes */
@media (max-width: 480px) {
    .roc-primary-navbar-btn, .nav-button {
        min-width: 45px !important;
        padding: 0.2rem 0.4rem !important;
        font-size: 0.65rem !important;
        margin: 0.05rem !important;
    }
}

/* Navbar brand/logo responsive sizing */
@media (max-width: 768px) {
    .navbar-brand svg {
        width: 28px !important;
        height: 28px !important;
    }
}

@media (max-width: 480px) {
    .navbar-brand svg {
        width: 24px !important;
        height: 24px !important;
    }
}

/* Ensure navbar contents don't overflow */
.navbar-nav {
    flex-wrap: wrap !important;
    max-width: 100% !important;
}

/* Prevent left navbar vertical jitter by fixing top margin and ensuring buttons use consistent line-height */
.navbar-nav.me-auto.mb-2.mb-md-0 { margin-top: 0px !important; }
.navbar .navbar-nav .nav-item .nav-link, .navbar .navbar-nav .nav-item .nav-button { line-height: 1.5 !important; }

.navbar-collapse {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* Force plugin-style themed buttons to be available globally; these are the baseline
   background images used by custom buttons (btn_gray for default, btn_blue for active)
   Keep them here so they load on every page and in popups like cookie consent. */
.roc-primary-navbar-btn.themeable::before, .nav-button.themeable::before {
    background-image: url('/templates/roc/images/components/btn_blue.png') !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
}
.roc-primary-navbar-btn.themeable.btn-gray::before, .nav-button.themeable.btn-gray::before {
    background-image: url('/templates/roc/images/components/btn_gray.png') !important;
}

.roc-primary-navbar-btn {
    padding: 0.75rem 1.5rem;
}

.nav-button {
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
}

.roc-primary-navbar-btn:disabled {
    cursor: not-allowed;
}

.roc-primary-navbar-btn::before,
.nav-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -1;
    transition: filter 0.3s ease-in-out;
}

/* Global themeable button background and hue fallback (applies site-wide) */
.roc-primary-navbar-btn.themeable::before,
.nav-button.themeable::before {
    background-image: url('/templates/roc/images/components/btn_blue.png') !important;
    filter: var(--theme-filter) !important;
}

/* Fallback global switch visuals so hero selector uses same switch assets even if plugin CSS hasn't loaded */
.roc-switch .switch-bg,
.roc-switch-wrapper .switch-bg {
    background-image: url('/templates/roc/images/components/ui_switch_unselected.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    filter: var(--theme-filter) !important;
}
.roc-switch input[type="checkbox"]:checked + .switch-bg,
.roc-switch input[type="radio"]:checked + .switch-bg,
.roc-switch-wrapper input[type="checkbox"]:checked + .switch-bg,
.roc-switch-wrapper input[type="radio"]:checked + .switch-bg {
    background-image: url('/templates/roc/images/components/ui_switch_selected.png') !important;
    box-shadow: 0 0 10px 4px var(--selection-glow-color, rgba(13,110,253,0.35)) !important;
    filter: var(--theme-filter) brightness(1.05) !important;
}

.roc-primary-navbar-btn:disabled::before {
    filter: grayscale(80%) brightness(0.8);
}

.roc-back-btn {
    background-image: url('https://rocheroes.top/templates/roc/images/components/back_arrow_no-hover.png');
    width: 48px;
    height: 42px;

    /* Visuals for the back button */

}

/* --- Navbar avatars & circular icon backgrounds --- */
.nav-avatar-bg {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: url('/templates/roc/images/components/ui_cir_shadow_50-50.webp') center/cover no-repeat;
    box-shadow: 0 4px 10px rgba(0,0,0,0.45);
}
.nav-avatar-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: block;
    object-fit: cover;
    border: none !important;
}

.messages-bg, .alliance-bg, .admin-bg {
    width: 39px;
    height: 37px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: url('/templates/roc/images/components/ui_cir_shadow_50-50.webp') center/cover no-repeat;
}

/* User profile dropdown: positioned directly below avatar on right side */
.user-profile-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: auto !important;
    right: 0 !important;
    transform-origin: top right !important;
    margin-top: 0 !important;
    min-width: 200px !important;
    max-height: 72vh !important;
    overflow: auto !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.65) !important;
    border-radius: 8px !important;
    background: linear-gradient(180deg, #232221, #1a1918) !important;
    z-index: 3000 !important;
}

/* Dropdown parent needs position relative */
#user-profile-item { position: relative !important; }

/* When Popper sets data-popper-placement, ensure the dropdown's transform origin is top right */
.user-profile-menu[data-popper-placement^="bottom"] { transform-origin: top right !important; }

/* Prevent page jump when nav dropdown is open */
.nav-dropdown-open { scroll-behavior: auto; }
.nav-icon { width: 28px; height: 28px; display:block; }

/* Admin icon precise sizing: 2px narrower and 2px shorter than standard 20px baseline */
#admin-icon-img { width: 18px !important; height: 18px !important; }

/* Hover effect for all nav icons and avatar */
.navbar-nav .nav-link:hover .nav-icon,
.navbar-nav .nav-link:hover .nav-avatar-img,
.navbar-nav .nav-link:focus .nav-icon,
.navbar-nav .nav-link:focus .nav-avatar-img {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

/* Alliance link should not have the themeable button background ::before */
.alliance-link::before { display: none !important; }
.alliance-link { padding: 0.25rem 0.4rem !important; margin: 0 !important; }

/* CRITICAL: Alliance icon MUST be visible */
/* Alliance item visibility controlled by JavaScript - don't force display here */

/* Ensure badge counters sit top-right and don't push layout; use compact sizing */
/* NOTE: display controlled by JavaScript preview toggle - do NOT force !important here */
/* This rule is now consolidated at the end of the file (line ~2284) with the full set of properties */
.notifications-count, .messages-count {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    /* REMOVED: display: none;  (controlled by JS, see line 2284+) */
    z-index: 5000 !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.45) !important;
    align-items: center !important;
    justify-content: center !important;
    background: #dc3545 !important;
    overflow: visible !important;
}

/* Image numbers inside notification bubbles */
.notifications-count img, .messages-count img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Ensure preview toggle styling without overriding server visibility */
#nav-preview-toggle { 
    display: flex; 
    align-items: center; 
    margin-right: 2px;
}
#nav-preview-toggle .form-check {
    display: flex !important;
    align-items: center !important;
}
.form-check-input {
    cursor: pointer;
    visibility: visible !important;
}

/* Notification icon fade animation helper */
.nav-icon--fade {
    transition: opacity 180ms ease, transform 180ms ease !important;
}
.nav-icon--hidden {
    opacity: 0 !important;
    transform: scale(0.96) !important;
}

/* Small visual nudge to keep dropdowns above page elements */
.dropdown-menu { z-index: 6000 !important; }

/* Admin dashboard icon hover swap using hover image */
.admin-dashboard-link img { transition: transform 150ms ease, filter 150ms ease; }
.admin-dashboard-link img:hover { transform: scale(1.04); filter: brightness(1.06); }

/* Ensure alliances results overlay above footer to avoid being hidden */
/* By default hide alliances results overlay on non-alliances pages to avoid overlaying other content */
.alliances-results { position: relative; display: none; }
body.page-alliances .alliances-results { display: block; }

/* Alliances search bar: make input text and placeholder clearly visible (white) */
#selector-view input#alliances-search { color: #ffffff !important; }
#selector-view input#alliances-search::placeholder { color: rgba(255,255,255,0.6) !important; }

/* Nudge the Refresh overlay text down slightly to align with the button artwork */
.alliances-refresh-text { transform: translateY(1.5px); display:inline-block; }

/* Defensive nav-button vertical alignment to prevent small jumps when plugin CSS toggles pseudo-elements */
.navbar .navbar-nav .nav-item .nav-button, .navbar .navbar-nav .nav-item .nav-link {
    vertical-align: middle !important;
    line-height: 1.5 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Normalize primary navbar buttons across all pages to match plugin buttons */
.roc-primary-navbar-btn, .nav-button, .navbar .nav-button {
    min-width: 102px !important;
    min-height: 34px !important;
    padding: 0.5rem 1rem !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    flex-shrink: 1 !important; /* Allow buttons to shrink on small screens */
    white-space: nowrap !important; /* Prevent text wrapping */
    overflow: hidden !important; /* Hide overflow text */
    text-overflow: ellipsis !important; /* Show ... for overflow text */
    line-height: 1.5 !important; /* CRITICAL: Ensures text is vertically centered */
    display: inline-flex !important; /* Use flex to center content */
    align-items: center !important; /* Vertical alignment */
    justify-content: center !important; /* Horizontal alignment */
}

.roc-back-btn:hover {
    background-image: url('https://rocheroes.top/templates/roc/images/components/back_arrow_hovered.png');
}

/* Icon-only navbar controls: hide dropdown caret when no-caret class applied */
.nav-button.no-caret::after,
.nav-link.no-caret::after {
    display: none !important;
}

/* Strong override to ensure no caret is rendered for icon-only controls */
.nav-link.no-caret, .nav-button.no-caret { position: relative; }
.nav-link.no-caret::after, .nav-button.no-caret::after { display: none !important; }

/* Icon colors: use gold for emphasis and white for default */
.nav-button.iconic, .nav-link.iconic {
    color: #f0c36b !important; /* gold-ish */
}
.nav-button.iconic.white, .nav-link.iconic.white {
    color: #fff !important;
}

/* Small margin for install button to visually separate it */
/* (redundant rule removed - spacing controlled by #install-pwa-item earlier) */

/* Center the mail/notification icons inside their circular backgrounds */
.messages-bg img, .notifications-bg img, .nav-avatar-img, .admin-bg img { display:block; margin:auto; object-fit:contain; }
.messages-bg { padding: 6px 0; }

/* Slight pixel nudges requested */
/* Icon nudges: alliance +0.5px right, messages 1px left and 2px shorter */
#alliance-item .nav-icon { transform: translateX(0.5px) !important; }

/* tighten avatar spacing */
.nav-avatar-bg { margin-right: 1.5px !important; }

/* Ensure icon background wrappers align and have equal spacing. NO gap to avoid adding extra space */
.messages-bg, .notifications-bg, .admin-bg, .alliance-bg { display:inline-flex; align-items:center; justify-content:center; }

/* Button-specific background images */
.nav-button.themeable::before,
.roc-primary-navbar-btn.themeable::before {
    background-image: url('https://rocheroes.top/templates/roc/images/components/btn_blue.png');
}
/* Ensure standard nav links that use themeable also render the button background via ::before */
.nav-link.themeable::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('/templates/roc/images/components/btn_blue.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 8px;
}
#login-btn::before {
    background-image: url('/templates/roc/images/components/ui_login-btn.png') !important;
    filter: none !important;
}
#register-btn::before {
    background-image: url('/templates/roc/images/components/ui_register_btn.png') !important;
    filter: none !important;
}
#logout-btn::before {
    background-image: url('/templates/roc/images/components/ui_roc_logout-btn.png') !important;
    filter: none !important;
}
#install-pwa-btn::before {
    background-image: url('/templates/roc/images/components/ui_install-btn.png') !important;
    filter: none !important;
}

/* ========== NAVBAR ICON SPACING & LAYERING ========== */
/* CRITICAL: Max 5px spacing between icons - using tight negative margins */
.navbar-nav#auth-controls {
    position: relative;
    z-index: 2000;
    overflow: visible !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
}

/* Position each navbar item to float above navbar, preventing overflow scrollbar */
.navbar-nav#auth-controls > li {
    position: relative;
    z-index: auto;
    overflow: visible !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 2px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Ensure nav items themselves don't have padding adding space */
.navbar-nav#auth-controls .nav-link {
    padding: 0.25rem !important;
    margin: 0 !important;
}

/* Ensure icon backgrounds and images don't trigger scrollbar */
.messages-bg, .notifications-bg, .admin-bg, .alliance-bg, .nav-avatar-bg {
    position: relative;
    z-index: 2001;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Badge counters above icons */
.notifications-count, .messages-count {
    z-index: 2002 !important;
}

/* Prevent navbar container from creating scrollbar when icons expanded on hover */
.navbar {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.navbar .container-fluid {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Ensure custom logout button uses the new image and not legacy background pseudo-element */
.btn-roc-logout {
    background: transparent !important;
    border: none !important;
    padding: 6px 10px !important;
}
.btn-roc-logout::before { display: none !important; }
.btn-roc-logout img { display: inline-block; vertical-align: middle; height: 20px; }
.btn-roc-logout span { color: #fff; }

/* Avatar and icon background wrappers */
.nav-avatar-bg, .notifications-bg, .messages-bg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-image: url('/templates/roc/images/components/ui_cir_shadow_50-50.webp');
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
.messages-bg {
    /* add empty circle on top of shadow, then the mail icon will sit above */
    background-image: url('/templates/roc/images/components/ui_roc_empty-circle.webp'), url('/templates/roc/images/components/ui_cir_shadow_50-50.webp');
    background-size: contain, cover;
    background-position: center, center;
}
.messages-bg {
    /* tighter centering for the mail icon */
    padding: 0 !important;
}
/* Increase mail icon size by ~60% (from 18px to 29px) and center text inside buttons */
.messages-bg img#messages-icon {
    width: 32px !important; /* ~60% larger than original 20px */
    height: 32px !important;
    margin: 0 !important;
    transform: translate(-2px, 0px) !important; /* shift 2px left */
}

/* Increase container: 3px wider (39) and 1px taller (37) per request */
.messages-bg { width: 39px; height: 37px; }

/* Ensure nav button text is centered horizontally and vertically */
.navbar .navbar-nav .nav-item .nav-link,
.navbar .navbar-nav .nav-item .nav-button {
    justify-content: center !important;
    text-align: center !important;
}
.nav-avatar-img, .nav-icon {
    position: relative;
    z-index: 2;
    width: 20px;
    height: 20px;
}

/* Ensure themeable logout uses the red button background */
.logout-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('/templates/roc/images/components/ui_red-btn.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
}
.logout-btn { position: relative; }

/* Custom Tabs */
.roc-tab {
    color: #cccccc !important;
    font-weight: bold;
    border: none;
    background-color: transparent;
    transition: transform 0.2s ease;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.roc-tab::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://rocheroes.top/templates/roc/images/components/gold_tab_normal.9.png');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1; /* Sits behind tab text */
    transition: filter 0.2s ease, background-image 0.2s ease;
}

/* FIX: Ensure tab bubbles (counters) appear above the tabs and buttons */
.tab-digit-counter,
.tab-bubble,
.notification-bubble {
    position: absolute;
    z-index: 99 !important; /* Higher z-index to ensure visibility */
    top: -18px;
    left: 50%;
    transform: translateX(50%);
    pointer-events: none;
    /* Match combo count bubble styling with theme color, inset shadow, and border */
    background: var(--selection-glow-color, #e53935) !important;
    color: #fff !important;
    border-radius: 999px;
    padding: 5px 10px 6px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35) inset, 0 2px 6px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.06) !important;
    line-height: 1;
    min-width: 36px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#results-tab-nav .tab-bubble {
    top: -12px;
    right: -12px;
    left: auto;
    transform: none;
    background: var(--selection-glow-color, #e53935) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 5px 10px 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35) inset, 0 2px 6px rgba(0,0,0,0.25) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    line-height: 1 !important;
    min-width: 36px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.roc-tab.active {
    color: white !important;
}
.roc-tab:not(.active):hover {
    transform: translateY(-2px);
}
.roc-tab.active::before {
    background-image: url('https://rocheroes.top/templates/roc/images/components/gold_tab_pressed.9.png');
    filter: var(--theme-filter) !important; /* Active tabs get the theme color */
}
.roc-tab:not(.active)::before {
    background-image: url('https://rocheroes.top/templates/roc/images/components/gold_tab_normal.9.png');
}

/* FIX: Ensure category/selector tabs are NOT tinted by the theme filter */
#selector-view .roc-tab::before,
#results-tab-nav .roc-tab::before {
    filter: none !important;
}

/* Hero page tabs get a blue variant */
.hero-tabs-section .roc-tab::before,
#hero-detail-tabs .roc-tab::before {
    background-image: url('/templates/roc/images/components/blue_tab.png') !important;
    background-size: 100% 100% !important;
    filter: var(--theme-filter) !important;
}

/* Darker (desaturated) non-active hero page tabs */
#hero-detail-tabs .roc-tab:not(.active)::before,
.hero-tabs-section .roc-tab:not(.active)::before {
    filter: var(--theme-filter) brightness(0.65) saturate(0.7) contrast(1.05) !important;
}

/* Active hero tab restores full theme coloration */
#hero-detail-tabs .roc-tab.active::before,
.hero-tabs-section .roc-tab.active::before {
    filter: var(--theme-filter) brightness(1) saturate(1) !important;
}

/* Hero header ribbon: only tint blue area via overlay instead of direct image filter */
.hero-header-ribbon.themeable { position:relative; }
.hero-header-ribbon.themeable .hero-header-tint-overlay { content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; background:rgba(255,255,255,0); filter:var(--theme-filter); z-index:2; }

/* --- Search Bar --- */
.search-wrapper {
    position: relative;
}

#selector-view .search-wrapper input#search-bar {
    background: transparent url('/templates/roc/images/components/ui_roc_search-bar.webp') no-repeat center/100% 100% !important;
    border: 0;
    color: #e5e7eb;
    padding: 0.5rem 45px 0.5rem 60px;
    width: 100%;
    height: 60px;
    box-sizing: border-box;
}
#selector-view .search-wrapper input#search-bar:focus {
    outline: none;
    box-shadow: none;
}
#selector-view .search-wrapper input#search-bar::placeholder {
    color: #9ca3af;
}

.search-wrapper .search-icon-btn { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:38px; height:38px; background:url('/templates/roc/images/components/search-ico.png') no-repeat center/contain; pointer-events:none; }
.search-wrapper #clear-search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
}

/* --- RoC Banner (Optimized & Larger) --- */
.roc-banner-wrapper { max-width:1900px; width:100%; min-width:320px; margin:0 auto 0.9rem; padding:0 1.25rem; background:transparent !important; }
.roc-banner-wrapper.roc-banner-full { max-width:none; width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; padding:0 2rem 0.9rem; background:transparent !important; }
.roc-banner-img { display:block; width:100%; height:clamp(112px,14.4vw,208px); min-height:112px; max-height:208px; object-fit:cover; aspect-ratio:auto; background:transparent !important; }
.roc-banner-logo { max-width:384px; margin:0 auto; width:auto; height:auto; display:block; object-fit:contain; }

/* If the banner image is a site logo (both classes present), avoid forcing
   a full-width, cropped banner. Keep the logo centered and fully visible. */
.roc-banner-img.roc-banner-logo {
    width: auto !important;
    max-width: 384px !important;
    height: auto !important;
    max-height: 208px !important;
    object-fit: contain !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* Ensure the picture wrapper centers the logo and doesn't let paddings or
   full-bleed wrapper rules push the image off-canvas. This is defensive and
   applies only when the picture contains the logo class. */
.roc-banner-wrapper picture {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}
.roc-banner-wrapper picture img.roc-banner-logo {
    display: block !important;
    margin: 0 auto !important;
    width: auto !important;
    max-width: 384px !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Defensive: make sure the full-bleed wrapper remains visible and doesn't
   clip centered content due to negative margins on small viewports. */
.roc-banner-wrapper.roc-banner-full {
    overflow: visible !important;
}

/* Header clock strip & separator */
.header-clock-strip {
    margin: 0 auto 4px;
    padding: 0;
    background: url('/templates/roc/images/components/ui_roc_clock_gold.webp') no-repeat center center;
    background-size: contain;
    min-height: 42px;
    width: 360px;
    max-width: 90%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
@media (max-width: 600px) { .header-clock-strip { background-size:contain; } }

/* Label above the clock (Game time) */
#header-global-clock-label {
    font-size: 1rem;
    color: #f5f5f5;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    margin-bottom: 2px;
    margin-top: 0;
    z-index: 10;
    pointer-events: none;
    display: block;
    position: relative;
}

/* Clock display below the label */
#header-global-clock {
    font-family: monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #f5f5f5;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    z-index: 10;
    pointer-events: none;
    position: relative;
    display: block;
    line-height: 1;
    margin: 0 !important;
    padding: 0 !important;
}

/* Defensive: make sure the header banner doesn't overlap the clock label on small screens */
.roc-banner-wrapper.roc-banner-full + .header-clock-strip,
.roc-banner-wrapper + .header-clock-strip,
.site-main-header .header-clock-strip { 
    margin-top: 7px !important; 
    margin-bottom: 0 !important;
}

/* Make the header banner background transparent so underlying background shows through */
.roc-banner-wrapper.roc-banner-full,
.roc-banner-wrapper.roc-banner-full picture,
.roc-banner-wrapper.roc-banner-full .roc-banner-img,
.roc-banner-wrapper.roc-banner-full .roc-banner-logo,
.roc-banner-wrapper,
.roc-banner-wrapper *,
.site-main-header .roc-banner-wrapper,
.site-main-header .roc-banner-wrapper * { 
    background: transparent !important;
    background-color: transparent !important;
}

/* Additional logo transparency rules */
.roc-banner-wrapper picture,
.roc-banner-wrapper picture img,
.roc-banner-wrapper .roc-banner-img,
.roc-banner-wrapper .roc-banner-logo {
    background: none !important;
    background-color: transparent !important;
}
.header-separator { width:85%; height:7px; background:url('/templates/roc/images/components/line_grey02.png') repeat-x center/auto 100%; margin:10px auto 0; opacity:.9; }
.site-main-header { margin-bottom:0 !important; padding-bottom:0 !important; }

/* --- Hero Selector & Cards (Global) --- */
#heroes-grid.row {
    gap: 1rem;
}

#view-results-btn {
    position: relative;
    z-index: 10;
}

#combo-count-bubble {
    position: absolute;
    top: -14px;
    right: -14px;
    background: var(--selection-glow-color, #e53935) !important;
    color: #fff;
    border-radius: 999px;
    padding: 5px 12px 6px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,0.45);
    z-index: 60;
    pointer-events: none;
    line-height: 1;
    min-width: 48px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hero card base styles - scoped to exclude plugin pages which handle their own styling */



/* Generic season badge styles (non-plugin) */
.image-wrapper .season-badge-img,
.hero-image-wrapper .season-badge-img {
    position: absolute !important;
    /* Move down 2px */
    top: 7px !important;
    left: 5px !important;
    /* Increase size by ~10%: previously 25% → now 27.5% */
    width: 27.5% !important;
    min-width: 26px !important;
    max-width: 55px !important;
    z-index: 110 !important;
    display: block !important;
    visibility: visible !important;
    pointer-events: none !important;
}

/* Page header banner image tweaks to match news.php behavior */
.page-header-banner { padding:0; border-radius:8px; overflow:hidden; }
.page-header-banner .hero-header-img { width:100%; /* reduce vertical height ~30% for a tighter header */ height:clamp(78px,10vw,146px); object-fit:cover; object-position:center center; display:block; }

/* Hero page header ribbon - constrain to exactly 94px height and full container width */
.hero-header-ribbon { width:100%; height:66px !important; max-height:66px !important; overflow:hidden; position:relative; }
.hero-header-ribbon .hero-header-img { width:100% !important; height:66px !important; object-fit:cover !important; object-position:center !important; display:block !important; }

/* News paginator styles */
#news-pagenav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0;
    z-index: 10;
    clear: both;
}
#news-pagenav .page-number-btn {
    background: transparent;
    border: none;
    padding: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#news-pagenav .page-number-btn img {
    display: block;
    width: 32px;
    height: 32px;
}
#news-pagenav .page-number-btn.active img {
    transform: scale(1.05);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)) saturate(1.2);
}
/* Dark overlay effect for active and hover states */
#news-pagenav .page-number-btn.active,
#news-pagenav .page-number-btn:hover {
    position: relative;
}
#news-pagenav .page-number-btn.active::after,
#news-pagenav .page-number-btn:hover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    border-radius: 4px;
    pointer-events: none;
}
#news-pagenav button[aria-label] {
    background: transparent;
    border: none;
    padding: 0.25rem;
}
#news-pagenav .page-number-btn {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}



/* Plugin-specific selector and hero card rules moved to:
    /plugs/hero_combos/includes/css/hero_combos_v2.css
    Removed from theme to avoid duplication and specificity conflicts. */
.hero-detail-main {
    position: relative;
    overflow: visible;
}

/* HERO PAGE unified ribbon layout */
/* HERO PAGE unified ribbon layout (adjusted to sit below separator and not clip) */
.hero-header-ribbon {
    /* Anchor the ribbon to the viewport so it reliably full-bleeds left/right
       and can overlap the top border of its card. Allow the header image to
       naturally size while limiting extreme heights on very large screens. */
    position: absolute;
    top: -28px; /* pull the ribbon further up to clearly overlap the card top */
    left: 50vw;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto !important; /* allow image to define height */
    min-height: 64px !important;
    max-height: 380px !important; /* caps how tall the ribbon can grow */
    /* image spans full area */
    width: 100vw !important; /* true viewport full-bleed */
    max-width: none !important;
    overflow: visible; /* allow image bleed and box-shadow to show */
    z-index: 30; /* sit above card but behind interactive controls */
}

/* Hero header ribbon full width for larger screens */
@media (min-width: 1024px) {
    .hero-header-ribbon {
        top: -20px;
        left: 50vw;
        transform: translateX(-50%);
        width: 100vw !important;
        max-width: none !important;
    }
}

@media (min-width: 1200px) {
    .hero-header-ribbon {
        top: -22px;
        left: 50vw;
        transform: translateX(-50%);
        width: 100vw !important;
        max-width: none !important;
    }
}
.hero-detail-main > .hero-header-ribbon { border-radius:4px; }

/* Ensure hero header ribbon maintains 94px height constraint and doesn't get overridden */
.hero-header-ribbon picture,
.hero-header-ribbon img.hero-header-img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 94px !important;
    max-height: 94px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    line-height: 0;
    z-index: -1; /* Place background image behind content */
}

.hero-header-title { position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); margin:0; color:#fff; text-align:center; font-size:2.25rem; text-shadow:2px 2px 8px #222; pointer-events:none; }

/* HERO PAGE back/share buttons */
#hero-header-back,
#hero-header-share { position:absolute; top:0; bottom:0; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:80; transform:none; }
#hero-header-back { left:6px; width:64px !important; height:64px !important; }
#hero-header-share { right:10px; width:64px !important; height:64px !important; }
/* Icons now fill their 64px containers */
#hero-header-back img { width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; object-fit:contain; display:block; pointer-events:none; }
#hero-header-share img { width:52% !important; height:52% !important; max-width:52% !important; max-height:52% !important; object-fit:contain; display:block; pointer-events:none; }

.hero-detail-main .hero-header-ribbon .combo-share-btn { position:absolute; right:10px; top:50%; transform:translateY(-50%); height:100%; display:flex; align-items:center; }

.hero-detail-wrapper {
    position: relative;
    overflow: visible;
}
.hero-image-wrapper {
    position: relative; /* anchor absolute-positioned badges */
    background-color: rgba(57, 55, 55, 0.85);
    border-radius: 12px;
    width: 100%;
    height: 200px; /* Give explicit height for absolute positioned images */
    min-height: 200px;
}
.hero-detail-img,
#hero-page-image {
    width: 100% !important;
    height: auto !important;
    max-height: 780px !important;
    min-height: 260px !important;
    object-fit: contain !important;
    object-position: center top !important;
    display: block;
    background: transparent !important;
}




/* --- Headers, Banners & Clock --- */
.roc-header {
    background-image: url('https://rocheroes.top/templates/roc/images/components/ui_roc_main_header.png');
    background-size: 100% 100%;
}

/* --- Page Header Banner (News, FAQ, etc.) --- */
.page-header-banner {
    position: absolute;
    top: -28px; /* Adjust to overlap the card top border */
    left: 50vw;
    transform: translateX(-50%);
    width: 100vw !important; /* Full viewport width */
    max-width: none !important; /* Override any max-width constraints */
    height: auto !important; /* Allow content to define height */
    min-height: 64px;
    max-height: 380px; /* Cap max height for large screens */
    overflow: hidden; /* Keep content within bounds */
    z-index: 20; /* Ensure it sits above the card */
    border-radius: 4px; /* Maintain rounded corners */
}

.page-header-banner .navbar-brand {
    position: relative;
    z-index: 2; /* Ensure text is above background image */
}

.page-header-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/templates/roc/images/components/ui_roc_header_blue2.webp') no-repeat center/cover;
    filter: var(--theme-filter);
    z-index: 1;
}

/* Responsive adjustments for page header banner */
@media (max-width: 768px) {
    .page-header-banner {
        top: -18px; /* Less overlap on smaller screens */
        min-height: 56px;
    }
}

@media (min-width: 1024px) {
    .page-header-banner {
        top: -30px;
    }
}

@media (min-width: 1200px) {
    .page-header-banner {
        top: -32px;
    }
}

.page-header-banner {
    background-image: url('https://rocheroes.top/templates/roc/images/components/ui_roc_blue-ribbon_header.png');
    background-size: cover;
    background-position: center;
    padding: 0.6rem 1.25rem; /* tighter padding so headline centers within container */
    position: relative; /* participate in normal flow so it fills its container */
    width: 100%;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 84px;
}

/* Defensive override: when a page-header-banner is used inside a card-like
   container (e.g. .bg-card) we want it to remain in-flow and aligned to the
   container instead of using viewport full-bleed positioning which can
   produce visible misalignment in some layouts. This keeps .page-header-banner
   visually centered in its card and avoids clipping. */
.bg-card {
    position: relative !important;
    overflow: visible !important; /* allow banner to overlap and be visible */
}

/* Banner inside card: overlap the top and reach the card edges (account for
   the card's padding). We use conservative offset values matching the
   Bootstrap padding utility classes used in the markup (p-4, p-md-5).
   Adjust in media queries to keep it visually aligned across breakpoints. */
.bg-card > .page-header-banner,
.bg-card .page-header-banner {
    position: absolute !important;
    top: -18px !important; /* pull banner above the card's top edge */
    left: -1.25rem !important; /* card uses padding ~1.25rem at smaller viewports */
    width: calc(100% + 2.5rem) !important;
    transform: none !important;
    margin-left: 0 !important;
    pointer-events: auto !important;
    z-index: 30 !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.35) !important;
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
}

@media (min-width: 768px) {
    .bg-card > .page-header-banner,
    .bg-card .page-header-banner {
        left: -1.5rem !important; /* p-4 is 1.5rem on larger sizes */
        width: calc(100% + 3rem) !important;
        top: -20px !important;
    }
}

@media (min-width: 992px) {
    .bg-card > .page-header-banner,
    .bg-card .page-header-banner {
        left: -2rem !important; /* match p-md-5 (approx) */
        width: calc(100% + 4rem) !important;
        top: -22px !important;
    }
}

/* Provide breathing room between the overlapping banner and the container's
   first content block. This uses an adjacent-sibling rule so only the
   immediate content after the banner is separated (keeps changes local).
   Increase slightly on larger screens to match the visual scale. */
.bg-card .page-header-banner + * {
    margin-top: 1.25rem !important;
}
@media (min-width: 768px) {
    .bg-card .page-header-banner + * {
        margin-top: 1.75rem !important;
    }
}
@media (min-width: 1200px) {
    .bg-card .page-header-banner + * {
        margin-top: 2rem !important;
    }
}

/* Allow banner to stretch slightly beyond container on large screens for a full-bleed look */
@media (min-width: 1024px) {
    .page-header-banner { padding-left: 2rem; padding-right: 2rem; width: calc(100% + 4rem); margin-left: -2rem; }
}
@media (min-width: 1200px) {
    .page-header-banner { padding-left: 3rem; padding-right: 3rem; width: calc(100% + 6rem); margin-left: -3rem; }
}

.page-header-banner h2 {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.content-with-banner {
    position: relative;
    padding-top: 180px;
}
.hero-detail-main .content-with-banner {
    padding-top: 24px !important;
}

/* Fix: For results view we changed the banner to be in-flow; remove the large top padding so
   the banner sits flush with the card's top border */
#results-view .content-with-banner {
    position: relative;
    overflow: visible !important; /* allow banner to bleed outside */
    /* Reserve space so the content isn't covered by the overlapping banner.
       Increased to ensure content isn't hidden behind the header. */
    padding-top: 80px !important;
}

/* Make banner corners match parent card rounding when flush */
#results-view .page-header-banner {
    /* absolutely position the banner inside the content wrapper so it can bleed edge-to-edge
       Use center-anchoring to avoid dependence on parent gutter math (keeps it aligned). */
    position: absolute;
    top: -18px; /* pull it closer to the container top */
    left: 50vw;
    transform: translateX(-50%);
    z-index: 20;
     /* Use viewport width so the ribbon truly spans left->right of the viewport and
         doesn't rely on parent container widths which vary across layouts. */
     width: 100vw;
    max-width: none !important;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    box-shadow: 0 6px 12px rgba(0,0,0,0.35);
    pointer-events: none;
}

/* Tighter bleed on tablets/smaller screens so the banner still reaches edges but scales nicely */
@media (max-width: 1023.98px) {
    #results-view .page-header-banner {
    top: -14px;
    left: 50vw;
    transform: translateX(-50%);
    width: 100vw;
    max-width: none !important;
    }
    #results-view .content-with-banner { padding-top: 80px !important; }
}

@media (max-width: 575.98px) {
    #results-view .page-header-banner {
    top: -10px;
    left: 50vw;
    transform: translateX(-50%);
    width: 100vw;
    max-width: none !important;
    }
    #results-view .content-with-banner { padding-top: 72px !important; }
}

@media (min-width: 1200px) {
    /* Use center-anchoring on very large screens to avoid left-edge clipping when parent containers
       apply different gutter math. Keep the same bleed width but center it reliably. */
    #results-view .page-header-banner {
    top: -22px;
    left: 50vw;
    transform: translateX(-50%);
        width: 100vw;
        max-width: none !important;
    }
}


#header-clock,
#header-global-clock {
    color: #e6eef6 !important;
    font-weight: 800 !important;
    font-size: 18pt !important;
    line-height: 1 !important;
    display: block !important;
    text-align: center !important;
    margin: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    position: static !important;
}

/* Clock positioning handled in main clock styles - see lines ~630-650 */

/* ============================================================================
   HERO/COMBO PLUGIN STYLES MOVED
   All hero_combos plugin-specific CSS has been consolidated into:
   /plugs/hero_combos/includes/css/hero_combos_v2.css
   Plugin pages load that file directly; removing plugin rules from theme
   avoids duplication and CSS specificity conflicts.
   ============================================================================ */

/* --- Rating & Comment Styles (RESTORED) --- */
.rating-display, 
.rating-input { 
    display: flex; 
    justify-content: center; 
    gap: 0.1rem; 
    align-items: center; 
}

.comment-section textarea {
    background: url('/templates/roc/images/components/ui_roc_comments_textarea-lg1.webp') no-repeat center center / cover;
    border: none;
    padding: 10px;
    color: #fff;
    resize: vertical;
}
.rating-input .star {
    cursor: pointer;
    width: 48px;
    height: 48px;
    background-image: url('/templates/roc/images/components/ui_roc_star.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.1s ease-in-out;
    display: inline-block;
}
.rating-display .star.selected,
.rating-input .star.selected {
    background-image: url('/templates/roc/images/components/ui_roc_star_selected.png');
}
.rating-display .star:not(.selected) {
    background-image: url('/templates/roc/images/components/ui_roc_star.png');
}
.rating-input .star:hover {
    transform: scale(1.1);
}

.comment-section { margin-top: 2rem; }
.comment-form { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.comment-input-wrapper { flex-grow: 1; position: relative; }
.comment-input { 
    width: 100%; 
    height: 60px; 
    padding: 10px 20px 10px 50px; 
    color: #111 !important; /* Ensure text is visible on light background */
    background: url('/templates/roc/images/components/ui_roc_comment_input-field.png') no-repeat center center !important; 
    background-size: 100% 100% !important; 
    border: none; 
}
.comment-input::placeholder { color: #333; }
.comment-input:focus { outline: none; }
.comment-send-btn { 
    width: 60px; 
    height: 60px; 
    background: url('https://rocheroes.top/templates/roc/images/components/send_normal_btn.png') no-repeat center center; 
    background-size: contain; 
    border: none; 
    cursor: pointer; 
}
.comment { 
    padding: 1rem 1.5rem; 
    margin-bottom: 1rem; 
    word-wrap: break-word; 
    background-image: url('https://rocheroes.top/templates/roc/images/components/ui_roc_comments.jpg'); 
    background-size: 100% 100%; 
    min-height: 80px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}
.comment p { color: #cccccc; margin: 0; }
.comment-meta { font-size: 0.8rem; color: #adb5bd; margin-bottom: 0.5rem; }
.comment-actions { display: flex; gap: 1rem; align-items: center; margin-top: 0.5rem; }
.comment-actions button { background: none; border: none; color: #adb5bd; cursor: pointer; }
.comment-actions button:hover { color: #fff; }
.comment-actions .thumb-up.active { color: #28a745; }
.comment-actions .thumb-down.active { color: #dc3545; }


/* --- Color Switcher --- */
#color-switcher {
    display: none; /* JS toggles .open */
    position: fixed;
    bottom: 70px;
    right: 1rem;
    flex-direction: row;
    gap: 0.75rem;
    z-index: 10000 !important;
    background: rgba(34, 34, 34, 0.98);
    border-radius: 1rem;
    padding: 1rem 0.5rem;
}

#color-switcher.open {
    display: flex !important;
}

#theme-picker-btn {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 50px;
    height: 50px;
    border: none;
    cursor: pointer;
    z-index: 10001 !important;
    background: #222;
    color: #fff !important;
    font-size: 2rem;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.2s;
}

#theme-picker-btn:hover {
    filter: brightness(1.1);
}

.color-swatch {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 3px 3px rgba(255, 255, 255, 0.2), inset 0 -3px 3px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
    transition: transform 0.1s ease-in-out;
    background-size: cover !important;
    background-position: center !important;
}

.color-swatch:active {
    transform: translateY(2px);
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.5);
}

#swatch-blue {
    background-color: #0d7994;
}
#swatch-red {
    background-color: #8B0000;
}
#swatch-gold {
    background-color: #B8860B;
}
#swatch-purple {
    background-color: #8a2be2;
}

/* --- Media Queries --- */

/* Responsive Banner */
@media (max-width: 900px) {
    .roc-banner-wrapper {
        max-width: 85vw; /* Adjusted for better mobile view */
    }
    body {
        padding: 0 1vw; /* Simpler than setting width */
    }
}

@media (max-width: 768px) {
    .roc-banner-wrapper {
        max-width: 95vw; /* Fuller width on small screens */
    }
    
    /* Mobile navbar improvements */
    .navbar,
    .main-navbar {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.5rem 0;
    }
    
    /* Mobile navigation - proper Bootstrap navbar styling */
    .navbar-collapse {
        background: rgba(31, 30, 28, 0.95);
        border-radius: 0.5rem;
        margin-top: 0.5rem;
        padding: 0.5rem;
    }
    
    /* Mobile navigation links - text style instead of buttons */
    .navbar-nav .nav-item .nav-link {
        background: none !important;
        color: #fff !important;
        border: none !important;
        box-shadow: none !important;
        font-size: 1.1rem !important;
        padding: 0.75rem 1rem !important;
        margin: 0.25rem 0 !important;
        text-align: left !important;
        width: 100% !important;
        text-decoration: none !important;
        display: block !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        border-radius: 0.25rem !important;
    }
    
    /* Remove button styling from nav buttons on mobile */
    .navbar-nav .nav-item .nav-button::before {
        display: none !important;
    }
    
    .navbar-nav .nav-item .nav-link:hover {
        background: rgba(255,255,255,0.1) !important;
        color: #fff !important;
        text-shadow: 0 0 8px rgba(255,255,255,0.5) !important;
    }
    
    /* Auth buttons container on mobile */
    .navbar-nav#auth-buttons {
        flex-direction: column !important;
        width: 100% !important;
        margin: 0.5rem 0 0 0 !important;
        padding-top: 0.5rem !important;
        border-top: 1px solid rgba(255,255,255,0.2) !important;
    }
    
    /* Auth button styling on mobile */
    .navbar-nav#auth-buttons .nav-item .nav-link {
        background: rgba(0, 123, 255, 0.1) !important;
        color: #0d7994 !important;
        font-weight: 600 !important;
        text-align: center !important;
    }
    
    .navbar-nav#auth-buttons .nav-item .nav-link:hover {
        background: rgba(0, 123, 255, 0.2) !important;
        color: #fff !important;
    }
    
    /* Mobile footer adjustments */
    .footer-nav {
        gap: 0.75rem !important;
        font-size: 0.9rem;
    }
    
    .footer-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.85rem;
    }
    
    /* Mobile general layout improvements */
    .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Mobile page headers */
    .page-header-banner h2 {
        font-size: 1.5rem !important;
    }
    
    /* Mobile card adjustments */
    .bg-card {
        margin: 0.5rem 0 !important;
        padding: 1rem !important;
    }
    
    /* Hero selector & helper rules moved to plugin CSS:
       plugs/hero_combos/includes/css/hero_combos_v2.css
       This keeps plugin visuals consistent across themes. */
}

/* --- NEW: Auth Modals (previously unstyled => invisible) --- */
.modal-backdrop { position: fixed; inset:0; background: rgba(0,0,0,.65); display:none; z-index:4990; }
.modal-window { 
    position: fixed; 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%); 
    background: rgba(30,30,30,.95); 
    border:1px solid #444; 
    border-radius:16px; 
    width: min(420px, 90%); 
    padding:2.5rem 2rem 2rem; 
    display:none; 
    z-index:5000; 
    box-shadow:0 10px 30px rgba(0,0,0,.6); 
    -webkit-backdrop-filter: blur(4px); 
    backdrop-filter: blur(4px); 
}
/* Auth modals: use bespoke image backgrounds and remove generic semi-transparent bg */
#login-modal.modal-window, #register-modal.modal-window {
    background: none;
    border: none;
    padding: 0; /* rely on background image safe area */
    width: min(480px, 92%);
    position:fixed;
}
#login-modal .modal-content-wrapper, #register-modal .modal-content-wrapper { 
    padding: 5.25rem 2.25rem 140px 2.25rem; 
    position:relative; 
}
#login-modal::before, #register-modal::before {
    content: "";
    position:absolute; inset:0; z-index:-1;
    background-size:100% 100%; background-repeat:no-repeat; background-position:center; image-rendering:auto;
    background-color:rgba(25,25,28,0.95); /* fallback so text visible if image not found */
}
#login-modal::before { background-image:url('/templates/roc/images/components/ui_roc_window_login.png'); }
#register-modal::before { background-image:url('/templates/roc/images/components/ui_roc_window_reg.png'); }
/* Maintain shape with an invisible outline for older browsers that ignore transparency for click area */
#login-modal, #register-modal { border-radius:24px; overflow:hidden; }
/* Close button fixed to sprite corner */
#login-modal .modal-close-btn, #register-modal .modal-close-btn { 
    position: absolute; 
    top: 10px; 
    right: 12px; 
    width: 40px; 
    height: 40px; 
    background: url('/templates/roc/images/components/btn_close.png') no-repeat center/100% 100%; 
    border: none; 
    cursor: pointer; 
    display: block; 
    padding: 0;
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
    z-index: 1000;
    border-radius: 4px;
    transition: all 0.2s ease;
}
#login-modal .modal-close-btn:hover, #register-modal .modal-close-btn:hover { 
    filter: brightness(1.1);
    background-color: rgba(255, 255, 255, 0.1);
}
/* Ensure submit buttons sit 5px above bottom edge of custom background */
#login-modal .text-center, #register-modal .text-center { position:absolute; left:0; right:0; bottom:18px; margin:0; padding:0; display:flex; justify-content:center; }
#login-modal .modal-submit-btn, #register-modal .modal-submit-btn { margin:0; display:inline-block; }
#login-modal { background: url('/templates/roc/images/components/ui_roc_window_login.png') no-repeat center center / contain; }
#register-modal { background: url('/templates/roc/images/components/ui_roc_window_reg.png') no-repeat center center / contain; }
.modal-window h2 { font-size:1.65rem; }
.modal-window h2 { position:absolute; top:22px; left:0; right:0; text-align:center; margin:0; pointer-events:none; }
.modal-close-btn { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    width: 40px; 
    height: 40px; 
    background: url('/templates/roc/images/components/btn_close.png') center/70% no-repeat transparent; 
    border: none; 
    cursor: pointer;
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 4px;
    transition: all 0.2s ease;
}
.modal-close-btn:hover { 
    filter: brightness(1.2);
    background-color: rgba(255, 255, 255, 0.1);
}
.modal-submit-btn { 
    background: url('/templates/roc/images/components/ui_roc_btn_gold.png') center/100% 100% no-repeat transparent; 
    border:none; color:#fff; font-weight:600; padding:12px 40px; min-width:180px; cursor:pointer; text-shadow:1px 1px 2px #000; 
}
.modal-submit-btn:hover { filter:brightness(1.1); }
.input-with-icon { position:relative; }
.input-with-icon .input-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:24px; opacity:.85; pointer-events:none; }
.auth-form-control { background:#222 !important; border:1px solid #555 !important; color:#fff !important; padding-left:46px; }
.auth-form-control:focus { border-color:#888 !important; box-shadow:0 0 0 2px rgba(255,215,0,.25); }
/* Force white placeholders inside auth modals */
.auth-form-control::placeholder { color:#fff !important; opacity:.78; }
.auth-form-control::-webkit-input-placeholder { color:#fff !important; opacity:.78; }
.auth-form-control::-moz-placeholder { color:#fff !important; opacity:.78; }
.auth-form-control:-ms-input-placeholder { color:#fff !important; opacity:.78; }
.auth-form-control:-moz-placeholder { color:#fff !important; opacity:.78; }

/* Custom checkbox visuals */
.roc-checkbox-wrapper { 
    display:inline-flex; 
    align-items:center; 
    gap:.4rem; 
    cursor:pointer; 
    -webkit-user-select: none;
    user-select:none; 
}
.roc-checkbox-wrapper .roc-checkbox { width:20px; height:20px; background: url('/templates/roc/images/components/ui_roc_empty-checkbox.png') no-repeat center center / contain; position:relative; transition:.2s; border: none; }
.roc-checkbox-wrapper .roc-checkbox.active { background: url('/templates/roc/images/components/ui_checked.png') no-repeat center center / contain; }

/* Password strength */
.password-strength-meter { height:6px; background:#333; border-radius:3px; margin-top:6px; position:relative; overflow:hidden; }
#password-strength-bar { position:absolute; top:0; left:0; height:100%; width:0; background:linear-gradient(90deg,#ff4d4d,#ffc107,#4caf50); transition:width .3s; }

/* Popup component global overrides (if needed) */
roc-popup { z-index: 3000; }

/* === COMPREHENSIVE MOBILE FIXES === */
@media (max-width: 480px) {
    /* Very small screens - emergency layout fixes */
    body {
        overflow-x: hidden !important;
        padding: 0 !important;
    }
    
    .app-body {
        width: 100% !important;
        padding: 0 0.25rem !important;
    }
    
    /* Navbar fixes for tiny screens */
    .navbar {
        padding: 0.25rem 0.5rem !important;
    }
    
    .navbar-brand {
        margin-left: 0 !important;
    }
    
    /* Footer improvements for tiny screens */
    .footer-nav {
        gap: 0.5rem !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .footer-link {
        font-size: 0.8rem !important;
        padding: 0.5rem !important;
        width: 100% !important;
        text-align: center !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    
    /* Very small screen season badge scaling - generic (non-plugin) */
    .season-badge-img,
    .hero-season-badge,
    .image-wrapper .season-badge-img,
    .image-wrapper .hero-season-badge {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
        top: 4px !important;
        left: 4px !important;
    }
    
    /* Hero detail page maintains larger badge even on small screens */
    .hero-image-wrapper .hero-season-badge {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Star ratings - smallest on very small screens */
    .rating-display .star,
    .rating-input .star {
        width: 24px !important;
        height: 24px !important;
        margin: 0 1px;
    }
    
    .rating-display img.star,
    .rating-input img.star,
    img.star {
        max-width: 24px !important;
        max-height: 24px !important;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }
    
    /* Small star sizing for hero cards moved to plugin CSS (see hero_combos_v2.css) */
}

/* Horizontal scroll prevention - ALL SCREEN SIZES */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

* {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Prevent any container from causing horizontal scroll */
.container-fluid {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

/* RoC Banner full-width fix */
.roc-banner-wrapper.roc-banner-full {
    max-width: 100vw !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

@media (max-width: 768px) {
    .col {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
}

/* === FOOTER EMERGENCY FIXES === */
/* Force footer visibility with highest specificity */
footer,
footer.text-center,
footer.py-4,
footer.mt-auto {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 100 !important;
    background: rgba(31, 30, 28, 0.95) !important;
    padding: 2rem 1rem 1rem !important;
    margin-top: 2rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

nav.footer-nav,
.footer-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 101 !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1.5rem !important;
    margin-bottom: 1rem !important;
    list-style: none !important;
    padding: 0 !important;
}

a.footer-link,
.footer-link {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #8D7042 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.25rem !important;
    transition: all 0.3s ease !important;
}

.footer-link:hover {
    color: #b8965a !important;
    background: rgba(141, 112, 66, 0.1) !important;
    text-shadow: 0 0 8px rgba(141, 112, 66, 0.5) !important;
}

/* Override any potential hiding classes */
.d-none footer,
.d-none .footer-nav,
.hidden footer,
.hidden .footer-nav {
    display: block !important;
    visibility: visible !important;
}

footer * {
    visibility: visible !important;
}

/* Mobile footer improvements */
@media (max-width: 768px) {
    .footer-nav {
        gap: 0.75rem !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .footer-link {
        width: 100% !important;
        text-align: center !important;
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 0 !important;
    }
    
    .footer-link:last-child {
        border-bottom: none !important;
    }
}

/* === iOS SAFARI INPUT ZOOM PREVENTION === */
@supports (-webkit-touch-callout: none) {
    input, select, textarea {
        font-size: 16px !important; /* iOS won't zoom if font-size is 16px or larger */
    }
    
    /* Ensure mobile inputs don't cause zoom */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Navbar icon colors - match footer link gold color */
.navbar .nav-link svg {
    color: #8D7042 !important;
    stroke: #8D7042 !important;
}

/* Alliances search bar - force gold text color to match footer */
#alliances-search {
    color: #8D7042 !important;
    background-color: #1a1a1a !important;
    border: 2px solid #8D7042 !important;
    font-weight: 600 !important;
}
#alliances-search::placeholder {
    color: #8D7042 !important;
    opacity: 0.6 !important;
}
#alliances-search:focus {
    color: #b8965a !important;
    background-color: #2a2a2a !important;
    border-color: #b8965a !important;
    box-shadow: 0 0 0 0.2rem rgba(141, 112, 66, 0.25) !important;
    outline: none !important;
}

/* User profile avatar frame and dropdown (styled like screenshot) */
.nav-avatar-frame {
    width:36px;
    height:36px;
    display:inline-block;
    padding:0;
    background: transparent !important;
    border-radius:50%;
    box-shadow: none !important;
    border: 0 !important;
}
.nav-avatar-img {
    width:36px;
    height:36px;
    border-radius:50%;
    display:block;
    object-fit:cover;
}

/* Ensure header icons are equal-sized and align */
.navbar .nav-link img {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
    display: block;
}

/* Put avatar visually in front of other icons */
#user-profile-item { z-index: 2100; }
#user-profile-item .nav-avatar-frame { position: relative; z-index: 2110; }

/* Badge container for hero-style digit images - CONSOLIDATED SINGLE RULE */
.notifications-count, .messages-count {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    display: none;
    z-index: 5000 !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.45) !important;
    align-items: center !important;
    justify-content: center !important;
    background: #dc3545 !important;
    overflow: visible !important;
}

.notifications-count img, .messages-count img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    display: block !important;
}

.notifications-count img.roc-digit, .messages-count img.roc-digit {
    height: 12px;
    width: auto;
    vertical-align: middle;
}

/* Ensure badge containers don't overflow navbar */
.navbar .notifications-bg, .navbar .messages-bg {
    overflow: visible !important;
    z-index: 3999 !important;
}

/* Logout button image style */
.btn-roc-logout {
    background: transparent; border: none; padding: 6px 8px; display: inline-flex; align-items: center; justify-content: center;
}
.btn-roc-logout::before {
    content: '';
    display: inline-block;
    width: 20px; height: 20px; background-image: url('/templates/roc/images/ui_roc_logout-btn.png'); background-size: contain; background-repeat: no-repeat; background-position: center;
    margin-right: 6px;
}

/* Maroon notification bubble */
.badge.bg-maroon { background-color: #6b2630 !important; color: #fff !important; }

.user-profile-menu {
    background: #2a2a2a; /* dark dropdown */
    border: 1px solid rgba(0,0,0,0.6);
    color: #f1f1f1;
    box-shadow: 0 8px 28px rgba(0,0,0,0.6);
}
.user-profile-menu .dropdown-item {
    color: #e6e6e6;
    font-weight:600;
    background: transparent;
}
.user-profile-menu .dropdown-item:hover {
    background: rgba(255,255,255,0.03);
}

.btn-roc-logout {
    background: linear-gradient(180deg,#f5c26b,#d3a04a); /* gold */
    color: #2a2a2a;
    font-weight:700;
    border: none;
    padding:8px 12px;
    border-radius:8px;
    box-shadow: 0 4px 10px rgba(211,160,74,0.25);
}
.btn-roc-logout:hover { filter: brightness(0.98); }

/* Ensure dropdown-contained logout keeps full width and original styling */
.user-profile-menu .btn-roc-logout {
    display: inline-block;
    width: auto;
    padding: 8px 12px;
    margin: 0;
}


/* ============================================================================
   END OF STYLE.CSS - Theme CSS only, all plugin styles in respective plugin CSS files
   Hero combos plugin: /plugs/hero_combos/includes/css/hero_combos_v2.css
   ============================================================================ */