/* ===== CORREÇÕES DE LAYOUT MOBILE - RASPA MONEY ===== */

@media (max-width: 768px) {
    /* BARRA VERDE DO TOPO - Z-INDEX ALTÍSSIMO PARA FICAR NA FRENTE DE TUDO */
    .fixed.top-0.left-0.right-0 {
        z-index: 99999 !important;
        position: fixed !important;
        pointer-events: auto !important;
    }

    /* Todos os elementos dentro da barra verde também clicáveis */
    .fixed.top-0.left-0.right-0 *,
    .fixed.top-0.left-0.right-0 button,
    .fixed.top-0.left-0.right-0 a,
    .fixed.top-0.left-0.right-0 svg {
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 99999 !important;
        position: relative !important;
    }

    /* ===== NAV - LOGO CENTRALIZADO NA ALTURA ===== */
    /* Garante que a nav use flexbox e centralize verticalmente */
    nav,
    header nav,
    header > div {
        display: flex !important;
        align-items: center !important; /* Centraliza na altura */
    }

    /* Logo centralizado verticalmente */
    nav img,
    nav a img,
    header img {
        display: flex !important;
        align-items: center !important;
        margin: auto 0 !important; /* Centraliza verticalmente */
    }

    /* ===== BANNER DE PROPAGANDA (R$ 1.000 com apenas 1 real) ===== */
    /* Desloca o banner de propaganda mais para baixo */
    img[src*="1000"],
    img[src*="banner"],
    a > img,
    section img,
    main > div > img {
        margin-top: 2rem !important;
    }

    /* PROVA SOCIAL - Desloca mais para baixo */
    .fixed.left-4,
    .fixed.right-4,
    [class*="notification"],
    [class*="toast"],
    div[style*="position: fixed"][style*="left"],
    div[style*="position: fixed"][style*="right"] {
        top: 5rem !important; /* Desloca prova social para baixo */
    }

    /* ===== IMAGENS MOBILE 1:1 - TROCAS ===== */
    img[src*="Qpsfo2Ur77hav0PqwK3ACLjuyCIt1xTlXDbwA7Em"] {
        content: url('/storage/raspadinhas/20ed8df6-4d3b-4c4a-bf28-bd1fe016ba08.webp') !important;
    }
    img[src*="WSTgsmYBBaFz8ITqFTXMn8mhpL2ymI2mHzfcsXm2"] {
        content: url('/storage/raspadinhas/281d4a3b-ab46-4c0d-8cbb-f770e78942e1.webp') !important;
    }
    img[src*="74Nkx0H3RchJFEFCRTkZobTZ0sg7h1BCqg1DE32G"] {
        content: url('/storage/raspadinhas/b7424fb8-57b2-4585-b900-697b6dcc53df.webp') !important;
    }
    img[src*="U5zUS3xbVUaWi58OIAzFnC1DwZT6uDwirrGImJsZ"] {
        content: url('/storage/raspadinhas/2f4c3a23-3e61-4a37-ac06-9982c62b1145.webp') !important;
    }
    img[src*="CsDcbRYVkUwXwyhphYdJ3uV7GXFuHEjUw3d7c6l7"] {
        content: url('/storage/raspadinhas/ae80ee54-ebe7-438a-8134-c421310957b0.webp') !important;
    }

    /* ===== RASPADINHAS - MOBILE ===== */
    div[data-slot="card"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        grid-column: 1 / -1 !important;
    }

    div[data-slot="card"] > div[class*="aspect-"] {
        aspect-ratio: 1 / 1 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: hidden !important;
        border-radius: 0.75rem !important;
    }

    div[data-slot="card"] > div[class*="aspect-"] img,
    img[src*="storage/raspadinhas"],
    img[src*="raspadinhas"],
    .flex.flex-col.rounded-xl.border img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        display: block !important;
    }

    div[data-slot="card"] .flex.flex-col.sm\:flex-row {
        margin-top: 0 !important;
        gap: 0.5rem !important;
    }

    div[data-slot="card"] > div:nth-of-type(3) {
        margin-top: auto !important;
    }

    div[data-slot="card"] > a:last-of-type {
        margin-top: 0.75rem !important;
    }

        /* Força container principal a permitir altura maior */
    .mx-auto,
    div[class*="min-h-"],
    main > div,
    section {
        min-height: auto !important;
    }

    /* Navegação inferior */
    .fixed.bottom-2 {
        position: fixed !important;
        bottom: 0.5rem !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        z-index: 999 !important;
        max-width: calc(100vw - 1rem) !important;
    }

    /* Body padding para nav inferior */
    body {
        padding-bottom: 90px !important;
    }

    /* Footer - margem para não ficar atrás da nav */
    footer {
        margin-bottom: 96px !important;
        padding-bottom: 1rem !important;
        text-align: center !important;
    }

    /* Centraliza todo conteúdo do footer */
    footer * {
        text-align: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Centraliza colunas do footer */
    footer > div,
    footer section,
    footer .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Links do footer centralizados */
    footer a,
    footer p,
    footer h1,
    footer h2,
    footer h3,
    footer h4 {
        text-align: center !important;
    }

    /* Evita overflow horizontal */
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Oculta o ícone "AO VIVO" em mobile */
    svg[viewBox="0 0 59 60"] {
        display: none !important;
    }

    /* ===== CARROSSEL AO VIVO - CENTRALIZAÇÃO VERTICAL PERFEITA ===== */
    /* Força GRID layout nos slides do carrossel */
    .swiper-slide[class*="group"],
    .swiper .swiper-slide,
    div[class*="swiper-slide"] {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        align-items: center !important;
        align-content: center !important;
        gap: 12px !important;
        padding: 12px 16px !important;
        min-height: 56px !important;
    }

    /* Imagem do prêmio - primeira coluna, centrada verticalmente */
    .swiper-slide img[class*="size"],
    .swiper-slide img,
    .swiper .swiper-slide > img {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Container de texto - segunda coluna, centrado verticalmente */
    .swiper-slide > div[class*="flex"],
    .swiper-slide > div {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
    }

    /* Textos dentro - sem margens que desalinham */
    .swiper-slide span,
    .swiper-slide h1,
    .swiper-slide p {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.3 !important;
    }

    /* ===== MODAIS MOBILE - NO TOPO SEMPRE, MESMO COM TECLADO ABERTO ===== */
    /* Garante que o modal fique no TOPO da tela */
    [role="dialog"] {
        position: fixed !important;
        top: 1rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important;
        max-width: 90vw !important;
        max-height: calc(100vh - 2rem) !important;
        max-height: calc(100dvh - 2rem) !important; /* dvh = dynamic viewport height (considera teclado) */
        overflow-y: auto !important;
        z-index: 99999 !important;
        
        /* DEGRADÊ VERDE SOFISTICADO */
        background: linear-gradient(135deg, 
            #0a4d2e 0%,      /* Verde escuro profundo */
            #06AD4D 50%,     /* Verde principal */
            #0a4d2e 100%     /* Verde escuro profundo */
        ) !important;
        border: 1px solid rgba(6, 173, 77, 0.3) !important;
        box-shadow: 
            0 20px 60px rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(6, 173, 77, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        
        /* ANIMAÇÃO SUAVE AO ABRIR/FECHAR */
        opacity: 1 !important;
        transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out !important;
    }

    /* Quando um input dentro do modal recebe foco, garante que ele fique visível */
    [role="dialog"]:has(input:focus),
    [role="dialog"]:has(textarea:focus) {
        position: fixed !important;
        top: 1rem !important;
        bottom: auto !important;
    }

    /* Backdrop (fundo escuro) - QUASE TOTALMENTE PRETO */
    [role="dialog"][class*="fixed"]:before {
        content: '' !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.98) !important; /* 98% opaco = apenas 2% transparente */
        backdrop-filter: blur(8px) !important;
        z-index: -1 !important;
        
        /* ANIMAÇÃO SUAVE DO BACKDROP */
        opacity: 1 !important;
        transition: opacity 0.2s ease-in-out, backdrop-filter 0.2s ease-in-out !important;
    }
}