@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root{
    --body-background: #0B0B0B; 
    --scroll-bar-background: #1f1f1f;
    --navbar-public-background: #0B0B0B; 
    --navbar-perfil-selecionar-background: #0B0B0B; 
    --navbar-user-background: rgba(11, 11, 11, 0.95); 
    --navbar-background: #0B0B0B;
    --navbar-border-color: transparent;
    --navbar-list-group-item-color: #F5F5F5;
    --navbar-list-group-item-hover-color: #ffffff; 

    --sidebar-background: #0B0B0B;
    --sidebar-border-color: transparent;
    --sidebar-text-color: #a6a6a6;
    --sidebar-text-hover-color: #ffffff;
    --sidebar-list-group-background: transparent;
    --sidebar-list-group-hover-background: rgba(255, 255, 255, 0.1);
    --sidebar-list-group-two-background: transparent;
    --sidebar-list-group-two-hover-background: rgba(255, 255, 255, 0.1);
  
    --label-color: #bfbfbf;
    --input-background: #1f1f1f;
    --input-disabled-background: #141414;
    --input-hover-background: #2b2b2b;
    --input-color: #ffffff;
    --input-border: #333333;
    --input-border-focus: #e50914;
    --input-placeholder: #666666;
    --input-group-disabled-background: #141414;
    --input-group-color: #b3b3b3;
    --input-group-border-hover: #e50914;
    --input-group-color-hover: #e50914;
    --input-form-check-background: #333333;
    --input-form-check-border: #b3b3b3;
    --input-form-check-checked-background: #e50914;

    --list-group-item-background: #0B0B0B;
    --list-group-item-border: #333333;
    --list-group-item-color: #b3b3b3;
    
    --datatables-background: #0B0B0B;
    --datatables-border: #333333;
    --datatables-color: #b3b3b3;
    --datatables-page-link-color: #ffffff;
    --datatables-page-link-active-color: #e50914;
    --datatables-page-link-border-color: #333333;
    --datatables-page-link-background: #0B0B0B;

    --site-border-color-one: #333333; 
    --site-border-color-two: #e50914; 

    --btn-one-background: #e50914;
    --btn-one-hover-background: #b2070f;
    --btn-one-color: #fff;
    --btn-one-hover-color: #fff;
 
    --btn-two-background: #6C63FF; /* Neon Purple */
    --btn-two-hover-background: #5a52d5;
    --btn-two-color: #fff;
    --btn-two-hover-color: #fff; 

    --btn-three-background: #00E5FF; /* Neon Blue */
    --btn-three-hover-background: #00b8cc;
    --btn-three-color: #fff;
    --btn-three-hover-color: #fff;

    --btn-four-background: #ff5e00;
    --btn-four-hover-background: #db5305;
    --btn-four-color: #fff;
    --btn-four-hover-color: #fff;

    --btn-five-background: #0656ec;
    --btn-five-hover-background: #054dd1;
    --btn-five-color: #fff;
    --btn-five-hover-color: #fff;

    --card-background-one: #121212;
    --card-color-one: #fff;
    --card-user-background: rgba(0,0,0,0.5);

    --text-color-white: #fff;
    --text-green: #46d369; 
    --text-yellow: #e2af05;
    --text-red: #e50914;
    --text-blue: #00E5FF;
    --text-purple: #6C63FF;
    --text-color: #F5F5F5;
    --text-color-hover: #ffffff;

    --page-opacity-background: rgba(0,0,0,0.7);

    --footer-nav-item-color: #808080;
    --footer-nav-item-hover-color: #ffffff;
    --footer-copyright-color: #808080;

    --modal-background: #181818;
    --modal-border: #333333;

    --stream-list-border: transparent; /* Clean look */
}

body {
    background-color: var(--body-background) !important;
    color: var(--text-color);
}

/* Glassmorphism & Animations */
.glass-card {
    background: rgba(0, 0, 0, 0.5) !important; /* Mais transparente a pedido do usuario */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-card {
    animation: slideUpFade 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.hover-scale {
    transition: all 0.3s ease;
}

.hover-scale:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
    border-color: rgba(255,255,255,0.3) !important;
}

/* Specific Plan Card Styles */
.premium-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.premium-item {
    transition: all 0.3s ease;
    padding: 20px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.premium-item.glass-card {
    background: rgba(20, 20, 20, 0.5) !important; /* Consistente com os outros */
}

.premium-item:hover {
    z-index: 10;
}

.premium-item .top-circle {
    text-align: center;
    margin-bottom: 20px;
}

.premium-item h4 {
    font-size: 2rem;
    color: var(--text-red);
    font-weight: bold;
}

.premium-item h5.tela {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: var(--text-color-white);
}

.premium-item .list-group-item {
    background: transparent;
    border: none;
    color: var(--text-color);
    padding: 5px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.premium-item .footer {
    margin-top: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
}