/* ==========================================================================
   ASURA NEXUS — APP CHROME

   The frame every page sits in: navbar, mega menu, server picker, profile and
   Steam switcher, the mobile drawer, membership pill, event cards and the
   shared modal theme. It was 942 lines inside base.html's <style> block,
   reparsed on every request and invisible to the browser cache.

   Linked after nexus-ui.css so the chrome can lean on the tokens and still
   override a shared component where the navbar genuinely differs.
   ========================================================================== */

        /* The accent palette moved to static/css/nexus-ui.css section 1 — it was
           redeclared here, in the Dino Lab, in the inventory card partial and on
           the Patreon page, and the four copies had started to differ. */
       *{
           --bs-border-color: #414141;
       }
        body {
            /* Fallback color */
            background-color: #121212;
            /* Linear Gradient (Black 90%) + Image */
            background-image: linear-gradient(rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.92)),
                              url("../src/img/nexus_bg.webp");
            background-attachment: fixed; /* Parallax effect - image stays still */
            background-size: cover;
            background-position: center;
            color: #e0e0e0; /* Default text color */
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            padding-top: 80px; /* Clears the fixed navbar. */
        }

        /* 2. Glassmorphism Navbar */
        .navbar-glass {
            background: rgba(20, 20, 20, 0.7) !important;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px); /* Safari support */
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
            padding-top: 10px;
            padding-bottom: 10px;
        }

        /* Brand / Logo */
        .navbar-brand {
            font-weight: bold;
            letter-spacing: 1px;
            color: white !important;
        }

        .navbar-brand img {
            filter: drop-shadow(0 0 5px rgba(52, 152, 219, 0.5));
        }

        /* Custom Scrollbar (Chrome/Edge/Safari) */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #0f0f0f;
        }
        ::-webkit-scrollbar-thumb {
            background: #444;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #666;
        }

        /* Generic Styles */
        .card {
            background-color: rgba(32, 34, 37, 0.85);
            backdrop-filter: blur(5px);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .card-header h5 {
            color: #b9bbbe;
            letter-spacing: 0.5px;
        }

        .list-group-item {
            background-color: transparent;
            color: #ffffff;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .list-group-item:hover {
            background-color: rgba(255, 255, 255, 0.05);
        }

        .text-muted {
            color: #a3a6aa !important;
        }

        /* --- SWEETALERT2 DARK GLASS THEME FIX --- */
        div:where(.swal2-container) .swal2-popup {
            background-color: rgba(32, 34, 37, 0.95) !important;
            color: #fff !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            backdrop-filter: blur(10px) !important;
        }
        div:where(.swal2-container) .swal2-title { color: #fff !important; }
        div:where(.swal2-container) .swal2-html-container { color: #ccc !important; }
        /* SweetAlert ships checkbox/radio inputs with a white block background, which
           on the dark popup is a white bar with an invisible white label inside it. */
        div:where(.swal2-container) .swal2-checkbox,
        div:where(.swal2-container) .swal2-radio {
            background: transparent !important;
            color: #ccc !important;
            justify-content: center;
            gap: 0.6em;
        }
        div:where(.swal2-container) .swal2-checkbox input,
        div:where(.swal2-container) .swal2-radio input {
            width: 1.05em;
            height: 1.05em;
            margin: 0;
            accent-color: #eb6105;
            cursor: pointer;
        }
        div:where(.swal2-container) .swal2-checkbox .swal2-label,
        div:where(.swal2-container) .swal2-radio .swal2-label {
            margin: 0;
            font-size: 0.95rem;
            cursor: pointer;
        }

        /* --- FOOTER --- */
        .site-footer {
            background-color: rgba(15, 15, 15, 0.95);
            backdrop-filter: blur(10px);
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            color: #adb5bd;
            font-size: 0.9rem;
            margin-top: auto;
            padding-top: 60px;
            padding-bottom: 30px;
        }

        .footer-logo-text {
            color: #fff; font-weight: 700; font-size: 1.2rem; letter-spacing: 1px; margin-bottom: 15px; display: block; text-decoration: none;
        }
        .footer-heading {
            color: #fff; font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px;
        }
        .footer-links { list-style: none; padding: 0; margin: 0; }
        .footer-links li { margin-bottom: 10px; }
        .footer-links a { color: #adb5bd; text-decoration: none; transition: all 0.2s ease; display: inline-block; }
        .footer-links a:hover { color: #3498db; transform: translateX(5px); }
        .copyright-text { border-top: 1px solid rgba(255, 255, 255, 0.05); margin-top: 40px; padding-top: 20px; font-size: 0.85rem; color: #6c757d; }
        .blur-text { filter: blur(5px); }
        .content_wrapper{ margin-bottom: 2em; }

        /* =========================================
           --- NEW NAVBAR STYLES (FIXED) ---
           ========================================= */

        /* 1. Nav Links Layout */
        .navbar-nav .nav-link, .server-select {
            color: rgba(255, 255, 255, 0.7) !important;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
            margin-right: 10px;
            border-radius: 6px;

            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            padding: 8px 16px !important;
        }

        .nav-link:hover, .nav-link.active, .server-select:hover, .server-select.active {
            color: #fff !important;
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-1px);
        }
        .nav-link.active i , .server-select i{ color:  rgba(255, 255, 255, 0.7); }

        /* 2. Nexus Dropdowns (Glassmorphism Base) */
        .nexus-dropdown-menu {
            background: rgba(22, 22, 24, 0.95);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 8px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.6);
            margin-top: 15px !important;
            animation: fadeInDrop 0.2s ease-out;
        }

        @keyframes fadeInDrop {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 3. Server Select Button Styles */
        .server-select-btn {
            background: rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255,255,255,0.5);
            color: #fff;
            padding: 5px 12px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.2s ease;
            cursor: pointer;
            text-decoration: none;
            height: 42px; /* Matches the profile pill next to it. */
            font-size: 0.85rem;
        }
        .server-select-btn:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: #ffc107; /* Gold accent hover */
            color: #fff;
        }

        .server-dropdown-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 15px;
            border-radius: 8px;
            color: #e0e0e0;
            text-decoration: none;
            border: 1px solid transparent;
            transition: all 0.2s;
            margin-bottom: 4px;
        }
        .server-dropdown-item:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.1);
            color: #fff;
        }


        /* 4. MEGA MENU STYLES */
        .nav-item.mega-menu-parent {
            position: static; /* The pane below is positioned against the navbar,
                                 not this item, so it can span the full width. */
        }
        .dropdown-menu.mega-menu-pane {
            position: absolute;
            left: 0;
            right: 0;
            width: 100%;
            margin-top: 0;
            top: 90%;      /* Just under the navbar, overlapping it slightly. */

            /* Vzhled */
            border-radius: 0 0 12px 12px;
            padding: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-top: 2px solid rgba(255, 255, 255, 0.7);

            background-color: #0f1012;
            box-shadow: 0 20px 50px rgba(0,0,0,0.9);

            /* Hidden by default, but kept as display:block — the fade and slide
               below need a laid-out box to animate. */
            display: block;
            visibility: hidden;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.2s ease-in-out;
            pointer-events: none; /* Nothing is clickable while it is invisible. */
            z-index: 1050;
        }

        .dropdown-menu.mega-menu-pane.show {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .rich-menu-category {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #6c757d;
            font-weight: 700;
            margin-bottom: 15px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            padding-bottom: 5px;
        }
        .rich-menu-link {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 10px;
            border-radius: 8px;
            color: #e0e0e0;
            text-decoration: none;
            transition: all 0.2s;
            background: rgba(255,255,255,0.02);
            border: 1px solid transparent;
            height: 100%;
        }
        .rich-menu-link:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.1);
            color: #fff;
            transform: translateY(-2px);
        }
        .rich-menu-icon-box {
            width: 36px; height: 36px;
            display: flex; align-items: center; justify-content: center;
            background: rgba(255, 255, 255, 0.1); /* Gold tint */
            border-radius: 8px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 1.1rem;
        }

        /* 5. USER PROFILE STYLES */
        .profile-container {
            display: flex;
            align-items: center;
            gap: 15px;
            padding-left: 20px;
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            margin-left: 15px;
        }
        .profile-text { text-align: right; line-height: 1.2; }
        .profile-name { display: block; font-weight: 700; color: #fff; font-size: 1rem; }
        .profile-tier { display: block; font-size: 0.65rem; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; color: #ff4d4d; }

        /* Tier colors example */
        .tier-hunter { color: #ffc107; text-shadow: 0 0 10px rgba(255, 193, 7, 0.3); }
        .tier-alpha { color: #ff4d4d; text-shadow: 0 0 10px rgba(255, 77, 77, 0.3); }
        .tier-stalker { color: #bdc3c7; }
        .tier-scavenger { color: #adb5bd; }

        .profile-avatar-img {
            width: 42px; height: 42px;
            border-radius: 10px;
            object-fit: cover;
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: transform 0.2s;
        }
        .profile-container:hover .profile-avatar-img {
            transform: scale(1.05);
            border-color: #fff;
        }
        .menu-avatar-img{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

            .membership-pill {
        display: inline-flex; align-items: center; border-radius: 50px; border: 1px solid rgba(255,255,255,0.1);
        padding: 0; transition: all 0.3s ease; overflow: hidden; cursor: pointer; background: rgba(0,0,0,0.2);
    }
    .pill-content { padding: 8px 20px; font-weight: 700; display: flex; align-items: center; font-size: 0.9rem; letter-spacing: 1px; }
    .pill-action {
        max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        background: rgba(255,255,255,0.1); height: 100%; display: flex; align-items: center;
    }
    .pill-action span { padding: 8px 15px 8px 10px; font-weight: 600; font-size: 0.8rem; display: block; }
    .membership-pill:hover { box-shadow: 0 0 15px rgba(0,0,0,0.5); }
    .membership-pill:hover .pill-action { max-width: 120px; opacity: 1; }

    .pill-alpha { border-color: #ff4d4d; color: #ff4d4d; background: rgba(255, 77, 77, 0.05); }
    .pill-alpha:hover { box-shadow: 0 0 20px rgba(255, 77, 77, 0.3); border-color: #ff4d4d; }
    .pill-alpha .pill-action:hover { background: #ff4d4d; color: white; }

    .pill-hunter { border-color: #ffc107; color: #ffc107; background: rgba(255, 193, 7, 0.05); }
    .pill-hunter:hover { box-shadow: 0 0 20px rgba(255, 193, 7, 0.3); border-color: #ffc107; }
    .pill-hunter .pill-action:hover { background: #ffc107; color: black; }

    .pill-stalker { border-color: #bdc3c7; color: #bdc3c7; background: rgba(189, 195, 199, 0.05); }
    .pill-stalker:hover { box-shadow: 0 0 20px rgba(189, 195, 199, 0.2); border-color: #bdc3c7; }
    .pill-stalker .pill-action:hover { background: #bdc3c7; color: black; }

    .pill-scavenger { border-color: #6c757d; color: #adb5bd; background: rgba(108, 117, 125, 0.05); }
    .pill-scavenger:hover { box-shadow: 0 0 20px rgba(108, 117, 125, 0.2); border-color: #adb5bd; }
    .pill-scavenger .pill-action:hover { background: #adb5bd; color: black; }

    .membership-drawer {
        max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
        border-bottom: 1px solid transparent;
    }
    .membership-drawer.open { max-height: 2000px; opacity: 1; padding-bottom: 2rem; margin-bottom: 3rem; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
    .close-drawer-btn { cursor: pointer; transition: transform 0.2s; color: #adb5bd; }
    .close-drawer-btn:hover { transform: scale(1.2); color: #fff; }

    .discord-role-container {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 6px;
        transition: all 0.2s ease;
        cursor: default;
    }

    .discord-role-container:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.15);
    }
    .role-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    /* One linked Steam account in the profile dropdown. */
.steam-account-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.steam-account-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Unlink button — only fades in while the card is hovered. */
.btn-delete-steam {
    opacity: 0.3;
    transition: all 0.2s;
    color: #adb5bd;
}
.steam-account-card:hover .btn-delete-steam {
    opacity: 1;
}
.btn-delete-steam:hover {
    color: #ff4d4d;
    transform: scale(1.1);
}

/* Dark theme for Bootstrap modals. */
.modal-dark .modal-content {
    background-color: #2b2d31;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}
.modal-dark .modal-header, .modal-dark .modal-footer {
    border-color: rgba(255, 255, 255, 0.05);
}
.modal-dark .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
.add-steam-card {
    background: rgba(255, 255, 255, 0.02);
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: rgba(255, 255, 255, 0.5);
}

/* The plus icon sits in an avatar-sized slot so the add row lines up with the
   account rows above it. */
.add-steam-icon-slot {
    width: 42px;
    height: 42px;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.add-steam-card:hover {
    background: rgba(13, 202, 240, 0.08);
    border-color: rgba(13, 202, 240, 0.5);
    color: #0dcaf0;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(13, 202, 240, 0.15);
}

.add-steam-card:hover .add-steam-icon-slot {
     border-color: #0dcaf0;
     background: rgba(13, 202, 240, 0.1);
}

/* --- EVENT BANNER STYLES --- */
.event-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-radius: 12px;
    text-decoration: none;
    color: #e0e0e0;
    background: linear-gradient(100deg, rgba(13, 202, 240, 0.1) 0%, rgba(20, 20, 20, 0.6) 100%);
    border: 1px solid rgba(13, 202, 240, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Accent rail down the left edge. */
.event-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: #0dcaf0; /* Asura Cyan */
    box-shadow: 0 0 10px #0dcaf0;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.event-card:hover {
    transform: translateY(-2px);
    border-color: rgba(13, 202, 240, 0.6);
    background: linear-gradient(100deg, rgba(13, 202, 240, 0.18) 0%, rgba(20, 20, 20, 0.8) 100%);
    box-shadow: 0 8px 25px rgba(13, 202, 240, 0.15);
    color: #fff;
}

.event-card:hover::before {
    opacity: 1;
}

/* Ikonka */
.event-icon-wrapper {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(13, 202, 240, 0.15);
    border-radius: 10px;
    color: #0dcaf0;
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    border: 1px solid rgba(13, 202, 240, 0.1);
}

.event-card:hover .event-icon-wrapper {
    transform: scale(1.1) rotate(-5deg);
    background: rgba(13, 202, 240, 0.25);
    color: #fff;
    box-shadow: 0 0 15px rgba(13, 202, 240, 0.4);
}

/* Texty */
.event-info h6 {
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    display: flex; align-items: center; gap: 8px;
}

.event-info p {
    margin: 4px 0 0 0;
    font-size: 0.8rem;
    color: #a3a6aa;
    line-height: 1.3;
}
.event-card:hover .event-info p { color: #d1d1d1; }

.event-badge {
    font-size: 0.6rem;
    background: #0dcaf0;
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: 0.5px;
    box-shadow: 0 0 5px rgba(13,202,240,0.5);
    animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
    0% { box-shadow: 0 0 0 0 rgba(13, 202, 240, 0.7); }
    70% { box-shadow: 0 0 0 5px rgba(13, 202, 240, 0); }
    100% { box-shadow: 0 0 0 0 rgba(13, 202, 240, 0); }
}

/* Gear shortcut in the mega menu — the route from "these top links are wrong
   for me" to the page that changes them. Deliberately quiet until hovered. */
.menu-gear-btn {
    position: absolute;
    top: 4px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color .15s ease, background .15s ease, transform .15s ease;
}
.menu-gear-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    transform: rotate(45deg);
}

/* Splits a menu section into two runs without a second heading — Economy is
   "buy from Nexus" above and "trade with players" below. */
.rich-menu-gap { height: 10px; }

/* --- PIN TO QUICK ACCESS ------------------------------------------------
   A pushpin appears on hover over any menu row. There is no "add" here, only
   "replace": the top bar always holds exactly three links, so the popover has
   to say which one is being given up. */
.rich-menu-row { position: relative; }
.rich-menu-row .rich-menu-link { padding-right: 38px; }

.pin-btn {
    position: absolute;
    top: 50%; right: 8px;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, color .15s ease, background .15s ease;
}
.rich-menu-row:hover .pin-btn,
.pin-btn.is-open { opacity: 1; pointer-events: auto; }
.pin-btn:hover, .pin-btn.is-open {
    background: rgba(235, 97, 5, 0.22);
    color: var(--nexus-orange, #eb6105);
}
.pin-btn.is-pinned { opacity: 1; pointer-events: auto; color: var(--nexus-orange, #eb6105); }

#pinPopover {
    position: fixed;
    z-index: 12050;
    width: 260px;
    padding: 10px;
    border-radius: 12px;
    background: #202225;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55);
}
#pinPopover[hidden] { display: none; }
.pin-pop-title {
    color: #8e9297; font-size: 0.64rem; font-weight: 800;
    letter-spacing: 0.8px; text-transform: uppercase;
    padding: 2px 6px 8px; margin: 0;
}
.pin-pop-title b { color: #fff; }
.pin-slot {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; margin-top: 4px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: #ddd; font-size: 0.82rem; text-align: left;
    cursor: pointer;
    transition: all .15s ease;
}
.pin-slot:hover:not(:disabled) {
    background: rgba(235, 97, 5, 0.16);
    border-color: rgba(235, 97, 5, 0.45);
    color: #fff;
}
.pin-slot:disabled { opacity: .45; cursor: default; }
.pin-slot-num {
    flex-shrink: 0;
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(235, 97, 5, 0.15); border: 1px solid rgba(235, 97, 5, 0.4);
    color: var(--nexus-orange, #eb6105); font-size: 0.66rem; font-weight: 800;
}
.pin-slot-body { min-width: 0; }
.pin-slot-now { display: block; color: #8e9297; font-size: 0.68rem; }
.pin-slot-name {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- MENU FOOTER STRIP: promo + Discord ---------------------------------
   One shortened teaser on the left, the Discord invite on the right. The promo
   is cyan to sit apart from the orange brand accent used by everything above
   it, so it reads as a suggestion rather than as another menu row. */
.menu-promo {
    flex: 1 1 340px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    text-decoration: none;
    color: #e0e0e0;
    background: linear-gradient(110deg, rgba(13, 202, 240, 0.14) 0%, rgba(52, 152, 219, 0.07) 55%, rgba(20, 20, 20, 0.6) 100%);
    border: 1px solid rgba(13, 202, 240, 0.28);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.menu-promo::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: #0dcaf0;
    box-shadow: 0 0 12px #0dcaf0;
    opacity: 0.8;
    transition: opacity 0.3s;
}
.menu-promo-glow {
    position: absolute;
    right: -10px; bottom: -30px;
    width: 130px; height: 130px;
    background: radial-gradient(circle, rgba(13, 202, 240, 0.16) 0%, rgba(13, 202, 240, 0) 70%);
    pointer-events: none;
}
.menu-promo:hover {
    transform: translateY(-2px);
    border-color: rgba(13, 202, 240, 0.6);
    box-shadow: 0 10px 28px rgba(13, 202, 240, 0.16);
    color: #fff;
}
.menu-promo:hover::before { opacity: 1; }

.menu-promo-icon {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #0dcaf0 0%, #3498db 100%);
    border-radius: 10px;
    color: #06222b;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(13, 202, 240, 0.35);
    transition: transform 0.3s ease;
}
.menu-promo:hover .menu-promo-icon { transform: scale(1.08) rotate(-6deg); }

.menu-promo-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
.menu-promo-info h6 {
    margin: 0;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
}
.menu-promo-info p {
    margin: 3px 0 0 0;
    font-size: 0.78rem;
    color: #9fb9c4;
    line-height: 1.35;
}
.menu-promo:hover .menu-promo-info p { color: #c9e3ec; }

.menu-promo-cta {
    flex-shrink: 0;
    color: #0dcaf0;
    font-size: 1.05rem;
    transition: transform 0.3s ease;
    position: relative; z-index: 1;
}
.menu-promo:hover .menu-promo-cta { transform: translateX(5px); }

/* Discord blurple, deliberately smaller than the promo: it is a standing link,
   not this week's suggestion. */
.menu-discord-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #c9c6ff;
    background: rgba(88, 101, 242, 0.14);
    border: 1px solid rgba(88, 101, 242, 0.40);
    transition: all 0.25s ease;
}
.menu-discord-btn i { font-size: 1.25rem; color: #8b93f8; transition: color 0.25s ease; }
.menu-discord-btn:hover {
    background: #5865F2;
    border-color: #5865F2;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(88, 101, 242, 0.35);
}
.menu-discord-btn:hover i { color: #fff; }

.dropdown-item:focus, .dropdown-item:hover {
    background-color: #313131;
}
    /* The item-card system (.skin-card, .card-header-custom, .price-row, the
       ribbons, the gallery cross-fade, the palette) now lives in
       static/css/nexus-ui.css section 9 — four other templates were
       redeclaring parts of it. */

    /* --- MOBILE MENU --- */
@media (max-width: 991.98px) {
    #mobileMenuWrapper {
        background: #0f1012 !important; /* Opaque: the drawer covers the page, and a
                                           translucent one showed the content through. */
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 10000;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mobile-menu-content {
        background: #0f1012 !important;
        padding: 20px;
        height: calc(100vh - 60px);
        overflow-y: auto;
    }

    .mobile-nav-link {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 15px;
        color: #e0e0e0;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.9rem;
    }

    .mobile-nav-link i { width: 20px; text-align: center; color: #3498db; }
    .mobile-category-title { color: #6c757d; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; margin: 20px 0 10px 15px; font-weight: 800; }
    .mobile-profile-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 15px;
            border-radius: 50px;
            font-weight: 800;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 5px;
            border: 1px solid transparent;
        }

        .badge-hunter {
            background: rgba(255, 193, 7, 0.05);
            color: #ffc107;
            border-color: #ffc107;
            box-shadow: 0 0 10px rgba(255, 193, 7, 0.3);
        }

        .badge-alpha {
            background: rgba(255, 77, 77, 0.05);
            color: #ff4d4d;
            border-color: #ff4d4d;
            box-shadow: 0 0 10px rgba(255, 77, 77, 0.3);
        }

        .badge-stalker {
            background: rgba(189, 195, 199, 0.05);
            color: #bdc3c7;
            border-color: #bdc3c7;
        }
}

   .modal { z-index: 11000 !important; }
   .modal-backdrop { z-index: 10990 !important; }
   .swal2-container { z-index: 12000 !important; }

   .select2-container--default .select2-selection--single .select2-selection__rendered {margin-top: 8px;}


   /* --- APEX PROMO CARD --- */
    .apex-promo-card {
        background-color: #1a1b1e;
        border: 1px solid var(--nexus-orange);
        border-radius: 12px;
        overflow: hidden;
        position: relative;
        height: 100%;
        min-height: 280px;
        display: flex;
        align-items: center;
        transition: all 0.3s ease;
    }
    .apex-promo-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(235, 97, 5, 0.25);
    }
    .apex-promo-bg {
        position: absolute; top: 0; right: 0; bottom: 0; left: 0;
        background-image: url("../src/img/account_membership.webp");
        background-size: cover;
        background-position: center right;
        opacity: 0.7;
    }
    .apex-promo-overlay {
        position: absolute; top: 0; right: 0; bottom: 0; left: 0;
        background: linear-gradient(90deg, rgba(26, 27, 30, 0.8) 15%, rgba(26, 27, 30, 0) 80%);
    }
    .apex-promo-content {
        position: relative;
        z-index: 2;
        padding: 30px;
        max-width: 65%;
    }
    .btn-apex {
        background: transparent;
        color: var(--nexus-orange);
        border: 1px solid var(--nexus-orange);
        font-weight: 800;
        text-transform: uppercase;
        padding: 10px 24px;
        border-radius: 8px;
        text-decoration: none;
        transition: all 0.3s ease;
        display: inline-block;
        letter-spacing: 0.5px;
    }
    .btn-apex:hover { background: var(--nexus-orange); color: #fff; border-color: transparent; }

    /* Special / "epic" skin cards — azure frame and glow to set them apart
       from the regular collection. */
    .epic_card {
        border: 1px solid #00d9ff !important;
        box-shadow: 0 0 18px rgba(0, 217, 255, 0.45), inset 0 0 14px rgba(0, 217, 255, 0.12) !important;
    }
    .epic_card:hover {
        box-shadow: 0 0 30px rgba(0, 217, 255, 0.7), inset 0 0 18px rgba(0, 217, 255, 0.18) !important;
    }