/*
═══════════════════════════════════════════════════════════════
  Mobile Responsive Styles - Ferdows
═══════════════════════════════════════════════════════════════
*/

/* ==================== GENERAL MOBILE STYLES ==================== */

@media (max-width: 768px) {
    /* Typography Adjustments */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.1rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.9rem; }
    
    body {
        font-size: 14px;
    }
    
    /* Container */
    .container {
        padding: 0 0.75rem;
    }
    
    /* Cards */
    .card {
        border-radius: 15px;
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    /* Buttons */
    .btn {
        width: 100%;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
    
    /* Grid Layouts */
    .checkout-grid,
    .profile-grid,
    .two-column {
        grid-template-columns: 1fr !important;
    }
}


/* ==================== PRODUCT PAGES ==================== */

@media (max-width: 768px) {
    /* Product List Page - Layout */
    .container > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Mobile Filters - Hidden by default, shown via toggle */
    .mobile-filters-toggle {
        margin-bottom: 1rem;
    }
    
    .mobile-filters-panel {
        display: none;
    }
    
    .mobile-filters-panel.active {
        display: block;
    }
    
    /* Sidebar - Collapsible on Mobile */
    aside {
        order: 2 !important;
    }
    
    aside .card {
        position: static !important;
        margin-bottom: 1rem !important;
        border-radius: 12px !important;
    }
    
    aside .card-body {
        padding: 1rem !important;
    }
    
    aside h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        border-bottom: 2px solid #f0f0f0 !important;
    }
    
    aside ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    aside li {
        margin-bottom: 0.5rem !important;
    }
    
    aside a {
        display: block !important;
        padding: 0.75rem 1rem !important;
        border-radius: 10px !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        font-size: 0.95rem !important;
        color: #2C3E50 !important;
        background: #f8f8f8 !important;
    }
    
    aside a:hover,
    aside a[style*="background-color: var(--primary-cream)"] {
        background: #F5F5DC !important;
        color: #556B2F !important;
        transform: translateX(-4px);
    }
    
    /* Products Grid - 2 Columns (Fixed) */
    .grid.grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    /* Ensure 2 products per row */
    .product-card {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Product Card - Mobile Optimized */
    .product-card {
        border-radius: 16px !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    
    .product-card:active {
        transform: scale(0.98) !important;
    }
    
    .product-image-container {
        position: relative !important;
        overflow: hidden !important;
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        background: #f8f8f8 !important;
    }
    
    .product-image-container a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    .product-card .card-img,
    .product-card .product-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        transition: transform 0.3s ease !important;
    }
    
    .product-card:active .card-img,
    .product-card:active .product-image {
        transform: scale(0.98) !important;
    }
    
    .product-image-placeholder {
        width: 100% !important;
        height: 100% !important;
        background-color: #F5F5DC !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .product-image-placeholder i {
        font-size: 2.5rem !important;
        color: #999 !important;
    }
    
    .product-badge {
        position: absolute !important;
        top: 0.5rem !important;
        right: 0.5rem !important;
        background: #DAA520 !important;
        color: white !important;
        padding: 0.25rem 0.6rem !important;
        border-radius: 8px !important;
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        z-index: 2 !important;
    }
    
    .product-card .card-body {
        padding: 0.875rem !important;
    }
    
    .product-card .card-title {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.4 !important;
        height: 2.8em !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }
    
    .product-card .card-title a {
        color: #2C3E50 !important;
        text-decoration: none !important;
        font-weight: 600 !important;
    }
    
    .product-card .card-text {
        display: none !important; /* Hide description on mobile */
    }
    
    .product-meta {
        display: flex !important;
        gap: 0.75rem !important;
        margin-bottom: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        border-bottom: 1px solid #f0f0f0 !important;
        font-size: 0.75rem !important;
        color: #666 !important;
    }
    
    .product-meta span {
        display: flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
    }
    
    .product-meta i {
        font-size: 0.7rem !important;
    }
    
    .product-price {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: #556B2F !important;
        margin-bottom: 0.75rem !important;
        text-align: center !important;
    }
    
    .product-card .btn {
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
        min-height: 44px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        width: 100% !important;
    }
    
    .product-card .btn-primary {
        background: #556B2F !important;
        border: none !important;
    }
    
    .product-card .btn-primary:active {
        background: #4A5E28 !important;
        transform: scale(0.98) !important;
    }
    
    /* Quantity Control - Mobile */
    .quantity-control {
        gap: 0.5rem !important;
        padding: 0.5rem !important;
        background: #f8f8f8 !important;
        border-radius: 12px !important;
        justify-content: center !important;
    }
    
    .quantity-control button {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
        border-radius: 10px !important;
        border: 2px solid #556B2F !important;
        background: white !important;
        color: #556B2F !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
    }
    
    .quantity-control button:active {
        background: #556B2F !important;
        color: white !important;
        transform: scale(0.95) !important;
    }
    
    .quantity-display {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        min-width: 40px !important;
        text-align: center !important;
        color: #2C3E50 !important;
    }
    
    /* Page Title */
    h2.mb-4 {
        font-size: 1.3rem !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
        color: #2C3E50 !important;
    }
    
    /* Pagination - Mobile */
    .pagination,
    div[style*="display: flex"][style*="justify-content: center"] {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        margin-top: 2rem !important;
        padding: 0 0.5rem !important;
    }
    
    .pagination .btn,
    div[style*="display: flex"] .btn {
        padding: 0.75rem 1rem !important;
        font-size: 0.85rem !important;
        min-height: 44px !important;
        border-radius: 10px !important;
        flex: 1 !important;
        min-width: auto !important;
    }
    
    /* Empty State */
    p[style*="grid-column"] {
        padding: 2rem 1rem !important;
        text-align: center !important;
        color: #666 !important;
        font-size: 0.95rem !important;
    }
    
    /* Product Detail */
    .product-detail-grid {
        grid-template-columns: 1fr !important;
    }
    
    .product-gallery {
        max-height: 300px;
    }
    
    .product-info {
        padding: 1rem;
    }
    
    .product-tabs {
        flex-direction: column;
    }
    
    .tab-button {
        width: 100%;
        text-align: center;
        border-radius: 8px;
        margin-bottom: 0.5rem;
    }
    
    /* Category Grid */
    .category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
    }
    
    .category-card {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    /* Keep 2 columns even on very small screens */
    .grid.grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    
    .product-card .card-body {
        padding: 0.65rem !important;
    }
    
    .product-card .card-title {
        font-size: 0.8rem !important;
    }
    
    .product-price {
        font-size: 1rem !important;
    }
    
    .filters-section input[type="text"],
    .filters-section select {
        font-size: 16px !important;
    }
}


/* ==================== ORDER PAGES ==================== */

@media (max-width: 768px) {
    /* Cart / Order List */
    .order-item {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }
    
    .order-item-image {
        width: 100%;
        max-width: 120px;
        height: 120px;
    }
    
    .order-item-details {
        width: 100%;
    }
    
    .order-item-actions {
        width: 100%;
        justify-content: space-between;
    }
    
    .quantity-controls {
        flex: 1;
    }
    
    /* Checkout */
    .checkout-form .form-row {
        grid-template-columns: 1fr !important;
        gap: 0;
    }
    
    .checkout-summary {
        position: static;
        margin-top: 1.5rem;
    }
    
    .form-group label {
        font-size: 0.9rem;
    }
    
    .form-control {
        font-size: 16px !important; /* Prevent iOS zoom */
        padding: 0.75rem;
    }
    
    /* Order Confirmation */
    .order-details-grid {
        grid-template-columns: 1fr !important;
    }
    
    .order-summary-item {
        flex-direction: row;
        justify-content: space-between;
    }
}


/* ==================== ACCOUNT PAGES ==================== */

@media (max-width: 768px) {
    /* Dashboard */
    .dashboard-stats {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    
    .stat-card {
        padding: 1.25rem;
    }
    
    /* Profile */
    .profile-layout {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .profile-sidebar {
        position: static !important;
        margin-bottom: 1rem;
        padding: 1rem !important;
    }
    
    .profile-header {
        padding: 1.5rem 1rem !important;
    }
    
    .profile-avatar {
        width: 70px !important;
        height: 70px !important;
        font-size: 1.75rem !important;
    }
    
    .profile-info h2 {
        font-size: 1.1rem !important;
    }
    
    .profile-info p {
        font-size: 0.85rem !important;
    }
    
    .profile-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        padding: 1rem !important;
    }
    
    .profile-nav-item {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.8rem !important;
        text-align: center;
    }
    
    .profile-nav-item i {
        font-size: 1.1rem !important;
        margin-left: 0.3rem !important;
    }
    
    .profile-content {
        padding: 1rem !important;
    }
    
    .profile-section {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .profile-section h3 {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .quick-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    .stat-card {
        padding: 1rem !important;
    }
    
    .stat-number {
        font-size: 1.5rem !important;
    }
    
    .stat-label {
        font-size: 0.8rem !important;
    }
    
    .form-group {
        margin-bottom: 1rem !important;
    }
    
    .form-group label {
        font-size: 0.85rem !important;
    }
    
    .form-group input,
    .form-group textarea {
        font-size: 14px !important;
        padding: 0.65rem !important;
    }
    
    .order-item-compact {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .order-item-compact h4 {
        font-size: 0.9rem !important;
    }
    
    .order-meta {
        font-size: 0.75rem !important;
        gap: 0.5rem !important;
    }
    
    /* Order History */
    .order-card-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
    }
    
    .order-card-actions {
        width: 100%;
    }
    
    .order-card-actions .btn {
        width: 100%;
    }
    
    /* Favorites */
    .favorites-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
    }
}


/* ==================== AUTH PAGES ==================== */

@media (max-width: 768px) {
    .auth-page {
        padding: 1.5rem 0;
        min-height: auto;
    }
    
    .auth-container {
        padding: 0 1rem;
    }
    
    .auth-card {
        padding: 1.5rem 1.25rem;
        border-radius: 20px;
    }
    
    .auth-icon {
        width: 60px;
        height: 60px;
    }
    
    .auth-icon i {
        font-size: 1.75rem;
    }
    
    .auth-header h1 {
        font-size: 1.35rem;
    }
    
    .quick-link-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ==================== CONTACT & ABOUT ==================== */

@media (max-width: 768px) {
    /* Contact Page */
    .contact-grid {
        grid-template-columns: 1fr !important;
    }
    
    .contact-form,
    .contact-info {
        padding: 1.5rem;
    }
    
    .contact-info-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* About Page */
    .about-hero {
        padding: 2rem 1rem;
    }
    
    .about-section {
        padding: 2rem 0;
    }
    
    .about-grid,
    .values-grid,
    .team-grid {
        grid-template-columns: 1fr !important;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* ==================== TABLES ==================== */

@media (max-width: 768px) {
    /* Make tables scroll horizontally */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 600px;
    }
    
    /* Or convert to card layout */
    .mobile-card-table {
        display: block;
    }
    
    .mobile-card-table thead {
        display: none;
    }
    
    .mobile-card-table tbody,
    .mobile-card-table tr,
    .mobile-card-table td {
        display: block;
        width: 100%;
    }
    
    .mobile-card-table tr {
        margin-bottom: 1rem;
        padding: 1rem;
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .mobile-card-table td {
        text-align: right;
        padding: 0.5rem 0;
        border: none;
    }
    
    .mobile-card-table td::before {
        content: attr(data-label);
        font-weight: bold;
        display: inline-block;
        margin-left: 0.5rem;
    }
}


/* ==================== MODALS & DIALOGS ==================== */

@media (max-width: 768px) {
    .modal {
        padding: 1rem;
    }
    
    .modal-content {
        margin: 0;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem;
    }
}


/* ==================== FILTERS & SEARCH ==================== */

@media (max-width: 768px) {
    .filters-section {
        position: static;
        margin-bottom: 1rem;
    }
    
    .filter-group {
        margin-bottom: 1rem;
    }
    
    .search-bar {
        flex-direction: column;
    }
    
    .search-bar input,
    .search-bar button {
        width: 100%;
    }
}


/* ==================== BREADCRUMBS ==================== */

@media (max-width: 768px) {
    .breadcrumb {
        font-size: 0.8rem;
        padding: 0.5rem 0;
        flex-wrap: wrap;
    }
    
    .breadcrumb-item {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* ==================== SPACING UTILITIES ==================== */

@media (max-width: 768px) {
    .mt-1, .my-1 { margin-top: 0.25rem !important; }
    .mt-2, .my-2 { margin-top: 0.5rem !important; }
    .mt-3, .my-3 { margin-top: 0.75rem !important; }
    .mt-4, .my-4 { margin-top: 1rem !important; }
    .mt-5, .my-5 { margin-top: 1.5rem !important; }
    
    .mb-1, .my-1 { margin-bottom: 0.25rem !important; }
    .mb-2, .my-2 { margin-bottom: 0.5rem !important; }
    .mb-3, .my-3 { margin-bottom: 0.75rem !important; }
    .mb-4, .my-4 { margin-bottom: 1rem !important; }
    .mb-5, .my-5 { margin-bottom: 1.5rem !important; }
    
    .pt-1, .py-1 { padding-top: 0.25rem !important; }
    .pt-2, .py-2 { padding-top: 0.5rem !important; }
    .pt-3, .py-3 { padding-top: 0.75rem !important; }
    .pt-4, .py-4 { padding-top: 1rem !important; }
    .pt-5, .py-5 { padding-top: 1.5rem !important; }
    
    .pb-1, .py-1 { padding-bottom: 0.25rem !important; }
    .pb-2, .py-2 { padding-bottom: 0.5rem !important; }
    .pb-3, .py-3 { padding-bottom: 0.75rem !important; }
    .pb-4, .py-4 { padding-bottom: 1rem !important; }
    .pb-5, .py-5 { padding-bottom: 1.5rem !important; }
}


/* ==================== SPECIAL MOBILE-ONLY CLASSES ==================== */

@media (max-width: 768px) {
    .hide-on-mobile {
        display: none !important;
    }
    
    .show-on-mobile {
        display: block !important;
    }
    
    .mobile-center {
        text-align: center !important;
    }
    
    .mobile-full-width {
        width: 100% !important;
    }
    
    .mobile-no-padding {
        padding: 0 !important;
    }
    
    .mobile-no-margin {
        margin: 0 !important;
    }
}

@media (min-width: 769px) {
    .hide-on-desktop {
        display: none !important;
    }
    
    .show-on-desktop {
        display: block !important;
    }
}


/* ==================== TOUCH OPTIMIZATIONS ==================== */

@media (max-width: 768px) {
    /* Larger touch targets */
    a, button, .btn, .icon-btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Better spacing for touch */
    .btn-group .btn {
        margin: 0.25rem;
    }
    
    /* Prevent text selection on double-tap */
    .no-select {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
}


/* ==================== LANDSCAPE MODE ==================== */

@media (max-width: 768px) and (orientation: landscape) {
    .auth-page,
    .product-detail {
        padding: 1rem 0;
    }
    
    .product-gallery {
        max-height: 200px;
    }
}


/* ==================== VERY SMALL SCREENS ==================== */

@media (max-width: 360px) {
    body {
        font-size: 13px;
    }
    
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.15rem; }
    
    .btn {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
    
    .product-card-title {
        font-size: 0.85rem;
    }
    
    .bottom-nav {
        padding: 0.5rem 0;
    }
    
    .bottom-nav-item {
        font-size: 0.7rem;
    }
}