/* Reset e Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100% !important;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    color: #e2e8f0;
    overflow-x: hidden !important;
    min-height: 100vh !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ========================================
   BARRA DE ROLAGEM GLOBAL (SCROLLBAR)
   ======================================== */
/* Navegadores baseados em WebKit/Chromium (Chrome, Edge, Brave, etc.) */
::-webkit-scrollbar {
    width: 6px; /* barra mais fina */
}

::-webkit-scrollbar-track {
    background: #020617; /* fundo quase preto para contrastar */
}

::-webkit-scrollbar-thumb {
    background: #fbbf24; /* amarelo ouro */
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #facc15; /* amarelo um pouco mais claro no hover */
}

/* Firefox */
html {
    scrollbar-width: thin; /* já é mais fina; "auto" seria mais grossa */
    scrollbar-color: #fbbf24 #020617; /* polegar, trilho */
}

/* Wrapper principal - garantir footer no final */
/* Removido CSS duplicado - usando apenas a versão no final do arquivo */

/* ========================================
   ANIMAÇÕES PERSONALIZADAS
   ======================================== */

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes spinSlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(251, 191, 36, 0.6);
    }
}

@keyframes bounceSubtle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(251, 191, 36, 0.6);
    }
}

@keyframes gentle-pulse {
    0%, 100% {
        opacity: 0.2;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(1.1);
    }
}

@keyframes gentle-bounce {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes smooth-float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    33% {
        transform: translateY(-15px) rotate(2deg);
    }
    66% {
        transform: translateY(-5px) rotate(-1deg);
    }
}

@keyframes gentle-pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 30px rgba(251, 191, 36, 0.6);
        transform: scale(1.02);
    }
}

@keyframes soft-glow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(251, 191, 36, 0.2), 0 0 30px rgba(251, 191, 36, 0.1);
        opacity: 0.3;
    }
    50% {
        box-shadow: 0 0 25px rgba(251, 191, 36, 0.4), 0 0 50px rgba(251, 191, 36, 0.2);
        opacity: 0.4;
    }
}

@keyframes gentle-bounce-subtle {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* Classes de Animação */
.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in-right {
    animation: fadeInRight 0.8s ease-out forwards;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-spin-slow {
    animation: spinSlow 20s linear infinite;
}

.animate-shimmer {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

.animate-soft-glow {
    animation: soft-glow 3s ease-in-out infinite;
}

.animate-gentle-bounce-subtle {
    animation: gentle-bounce-subtle 2s ease-in-out infinite;
}

.animate-bounce-subtle {
    animation: bounceSubtle 2s ease-in-out infinite;
}

.animate-pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

.animate-gentle-pulse {
    animation: gentle-pulse 3s ease-in-out infinite;
}

.animate-gentle-bounce {
    animation: gentle-bounce 2s ease-in-out infinite;
}

.animate-smooth-float {
    animation: smooth-float 4s ease-in-out infinite;
}

.animate-gentle-pulse-glow {
    animation: gentle-pulse-glow 2s ease-in-out infinite;
}

/* ========================================
   LOADING SCREEN
   ======================================== */

#pageLoader {
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#pageLoader.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Conteúdo da página - invisível até carregar (SEO-friendly) */
.page-content-hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in, visibility 0.5s ease-in;
}

.page-content-visible {
    opacity: 1;
    visibility: visible;
}

/* pageContent deve ser flex container e ocupar TODO o espaço disponível do body */
#pageContent {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    flex-grow: 1 !important;
    min-height: 100vh !important;
}

/* min-h-screen dentro do pageContent deve crescer para ocupar todo o espaço */
#pageContent > .min-h-screen {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    flex-grow: 1 !important;
    min-height: 100vh !important;
}

/* Animação de rotação lenta para a logo */
@keyframes spin-slow-loader {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loader-spin {
    animation: spin-slow-loader 3s linear infinite;
}

/* Animação de mudança de cor para os naipes - da esquerda para direita */
@keyframes suit-color-change {
    0%, 100% {
        color: #fbbf24; /* amarelo ouro */
    }
    50% {
        color: #ffffff; /* branco */
    }
}

.suit-icon {
    animation: suit-color-change 0.3s ease-in-out infinite;
    display: inline-block;
    /* Velocidade: 10x mais rápido que a logo (logo 3s = 1 rotação, naipes 0.3s = 10 ciclos por rotação) */
}

/* Delay escalonado da esquerda para direita (efeito onda) */
.suit-icon:nth-child(1) {
    animation-delay: 0s; /* ♠ primeiro */
}

.suit-icon:nth-child(2) {
    animation-delay: 0.075s; /* ♥ segundo */
}

.suit-icon:nth-child(3) {
    animation-delay: 0.15s; /* ♦ terceiro */
}

.suit-icon:nth-child(4) {
    animation-delay: 0.225s; /* ♣ quarto */
}

/* Animação de mudança de cor para o texto CARREGANDO - metade da velocidade dos naipes */
#loadingText {
    animation: suit-color-change 0.6s ease-in-out infinite;
    /* Metade da velocidade dos naipes (naipes 0.3s, texto 0.6s) */
}

/* ========================================
   ANIMAÇÕES BLOCKCHAIN
   ======================================== */

@keyframes blockchain-pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

@keyframes blockchain-flow {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes blockchain-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes blockchain-glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(187, 153, 19, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(187, 153, 19, 0.6);
    }
}

/* ========================================
   ELEMENTOS BLOCKCHAIN
   ======================================== */

.blockchain-bg {
    position: relative;
    overflow: hidden;
}

.blockchain-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.blockchain-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, #bb9913, transparent);
    animation: blockchain-flow 3s ease-in-out infinite;
}

.blockchain-line:nth-child(1) {
    top: 20%;
    left: 0;
    width: 100%;
    animation-delay: 0s;
}

.blockchain-line:nth-child(2) {
    top: 40%;
    left: 0;
    width: 100%;
    animation-delay: 0.5s;
}

.blockchain-line:nth-child(3) {
    top: 60%;
    left: 0;
    width: 100%;
    animation-delay: 1s;
}

.blockchain-line:nth-child(4) {
    top: 80%;
    left: 0;
    width: 100%;
    animation-delay: 1.5s;
}

.blockchain-line:nth-child(5) {
    top: 0;
    left: 20%;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #bb9913, transparent);
    animation: blockchain-flow 4s ease-in-out infinite;
    animation-delay: 0.2s;
}

.blockchain-line:nth-child(6) {
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #bb9913, transparent);
    animation: blockchain-flow 4s ease-in-out infinite;
    animation-delay: 1.2s;
}

.blockchain-line:nth-child(7) {
    top: 0;
    left: 80%;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, #bb9913, transparent);
    animation: blockchain-flow 4s ease-in-out infinite;
    animation-delay: 2.2s;
}

.blockchain-nodes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.blockchain-node {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #bb9913;
    border-radius: 50%;
    animation: blockchain-pulse 2s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(187, 153, 19, 0.5);
}

.blockchain-node:nth-child(1) {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.blockchain-node:nth-child(2) {
    top: 20%;
    left: 50%;
    animation-delay: 0.3s;
}

.blockchain-node:nth-child(3) {
    top: 20%;
    left: 80%;
    animation-delay: 0.6s;
}

.blockchain-node:nth-child(4) {
    top: 50%;
    left: 20%;
    animation-delay: 0.9s;
}

.blockchain-node:nth-child(5) {
    top: 50%;
    left: 50%;
    animation-delay: 1.2s;
}

.blockchain-node:nth-child(6) {
    top: 50%;
    left: 80%;
    animation-delay: 1.5s;
}

.blockchain-node:nth-child(7) {
    top: 80%;
    left: 20%;
    animation-delay: 1.8s;
}

.blockchain-node:nth-child(8) {
    top: 80%;
    left: 80%;
    animation-delay: 2.1s;
}

.blockchain-connections {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.blockchain-connection {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, #bb9913, transparent);
    animation: blockchain-glow 3s ease-in-out infinite;
}

.blockchain-connection:nth-child(1) {
    top: 20%;
    left: 20%;
    width: 30%;
    animation-delay: 0s;
}

.blockchain-connection:nth-child(2) {
    top: 50%;
    left: 20%;
    width: 30%;
    animation-delay: 1s;
}

.blockchain-connection:nth-child(3) {
    top: 80%;
    left: 20%;
    width: 60%;
    animation-delay: 2s;
}

.blockchain-connection:nth-child(4) {
    top: 35%;
    left: 50%;
    width: 30%;
    animation-delay: 1.5s;
}

/* ========================================
   ELEMENTOS DE ATUALIZAÇÕES (LINHAS E PONTOS DE LUZ)
   ======================================== */

.updates-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.updates-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(187, 153, 19, 0.6), transparent);
    animation: blockchain-flow 4s ease-in-out infinite;
}

.updates-line:nth-child(1) {
    top: 15%;
    left: 0;
    width: 100%;
    animation-delay: 0s;
}

.updates-line:nth-child(2) {
    top: 35%;
    left: 0;
    width: 100%;
    animation-delay: 0.7s;
}

.updates-line:nth-child(3) {
    top: 55%;
    left: 0;
    width: 100%;
    animation-delay: 1.4s;
}

.updates-line:nth-child(4) {
    top: 75%;
    left: 0;
    width: 100%;
    animation-delay: 2.1s;
}

.updates-lights {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.updates-light {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #bb9913;
    border-radius: 50%;
    animation: blockchain-pulse 2s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(187, 153, 19, 0.8);
}

.updates-light:nth-child(1) {
    top: 15%;
    left: 25%;
    animation-delay: 0s;
}

.updates-light:nth-child(2) {
    top: 15%;
    left: 50%;
    animation-delay: 0.4s;
}

.updates-light:nth-child(3) {
    top: 15%;
    left: 75%;
    animation-delay: 0.8s;
}

.updates-light:nth-child(4) {
    top: 50%;
    left: 15%;
    animation-delay: 1.2s;
}

.updates-light:nth-child(5) {
    top: 50%;
    left: 50%;
    animation-delay: 1.6s;
}

.updates-light:nth-child(6) {
    top: 50%;
    left: 85%;
    animation-delay: 2s;
}

.updates-light:nth-child(7) {
    top: 85%;
    left: 30%;
    animation-delay: 2.4s;
}

.updates-light:nth-child(8) {
    top: 85%;
    left: 70%;
    animation-delay: 2.8s;
}

/* ========================================
   SELETOR DE IDIOMAS
   ======================================== */

.language-selector {
    height: 2.25rem;
    padding: 0.5rem 2rem 0.5rem 1rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10;
    min-width: 80px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.language-selector:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.language-selector:active {
    transform: scale(0.95);
}

.language-selector:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.language-selector option {
    background-color: #1e293b;
    color: #e2e8f0;
    padding: 0.5rem;
    font-weight: 500;
}

.language-selector option:hover {
    background-color: #334155;
}

/* Versão Mobile */
.language-selector-mobile {
    height: 2rem;
    padding: 0.375rem 1.5rem 0.375rem 0.75rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.375rem center;
    background-repeat: no-repeat;
    background-size: 0.875rem 0.875rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10;
    min-width: 70px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.language-selector-mobile:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.language-selector-mobile:active {
    transform: scale(0.95);
}

.language-selector-mobile:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.language-selector-mobile option {
    background-color: #1e293b;
    color: #e2e8f0;
    padding: 0.25rem;
    font-weight: 500;
    font-size: 0.75rem;
}

.language-selector-mobile option:hover {
    background-color: #334155;
}

/* ========================================
   OCULTAR CARTAS ESPECÍFICAS
   ======================================== */

/* Ocultar as cartas específicas que foram removidas */
.absolute.-top-8.-left-8:has-text("Q♠"),
.absolute.-top-4.-right-8:has-text("K♥"),
.absolute.-bottom-8.-left-4:has-text("A♦"),
.absolute.-bottom-4.-right-12:has-text("J♣") {
    display: none !important;
}

/* ========================================
   RESPONSIVIDADE
   ======================================== */

/* Proteção para o container dos botões do header */
#headerButtons {
    position: relative;
    z-index: 20;
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    flex-direction: row;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto;
    height: auto;
}

#headerButtons .language-selector {
    flex-shrink: 0;
    order: 1;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#headerButtons a {
    order: 2;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* Responsividade já está incluída nas classes específicas */

/* ========================================
   RESPONSIVIDADE MOBILE - AJUSTES CUIDADOSOS
   ======================================== */

/* Garantir que não haja overflow horizontal - APENAS no html e body */
html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ========================================
   UTILITÁRIOS
   ======================================== */

.text-gradient {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.bg-gradient-dark {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}

.shadow-glow {
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
}

/* ========================================
   BOTÕES DE AÇÃO - LAYOUT RESPONSIVO
   ======================================== */
.backdrop-blur {
    backdrop-filter: blur(10px);
}

/* ========================================
   ESTADOS DE HOVER E FOCUS
   ======================================== */

.hover-lift {
    transition: transform 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
}

.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.4);
}

/* ========================================
   MODAL RESPONSIVIDADE E NUMERAÇÃO
   ======================================== */


/* Numeração dos passos de instalação */
.install-steps-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    text-align: left;
}

.install-steps-list li {
    padding-left: 0;
    margin-left: 0;
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    list-style: none;
}

.install-steps-list li span:first-child {
    margin-right: 0.75rem !important;
    display: inline-block !important;
    min-width: 2rem !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #fbbf24 !important; /* Amarelo ouro apenas para números */
    font-weight: 700 !important; /* font-bold */
    font-size: 1.125rem !important; /* Tamanho maior para destacar */
    line-height: 1.5 !important;
}

/* Texto dos passos na cor padrão */
.install-steps-list li span:not(:first-child) {
    color: #d1d5db !important; /* text-gray-300 - cor padrão */
}

/* Garantir que os números apareçam em todos os dispositivos - apenas o primeiro span (número) */
#installAppModal .install-steps-list li span:first-child,
#howToInstallAppModal .install-steps-list li span:first-child {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #fbbf24 !important; /* Amarelo ouro apenas para números */
    font-weight: 700 !important;
}

/* Estilos para a lista numerada do modal de instalação */
#howToInstallAppModal .install-steps-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    text-align: left;
}

#howToInstallAppModal .install-steps-list li {
    padding-left: 0;
    margin-left: 0;
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    list-style: none;
}

#howToInstallAppModal .install-steps-list li span:first-child {
    margin-right: 0.75rem !important;
    display: inline-block !important;
    min-width: 2rem !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #fbbf24 !important; /* Amarelo ouro apenas para os números */
    font-weight: 700 !important;
    font-size: 1.125rem !important; /* Tamanho maior para destacar */
    line-height: 1.5 !important;
}

/* Garantir que o texto dos passos fique na cor padrão (cinza) */
#howToInstallAppModal .install-steps-list li span:not(:first-child) {
    color: #d1d5db !important; /* text-gray-300 - cor padrão dos tutoriais */
}

/* Garantir que os links dentro do texto mantenham sua cor */
#howToInstallAppModal .install-steps-list li span:not(:first-child) strong {
    color: #fbbf24 !important; /* Manter URLs e texto destacado em amarelo */
}

/* Quebrar URLs longas no modal de instalação */
#installAppModal li,
#installAppModal p,
#installAppModal strong,
#installAppModal a {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
}

/* Garantir que URLs quebrem corretamente */
#installAppModal a[href*="https://"],
#installAppModal strong {
    display: inline !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
}

/* FORÇAR modal de instalação a ficar SEMPRE oculto por padrão */
#installAppModal {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Só mostrar quando tiver AMBAS as condições: não hidden E user-triggered */
#installAppModal:not(.hidden).user-triggered {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Se tiver hidden, SEMPRE oculto, mesmo com user-triggered */
#installAppModal.hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Garantir que modais ocultos não apareçam */
#howToRegisterModal.hidden,
#howToDepositModal.hidden,
#howToWithdrawModal.hidden {
    display: none !important;
}

/* Garantir que modais sem hidden apareçam */
#howToRegisterModal:not(.hidden),
#howToDepositModal:not(.hidden),
#howToWithdrawModal:not(.hidden) {
    display: flex !important;
}

/* ========================================
   AJUSTE DE ESPAÇAMENTO ENTRE TÍTULOS
   Artigos do Blog e Páginas de Dicas de Poker
   ======================================== */

/* H2 - FORÇAR margin-top alto para separar do texto acima */
/* Regras com máxima especificidade para sobrescrever Tailwind */
html body section.pb-16 .bg-slate-900 h2.mt-10,
html body section.pb-16 .bg-slate-900 h2.mt-10.mb-6 {
    margin-top: 4rem !important; /* 4rem = 64px - espaço generoso */
}

/* H2 após parágrafos - espaço extra */
html body section.pb-16 .bg-slate-900 p + h2.mt-10,
html body section.pb-16 .bg-slate-900 p + h2.mt-10.mb-6 {
    margin-top: 4.5rem !important; /* 4.5rem = 72px */
}

/* H2 após listas - espaço extra */
html body section.pb-16 .bg-slate-900 ul + h2.mt-10,
html body section.pb-16 .bg-slate-900 ul + h2.mt-10.mb-6,
html body section.pb-16 .bg-slate-900 ol + h2.mt-10,
html body section.pb-16 .bg-slate-900 ol + h2.mt-10.mb-6 {
    margin-top: 4.5rem !important; /* 4.5rem = 72px */
}

/* H2 após divs - espaço extra */
html body section.pb-16 .bg-slate-900 div + h2.mt-10,
html body section.pb-16 .bg-slate-900 div + h2.mt-10.mb-6 {
    margin-top: 4.5rem !important; /* 4.5rem = 72px */
}

/* H2 genérico - aplicar espaçamento padrão */
html body section.pb-16 .bg-slate-900 h2 {
    margin-top: 3.5rem !important; /* Espaço generoso para todos os H2 */
    margin-bottom: 1.25rem !important;
}

html body section.pb-16 .bg-slate-900 h2.mb-6 {
    margin-bottom: 1.25rem !important;
}

/* H3 - Aumentar espaçamento superior e inferior */
section.pb-16 .bg-slate-900 h3.mt-8 {
    margin-top: 2rem !important; /* Aumentado para 2rem - espaço adequado acima */
    padding-top: 0.5rem !important; /* Espaço extra no topo */
}

section.pb-16 .bg-slate-900 h3.mb-4 {
    margin-bottom: 1rem !important; /* Aumentado para 1rem - espaço adequado abaixo */
    padding-bottom: 0.25rem !important; /* Espaço extra na base */
}

/* H3 sem classes específicas - aplicar espaçamento padrão */
section.pb-16 .bg-slate-900 h3 {
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.25rem !important;
}

/* H3 dentro de cards - reduzir espaçamento */
section.pb-16 .bg-slate-900 [class*="bg-slate-800"] h3,
section.pb-16 .bg-slate-900 [class*="bg-red-900"] h3,
section.pb-16 .bg-slate-900 [class*="bg-slate-800"] h3.mb-3,
section.pb-16 .bg-slate-900 [class*="bg-red-900"] h3.mb-3 {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important; /* Reduzido para cards */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* H4 - Aumentar espaçamento */
section.pb-16 .bg-slate-900 h4.mb-3 {
    margin-bottom: 0.75rem !important; /* Aumentado para 0.75rem */
    margin-top: 1.5rem !important; /* Adicionar espaço superior */
    padding-bottom: 0.25rem !important;
}

/* H4 sem classes específicas */
section.pb-16 .bg-slate-900 h4 {
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.25rem !important;
}

/* Ajuste para títulos dentro de cards/boxes - reduzir espaçamento */
section.pb-16 .bg-slate-900 [class*="bg-slate-800"] h3,
section.pb-16 .bg-slate-900 [class*="bg-slate-800"] h4,
section.pb-16 .bg-slate-900 [class*="bg-red-900"] h3,
section.pb-16 .bg-slate-900 [class*="bg-red-900"] h4 {
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important; /* Reduzido para 0.5rem - espaçamento menor nos cards */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Parágrafos após títulos - adicionar espaço adequado */
section.pb-16 .bg-slate-900 h2 + p,
section.pb-16 .bg-slate-900 h3 + p,
section.pb-16 .bg-slate-900 h4 + p {
    margin-top: 0.75rem !important; /* Espaço adequado após títulos */
    padding-top: 0 !important;
}

/* Regras adicionais para garantir margin-top em todos os casos */
/* Sobrescrever qualquer classe Tailwind que possa estar interferindo */
html body section.pb-16 .bg-slate-900 .text-gray-300 h2.mt-10,
html body section.pb-16 .bg-slate-900 .text-gray-300 h2.mt-10.mb-6 {
    margin-top: 4rem !important; /* 4rem = 64px */
}

/* H2 após qualquer elemento dentro do container de texto */
html body section.pb-16 .bg-slate-900 .text-gray-300 > * + h2.mt-10,
html body section.pb-16 .bg-slate-900 .text-gray-300 > * + h2.mt-10.mb-6 {
    margin-top: 4.5rem !important; /* 4.5rem = 72px */
}

/* Garantir quebra de linha adequada */
section.pb-16 .bg-slate-900 h1,
section.pb-16 .bg-slate-900 h2,
section.pb-16 .bg-slate-900 h3,
section.pb-16 .bg-slate-900 h4 {
    display: block !important;
    line-height: 1.4 !important;
    page-break-after: avoid !important;
}

/* SOBRESCREVER: Cards do blog - usar line-height padrão do Tailwind text-xl (1.75rem) */
/* Esta regra deve vir DEPOIS da regra geral acima para ter prioridade */
section.pb-16 .bg-slate-900 .blog-card h3,
section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"][class*="from-slate-800"] h3,
html body section.pb-16 .bg-slate-900 .blog-card h3,
html body section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"][class*="from-slate-800"] h3 {
    line-height: 1.75rem !important; /* text-xl padrão do Tailwind - igual à home */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    page-break-after: auto !important;
}

/* Classe específica para o título dos cards do blog - máxima prioridade */
.blog-card-title {
    line-height: 1.75rem !important; /* text-xl padrão do Tailwind - igual à home */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important; /* mb-3 */
    display: block !important;
    page-break-after: auto !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    /* Garantir que o texto não seja afetado pelo container */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Garantir que o rodapé dos cards do blog sempre fique no fundo */
.blog-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Remover padding do card principal para a imagem colar nas bordas do card em todas as telas */
.blog-card.rounded-lg {
    padding: 0 !important;
}

.blog-card .flex.flex-col.flex-grow {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    min-height: 0 !important;
}

.blog-card .flex.flex-col.flex-grow > .flex.flex-col {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.blog-card .flex.items-center.justify-between.flex-shrink-0.mt-auto {
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

/* Garantir que o rodapé dos cards da home sempre fique no fundo */
/* Cards da seção "Últimas Atualizações" */
section .grid[class*="grid-cols"] > a.flex.flex-col.h-full[class*="bg-gradient"] {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

section .grid[class*="grid-cols"] > a.flex.flex-col.h-full[class*="bg-gradient"] .flex.flex-col.flex-grow {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    min-height: 0 !important;
}

section .grid[class*="grid-cols"] > a.flex.flex-col.h-full[class*="bg-gradient"] .flex.flex-col.flex-grow > .flex.flex-col {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

section .grid[class*="grid-cols"] > a.flex.flex-col.h-full[class*="bg-gradient"] .flex.items-center.justify-between.flex-shrink-0.mt-auto {
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

/* ========================================
   Rodapé dos Posts Relacionados - Desktop
   ======================================== */
/* No desktop, o "Ler mais" fica abaixo da data/tempo */
@media (min-width: 1024px) {
    .related-post-footer {
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        gap: 0.5rem !important;
    }
    
    .related-post-meta {
        order: 1 !important;
    }
    
    .related-post-read-more {
        order: 2 !important;
        width: 100% !important;
        justify-content: flex-end !important;
    }
}

/* ========================================
   Layout Responsivo - Seção Últimas Atualizações (Mobile)
   ======================================== */
/* Aplicar apenas no mobile (até 640px) */
@media (max-width: 639px) {
    section#atualizacoes .latest-updates-header,
    section#atualizacoes .container .latest-updates-header,
    section#torneios-destaque .latest-updates-header,
    section#torneios-destaque .container .latest-updates-header {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 0.75rem !important;
    }
    
    section#atualizacoes .latest-updates-header h2,
    section#atualizacoes .container .latest-updates-header h2,
    section#torneios-destaque .latest-updates-header h2,
    section#torneios-destaque .container .latest-updates-header h2 {
        text-align: center !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    section#atualizacoes .latest-updates-link,
    section#atualizacoes .container .latest-updates-link,
    section#torneios-destaque .latest-updates-link,
    section#torneios-destaque .container .latest-updates-link {
        text-align: center !important;
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
    }
}



/* Sobrescrever line-height para h3 dos cards do blog - usar padrão Tailwind text-xl (1.75rem) */
/* Regra com máxima especificidade para garantir que sobrescreva a regra geral line-height: 1.4 */
html body section.pb-16 .bg-slate-900 .blog-card h3,
html body section.pb-16 .bg-slate-900 .blog-card h3.text-xl,
html body section.pb-16 .bg-slate-900 .blog-card h3.line-clamp-2,
html body section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"][class*="from-slate-800"] h3,
html body section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"][class*="from-slate-800"] h3.text-xl,
html body section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"][class*="from-slate-800"] h3.line-clamp-2 {
    line-height: 1.75rem !important; /* text-xl padrão do Tailwind - igual à home */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important; /* mb-3 */
    /* Garantir que não há espaçamento extra */
    display: block !important;
    page-break-after: auto !important;
}

/* Sobrescrever TODAS as regras gerais para cards do blog - manter espaçamento igual à home */
/* Regras muito específicas para garantir que sobrescrevam tudo */
html body section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"][class*="from-slate-800"] h3,
html body section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"][class*="from-slate-800"] h3.mb-3,
html body section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"][class*="from-slate-800"] h3.mt-8,
html body section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"][class*="from-slate-800"] h3.mb-4 {
    line-height: 1.75rem !important; /* text-xl padrão do Tailwind - igual à home */
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important; /* mb-3 = 0.75rem */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: block !important;
    page-break-after: auto !important;
}

html body section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"][class*="from-slate-800"] p,
html body section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"][class*="from-slate-800"] p.text-gray-300,
html body section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"][class*="from-slate-800"] h3 + p,
html body section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"][class*="from-slate-800"] h4 + p {
    line-height: 1.625 !important; /* leading-relaxed = 1.625 */
    margin-top: 0 !important;
    margin-bottom: 1rem !important; /* mb-4 = 1rem */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

html body section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"][class*="from-slate-800"] span,
html body section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"][class*="from-slate-800"] span.text-xs {
    line-height: 1rem !important; /* text-xs line-height */
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important; /* mb-2 = 0.5rem */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Resetar TODAS as propriedades de espaçamento de texto nos cards do blog */
html body section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"][class*="from-slate-800"] * {
    word-spacing: normal !important;
    letter-spacing: normal !important;
    text-align: left !important;
}

/* Garantir que os cards do blog tenham exatamente o mesmo espaçamento da home */
/* Isolar completamente os cards do container pai bg-slate-900 */
html body section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"][class*="from-slate-800"] {
    word-spacing: normal !important;
    letter-spacing: normal !important;
    text-align: left !important;
    font-kerning: auto !important;
    text-rendering: optimizeLegibility !important;
    /* Resetar todas as propriedades que possam estar sendo herdadas */
    font-size: inherit !important;
    font-weight: inherit !important;
    font-family: inherit !important;
}

/* REMOVIDO TEMPORARIAMENTE PARA TESTE - Garantir que elementos de texto dentro dos cards não herdem estilos do container */
/* html body section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"][class*="from-slate-800"] .flex.flex-col.flex-grow {
    word-spacing: normal !important;
    letter-spacing: normal !important;
    text-align: left !important;
} */

/* REMOVIDO TEMPORARIAMENTE PARA TESTE - Regras específicas para a classe blog-card - garantir espaçamento idêntico à home */
/* .blog-card,
.blog-card * {
    word-spacing: normal !important;
    letter-spacing: normal !important;
    text-align: left !important;
    font-kerning: auto !important;
    text-rendering: optimizeLegibility !important;
} */

/* REMOVIDO TEMPORARIAMENTE PARA TESTE - Sobrescrever TODAS as regras do container bg-slate-900 para o h3 dos cards */
/* Regras com máxima especificidade para garantir que sobrescrevam tudo */
/* .blog-card h3,
.blog-card h3.text-xl,
.blog-card h3.font-bold,
.blog-card h3.text-white,
.blog-card h3.mb-3,
.blog-card h3.line-clamp-2,
html body section.pb-16 .bg-slate-900 .blog-card h3,
html body section.pb-16 .bg-slate-900 .blog-card h3.mb-3,
html body section.pb-16 .bg-slate-900 .blog-card h3.text-xl,
html body section.pb-16 .bg-slate-900 .blog-card h3.mt-8,
html body section.pb-16 .bg-slate-900 .blog-card h3.mb-4,
section.pb-16 .bg-slate-900 .blog-card h3,
section.pb-16 .bg-slate-900 .blog-card h3.mb-3,
section.pb-16 .bg-slate-900 .blog-card h3.mt-8,
section.pb-16 .bg-slate-900 .blog-card h3.mb-4,
section.pb-16 .bg-slate-900 h3.blog-card,
section.pb-16 .bg-slate-900 [class*="bg-slate-800"] .blog-card h3,
section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"] .blog-card h3 {
    line-height: 1.75rem !important; /* text-xl padrão do Tailwind */
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important; /* mb-3 = 0.75rem */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    text-align: left !important;
    /* Sobrescrever todas as regras anteriores do container */
    page-break-after: auto !important;
    /* Garantir que não há espaçamento extra */
    text-indent: 0 !important;
    white-space: normal !important;
} */

/* REMOVIDO TEMPORARIAMENTE PARA TESTE
.blog-card p {
    line-height: 1.625 !important;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.blog-card span.text-xs {
    line-height: 1rem !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
} */
/* FIM REMOVIDO TEMPORARIAMENTE PARA TESTE */

/* Removido - usando apenas CSS para espaçamento */

/* ========================================
   REMOVIDO TEMPORARIAMENTE PARA TESTE - CORREÇÃO ESPECÍFICA PARA H3 DOS CARDS DO BLOG
   Garantir que o h3 tenha exatamente o mesmo espaçamento da home
   ======================================== */
/* Regra com máxima especificidade para sobrescrever TODAS as outras */
/* html body section.pb-16 .bg-slate-900 .blog-card h3.text-xl.font-bold.text-white.mb-3.line-clamp-2,
html body section.pb-16 .bg-slate-900 .blog-card h3,
html body .blog-card h3.text-xl.font-bold.text-white.mb-3.line-clamp-2,
html body .blog-card h3 {
    /* Resetar TODOS os paddings e margins que possam estar causando afastamento */
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important; /* mb-3 */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* Garantir line-height correto - text-xl no Tailwind tem line-height: 1.75rem */
    /* Mas para line-clamp-2, precisamos de um line-height menor para evitar espaçamento excessivo */
    line-height: 1.5 !important;
    /* Forçar altura máxima para 2 linhas */
    max-height: calc(1.5 * 1.25rem * 2) !important; /* line-height * font-size * 2 linhas */
    overflow: hidden !important;
    /* Resetar espaçamento de texto */
    word-spacing: normal !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-indent: 0 !important;
    /* Outras propriedades */
    display: block !important;
    page-break-after: auto !important;
    white-space: normal !important;
} */
/* FIM REMOVIDO TEMPORARIAMENTE PARA TESTE */

/* ========================================
   CORREÇÃO FINAL PARA H3 DOS CARDS DO BLOG - MÁXIMA PRIORIDADE
   Esta regra deve ser a última para garantir que sobrescreva todas as outras
   ======================================== */
html body section.pb-16 .bg-slate-900 .blog-card h3.text-xl.font-bold.text-white.mb-3.line-clamp-2,
html body section.pb-16 .bg-slate-900 .blog-card h3.text-xl,
html body section.pb-16 .bg-slate-900 .blog-card h3,
html body section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"][class*="from-slate-800"] h3.text-xl.font-bold.text-white.mb-3.line-clamp-2,
html body section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"][class*="from-slate-800"] h3.text-xl,
html body section.pb-16 .bg-slate-900 [class*="bg-gradient-to-br"][class*="from-slate-800"] h3 {
    line-height: 1.75rem !important; /* text-xl padrão do Tailwind - igual à home */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important; /* mb-3 */
    display: block !important;
    page-break-after: auto !important;
}

/* ========================================
   CLASSE ESPECÍFICA PARA TÍTULO DOS CARDS DO BLOG - MÁXIMA PRIORIDADE
   Esta regra deve ser a última para garantir que sobrescreva todas as outras
   ======================================== */
.blog-card-title {
    line-height: 1.75rem !important; /* text-xl padrão do Tailwind - igual à home */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important; /* mb-3 */
    display: block !important;
    page-break-after: auto !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    text-align: left !important;
}

/* ========================================
   AJUSTE: Cards do blog dentro do container com mesma largura efetiva da home
   ======================================== */
/* Garantir que os cards do blog tenham a mesma largura efetiva da home */
/* Ajustar o padding do container bg-slate-900 apenas para a grid dos cards */
section.pb-16 .bg-slate-900 .grid[class*="grid-cols"] {
    /* Reduzir padding lateral do container apenas para a grid */
    margin-left: -1.5rem !important; /* Compensar p-6 (1.5rem) */
    margin-right: -1.5rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    width: calc(100% + 3rem) !important;
}

@media (min-width: 768px) {
    section.pb-16 .bg-slate-900 .grid[class*="grid-cols"] {
        margin-left: -2rem !important; /* Compensar md:p-8 (2rem) */
        margin-right: -2rem !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        width: calc(100% + 4rem) !important;
    }
}

@media (min-width: 1024px) {
    section.pb-16 .bg-slate-900 .grid[class*="grid-cols"] {
        margin-left: -3rem !important; /* Compensar lg:p-12 (3rem) */
        margin-right: -3rem !important;
        padding-left: 3rem !important;
        padding-right: 3rem !important;
        width: calc(100% + 6rem) !important;
    }
}

/* ========================================
   CORREÇÃO FINAL - FOOTER NO FUNDO
   ======================================== */
/* Garantir que html e body tenham altura total */
html {
    height: 100% !important;
}

/* Body deve ser flex container - sobrescrever qualquer style inline */
/* O overflow: auto do JS não deve interferir no flexbox */
body {
    min-height: 100vh !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    /* overflow-y pode ser auto (definido pelo JS), mas não interfere no flex */
}

/* O wrapper min-h-screen deve usar flexbox para empurrar o footer para baixo */
/* Ele é o único elemento flex dentro do body (header e menu são fixed) */
/* Considerar que pode estar dentro de #pageContent */
html body #pageContent div.min-h-screen,
html body div.min-h-screen {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    flex-grow: 1 !important;
    width: 100% !important;
    min-height: 0 !important;
    /* Garantir que o wrapper cresça para ocupar todo o espaço disponível */
}

/* Header fixed não conta no flexbox - ignorar */
html body div.min-h-screen > header[class*="fixed"],
html body header[class*="fixed"] {
    position: fixed !important;
    /* Não participa do flexbox */
}

/* Menu mobile fixed também não conta */
html body div.min-h-screen > div#mobileMenu,
html body div#mobileMenu {
    position: fixed !important;
    /* Não participa do flexbox */
}

/* Breadcrumbs não deve interferir - não crescer */
html body div.min-h-screen > nav[aria-label="Breadcrumb"],
html body nav[aria-label="Breadcrumb"] {
    flex-shrink: 0 !important;
}

/* Section precisa crescer para ocupar TODO o espaço disponível */
/* Usar flex-grow: 1 para empurrar o footer para baixo */
html body div.min-h-screen > section,
html body div.min-h-screen section {
    flex: 1 0 auto !important;
    flex-grow: 1 !important;
    min-height: 0 !important;
}

/* Se houver breadcrumbs antes do section, o section ainda deve crescer */
html body div.min-h-screen nav + section {
    flex: 1 0 auto !important;
    flex-grow: 1 !important;
}

/* Footer sempre no final - usar margin-top: auto para empurrar para baixo */
/* Considerar que pode estar dentro de #pageContent */
html body #pageContent div.min-h-screen > footer,
html body #pageContent div.min-h-screen footer,
html body div.min-h-screen > footer,
html body div.min-h-screen footer {
    flex-shrink: 0 !important;
    margin-top: auto !important;
}

/* ========================================
   FALLBACK PARA BACKDROP-FILTER
   Compatibilidade com Firefox Mobile e navegadores antigos
   ======================================== */
@supports not (backdrop-filter: blur(4px)) {
  /* Fallback para elementos com backdrop-blur que não suportam a propriedade */
  .backdrop-blur-sm,
  [class*="backdrop-blur"],
  header[class*="backdrop-blur"],
  div[class*="backdrop-blur"] {
    background-color: rgba(15, 23, 42, 0.98) !important;
  }
  
  /* Fallback específico para header */
  header.bg-slate-900\/95.backdrop-blur-sm {
    background-color: rgba(15, 23, 42, 0.98) !important;
  }
  
  /* Fallback para modais */
  div[class*="backdrop-blur"][class*="fixed"] {
    background-color: rgba(0, 0, 0, 0.7) !important;
  }
}


/* ========================================
   Acessibilidade - Screen Reader Only
   ======================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ========================================
   Correção de Contraste - Cartas Decorativas
   ======================================== */
/* Força contraste adequado nas cartas decorativas para acessibilidade */
/* Funciona para todos os idiomas (PT, EN, ES) */
div[class*="bg-white"].rounded-lg.p-2.text-red-500 {
    color: #dc2626 !important; /* red-600 - melhor contraste */
}

div[class*="bg-white"].rounded-lg.p-2.text-black {
    color: #111827 !important; /* gray-900 - melhor contraste */
}

/* Seletor mais específico para garantir aplicação */
.absolute.bg-white.rounded-lg.p-2.text-center.font-bold.text-red-500 {
    color: #dc2626 !important; /* red-600 - contraste WCAG AA */
}

.absolute.bg-white.rounded-lg.p-2.text-center.font-bold.text-black {
    color: #111827 !important; /* gray-900 - contraste WCAG AA */
}

/* ========================================
   OTIMIZAÇÃO DE IMAGENS RESPONSIVAS - BASE
   Regras gerais para picture elements e imagens com srcset
   ======================================== */

/* Picture element - garantir comportamento responsivo */
picture {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* Imagens dentro de picture elements */
picture img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    /* Garantir renderização suave */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
}

/* Imagens com srcset - otimização para diferentes densidades */
img[srcset] {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
}

/* Garantir que imagens responsivas não quebrem o layout */
img[src*="plataforma_new"],
img[src*="mesa_mobile"],
img[src*="logo_full"],
img[src*="pokerfilogo"] {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   Garantir Layout Responsivo Igual - EN = PT/ES
   ======================================== */

/* ========================================
   ESTILOS DOS BOTÕES DE COMPARTILHAMENTO
   Compatível com valores arbitrários do Tailwind
   ======================================== */

/* Botão Copiar URL - Estilo específico */
#copyUrlBtn,
button#copyUrlBtn {
    background-color: #1e293b !important; /* slate-800 */
    color: #d1d5db !important; /* gray-300 */
    border: 1px solid rgba(234, 179, 8, 0.2) !important; /* yellow-500/20 */
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.2s !important;
}

#copyUrlBtn:hover,
button#copyUrlBtn:hover {
    background-color: #334155 !important; /* slate-700 */
    color: #ffffff !important;
    border-color: rgba(234, 179, 8, 0.4) !important; /* yellow-500/40 */
}

#copyUrlBtn:hover svg,
button#copyUrlBtn:hover svg {
    color: #facc15 !important; /* yellow-400 */
}

/* Facebook - bg-[#1877F2] - Estilo específico */
a[href*="facebook.com/sharer"],
a[href*="facebook.com/sharer"].flex,
a[href*="facebook.com/sharer"][class*="bg-"] {
    background-color: #1877F2 !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
}

a[href*="facebook.com/sharer"]:hover,
a[href*="facebook.com/sharer"].flex:hover {
    background-color: #166FE5 !important;
    transform: scale(1.05) !important;
}

/* Twitter/X - bg-[#000000] - Estilo específico */
a[href*="twitter.com/intent/tweet"],
a[href*="twitter.com/intent/tweet"].flex,
a[href*="twitter.com/intent/tweet"][class*="bg-"] {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
}

a[href*="twitter.com/intent/tweet"]:hover,
a[href*="twitter.com/intent/tweet"].flex:hover {
    background-color: #1a1a1a !important;
    transform: scale(1.05) !important;
}

/* LinkedIn - bg-[#0A66C2] - Estilo específico */
a[href*="linkedin.com/sharing"],
a[href*="linkedin.com/sharing"].flex,
a[href*="linkedin.com/sharing"][class*="bg-"] {
    background-color: #0A66C2 !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
}

a[href*="linkedin.com/sharing"]:hover,
a[href*="linkedin.com/sharing"].flex:hover {
    background-color: #095195 !important;
    transform: scale(1.05) !important;
}

/* WhatsApp - bg-[#25D366] - Estilo específico */
a[href*="wa.me"],
a[href*="wa.me"].flex,
a[href*="wa.me"][class*="bg-"] {
    background-color: #25D366 !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
}

a[href*="wa.me"]:hover,
a[href*="wa.me"].flex:hover {
    background-color: #20BA5A !important;
    transform: scale(1.05) !important;
}

/* Telegram - bg-[#0088cc] - Estilo específico */
a[href*="t.me/share"],
a[href*="t.me/share"].flex,
a[href*="t.me/share"][class*="bg-"] {
    background-color: #0088cc !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
}

a[href*="t.me/share"]:hover,
a[href*="t.me/share"].flex:hover {
    background-color: #0077b5 !important;
    transform: scale(1.05) !important;
}

/* Garantir que todos os botões de compartilhamento tenham estilo consistente */
.flex.items-center.gap-2.px-4.py-2.rounded-lg,
div.mb-8 .flex a,
div.mb-8 .flex button {
    transition: all 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
}

/* Texto dos botões de compartilhamento - visível no desktop, oculto no mobile */
.share-button-text {
    font-size: 0.875rem !important; /* text-sm */
    display: none !important; /* Oculto por padrão (mobile) */
}

/* Mostrar texto no desktop (min-width: 768px) */
@media (min-width: 768px) {
    .share-button-text {
        display: inline !important;
    }
}