/*
==========================================================
N3MODEL
RESPONSIVE.CSS (VERSÃO DE ESTABILIZAÇÃO)
==========================================================
*/

/* 1. BASE REFEITA - Deixa o plugin controlar o tamanho das páginas naturalmente */
.bookflip-page,
.page,
.turn-page,
.p-temporal,
#flipbook .page,
.bookflip-page-background {
    background-color: #0a0f1e !important;
    background-image: radial-gradient(circle at center, #111827 0%, #0a0f1e 100%) !important;
}

canvas {
    pointer-events: none !important;
}

/* 2. REGRAS PARA O CELULAR (Telas até 768px) */
/*
==========================================================
N3MODEL - RESPONSIVE.CSS (VERSÃO COM INJEÇÃO INLINE DE ID)
==========================================================
*/

.bookflip-page,
.page,
.turn-page,
.p-temporal,
#flipbook .page,
.bookflip-page-background {
    background-color: #0a0f1e !important;
    background-image: radial-gradient(circle at center, #111827 0%, #0a0f1e 100%) !important;
}

canvas { pointer-events: none !important; }

/* ==========================================================================
REGRAS EXCLUSIVAS PARA O CELULAR / TELEMÓVEL (Telas até 768px)
   ========================================================================== */
@media (max-width: 992px) {

    canvas {
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
    }

    .bgt3-about-grid,
    .bgt3-hero-content,
    .bgt3-toggle-container {
        position: relative !important;
        z-index: 10 !important;
    }

    /* O MENU DO TOPO PERFEITO EM LINHA ÚNICA */
    .bgt3-header-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 5px 4px !important;
        box-sizing: border-box !important;
    }

    .bgt3-logo {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        margin-right: 4px !important;
    }

    .bgt3-logo-img {
        height: 34px !important;
        width: auto !important;
        display: block !important;
    }

    .bgt3-nav-list, nav ul, .menu-links {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .bgt3-nav-item a, nav a, .menu-links a, .navbar a {
        font-size: 0.58rem !important;
        padding: 4px 3px !important;
        margin: 0 1px !important;
        letter-spacing: -0.3px !important;
        white-space: nowrap !important;
        display: inline-block !important;
        text-align: center !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* ESTRUTURA BASE DO CONTACTO NO CELULAR */
    .bgt3-contact-wrapper {
        padding: 15px 10px 10px 10px !important;
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
    }

    /* O Card de vidro se adapta para ocupar toda a largura útil sem esmagar */
    .bgt3-contact-container {
        width: 92% !important;
        max-width: 92% !important;
        margin: 0 auto !important;
        background: rgba(10, 15, 30, 0.75) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-radius: 12px !important;
        padding: 12px !important;
        display: block !important; /* Desativa qualquer grid herdado do container */
    }

    #bgt3-contact-content-inner {
        display: flex !important;
        flex-direction: column !important; /* Força uma coluna de cima para baixo */
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* REMOÇÃO DO BADGE E PARÁGRAFO PARA GANHAR ESPAÇO VERTICAL */
    .tech-badge,
    .bgt3-contact-info p {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .bgt3-contact-info h2 {
        font-size: 18px !important;
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        text-align: center !important;
        color: #ffffff !important;
    }

    /* LISTA DE CONTACTOS INLINE (MUDADO PARA OCUPAR A LARGURA TOTAL) */
    .bgt3-contact-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        margin-bottom: 8px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .bgt3-contact-list li {
        margin-bottom: 0 !important;
        gap: 8px !important;
        display: flex !important;
        align-items: center !important;
        background: rgba(255, 255, 255, 0.03) !important;
        padding: 5px 8px !important;
        border-radius: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .icon-box {
        width: 24px !important;
        height: 24px !important;
        border-radius: 4px !important;
        font-size: 10px !important;
        flex-shrink: 0 !important;
    }

    /* Força o rótulo e os dados a respirarem horizontalmente */
    .info-text {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .info-text span {
        font-size: 9px !important;
        color: #00f2fe !important;
        text-transform: uppercase !important;
        min-width: 65px !important;
        margin: 0 !important;
    }

    .info-text strong {
        font-size: 11px !important;
        font-weight: 500 !important;
        color: #e2e8f0 !important;
        word-break: break-all !important; /* Impede o e-mail de quebrar linha por letra */
    }

    /* FORMULÁRIO SEGURO */
    .bgt3-contact-form {
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        width: 100% !important;
    }

    .bgt3-contact-form h3 {
        font-size: 13px !important;
        margin-top: 5px !important;
        margin-bottom: 8px !important;
        text-align: center !important;
        color: #ffffff !important;
    }

    /* Nome e e-mail dividem a mesma linha perfeitamente */
    .bgt3-contact-form form {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        width: 100% !important;
    }

    /* Assunto, Mensagem e Botão ganham a largura total da tela do celular */
    .bgt3-contact-form form .input-group:nth-child(3),
    .bgt3-contact-form form .input-group:nth-child(4),
    .bgt3-contact-form form .bgt3-button-primary {
        grid-column: span 2 !important;
    }

    .input-group {
        margin-bottom: 4px !important;
    }

    .input-group input,
    .input-group textarea {
        font-size: 11px !important;
        padding: 2px 0 !important;
        color: #ffffff !important;
        background: transparent !important;
    }

    .input-group textarea {
        height: 30px !important;
    }

    .input-group label {
        top: 2px !important;
        font-size: 11px !important;
    }

    .bgt3-button-primary {
        padding: 6px !important;
        font-size: 12px !important;
        margin-top: 4px !important;
        width: 100% !important; /* Garante que o botão use a largura do card sem cortar */
    }
    .bgt3-card:hover,
    .zoom:hover img,
    .bgt3-button:hover,
    .bgt3-contact-list li:hover .icon-box {
        transform: none !important;
        box-shadow: none !important;
    }

    .bgt3-card:hover, .zoom:hover img, .bgt3-button:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

#bgt3-contact .input-group input,
#bgt3-contact .input-group textarea {
    font-size: 11px !important;
    padding: 2px 0 2px 58px !important; /* ADICIONADO: 85px de espaço na esquerda para o texto começar à frente */
    color: #ffffff !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

    /* Mantém o rótulo ("Nome", "Email") fixo na esquerda sem flutuar por cima do texto */
#bgt3-contact .input-group label {
    position: absolute !important;
    top: 2px !important;
    left: 0 !important;
    font-size: 11px !important;
    color: #6b7280 !important;
    pointer-events: none !important;
}

/* REGRAS DE TELA CHEIA (PC) */
@media (min-width: 1600px) { .bgt3-container { max-width: 1400px; } }
@media (max-width: 1200px) { .bgt3-container { width: min(92%, 1100px); } .bgt3-grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 992px) { .bgt3-grid-4 { grid-template-columns: repeat(2, 1fr); } .bgt3-grid-3 { grid-template-columns: repeat(2, 1fr); } .bgt3-grid-2 { grid-template-columns: 1fr; } .bgt3-section-title { font-size: clamp(2.2rem, 5vw, 2.8rem); } .bgt3-section-subtitle { font-size: 1rem; } .bgt3-button { padding: 14px 28px; } }
@media (max-width: 576px) { .bgt3-container { width: 94%; } .bgt3-section-title { font-size: 2rem; } .bgt3-section-subtitle { font-size: .95rem; } .bgt3-card { border-radius: 14px; } .bgt3-card-body { padding: 18px; } }
@media (hover: none) { .bgt3-card:hover, .zoom:hover img, .bgt3-button:hover { transform: none; } }
.bgt3-endbook-page { display: block !important; width: 100% !important; height: 100% !important; background: transparent !important; }
.bgt3-backcover-wrapper { display: flex; align-items: center; justify-content: center; height: 100%; color: rgba(255, 255, 255, 0.3); font-size: 0.9rem; }

/* --- CAS PARTICULIER : TRÈS PETITS PHONES (Écrans inférieurs à 480px) --- */
@media (max-width: 480px) {
    /* Si le menu est encore trop serré sur le Samsung A22 en vue très étroite : */
    .bgt3-nav-item a, nav a, .menu-links a, .navbar a {
        font-size: 0.52rem !important; /* On réduit encore d'un micro-poil la police */
        padding: 3px 2px !important;  /* On resserre l'espace */
    }

    /* On force le formulaire à s'aligner sur une seule colonne si l'écran est minuscule */
    #bgt3-contact .bgt3-contact-form form {
        grid-template-columns: 1fr !important;
    }
    #bgt3-contact .bgt3-contact-form form .input-group:nth-child(1),
    #bgt3-contact .bgt3-contact-form form .input-group:nth-child(2) {
        grid-column: span 2 !important;
    }
}