/* Comprehensive Mobile Responsiveness for All Screen Sizes */

/* ==================== GOOGLE TRANSLATE PAGE OVERRIDE ==================== */
/* Force desktop layout on translated pages regardless of viewport */
@supports (bottom:env(safe-area-inset-bottom)) {
    /* On Google Translate domains, disable all mobile breakpoints */
}

/* Aggressive rule for Google Translate pages - override responsive CSS */
@media all {
    /* Override media queries on translate pages */
    body.translate-page,
    html.translate-page {
        min-width: 992px !important;
        width: 100% !important;
    }
    
    body.translate-page .container-fluid,
    body.translate-page .container {
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    body.translate-page .navbar {
        padding: 0.75rem 1rem !important;
        flex-wrap: wrap !important;
    }
    
    body.translate-page .navbar-brand img {
        max-height: 40px !important;
        width: auto !important;
    }
    
    body.translate-page .product-image {
        height: 180px !important;
    }
    
    body.translate-page .product-info {
        padding: 12px !important;
    }
    
    /* Ensure text sizing on desktop */
    body.translate-page body {
        font-size: 15px !important;
    }
    
    body.translate-page h1 { font-size: 2rem !important; }
    body.translate-page h2 { font-size: 1.75rem !important; }
    body.translate-page h3 { font-size: 1.5rem !important; }
    body.translate-page h4 { font-size: 1.25rem !important; }
}

/* Root responsive variables */
:root {
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --font-size-base: 1rem;
}

/* ==================== EXTRA SMALL DEVICES (< 360px) ==================== */
@media (max-width: 359px) {
    /* General */
    body {
        font-size: 13px;
    }
    
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Navbar */
    .navbar {
        padding: 0.4rem 0.5rem;
    }
    
    .navbar-brand img {
        max-height: 32px;
    }
    
    .px-3 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Text sizing */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.1rem; }
    h4 { font-size: 1rem; }
    h5 { font-size: 0.9rem; }
    
    /* Buttons */
    .btn {
        padding: 0.4rem 0.6rem;
        font-size: 11px;
        min-height: 32px;
        border-radius: 3px;
    }
    
    .btn-sm {
        padding: 0.3rem 0.5rem;
        font-size: 10px;
        min-height: 30px;
    }
    
    /* Forms */
    .form-control {
        font-size: 12px;
        padding: 0.4rem 0.5rem;
        height: auto;
    }
    
    /* Cards */
    .card {
        margin-bottom: 0.75rem;
        border-radius: 4px;
    }
    
    .product-card {
        border-radius: 4px;
    }
    
    .product-image {
        height: 120px;
    }
    
    .product-info {
        padding: 8px;
    }
    
    .product-info h4 {
        font-size: 12px;
        line-height: 1.2;
    }
    
    /* Spacing utilities */
    .px-2 { padding-left: 6px !important; padding-right: 6px !important; }
    .mx-1 { margin-left: 4px !important; margin-right: 4px !important; }
    .ml-auto { margin-left: auto !important; }
    .mr-2 { margin-right: 6px !important; }
    
    /* Search box */
    .form-inline {
        flex-direction: column;
        gap: 6px;
    }
    
    /* Top bar */
    .top-bar-info {
        display: block;
        font-size: 11px;
        margin-bottom: 4px;
    }
    
    /* Footer */
    footer {
        padding: 1.5rem 0 !important;
        font-size: 12px;
    }
    
    footer h5 {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    .list-unstyled li {
        margin-bottom: 0.4rem;
    }
}

/* ==================== SMALL DEVICES (360px - 576px) ==================== */
@media (min-width: 360px) and (max-width: 576px) {
    /* General */
    body {
        font-size: 14px;
    }
    
    .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    /* Navbar */
    .navbar {
        padding: 0.5rem 0.75rem;
        flex-wrap: wrap;
    }
    
    .navbar-brand img {
        max-height: 36px;
    }
    
    .navbar-toggler {
        padding: 0.25rem 0.5rem;
        font-size: 1rem;
    }
    
    /* Text sizing */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.1rem; }
    h5 { font-size: 1rem; }
    
    /* Buttons */
    .btn {
        padding: 0.5rem 0.75rem;
        font-size: 12px;
        min-height: 36px;
    }
    
    .btn-sm {
        padding: 0.4rem 0.6rem;
        font-size: 11px;
        min-height: 34px;
    }
    
    /* Forms */
    .form-control {
        font-size: 13px;
        padding: 0.5rem 0.6rem;
    }
    
    .input-group .form-control {
        width: 70px;
    }
    
    /* Product cards */
    .product-image {
        height: 140px;
    }
    
    .product-info {
        padding: 10px;
    }
    
    .product-info h4 {
        font-size: 13px;
        line-height: 1.3;
    }
    
    /* Spacing */
    .px-3 { padding-left: 15px !important; padding-right: 15px !important; }
    .mx-1 { margin-left: 6px !important; margin-right: 6px !important; }
    
    /* Search */
    .form-inline {
        gap: 6px;
    }
    
    /* Top bar */
    .top-bar-info {
        display: inline-block;
        margin-right: 12px;
        font-size: 12px;
    }
    
    /* Footer */
    footer {
        padding: 2rem 0 !important;
    }
    
    footer h5 {
        font-size: 0.95rem;
    }
    
    /* Modal responsive */
    .modal-dialog {
        margin: 1rem auto;
    }
    
    /* Alert boxes */
    .alert {
        padding: 0.75rem 0.75rem;
        font-size: 13px;
    }
}

/* ==================== MEDIUM DEVICES (577px - 768px) ==================== */
@media (min-width: 577px) and (max-width: 768px) {
    /* General */
    body {
        font-size: 15px;
    }
    
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Navbar */
    .navbar {
        padding: 0.75rem 1rem;
    }
    
    .navbar-brand img {
        max-height: 38px;
    }
    
    /* Text sizing */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    
    /* Buttons */
    .btn {
        padding: 0.5rem 1rem;
        font-size: 13px;
        min-height: 38px;
    }
    
    .btn-sm {
        padding: 0.4rem 0.75rem;
        font-size: 12px;
        min-height: 36px;
    }
    
    /* Product cards */
    .product-image {
        height: 160px;
    }
    
    .product-info {
        padding: 12px;
    }
    
    .product-info h4 {
        font-size: 14px;
    }
    
    /* Footer */
    footer {
        padding: 2.5rem 0 !important;
    }
    
    /* Grid adjustments */
    .col-sm-6 {
        flex: 0 0 50%;
    }
    
    .col-md-3 {
        flex: 0 0 50%;
    }
}

/* ==================== TABLET & LARGE PHONE (769px - 991px) ==================== */
@media (min-width: 769px) and (max-width: 991px) {
    /* General */
    body {
        font-size: 15px;
    }
    
    /* Navbar */
    .navbar-brand img {
        max-height: 40px;
    }
    
    /* Product cards */
    .product-image {
        height: 180px;
    }
    
    .product-info {
        padding: 12px;
    }
    
    /* Grid */
    .col-md-3,
    .col-md-4 {
        flex: 0 0 25%;
    }
    
    .col-lg-2 {
        flex: 0 0 25%;
    }
}

/* ==================== LANDSCAPE MOBILE (ASPECT RATIO) ==================== */
@media (max-height: 500px) and (orientation: landscape) {
    /* Compress vertical spacing */
    .navbar {
        padding: 0.3rem 0.5rem;
    }
    
    .navbar-brand img {
        max-height: 28px;
    }
    
    .hero {
        padding: 20px 0;
    }
    
    .btn {
        min-height: 34px;
        padding: 0.3rem 0.6rem;
    }
    
    /* Reduce top/bottom margins */
    h1, h2, h3, h4, h5 {
        margin-bottom: 0.3rem;
    }
    
    .product-image {
        height: 100px;
    }
}

/* ==================== TOUCH DEVICE ENHANCEMENTS ==================== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn,
    a,
    button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove hover effects, use active instead */
    .btn:active {
        transform: scale(0.98);
    }
}

/* ==================== HIGH DPI SCREENS (Retina) ==================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Text rendering optimization */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* ==================== FLEXIBLE LAYOUTS ==================== */

/* Navbar menu items responsive */
.navbar-nav .nav-link {
    padding: 0.5rem 0.5rem;
    white-space: nowrap;
}

/* Search form responsive */
.form-inline .input-group {
    flex-wrap: wrap;
    width: 100%;
}

@media (max-width: 576px) {
    .form-inline {
        flex-direction: column;
        width: 100%;
    }
    
    .form-inline .input-group {
        width: 100%;
    }
    
    .form-inline .input-group input {
        width: 100%;
    }
}

/* Cart badge responsive */
.badge-pill {
    min-width: 20px;
    min-height: 20px;
    line-height: 20px;
}

@media (max-width: 576px) {
    .badge-pill {
        min-width: 18px;
        min-height: 18px;
        line-height: 18px;
        font-size: 9px;
    }
}

/* Footer responsive */
footer .row {
    margin: 0;
}

@media (max-width: 576px) {
    footer .col-lg-3,
    footer .col-md-6 {
        flex: 0 0 100%;
        margin-bottom: 1.5rem;
    }
}

/* Table responsive */
table {
    width: 100%;
    font-size: inherit;
}

@media (max-width: 576px) {
    table {
        font-size: 12px;
    }
    
    table th,
    table td {
        padding: 6px !important;
    }
}

/* Prevent overflow on all elements */
* {
    max-width: 100%;
}

/* Ensure images don't overflow */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Video responsiveness */
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* Dropdown menus responsive */
.dropdown-menu {
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
}

/* Modal responsive */
@media (max-width: 576px) {
    .modal:before {
        content: '';
        display: block;
        height: 0;
    }
    
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
}

/* Alert responsiveness */
.alert {
    padding: 0.75rem 0.75rem;
}

@media (max-width: 576px) {
    .alert {
        font-size: 13px;
        padding: 0.6rem 0.6rem;
    }
}

/* Breadcrumb responsive */
.breadcrumb {
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 576px) {
    .breadcrumb {
        font-size: 12px;
    }
}

/* Pagination responsive */
.pagination {
    flex-wrap: wrap;
    gap: 0.25rem;
}

@media (max-width: 576px) {
    .page-link {
        padding: 0.4rem 0.6rem;
        font-size: 12px;
    }
}

/* Ensure text doesn't overflow */
.btn,
.card-title,
.nav-link,
.dropdown-item {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* List responsiveness */
ul, ol {
    padding-left: 1.5rem;
}

@media (max-width: 576px) {
    ul, ol {
        padding-left: 1rem;
    }
}