/* Responsive Styles */

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .navbar-brand span {
        font-size: 0.9rem;
    }

    .product-card {
        margin-bottom: 15px;
    }

    .product-image {
        height: 140px;
    }

    .product-title {
        font-size: 1rem;
    }

    .product-list-item {
        flex-direction: column;
    }

    .product-list-image {
        width: 100%;
        height: 120px;
    }

    .add-to-cart-btn {
        width: 32px;
        height: 32px;
    }

    .quantity-control {
        margin: 10px 0;
    }

    .breadcrumbs {
        font-size: 0.8rem;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .product-list-item {
        flex-direction: row;
    }

    .product-list-image {
        width: 100px;
        height: 100px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .product-card {
        margin-bottom: 20px;
    }

    .product-image {
        height: 160px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .navbar {
        padding: 0.75rem 1rem;
    }



    .product-image {
        height: 120px;
    }
}

/* Mobile Mode Specific Styles */
/*
.grid-mode .product-list-container {
    display: none;
}

.list-mode .product-grid-container {
    display: none;
}
*/
/* Modal Responsiveness */
@media (max-width: 575.98px) {
    /* Full screen modals on mobile */
    .modal.show .modal-dialog {
        margin: 0;
        max-width: none;
        height: 100vh;
    }

    .modal.show .modal-content {
        border-radius: 0;
        height: 100vh;
    }

    .modal-body {
        padding: 15px;
        overflow-y: auto;
    }

    .modal-footer {
        position: sticky;
        bottom: 0;
        background-color: white;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }
}

/* Tablet Mode Specific Styles */
@media (min-width: 576px) and (max-width: 991.98px) {
    .modal-dialog {
        max-width: 500px;
    }

    .productDetailModal .modal-dialog {
        max-width: 600px;
    }
}

/* Desktop Mode Specific Styles */
@media (min-width: 992px) {
    .modal-dialog {
        margin: 1.75rem auto;
    }

    .productDetailModal .modal-dialog {
        max-width: 700px;
    }

    .loginModal .modal-dialog,
    .registerModal .modal-dialog {
        max-width: 500px;
    }

    .cartModal .modal-dialog {
        max-width: 600px;
    }
}