/* === RESPONSIVE OPTIMIZATIONS === */

/* 1. Mobile Table Scrolling (Fixes broken layout on phones) */
@media (max-width: 767px) {
    .price-details--table, 
    .ResPriceDetailsTable {
        display: block;
        width: 100%;
        overflow-x: auto; /* Adds scrollbar if table is too wide */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iPhone */
    }
    
    /* Prevent table text wrapping awkwardly */
    .price-details--table table td, 
    .price-details--table table th {
        white-space: nowrap;
        padding: 10px;
    }
}

/* 2. Mobile Typography & Spacing */
@media (max-width: 767px) {
    /* Make giant headings smaller on phone */
    h1, .banner--content h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
    
    h2, .section--title h2 {
        font-size: 24px !important;
        margin-bottom: 15px !important;
    }
    
    /* Reduce huge gaps between sections */
    .bd--top-bottom {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    
    /* Center text on mobile for better readability */
    .banner--content {
        text-align: center;
        padding: 0 15px;
    }
}

/* 3. Navigation Bar (Mobile Menu) */
@media (max-width: 767px) {
    .navbar-header {
        background: #fff; /* Ensure logo area is clean */
        padding-bottom: 10px;
    }
    
    .navbar-brand img {
        max-height: 50px !important; /* Resize logo slightly for mobile */
        margin-top: -5px !important;
    }
    
    /* Ensure the "Hamburger" menu icon is visible with your new Blue */
    .navbar-toggle {
        border-color: #0088ff !important;
        background-color: transparent !important;
    }
    
    .navbar-toggle .icon-bar {
        background-color: #0088ff !important;
    }
    
    /* Fix dropdowns on mobile to not be too squashed */
    .navbar-nav .open .dropdown-menu {
        background-color: #f9f9f9;
        border: 1px solid #eee;
        padding: 10px;
    }
}

/* 4. Banner Slider Adjustments */
@media (max-width: 767px) {
    /* Hide the bottom slider navigation on very small screens to save space */
    .banner--slider-nav {
        display: none;
    }
    
    /* Adjust banner height so it doesn't take up the whole phone screen */
    .banner--item {
        height: auto !important;
        padding: 80px 0 !important;
    }
}