/* Mobile Responsive Styles for T&C Product Pages */

/* General Mobile Responsiveness */
@media (max-width: 991px) {
    body {
        overflow-x: hidden;
    }
    
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Navbar Mobile Styles */
    .navbar {
        height: auto;
        padding: 15px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .navbar-logo-row {
        margin-bottom: 15px;
    }
    
    .navbar-menu {
        width: 100%;
        flex-direction: column;
    }
    
    .navbar-links {
        flex-direction: column;
        width: 100%;
        gap: 10px;
        margin-bottom: 15px;
    }
    
    .navbar-links a {
        width: 100%;
        text-align: center;
    }
    
    .navbar-search {
        width: 100%;
        margin-bottom: 15px;
    }
    
    .navbar-icons {
        width: 100%;
        justify-content: space-around;
    }
    
    /* Product Layout */
    .product-gallery {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .product-gallery img {
        height: auto;
        max-height: 250px;
    }
    
    /* Footer Mobile Styles */
    .footer-container {
        flex-direction: column;
        padding: 20px 15px;
    }
    
    .footer-col {
        width: 100%;
        margin-bottom: 20px;
    }
    
    /* Cart Panel */
    .slide-panel.active {
        width: 85%;
    }
    
    /* Lightbox for Mobile */
    #lightboxImg {
        max-width: 95vw;
        max-height: 70vh;
    }
}

/* Small Mobile Devices */
@media (max-width: 576px) {
    .navbar-logo-row img {
        height: 60px;
    }
    
    .navbar-title-inline {
        font-size: 1rem;
    }
    
    .product-container {
        padding: 15px;
    }
    
    .btn-lg {
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }
    
    /* Improve touch targets for mobile */
    .navbar-links a,
    .btn,
    .back-button,
    .navbar-icons a, 
    .navbar-icons .icon-btn {
        padding: 10px;
        margin-bottom: 5px;
    }
    
    /* Lightbox controls for touch */
    #lightboxModal [onclick] {
        padding: 15px;
    }
    
    /* Footer improvements */
    .footer-icons a {
        margin: 0 10px;
        font-size: 1.5rem;
    }
}

/* Hamburger Menu for Mobile */
@media (max-width: 991px) {
    .navbar-menu-toggle {
        display: block;
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
        z-index: 1001;
        font-size: 24px;
        color: #517DAE;
    }
    
    .navbar-menu {
        display: none;
    }
    
    .navbar-menu.active {
        display: flex;
    }
    
    /* Improved form elements for touch */
    input, 
    textarea, 
    select, 
    button {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }
    
    /* Fix for modal on mobile */
    .modal-dialog {
        margin: 10px;
        width: auto;
    }
}

/* Ensure content doesn't overlap with fixed navbar */
@media (max-width: 991px) {
    .main-content {
        margin-top: 90px;
    }
    
    .container.mt-5.pt-5 {
        margin-top: 1rem !important;
        padding-top: 1rem !important;
    }
}

/* Fix for iOS devices */
@media (max-width: 991px) {
    input[type="text"],
    input[type="email"],
    input[type="search"],
    textarea {
        -webkit-appearance: none;
        border-radius: 4px;
    }
}