/* ==========================================
   RESPONSIVIDADE
   ========================================== */

   @media (max-width: 768px) {
    .container {
        padding: 1.5rem;
    }

    main {
        padding: 1.5rem;
    }

    .books-container {
        grid-template-columns: 1fr;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.2rem;
    }
    
    .input-container {
        flex-direction: column;
    }
    
    .submit-btn {
        width: 100%;
    }
}

/* ==========================================
   ESTILOS ESPECÍFICOS PARA COMPONENTES EM TELAS MENORES
   ========================================== */

@media (max-width: 480px) {
    .navigation-btns {
        flex-direction: column;
        gap: 1rem;
    }
    
    .nav-btn {
        width: 100%;
    }
    
    .controls {
        flex-direction: column;
        gap: 1rem;
    }
    
    header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .color-theme {
        justify-content: space-between;
        width: 100%;
    }
    
    .share-buttons {
        justify-content: space-between;
    }
}