/* --- SEÇÃO 1: TÍTULO --- */

.secao-titulo-pagina {
    width: 100%;
    padding: 60px 20px 40px 80px; /* Espaço em cima e embaixo */
    text-align: left; /* Centraliza o texto */
    background-color: #fff;
}

.titulo-pagina {
    font-family: 'Barlow Condensed', sans-serif; /* Fonte padrão do site */
    font-size: 3rem; /* Tamanho grande mas elegante */
    color: #d1b476; /* O Vermelho da Marca */
    text-transform: lowercase; /* Força minúsculo como na referência */
    letter-spacing: 1px;
    margin: 0;
}

/* Responsivo (Celular) */
@media (max-width: 768px) {
    .secao-titulo-pagina { padding: 40px 20px 20px; }
    .titulo-pagina { font-size: 2.5rem; }
}

/* --- SEÇÃO 3: CATALOGO --- */
.secao-catalogo-livros {
    background-color: #fff;
    padding: 0 20px 60px 20px;
}

.container-catalogo {
    max-width: 1300px;
    margin: 0 auto;
    display: flex; /* Divide Sidebar e Main */
    gap: 40px;
    align-items: flex-start;
}

/* --- SIDEBAR (ESQUERDA) --- */
.sidebar-filtros {
    width: 280px;
    flex-shrink: 0;
    /* Removemos o background e padding geral para estilizar as partes separadas */
    background: transparent; 
    padding: 0;
}

/* 1. CAIXA DE CIMA (BUSCA) */
.box-busca-sidebar {
    background-color: #fff; /* Fundo Branco */
    border: 1px solid #000; /* Borda Preta Fina */
    border-bottom: none; /* Remove a borda de baixo para colar na parte bege */
    
    /* Arredonda só em cima */
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    
    padding: 30px 20px; /* Espaçamento interno */
}

/* Input (Caixa de texto bege dentro do branco) */
.input-sidebar {
    width: 100%;
    height: 45px;
    background-color: #f4efe9; /* Bege clarinho */
    border: none;
    border-radius: 15px;
    margin-bottom: 15px;
    font-family: 'Roboto', sans-serif;
    padding: 0 10px;
    outline: none;
}

/* Botão BUSCAR */
.btn-sidebar {
    width: 100%;
    background-color: #ecd6a8; /* Vermelho Intrínseca */
    color: white;
    border: none;
    padding: 10px;
    border-radius: 15px; /* Bem arredondado */
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.3s;
}
.btn-sidebar:hover {
    background-color: #d1b476;
}

/* 2. CAIXA DE BAIXO (GÊNEROS) */
.box-generos {
    background-color: #f4efe9; /* Fundo Bege */
    /* Não tem borda preta na imagem, só o fundo bege */
    
    /* Arredonda só embaixo */
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    
    padding: 30px 20px;
}

/* Título "GÊNEROS" */
.titulo-filtros {
    font-family: 'Roboto', sans-serif; /* Fonte mais simples */
    color: #444; /* Cinza escuro/Azulado */
    font-size: 1rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Lista de Checkboxes */
.lista-checkboxes label {
    display: flex; /* Alinha checkbox e texto */
    align-items: center;
    margin-bottom: 12px;
    color: #ecd6a8; /* TEXTO VERMELHO (Igual à imagem) */
    font-size: 0.95rem;
    cursor: pointer;
    font-weight: 500;
    line-height: 1.2;
}

.lista-checkboxes input {
    margin-right: 12px;
    width: 16px;
    height: 16px;
    accent-color: #e30613; /* Pinta o quadradinho de vermelho quando marcado */
    cursor: pointer;
    border: 1px solid #ccc;
}

.lista-checkboxes input { margin-right: 10px; accent-color: #e30613; }

/* --- FEED (DIREITA) --- */
.feed-livros { flex: 1; /* Ocupa o resto do espaço */ }

.topo-feed {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

/* ARQUIVO: css/livros.css */

/* Select "Ordenar" Estilizado (Igual à imagem) */
.select-ordenar {
    background-color: #f4efe9; /* O mesmo bege da barra lateral */
    border: none; /* Remove a borda cinza padrão */
    border-radius: 16px; /* Cantos arredondados suaves */
    padding: 10px 20px; /* Espaço interno maior */
    
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    color: #000; /* Texto preto */
    font-weight: 400;
    
    cursor: pointer;
    outline: none; /* Remove a linha azul ao clicar */
    
    /* Garante uma largura mínima para ficar bonito */
    min-width: 150px; 
    
    /* Aparência limpa (remove sombras padrão do navegador) */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Recriando a setinha (já que removemos a aparência padrão) */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
}

/* Efeito ao passar o mouse */
.select-ordenar:hover {
    background-color: #e8e3dd; /* Um pouco mais escuro */
}

/* GRID DE LIVROS (4 POR LINHA) */
.grid-livros {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Colunas */
    gap: 30px;
    margin-bottom: 40px;
}

/* Card do Livro (Estilo Intrínseca) */
.card-livro-catalogo {
    display: flex;
    flex-direction: column;
}

.card-livro-catalogo img {
    width: 100%;
    height: auto;
    aspect-ratio: 2/3;
    object-fit: cover;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 15px;
    transition: transform 0.3s;
}
.card-livro-catalogo:hover img { transform: translateY(-5px); }

.info-card-livro h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    color: #d1b476; /* Título Vermelho */
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: 800;
    line-height: 1.1;
}

.info-card-livro p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
}

.preco-card {
    font-weight: 800;
    color: #333;
    display: block;
    margin-bottom: 10px;
}

.tag-prevenda-card {
    background: #ddd;
    color: #555;
    font-size: 0.7rem;
    padding: 2px 6px;
    text-transform: uppercase;
    font-weight: bold;
    margin-left: 5px;
}

/* --- Card do Livro --- */
.card-livro-catalogo {
    display: flex;
    flex-direction: column;
}

/* Estilo da Imagem */
.card-livro-catalogo img {
    width: 100%;
    height: auto;
    aspect-ratio: 2/3;
    object-fit: cover;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-bottom: 15px;
    
    /* A transição fica aqui na imagem base */
    transition: transform 0.3s ease; 
    cursor: pointer;
}

/* MUDANÇA 1: O efeito só acontece se passar o mouse NA IMAGEM (img:hover) */
/* Antes era .card-livro-catalogo:hover img */
.card-livro-catalogo img:hover {
    transform: translateY(-5px);
}

/* Infos do Card */
.info-card-livro h3 {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    color: #d1b476;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: 800;
    line-height: 1.1;
}

.info-card-livro p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
}

.preco-card {
    font-weight: 800;
    color: #333;
    display: block;
    margin-bottom: 10px;
}

/* MUDANÇA 2: Botão Veja Mais com efeito Darker */
.btn-veja-mais {
    background-color: #e30613; /* Cor normal */
    color: white;
    text-align: center;
    padding: 8px;
    border-radius: 15px;
    font-weight: 800;
    text-decoration: none;
    font-size: 0.8rem;
    display: block;
    margin-top: auto;
    
    /* Adiciona suavidade na troca de cor */
    transition: background-color 0.3s ease;
}

/* Quando passa o mouse no botão */
.btn-veja-mais:hover {
    background-color: #b71c1c; /* Um vermelho mais escuro/fechado */
}

/* =========================================
   BOTÃO CARREGAR + LOADER INTERNO
   ========================================= */

.area-carregar-mais {
    text-align: center;
    margin-top: 30px;
    /* Removemos o min-height antigo pois o botão agora tem altura fixa */
}

/* Estilo Base do Botão (Ajustado) */
/* Estilo Base do Botão (Compacto) */
.btn-carregar-cinza {
    background-color: #888;
    color: white;
    border: none;
    height: 38px;
    padding: 0 30px; /* Pode ajustar este valor se quiser mais ou menos espaço nas laterais */
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
    
    /* REMOVA OU COMENTE A LINHA ABAIXO */
     min-width: 180px;
}

.btn-carregar-cinza:hover {
    background-color: #666;
}

/* O texto do botão */
.btn-text {
    transition: opacity 0.2s; /* Suaviza o desaparecimento */
}

/* O Spinner (Pequeno, branco, centralizado absolutamente) */
.loader-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Centraliza exato baseando-se no tamanho (24px / 2 = 12px) */
    margin-top: -12px; 
    margin-left: -12px;
    
    border: 3px solid rgba(255, 255, 255, 0.3); /* Fundo transparente branco */
    border-top: 3px solid #ffffff; /* Parte giratória branca */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 0.8s linear infinite;
    
    /* Começa invisível */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
}

/* A animação de girar (se já tiver no seu CSS, não precisa repetir) */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- ESTADO DE CARREGAMENTO (Ativado pelo JS) --- */

/* Quando o botão tiver a classe .loading... */
.btn-carregar-cinza.loading {
    cursor: not-allowed; /* Muda o cursor */
    background-color: #999; /* Cor ligeiramente diferente */
}

/* ...esconde o texto... */
.btn-carregar-cinza.loading .btn-text {
    opacity: 0;
}

/* ...e mostra o spinner */
.btn-carregar-cinza.loading .loader-btn {
    opacity: 1;
    visibility: visible;
}

/* Ajuste da distância entre Preço e Tag */
.preco-area {
    display: flex;
    align-items: center;
    
    /* Mudei de 10px para 5px */
    gap: 5px; 
    
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.preco {
    font-weight: 800;
    font-size: 18px;
    color: #333;
}

.tag-prevenda {
    background: #e0e0e0;
    color: #555;
    font-size: 11.9px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 1px;
    text-transform: uppercase;
    margin: 0 15px;
}

/* Garante que o container principal seja a referência para o overlay absoluto */
.feed-livros {
    position: relative; /* IMPORTANTE */
    flex: 1;
}

/* ARQUIVO: css/livros.css */

/* ... (mantenha o .feed-livros com position: relative) ... */

/* --- Camada de Overlay para Ordenação (Fixa na Tela) --- */
.loading-overlay {
    /* MUDANÇA PRINCIPAL: FIXED em vez de Absolute */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Fundo branco semi-transparente */
    background-color: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(2px); 
    
    /* Garante que fique acima de tudo (header, sidebar, footer) */
    z-index: 9999; 
    
    /* Centraliza o conteúdo na tela */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* O spinner grande (Mantenha igual) */
.loader-spinner-grande {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #e30613;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    animation: spin 1s linear infinite;
}

/* Link do Autor */
.link-autor-card {
    transition: color 0.3s;
}
.link-autor-card:hover {
    color: #4e4b4b !important; /* Força a cor vermelha */
    text-decoration: none !important;
}