/* static/css/core/mobile_cortina.css */
/* Arquitetura de Cortina e Brecha no Topo Mobile (Mobile App Sheet Architecture) */

@media (max-width: 767px) {
    /* Fundo Dinâmico no Topo e Branco Puro no Conteúdo */
    body:has(.app-mobile-cortina),
    body.has-mobile-cortina,
    body:has(.app-mobile-cortina) .fixed-background,
    body.has-mobile-cortina .fixed-background {
        background: linear-gradient(180deg, var(--cor-destaque, #9D38DC) 0%, var(--cor-destaque, #9D38DC) 180px, #ffffff 180px, #ffffff 100%) !important;
        background-color: #ffffff !important;
        background-repeat: no-repeat !important;
    }

    html.dark body:has(.app-mobile-cortina),
    html.dark body.has-mobile-cortina,
    html.dark body:has(.app-mobile-cortina) .fixed-background,
    html.dark body.has-mobile-cortina .fixed-background {
        background: linear-gradient(180deg, var(--cor-destaque, #9D38DC) 0%, var(--cor-destaque, #9D38DC) 180px, #0f172a 180px, #0f172a 100%) !important;
        background-color: #0f172a !important;
        background-repeat: no-repeat !important;
    }

    /* Fundo expandido quando há banner promocional ativo no topo mobile */
    body.has-mobile-campaign-banner:has(.app-mobile-cortina),
    body.has-mobile-campaign-banner.has-mobile-cortina,
    body:has(#mobile-campaign-topbar:not([style*="display: none"])):has(.app-mobile-cortina),
    body:has(#mobile-campaign-topbar:not([style*="display: none"])).has-mobile-cortina,
    body.has-mobile-campaign-banner:has(.app-mobile-cortina) .fixed-background,
    body.has-mobile-campaign-banner.has-mobile-cortina .fixed-background,
    body:has(#mobile-campaign-topbar:not([style*="display: none"])):has(.app-mobile-cortina) .fixed-background,
    body:has(#mobile-campaign-topbar:not([style*="display: none"])).has-mobile-cortina .fixed-background {
        background: linear-gradient(180deg, var(--cor-destaque, #9D38DC) 0%, var(--cor-destaque, #9D38DC) 230px, #ffffff 230px, #ffffff 100%) !important;
        background-color: #ffffff !important;
        background-repeat: no-repeat !important;
    }

    html.dark body.has-mobile-campaign-banner:has(.app-mobile-cortina),
    html.dark body.has-mobile-campaign-banner.has-mobile-cortina,
    html.dark body:has(#mobile-campaign-topbar:not([style*="display: none"])):has(.app-mobile-cortina),
    html.dark body:has(#mobile-campaign-topbar:not([style*="display: none"])).has-mobile-cortina,
    html.dark body.has-mobile-campaign-banner:has(.app-mobile-cortina) .fixed-background,
    html.dark body.has-mobile-campaign-banner.has-mobile-cortina .fixed-background,
    html.dark body:has(#mobile-campaign-topbar:not([style*="display: none"])):has(.app-mobile-cortina) .fixed-background,
    html.dark body:has(#mobile-campaign-topbar:not([style*="display: none"])).has-mobile-cortina .fixed-background {
        background: linear-gradient(180deg, var(--cor-destaque, #9D38DC) 0%, var(--cor-destaque, #9D38DC) 230px, #0b0f1a 230px, #0b0f1a 100%) !important;
        background-color: #0b0f1a !important;
        background-repeat: no-repeat !important;
    }

    /* Remove espaçamentos externos que vazem o fundo */
    body:has(.app-mobile-cortina) #main-content,
    body.has-mobile-cortina #main-content,
    body:has(.app-mobile-cortina) .main-content,
    body.has-mobile-cortina .main-content,
    body:has(.app-mobile-cortina) .page-content-pusher,
    body.has-mobile-cortina .page-content-pusher {
        background: transparent !important;
        background-color: transparent !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* 1. TOPO TRAVADO: Fixo no topo do celular com cor dinâmica e curvas descendo nas extremidades */
    :root {
        --mobile-campaign-banner-height: 0px;
    }
    body.has-mobile-campaign-banner {
        --mobile-campaign-banner-height: 35px;
    }
    html.campaign-dismissed,
    html.campaign-dismissed body.has-mobile-campaign-banner,
    body:not(.has-mobile-campaign-banner) {
        --mobile-campaign-banner-height: 0px !important;
    }

    #mobile-campaign-topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 60 !important;
    }

    .app-mobile-header-brecha {
        background-color: var(--cor-destaque, #9D38DC) !important;
        background: var(--cor-destaque, #9D38DC) !important;
        color: #ffffff !important;
        height: auto !important;
        min-height: 3.75rem !important;
        max-height: none !important;
        padding-top: calc(0.75rem + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 0.75rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        position: sticky !important;
        top: var(--mobile-campaign-banner-height, 0px) !important;
        z-index: 50 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .app-mobile-header-brecha.pb-0,
    .app-mobile-header-brecha[class*="pb-0"] {
        padding-bottom: 0.75rem !important;
    }

    /* Curvas arredondadas marcantes descendo nas extremidades travadas permanentemente no topo via máscara vetorial SVG perfeita */
    .app-mobile-header-brecha::before {
        content: "" !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 2.25rem !important;
        height: 2.25rem !important;
        background-color: var(--cor-destaque, #9D38DC) !important;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M0 0 L0 36 A36 36 0 0 1 36 0 Z' fill='black'/%3E%3C/svg%3E") !important;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M0 0 L0 36 A36 36 0 0 1 36 0 Z' fill='black'/%3E%3C/svg%3E") !important;
        -webkit-mask-size: 100% 100% !important;
        mask-size: 100% 100% !important;
        -webkit-mask-repeat: no-repeat !important;
        mask-repeat: no-repeat !important;
        pointer-events: none !important;
        z-index: 50 !important;
    }

    .app-mobile-header-brecha::after {
        content: "" !important;
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        width: 2.25rem !important;
        height: 2.25rem !important;
        background-color: var(--cor-destaque, #9D38DC) !important;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M36 0 L36 36 A36 36 0 0 0 0 0 Z' fill='black'/%3E%3C/svg%3E") !important;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M36 0 L36 36 A36 36 0 0 0 0 0 Z' fill='black'/%3E%3C/svg%3E") !important;
        -webkit-mask-size: 100% 100% !important;
        mask-size: 100% 100% !important;
        -webkit-mask-repeat: no-repeat !important;
        mask-repeat: no-repeat !important;
        pointer-events: none !important;
        z-index: 50 !important;
    }

    /* Força textos e ícones na brecha para branco de alto contraste */
    .app-mobile-header-brecha h1,
    .app-mobile-header-brecha h2,
    .app-mobile-header-brecha h3,
    .app-mobile-header-brecha .header-title-text {
        color: #ffffff !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
    }

    .app-mobile-header-brecha p {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    .app-mobile-header-brecha i,
    .app-mobile-header-brecha svg {
        color: #ffffff !important;
        stroke: #ffffff !important;
    }

    /* Container de ícone no header mobile */
    .app-mobile-header-brecha .header-icon-box {
        background-color: rgba(255, 255, 255, 0.22) !important;
        border: 1px solid rgba(255, 255, 255, 0.35) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
        color: #ffffff !important;
        width: 2.25rem !important;
        height: 2.25rem !important;
        min-width: 2.25rem !important;
        min-height: 2.25rem !important;
        border-radius: 0.75rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .app-mobile-header-brecha .header-icon-box i,
    .app-mobile-header-brecha .header-icon-box svg {
        color: #ffffff !important;
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    .app-mobile-header-brecha .header-icon-box svg.dark-mode-icon-sun,
    .app-mobile-header-brecha .header-icon-box svg.dark-mode-icon-moon {
        color: #fbbf24 !important;
        stroke: #fbbf24 !important;
    }

    /* Selo Premium no Topo Mobile */
    .selo-premium-topo,
    html.dark .selo-premium-topo {
        border: 1px solid rgba(255, 255, 255, 0.45) !important;
        border-color: rgba(255, 255, 255, 0.45) !important;
        background-color: rgba(255, 255, 255, 0.20) !important;
        color: #ffffff !important;
    }

    /* Botões dentro do header na brecha */
    .app-mobile-header-brecha .btn-header-mobile,
    .btn-header-mobile {
        background-color: rgba(255, 255, 255, 0.22) !important;
        border: 1px solid rgba(255, 255, 255, 0.35) !important;
        color: #ffffff !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 2.25rem !important;
        height: 2.25rem !important;
        min-width: 2.25rem !important;
        min-height: 2.25rem !important;
        border-radius: 0.75rem !important;
        z-index: 30 !important;
    }
    .app-mobile-header-brecha .btn-header-mobile i,
    .app-mobile-header-brecha .btn-header-mobile svg,
    .btn-header-mobile i,
    .btn-header-mobile svg {
        color: inherit;
        stroke: currentColor;
        width: 1.125rem !important;
        height: 1.125rem !important;
    }
    .app-mobile-header-brecha .btn-header-mobile:active,
    .btn-header-mobile:active {
        background-color: rgba(255, 255, 255, 0.38) !important;
        transform: scale(0.92);
    }

    /* 2. O CONTEÚDO: Cortina com bordas arredondadas e fundo limpo */
    .app-mobile-cortina {
        position: relative;
        z-index: 20;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        background-color: #ffffff !important;
        box-shadow: none !important;
        border: none !important;
        padding-top: 0.75rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-bottom: 7.5rem !important;
        min-height: calc(100vh - 3.75rem) !important;
        box-sizing: border-box !important;
    }

    .dark .app-mobile-cortina {
        background-color: #0b0f1a !important;
        border: none !important;
        box-shadow: none !important;
    }
}