/* ======================================
   BANNER CARD CORE
====================================== */

.banner-card {
    position: relative;
    height: 90px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    background: #111;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.banner-content {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 20px;
}

.user-icon-container {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: #fff;
    font-size: 1.2rem;
}

.user-info h6 {
    margin: 0;
    font-weight: 800;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.user-info span {
    font-size: 0.75rem;
/*    color: #aaa;*/
}

.points-highlight {
    font-weight: 800;
    /*color: #d4af37;*/
}

.banner-number {
    margin-left: auto;
    font-size: 1.8rem;
    font-weight: 900;
    font-style: italic;
    opacity: 0.25;
}

/* ======================================
   BANNERS
====================================== */

.banner-1 {
    background: linear-gradient(270deg,#000,#d4af37,#000);
    background-size: 400%;
    animation: flow 8s infinite;
    border-color: #d4af37;
}

.banner-2 {
    background: radial-gradient(circle,#2d004d,#000);
}

.banner-3 {
    background: #1a0000;
    border: 1px solid #ff0000;
    animation: pulseRed 3s infinite;
}

.banner-4 {
    background: #001a1a;
}

    .banner-4::before {
        content: "";
        position: absolute;
        top: 0;
        width: 100%;
        height: 2px;
        background: #00ffff;
        animation: scan 3s linear infinite;
        opacity: .3;
    }

.banner-5 {
    background: #111;
}

.banner-6 {
    background: linear-gradient(45deg,#003311,#006622);
    border-left: 5px solid #00ff44;
}

.banner-7 {
    background: linear-gradient(135deg,#00b4db,#0083b0);
}

.banner-8 {
    background: #000;
    box-shadow: inset 0 0 15px #111;
}

.banner-9 {
    background: #1a1a1a;
    background-image: radial-gradient(#333 10%,transparent 10%);
    background-size: 10px 10px;
}

.banner-10 {
    background: linear-gradient(to right,#6a11cb,#2575fc);
}

.banner-11 {
    background: #000;
    border-bottom: 3px solid #ff4e00;
}

    .banner-11::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 20px;
        background: orange;
        filter: blur(15px);
        opacity: .3;
    }

.banner-12 {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.1);
}

.banner-13 {
    background: #000;
    border: 1px solid #00d2ff;
    box-shadow: 0 0 10px #00d2ff;
}

.banner-14 {
    background: #c2b280;
    color: #3e3312;
}

.banner-15 {
    background: #000;
    font-family: monospace;
}

    .banner-15::after {
        content: "101010110";
        position: absolute;
        color: #0f0;
        font-size: 8px;
        opacity: .15;
        right: 6px;
        top: 6px;
    }

.banner-16 {
    background: linear-gradient(45deg,#f093fb,#f5576c);
}

.banner-17 {
    background: linear-gradient(to bottom,#777,#333);
    border-top: 1px solid #999;
}

.banner-18 {
    background: linear-gradient(90deg,red,orange,yellow,green,blue,indigo,violet);
    background-size: 200%;
    animation: flow 5s linear infinite;
}

.banner-19 {
    background: #000;
    border-left: 8px solid #adff2f;
}

.banner-20 {
    background: repeating-linear-gradient(45deg,#000,#000 10px,#222 10px,#222 20px);
}

.banner-21 {
    background: #240b36;
    background-image: linear-gradient(rgba(255, 0, 255, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 0, 255, 0.2) 1px, transparent 1px);
    background-size: 20px 20px;
    animation: moveGrid 2s linear infinite;
}

.banner-22 {
    background: linear-gradient(#000428,#004e92);
}

    .banner-22::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle,transparent,rgba(0,0,0,.8));
    }

.banner-23 {
    background: #d4af37;
    color: #000;
}

.banner-24 {
    background: #111;
    border-bottom: 3px solid #39ff14;
    box-shadow: 0 10px 20px -10px #39ff14;
}

.banner-25 {
    background: #222;
    background-image: repeating-linear-gradient(0deg,#222,#222 1px,#282828 1px,#282828 2px);
}

.banner-26 {
    background: #000;
    border: 1px solid #ccff00;
}

    .banner-26::before {
        content: "";
        position: absolute;
        width: 50px;
        height: 150%;
        background: #ccff00;
        opacity: .1;
        filter: blur(20px);
        animation: sweep 4s infinite;
    }

.banner-27 {
    background: #f0f0f0;
    color: #333;
    clip-path: polygon(0 0,95% 0,100% 20%,100% 100%,0 100%);
}

.banner-28 {
    background: linear-gradient(90deg,#bf033b,#ff4e00);
    animation: pulseGlow 2s infinite alternate;
}

.banner-29 {
    background: #003366;
    background-image: radial-gradient(white 1px,transparent 0);
    background-size: 15px 15px;
    border-left: 5px solid white;
}

.banner-30 {
    background: linear-gradient(135deg,#e0e0e0,#fff,#e0e0e0);
    color: #444;
}

.banner-31 {
    background: linear-gradient(45deg,#24fe41,#fdfc47);
}

.banner-32 {
    background: #000;
}

    .banner-32::after {
        content: "010101";
        position: absolute;
        color: #0f0;
        font-size: 10px;
        animation: glitchText .5s infinite;
        right: 20px;
    }

.banner-33 {
    background: #fff;
    color: #000;
}

.banner-34 {
    background: #8bac0f;
    color: #0f380f;
    border: 4px solid #306230;
}

.banner-35 {
    background: linear-gradient(to right,#000,#434343);
}

.banner-36 {
    background: #ffd700;
    background-image: repeating-linear-gradient( -45deg, transparent, transparent 20px, rgba(0,0,0,.1) 20px, rgba(0,0,0,.1) 40px );
    background-size: 56.57px 56.57px;
    color: #000;
    animation: moveHorizontal 2s linear infinite;
}

.banner-37 {
    background: #190a05;
    border: 1px solid #9d50bb;
    box-shadow: inset 0 0 20px #6e48aa;
}

.banner-38 {
    background: #000;
    border-top: 2px solid cyan;
    border-bottom: 2px solid magenta;
}

.banner-39 {
    background: #e6be8a;
    color: #5d4037;
}

.banner-40 {
    background: linear-gradient(120deg,#a1c4fd,#c2e9fb);
}

.banner-41 {
    background: #1a1a1b;
    clip-path: polygon(2% 0%,100% 0%,98% 100%,0% 100%);
}

.banner-42 {
    background: #ffd1dc;
    color: #d02090;
}

.banner-43 {
    background: #0b2010;
    border-left: 10px solid #1b4d3e;
}

.banner-44 {
    background: linear-gradient(135deg,#b87333,#804a00);
}

.banner-45 {
    background: #000;
    border-left: 5px solid #0052cc;
    border-right: 5px solid #cc0000;
}

.banner-46 {
    background: #800000;
    box-shadow: inset 0 0 30px rgba(0,0,0,.6);
}

.banner-47 {
    background: linear-gradient(to right,#91eae4,#86a8e7,#7f7fd5);
}

.banner-48 {
    background: #f4e4bc;
    color: #5d4037;
    font-family: Georgia,serif;
}

.banner-49 {
    background: #000;
    box-shadow: inset 0 0 40px #1a1a1a;
}

.banner-50 {
    background: #000;
    border: 2px solid;
    animation: rainbowBorder 3s linear infinite;
}

.banner-53 {
    background-color: #1e1e2f;
    background-image: radial-gradient(rgba(255, 255, 255, 0.2) 2px, transparent 2px);
    background-size: 24px 24px;
    color: #ffffff;
    animation: banner53Drift 3s linear infinite;
}

.banner-54 {
    position: relative;
    background: linear-gradient(180deg, #0b1d3a 0%, #204163 60%, #e27d60 100%);
    overflow: hidden;
    border-radius: 12px;
}

    .banner-54::before,
    .banner-54::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 200%;
        pointer-events: none;
    }

    .banner-54::before {
        background-image: repeating-linear-gradient( 120deg, #1d2e4a 0px, #1d2e4a 50px, transparent 50px, transparent 100px );
        clip-path: polygon(
        0% 100%, 0% 60%, 7.5% 40%, 15% 65%, 22.5% 35%, 30% 70%, 37.5% 45%, 45% 60%, 50% 40%,
        50% 100%, 50% 60%, 57.5% 40%, 65% 65%, 72.5% 35%, 80% 70%, 87.5% 45%, 95% 60%, 100% 40%, 100% 100% );
        opacity: 0.7;
        animation: moveFarMountains 20s linear infinite;
    }

    .banner-54::after {
        background-image: repeating-linear-gradient( 60deg, #0b1325 0px, #0b1325 40px, transparent 40px, transparent 80px );
        clip-path: polygon(
        0% 100%, 0% 75%, 10% 55%, 17.5% 80%, 25% 50%, 34% 75%, 41% 58%, 50% 75%,
        50% 100%, 50% 75%, 60% 55%, 67.5% 80%, 75% 50%, 84% 75%, 91% 58%, 100% 75%, 100% 100% );
        animation: moveNearMountains 10s linear infinite;
    }

.banner-55 {
    background-color: #0a4b78;
    background-image: linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
    color: #ffffff;
    animation: banner55Blueprint 4s linear infinite;
}

.banner-56 {
    background-color: #2b1055;
    background-image: linear-gradient(135deg, rgba(255, 0, 128, 0.25) 2px, transparent 2px), linear-gradient(225deg, rgba(0, 229, 255, 0.25) 2px, transparent 2px);
    background-size: 32px 32px;
    color: #ffffff;
    animation: banner56Crosshatch 2s linear infinite;
}

.banner-57 {
    background-color: #0d1117;
    background-image:
    linear-gradient(rgba(56, 139, 253, 0.4) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(56, 139, 253, 0.4) 1.5px, transparent 1.5px),
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 60px 60px, 60px 60px, 20px 20px, 20px 20px;
    color: #ffffff;
    animation: banner57Parallax 6s linear infinite;
}

/* ======================================
   Banner Animations
====================================== */

@keyframes flow {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes scan {
    from {
        top: 0
    }

    to {
        top: 100%
    }
}

@keyframes pulseRed {
    0% {
        box-shadow: 0 0 0 0 rgba(255,0,0,.4)
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255,0,0,0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255,0,0,0)
    }
}

@keyframes sweep {
    from {
        left: -100%
    }

    to {
        left: 200%
    }
}

@keyframes pulseGlow {
    from {
        box-shadow: 0 0 5px #ff4e00
    }

    to {
        box-shadow: 0 0 20px #ff4e00
    }
}

@keyframes glitchText {
    0% {
        opacity: 1
    }

    50% {
        opacity: .4;
        transform: translateX(2px)
    }

    100% {
        opacity: 1
    }
}

@keyframes rainbowBorder {
    0% {
        border-color: red
    }

    20% {
        border-color: yellow
    }

    40% {
        border-color: lime
    }

    60% {
        border-color: cyan
    }

    80% {
        border-color: blue
    }

    100% {
        border-color: magenta
    }
}

@keyframes moveHorizontal {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 56.57px 0;
    }
}

@keyframes moveGrid {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 20px 20px, 20px 20px;
    }
}

@keyframes banner57Parallax {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0;
    }

    100% {
        background-position: 60px 60px, 60px 60px, -20px -20px, -20px -20px;
    }
}

@keyframes banner56Crosshatch {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 32px 32px, -32px 32px;
    }
}

@keyframes banner55Blueprint {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0;
    }

    100% {
        background-position: 50px 50px, 50px 50px, 50px 50px, 50px 50px;
    }
}

@keyframes banner54Caution {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 40px 0;
    }
}

@keyframes banner53Drift {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 24px 24px;
    }
}

@keyframes moveFarMountains {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes moveNearMountains {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* ==========================================================================
   Custom Bootstrap Color Extensions
   ========================================================================== */

:root {
    --bs-purple-rgb: 111, 66, 193; /* #6f42c1 */
    --bs-orange-rgb: 253, 126, 20; /* #fd7e14 */
    --bs-pink-rgb: 214, 51, 132; /* #d63384 */
    --bs-teal-rgb: 32, 201, 151; /* #20c997 */
    --bs-indigo-rgb: 102, 16, 242; /* #6610f2 */
    --bs-lime-rgb: 132, 204, 22; /* #84cc16 */
}

[data-bs-theme="dark"] {
    --bs-purple-rgb: 192, 132, 252;
    --bs-orange-rgb: 251, 146, 60;
    --bs-pink-rgb: 244, 114, 182;
    --bs-teal-rgb: 45, 212, 191;
    --bs-indigo-rgb: 165, 180, 252;
    --bs-lime-rgb: 163, 230, 53;
}

/* --------------------------------------------------------------------------
   Text Color Utilities
   -------------------------------------------------------------------------- */

.text-purple {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-purple-rgb), var(--bs-text-opacity)) !important;
}

.text-orange {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-orange-rgb), var(--bs-text-opacity)) !important;
}

.text-pink {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-pink-rgb), var(--bs-text-opacity)) !important;
}

.text-teal {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-teal-rgb), var(--bs-text-opacity)) !important;
}

.text-indigo {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-indigo-rgb), var(--bs-text-opacity)) !important;
}

.text-lime {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-lime-rgb), var(--bs-text-opacity)) !important;
}

/* --------------------------------------------------------------------------
   Hover States for Links (Matches standard Bootstrap link behavior)
   -------------------------------------------------------------------------- */

a.text-purple:hover, a.text-purple:focus {
    color: rgba(var(--bs-purple-rgb), 0.8) !important;
}

a.text-orange:hover, a.text-orange:focus {
    color: rgba(var(--bs-orange-rgb), 0.8) !important;
}

a.text-pink:hover, a.text-pink:focus {
    color: rgba(var(--bs-pink-rgb), 0.8) !important;
}

a.text-teal:hover, a.text-teal:focus {
    color: rgba(var(--bs-teal-rgb), 0.8) !important;
}

a.text-indigo:hover, a.text-indigo:focus {
    color: rgba(var(--bs-indigo-rgb), 0.8) !important;
}

a.text-lime:hover, a.text-lime:focus {
    color: rgba(var(--bs-lime-rgb), 0.8) !important;
}