/* --- Estilo Base da Biblioteca --- */

body {
    background-color: #f7f7f7; /* Fundo suave */
    font-family: Arial, sans-serif;
}

header {
    text-align: center;
    padding: 30px 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* --- Container Principal do Grid da GALERIA ADQUIRIDA --- */
.books-grid {
    display: grid;
    /* Gera colunas automaticamente, com no mínimo 400px de largura */
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); 
    
    /* Espaçamento interno entre os cards */
    gap: 10px; 
    column-gap: 15px; 
    
    /* CORREÇÃO CHAVE 1: Reduz a largura máxima do contêiner para forçar menos espaço em branco */
    max-width: 850px; 
    
    /* CORREÇÃO CHAVE 2: Centraliza o contêiner com margem superior/inferior, mas deixa as laterais sem margem extra */
    margin: 50px auto; 

    /* Reduz o padding externo para 10px */
    padding: 10px; 
    
    justify-content: center;
}

/* ----------------------------------------------------------------- */
/* --- NOVOS ESTILOS: CARD DE MÓDULO ADQUIRIDO (SIMILAR AO ARTISTLY) --- */
/* ----------------------------------------------------------------- */

.module-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: hidden; 
    text-align: center;
    background-color: #fff;
    /* CORREÇÃO: DOBRO DA LARGURA (400px) */
    width: 400px; 
    margin: 0; 
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.module-card:hover {
    transform: translateY(-5px); 
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Estilo do Título (Topo do Card) */
.card-header {
    background-color: #f7f7f7;
    padding: 10px;
    height: 60px; /* Altura fixa para manter a uniformidade */
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-title {
    font-size: 0.9em;
    font-weight: bold;
    color: #333;
    margin: 0;
}

/* Estilo da Imagem (Capa) */
.card-image-container {
    /* CORREÇÃO: Altura mantida, mas a imagem preencherá a nova largura de 400px */
    height: 220px; 
    overflow: hidden; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-cover-image {
    /* MÁGICA DO ARTISTLY: Faz a imagem preencher o contêiner 
       (agora 400px de largura) sem distorcer, recortando o excesso. */
    width: 100%; 
    height: 100%; /* Preenche 100% da altura do contêiner */
    object-fit: cover; 
}

/* Estilo do corpo do card (Status) */
.card-body {
    padding: 10px;
    font-size: 0.85em;
    color: #555;
}

.card-status {
    margin-bottom: 10px;
}

.status-adquirido {
    color: #28a745; /* Cor verde para status adquirido */
    font-weight: bold;
}

/* Estilo do Botão Read (Read) */
.read-button {
    display: block;
    padding: 10px 15px;
    margin: 10px;
    background-color: #ffc107; /* Amarelo similar ao seu design anterior */
    color: #333;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.2s;
    margin-top: auto; /* Garante que o botão fique na base */
}

.read-button:hover {
    background-color: #e0a800;
}

/* ----------------------------------------------------------------- */
/* --- ESTILOS DOS PACOTES DE OFERTA (MANTIDOS) --- */
/* ----------------------------------------------------------------- */

.ofertas-pacote-container {
    text-align: center;
    padding: 20px 0;
    margin-bottom: 30px;
    border-bottom: 2px solid #eee;
}

.pacotes-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Adicionado para lidar com telas menores */
    gap: 20px;
    margin-top: 20px;
    padding: 0 10px;
}

.pacote-card {
    border: 2px solid #007bff; /* Borda azul para destaque */
    border-radius: 8px;
    padding: 15px;
    width: 220px;
    text-align: center;
    background-color: #f8f9fa;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.pacote-card.inabilitado {
    opacity: 0.6;
    border-color: #ccc;
    pointer-events: none; /* Desativa interações */
}

.pacote-card h3 {
    color: #007bff;
    margin-top: 0;
}

.preco-info {
    margin: 10px 0;
}

.preco-antigo {
    text-decoration: line-through;
    color: #888;
    display: block;
    font-size: 0.9em;
}

.preco-atual {
    font-size: 1.6em;
    color: #28a745; /* Preço de oferta em verde */
    font-weight: bold;
}

.desconto-tag {
    background-color: #ffc107; /* Amarelo para o destaque do desconto */
    color: #333;
    padding: 5px;
    border-radius: 4px;
    font-weight: bold;
    margin-bottom: 10px;
    display: inline-block;
}

.pacote-button {
    background-color: #007bff; /* Azul para o botão de compra */
    color: white;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.pacote-button:hover:not(:disabled) {
    background-color: #0056b3;
}

/* ----------------------------------------------------------------- */
/* --- NOVOS ESTILOS: LAYOUT E CENTRALIZAÇÃO DO FORMULÁRIO DE LOGIN --- */
/* ----------------------------------------------------------------- */

.login-form-container {
    /* Centraliza o formulário na tela horizontalmente e adiciona espaço vertical */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alinha no topo para que o formulário não fique colado no rodapé */
    padding: 50px 20px;
    margin: 50px 0; /* Espaçamento para as ofertas */
    width: 100%; /* Ocupa toda a largura para centralizar o conteúdo */
}

.login-box {
    /* Estilo para a caixa real do formulário (o painel branco) */
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Sombra mais elegante */
    width: 100%;
    max-width: 450px; /* Limita a largura do formulário */
    text-align: center;
    transition: transform 0.3s ease;
}

.login-box h2 {
    color: #6d5b94; /* Cor lilás do seu background degradê */
    margin-bottom: 25px;
    font-size: 1.8em;
}

.input-group {
    margin-bottom: 18px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.input-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box; 
    font-size: 1em;
}

/* Estiliza o botão de entrar para combinar com o tema */
#login-form button[type="submit"] {
    background-color: #a395c8; /* Lilás do seu tema */
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%;
}

#login-form button[type="submit"]:hover {
    background-color: #6d5b94; /* Lilás mais escuro no hover */
}

/* Estilo para a mensagem de erro/sucesso */
#login-message {
    font-weight: bold;
    margin-top: 15px;
    min-height: 20px; /* Garante que o container não mude de tamanho */
}

/* ----------------------------------------------------------------- */
/* --- AJUSTES NA GALERIA (books-grid) PARA O ESTADO INICIAL --- */
/* ----------------------------------------------------------------- */

/* Garante que o books-grid NÃO apareça se estiver escondido pelo JS */
#books-grid {
    /* Se você está usando o JS para controlar o display: none/grid,
       não precisa de CSS aqui. Apenas certifique-se que o CSS de cima
       não está interferindo na sua galeria (não está). */
}

/* Centraliza o placeholder de informações do usuário (acima das ofertas) */
#user-info-placeholder {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.1em;
    color: #555;
    font-weight: 500;
}


/* =========================================
   ESTILOS DO MENU DE USUÁRIO (DROPDOWN)
   (Ele cria o visual do Avatar (bolinha colorida) e a lista suspensa da página inicial)
   ========================================= */

/* Container que segura o Avatar e o Menu */
.user-menu-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* O Avatar (Bolinha com Iniciais) */
.user-avatar {
    width: 45px;
    height: 45px;
    background-color: #4a90e2; /* Azul bonito */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.2s;
    user-select: none;
}

.user-avatar:hover {
    transform: scale(1.05);
    background-color: #357abd;
}

/* O Menu Suspenso (Escondido por padrão) */
.dropdown-menu {
    display: none; /* Escondido */
    position: absolute;
    right: 0;
    top: 55px; /* Logo abaixo do avatar */
    background-color: white;
    min-width: 260px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    border-radius: 8px;
    z-index: 1000; /* Fica por cima de tudo */
    overflow: hidden;
    border: 1px solid #eee;
    text-align: left;
}

/* Cabeçalho do Menu (Nome e Login) */
.dropdown-header {
    padding: 15px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
}
.dropdown-header strong { display: block; color: #333; font-size: 1rem; }
.dropdown-header span { display: block; color: #777; font-size: 0.85rem; margin-top: 2px; }

/* Itens da Lista */
.dropdown-item {
    padding: 12px 15px;
    display: block;
    color: #444;
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.2s;
    border-bottom: 1px solid #fcfcfc;
    cursor: pointer;
}

.dropdown-item:hover {
    background-color: #f0f7ff;
    color: #4a90e2;
}

/* Ícones (Emojis) */
.icon { display: inline-block; width: 25px; text-align: center; margin-right: 8px; }

/* Status do Badge */
.badge { font-size: 0.75rem; padding: 2px 6px; border-radius: 4px; float: right; }
.badge-ok { background: #e6fffa; color: #00b894; border: 1px solid #00b894; }
.badge-warn { background: #fffbe6; color: #faad14; border: 1px solid #faad14; }

/* Divisor Fino */
.dropdown-divider {
    height: 1px;
    background-color: #e0e0e0;
    margin: 5px 0;
}

/* Item Sair */
.dropdown-item.logout { color: #e74c3c; font-weight: bold; }
.dropdown-item.logout:hover { background-color: #fff5f5; }

/* Classe para mostrar o menu via JS */
.show-menu { display: block; animation: fadeIn 0.2s; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }


/* === ESTILOS DO MODAL DE CONTRATO === */

/* Fundo Escuro (Overlay) */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Fundo preto semitransparente */
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px); /* Efeito de desfoque no fundo */
}

/* A Caixa Branca do Modal */
.modal-box {
    background: white;
    width: 90%;
    max-width: 600px;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Não deixa passar da altura da tela */
}

/* Cabeçalho */
.modal-header {
    background: #4a90e2;
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.close-modal-btn {
    background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer;
}

/* Área de Rolagem do Texto */
.contract-scroll-area {
    padding: 20px;
    overflow-y: auto; /* Permite rolar o texto longo */
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
    font-size: 0.9rem;
    color: #333;
    line-height: 1.5;
    flex: 1; /* Ocupa o espaço disponível */
}

/* Aviso Amarelo (Taxa) */
.maintenance-alert {
    background-color: #fff3cd;
    color: #856404;
    padding: 15px;
    font-size: 0.85rem;
    border-left: 5px solid #ffeeba;
    margin: 10px 20px;
}

/* Área de Ação (Checkbox e Botão) */
.contract-actions {
    padding: 20px;
    background: white;
    border-top: 1px solid #eee;
}

.checkbox-container {
    display: block;
    margin-bottom: 15px;
    cursor: pointer;
    font-weight: bold;
    color: #2c3e50;
}

/* Botão de Checkout */
.btn-checkout {
    width: 100%;
    padding: 15px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

/* Estado Desabilitado (Cinza) */
.btn-checkout:disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
}

/* Estado Habilitado (Verde PagSeguro) */
.btn-checkout:not(:disabled) {
    background-color: #2ecc71;
    color: white;
    box-shadow: 0 4px 10px rgba(46, 204, 113, 0.4);
}
.btn-checkout:not(:disabled):hover {
    background-color: #27ae60;
    transform: translateY(-2px);
}

/* Utilitário para esconder */
.hidden { display: none !important; }

/* FIM DO BIBLIOTECA.CSS */