/* ========================================
   RESPONSIVE DESIGN SYSTEM FOR ALL PAGES
   ======================================== */

/* ========================================
   BREAKPOINTS
   ======================================== */
/* Extra Small devices (phones, 576px and down) */
/* Small devices (landscape phones, 576px and up) */
/* Medium devices (tablets, 768px and up) */
/* Large devices (desktops, 992px and up) */
/* Extra large devices (large desktops, 1200px and up) */

/* ========================================
   GLOBAL RESPONSIVE UTILITIES
   ======================================== */

/* Hide/Show elements based on screen size */
.d-none-xs { display: none !important; }
.d-block-xs { display: block !important; }
.d-flex-xs { display: flex !important; }

@media (min-width: 576px) {
    .d-none-sm { display: none !important; }
    .d-block-sm { display: block !important; }
    .d-flex-sm { display: flex !important; }
}

@media (min-width: 768px) {
    .d-none-md { display: none !important; }
    .d-block-md { display: block !important; }
    .d-flex-md { display: flex !important; }
}

@media (min-width: 992px) {
    .d-none-lg { display: none !important; }
    .d-block-lg { display: block !important; }
    .d-flex-lg { display: flex !important; }
}

@media (min-width: 1200px) {
    .d-none-xl { display: none !important; }
    .d-block-xl { display: block !important; }
    .d-flex-xl { display: flex !important; }
}

       /* ========================================
          HEADER RESPONSIVE DESIGN
          ======================================== */

       /* Search Suggestions Responsive */
       @media (max-width: 767.98px) {
           .search-suggestions {
               max-height: 250px;
               font-size: 14px;
           }

           .suggestion-item {
               padding: 10px 12px;
           }

           .suggestion-item i {
               font-size: 11px;
           }
       }

       @media (max-width: 575.98px) {
           .search-suggestions {
               max-height: 200px;
               font-size: 13px;
           }

           .suggestion-item {
               padding: 8px 10px;
           }
       }

/* Mobile Header (576px and down) */
@media (max-width: 575.98px) {
    .flipkart-header {
        padding: 8px 0;
    }
    
    .flipkart-header .container {
        flex-direction: column;
        gap: 10px;
    }
    
    .logo-section {
        justify-content: center;
    }
    
    .logo-section .logo {
        font-size: 18px;
    }
    
    .logo-section .plus-text {
        font-size: 10px;
    }
    
    .search-section {
        margin: 0;
        max-width: 100%;
        order: 2;
    }
    
    .search-input {
        padding: 10px 45px 10px 12px;
        font-size: 13px;
    }
    
    .search-btn {
        width: 45px;
    }
    
    .header-actions {
        gap: 15px;
        justify-content: center;
        order: 3;
    }
    
    .header-action {
        font-size: 12px;
        flex-direction: column;
        text-align: center;
        gap: 2px;
    }
    
    .header-action span {
        font-size: 10px;
    }
    
    .header-action i {
        font-size: 16px;
    }
}

/* Small devices (576px - 767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .flipkart-header .container {
        flex-direction: column;
        gap: 12px;
    }
    
    .search-section {
        margin: 0;
        max-width: 100%;
    }
    
    .header-actions {
        gap: 20px;
        justify-content: center;
    }
}

/* Medium devices (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .flipkart-header .container {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .search-section {
        order: 2;
        flex: 1 1 100%;
        margin: 10px 0 0 0;
    }
    
    .header-actions {
        gap: 15px;
    }
}

/* ========================================
   CATEGORY NAVIGATION RESPONSIVE
   ======================================== */

@media (max-width: 575.98px) {
    .category-nav {
        padding: 8px 0;
    }
    
    .category-nav .container {
        gap: 12px;
        padding: 0 10px;
    }
    
    .category-item {
        min-width: 50px;
    }
    
    .category-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    
    .category-name {
        font-size: 10px;
        line-height: 1.1;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .category-nav .container {
        gap: 16px;
    }
    
    .category-item {
        min-width: 60px;
    }
    
    .category-icon {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }
    
    .category-name {
        font-size: 11px;
    }
}

/* ========================================
   HERO SLIDER RESPONSIVE
   ======================================== */

@media (max-width: 575.98px) {
    .hero-slider {
        height: 180px;
    }
    
    .slide-content {
        padding: 1rem;
        max-width: 100%;
    }
    
    .slide-title {
        font-size: 18px;
        margin-bottom: 0.3rem;
    }
    
    .slide-subtitle {
        font-size: 12px;
        margin-bottom: 1rem;
    }
    
    .slide-btn {
        padding: 8px 16px;
        font-size: 12px;
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        width: 32px;
        height: 32px;
    }
    
    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 14px;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .hero-slider {
        height: 200px;
    }
    
    .slide-title {
        font-size: 20px;
    }
    
    .slide-subtitle {
        font-size: 14px;
    }
}

/* ========================================
   PRODUCT CARDS RESPONSIVE
   ======================================== */

@media (max-width: 575.98px) {
    .product-card {
        margin-bottom: 15px;
    }
    
    .product-image {
        height: 160px;
    }
    
    .product-info {
        padding: 12px;
    }
    
    .product-title {
        font-size: 13px;
        height: 36px;
        margin-bottom: 6px;
    }
    
    .current-price {
        font-size: 14px;
    }
    
    .original-price {
        font-size: 12px;
    }
    
    .discount-badge {
        font-size: 10px;
        padding: 1px 4px;
    }
    
    .product-rating .fas {
        font-size: 10px;
    }
    
    .rating-count {
        font-size: 10px;
    }
    
    .add-to-cart-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .add-to-cart-btn i {
        font-size: 12px;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .product-image {
        height: 180px;
    }
    
    .product-title {
        font-size: 14px;
    }
    
    .current-price {
        font-size: 15px;
    }
}

/* ========================================
   PRODUCTS PAGE RESPONSIVE
   ======================================== */

@media (max-width: 767.98px) {
    /* Mobile Filter Toggle */
    .filter-toggle {
        display: block !important;
        margin-bottom: 15px;
    }
    
    .filter-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        height: 100vh;
        background: white;
        z-index: 1050;
        transition: left 0.3s ease;
        overflow-y: auto;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
    
    .filter-sidebar.show {
        left: 0;
    }
    
    .filter-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1040;
        display: none;
    }
    
    .filter-overlay.show {
        display: block;
    }
    
    .filter-close {
        position: absolute;
        top: 15px;
        right: 15px;
        background: none;
        border: none;
        font-size: 20px;
        color: #666;
    }
    
    /* Products Grid */
    .products-grid .col-lg-3,
    .products-grid .col-md-4 {
        width: 50%;
    }
    
    .products-grid .col-sm-6 {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .products-grid .col-lg-3,
    .products-grid .col-md-4,
    .products-grid .col-sm-6 {
        width: 100%;
    }
    
    .filter-sidebar {
        width: 100%;
    }
}

/* ========================================
   CART PAGE RESPONSIVE
   ======================================== */

@media (max-width: 767.98px) {
    .cart-item {
        flex-direction: column;
        gap: 10px;
    }
    
    .cart-item-image {
        width: 100%;
        max-width: 120px;
        margin: 0 auto;
    }
    
    .cart-item-details {
        text-align: center;
    }
    
    .cart-item-actions {
        justify-content: center;
        gap: 10px;
    }
    
    .quantity-controls {
        justify-content: center;
    }
    
    .cart-summary {
        margin-top: 20px;
    }
}

@media (max-width: 575.98px) {
    .cart-item-image {
        max-width: 100px;
    }
    
    .cart-item-title {
        font-size: 14px;
    }
    
    .cart-item-price {
        font-size: 16px;
    }
    
    .quantity-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    .quantity-input {
        width: 40px;
        font-size: 14px;
    }
}

/* ========================================
   CHECKOUT PAGE RESPONSIVE
   ======================================== */

@media (max-width: 767.98px) {
    .checkout-container {
        flex-direction: column;
    }
    
    .checkout-form {
        order: 2;
        margin-top: 20px;
    }
    
    .order-summary {
        order: 1;
        margin-bottom: 20px;
    }
    
    .payment-methods {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media (max-width: 575.98px) {
    .checkout-form {
        padding: 15px;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-label {
        font-size: 14px;
    }
    
    .form-control {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    .btn-checkout {
        padding: 12px 20px;
        font-size: 16px;
    }
}

/* ========================================
   PROFILE PAGE RESPONSIVE
   ======================================== */

@media (max-width: 767.98px) {
    .profile-container {
        flex-direction: column;
    }
    
    .profile-sidebar {
        order: 2;
        margin-top: 20px;
    }
    
    .profile-content {
        order: 1;
    }
    
    .profile-nav {
        flex-direction: row;
        overflow-x: auto;
        padding: 10px 0;
    }
    
    .profile-nav .nav-link {
        white-space: nowrap;
        padding: 8px 15px;
        margin-right: 10px;
    }
}

@media (max-width: 575.98px) {
    .profile-nav {
        gap: 5px;
    }
    
    .profile-nav .nav-link {
        padding: 6px 12px;
        font-size: 13px;
    }
    
    .profile-content {
        padding: 15px;
    }
}

/* ========================================
   FOOTER RESPONSIVE
   ======================================== */

@media (max-width: 767.98px) {
    .footer {
        padding: 30px 0 20px;
    }
    
    .footer .row > div {
        margin-bottom: 20px;
    }
    
    .footer h5,
    .footer h6 {
        font-size: 16px;
        margin-bottom: 10px;
    }
    
    .footer p,
    .footer li {
        font-size: 13px;
    }
    
    .social-links {
        justify-content: center;
    }
    
    .payment-methods {
        text-align: center;
        margin-top: 15px;
    }
}

@media (max-width: 575.98px) {
    .footer {
        padding: 20px 0 15px;
    }
    
    .footer h5,
    .footer h6 {
        font-size: 15px;
    }
    
    .footer p,
    .footer li {
        font-size: 12px;
    }
    
    .social-links a {
        font-size: 16px;
        margin: 0 8px;
    }
    
    .payment-methods i {
        font-size: 18px;
        margin: 0 5px;
    }
}

/* ========================================
   ADMIN DASHBOARD RESPONSIVE
   ======================================== */

@media (max-width: 991.98px) {
    .admin-sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        width: 280px;
        z-index: 1050;
        transition: left 0.3s ease;
    }
    
    .admin-sidebar.show {
        left: 0;
    }
    
    .admin-main {
        margin-left: 0;
    }
    
    .admin-toggle {
        display: block !important;
    }
    
    .admin-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1040;
        display: none;
    }
    
    .admin-overlay.show {
        display: block;
    }
}

@media (max-width: 767.98px) {
    .admin-sidebar {
        width: 100%;
        left: -100%;
    }
    
    .stats-card {
        margin-bottom: 15px;
    }
    
    .stats-card h3 {
        font-size: 1.5rem;
    }
    
    .admin-table {
        font-size: 13px;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 8px 6px;
    }
}

@media (max-width: 575.98px) {
    .admin-header {
        padding: 10px 15px;
    }
    
    .admin-content {
        padding: 15px;
    }
    
    .stats-card {
        padding: 15px;
    }
    
    .stats-card h3 {
        font-size: 1.25rem;
    }
    
    .admin-table {
        font-size: 12px;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 6px 4px;
    }
}

/* ========================================
   MODAL RESPONSIVE
   ======================================== */

@media (max-width: 767.98px) {
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .modal-content {
        border-radius: 8px;
    }
    
    .modal-header {
        padding: 15px;
    }
    
    .modal-body {
        padding: 15px;
    }
    
    .modal-footer {
        padding: 15px;
    }
}

@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 5px;
        max-width: calc(100% - 10px);
    }
    
    .modal-header {
        padding: 12px;
    }
    
    .modal-body {
        padding: 12px;
    }
    
    .modal-footer {
        padding: 12px;
    }
    
    .modal-title {
        font-size: 16px;
    }
}

/* ========================================
   FORM RESPONSIVE
   ======================================== */

@media (max-width: 767.98px) {
    .form-container {
        padding: 20px;
    }
    
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-label {
        font-size: 14px;
        margin-bottom: 5px;
    }
    
    .form-control {
        padding: 10px 12px;
        font-size: 14px;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 14px;
    }
}

@media (max-width: 575.98px) {
    .form-container {
        padding: 15px;
    }
    
    .form-control {
        padding: 8px 10px;
        font-size: 13px;
    }
    
    .btn {
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Text alignment responsive */
@media (max-width: 575.98px) {
    .text-center-xs { text-align: center !important; }
    .text-left-xs { text-align: left !important; }
    .text-right-xs { text-align: right !important; }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .text-center-sm { text-align: center !important; }
    .text-left-sm { text-align: left !important; }
    .text-right-sm { text-align: right !important; }
}

/* Spacing responsive */
@media (max-width: 575.98px) {
    .p-xs-0 { padding: 0 !important; }
    .p-xs-1 { padding: 0.25rem !important; }
    .p-xs-2 { padding: 0.5rem !important; }
    .p-xs-3 { padding: 1rem !important; }
    
    .m-xs-0 { margin: 0 !important; }
    .m-xs-1 { margin: 0.25rem !important; }
    .m-xs-2 { margin: 0.5rem !important; }
    .m-xs-3 { margin: 1rem !important; }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .no-print { display: none !important; }
    
    .flipkart-header,
    .category-nav,
    .footer {
        display: none !important;
    }
    
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    .product-card {
        break-inside: avoid;
        margin-bottom: 20px;
    }
    
    .btn {
        display: none !important;
    }
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Focus styles for better accessibility */
@media (prefers-reduced-motion: no-preference) {
    .btn:focus,
    .form-control:focus,
    .nav-link:focus {
        outline: 2px solid #2874f0;
        outline-offset: 2px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .product-card {
        border: 2px solid #000;
    }
    
    .btn {
        border: 2px solid currentColor;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --text-primary: #ffffff;
        --text-secondary: #cccccc;
        --bg-light: #2c2c2c;
        --white: #1a1a1a;
        --border-color: #444444;
    }
    
    .product-card {
        background: #2c2c2c;
        border-color: #444444;
    }
    
    .form-control {
        background: #2c2c2c;
        border-color: #444444;
        color: #ffffff;
    }
}