/* ==========================================================================
   NINNA RATA - HOLIDAY / CHRISTMAS THEME STYLES (holiday.css)
   Ativado exclusivamente via classe: <body class="dark-theme theme-holiday">
   Desativação limpa: basta remover a classe .theme-holiday do body.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GORRINHO DE PAPAI NOEL DA NINNA RATA (SVG Decorativo)
   Posicionado sobre o logo do header e sobre o avatar no chat do celular 3D
   -------------------------------------------------------------------------- */

.logo-avatar-wrap,
.chat-avatar-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* O gorro só existe quando .theme-holiday está ativo */
body:not(.theme-holiday) .holiday-santa-hat,
body:not(.theme-holiday) .holiday-snow-container {
    display: none !important;
}

body.theme-holiday .holiday-santa-hat {
    position: absolute;
    pointer-events: none;
    z-index: 25;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
    /* Gorro realista de veludo vermelho com caimento natural e pompom lateral */
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22solidRed%22%20x1%3D%2290%25%22%20y1%3D%220%25%22%20x2%3D%2215%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ff3b5c%22%2F%3E%3Cstop%20offset%3D%2240%25%22%20stop-color%3D%22%23e11d48%22%2F%3E%3Cstop%20offset%3D%2280%25%22%20stop-color%3D%22%23be123c%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23881337%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22fluffGrad%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%220%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23ffffff%22%2F%3E%3Cstop%20offset%3D%2270%25%22%20stop-color%3D%22%23f8fafc%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23cbd5e1%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22hat3dShadow%22%20x%3D%22-25%25%22%20y%3D%22-25%25%22%20width%3D%22150%25%22%20height%3D%22150%25%22%3E%3CfeDropShadow%20dx%3D%22-1%22%20dy%3D%223%22%20stdDeviation%3D%222.5%22%20flood-color%3D%22%23000000%22%20flood-opacity%3D%220.45%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D%22url(%23hat3dShadow)%22%3E%3Cpath%20d%3D%22M%2040%2C75%20C%2032%2C58%2022%2C54%2016%2C56%20C%2011%2C58%2012%2C66%2018%2C68%20C%2024%2C70%2032%2C66%2038%2C75%20L%2082%2C75%20C%2084%2C55%2074%2C32%2054%2C24%20C%2036%2C25%2024%2C38%2016%2C56%20L%2018%2C68%20C%2024%2C70%2032%2C65%2038%2C75%20Z%22%20fill%3D%22url(%23solidRed)%22%2F%3E%3Cpath%20d%3D%22M%2054%2C26%20C%2068%2C32%2076%2C50%2078%2C72%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%20opacity%3D%220.3%22%2F%3E%3Cpath%20d%3D%22M%2038%2C40%20C%2026%2C45%2018%2C52%2016%2C56%20C%2014%2C60%2016%2C66%2022%2C66%20C%2028%2C62%2034%2C50%2038%2C40%20Z%22%20fill%3D%22%234c0519%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2262%22%20r%3D%229.5%22%20fill%3D%22url(%23fluffGrad)%22%2F%3E%3Ccircle%20cx%3D%2213.5%22%20cy%3D%2259.5%22%20r%3D%223.5%22%20fill%3D%22%23ffffff%22%20opacity%3D%220.95%22%2F%3E%3Cpath%20d%3D%22M%2036%2C73%20C%2048%2C67%2072%2C67%2086%2C73%20C%2090%2C75%2090%2C81%2086%2C83%20C%2072%2C88%2048%2C88%2036%2C83%20C%2032%2C81%2032%2C75%2036%2C73%20Z%22%20fill%3D%22url(%23fluffGrad)%22%2F%3E%3Ccircle%20cx%3D%2238%22%20cy%3D%2278%22%20r%3D%226%22%20fill%3D%22url(%23fluffGrad)%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2276%22%20r%3D%226.5%22%20fill%3D%22url(%23fluffGrad)%22%2F%3E%3Ccircle%20cx%3D%2261%22%20cy%3D%2275%22%20r%3D%227%22%20fill%3D%22url(%23fluffGrad)%22%2F%3E%3Ccircle%20cx%3D%2274%22%20cy%3D%2276%22%20r%3D%226.5%22%20fill%3D%22url(%23fluffGrad)%22%2F%3E%3Ccircle%20cx%3D%2284%22%20cy%3D%2278%22%20r%3D%226%22%20fill%3D%22url(%23fluffGrad)%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    transition: transform 0.3s ease;
}

/* Gorrinho no Logo do Header (repousa perfeitamente no topo do cabelo, sem cobrir o rosto) */
body.theme-holiday .logo-avatar-wrap .holiday-santa-hat {
    width: 26px;
    height: 26px;
    top: -16px;
    left: 6px;
    transform: rotate(-16deg);
}

.logo:hover .logo-avatar-wrap .holiday-santa-hat {
    transform: rotate(-20deg) scale(1.08);
}

/* Gorrinho no Avatar do Chat do Celular 3D */
body.theme-holiday .chat-avatar-wrap .holiday-santa-hat {
    width: 18px;
    height: 18px;
    top: -11px;
    left: 4px;
    transform: rotate(-16deg);
}


/* --------------------------------------------------------------------------
   2. NEVE ACUMULADA NO TOPO DOS CARDS (Curvas Orgânicas e Elegantes)
   Aplicada via ::after em: #heroQuotaWidget, .bento-card e .pricing-card
   -------------------------------------------------------------------------- */

body.theme-holiday .hero-quota-widget::after,
body.theme-holiday .feature-card::after,
body.theme-holiday .bento-card::after,
body.theme-holiday .pricing-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 14px;
    pointer-events: none;
    z-index: 25;
    background-repeat: repeat-x;
    background-position: top left;
    background-size: 160px 14px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22));
    /* Padrão orgânico vetorial de neve ondulada suave e sem emendas */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14'%3E%3Cdefs%3E%3ClinearGradient id='snowGrad' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff' stop-opacity='1'/%3E%3Cstop offset='65%25' stop-color='%23f1f5f9' stop-opacity='0.98'/%3E%3Cstop offset='100%25' stop-color='%23cbd5e1' stop-opacity='0.9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,0 L160,0 L160,4 C152,7 146,8 140,5 C132,1 124,7 116,8 C108,9 102,4 94,4 C86,4 80,8 72,7 C64,6 58,2 50,3 C42,4 36,9 28,8 C20,7 12,3 0,4 Z' fill='url(%23snowGrad)'/%3E%3C!-- Linha de brilho cristalino sutil no topo --%3E%3Cpath d='M0,1 L160,1' stroke='%23ffffff' stroke-width='1.2' opacity='0.9'/%3E%3C/svg%3E");
}

/* Ajustes finos de borda e profundidade para cada objeto */
body.theme-holiday .hero-quota-widget,
body.theme-holiday .bento-card,
body.theme-holiday .pricing-card {
    position: relative;
    overflow: hidden; /* Garante que a neve respeite as bordas arredondadas */
}

body.theme-holiday .hero-quota-widget {
    padding-top: 24px !important; /* Espaço para a neve flutuar com respiro no topo */
}

body.theme-holiday .feature-card::after,
body.theme-holiday .bento-card::after,
body.theme-holiday .pricing-card::after {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

/* --------------------------------------------------------------------------
   2.1 NEVE ACUMULADA NO TOPO DO CELULAR 3D (MOLDADA AO DESIGN DO APARELHO)
   Abraça organicamente o cume e os cantos arredondados (border-radius)
   sem sobrar pontas flutuando no ar nem encobrir a tela do chat.
   -------------------------------------------------------------------------- */

body:not(.theme-holiday) .phone-holiday-snow {
    display: none !important;
}

body.theme-holiday .phone-container-3d {
    overflow: visible !important; /* Permite que a neve repouse no topo externo do aparelho */
}

body.theme-holiday .phone-screen {
    border-radius: 34px;
    overflow: hidden; /* Mantém a tela do chat 100% contida dentro do aro interno de 10px */
}

body.theme-holiday .phone-holiday-snow {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    height: 48px;
    pointer-events: none;
    z-index: 50; /* Acima da moldura física do celular */
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

body.theme-holiday .phone-holiday-snow .snow-svg-desktop {
    display: block;
    width: 100%;
    height: 100%;
}

body.theme-holiday .phone-holiday-snow .snow-svg-mobile {
    display: none;
    width: 100%;
    height: 100%;
}

/* Desativa o antigo pseudo-elemento ::after do phone-container-3d */
body.theme-holiday .phone-container-3d::after {
    display: none !important;
}

@media (max-width: 991px) {
    body.theme-holiday .phone-screen {
        border-radius: 28px;
    }
    body.theme-holiday .phone-holiday-snow {
        top: -8px;
        left: -8px;
        right: -8px;
        height: 42px;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
    }
    body.theme-holiday .phone-holiday-snow .snow-svg-desktop {
        display: none !important;
    }
    body.theme-holiday .phone-holiday-snow .snow-svg-mobile {
        display: block !important;
    }
}


/* --------------------------------------------------------------------------
   3. NEVE CAINDO SUAVE NO HERO (CSS Puro Acelerado por GPU)
   Sem Javascript, sem canvas, pointer-events: none, respeita acessibilidade
   -------------------------------------------------------------------------- */

.hero {
    position: relative; /* Garante ancoragem dos flocos dentro do Hero */
}

/* Celular 3D e todo o conteúdo do Hero ficam com z-index SUPERIOR à neve */
body.theme-holiday .hero-visual-3d {
    position: relative;
    z-index: 15 !important;
}

body.theme-holiday .phone-container-3d {
    position: relative;
    z-index: 25 !important;
}

body.theme-holiday .hero-content {
    position: relative;
    z-index: 15 !important;
}

body.theme-holiday .holiday-snow-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1 !important; /* Estritamente atrás de todo o conteúdo e do celular 3D */
}

.holiday-snow-container .snowflake {
    position: absolute;
    top: -24px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 60%, rgba(255, 255, 255, 0.4) 100%);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
    pointer-events: none;
    will-change: transform;
    animation-name: snowfall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* Keyframes acelerados 100% por GPU usando translate3d */
@keyframes snowfall {
    0% {
        transform: translate3d(0, -20px, 0);
        opacity: 0;
    }
    10% {
        opacity: var(--snow-op, 0.8);
    }
    90% {
        opacity: var(--snow-op, 0.8);
    }
    100% {
        transform: translate3d(var(--snow-drift, 40px), 105vh, 0);
        opacity: 0;
    }
}

/* Flocos na coluna do celular: dissolvem suavemente ao tocar o topo do aparelho */
@keyframes snowfallToPhone {
    0% {
        transform: translate3d(0, -20px, 0);
        opacity: 0;
    }
    20% {
        opacity: var(--snow-op, 0.75);
    }
    70% {
        opacity: var(--snow-op, 0.75);
    }
    100% {
        transform: translate3d(var(--snow-drift, 15px), 95px, 0);
        opacity: 0;
    }
}

/* Variação orgânica de posição, velocidade, tamanho e atraso negativo */
.snowflake:nth-child(1)  { left: 5%;  width: 5px; height: 5px; --snow-op: 0.75; --snow-drift: 35px;  animation-duration: 9s;   animation-delay: -2s; }
.snowflake:nth-child(2)  { left: 12%; width: 3px; height: 3px; --snow-op: 0.55; --snow-drift: -25px; animation-duration: 12s;  animation-delay: -5s; }
.snowflake:nth-child(3)  { left: 20%; width: 6px; height: 6px; --snow-op: 0.85; --snow-drift: 45px;  animation-duration: 8s;   animation-delay: -1s; }
.snowflake:nth-child(4)  { left: 28%; width: 4px; height: 4px; --snow-op: 0.65; --snow-drift: -30px; animation-duration: 11s;  animation-delay: -7s; }
.snowflake:nth-child(5)  { left: 36%; width: 5px; height: 5px; --snow-op: 0.70; --snow-drift: 20px;  animation-duration: 9.5s; animation-delay: -3.5s; }
.snowflake:nth-child(6)  { left: 44%; width: 3px; height: 3px; --snow-op: 0.50; --snow-drift: -15px; animation-duration: 13s;  animation-delay: -8s; }
.snowflake:nth-child(7)  { left: 52%; width: 7px; height: 7px; --snow-op: 0.80; --snow-drift: 50px;  animation-duration: 7.5s; animation-delay: -0.5s; }

/* Flocos alinhados com o celular 3D (dissipam no topo sem atravessar nem passar na frente) */
.snowflake:nth-child(8)  { left: 62%; width: 4px; height: 4px; --snow-op: 0.60; --snow-drift: -10px; animation-name: snowfallToPhone; animation-duration: 6s;   animation-delay: -2s; }
.snowflake:nth-child(9)  { left: 70%; width: 5px; height: 5px; --snow-op: 0.75; --snow-drift: 15px;  animation-name: snowfallToPhone; animation-duration: 5.5s; animation-delay: -3.5s; }
.snowflake:nth-child(10) { left: 78%; width: 4px; height: 4px; --snow-op: 0.65; --snow-drift: -12px; animation-name: snowfallToPhone; animation-duration: 6.5s; animation-delay: -1s; }

.snowflake:nth-child(11) { left: 86%; width: 6px; height: 6px; --snow-op: 0.80; --snow-drift: 40px;  animation-duration: 8.2s; animation-delay: -1.8s; }
.snowflake:nth-child(12) { left: 91%; width: 4px; height: 4px; --snow-op: 0.65; --snow-drift: -25px; animation-duration: 10.5s;animation-delay: -4.2s; }
.snowflake:nth-child(13) { left: 96%; width: 5px; height: 5px; --snow-op: 0.70; --snow-drift: 25px;  animation-duration: 9.2s; animation-delay: -3s; }
.snowflake:nth-child(14) { left: 16%; width: 4px; height: 4px; --snow-op: 0.60; --snow-drift: 20px;  animation-duration: 11.5s;animation-delay: -6.5s; }
.snowflake:nth-child(15) { left: 48%; width: 5px; height: 5px; --snow-op: 0.75; --snow-drift: -20px; animation-duration: 8.5s; animation-delay: -2.2s; }
.snowflake:nth-child(16) { left: 88%; width: 3px; height: 3px; --snow-op: 0.55; --snow-drift: 30px;  animation-duration: 12.5s;animation-delay: -5.8s; }


/* --------------------------------------------------------------------------
   4. BLINDAGEM MOBILE & ACESSIBILIDADE
   -------------------------------------------------------------------------- */

/* Em telas mobile, reduzimos para 8 partículas para economizar bateria e GPU */
@media (max-width: 768px) {
    .snowflake:nth-child(n+9) {
        display: none !important;
    }
    
    body.theme-holiday .logo-avatar-wrap .holiday-santa-hat {
        width: 24px;
        height: 24px;
        top: -15px;
        left: 5px;
    }
}

/* Respeito total às preferências de movimento reduzido (Acessibilidade) */
@media (prefers-reduced-motion: reduce) {
    .holiday-snow-container {
        display: none !important;
    }
    .holiday-santa-hat {
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   5. DECORAÇÕES NATALINAS INTERNAS NOS CARDS DE PREÇOS (WATERMARKS)
   Posicionadas estrategicamente no corpo do card (acima dos botões de ação),
   com cores festivas ricas, transparência calibrada e máxima legibilidade.
   - Gratuito: Meia de Natal simples e acolhedora
   - VIP Mensal: Bolas de Natal de Vidro magenta/roxo refinadas
   - VIP Anual (O Melhor de Todos): Árvore com Estrela-Guia Radiante e Presentes
   -------------------------------------------------------------------------- */

body:not(.theme-holiday) .pricing-holiday-watermark {
    display: none !important;
}

.pricing-card {
    position: relative;
    overflow: hidden;
}

.pricing-card > *:not(.pricing-holiday-watermark):not(.pricing-badge-popular) {
    position: relative;
    z-index: 2;
}

/* Protege legibilidade absoluta das features sobre as ilustrações natalinas */
body.theme-holiday .pricing-features li {
    position: relative;
    z-index: 3;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 10px rgba(10, 8, 16, 0.95);
}

.pricing-badge-popular {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 10 !important;
    width: auto !important;
    display: inline-block !important;
}

/* Base do Watermark: posicionado acima do botão de checkout para total visibilidade */
body.theme-holiday .pricing-holiday-watermark {
    position: absolute;
    bottom: 50px;
    right: -4px;
    pointer-events: none;
    user-select: none;
    z-index: 1 !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease, filter 0.45s ease;
}

body.theme-holiday .pricing-holiday-watermark svg {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.45));
}

/* 5.1 Gratuito: Meia de Natal */
body.theme-holiday .deco-stocking {
    width: 125px;
    height: 155px;
    bottom: 44px;
    right: 2px;
    opacity: 0.42;
}

/* 5.2 VIP Mensal: Bolas de Natal */
body.theme-holiday .deco-baubles {
    width: 140px;
    height: 175px;
    bottom: 42px;
    right: -6px;
    opacity: 0.46;
}

/* 5.3 VIP Anual (O Melhor de Todos): Árvore Iluminada com Estrela e Presentes */
body.theme-holiday .deco-tree {
    width: 170px;
    height: 210px;
    bottom: 38px;
    right: -12px;
    opacity: 0.62;
}

/* Ajuste específico para Telas Mobile */
@media (max-width: 768px) {
    body.theme-holiday .deco-stocking {
        width: 115px;
        height: 140px;
        bottom: 42px;
        right: 6px;
        opacity: 0.38;
    }
    body.theme-holiday .deco-baubles {
        width: 130px;
        height: 160px;
        bottom: 40px;
        right: 4px;
        opacity: 0.44;
    }
    body.theme-holiday .deco-tree {
        width: 155px;
        height: 190px;
        bottom: 36px;
        right: -2px;
        opacity: 0.58;
    }
}

/* Ambient Glow exclusivo para o VIP Anual (O Melhor de Todos) */
body.theme-holiday .pricing-card.plan-annual {
    background: radial-gradient(circle at 86% 65%, rgba(236, 72, 153, 0.20) 0%, rgba(168, 85, 247, 0.10) 45%, rgba(20, 17, 31, 0.94) 80%);
    border-color: rgba(236, 72, 153, 0.52);
    box-shadow: 0 16px 45px rgba(236, 72, 153, 0.22), 0 0 30px rgba(168, 85, 247, 0.16);
}

body.theme-holiday .pricing-card.plan-annual:hover {
    border-color: rgba(236, 72, 153, 0.88);
    box-shadow: 0 20px 52px rgba(236, 72, 153, 0.36), 0 0 45px rgba(236, 72, 153, 0.28);
}

/* Efeito Hover nos Cards: Enfeites ganham vida e brilham mais */
.pricing-card:hover .deco-stocking {
    transform: scale(1.08) rotate(-3deg);
    opacity: 0.58 !important;
}

.pricing-card:hover .deco-baubles {
    transform: scale(1.08) rotate(-3deg);
    opacity: 0.72 !important;
}

.pricing-card:hover .deco-tree {
    transform: scale(1.06) rotate(-1deg);
    opacity: 0.92 !important;
}