/* =========================================================
   MU ARISE - NAVBAR PREMIUM
   ========================================================= */

.navbar {
    height: 58px;
    padding: 0;
    background:
        linear-gradient(
            180deg,
            rgba(3, 13, 28, 0.97) 0%,
            rgba(1, 8, 20, 0.94) 100%
        );
    border-bottom: 1px solid rgba(0, 174, 255, 0.35);
    box-shadow:
        0 2px 15px rgba(0, 0, 0, 0.75),
        0 1px 0 rgba(0, 170, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
}

/* Linha azul luminosa na parte inferior */
.navbar::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #00aaff,
        #5bd7ff,
        #00aaff,
        transparent
    );

    box-shadow:
        0 0 8px #008cff,
        0 0 18px rgba(0, 153, 255, 0.8);
}

/* Container */
.navbar > .container {
    height: 100%;
    display: flex;
    align-items: center;
}


/* =========================================================
   LINKS
   ========================================================= */

.navbar .navbar-nav {
    height: 100%;
    align-items: center;
    gap: 4px;
}

.navbar .nav-item {
    height: 100%;
    display: flex;
    align-items: center;
}

.navbar .nav-link {
    position: relative;

    height: 100%;
    padding: 0 15px !important;

    display: flex;
    align-items: center;

    color: #c7d9e8 !important;

    font-family: "Rajdhani", "Arial", sans-serif;
    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.5px;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        text-shadow 0.25s ease;
}

/* Pequeno brilho embaixo do link */
.navbar .nav-link::after {
    content: "";

    position: absolute;
    bottom: 0;
    left: 50%;

    width: 0;
    height: 2px;

    transform: translateX(-50%);

    background: linear-gradient(
        90deg,
        transparent,
        #00aaff,
        #62ddff,
        #00aaff,
        transparent
    );

    box-shadow: 0 0 8px #009cff;

    transition: width 0.25s ease;
}

/* Hover */
.navbar .nav-link:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            180deg,
            rgba(0, 137, 255, 0.08),
            rgba(0, 137, 255, 0.02)
        );

    text-shadow:
        0 0 6px rgba(0, 180, 255, 0.8);
}

.navbar .nav-link:hover::after {
    width: 70%;
}


/* =========================================================
   ITEM ATIVO
   ========================================================= */

.navbar .nav-link.active {
    color: #ffffff !important;

    background:
        linear-gradient(
            180deg,
            rgba(0, 151, 255, 0.16),
            transparent
        );

    text-shadow:
        0 0 8px rgba(0, 174, 255, 0.9);
}

.navbar .nav-link.active::after {
    width: 70%;
}


/* =========================================================
   DROPDOWN "MAIS"
   ========================================================= */

.navbar .dropdown-menu {
    margin-top: 580px !important;
    min-width: 190px;
    padding: 10px;
    background:
        linear-gradient(
            145deg,
            rgba(5, 25, 48, 0.98),
            rgba(1, 11, 25, 0.98)
        );
    border: 1px solid rgba(0, 157, 255, 0.4);
    border-radius: 5px;
    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(0, 132, 255, 0.15);
}

/* Pequeno brilho superior */
.navbar .dropdown-menu::before {
    content: "";

    position: absolute;

    top: -1px;
    left: 20px;
    right: 20px;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #00aaff,
        transparent
    );

    box-shadow: 0 0 8px #009cff;
}

.navbar .dropdown-item {
    padding: 10px 12px;

    color: #b9d2e5;

    border-radius: 3px;

    font-family: "Rajdhani", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;

    transition: all 0.2s ease;
}

.navbar .dropdown-item:hover {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(0, 143, 255, 0.25),
            rgba(0, 143, 255, 0.05)
        );

    padding-left: 16px;

    box-shadow:
        inset 2px 0 0 #00aaff,
        0 0 12px rgba(0, 153, 255, 0.08);
}


/* =========================================================
   SETA DO DROPDOWN
   ========================================================= */

.navbar .dropdown-toggle::after {
    margin-left: 7px;
    border-top-color: #55cfff;
    transition: transform 0.2s ease;
}

.navbar .dropdown-toggle:hover::after {
    border-top-color: #ffffff;
}


/* =========================================================
   BANDEIRA / IDIOMA
   ========================================================= */

.navbar-language {
    margin-left: 10px;
}

.navbar-language .btn-header {
    width: 50px;
    height: 34px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            rgba(10, 35, 62, 0.9),
            rgba(3, 15, 29, 0.95)
        );

    border: 1px solid rgba(0, 148, 255, 0.3);

    border-radius: 4px;

    transition: all 0.25s ease;
}

.navbar-language .btn-header:hover {
    border-color: rgba(0, 190, 255, 0.8);

    box-shadow:
        0 0 10px rgba(0, 153, 255, 0.3);
}

.navbar-language img {
    width: 18px;
    height: auto;

    border-radius: 2px;
}


/* =========================================================
   LOGIN
   ========================================================= */

.navbar-auth {
    margin-left: 7px;
}

.navbar-auth > .btn-header {
    height: 34px;

    padding: 0 15px;

    border: 1px solid rgba(0, 174, 255, 0.5);

    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            #087ec5 0%,
            #04558e 100%
        );

    color: #ffffff;

    font-family: "Rajdhani", Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        0 0 10px rgba(0, 125, 220, 0.15);

    transition: all 0.25s ease;
}

.navbar-auth > .btn-header:hover {
    background:
        linear-gradient(
            180deg,
            #119ee9 0%,
            #066aa9 100%
        );

    border-color: #4bd1ff;

    box-shadow:
        0 0 12px rgba(0, 174, 255, 0.5),
        inset 0 1px 0 rgba(255,255,255,0.2);

    transform: translateY(-1px);
}


/* =========================================================
   DROPDOWN LOGIN
   ========================================================= */

.navbar .dropdown-auth {
    width: 320px;

    padding: 20px;

    margin-top: 8px !important;

    background:
        linear-gradient(
            145deg,
            rgba(5, 25, 47, 0.99),
            rgba(1, 10, 22, 0.99)
        );

    border: 1px solid rgba(0, 160, 255, 0.45);

    box-shadow:
        0 15px 45px rgba(0,0,0,0.85),
        0 0 25px rgba(0, 140, 255, 0.12);
}

/* Título User Panel */
.navbar .dropdown-auth .icon-text {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 18px;
    padding-bottom: 12px;

    border-bottom: 1px solid rgba(0, 150, 255, 0.18);
}

.navbar .dropdown-auth .icon-text .icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #48cfff;

    background: rgba(0, 145, 255, 0.1);

    border: 1px solid rgba(0, 155, 255, 0.3);

    border-radius: 4px;
}

.navbar .dropdown-auth .icon-text .text {
    color: #ffffff;

    font-family: "Rajdhani", Arial, sans-serif;
    font-size: 15px;
    font-weight: 800;

    text-transform: uppercase;
}


/* =========================================================
   INPUTS DO LOGIN
   ========================================================= */

.navbar .dropdown-auth .form-label {
    color: #9eb8cc;

    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.navbar .dropdown-auth .form-control {
    height: 40px;

    padding-left: 42px;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(2, 17, 31, 0.95),
            rgba(5, 27, 47, 0.95)
        );

    border: 1px solid rgba(0, 127, 200, 0.35);

    border-radius: 4px;

    box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.4);

    transition: all 0.2s ease;
}

.navbar .dropdown-auth .form-control:focus {
    color: #ffffff;

    background: rgba(3, 24, 43, 1);

    border-color: #00aaff;

    box-shadow:
        0 0 0 2px rgba(0, 160, 255, 0.08),
        0 0 12px rgba(0, 153, 255, 0.15);
}

.navbar .dropdown-auth .form-control::placeholder {
    color: #58758b;
}


/* Ícones dos inputs */
.navbar .dropdown-auth .input-container {
    position: relative;
}

.navbar .dropdown-auth .input-container > .icon {
    position: absolute;

    left: 05px;
    bottom: 0;

    height: 40px;

    display: flex;
    align-items: center;

    color: #168ed0;

    z-index: 2;
}

.navbar .dropdown-auth .input-container svg {
    width: 14px;
}


/* Esqueceu senha */
.navbar .dropdown-auth .text-sm {
    color: #3ebfff;

    font-size: 10px;

    transition: color 0.2s ease;
}

.navbar .dropdown-auth .text-sm:hover {
    color: #ffffff;
}


/* =========================================================
   BOTÕES DO LOGIN
   ========================================================= */

.navbar .dropdown-auth button.btn-primary {
    height: 40px;

    background:
        linear-gradient(
            180deg,
            #078fd9,
            #0563a0
        );

    border: 1px solid #12aaff;

    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;

    box-shadow:
        0 0 12px rgba(0, 153, 255, 0.18);

    transition: all 0.25s ease;
}

.navbar .dropdown-auth button.btn-primary:hover {
    background:
        linear-gradient(
            180deg,
            #12aef2,
            #0874b7
        );

    box-shadow:
        0 0 18px rgba(0, 168, 255, 0.4);
}


/* Cadastro */
.navbar .dropdown-auth .btn-secondary {
    height: 40px;

    color: #b9d7e9;

    background:
        linear-gradient(
            180deg,
            rgb(8 159 27 / 90%),
            rgb(26 204 133 / 90%)
        );

    border: 1px solid rgba(75, 139, 174, 0.35);

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
}

.navbar .dropdown-auth .btn-secondary:hover {
    color: #ffffff;

    border-color: #168ed0;

    background: rgba(0, 119, 190, 0.18);
}


/* Divisor */
.navbar .dropdown-auth .divisor {
    margin: 15px 0 10px;

    color: #607f94;

    font-size: 10px;
    text-align: center;

    text-transform: uppercase;
}

.navbar .dropdown-auth .divisor::before,
.navbar .dropdown-auth .divisor::after {
    content: "";
}


/* =========================================================
   BOTÃO MOBILE
   ========================================================= */

.navbar-toggle {
    width: 40px;
    height: 38px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            180deg,
            #087ec1,
            #064e7d
        ) !important;

    border: 1px solid rgba(0, 180, 255, 0.5) !important;

    box-shadow:
        0 0 10px rgba(0, 150, 255, 0.2);
}

.navbar-toggle .material-symbols-outlined {
    font-size: 22px;
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 991px) {

    .navbar {
        height: 58px;
    }

    .navbar .navbar-collapse {
        position: absolute;

        top: 58px;
        left: 0;
        right: 0;

        padding: 10px;

        background:
            linear-gradient(
                145deg,
                rgba(3, 19, 36, 0.99),
                rgba(1, 8, 19, 0.99)
            );

        border-bottom: 1px solid rgba(0, 150, 255, 0.35);

        box-shadow:
            0 15px 30px rgba(0,0,0,0.7);
    }

    .navbar .navbar-nav {
        height: auto;
        align-items: stretch;
        gap: 2px;
    }

    .navbar .nav-item {
        height: auto;
    }

    .navbar .nav-link {
        height: 42px;
        padding: 0 14px !important;
    }

    .navbar .nav-link::after {
        left: 0;
        transform: none;
    }

    .navbar .nav-link:hover::after {
        width: 100%;
    }

    .navbar .dropdown-menu {
        margin-top: 0 !important;
        border: 0;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.2);
    }
}


@media (max-width: 480px) {

    .navbar .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .navbar-language {
        margin-left: 4px;
    }

    .navbar-auth {
        margin-left: 4px;
    }

    .navbar-auth > .btn-header {
        padding: 0 10px;
    }

    .navbar .dropdown-auth {
        position: fixed !important;

        top: 62px;
        left: 10px;
        right: 10px;

        width: auto;
    }
}
/* =========================================================
   MU ARISE - BOTÕES PRINCIPAIS
   DOWNLOAD / CADASTRO / GUIAS
   ========================================================= */

.button,
.button1,
.button2 {
    position: relative;
    width: 290px;
    height: 82px;
    margin: -1px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(77, 190, 255, 0.45);
    border-radius: 5px;
    overflow: hidden;

    cursor: pointer;

    font-family: "Rajdhani", "Roboto", sans-serif;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


/* =========================================================
   TEXTO
   ========================================================= */

.button__text,
.button__text1,
.button__text2 {

    width: 115px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #eaf8ff;

    font-size: 13px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 1px;

    text-shadow:
        0 1px 3px #000;

    z-index: 2;

    transition: all .25s ease;
}


/* =========================================================
   ÍCONE
   ========================================================= */

.button__icon,
.button__icon1,
.button__icon2 {

    position: absolute;

    right: 0;

    width: 55px;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    border-left: 1px solid rgba(255,255,255,.12);

    z-index: 2;

    transition:
        width .25s ease,
        background .25s ease;
}


.button .icon2,
.button1 .icon2,
.button2 .icon2 {

    width: 18px;

    color: #ffffff;

    filter:
        drop-shadow(0 0 5px rgba(0,190,255,.8));

    transition:
        transform .3s ease,
        filter .3s ease;
}


/* =========================================================
   EFEITO DE LUZ
   ========================================================= */

.button::before,
.button1::before,
.button2::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.12),
            transparent
        );

    transform: skewX(-25deg);

    transition: left .6s ease;

    z-index: 1;
}


.button:hover::before,
.button1:hover::before,
.button2:hover::before {
    left: 140%;
}


/* =========================================================
   DOWNLOAD
   ========================================================= */

.button {

    background:
        linear-gradient(
            135deg,
            #063c67 0%,
            #075f96 50%,
            #043554 100%
        );

    border-color: rgba(0,174,255,.65);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 5px 18px rgba(0,0,0,.45),
        0 0 12px rgba(0,145,255,.12);
}


.button .button__icon {

    background:
        linear-gradient(
            180deg,
            rgba(0,174,255,.25),
            rgba(0,92,160,.35)
        );
}


.button:hover {

    transform: translateY(-3px);

    border-color: #48d4ff;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 8px 25px rgba(0,0,0,.55),
        0 0 20px rgba(0,163,255,.35);
}


.button:hover .button__icon {
    width: 62px;
}


.button:hover .icon2 {

    transform: translateY(2px);

    filter:
        drop-shadow(0 0 7px #00c8ff);
}


/* =========================================================
   CADASTRO
   ========================================================= */

.button1 {

    background:
        linear-gradient(
            135deg,
            #16345b 0%,
            #27568a 50%,
            #102b4b 100%
        );

    border-color: rgba(102,178,255,.55);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 5px 18px rgba(0,0,0,.45),
        0 0 12px rgba(72,155,255,.1);
}


.button1 .button__icon1 {

    background:
        linear-gradient(
            180deg,
            rgba(74,166,255,.22),
            rgba(35,94,155,.3)
        );
}


.button1:hover {

    transform: translateY(-3px);

    border-color: #73cfff;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 8px 25px rgba(0,0,0,.55),
        0 0 20px rgba(62,155,255,.3);
}


.button1:hover .button__icon1 {
    width: 62px;
}


.button1:hover .icon2 {

    transform: scale(1.12);

    filter:
        drop-shadow(0 0 8px #61caff);
}


/* =========================================================
   GUIAS
   ========================================================= */

.button2 {

    background:
        linear-gradient(
            135deg,
            #14294b 0%,
            #284b76 50%,
            #0e203b 100%
        );

    border-color: rgba(111,174,255,.5);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 5px 18px rgba(0,0,0,.45),
        0 0 12px rgba(66,137,255,.1);
}


.button2 .button__icon2 {

    background:
        linear-gradient(
            180deg,
            rgba(93,155,255,.2),
            rgba(40,85,145,.3)
        );
}


.button2:hover {

    transform: translateY(-3px);

    border-color: #70caff;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 8px 25px rgba(0,0,0,.55),
        0 0 20px rgba(70,145,255,.3);
}


.button2:hover .button__icon2 {
    width: 62px;
}


.button2:hover .icon2 {

    transform: scale(1.1);

    filter:
        drop-shadow(0 0 8px #72cfff);
}


/* =========================================================
   BRILHO SUPERIOR
   ========================================================= */

.button::after,
.button1::after,
.button2::after {

    content: "";

    position: absolute;

    top: 0;
    left: 15px;
    right: 15px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(140,220,255,.65),
            transparent
        );

    z-index: 3;
}


/* =========================================================
   LINK - REMOVE ESTILO PADRÃO
   ========================================================= */

a:has(.button),
a:has(.button1),
a:has(.button2) {

    text-decoration: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .button,
    .button1,
    .button2 {

        width: 150px;
        height: 48px;

        margin: 4px;
    }

    .button__text,
    .button__text1,
    .button__text2 {

        width: 100px;

        font-size: 11px;
    }

    .button__icon,
    .button__icon1,
    .button__icon2 {

        width: 50px;
    }
}
/* =========================================================
   MU ARISE — SIDEBAR / SALAS PREMIUM
   ========================================================= */

.sidebar {
    position: relative;
    width: 100%;
    padding: 0;
}

/* Caixa principal do título */
.sidebar-title {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 52px;
    margin-bottom: 14px;
    padding: 0 16px;

    background:
        linear-gradient(
            90deg,
            rgba(4, 18, 38, .98),
            rgba(7, 31, 62, .92),
            rgba(4, 18, 38, .98)
        );

    border: 1px solid rgba(38, 128, 255, .35);
    border-left: 3px solid #168cff;
    border-radius: 5px;

    box-shadow:
        0 0 15px rgba(0, 110, 255, .12),
        inset 0 0 20px rgba(0, 80, 160, .08);
    
    overflow: hidden;
}

/* Linha luminosa inferior */
.sidebar-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #168cff,
        #6ec8ff,
        #168cff,
        transparent
    );

    opacity: .8;
}

/* Brilho decorativo */
.sidebar-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;

    width: 60%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(70, 170, 255, .08),
        transparent
    );

    transform: skewX(-25deg);
    animation: sidebarShine 6s infinite;
}

@keyframes sidebarShine {
    0% {
        left: -100%;
    }

    35% {
        left: 150%;
    }

    100% {
        left: 150%;
    }
}


/* =========================================================
   ÍCONE + TEXTO
   ========================================================= */

.sidebar-title .icon-text {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 11px;
}

.sidebar-title .icon {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #45b7ff;

    filter:
        drop-shadow(0 0 4px rgba(35, 157, 255, .8))
        drop-shadow(0 0 10px rgba(35, 157, 255, .35));
}

.sidebar-title .icon svg {
    width: 22px;
    height: 22px;
}

.sidebar-title .text {
    color: #ffffff;

    font-family: "Rajdhani", "Poppins", sans-serif;

    font-size: 18px;
    font-weight: 700;

    letter-spacing: 1.5px;
    text-transform: uppercase;

    text-shadow:
        0 0 8px rgba(60, 170, 255, .45);
}


/* =========================================================
   SERVIDOR
   ========================================================= */

.sidebar .mb-2 {
    position: relative;

    padding: 13px 14px 14px;

    margin-bottom: 10px !important;

    background:
        linear-gradient(
            135deg,
            rgba(5, 20, 39, .97),
            rgba(8, 30, 55, .94)
        );

    border: 1px solid rgba(45, 117, 190, .28);
    border-radius: 5px;

    box-shadow:
        inset 0 0 15px rgba(0, 70, 140, .07),
        0 4px 15px rgba(0, 0, 0, .25);

    transition:
        .25s ease;
}

/* Borda luminosa ao passar o mouse */
.sidebar .mb-2:hover {
    border-color: rgba(45, 156, 255, .55);

    transform: translateY(-2px);

    box-shadow:
        inset 0 0 20px rgba(0, 100, 210, .10),
        0 5px 20px rgba(0, 100, 255, .14);
}


/* =========================================================
   NOME DO SERVIDOR
   ========================================================= */

.sidebar .text-new {
    font-family: "Rajdhani", "Poppins", sans-serif;

    color: #dceeff;

    font-size: 15px;
    font-weight: 600;

    letter-spacing: .6px;
}

/* Nome do servidor */
.sidebar .text-new:first-child {
    color: #ffffff;

    text-shadow:
        0 0 6px rgba(100, 180, 255, .25);
}


/* =========================================================
   STATUS ONLINE
   ========================================================= */

.sidebar .text-success {
    position: relative;

    color: #39e88c !important;

    font-size: 13px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1px;

    text-shadow:
        0 0 6px rgba(30, 255, 130, .65),
        0 0 12px rgba(30, 255, 130, .25);
}

/* Bolinha online */
.sidebar .text-success::before {
    content: "";

    display: inline-block;

    width: 7px;
    height: 7px;

    margin-right: 6px;

    background: #32e77e;

    border-radius: 50%;

    box-shadow:
        0 0 5px #32e77e,
        0 0 10px rgba(50, 231, 126, .7);

    animation: onlinePulse 1.8s infinite;
}

@keyframes onlinePulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .55;
        transform: scale(.8);
    }
}


/* =========================================================
   BARRA DE PROGRESSO
   ========================================================= */

.sidebar .progress {
    position: relative;

    height: 7px;

    margin-top: 10px;

    overflow: hidden;

    background:
        rgba(0, 0, 0, .55);

    border: 1px solid rgba(70, 130, 180, .22);
    border-radius: 20px;

    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, .8);
}


/* Barra preenchida */
.sidebar .progress-bar {
    position: relative;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            #08783d,
            #1fdc78,
            #63ffae
        ) !important;

    border-radius: 20px;

    box-shadow:
        0 0 6px rgba(30, 235, 120, .75),
        0 0 14px rgba(30, 235, 120, .3);

    transition: width .5s ease;
}


/* Brilho passando pela barra */
.sidebar .progress-bar::after {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 50%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .5),
        transparent
    );

    animation: progressShine 3s infinite;
}

@keyframes progressShine {
    0% {
        left: -100%;
    }

    60% {
        left: 130%;
    }

    100% {
        left: 130%;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .sidebar-title {
        min-height: 48px;
        padding: 0 13px;
    }

    .sidebar-title .text {
        font-size: 16px;
    }

    .sidebar-title .icon {
        width: 28px;
        height: 28px;
    }

    .sidebar .mb-2 {
        padding: 12px;
    }

    .sidebar .text-new {
        font-size: 14px;
    }
}
/* =========================================================
   MU ARISE — BOX DE INFORMAÇÕES DO SERVIDOR
   ========================================================= */

.container-new-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 12px;
}

/* CARD */
.container-new-box .new-box {
    position: relative;

    width: 100%;
    min-height: 52px;

    display: flex;
    align-items: center;

    padding: 0 18px;

    background:
        linear-gradient(
            90deg,
            rgba(4, 17, 35, .98),
            rgba(7, 30, 57, .94),
            rgba(4, 17, 35, .98)
        );

    border: 1px solid rgba(45, 119, 190, .28);
    border-left: 3px solid #168cff;

    border-radius: 5px;

    overflow: hidden;

    box-shadow:
        inset 0 0 18px rgba(0, 90, 170, .06),
        0 4px 12px rgba(0, 0, 0, .25);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

/* Linha decorativa */
.container-new-box .new-box::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(35, 145, 255, .7),
        transparent
    );

    opacity: .6;
}

/* Brilho interno */
.container-new-box .new-box::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 60%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(90, 180, 255, .08),
        transparent
    );

    transform: skewX(-25deg);

    transition: left .6s ease;
}

/* Hover */
.container-new-box .new-box:hover {
    transform: translateX(4px);

    border-color: rgba(40, 157, 255, .65);

    box-shadow:
        inset 0 0 20px rgba(0, 110, 220, .10),
        0 5px 20px rgba(0, 110, 255, .15);
}

.container-new-box .new-box:hover::before {
    left: 130%;
}


/* =========================================================
   TEXTO
   ========================================================= */

.container-new-box .new-box p {
    position: relative;
    z-index: 2;

    width: 100%;

    margin: 0;

    color: #dcecff;

    font-family: "Rajdhani", "Poppins", sans-serif;

    font-size: 15px;
    font-weight: 600;

    letter-spacing: .5px;

    line-height: 1.3;

    text-shadow:
        0 0 6px rgba(50, 150, 255, .15);
}

/* Destaque dos valores */
.container-new-box .new-box p::first-line {
    color: #ffffff;
}


/* =========================================================
   CARDS ALTERNADOS
   ========================================================= */

.container-new-box .new-box.second {
    border-left-color: #4a7dff;

    background:
        linear-gradient(
            90deg,
            rgba(6, 18, 40, .98),
            rgba(13, 29, 62, .95),
            rgba(6, 18, 40, .98)
        );
}

.container-new-box .new-box.second:hover {
    border-color: rgba(80, 120, 255, .65);
}


/* =========================================================
   PEQUENO BRILHO NA BORDA
   ========================================================= */

.container-new-box .new-box {
    box-sizing: border-box;
}

.container-new-box .new-box:hover {
    border-left-width: 4px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .container-new-box {
        gap: 7px;
        margin-top: 10px;
    }

    .container-new-box .new-box {
        min-height: 48px;
        padding: 0 14px;
    }

    .container-new-box .new-box p {
        font-size: 14px;
    }
}
/* =========================================================
   MU ARISE — ÚLTIMAS NOTÍCIAS
   ========================================================= */

h1.d-flex.justify-content-between {
    position: relative;

    display: flex !important;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin: 0 0 15px 0 !important;
    padding: 12px 14px 12px 18px;

    color: #ffffff;

    font-family:
        "Rajdhani",
        "Poppins",
        sans-serif;

    font-size: 22px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;

    background:
        linear-gradient(
            90deg,
            rgba(4, 17, 35, .98),
            rgba(7, 31, 60, .94),
            rgba(4, 17, 35, .98)
        );

    border: 1px solid rgba(40, 125, 205, .32);
    border-left: 3px solid #168cff;

    border-radius: 5px;

    box-shadow:
        inset 0 0 20px rgba(0, 90, 180, .06),
        0 4px 15px rgba(0, 0, 0, .25);

    text-shadow:
        0 0 8px rgba(70, 170, 255, .35);

    overflow: hidden;
}


/* Linha luminosa inferior */
h1.d-flex.justify-content-between::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #168cff,
        #66c9ff,
        #168cff,
        transparent
    );

    opacity: .75;
}


/* =========================================================
   BOTÃO "VER MAIS"
   ========================================================= */

h1.d-flex.justify-content-between .btn-more {
    position: relative;
    z-index: 2;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-left: 15px;

    color: #8bcfff;

    background:
        linear-gradient(
            135deg,
            rgba(8, 55, 100, .9),
            rgba(5, 28, 55, .95)
        );

    border: 1px solid rgba(50, 155, 240, .45);
    border-radius: 4px;

    text-decoration: none;

    box-shadow:
        0 0 8px rgba(20, 130, 230, .12),
        inset 0 0 8px rgba(50, 150, 230, .08);

    transition:
        .25s ease;
}


/* Ícone + */
h1.d-flex.justify-content-between .btn-more .material-symbols-outlined {
    font-size: 20px;

    transition:
        transform .25s ease,
        text-shadow .25s ease;
}


/* Hover */
h1.d-flex.justify-content-between .btn-more:hover {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0b6fba,
            #094d87
        );

    border-color: #35aaff;

    transform: translateY(-1px);

    box-shadow:
        0 0 12px rgba(30, 150, 255, .35),
        inset 0 0 10px rgba(80, 190, 255, .12);

    text-shadow:
        0 0 8px #66c9ff;
}


h1.d-flex.justify-content-between .btn-more:hover
.material-symbols-outlined {
    transform: rotate(90deg);
}


/* =========================================================
   BRILHO DECORATIVO
   ========================================================= */

h1.d-flex.justify-content-between::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 50%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(80, 180, 255, .08),
        transparent
    );

    transform: skewX(-25deg);

    animation: newsTitleShine 7s infinite;
}

@keyframes newsTitleShine {

    0% {
        left: -120%;
    }

    30% {
        left: 140%;
    }

    100% {
        left: 140%;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    h1.d-flex.justify-content-between {
        font-size: 18px;

        padding: 10px 11px 10px 14px;

        margin-bottom: 12px !important;
    }

    h1.d-flex.justify-content-between .btn-more {
        width: 31px;
        height: 31px;
    }

    h1.d-flex.justify-content-between
    .btn-more .material-symbols-outlined {
        font-size: 18px;
    }
}
/* =========================================================
   MU ARISE — MELHORES DO CONTINENTE / RANKING
   ========================================================= */

.page-title {
    position: relative;

    width: 100%;

    margin: 0 0 15px 0;
    padding: 12px 18px;

    background:
        linear-gradient(
            90deg,
            rgba(4, 17, 35, .98),
            rgba(10, 31, 58, .95),
            rgba(4, 17, 35, .98)
        );

    border: 1px solid rgba(45, 125, 205, .32);
    border-left: 3px solid #4aa8ff;

    border-radius: 5px;

    box-shadow:
        inset 0 0 20px rgba(0, 100, 200, .06),
        0 4px 15px rgba(0, 0, 0, .25);

    overflow: hidden;
}


/* Linha luminosa inferior */
.page-title::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #168cff,
        #8bd5ff,
        #168cff,
        transparent
    );

    opacity: .8;
}


/* Brilho passando pelo título */
.page-title::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 55%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(100, 190, 255, .09),
        transparent
    );

    transform: skewX(-25deg);

    animation: rankingTitleShine 7s infinite;
}

@keyframes rankingTitleShine {

    0% {
        left: -120%;
    }

    30% {
        left: 140%;
    }

    100% {
        left: 140%;
    }
}


/* =========================================================
   TÍTULO
   ========================================================= */

.page-title h1 {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #ffffff;

    font-family:
        "Rajdhani",
        "Poppins",
        sans-serif;

    font-size: 22px;
    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    text-shadow:
        0 0 8px rgba(70, 170, 255, .4),
        0 0 18px rgba(20, 110, 220, .15);
}


/* =========================================================
   DESTAQUE DO EMOJI 🔝
   ========================================================= */

.page-title h1:first-letter {
    filter:
        drop-shadow(0 0 5px rgba(255, 215, 80, .8));
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .page-title {
        margin-bottom: 12px;
        padding: 10px 14px;
    }

    .page-title h1 {
        font-size: 18px;
    }
}
/* =========================================================
   MU ARISE — EVENTOS / INVASÕES
   ========================================================= */

[data-events-area] {
    position: relative;
    width: 100%;
    margin-top: 15px;
}


/* =========================================================
   ABAS — INVASÃO / EVENTOS
   ========================================================= */

[data-events-area] .nav-pills {
    display: flex;
    gap: 7px;
    padding: 4px;

    background:
        linear-gradient(
            90deg,
            rgba(3, 14, 29, .98),
            rgba(7, 27, 52, .95),
            rgba(3, 14, 29, .98)
        );

    border: 1px solid rgba(40, 119, 190, .3);
    border-radius: 5px;

    box-shadow:
        inset 0 0 15px rgba(0, 80, 160, .06),
        0 4px 12px rgba(0, 0, 0, .25);
}


/* Cada aba */
[data-events-area] .nav-pills .nav-item {
    flex: 1;
    margin: 0;
}


/* Link */
[data-events-area] .nav-pills .nav-link {
    position: relative;

    width: 100%;
    padding: 8px 10px !important;

    color: #7894b1;

    background: transparent;

    border: 1px solid transparent;
    border-radius: 4px;

    font-family: "Rajdhani", "Poppins", sans-serif;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;

    transition: all .25s ease;
}


/* Hover */
[data-events-area] .nav-pills .nav-link:hover {
    color: #d9efff;

    background: rgba(20, 86, 145, .16);

    border-color: rgba(35, 130, 220, .25);

    text-shadow:
        0 0 8px rgba(40, 160, 255, .45);
}


/* Aba ativa */
[data-events-area] .nav-pills .nav-link.active {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(8, 83, 150, .9),
            rgba(13, 129, 213, .72)
        );

    border-color: rgba(60, 170, 255, .65);

    box-shadow:
        0 0 10px rgba(20, 130, 255, .2),
        inset 0 0 12px rgba(80, 190, 255, .12);

    text-shadow:
        0 0 8px rgba(100, 210, 255, .65);
}


/* =========================================================
   ÁREA DOS EVENTOS
   ========================================================= */

[data-events-area] .tab-content2 {
    margin-top: 8px !important;

    padding: 4px 0;
}


/* =========================================================
   CADA EVENTO
   ========================================================= */

[data-events-area] .events-event {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 46px;

    margin-bottom: 7px;
    padding: 8px 10px 8px 14px;

    background:
        linear-gradient(
            90deg,
            rgba(4, 18, 36, .98),
            rgba(7, 30, 56, .94),
            rgba(4, 18, 36, .98)
        );

    border: 1px solid rgba(42, 111, 174, .25);
    border-left: 2px solid #168cff;

    border-radius: 4px;

    overflow: hidden;

    box-shadow:
        inset 0 0 14px rgba(0, 90, 170, .05),
        0 3px 10px rgba(0, 0, 0, .22);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


/* Linha de brilho */
[data-events-area] .events-event::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(30, 145, 255, .55),
        transparent
    );
}


/* Efeito hover */
[data-events-area] .events-event:hover {
    transform: translateX(3px);

    border-color: rgba(40, 150, 255, .55);

    box-shadow:
        inset 0 0 18px rgba(0, 100, 210, .08),
        0 4px 16px rgba(0, 100, 255, .13);
}


/* =========================================================
   NOME DO EVENTO
   ========================================================= */

[data-events-area] .events-event-name {
    min-width: 0;

    padding-right: 10px;
}


[data-events-area] .events-event-name span {
    display: block;

    color: #dceeff;

    font-family: "Rajdhani", "Poppins", sans-serif;

    font-size: 14px;
    font-weight: 600;

    letter-spacing: .35px;

    line-height: 1.25;

    text-shadow:
        0 0 6px rgba(60, 150, 255, .15);
}


/* =========================================================
   CONTADOR
   ========================================================= */

[data-events-area] .events-event-time {
    flex-shrink: 0;
}


/* Remove aparência padrão do Bootstrap */
[data-events-area] .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 72px;

    padding: 5px 8px;

    color: #8fd1ff !important;

    background:
        linear-gradient(
            135deg,
            rgba(5, 35, 67, .95),
            rgba(9, 55, 92, .95)
        ) !important;

    border: 1px solid rgba(45, 142, 220, .4);

    border-radius: 4px;

    font-family: "Rajdhani", "Poppins", sans-serif;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .5px;

    box-shadow:
        0 0 7px rgba(20, 120, 220, .12);

    text-shadow:
        0 0 5px rgba(60, 170, 255, .45);
}


/* =========================================================
   EVENTOS DIFERENTES — DETALHES
   ========================================================= */

/* Invasões */
.events-1 .events-event {
    border-left-color: #24d77b;
}

.events-1 .events-event:hover {
    border-left-color: #4cff9b;

    box-shadow:
        inset 0 0 18px rgba(30, 220, 110, .06),
        0 4px 16px rgba(20, 220, 110, .10);
}


/* Eventos normais */
.events-2 .events-event {
    border-left-color: #168cff;
}


/* =========================================================
   ANIMAÇÃO DISCRETA NO CONTADOR
   ========================================================= */

[data-events-area] .events-event-time .badge {
    animation: eventTimerGlow 3s ease-in-out infinite;
}

@keyframes eventTimerGlow {

    0%,
    100% {
        box-shadow:
            0 0 6px rgba(20, 120, 220, .10);
    }

    50% {
        box-shadow:
            0 0 11px rgba(20, 140, 255, .25);
    }
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 767px) {

    [data-events-area] .nav-pills .nav-link {
        padding: 7px 5px !important;
        font-size: 13px;
    }

    [data-events-area] .events-event {
        min-height: 44px;
        padding: 7px 8px 7px 11px;
    }

    [data-events-area] .events-event-name span {
        font-size: 13px;
    }

    [data-events-area] .badge {
        min-width: 65px;
        padding: 4px 6px;
        font-size: 11px;
    }
}
/* =========================================================
   MU ARISE — TABS DO RANKING
   ========================================================= */

.page-title + .nav.nav-tabs,
.nav.nav-tabs {
    position: relative;

    display: flex;
    flex-wrap: nowrap;

    width: 100%;

    gap: 6px;

    margin: 0 0 14px 0;
    padding: 5px;

    background:
        linear-gradient(
            90deg,
            rgba(3, 14, 29, .98),
            rgba(7, 28, 54, .96),
            rgba(3, 14, 29, .98)
        );

    border: 1px solid rgba(40, 120, 195, .30);

    border-radius: 5px;

    box-shadow:
        inset 0 0 18px rgba(0, 90, 180, .06),
        0 4px 14px rgba(0, 0, 0, .25);

    overflow: hidden;
}


/* Remove borda padrão Bootstrap */
.nav.nav-tabs .nav-item {
    flex: 1;

    margin: 0;

    border: 0;
}


/* =========================================================
   LINKS
   ========================================================= */

.nav.nav-tabs .nav-link {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 42px;

    padding: 7px 10px;

    color: #718ba8;

    background: transparent;

    border: 1px solid transparent !important;
    border-radius: 4px !important;

    font-family:
        "Rajdhani",
        "Poppins",
        sans-serif;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.nav.nav-tabs .nav-link:hover {
    color: #d9efff;

    background:
        linear-gradient(
            135deg,
            rgba(10, 68, 115, .45),
            rgba(8, 38, 72, .65)
        );

    border-color: rgba(45, 145, 225, .25) !important;

    text-shadow:
        0 0 8px rgba(60, 170, 255, .45);
}


/* =========================================================
   ABA ATIVA
   ========================================================= */

.nav.nav-tabs .nav-link.active {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(8, 91, 160, .95),
            rgba(10, 125, 205, .72)
        );

    border-color: rgba(60, 175, 255, .65) !important;

    box-shadow:
        0 0 12px rgba(20, 135, 240, .22),
        inset 0 0 12px rgba(90, 195, 255, .10);

    text-shadow:
        0 0 8px rgba(110, 215, 255, .7);
}


/* Linha inferior da aba ativa */
.nav.nav-tabs .nav-link.active::after {
    content: "";

    position: absolute;

    left: 15%;
    right: 15%;
    bottom: 2px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #66c9ff,
            transparent
        );

    box-shadow:
        0 0 7px rgba(70, 190, 255, .8);
}


/* =========================================================
   EFEITO DE BRILHO
   ========================================================= */

.nav.nav-tabs .nav-link::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 50%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(130, 210, 255, .08),
            transparent
        );

    transform: skewX(-25deg);

    transition: left .5s ease;

    pointer-events: none;
}

.nav.nav-tabs .nav-link:hover::before,
.nav.nav-tabs .nav-link.active::before {
    left: 130%;
}


/* =========================================================
   DESTAQUE INDIVIDUAL DOS RANKINGS
   ========================================================= */

/* Resets */
.nav.nav-tabs .nav-item:nth-child(1) .nav-link.active {
    border-left: 2px solid #168cff !important;
}

/* Master Resets */
.nav.nav-tabs .nav-item:nth-child(2) .nav-link.active {
    border-left: 2px solid #8b6cff !important;
}

/* PK */
.nav.nav-tabs .nav-item:nth-child(3) .nav-link.active {
    border-left: 2px solid #ff4d5d !important;
}

/* Guild */
.nav.nav-tabs .nav-item:nth-child(4) .nav-link.active {
    border-left: 2px solid #e4ad4d !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .nav.nav-tabs {
        gap: 4px;
        padding: 4px;
    }

    .nav.nav-tabs .nav-link {
        min-height: 40px;

        padding: 6px 4px;

        font-size: 11px;

        letter-spacing: .5px;
    }
}


/* Celulares muito pequenos */
@media (max-width: 400px) {

    .nav.nav-tabs .nav-link {
        font-size: 10px;
        letter-spacing: 0;
    }
}
/* =========================================================
   MU ARISE — ÚLTIMAS NOTÍCIAS / POSTS
   ========================================================= */

.posts-post {
    position: relative;

    width: 100%;

    margin-bottom: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(4, 17, 35, .98),
            rgba(7, 29, 55, .95),
            rgba(4, 17, 35, .98)
        );

    border: 1px solid rgba(42, 119, 190, .28);
    border-left: 3px solid #168cff;

    border-radius: 5px;

    overflow: hidden;

    box-shadow:
        inset 0 0 20px rgba(0, 90, 180, .05),
        0 4px 15px rgba(0, 0, 0, .25);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


/* Linha luminosa inferior */
.posts-post::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #168cff,
            #65c8ff,
            #168cff,
            transparent
        );

    opacity: .65;
}


/* Hover */
.posts-post:hover {
    transform: translateY(-2px);

    border-color: rgba(45, 155, 255, .55);

    box-shadow:
        inset 0 0 22px rgba(0, 110, 220, .08),
        0 7px 22px rgba(0, 100, 255, .14);
}


/* =========================================================
   CONTAINER
   ========================================================= */

.posts-post-container {
    position: relative;

    padding: 14px 16px;
}


/* =========================================================
   CABEÇALHO DA NOTÍCIA
   ========================================================= */

.posts-title {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding-bottom: 11px;

    border-bottom: 1px solid rgba(50, 125, 190, .18);
}


/* Área título + badge */
.posts-title > div {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 9px;
}


/* =========================================================
   BADGE DA CATEGORIA
   ========================================================= */

.posts-title .badge {
    flex-shrink: 0;

    padding: 4px 8px;

    border: 1px solid rgba(255, 90, 90, .4);

    border-radius: 3px;

    font-family:
        "Rajdhani",
        "Poppins",
        sans-serif;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .8px;

    text-transform: uppercase;

    box-shadow:
        0 0 8px rgba(180, 0, 0, .18);

    text-shadow:
        0 0 5px rgba(255, 255, 255, .25);
}


/* =========================================================
   TÍTULO
   ========================================================= */

.posts-title a {
    min-width: 0;

    color: #ffffff;

    font-family:
        "Rajdhani",
        "Poppins",
        sans-serif;

    font-size: 17px;
    font-weight: 700;

    letter-spacing: .7px;

    text-decoration: none;

    text-transform: uppercase;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-shadow:
        0 0 7px rgba(60, 165, 255, .2);

    transition:
        color .2s ease,
        text-shadow .2s ease;
}


.posts-title a:hover {
    color: #63c7ff;

    text-shadow:
        0 0 8px rgba(50, 170, 255, .55),
        0 0 16px rgba(30, 120, 255, .2);
}


/* =========================================================
   DATA
   ========================================================= */

.posts-created {
    flex-shrink: 0;

    color: #718ba5;

    font-family:
        "Rajdhani",
        "Poppins",
        sans-serif;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .4px;

    white-space: nowrap;
}


/* =========================================================
   CORPO DA NOTÍCIA
   ========================================================= */

.posts-body {
    position: relative;

    margin-top: 12px;

    color: #aebfd1;

    font-family:
        "Poppins",
        sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.7;

    letter-spacing: .15px;
}


/* Evita os <br> excessivos criarem um espaço gigante */
.posts-body br:first-child {
    display: none;
}


/* Links dentro da notícia */
.posts-body a {
    color: #4db5ff;

    text-decoration: none;

    transition: .2s ease;
}

.posts-body a:hover {
    color: #ffffff;

    text-shadow:
        0 0 7px rgba(50, 170, 255, .5);
}


/* =========================================================
   EFEITO DE BRILHO PASSANDO NO CARD
   ========================================================= */

.posts-post-container::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 45%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(100, 190, 255, .06),
            transparent
        );

    transform: skewX(-25deg);

    pointer-events: none;

    transition: left .7s ease;
}

.posts-post:hover .posts-post-container::before {
    left: 140%;
}


/* =========================================================
   CATEGORIA IMPORTANTE
   ========================================================= */

.posts-post:has(.badge[style*="#a60000"]) {
    border-left-color: #d52f3d;
}

.posts-post:has(.badge[style*="#a60000"])::after {
    background:
        linear-gradient(
            90deg,
            transparent,
            #d52f3d,
            #ff6873,
            #d52f3d,
            transparent
        );
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 767px) {

    .posts-post-container {
        padding: 12px;
    }

    .posts-title {
        align-items: flex-start;
    }

    .posts-title > div {
        align-items: flex-start;
    }

    .posts-title a {
        font-size: 15px;

        white-space: normal;
    }

    .posts-created {
        font-size: 10px;
    }

    .posts-body {
        font-size: 12px;
        line-height: 1.6;
    }

    .posts-title .badge {
        font-size: 9px;
        padding: 3px 6px;
    }
}
/* =========================================================
   FUNDO PRINCIPAL - COLUNA DE CONTEÚDO
   ========================================================= */

.col-lg-9.col-sm-12.shadow-new {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(0, 89, 255, 0.12),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 90%,
            rgba(72, 0, 180, 0.10),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(3, 12, 27, 0.98),
            rgba(4, 17, 38, 0.96),
            rgba(2, 9, 22, 0.98)
        );

    border: 1px solid rgba(0, 102, 255, 0.28);
    border-radius: 14px;

    box-shadow:
        0 0 25px rgba(0, 68, 180, 0.12),
        inset 0 0 35px rgba(0, 65, 150, 0.08);

    padding: 22px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* =========================================================
   EFEITO DE LUZ NO FUNDO
   ========================================================= */

.col-lg-9.col-sm-12.shadow-new::before {
    content: "";
    position: absolute;

    top: -180px;
    left: -180px;

    width: 400px;
    height: 400px;

    background: radial-gradient(
        circle,
        rgba(0, 110, 255, 0.10),
        transparent 70%
    );

    pointer-events: none;
}


/* =========================================================
   SEGUNDA LUZ
   ========================================================= */

.col-lg-9.col-sm-12.shadow-new::after {
    content: "";

    position: absolute;

    bottom: -200px;
    right: -180px;

    width: 420px;
    height: 420px;

    background: radial-gradient(
        circle,
        rgba(76, 0, 255, 0.08),
        transparent 70%
    );

    pointer-events: none;
}


/* =========================================================
   GARANTE QUE O CONTEÚDO FIQUE ACIMA DOS EFEITOS
   ========================================================= */

.col-lg-9.col-sm-12.shadow-new > * {
    position: relative;
    z-index: 2;
}


/* =========================================================
   BORDA LUMINOSA SUTIL
   ========================================================= */

.col-lg-9.col-sm-12.shadow-new {
    transition:
        border-color .3s ease,
        box-shadow .3s ease;
}

.col-lg-9.col-sm-12.shadow-new:hover {
    border-color: rgba(0, 119, 255, 0.42);

    box-shadow:
        0 0 30px rgba(0, 75, 200, 0.16),
        inset 0 0 40px rgba(0, 75, 180, 0.08);
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 991px) {

    .col-lg-9.col-sm-12.shadow-new {
        padding: 16px;
        border-radius: 12px;
    }

}

@media (max-width: 576px) {

    .col-lg-9.col-sm-12.shadow-new {
        padding: 12px;
        border-radius: 10px;
    }

}
/* =========================================================
   TEMPO REAL - RANKING DE PERSONAGENS
   ========================================================= */

.text-new {
    font-family: "Rajdhani", "Poppins", sans-serif;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(0, 110, 255, .45);
}


/* TÍTULO TEMPO REAL */
.col > h3.text-new {
    position: relative;
    margin: 0 0 18px;
    padding: 12px 16px;

    font-size: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(4, 24, 52, .96),
            rgba(2, 11, 27, .96)
        );

    border-left: 3px solid #087cff;
    border-bottom: 1px solid rgba(0, 112, 255, .35);

    border-radius: 7px;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, .35),
        inset 0 0 20px rgba(0, 83, 190, .08);
}


/* =========================================================
   LISTA DE PERSONAGENS
   ========================================================= */

.list-characters {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}


/* =========================================================
   CARD DO PERSONAGEM
   ========================================================= */

.list-characters .character {
    min-width: 0;
}

.list-characters .character .card {
    position: relative;
    height: 100%;
    overflow: hidden;

    background:
        linear-gradient(
            160deg,
            rgba(8, 28, 57, .98),
            rgba(2, 11, 25, .98)
        );

    border: 1px solid rgba(0, 104, 230, .35);
    border-radius: 9px;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, .35),
        inset 0 0 20px rgba(0, 70, 160, .06);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


/* BRILHO NO CARD */

.list-characters .character .card::before {
    content: "";
    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.07),
        transparent
    );

    transform: skewX(-20deg);

    transition: left .6s ease;

    pointer-events: none;
}


/* HOVER */

.list-characters .character .card:hover {
    transform: translateY(-5px);

    border-color: rgba(0, 132, 255, .75);

    box-shadow:
        0 10px 28px rgba(0, 60, 160, .25),
        0 0 18px rgba(0, 106, 255, .14),
        inset 0 0 25px rgba(0, 80, 180, .10);
}

.list-characters .character .card:hover::before {
    left: 140%;
}


/* =========================================================
   HEADER DO CARD
   ========================================================= */

.list-characters .card-header {
    position: relative;
    padding: 10px 6px;
    background:
        linear-gradient(
            180deg,
            rgba(7, 47, 94, .9),
            rgba(4, 23, 49, .95)
        );
    border-bottom: 1px solid rgba(0, 116, 255, .3);
    color: #ffffff;
    font-family: "Rajdhani", sans-serif;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 8px rgba(0, 128, 255, .45);
}


/* =========================================================
   AVATAR
   ========================================================= */

.list-characters .character-avatar {
    padding: 16px 8px 8px;
    background:
        radial-gradient(
            circle,
            rgba(0, 91, 210, .12),
            transparent 70%
        );
}


/* IMAGEM */

.list-characters .character-avatar img {
    /* width: 60px; */
    height: 60px;
    object-fit: contain;
    /* border-radius: 50%; */
    border: 2px solid rgba(0, 116, 255, .45);
    padding: 3px;
    background: rgba(1, 12, 28, .8);
    box-shadow:
        0 0 12px rgba(0, 105, 255, .3);
    transition: .25s ease;
}

.list-characters .character .card:hover .character-avatar img {
    border-color: rgba(0, 160, 255, .85);

    box-shadow:
        0 0 18px rgba(0, 126, 255, .55);

    transform: scale(1.06);
}


/* =========================================================
   CORPO
   ========================================================= */

.list-characters .card-body {
    padding: 10px 5px;

    color: #b9c9df;

    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 14px;

    background: rgba(1, 10, 23, .35);
}

.list-characters .card-body strong {
    color: #ffffff;

    font-weight: 600;
}

.list-characters .card-body {
    text-shadow: 0 0 5px rgba(0, 80, 180, .2);
}


/* =========================================================
   RODAPÉ / BOTÃO
   ========================================================= */

.list-characters .card-footer {
    background: rgba(1, 9, 20, .65);

    border-top: 1px solid rgba(0, 100, 220, .2);
}


/* BOTÃO VER PERFIL */

.list-characters .card-footer .btn-primary {
    position: relative;

    border: 1px solid rgba(0, 126, 255, .6);

    border-radius: 5px;

    background:
        linear-gradient(
            135deg,
            #075bb5,
            #063777
        );

    color: #ffffff;

    font-family: "Rajdhani", sans-serif;
    font-size: 14px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .5px;

    box-shadow:
        0 0 10px rgba(0, 102, 255, .18);

    transition: all .25s ease;
}

.list-characters .card-footer .btn-primary:hover {
    background:
        linear-gradient(
            135deg,
            #0879e8,
            #06428e
        );

    border-color: #1590ff;

    transform: translateY(-2px);

    box-shadow:
        0 0 15px rgba(0, 126, 255, .45);
}


/* =========================================================
   PRIMEIRO COLOCADO - DESTAQUE
   ========================================================= */

.list-characters .character:first-child .card {
    border-color: rgba(0, 145, 255, .65);

    box-shadow:
        0 0 18px rgba(0, 115, 255, .18),
        inset 0 0 25px rgba(0, 105, 255, .08);
}

.list-characters .character:first-child .card-header {
    background:
        linear-gradient(
            180deg,
            rgba(0, 92, 190, .9),
            rgba(3, 30, 63, .95)
        );
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 1200px) {

    .list-characters {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media (max-width: 768px) {

    .list-characters {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

}

@media (max-width: 480px) {

    .list-characters {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .list-characters .card-header {
        font-size: 14px;
    }

    .list-characters .character-avatar {
        padding: 10px 5px 5px;
    }

}
/* =========================================================
   MENU RANKINGS - PAINEL LATERAL
   ========================================================= */

#panel-rankings .list-group {
    position: relative;
    overflow: hidden;

    padding: 6px;

    background:
        linear-gradient(
            145deg,
            rgba(5, 22, 46, .97),
            rgba(2, 10, 24, .98)
        );

    border: 1px solid rgba(0, 102, 230, .28);
    border-radius: 10px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .35),
        inset 0 0 25px rgba(0, 70, 160, .06);
}


/* =========================================================
   ITENS
   ========================================================= */

#panel-rankings .list-group-item {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 45px;
    margin-bottom: 4px;
    padding: 10px 14px;

    background:
        linear-gradient(
            90deg,
            rgba(7, 27, 53, .85),
            rgba(3, 15, 32, .85)
        );

    border: 1px solid transparent;
    border-radius: 6px !important;

    color: #aebed3;

    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;

    text-decoration: none;

    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}


/* =========================================================
   BARRA AZUL LATERAL
   ========================================================= */

#panel-rankings .list-group-item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 3px;
    height: 0;

    transform: translateY(-50%);

    background: #087cff;

    border-radius: 0 4px 4px 0;

    box-shadow:
        0 0 10px rgba(0, 126, 255, .8);

    transition: height .25s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

#panel-rankings .list-group-item:hover {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(5, 62, 121, .85),
            rgba(4, 25, 53, .9)
        );

    border-color: rgba(0, 113, 255, .35);

    transform: translateX(4px);

    box-shadow:
        0 0 14px rgba(0, 92, 220, .12),
        inset 0 0 15px rgba(0, 90, 200, .06);
}

#panel-rankings .list-group-item:hover::before {
    height: 70%;
}


/* =========================================================
   ITEM ATIVO
   ========================================================= */

#panel-rankings .list-group-item.active {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(0, 91, 190, .95),
            rgba(4, 38, 78, .95)
        );

    border: 1px solid rgba(0, 137, 255, .55);

    box-shadow:
        0 0 16px rgba(0, 105, 255, .20),
        inset 0 0 18px rgba(0, 125, 255, .10);

    text-shadow:
        0 0 8px rgba(255, 255, 255, .25);
}

#panel-rankings .list-group-item.active::before {
    height: 75%;
}


/* =========================================================
   PEQUENO BRILHO NOS ITENS
   ========================================================= */

#panel-rankings .list-group-item::after {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 60%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .05),
        transparent
    );

    transform: skewX(-20deg);

    transition: left .5s ease;

    pointer-events: none;
}

#panel-rankings .list-group-item:hover::after {
    left: 130%;
}


/* =========================================================
   ÚLTIMO ITEM
   ========================================================= */

#panel-rankings .list-group-item:last-child {
    margin-bottom: 0;
}


/* =========================================================
   DIFERENCIAÇÃO DOS RANKINGS
   ========================================================= */

/* PK */

#panel-rankings .list-group-item[href*="/pk"].active {
    background:
        linear-gradient(
            90deg,
            rgba(125, 25, 35, .9),
            rgba(48, 10, 18, .95)
        );

    border-color: rgba(220, 55, 65, .45);

    box-shadow:
        0 0 15px rgba(190, 30, 40, .15);
}

#panel-rankings .list-group-item[href*="/pk"].active::before {
    background: #ff3b48;
}


/* GUILD */

#panel-rankings .list-group-item[href*="/guild"].active {
    background:
        linear-gradient(
            90deg,
            rgba(118, 84, 15, .9),
            rgba(48, 35, 8, .95)
        );

    border-color: rgba(220, 170, 45, .45);

    box-shadow:
        0 0 15px rgba(210, 160, 30, .15);
}

#panel-rankings .list-group-item[href*="/guild"].active::before {
    background: #e8b83d;
}


/* MASTER RESET */

#panel-rankings .list-group-item[href*="master-resets"].active {
    background:
        linear-gradient(
            90deg,
            rgba(72, 35, 145, .9),
            rgba(29, 15, 65, .95)
        );

    border-color: rgba(145, 95, 255, .5);

    box-shadow:
        0 0 15px rgba(115, 65, 220, .18);
}

#panel-rankings .list-group-item[href*="master-resets"].active::before {
    background: #a875ff;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 991px) {

    #panel-rankings .list-group {
        margin-top: 8px;
    }

    #panel-rankings .list-group-item {
        min-height: 42px;
        font-size: 15px;
    }

}
/* =========================================================
   BREADCRUMB - NAVEGAÇÃO
   ========================================================= */

nav[aria-label="breadcrumb"] {
    margin-bottom: 18px;
}


/* CONTAINER */

nav[aria-label="breadcrumb"] .breadcrumb {
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;

    min-height: 44px;
    margin: 0;
    padding: 8px 16px;

    background:
        linear-gradient(
            135deg,
            rgba(5, 25, 52, .96),
            rgba(2, 11, 25, .98)
        );

    border: 1px solid rgba(0, 104, 230, .30);
    border-left: 3px solid #087cff;

    border-radius: 7px;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, .30),
        inset 0 0 20px rgba(0, 80, 180, .06);
}


/* =========================================================
   ITENS
   ========================================================= */

nav[aria-label="breadcrumb"] .breadcrumb-item {
    position: relative;

    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 600;

    color: #7f94ad;

    letter-spacing: .3px;
}


/* LINKS */

nav[aria-label="breadcrumb"] .breadcrumb-item a {
    color: #a9bfd8;

    text-decoration: none;

    transition:
        color .2s ease,
        text-shadow .2s ease;
}

nav[aria-label="breadcrumb"] .breadcrumb-item a:hover {
    color: #ffffff;

    text-shadow:
        0 0 8px rgba(0, 126, 255, .65);
}


/* =========================================================
   SEPARADOR
   ========================================================= */

nav[aria-label="breadcrumb"] .breadcrumb-item + .breadcrumb-item::before {
    content: "›";

    padding: 0 10px;

    color: #087cff;

    font-size: 20px;
    font-weight: 700;

    text-shadow:
        0 0 8px rgba(0, 126, 255, .55);
}


/* =========================================================
   PÁGINA ATUAL
   ========================================================= */

nav[aria-label="breadcrumb"] .breadcrumb-item.active {
    color: #ffffff;

    font-weight: 700;

    text-shadow:
        0 0 8px rgba(0, 119, 255, .35);
}


/* =========================================================
   EFEITO DE BRILHO
   ========================================================= */

nav[aria-label="breadcrumb"] .breadcrumb::after {
    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 45%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .045),
        transparent
    );

    transform: skewX(-20deg);

    animation: breadcrumbShine 7s ease-in-out infinite;

    pointer-events: none;
}

@keyframes breadcrumbShine {

    0% {
        left: -100%;
    }

    35%,
    100% {
        left: 140%;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 576px) {

    nav[aria-label="breadcrumb"] .breadcrumb {
        min-height: 40px;
        padding: 7px 11px;
    }

    nav[aria-label="breadcrumb"] .breadcrumb-item {
        font-size: 14px;
    }

    nav[aria-label="breadcrumb"]
    .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 6px;
    }

}
/* =========================================================
   RANKING - TABELA PRINCIPAL
   ========================================================= */

.table {
    width: 100%;
    margin-bottom: 0;

    border-collapse: separate;
    border-spacing: 0 5px;

    color: #c5d4e8;

    font-family: "Rajdhani", "Poppins", sans-serif;
}


/* =========================================================
   CABEÇALHO
   ========================================================= */

.table thead.table-dark {
    background: transparent;
}

.table thead.table-dark tr {
    background:
        linear-gradient(
            90deg,
            rgba(5, 35, 72, .98),
            rgba(3, 17, 36, .98)
        );
}

.table thead.table-dark th {
    padding: 14px 12px;

    background:
        linear-gradient(
            180deg,
            rgba(7, 48, 91, .98),
            rgba(3, 22, 45, .98)
        ) !important;

    border: 0;
    border-top: 1px solid rgba(0, 119, 255, .35);
    border-bottom: 1px solid rgba(0, 119, 255, .30);

    color: #ffffff !important;

    font-size: 15px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .8px;

    text-shadow:
        0 0 8px rgba(0, 126, 255, .35);
}

.table thead.table-dark th:first-child {
    border-radius: 7px 0 0 7px;
}

.table thead.table-dark th:last-child {
    border-radius: 0 7px 7px 0;
}


/* =========================================================
   LINHAS
   ========================================================= */

.table tbody tr {
    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(5, 23, 46, .96),
            rgba(2, 12, 27, .96)
        );

    transition:
        transform .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}


/* células */

.table tbody td {
    padding: 11px 12px;

    border: 0 !important;

    color: #aebfd3;

    vertical-align: middle;

    font-size: 15px;
}


/* arredondamento */

.table tbody td:first-child {
    border-radius: 7px 0 0 7px;
}

.table tbody td:last-child {
    border-radius: 0 7px 7px 0;
}


/* =========================================================
   HOVER
   ========================================================= */

.table tbody tr:hover {
    transform: translateX(3px);

    background:
        linear-gradient(
            90deg,
            rgba(7, 54, 104, .98),
            rgba(4, 25, 52, .98)
        );

    box-shadow:
        0 4px 15px rgba(0, 76, 180, .16),
        inset 3px 0 0 rgba(0, 126, 255, .8);
}

.table tbody tr:hover td {
    color: #ffffff;
}


/* =========================================================
   NÚMERO DO RANKING
   ========================================================= */

.table tbody td:first-child {
    width: 55px;

    color: #7fa3c9;

    font-size: 17px;
    font-weight: 700;

    text-align: center;
}


/* =========================================================
   PERSONAGEM
   ========================================================= */

.table tbody td a {
    color: #e1ecfa;

    font-size: 16px;
    font-weight: 700;

    text-decoration: none;

    transition:
        color .2s ease,
        text-shadow .2s ease;
}

.table tbody td a:hover {
    color: #45a9ff;

    text-shadow:
        0 0 10px rgba(0, 137, 255, .65);
}


/* BANDEIRA */

.table tbody td img {
    margin-left: 5px;

    vertical-align: middle;

    border-radius: 2px;

    box-shadow:
        0 0 5px rgba(0, 110, 255, .15);
}


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

.table .badge {
    display: inline-flex;
    align-items: center;

    margin-left: 5px;

    padding: 3px 7px;

    border-radius: 4px;

    font-family: "Rajdhani", sans-serif;
    font-size: 11px;
    font-weight: 700;

    letter-spacing: .4px;

    border: 1px solid rgba(255,255,255,.10);

    box-shadow:
        0 0 7px rgba(0, 0, 0, .25);
}


/* VIP DONATE */

.table .badge.bg-primary {
    background:
        linear-gradient(
            135deg,
            #075eb8,
            #06366e
        ) !important;

    border-color: rgba(0, 139, 255, .45);
}


/* VIP GOLD */

.table .badge.bg-primary:has(+ .badge) {
    /* mantém compatibilidade sem alterar o HTML */
}


/* STAFF */

.table .badge.bg-primary {
    text-shadow:
        0 0 5px rgba(255,255,255,.15);
}


/* ONLINE */

.table .badge.bg-success {
    background:
        linear-gradient(
            135deg,
            #168d4d,
            #075b31
        ) !important;

    border-color: rgba(40, 220, 120, .45);

    box-shadow:
        0 0 8px rgba(20, 190, 90, .25);
}


/* =========================================================
   PRIMEIROS COLOCADOS
   ========================================================= */

/* 1º */

.table tbody tr.top-1 {
    background:
        linear-gradient(
            90deg,
            rgba(105, 77, 12, .35),
            rgba(37, 29, 7, .90)
        );

    box-shadow:
        inset 3px 0 0 #d8ad38,
        0 0 15px rgba(210, 160, 30, .08);
}

.table tbody tr.top-1 td:first-child {
    color: #f0c94c;

    font-size: 19px;

    text-shadow:
        0 0 10px rgba(230, 180, 45, .65);
}


/* 2º */

.table tbody tr.top-2 {
    box-shadow:
        inset 3px 0 0 #aeb8c5;
}

.table tbody tr.top-2 td:first-child {
    color: #cbd3dc;
}


/* 3º */

.table tbody tr.top-3 {
    box-shadow:
        inset 3px 0 0 #a96c42;
}

.table tbody tr.top-3 td:first-child {
    color: #c98254;
}


/* =========================================================
   PONTUAÇÃO
   ========================================================= */

.table tbody td:nth-child(5) {
    color: #6dbaff;

    font-weight: 700;

    text-shadow:
        0 0 7px rgba(0, 126, 255, .25);
}


/* =========================================================
   GUILDA
   ========================================================= */

.table tbody td:nth-child(4) {
    color: #91a8c2;

    font-weight: 600;
}


/* =========================================================
   RANK STAYED
   ========================================================= */

.table .rank-stayed {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 28px;
    min-height: 24px;

    color: #657b92;

    font-weight: 700;

    background: rgba(255,255,255,.025);

    border-radius: 4px;
}


/* =========================================================
   LINHA DE SEPARAÇÃO SUTIL
   ========================================================= */

.table tbody tr td {
    border-bottom: 1px solid rgba(0, 100, 210, .08) !important;
}


/* =========================================================
   SCROLL NO CELULAR
   ========================================================= */

@media (max-width: 768px) {

    .table {
        min-width: 700px;
    }

    .table thead.table-dark th,
    .table tbody td {
        padding: 9px 10px;
        font-size: 14px;
    }

    .table tbody td a {
        font-size: 15px;
    }

}


/* =========================================================
   CONTAINER DA TABELA
   ========================================================= */

.table-responsive {
    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            rgba(3, 16, 34, .55),
            rgba(1, 8, 19, .55)
        );

    border: 1px solid rgba(0, 91, 190, .16);

    padding: 7px;

    box-shadow:
        inset 0 0 25px rgba(0, 65, 150, .04);
}
/* =========================================================
   PAINEL DE USUÁRIO — TÍTULO
   ========================================================= */

h3:has(sup) {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0 0 22px;
    padding: 14px 18px 14px 20px;

    color: #ffffff;
    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;

    background:
        linear-gradient(
            90deg,
            rgba(3, 23, 48, .98),
            rgba(5, 30, 58, .88),
            rgba(3, 18, 38, .96)
        );

    border-left: 4px solid #168cff;
    border-bottom: 1px solid rgba(22, 140, 255, .45);
    border-radius: 7px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .35),
        inset 0 0 20px rgba(0, 91, 180, .10),
        0 0 12px rgba(0, 119, 255, .08);

    overflow: hidden;
}

/* brilho passando pelo título */
h3:has(sup)::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );

    transform: skewX(-20deg);
    animation: painelUserShine 5s ease-in-out infinite;
}

/* Minha conta */
h3:has(sup) sup {
    position: relative;
    z-index: 2;

    margin-top: 3px;

    color: #72bcff;
    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 5px;
    text-transform: none;

    opacity: .9;

    padding: 4px 9px;

    box-shadow:
        inset 0 0 8px rgba(0, 120, 255, .08);
}

/* pequeno brilho no texto principal */
h3:has(sup) {
    text-shadow:
        0 0 8px rgba(80, 170, 255, .25);
}

@keyframes painelUserShine {
    0%, 65% {
        left: -120%;
    }

    85%, 100% {
        left: 130%;
    }
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 576px) {

    h3:has(sup) {
        padding: 12px 14px;
        font-size: 21px;
        gap: 8px;
    }

    h3:has(sup) sup {
        font-size: 12px;
        padding: 3px 7px;
    }
}
/* =========================================================
   MU ARISE — FOOTER PREMIUM
   ========================================================= */

footer {
    position: relative;
    width: 100%;
    margin-top: 60px;
    padding: 45px 5% 25px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0, 110, 255, .12),
            transparent 40%
        ),
        radial-gradient(
            circle at 10% 100%,
            rgba(60, 30, 160, .08),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #020d1b 0%,
            #010812 100%
        );

    border-top: 1px solid rgba(30, 130, 230, .45);

    box-shadow:
        0 -10px 35px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(70, 170, 255, .08);

    overflow: hidden;

    font-family: "Rajdhani", "Poppins", sans-serif;
}

/* Linha luminosa superior */
footer::before {
    content: "";
    position: absolute;

    top: 0;
    left: 10%;
    right: 10%;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #168cff,
        #66c5ff,
        #168cff,
        transparent
    );

    box-shadow:
        0 0 10px rgba(22, 140, 255, .8),
        0 0 25px rgba(22, 140, 255, .35);
}

/* Luz ambiental */
footer::after {
    content: "";

    position: absolute;
    width: 300px;
    height: 300px;

    left: 50%;
    top: -250px;

    transform: translateX(-50%);

    background: rgba(0, 105, 255, .08);
    border-radius: 50%;
    filter: blur(70px);

    pointer-events: none;
}


/* =========================================================
   CONTEÚDO
   ========================================================= */

.footer-content {
    position: relative;
    z-index: 2;

    max-width: 1250px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 70px;
}


/* =========================================================
   COLUNAS
   ========================================================= */

.footer-column {
    position: relative;
}

.footer-column::after {
    content: "";

    position: absolute;
    top: 5px;
    right: -35px;

    width: 1px;
    height: 150px;

    background: linear-gradient(
        180deg,
        transparent,
        rgba(40, 130, 220, .25),
        transparent
    );
}

.footer-column:last-child::after {
    display: none;
}


/* =========================================================
   TÍTULO
   ========================================================= */

.footer-title {
    position: relative;

    margin-bottom: 18px;
    padding-bottom: 10px;
}

.footer-title h3 {
    margin: 0;

    color: #ffffff;

    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;

    text-shadow:
        0 0 8px rgba(70, 170, 255, .25);
}

/* Linha abaixo do título */
.footer-title::after {
    content: "";

    display: block;

    width: 45px;
    height: 2px;

    margin-top: 9px;

    background: linear-gradient(
        90deg,
        #168cff,
        transparent
    );

    box-shadow:
        0 0 8px rgba(22, 140, 255, .65);
}


/* =========================================================
   LINKS
   ========================================================= */

.footer-column ul {
    list-style: none;

    margin: 0;
    padding: 0;
}

.footer-column li {
    margin-bottom: 9px;
}

.footer-column li a {
    position: relative;

    display: inline-flex;
    align-items: center;

    padding-left: 15px;

    color: #8faec8;

    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 500;

    text-decoration: none;

    transition:
        color .25s ease,
        transform .25s ease,
        text-shadow .25s ease;
}

/* Pequeno indicador */
.footer-column li a::before {
    content: "›";

    position: absolute;
    left: 0;

    color: #168cff;

    font-size: 18px;
    font-weight: 700;

    transition:
        transform .25s ease,
        text-shadow .25s ease;
}

.footer-column li a:hover {
    color: #ffffff;

    transform: translateX(5px);

    text-shadow:
        0 0 8px rgba(50, 160, 255, .55);
}

.footer-column li a:hover::before {
    transform: translateX(3px);

    text-shadow:
        0 0 8px rgba(22, 140, 255, .9);
}


/* =========================================================
   DIVISOR
   ========================================================= */

footer .divider {
    position: relative;
    z-index: 2;

    max-width: 1250px;

    margin: 35px auto 22px;

    border: 0;

    height: 1px;

    opacity: 1;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(40, 130, 220, .45),
        rgba(80, 170, 255, .65),
        rgba(40, 130, 220, .45),
        transparent
    );

    box-shadow:
        0 0 8px rgba(22, 140, 255, .15);
}


/* =========================================================
   CRÉDITOS
   ========================================================= */

.footer-credits {
    position: relative;
    z-index: 2;

    max-width: 1250px;
    margin: 0 auto;

    text-align: center;
}

.footer-credits p {
    margin: 0 0 10px;

    color: #9ab4cc;

    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 500;

    line-height: 1.7;
}

.footer-credits p a {
    color: #4daeff;

    font-weight: 700;
    text-decoration: none;

    text-shadow:
        0 0 8px rgba(45, 160, 255, .4);

    transition: .25s ease;
}

.footer-credits p a:hover {
    color: #ffffff;

    text-shadow:
        0 0 12px rgba(50, 170, 255, .8);
}


/* =========================================================
   DISCLAIMER
   ========================================================= */

.footer-credits small {
    display: block;

    max-width: 950px;

    margin: 0 auto;

    color: rgba(135, 161, 184, .65);

    font-family: "Poppins", sans-serif;
    font-size: 10px;

    line-height: 1.7;
}


/* =========================================================
   EFEITO HOVER NAS COLUNAS
   ========================================================= */

.footer-column {
    transition: transform .3s ease;
}

.footer-column:hover {
    transform: translateY(-2px);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    footer {
        margin-top: 40px;
        padding: 35px 22px 22px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-column::after {
        display: none;
    }

    .footer-title {
        margin-bottom: 12px;
    }

    .footer-title h3 {
        font-size: 18px;
    }

    .footer-column li {
        margin-bottom: 7px;
    }

    footer .divider {
        margin: 28px auto 18px;
    }

    .footer-credits p {
        font-size: 13px;
    }

    .footer-credits small {
        font-size: 9px;
        line-height: 1.6;
    }
}
/* =========================================================
   MU ARISE — MENU DE CATEGORIAS DOS GUIAS
   ========================================================= */

#panel-categories {
    position: relative;
}

/* Container */
#panel-categories .list-group {
    position: relative;

    padding: 7px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0, 115, 255, .10),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            rgba(2, 17, 34, .98),
            rgba(3, 27, 51, .96)
        );

    border: 1px solid rgba(30, 125, 215, .38);
    border-radius: 9px;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .28),
        inset 0 0 18px rgba(0, 90, 180, .06);
}

/* Linha luminosa */
#panel-categories .list-group::before {
    content: "";

    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #168cff,
        transparent
    );

    box-shadow:
        0 0 8px rgba(22, 140, 255, .7);
}


/* =========================================================
   ITENS
   ========================================================= */

#panel-categories .list-group-item {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 48px;

    margin: 3px 0;
    padding: 11px 14px 11px 19px;

    color: #91aec7 !important;

    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 600;

    letter-spacing: .3px;

    background: transparent !important;

    border: 0 !important;
    border-radius: 5px !important;

    overflow: hidden;

    transition:
        color .25s ease,
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

/* Barra lateral */
#panel-categories .list-group-item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 8px;
    bottom: 8px;

    width: 3px;

    background: rgba(22, 140, 255, .25);

    border-radius: 0 3px 3px 0;

    transition:
        background .25s ease,
        box-shadow .25s ease;
}

/* Pequeno marcador */
#panel-categories .list-group-item::after {
    content: "›";

    position: absolute;
    left: 7px;

    color: rgba(45, 145, 230, .45);

    font-size: 18px;
    font-weight: 700;

    transition:
        color .25s ease,
        transform .25s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

#panel-categories .list-group-item:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            90deg,
            rgba(12, 93, 170, .24),
            rgba(8, 55, 105, .12),
            transparent
        ) !important;

    transform: translateX(4px);

    box-shadow:
        inset 0 0 15px rgba(0, 100, 220, .06),
        0 0 12px rgba(0, 110, 255, .06);
}

#panel-categories .list-group-item:hover::before {
    background: #168cff;

    box-shadow:
        0 0 9px rgba(22, 140, 255, .85);
}

#panel-categories .list-group-item:hover::after {
    color: #4db0ff;

    transform: translateX(3px);

    text-shadow:
        0 0 8px rgba(40, 155, 255, .8);
}


/* =========================================================
   ITEM ATIVO
   ========================================================= */

#panel-categories .list-group-item.active {
    color: #ffffff !important;

    background:
        linear-gradient(
            90deg,
            rgba(8, 103, 190, .38),
            rgba(8, 57, 105, .22),
            rgba(3, 30, 58, .12)
        ) !important;

    border: 1px solid rgba(35, 145, 235, .25) !important;

    box-shadow:
        inset 0 0 18px rgba(0, 115, 255, .08),
        0 0 14px rgba(0, 100, 220, .10);

    transform: translateX(2px);
}

/* Barra azul do ativo */
#panel-categories .list-group-item.active::before {
    top: 5px;
    bottom: 5px;

    background:
        linear-gradient(
            180deg,
            #55bdff,
            #087ee0
        );

    box-shadow:
        0 0 10px rgba(35, 155, 255, .9);
}

/* Marcador ativo */
#panel-categories .list-group-item.active::after {
    color: #65c0ff;

    text-shadow:
        0 0 9px rgba(50, 170, 255, .9);
}


/* =========================================================
   PRIMEIRO ITEM — EVENTOS
   ========================================================= */

#panel-categories .list-group-item:first-child.active {
    background:
        linear-gradient(
            90deg,
            rgba(0, 115, 220, .38),
            rgba(5, 50, 95, .20),
            transparent
        ) !important;
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 991px) {

    #panel-categories .list-group {
        margin-top: 8px;
    }

    #panel-categories .list-group-item {
        min-height: 46px;
        font-size: 14px;
    }
}

@media (max-width: 576px) {

    #panel-categories .list-group {
        padding: 5px;
        border-radius: 7px;
    }

    #panel-categories .list-group-item {
        min-height: 44px;
        padding-left: 18px;
    }
}
/* =========================================================
   MU ARISE — LISTA DE GUIAS
   ========================================================= */

#list-tab {
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 7px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0, 115, 255, .10),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            rgba(2, 17, 34, .97),
            rgba(3, 27, 51, .95)
        );

    border: 1px solid rgba(30, 125, 215, .35);
    border-radius: 10px;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .30),
        inset 0 0 25px rgba(0, 90, 180, .05);
}


/* =========================================================
   CARDS DOS GUIAS
   ========================================================= */

#list-tab > a.list-group-item {
    position: relative;

    min-height: 58px;

    padding: 15px 17px 15px 21px;

    display: flex !important;
    align-items: center;
    justify-content: space-between;

    color: #c3d9eb !important;

    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .3px;

    background:
        linear-gradient(
            100deg,
            rgba(5, 34, 64, .92),
            rgba(3, 24, 45, .88)
        ) !important;

    border: 1px solid rgba(35, 110, 180, .25) !important;
    border-radius: 6px !important;

    box-shadow:
        inset 0 0 15px rgba(0, 100, 210, .035),
        0 3px 10px rgba(0, 0, 0, .15);

    overflow: hidden;

    text-decoration: none;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        color .25s ease,
        background .25s ease;
}


/* Barra lateral */
#list-tab > a.list-group-item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 9px;
    bottom: 9px;

    width: 3px;

    background:
        linear-gradient(
            180deg,
            #168cff,
            #075ca8
        );

    border-radius: 0 3px 3px 0;

    box-shadow:
        0 0 8px rgba(22, 140, 255, .45);

    transition:
        top .25s ease,
        bottom .25s ease,
        box-shadow .25s ease;
}


/* Ícone decorativo */
#list-tab > a.list-group-item > span:first-child {
    position: relative;

    padding-left: 18px;

    transition:
        color .25s ease,
        transform .25s ease;
}

#list-tab > a.list-group-item > span:first-child::before {
    content: "⚔";

    position: absolute;

    left: 0;
    top: 50%;

    transform: translateY(-50%);

    color: #288fdc;

    font-size: 13px;

    text-shadow:
        0 0 7px rgba(40, 145, 230, .65);

    transition:
        color .25s ease,
        text-shadow .25s ease,
        transform .25s ease;
}


/* =========================================================
   VOTOS
   ========================================================= */

#list-tab > a.list-group-item > .d-flex {
    flex-shrink: 0;

    padding: 5px 9px;

    background: rgba(1, 13, 26, .55);

    border: 1px solid rgba(50, 120, 180, .18);
    border-radius: 5px;

    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    font-weight: 600;

    color: #91abc0;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


/* Ícones de like/dislike */
#list-tab > a.list-group-item .material-symbols-outlined {
    font-size: 16px;

    vertical-align: middle;

    transition:
        transform .25s ease,
        text-shadow .25s ease;
}


/* Like */
#list-tab > a.list-group-item .text-success {
    color: #31d68b !important;

    text-shadow:
        0 0 7px rgba(35, 220, 135, .35);
}


/* Dislike */
#list-tab > a.list-group-item .text-danger {
    color: #ff5368 !important;

    text-shadow:
        0 0 7px rgba(255, 55, 80, .30);
}


/* =========================================================
   HOVER
   ========================================================= */

#list-tab > a.list-group-item:hover {
    color: #ffffff !important;

    transform: translateX(5px);

    background:
        linear-gradient(
            100deg,
            rgba(8, 79, 145, .35),
            rgba(5, 39, 73, .75)
        ) !important;

    border-color: rgba(35, 145, 235, .55) !important;

    box-shadow:
        0 5px 18px rgba(0, 70, 150, .18),
        inset 0 0 20px rgba(0, 110, 230, .06),
        0 0 10px rgba(0, 110, 220, .08);
}

#list-tab > a.list-group-item:hover::before {
    top: 4px;
    bottom: 4px;

    box-shadow:
        0 0 13px rgba(22, 140, 255, .9);
}

#list-tab > a.list-group-item:hover
> span:first-child {
    color: #ffffff;

    transform: translateX(3px);
}

#list-tab > a.list-group-item:hover
> span:first-child::before {
    color: #63bdff;

    transform:
        translateY(-50%)
        rotate(-8deg);

    text-shadow:
        0 0 10px rgba(45, 165, 255, .9);
}

#list-tab > a.list-group-item:hover .text-success {
    transform: scale(1.08);

    text-shadow:
        0 0 10px rgba(35, 220, 135, .65);
}

#list-tab > a.list-group-item:hover .text-danger {
    transform: scale(1.08);

    text-shadow:
        0 0 10px rgba(255, 55, 80, .55);
}

#list-tab > a.list-group-item:hover > .d-flex {
    background: rgba(3, 26, 48, .85);

    border-color: rgba(55, 135, 205, .35);

    box-shadow:
        inset 0 0 10px rgba(0, 110, 220, .05);
}


/* =========================================================
   BRILHO PASSANDO NO CARD
   ========================================================= */

#list-tab > a.list-group-item {
    isolation: isolate;
}

#list-tab > a.list-group-item > span:first-child,
#list-tab > a.list-group-item > .d-flex {
    position: relative;
    z-index: 2;
}

#list-tab > a.list-group-item::after {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 60%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(100, 190, 255, .07),
        transparent
    );

    transform: skewX(-20deg);

    pointer-events: none;

    transition: left .65s ease;
}

#list-tab > a.list-group-item:hover::after {
    left: 130%;
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 767px) {

    #list-tab {
        padding: 5px;
        gap: 6px;
    }

    #list-tab > a.list-group-item {
        min-height: 54px;

        padding: 12px 10px 12px 16px;

        font-size: 14px;
    }

    #list-tab > a.list-group-item > span:first-child {
        padding-left: 16px;
    }

    #list-tab > a.list-group-item > .d-flex {
        padding: 4px 6px;

        font-size: 12px;
    }

    #list-tab > a.list-group-item .material-symbols-outlined {
        font-size: 14px;
    }
}

@media (max-width: 420px) {

    #list-tab > a.list-group-item {
        align-items: center;
    }

    #list-tab > a.list-group-item > span:first-child {
        max-width: 60%;

        line-height: 1.25;
    }
}
/* =========================================================
   CATEGORIAS DE PACOTES — MU ARISE
   ========================================================= */

#packages-categories {
    margin-bottom: 20px;
}

#packages-categories .list-group {
    position: relative;
    overflow: hidden;

    padding: 6px;

    background:
        radial-gradient(circle at 10% 0%, rgba(0, 110, 255, .13), transparent 35%),
        linear-gradient(145deg, #020b16, #061a2d 55%, #020913);

    border: 1px solid rgba(20, 120, 220, .35);
    border-radius: 10px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .35),
        inset 0 0 20px rgba(0, 100, 220, .06);
}

/* Linha luminosa superior */
#packages-categories .list-group::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8%;
    width: 84%;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(35, 150, 255, .9),
        transparent
    );

    box-shadow: 0 0 8px rgba(20, 130, 255, .7);
}

/* =========================================================
   ITENS
   ========================================================= */

#packages-categories .list-group-item {
    position: relative;

    margin: 3px 0;
    padding: 13px 18px 13px 24px;

    border: 1px solid transparent !important;
    border-radius: 7px !important;

    background: rgba(3, 18, 34, .72) !important;

    color: #b9d7f2 !important;

    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .4px;

    transition:
        .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

    overflow: hidden;
}

/* Barra lateral */
#packages-categories .list-group-item::before {
    content: "";

    position: absolute;
    left: 0;
    top: 20%;
    width: 3px;
    height: 60%;

    border-radius: 0 4px 4px 0;

    background: #087cff;

    box-shadow:
        0 0 8px rgba(0, 130, 255, .8);

    transition: .25s ease;
}

/* Pequeno detalhe de seta */
#packages-categories .list-group-item::after {
    content: "›";

    position: absolute;
    right: 16px;
    top: 50%;

    transform: translateY(-50%);

    color: rgba(60, 160, 255, .45);

    font-size: 20px;
    font-weight: 700;

    transition: .25s ease;
}

/* =========================================================
   HOVER
   ========================================================= */

#packages-categories .list-group-item:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            90deg,
            rgba(5, 65, 120, .75),
            rgba(8, 35, 65, .9)
        ) !important;

    border-color: rgba(30, 140, 255, .35) !important;

    transform: translateX(4px);

    box-shadow:
        0 0 15px rgba(0, 110, 255, .12),
        inset 0 0 12px rgba(0, 120, 255, .08);
}

#packages-categories .list-group-item:hover::before {
    width: 5px;
    background: #32aaff;

    box-shadow:
        0 0 12px #168cff,
        0 0 20px rgba(0, 130, 255, .5);
}

#packages-categories .list-group-item:hover::after {
    right: 11px;
    color: #4db5ff;

    text-shadow:
        0 0 8px rgba(30, 150, 255, .9);
}

/* =========================================================
   ITEM ATIVO
   ========================================================= */

#packages-categories .list-group-item.active {
    color: #ffffff !important;

    background:
        linear-gradient(
            100deg,
            #073b6c 0%,
            #0a5fa8 50%,
            #07345e 100%
        ) !important;

    border: 1px solid rgba(40, 155, 255, .65) !important;

    box-shadow:
        0 0 12px rgba(0, 120, 255, .28),
        inset 0 0 18px rgba(0, 150, 255, .12);

    font-weight: 700;
}

/* Barra do ativo */
#packages-categories .list-group-item.active::before {
    width: 5px;

    background: #55bdff;

    box-shadow:
        0 0 8px #168cff,
        0 0 18px rgba(30, 150, 255, .8);
}

/* Seta do ativo */
#packages-categories .list-group-item.active::after {
    color: #ffffff;

    right: 12px;

    text-shadow:
        0 0 8px #39aaff;
}

/* =========================================================
   EFEITO DE BRILHO
   ========================================================= */

#packages-categories .list-group-item {
    isolation: isolate;
}

#packages-categories .list-group-item span {
    position: relative;
    z-index: 2;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 991px) {

    #packages-categories .list-group {
        border-radius: 8px;
    }

    #packages-categories .list-group-item {
        padding: 12px 18px 12px 22px;
        font-size: 15px;
    }

}
/* =========================================================
   BOTÕES PRIMARY — MU ARISE PREMIUM
   ========================================================= */

.btn.btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 20px;
    padding: 8px 15px;
    border: 1px solid #168cff !important;
    border-radius: 6px !important;
    background: linear-gradient(
        135deg,
        #061a31 0%,
        #0b3d70 50%,
        #061a31 100%
    ) !important;
    color: #ffffff !important;
    font-family: "Rajdhani", "Poppins", sans-serif !important;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none !important;
    box-shadow:
        0 0 8px rgba(0, 119, 255, .25),
        inset 0 0 12px rgba(0, 132, 255, .10);
    overflow: hidden;
    transition:
        .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

/* Brilho passando pelo botão */
.btn.btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.18),
        transparent
    );

    transform: skewX(-20deg);
    transition: .6s ease;
}

/* Hover */
.btn.btn-primary:hover {
    color: #ffffff !important;

    border-color: #42adff !important;

    background: linear-gradient(
        135deg,
        #09294b 0%,
        #0b63b8 50%,
        #09294b 100%
    ) !important;

    transform: translateY(-2px);

    box-shadow:
        0 0 12px rgba(0, 140, 255, .55),
        0 0 25px rgba(0, 110, 255, .20),
        inset 0 0 15px rgba(0, 160, 255, .15);
}

.btn.btn-primary:hover::before {
    left: 140%;
}

/* Clique */
.btn.btn-primary:active {
    transform: translateY(0) scale(.98);
    box-shadow:
        0 0 8px rgba(0, 140, 255, .35),
        inset 0 0 12px rgba(0, 0, 0, .35);
}

/* Foco */
.btn.btn-primary:focus,
.btn.btn-primary:focus-visible {
    color: #fff !important;
    border-color: #42adff !important;
    box-shadow:
        0 0 0 2px rgba(20, 130, 255, .15),
        0 0 15px rgba(0, 140, 255, .45) !important;
    outline: none !important;
}

/* Desabilitado */
.btn.btn-primary:disabled,
.btn.btn-primary.disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* =========================================================
   TAMANHOS BOOTSTRAP
   ========================================================= */

.btn.btn-primary.btn-sm {
    min-height: 36px;
    padding: 7px 15px;
    font-size: 14px;
}

.btn.btn-primary.btn-lg {
    min-height: 52px;
    padding: 12px 28px;
    font-size: 18px;
}

/* Botão ocupando toda a largura */
.btn.btn-primary.w-100 {
    width: 100%;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .btn.btn-primary {
        min-height: 42px;
        padding: 9px 18px;
        font-size: 15px;
    }

}
/* =========================================================
   PACOTES / LOJA VIP — MU ARISE PREMIUM
   ========================================================= */

.packages {
    position: relative;
    margin-top: 10px;
}

/* GRID */
.packages .row {
    --bs-gutter-y: 1.5rem;
}

/* =========================================================
   CARD DO PACOTE
   ========================================================= */

.packages .package {
    height: 100%;
}

.packages .package .card {
    position: relative;
    height: 100%;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0, 119, 255, .16),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #020913 0%,
            #06192d 50%,
            #020812 100%
        ) !important;

    border: 1px solid rgba(25, 130, 230, .38) !important;
    border-radius: 12px !important;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .40),
        inset 0 0 25px rgba(0, 100, 220, .06);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

/* brilho externo */
.packages .package .card::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            120deg,
            transparent 30%,
            rgba(255,255,255,.045) 45%,
            transparent 60%
        );

    transform: translateX(-100%);
    transition: .7s ease;

    pointer-events: none;
    z-index: 5;
}

/* linha superior */
.packages .package .card::after {
    content: "";

    position: absolute;

    top: 0;
    left: 12%;
    width: 76%;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #168cff,
        #62c5ff,
        #168cff,
        transparent
    );

    box-shadow:
        0 0 8px rgba(30, 150, 255, .75);

    z-index: 6;
}

/* HOVER */
.packages .package:hover .card {
    transform: translateY(-7px);

    border-color: rgba(45, 165, 255, .85) !important;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .55),
        0 0 20px rgba(0, 120, 255, .22),
        0 0 45px rgba(0, 90, 255, .10),
        inset 0 0 25px rgba(0, 130, 255, .10);
}

.packages .package:hover .card::before {
    transform: translateX(100%);
}

/* =========================================================
   CABEÇALHO
   ========================================================= */

.packages .package .card-header {
    position: relative;
    padding: 15px 12px;
    text-align: center;
    background:
        linear-gradient(
            135deg,
            #071b31,
            #0a4475,
            #071b31
        ) !important;
    border-bottom: 1px solid rgba(35, 150, 255, .45) !important;
    color: #ffffff !important;
    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    text-shadow:
        0 0 8px rgba(60, 170, 255, .65);
    z-index: 2;
}

/* detalhe no título */
.packages .package .card-header::after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 25%;
    width: 50%;
    height: 2px;

    background: #239cff;

    box-shadow:
        0 0 8px #168cff,
        0 0 15px rgba(20, 140, 255, .55);
}

/* =========================================================
   CORPO
   ========================================================= */

.packages .package .card-body {
    position: relative;

    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 18px 17px !important;

    color: #a9c5df !important;

    font-family: "Rajdhani", "Poppins", sans-serif;
}

/* DESCRIÇÃO */
.packages .package .description {
    flex: 1;

    color: #a9bfd4;

    font-size: 14px;
    line-height: 1.55;

    text-align: left;
}

/* textos importantes */
.packages .package .description strong {
    color: #ffffff;
}

/* =========================================================
   PREÇO
   ========================================================= */

.packages .package .price {
    position: relative;

    margin-top: 18px;
    padding-top: 14px;

    border-top: 1px solid rgba(50, 130, 210, .20);

    color: #7894ad;

    font-family: "Rajdhani", "Poppins", sans-serif;

    font-size: 13px;
    font-weight: 600;

    text-align: center;
}

.packages .package .price span {
    display: block;

    margin-bottom: 2px;

    color: #55c4ff;

    font-size: 27px;
    font-weight: 700;

    letter-spacing: .5px;

    text-shadow:
        0 0 8px rgba(30, 170, 255, .45);
}

/* =========================================================
   RODAPÉ / BOTÃO
   ========================================================= */

.packages .package .card-footer {
    position: relative;

    padding: 10px !important;

    background: rgba(1, 10, 20, .72) !important;

    border-top: 1px solid rgba(20, 110, 200, .22) !important;

    z-index: 3;
}

/* botão Visualizar */
.packages .package .card-footer .btn.btn-primary {
    min-height: 40px;

    border-radius: 6px !important;

    font-size: 14px;

    letter-spacing: 1px;
}

/* =========================================================
   DESTAQUE PARA O PRIMEIRO PACOTE
   ========================================================= */

.packages .package:first-child .card {
    border-color: rgba(40, 150, 255, .48) !important;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 767px) {

    .packages .package .card-header {
        font-size: 16px;
        padding: 13px 8px;
    }

    .packages .package .card-body {
        padding: 15px 13px !important;
    }

    .packages .package .description {
        font-size: 13px;
        line-height: 1.45;
    }

    .packages .package .price span {
        font-size: 23px;
    }

}

@media (max-width: 480px) {

    .packages .package .card-header {
        font-size: 14px;
    }

    .packages .package .description {
        font-size: 12px;
    }

    .packages .package .price span {
        font-size: 21px;
    }

}
/* =========================================================
   SHOP DONATE — CATEGORIAS MU ARISE
   ========================================================= */

#shop-category {
    position: relative;
    font-family: "Rajdhani", "Poppins", sans-serif;
}

/* =========================================================
   CAMPO DE PESQUISA
   ========================================================= */

#shop-category form {
    position: relative;
    margin-bottom: 18px !important;
}

#shop-category form::before {
    content: "⌕";

    position: absolute;
    left: 13px;
    top: 50%;

    transform: translateY(-50%);

    color: #42aaff;

    font-size: 23px;
    font-weight: 700;

    z-index: 2;

    text-shadow:
        0 0 8px rgba(30, 150, 255, .65);

    pointer-events: none;
}

#shop-category form .form-control {
    height: 44px;

    padding-left: 40px;
    padding-right: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(3, 15, 28, .96),
            rgba(7, 30, 52, .92)
        ) !important;

    border: 1px solid rgba(30, 125, 220, .42) !important;
    border-radius: 7px !important;

    color: #dceeff !important;

    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;

    box-shadow:
        inset 0 0 12px rgba(0, 100, 220, .06),
        0 4px 15px rgba(0, 0, 0, .25);

    transition: .25s ease;
}

#shop-category form .form-control::placeholder {
    color: #6f8da8;
    opacity: 1;
}

#shop-category form .form-control:focus {
    border-color: #249cff !important;

    background:
        linear-gradient(
            135deg,
            rgba(4, 21, 39, .98),
            rgba(8, 39, 68, .96)
        ) !important;

    box-shadow:
        0 0 0 2px rgba(20, 130, 255, .10),
        0 0 15px rgba(0, 120, 255, .25),
        inset 0 0 15px rgba(0, 120, 255, .08) !important;

    outline: none !important;
}

/* =========================================================
   TÍTULOS DAS CATEGORIAS
   ========================================================= */

#shop-category .list-group-heading {
    position: relative;

    margin-top: 18px;
    margin-bottom: 7px;

    padding: 8px 12px 8px 15px;

    color: #ffffff;

    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 700;

    letter-spacing: 1.2px;
    text-transform: uppercase;

    background:
        linear-gradient(
            90deg,
            rgba(8, 61, 105, .85),
            rgba(5, 27, 47, .55),
            transparent
        );

    border-left: 3px solid #168cff;

    text-shadow:
        0 0 8px rgba(50, 160, 255, .45);
}

/* linha luminosa abaixo do título */
#shop-category .list-group-heading::after {
    content: "";

    position: absolute;

    left: 15px;
    right: 0;
    bottom: 0;

    height: 1px;

    background: linear-gradient(
        90deg,
        rgba(20, 140, 255, .65),
        rgba(20, 140, 255, .12),
        transparent
    );
}

/* =========================================================
   CONTAINER DAS CATEGORIAS
   ========================================================= */

#shop-category .list-group {
    position: relative;

    padding: 5px;

    margin-bottom: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(2, 11, 21, .96),
            rgba(5, 24, 42, .92)
        );

    border: 1px solid rgba(20, 105, 190, .25);
    border-radius: 8px;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, .30),
        inset 0 0 15px rgba(0, 90, 180, .04);
}

/* =========================================================
   ITENS
   ========================================================= */

#shop-category .list-group-item {
    position: relative;

    min-height: 42px;

    padding: 9px 30px 9px 11px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px solid transparent !important;
    border-radius: 5px !important;

    background: rgba(4, 20, 35, .65) !important;

    color: #a9c4dc !important;

    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 600;

    letter-spacing: .3px;

    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        color .22s ease;

    overflow: hidden;
}

/* barra azul lateral */
#shop-category .list-group-item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 25%;

    width: 2px;
    height: 50%;

    background: #087cff;

    box-shadow:
        0 0 7px rgba(0, 130, 255, .75);

    transition: .22s ease;
}

/* seta */
#shop-category .list-group-item::after {
    content: "›";

    position: absolute;

    right: 11px;
    top: 50%;

    transform: translateY(-50%);

    color: #3c81ae;

    font-size: 20px;
    font-weight: 700;

    transition: .22s ease;
}

/* =========================================================
   ÍCONES DOS ITENS
   ========================================================= */

#shop-category .list-group-item img {
    flex: 0 0 auto;

    width: 25px !important;
    height: 25px !important;

    object-fit: contain;

    padding: 2px;

    filter:
        drop-shadow(0 0 4px rgba(30, 150, 255, .35));

    opacity: .85;

    transition:
        transform .22s ease,
        filter .22s ease,
        opacity .22s ease;
}

/* =========================================================
   HOVER
   ========================================================= */

#shop-category .list-group-item:hover {
    color: #ffffff !important;

    transform: translateX(4px);

    background:
        linear-gradient(
            90deg,
            rgba(7, 62, 105, .80),
            rgba(6, 30, 51, .90)
        ) !important;

    border-color: rgba(25, 140, 240, .35) !important;

    box-shadow:
        0 0 12px rgba(0, 110, 255, .10),
        inset 0 0 12px rgba(0, 120, 255, .06);
}

#shop-category .list-group-item:hover::before {
    width: 4px;

    background: #39aeff;

    box-shadow:
        0 0 8px #168cff,
        0 0 15px rgba(20, 140, 255, .65);
}

#shop-category .list-group-item:hover::after {
    right: 7px;

    color: #65c4ff;

    text-shadow:
        0 0 8px rgba(40, 170, 255, .8);
}

#shop-category .list-group-item:hover img {
    opacity: 1;

    transform: scale(1.12);

    filter:
        drop-shadow(0 0 5px rgba(30, 160, 255, .75));
}

/* =========================================================
   CATEGORIAS DESTAQUE
   ========================================================= */

/* Sets */
#shop-category .list-group-heading:nth-of-type(1) {
    border-left-color: #168cff;
}

/* Armas */
#shop-category .list-group-heading:nth-of-type(2) {
    border-left-color: #6c8cff;
}

/* Pacotes */
#shop-category .list-group-heading:nth-of-type(3) {
    border-left-color: #b083ff;
}

/* =========================================================
   EFEITO DE BRILHO NOS ITENS
   ========================================================= */

#shop-category .list-group-item {
    isolation: isolate;
}

#shop-category .list-group-item > * {
    position: relative;
    z-index: 2;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 991px) {

    #shop-category {
        padding-top: 8px;
    }

    #shop-category .list-group-heading {
        font-size: 14px;
    }

    #shop-category .list-group-item {
        min-height: 44px;
        font-size: 15px;
    }

}

@media (max-width: 576px) {

    #shop-category form .form-control {
        height: 42px;
    }

    #shop-category .list-group-item {
        padding: 10px 28px 10px 10px;
    }

}
/* =========================================================
   PRODUTOS DA WEBSHOP — MU ARISE
   ========================================================= */

.webshop-product {
    height: 100%;
}

/* CARD */
.webshop-product .card {
    position: relative;
    height: 100%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(0, 120, 255, .14),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #020913 0%,
            #061a2d 50%,
            #020812 100%
        ) !important;

    border: 1px solid rgba(25, 130, 230, .38) !important;
    border-radius: 11px !important;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, .38),
        inset 0 0 22px rgba(0, 100, 220, .05);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

/* brilho superior */
.webshop-product .card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 12%;
    width: 76%;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #168cff,
        #62c5ff,
        #168cff,
        transparent
    );

    box-shadow:
        0 0 8px rgba(30, 150, 255, .75);

    z-index: 5;
}

/* efeito de brilho passando */
.webshop-product .card::after {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 65%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .045),
        transparent
    );

    transform: skewX(-20deg);

    transition: .7s ease;

    pointer-events: none;
    z-index: 4;
}

/* HOVER */
.webshop-product:hover .card {
    transform: translateY(-6px);

    border-color: rgba(45, 165, 255, .82) !important;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, .55),
        0 0 18px rgba(0, 120, 255, .22),
        0 0 40px rgba(0, 90, 255, .08),
        inset 0 0 22px rgba(0, 130, 255, .09);
}

.webshop-product:hover .card::after {
    left: 140%;
}

/* =========================================================
   NOME DO PRODUTO
   ========================================================= */

.webshop-product .webshop-product-name {
    position: relative;

    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 11px 12px;

    background:
        linear-gradient(
            135deg,
            #071b31,
            #0a4475,
            #071b31
        ) !important;

    border-bottom: 1px solid rgba(35, 150, 255, .40) !important;

    color: #ffffff !important;

    font-family: "Rajdhani", "Poppins", sans-serif;

    font-size: 17px;
    font-weight: 700;

    letter-spacing: .7px;
    text-transform: uppercase;

    text-align: center;

    text-shadow:
        0 0 8px rgba(50, 170, 255, .55);

    z-index: 3;
}

/* linha abaixo do título */
.webshop-product .webshop-product-name::after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 25%;

    width: 50%;
    height: 2px;

    background: #249cff;

    box-shadow:
        0 0 8px #168cff,
        0 0 15px rgba(20, 140, 255, .5);
}

/* =========================================================
   CORPO
   ========================================================= */

.webshop-product .card-body {
    position: relative;

    padding: 15px !important;

    background: transparent !important;

    z-index: 2;
}

/* =========================================================
   ÁREA DA IMAGEM
   ========================================================= */

.webshop-product .webshop-product-image {
    position: relative;

    min-height: 170px;

    padding: 12px;

    border: 1px solid rgba(30, 120, 210, .14);
    border-radius: 8px;

    background:
        radial-gradient(
            circle,
            rgba(0, 100, 220, .12),
            transparent 65%
        ),
        rgba(1, 10, 20, .35);

    overflow: hidden;
}

/* brilho atrás do item */
.webshop-product .webshop-product-image::before {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    border-radius: 50%;

    background: rgba(0, 130, 255, .12);

    filter: blur(25px);

    pointer-events: none;
}

/* imagem */
.webshop-product .webshop-product-image img {
    position: relative;

    max-width: 100%;
    max-height: 160px;

    object-fit: contain;

    filter:
        drop-shadow(0 0 6px rgba(20, 140, 255, .35));

    transition:
        transform .3s ease,
        filter .3s ease;
}

/* item aumenta no hover */
.webshop-product:hover .webshop-product-image img {
    transform: scale(1.08);

    filter:
        drop-shadow(0 0 9px rgba(30, 160, 255, .65))
        drop-shadow(0 0 20px rgba(0, 100, 255, .25));
}

/* =========================================================
   PREÇO
   ========================================================= */

.webshop-product .webshop-product-price {
    margin-top: 5px;
    padding: 9px 5px 5px;

    color: #7694ad;

    font-family: "Rajdhani", "Poppins", sans-serif;

    font-size: 13px;
    font-weight: 600;

    text-align: center;

    border-top: 1px solid rgba(40, 130, 210, .18);
}

.webshop-product .webshop-product-price span {
    display: inline-block;

    margin-right: 4px;

    color: #55c5ff;

    font-size: 25px;
    font-weight: 700;

    line-height: 1;

    text-shadow:
        0 0 8px rgba(30, 170, 255, .55);
}

/* =========================================================
   PRODUTOS VENDIDOS
   ========================================================= */

.webshop-product .webshop-product-sold {
    margin-top: 3px;

    color: #5f7c94;

    font-family: "Rajdhani", "Poppins", sans-serif;

    font-size: 12px;
    font-weight: 500;

    text-align: center;
}

/* =========================================================
   FOOTER
   ========================================================= */

.webshop-product .card-footer {
    position: relative;

    padding: 9px !important;

    background:
        rgba(1, 9, 18, .82) !important;

    border-top: 1px solid rgba(25, 110, 200, .22) !important;

    z-index: 5;
}

/* botão */
.webshop-product .card-footer .btn {
    min-height: 39px;

    font-family: "Rajdhani", "Poppins", sans-serif;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 767px) {

    .webshop-product .webshop-product-name {
        min-height: 44px;
        font-size: 15px;
    }

    .webshop-product .webshop-product-image {
        min-height: 145px;
    }

    .webshop-product .webshop-product-image img {
        max-height: 135px;
    }

    .webshop-product .webshop-product-price span {
        font-size: 22px;
    }

}

@media (max-width: 480px) {

    .webshop-product .card-body {
        padding: 10px !important;
    }

    .webshop-product .webshop-product-image {
        min-height: 120px;
    }

    .webshop-product .webshop-product-image img {
        max-height: 110px;
    }

    .webshop-product .webshop-product-name {
        font-size: 13px;
    }

}
/* =========================================================
   WEBSHOP — PÁGINA INDIVIDUAL DO PRODUTO
   MU ARISE
   ========================================================= */

.webshop-single-product {
    position: relative;
    font-family: "Rajdhani", "Poppins", sans-serif;
}

/* =========================================================
   CARD PRINCIPAL DO PRODUTO
   ========================================================= */

.webshop-single-product > .row > .col-sm-4 > .card {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(0, 125, 255, .17),
            transparent 55%
        ),
        linear-gradient(
            145deg,
            #020913,
            #061a2d 55%,
            #020812
        ) !important;

    border: 1px solid rgba(25, 135, 235, .42) !important;
    border-radius: 12px !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,.45),
        inset 0 0 25px rgba(0,100,220,.06);
}

/* linha luminosa */
.webshop-single-product > .row > .col-sm-4 > .card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #168cff,
        #66c8ff,
        #168cff,
        transparent
    );

    box-shadow:
        0 0 9px rgba(20,145,255,.8);

    z-index: 5;
}

/* =========================================================
   NOME DO PRODUTO
   ========================================================= */

.webshop-single-product > .row > .col-sm-4 > .card > .card-header {
    position: relative;

    padding: 15px 10px;

    background:
        linear-gradient(
            135deg,
            #071b31,
            #0a4a7e,
            #071b31
        ) !important;

    border-bottom: 1px solid rgba(40,155,255,.45) !important;

    color: #ffffff !important;

    text-align: center;

    font-size: 19px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;

    text-shadow:
        0 0 9px rgba(50,170,255,.6);
}

.webshop-single-product > .row > .col-sm-4 > .card > .card-header::after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 25%;
    width: 50%;
    height: 2px;

    background: #28a5ff;

    box-shadow:
        0 0 8px #168cff;
}

/* =========================================================
   IMAGEM PRINCIPAL
   ========================================================= */

.webshop-single-product-image {
    position: relative;

    min-height: 190px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 15px;

    border-radius: 8px;

    background:
        radial-gradient(
            circle,
            rgba(0,125,255,.12),
            transparent 68%
        );
}

.webshop-single-product-image::before {
    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    border-radius: 50%;

    background: rgba(0,130,255,.12);

    filter: blur(25px);
}

.webshop-single-product-image img {
    position: relative;

    max-height: 180px;

    object-fit: contain;

    filter:
        drop-shadow(0 0 7px rgba(25,145,255,.45))
        drop-shadow(0 0 18px rgba(0,100,255,.18));

    transition:
        transform .3s ease,
        filter .3s ease;
}

.webshop-single-product > .row > .col-sm-4 > .card:hover
.webshop-single-product-image img {
    transform: scale(1.07);

    filter:
        drop-shadow(0 0 10px rgba(35,170,255,.7))
        drop-shadow(0 0 25px rgba(0,100,255,.3));
}

/* =========================================================
   PREÇO
   ========================================================= */

.webshop-single-product-price {
    padding: 12px 10px;

    border-top: 1px solid rgba(40,130,210,.22);

    color: #7593ac;

    text-align: center;

    font-size: 14px;
    font-weight: 600;
}

.webshop-single-product-price #item-price {
    display: inline-block;

    margin-right: 5px;

    color: #58c7ff;

    font-size: 30px;
    font-weight: 700;

    text-shadow:
        0 0 9px rgba(30,170,255,.55);
}

/* =========================================================
   ÁREA DIREITA / FORM
   ========================================================= */

.webshop-single-product form {
    position: relative;

    padding: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(2,12,23,.88),
            rgba(5,25,44,.75)
        );

    border: 1px solid rgba(25,120,215,.28);
    border-radius: 12px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.30),
        inset 0 0 20px rgba(0,100,220,.04);
}

/* =========================================================
   TÍTULOS ITENS / CUPOM
   ========================================================= */

.webshop-single-product form h3 {
    position: relative;

    margin-top: 0;
    margin-bottom: 15px;

    padding: 10px 13px;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(7,65,110,.75),
            rgba(5,28,48,.45),
            transparent
        );

    border-left: 3px solid #168cff;

    font-size: 20px;
    font-weight: 700;

    letter-spacing: .8px;
    text-transform: uppercase;

    text-shadow:
        0 0 7px rgba(30,150,255,.45);
}

/* =========================================================
   GRID DOS ITENS
   ========================================================= */

.webshop-single-product .items {
    --bs-gutter-x: .8rem;
    --bs-gutter-y: .8rem;
}

/* CARD DO ITEM */
.webshop-single-product .items .item .card {
    height: 100%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(0,115,230,.12),
            transparent 65%
        ),
        linear-gradient(
            145deg,
            #030d18,
            #071e34
        ) !important;

    border: 1px solid rgba(30,120,210,.30) !important;
    border-radius: 8px !important;

    box-shadow:
        0 5px 14px rgba(0,0,0,.30),
        inset 0 0 15px rgba(0,100,220,.04);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.webshop-single-product .items .item .card:hover {
    transform: translateY(-4px);

    border-color: rgba(35,155,255,.7) !important;

    box-shadow:
        0 8px 20px rgba(0,0,0,.45),
        0 0 15px rgba(0,120,255,.18);
}

/* =========================================================
   CABEÇALHO DO ITEM
   ========================================================= */

.webshop-single-product .items .item .card-header {
    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    padding: 8px 6px;

    background:
        linear-gradient(
            135deg,
            rgba(7,34,58,.95),
            rgba(8,60,98,.85)
        ) !important;

    border-bottom: 1px solid rgba(30,130,220,.3) !important;

    color: #b9d9ef !important;

    text-align: center;

    font-size: 13px;
    font-weight: 600;
}

/* quantidade */
.webshop-single-product .items .quantity {
    position: absolute;

    top: 5px;
    left: 6px;

    padding: 2px 6px;

    border-radius: 4px;

    background: rgba(0,100,190,.65);

    color: #70ccff;

    font-size: 11px;
    font-weight: 700;

    text-shadow:
        0 0 5px rgba(30,160,255,.5);
}

/* nome */
.webshop-single-product .items .is-normal {
    display: block;

    padding-top: 7px;

    color: #d5e9f8;
}

/* =========================================================
   IMAGEM DOS ITENS
   ========================================================= */

.webshop-single-product .items .item .card-body {
    min-height: 105px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px;
}

.webshop-single-product .items .image {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}

.webshop-single-product .items .image::before {
    content: "";

    position: absolute;

    width: 60px;
    height: 60px;

    border-radius: 50%;

    background: rgba(0,120,255,.10);

    filter: blur(15px);
}

.webshop-single-product .items .image img {
    position: relative;

    max-width: 80px;
    max-height: 80px;

    object-fit: contain;

    filter:
        drop-shadow(0 0 5px rgba(30,150,255,.4));

    transition: .25s ease;
}

.webshop-single-product .items .item:hover .image img {
    transform: scale(1.12);

    filter:
        drop-shadow(0 0 8px rgba(40,170,255,.7));
}

/* =========================================================
   CUPOM
   ========================================================= */

.webshop-single-coupon {
    margin-top: 10px;
}

.webshop-single-coupon h3 {
    margin-top: 20px !important;
}

.webshop-single-coupon .form-control {
    height: 44px;

    background:
        linear-gradient(
            135deg,
            rgba(2,13,25,.95),
            rgba(6,29,50,.9)
        ) !important;

    border: 1px solid rgba(30,120,210,.38) !important;
    border-radius: 6px !important;

    color: #dceeff !important;

    font-family: "Rajdhani", "Poppins", sans-serif;

    font-size: 16px;
    font-weight: 600;

    transition: .25s ease;
}

.webshop-single-coupon .form-control:focus {
    border-color: #269eff !important;

    box-shadow:
        0 0 0 2px rgba(20,130,255,.10),
        0 0 15px rgba(0,120,255,.22) !important;

    outline: none !important;
}

/* =========================================================
   BOTÃO COMPRAR
   ========================================================= */

.webshop-single-product form > .mt-3 {
    margin-top: 20px !important;
}

.webshop-single-product form > .mt-3 .btn-primary {
    min-height: 48px;

    min-width: 170px;

    padding: 10px 28px;

    font-size: 17px;
    font-weight: 700;

    letter-spacing: 1px;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 991px) {

    .webshop-single-product form {
        margin-top: 10px;
    }

    .webshop-single-product .items .item .card-header {
        font-size: 12px;
    }

}

@media (max-width: 767px) {

    .webshop-single-product > .row > .col-sm-4 > .card {
        margin-bottom: 15px !important;
    }

    .webshop-single-product form {
        padding: 14px;
    }

    .webshop-single-product form h3 {
        font-size: 18px;
    }

    .webshop-single-product .items .item .card-body {
        min-height: 90px;
    }

    .webshop-single-product .items .image img {
        max-width: 65px;
        max-height: 65px;
    }

}

@media (max-width: 480px) {

    .webshop-single-product .webshop-single-product-image {
        min-height: 150px;
    }

    .webshop-single-product-image img {
        max-height: 140px;
    }

    .webshop-single-product .items .item .card-header {
        min-height: 48px;
        font-size: 11px;
    }

    .webshop-single-product form > .mt-3 .btn-primary {
        width: 100%;
    }

}
/* =========================================================
   DROPDOWN DA CONTA — MU ARISE
   ========================================================= */

.dropdown-services {
    position: relative;

    min-width: 330px;
    padding: 10px !important;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0, 120, 255, .14),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #020913 0%,
            #061a2d 55%,
            #020812 100%
        ) !important;

    border: 1px solid rgba(30, 135, 235, .48) !important;
    border-radius: 10px !important;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .65),
        0 0 20px rgba(0, 100, 220, .15),
        inset 0 0 25px rgba(0, 100, 220, .06);

    overflow: hidden;

    font-family: "Rajdhani", "Poppins", sans-serif;
}

/* Linha luminosa superior */
.dropdown-services::before {
    content: "";

    position: absolute;

    top: 0;
    left: 8%;

    width: 84%;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #168cff,
        #65c7ff,
        #168cff,
        transparent
    );

    box-shadow:
        0 0 9px rgba(30, 150, 255, .8);
}

/* =========================================================
   INFORMAÇÕES DA CONTA
   ========================================================= */

.dropdown-services > .list-group {
    position: relative;

    margin: 0;

    overflow: hidden;

    border: 1px solid rgba(30, 120, 210, .20) !important;
    border-radius: 7px !important;

    background: rgba(2, 12, 23, .55);
}

.dropdown-services > .list-group .list-group-item {
    min-height: 38px;

    padding: 8px 10px;

    background:
        rgba(5, 25, 43, .65) !important;

    border-color: rgba(30, 100, 175, .16) !important;

    color: #a9c4d9 !important;

    font-size: 14px;
    font-weight: 600;

    transition: .2s ease;
}

.dropdown-services > .list-group .list-group-item:hover {
    background:
        rgba(8, 47, 78, .75) !important;

    color: #ffffff !important;
}

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

.dropdown-services .badge {
    padding: 4px 8px;

    border-radius: 4px;

    font-family: "Rajdhani", "Poppins", sans-serif;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: .3px;
}

/* Tipo de conta */
.dropdown-services .badge.bg-secondary {
    background:
        linear-gradient(
            135deg,
            #293d50,
            #526b80
        ) !important;

    border: 1px solid rgba(150, 190, 220, .25);

    color: #ffffff !important;

    box-shadow:
        0 0 6px rgba(100, 160, 200, .15);
}

/* EPoint / Cash / GoblinPoint */
.dropdown-services .badge.bg-warning {
    background:
        linear-gradient(
            135deg,
            #76550a,
            #b98512
        ) !important;

    border: 1px solid rgba(255, 204, 70, .45);

    color: #fff3bd !important;

    text-shadow:
        0 0 5px rgba(255, 190, 40, .35);

    box-shadow:
        0 0 7px rgba(220, 160, 20, .18);
}

/* Créditos */
.dropdown-services .badge.bg-success {
    background:
        linear-gradient(
            135deg,
            #075a3c,
            #0a8657
        ) !important;

    border: 1px solid rgba(35, 220, 145, .38);

    color: #aaffd9 !important;

    text-shadow:
        0 0 5px rgba(30, 220, 140, .3);

    box-shadow:
        0 0 7px rgba(20, 190, 120, .18);
}

/* =========================================================
   TÍTULO SERVIÇOS
   ========================================================= */

.dropdown-services-title {
    position: relative;

    margin: 13px 0 7px;

    padding: 8px 10px 8px 13px;

    background:
        linear-gradient(
            90deg,
            rgba(8, 61, 105, .75),
            rgba(5, 28, 48, .45),
            transparent
        );

    border-left: 3px solid #168cff;

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;

    text-shadow:
        0 0 8px rgba(40, 160, 255, .45);
}

/* linha do título */
.dropdown-services-title::after {
    content: "";

    position: absolute;

    left: 13px;
    right: 0;
    bottom: 0;

    height: 1px;

    background: linear-gradient(
        90deg,
        rgba(25, 145, 255, .6),
        transparent
    );
}

/* =========================================================
   MENU DE SERVIÇOS
   ========================================================= */

.dropdown-services > .list-group:nth-of-type(2) {
    padding: 4px;

    background: rgba(1, 10, 20, .45);

    border: 1px solid rgba(25, 110, 190, .20);
    border-radius: 7px;
}

.dropdown-services > .list-group:nth-of-type(2) .list-group-item {
    position: relative;

    min-height: 39px;

    padding: 9px 28px 9px 13px;

    background:
        rgba(4, 20, 35, .65) !important;

    border: 1px solid transparent !important;
    border-radius: 5px !important;

    color: #a9c5dc !important;

    font-size: 14px;
    font-weight: 600;

    transition:
        transform .2s ease,
        color .2s ease,
        background .2s ease,
        border-color .2s ease;
}

/* barra lateral */
.dropdown-services > .list-group:nth-of-type(2) .list-group-item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 25%;

    width: 2px;
    height: 50%;

    background: #168cff;

    box-shadow:
        0 0 7px rgba(20, 140, 255, .65);

    transition: .2s ease;
}

/* seta */
.dropdown-services > .list-group:nth-of-type(2) .list-group-item::after {
    content: "›";

    position: absolute;

    right: 10px;
    top: 50%;

    transform: translateY(-50%);

    color: #3c82ad;

    font-size: 19px;
    font-weight: 700;

    transition: .2s ease;
}

/* hover */
.dropdown-services > .list-group:nth-of-type(2) .list-group-item:hover {
    transform: translateX(3px);

    background:
        linear-gradient(
            90deg,
            rgba(7, 62, 105, .75),
            rgba(5, 28, 48, .9)
        ) !important;

    border-color: rgba(30, 140, 240, .30) !important;

    color: #ffffff !important;

    box-shadow:
        0 0 10px rgba(0, 110, 255, .10);
}

.dropdown-services > .list-group:nth-of-type(2) .list-group-item:hover::before {
    width: 4px;

    background: #45b5ff;

    box-shadow:
        0 0 8px #168cff,
        0 0 15px rgba(20, 140, 255, .55);
}

.dropdown-services > .list-group:nth-of-type(2) .list-group-item:hover::after {
    right: 7px;

    color: #65c8ff;

    text-shadow:
        0 0 8px rgba(30, 160, 255, .75);
}

/* =========================================================
   LOGOUT
   ========================================================= */

.dropdown-services .btn-danger {
    min-width: 100px;
    min-height: 37px;

    padding: 7px 18px;

    border: 1px solid rgba(255, 75, 75, .55) !important;
    border-radius: 5px !important;

    background:
        linear-gradient(
            135deg,
            #4d1118,
            #8d1b27,
            #4d1118
        ) !important;

    color: #ffffff !important;

    font-family: "Rajdhani", "Poppins", sans-serif;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;

    box-shadow:
        0 0 8px rgba(220, 40, 55, .15);

    transition: .25s ease;
}

.dropdown-services .btn-danger:hover {
    transform: translateY(-2px);

    border-color: #ff6872 !important;

    background:
        linear-gradient(
            135deg,
            #68151e,
            #ad2633,
            #68151e
        ) !important;

    box-shadow:
        0 0 12px rgba(255, 55, 70, .35),
        0 0 22px rgba(220, 30, 50, .12);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .dropdown-services {
        min-width: 290px;
        max-width: calc(100vw - 20px);

        padding: 8px !important;
    }

    .dropdown-services > .list-group .list-group-item {
        font-size: 13px;
    }

    .dropdown-services > .list-group:nth-of-type(2)
    .list-group-item {
        font-size: 13px;
    }

}
/* =========================================================
   MU ARISE - RESUMO DA CONTA NO DROPDOWN
   ========================================================= */

.dropdown-services {
    width: 320px !important;
    max-width: 90vw;
    background: linear-gradient(
        145deg,
        rgba(3, 14, 30, 0.98),
        rgba(5, 25, 55, 0.98)
    ) !important;
    border: 1px solid rgba(0, 119, 255, 0.55) !important;
    border-radius: 10px !important;
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.65),
        0 0 25px rgba(0, 100, 255, 0.15) !important;
    padding: 10px !important;
}

/* ===============================
   INFORMAÇÕES DA CONTA
   =============================== */

.dropdown-services > ul.list-group {
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
}

.dropdown-services > ul.list-group > li {
    background: rgba(4, 18, 38, 0.75) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(0, 110, 255, 0.12) !important;
    color: #b9c9dc !important;
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    padding: 7px 9px !important;
}

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

.dropdown-services .badge {
    font-family: "Rajdhani", sans-serif;
    font-size: 11px !important;
    font-weight: 700;
    padding: 4px 7px !important;
    border-radius: 4px;
}

/* Tipo de conta */
.dropdown-services .badge.bg-secondary {
    background: linear-gradient(
        135deg,
        #34495e,
        #607d9a
    ) !important;

    color: #fff !important;
    box-shadow: 0 0 8px rgba(120, 160, 200, 0.2);
}

/* Moedas */
.dropdown-services .badge.bg-warning {
    background: linear-gradient(
        135deg,
        #8c6500,
        #e6b832
    ) !important;

    color: #fff !important;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.25);
}

/* Créditos */
.dropdown-services .badge.bg-success {
    background: linear-gradient(
        135deg,
        #08783d,
        #19b866
    ) !important;

    color: #fff !important;
    box-shadow: 0 0 8px rgba(25, 184, 102, 0.25);
}


/* =========================================================
   SERVIÇOS
   ========================================================= */

.dropdown-services-title {
    color: #fff !important;
    font-family: "Rajdhani", sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;

    margin: 10px 4px 6px !important;
    padding-bottom: 5px;

    border-bottom: 1px solid rgba(0, 119, 255, 0.3);
}


/* Lista de serviços */
.dropdown-services > div.list-group {
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
}

.dropdown-services > div.list-group .list-group-item {
    position: relative;

    background: rgba(5, 20, 42, 0.65) !important;
    color: #c9d7e8 !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(0, 110, 255, 0.08) !important;

    font-family: "Rajdhani", sans-serif;
    font-size: 13px;

    padding: 7px 9px 7px 16px !important;

    transition: all 0.2s ease;
}

/* Barrinha azul */
.dropdown-services > div.list-group .list-group-item::before {
    content: "";

    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);

    width: 3px;
    height: 14px;

    background: #168cff;
    border-radius: 3px;

    box-shadow: 0 0 7px rgba(22, 140, 255, 0.8);
}

/* Hover */
.dropdown-services > div.list-group .list-group-item:hover {
    background: rgba(0, 90, 180, 0.22) !important;
    color: #fff !important;
    padding-left: 20px !important;

    box-shadow: inset 0 0 15px rgba(0, 110, 255, 0.08);
}


/* =========================================================
   LOGOUT
   ========================================================= */

.dropdown-services .btn-danger {
    width: 100%;
    height: 34px;

    border-radius: 5px !important;

    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;

    background: linear-gradient(
        135deg,
        #7d1111,
        #c62828
    ) !important;

    border: 1px solid rgba(255, 80, 80, 0.5) !important;

    box-shadow:
        0 0 10px rgba(220, 40, 40, 0.18);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .dropdown-services {
        width: 290px !important;
    }

    .dropdown-services > ul.list-group > li {
        font-size: 12px;
        padding: 6px 8px !important;
    }

    .dropdown-services .badge {
        font-size: 10px !important;
    }

    .dropdown-services > div.list-group .list-group-item {
        font-size: 12px;
        padding: 6px 8px 6px 15px !important;
    }
}
/* =========================================================
   MU ARISE - MENU SERVIÇOS DA CONTA
   ========================================================= */

#panel-services {
    margin-bottom: 20px;
}

/* Container */
#panel-services .list-group {
    background: linear-gradient(
        145deg,
        rgba(3, 14, 30, 0.96),
        rgba(5, 25, 52, 0.96)
    );

    border: 1px solid rgba(0, 115, 255, 0.30);
    border-radius: 8px;

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.40),
        inset 0 0 20px rgba(0, 90, 180, 0.04);
}

/* =========================================================
   ITENS
   ========================================================= */

#panel-services .list-group-item {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 45px;

    padding: 10px 14px 10px 20px !important;

    background: rgba(4, 17, 35, 0.78) !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(0, 100, 220, 0.10) !important;

    color: #b9c9dc !important;

    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 600;

    letter-spacing: 0.3px;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        padding-left 0.25s ease,
        box-shadow 0.25s ease;
}

/* Remove borda do último */
#panel-services .list-group-item:last-child {
    border-bottom: 0 !important;
}


/* =========================================================
   BARRA LUMINOSA LATERAL
   ========================================================= */

#panel-services .list-group-item::before {
    content: "";

    position: absolute;

    left: 7px;
    top: 50%;

    width: 3px;
    height: 0;

    transform: translateY(-50%);

    border-radius: 4px;

    background: #168cff;

    box-shadow:
        0 0 6px rgba(22, 140, 255, 0.9),
        0 0 12px rgba(22, 140, 255, 0.5);

    transition: height 0.25s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

#panel-services .list-group-item:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            90deg,
            rgba(0, 100, 210, 0.20),
            rgba(0, 50, 120, 0.10)
        ) !important;

    padding-left: 25px !important;

    box-shadow:
        inset 0 0 18px rgba(0, 100, 255, 0.07);
}

#panel-services .list-group-item:hover::before {
    height: 22px;
}


/* =========================================================
   ITEM ATIVO
   ========================================================= */

#panel-services .list-group-item.active {
    position: relative;

    color: #ffffff !important;

    background:
        linear-gradient(
            90deg,
            rgba(0, 91, 190, 0.65),
            rgba(4, 39, 82, 0.85)
        ) !important;

    border: 0 !important;

    box-shadow:
        inset 0 0 20px rgba(0, 120, 255, 0.12),
        0 0 12px rgba(0, 100, 255, 0.10);

    text-shadow:
        0 0 8px rgba(100, 190, 255, 0.65);
}

/* Barra do ativo */
#panel-services .list-group-item.active::before {
    height: 28px;

    background: #35a8ff;

    box-shadow:
        0 0 8px #168cff,
        0 0 16px rgba(22, 140, 255, 0.8);
}


/* =========================================================
   EFEITO DE BRILHO NO ATIVO
   ========================================================= */

#panel-services .list-group-item.active::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 35%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(80, 180, 255, 0.07)
    );

    pointer-events: none;
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 991px) {

    #panel-services {
        margin-top: 10px;
    }

    #panel-services .list-group-item {
        min-height: 43px;
        font-size: 14px;
    }
}

@media (max-width: 576px) {

    #panel-services .list-group-item {
        min-height: 41px;

        padding: 9px 12px 9px 18px !important;

        font-size: 13px;
    }

    #panel-services .list-group-item:hover {
        padding-left: 22px !important;
    }
}
/* =========================================================
   MU ARISE - ALTERAR SENHA
   ========================================================= */

/* Painel principal */
.col-lg-9.shadow-new:has(#current-password) {
    position: relative;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(0, 100, 255, 0.10),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(3, 14, 30, 0.98),
            rgba(5, 24, 50, 0.96)
        ) !important;

    border: 1px solid rgba(0, 110, 255, 0.30);
    border-radius: 12px;

    padding: 28px !important;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.45),
        inset 0 0 30px rgba(0, 80, 180, 0.04);

    overflow: hidden;
}

/* Linha luminosa superior */
.col-lg-9.shadow-new:has(#current-password)::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #168cff,
        #55b9ff,
        #168cff,
        transparent
    );

    box-shadow: 0 0 12px rgba(22, 140, 255, 0.7);
}


/* =========================================================
   TÍTULO
   ========================================================= */

.col-lg-9.shadow-new:has(#current-password) > h3 {
    position: relative;

    margin: 0 0 22px !important;
    padding: 0 0 12px 15px;

    color: #ffffff;

    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 27px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1px;

    border-bottom: 1px solid rgba(0, 120, 255, 0.22);

    text-shadow:
        0 0 10px rgba(60, 160, 255, 0.35);
}

/* Barra azul do título */
.col-lg-9.shadow-new:has(#current-password) > h3::before {
    content: "";

    position: absolute;
    left: 0;
    top: 2px;

    width: 4px;
    height: 27px;

    border-radius: 3px;

    background: #168cff;

    box-shadow:
        0 0 8px #168cff,
        0 0 15px rgba(22, 140, 255, 0.7);
}


/* =========================================================
   AVISOS
   ========================================================= */

.col-lg-9.shadow-new:has(#current-password) > div:not(.mb-3) {
    color: #aebfd2;

    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 14px;
    line-height: 1.5;

    padding: 8px 12px;

    background: rgba(0, 60, 120, 0.10);

    border-left: 2px solid rgba(255, 70, 70, 0.55);

    border-radius: 4px;

    margin-bottom: 5px;
}

/* Segundo aviso */
.col-lg-9.shadow-new:has(#current-password) > div.mb-3 {
    color: #aebfd2;

    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 14px;

    padding: 8px 12px;

    background: rgba(0, 60, 120, 0.10);

    border-left: 2px solid rgba(255, 70, 70, 0.55);

    border-radius: 4px;

    margin-bottom: 25px !important;
}


/* Asteriscos */
.col-lg-9.shadow-new:has(#current-password) .text-danger {
    color: #ff5757 !important;

    text-shadow:
        0 0 6px rgba(255, 50, 50, 0.5);
}


/* =========================================================
   FORMULÁRIO
   ========================================================= */

.col-lg-9.shadow-new:has(#current-password) form[data-form-request] {
    max-width: 720px;

    margin: 0 auto;

    padding: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(2, 15, 32, 0.80),
            rgba(5, 28, 58, 0.55)
        );

    border: 1px solid rgba(0, 105, 220, 0.20);

    border-radius: 9px;

    box-shadow:
        inset 0 0 25px rgba(0, 100, 255, 0.04);
}


/* =========================================================
   LABELS
   ========================================================= */

.col-lg-9.shadow-new:has(#current-password) .form-label {
    display: block;

    margin-bottom: 7px;

    color: #d6e5f5;

    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 600;

    letter-spacing: 0.4px;
}


/* =========================================================
   INPUTS
   ========================================================= */

.col-lg-9.shadow-new:has(#current-password) .form-control {
    height: 46px;

    color: #ffffff !important;

    background:
        linear-gradient(
            145deg,
            rgba(3, 15, 30, 0.95),
            rgba(5, 28, 55, 0.90)
        ) !important;

    border: 1px solid rgba(0, 110, 220, 0.28) !important;

    border-radius: 6px !important;

    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 15px;

    padding: 9px 13px;

    transition: all 0.25s ease;

    box-shadow:
        inset 0 0 10px rgba(0, 0, 0, 0.30);
}

/* Placeholder */
.col-lg-9.shadow-new:has(#current-password) .form-control::placeholder {
    color: rgba(180, 200, 220, 0.35);
}

/* Foco */
.col-lg-9.shadow-new:has(#current-password) .form-control:focus {
    border-color: #168cff !important;

    background:
        linear-gradient(
            145deg,
            rgba(4, 20, 40, 1),
            rgba(5, 35, 70, 0.95)
        ) !important;

    box-shadow:
        0 0 0 2px rgba(22, 140, 255, 0.08),
        0 0 15px rgba(22, 140, 255, 0.18),
        inset 0 0 12px rgba(0, 100, 255, 0.06) !important;

    outline: none;
}


/* =========================================================
   ESPAÇAMENTO ENTRE CAMPOS
   ========================================================= */

.col-lg-9.shadow-new:has(#current-password) form .mb-3 {
    margin-bottom: 18px !important;
}


/* =========================================================
   BOTÃO ALTERAR
   ========================================================= */

.col-lg-9.shadow-new:has(#current-password) form .btn.btn-primary {
    min-width: 145px;
    height: 44px;

    margin-top: 5px;

    font-family: "Rajdhani", "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1px;

    border-radius: 6px !important;

    background:
        linear-gradient(
            135deg,
            #063d78,
            #0878d1 50%,
            #06447f
        ) !important;

    border: 1px solid rgba(70, 175, 255, 0.60) !important;

    box-shadow:
        0 0 10px rgba(0, 120, 255, 0.22),
        inset 0 1px rgba(255, 255, 255, 0.15);

    transition: all 0.25s ease;
}

.col-lg-9.shadow-new:has(#current-password) form .btn.btn-primary:hover {
    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #0878d1,
            #159cff,
            #0878d1
        ) !important;

    box-shadow:
        0 0 15px rgba(0, 140, 255, 0.45),
        0 5px 18px rgba(0, 0, 0, 0.30);
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width: 768px) {

    .col-lg-9.shadow-new:has(#current-password) {
        padding: 20px !important;
    }

    .col-lg-9.shadow-new:has(#current-password) > h3 {
        font-size: 23px;
    }

    .col-lg-9.shadow-new:has(#current-password) form[data-form-request] {
        padding: 17px;
    }

    .col-lg-9.shadow-new:has(#current-password) form .btn.btn-primary {
        width: 100%;
    }
}

@media (max-width: 480px) {

    .col-lg-9.shadow-new:has(#current-password) {
        padding: 15px !important;
    }

    .col-lg-9.shadow-new:has(#current-password) > h3 {
        font-size: 21px;
    }

    .col-lg-9.shadow-new:has(#current-password) form[data-form-request] {
        padding: 14px;
    }
}