/* Responsive adjustments for Books Box */
/* filepath: Css/style.css */

/* Navbar brand font-size and padding for small screens */
@media (max-width: 575.98px) {
    .navbar .navbar-brand {
        font-size: 1.2rem;
        padding: 0.3rem 0.5rem;
    }

    .navbar .navbar-nav .nav-link {
        font-size: 0.95rem;
        padding: 0.3rem 0.5rem;
    }

    .cart-icon-container .fa-cart-shopping {
        font-size: 18px;
    }

    .cart-badge {
        font-size: 10px;
        min-width: 14px;
        top: -6px;
        right: -6px;
        padding: 1px 4px;
    }
}

/* Home section: adjust heading and padding */
@media (max-width: 767.98px) {
    #home .home-caption h1 {
        font-size: 2.2rem;
    }

    #home .home-caption p,
    #typing {
        font-size: 1rem;
    }

    .home-caption {
        margin-left: 0 !important;
        padding: 0 10px;
    }

    #home {
        height: 60vh;
        min-height: 350px;
    }
}

/* Featured Books grid */
@media (max-width: 991.98px) {

    #books-container .col-md-4,
    #tabs-books-container .col-md-4,
    #offer-books-container .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575.98px) {

    #books-container .col-md-4,
    #tabs-books-container .col-md-4,
    #offer-books-container .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Best Seller section image and text */
@media (max-width: 991.98px) {
    #text-best .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }

    #text-best figure {
        width: 80% !important;
        margin: 0 auto 2rem auto;
    }
}

/* Tabs section: make nav scrollable on mobile */
@media (max-width: 575.98px) {
    .tabs-container ul.nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 10px;
    }

    .tabs-container ul.nav .nav-item {
        flex: 0 0 auto;
    }
}

/* Quote section */
@media (max-width: 767.98px) {
    #quote p {
        font-size: 1.1rem;
        padding: 10px 0;
    }

    .Q {
        height: auto;
        padding: 30px 0;
    }
}

/* Footer section */
@media (max-width: 991.98px) {
    #footer .row {
        flex-direction: column;
        margin: 0 !important;
        padding: 0 !important;
    }

    #footer .col-md-6 {
        margin-bottom: 2rem;
    }
}

@media (max-width: 575.98px) {
    #footer {
        padding: 40px 0;
        background-attachment: scroll;
    }

    #footer h2 {
        font-size: 1.2rem;
    }

    .footer-container {
        padding: 10px !important;
    }
}

/* Form container (login/register) */
@media (max-width: 575.98px) {
    .form-container {
        padding: 12px;
        margin: 16px 4px;
        max-width: 98vw;
    }

    .form-container input,
    .form-container button {
        padding: 8px;
        font-size: 0.95rem;
    }
}

/* Responsive dark mode toggle button */
@media (max-width: 575.98px) {
    .dark-mode-toggle {
        top: auto;
        bottom: 20px;
        right: 10px;
        transform: none;
        font-size: 18px;
        padding: 4px;
    }
}

/* Responsive images */
img,
figure img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Responsive row gutters */
.row.g-3,
.row.g-4,
.row.g-5 {
    margin-left: 0;
    margin-right: 0;
}

/* Hide overflow on x for small screens */
body {
    overflow-x: hidden;
}