/* =====================
   Checkout Responsive Layout
===================== */
.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-8);
    align-items: start;
    width: 100%;
}

.checkout-form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

/* =====================
   Products Listing Layout
===================== */
.products-page-container {

    padding-top: var(--space-8);
    padding-bottom: var(--space-16);
    width: 100%;
    max-width: 100%;
}

/* Two-column layout: sidebar + products */
.listing-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-8);
    align-items: start;
    width: 100%;
}

/* Sidebar base styles */
.filters-sidebar {
    position: sticky;
    top: var(--space-6);
}

/* Products area fills remaining space */
.products-listing-area {
    min-width: 0;
    width: 100%;
}

/* Top bar (count + sort) */
.listing-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* Mobile filter toggle bar — hidden on desktop */
.mobile-filter-bar {
    display: none;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    padding: var(--space-3) 0;
}

/* Mobile filter overlay */
.mobile-filter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.mobile-filter-overlay.is-active {
    display: block;
    opacity: 1;
}

/* Close button inside sidebar (mobile only) */
.mobile-filter-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 1.2rem;
    padding: var(--space-1);
    line-height: 1;
}


/* =====================
   Global Overflow Prevention
===================== */
html, body {
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
}

/* Prevent any element from causing horizontal overflow */
main, .site-footer, .site-header, .main-nav, .topbar {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* =====================
   Extra Large: 1920px+
===================== */
@media (min-width: 1920px) {
    :root { --container-max: 1560px; }
    .categories-grid { grid-template-columns: repeat(8, 1fr); }
    .products-grid   { grid-template-columns: repeat(5, 1fr); }
}

/* =====================
   Large Desktop: 1440px
===================== */
@media (max-width: 1440px) {
    .products-grid   { grid-template-columns: repeat(4, 1fr); }
    .categories-grid { grid-template-columns: repeat(6, 1fr); }
    .footer-grid     { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* =====================
   Desktop: 1280px
===================== */
@media (max-width: 1280px) {
    :root { --container-max: 1160px; }
    .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
    .footer-grid > *:first-child { grid-column: 1 / -1; }
    .footer-grid > *:first-child .footer-tagline { max-width: 100%; }
    .categories-grid { grid-template-columns: repeat(5, 1fr); }
    .topbar-features .topbar-feature:nth-child(n+4) { display: none; }
}

/* =====================
   Laptop: 1024px
===================== */
@media (max-width: 1024px) {
    :root {
        --container-max: 960px;
        --sidebar-width: 230px;
    }
    .hero-content { gap: var(--space-10); }
    .hero-title { font-size: clamp(2rem, 4vw, 3rem); }
    .hero-image-side { display: none; }
    .hero-content { grid-template-columns: 1fr; text-align: center; }
    .hero-desc { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-stats { justify-content: center; }
    .hero-trust { justify-content: center; }

    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .products-grid { grid-template-columns: repeat(3, 1fr); }
    .categories-grid { grid-template-columns: repeat(4, 1fr); }

    .dashboard-layout { grid-template-columns: 210px 1fr; }
    .listing-layout { grid-template-columns: 210px 1fr; }

    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
    .footer-grid > *:first-child { grid-column: 1 / -1; }

    .admin-stats-grid { grid-template-columns: repeat(3, 1fr); }

    /* Admin dashboard grid: 2 cols on tablet */
    .admin-dashboard-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================
   Medium Tablet: 900px
   (breakpoint إضافي للتدرج الناعم)
===================== */
@media (max-width: 900px) {
    :root { --container-max: 860px; }

    /* Admin stats: 3→2 columns */
    .stats-grid,
    .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }

    /* admin-dashboard-grid يتحول إلى عمود واحد مبكراً */
    .admin-dashboard-grid { grid-template-columns: 1fr; }

    /* تقليل padding الـ admin topbar */
    .admin-topbar { padding: 0 var(--space-4); }

    /* المنتجات: 3→2 */
    .products-grid { grid-template-columns: repeat(2, 1fr); }

    /* Footer Grid */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
    .footer-grid > *:first-child { grid-column: 1 / -1; }
}

/* =====================
   Tablet: 768px
===================== */
@media (max-width: 768px) {
    /* Hide topbar on mobile */
    .topbar { display: none; }

    /* Navigation */
    .main-nav { display: none; }
    .header-search { display: none; }
    .mobile-menu-toggle { display: flex; }
    .header-inner { justify-content: space-between; }

    /* Hide action button labels */
    .header-action-btn span { display: none; }
    .header-action-btn { padding: var(--space-2); }

    /* Container padding on mobile */
    .container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    /* Checkout: عمود واحد على الموبايل */
    .checkout-grid {
        grid-template-columns: 1fr;
    }
    .checkout-form-grid-2 {
        grid-template-columns: 1fr;
    }

    /* Hero — Mobile Vertical Stack */
    .hero-section { min-height: auto; padding: var(--space-6) 0; }
    .hero-content {
        grid-template-columns: 1fr;
        padding: var(--space-4) 0;
        text-align: center;
        gap: var(--space-6);
    }
    .hero-image-side {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        order: -1;
    }
    .hero-floating-cards {
        width: 100%;
        max-width: 100%;
        border-radius: var(--radius-xl);
        overflow: hidden;
        box-shadow: 0 6px 20px rgba(22, 163, 74, 0.12);
        background: white;
    }
    .hero-main-image {
        width: 100%;
        height: 230px;
        max-height: 260px;
        object-fit: cover;
        object-position: center;
        border-radius: var(--radius-xl);
    }
    /* إخفاء البطاقات العائمة لمنع خروجها من الشاشة */
    .hero-floating-badge { display: none; }
    .hero-title { font-size: clamp(1.75rem, 5vw, 2.3rem); letter-spacing: -0.5px; }
    .hero-desc { font-size: var(--font-size-base); margin: 0 auto var(--space-5); }
    .hero-actions { justify-content: center; width: 100%; gap: var(--space-3); }
    .hero-actions .btn { flex: 1; min-width: 140px; justify-content: center; }
    .hero-stats {
        justify-content: center;
        gap: var(--space-6);
        padding-top: var(--space-6);
        flex-wrap: wrap;
    }
    .hero-trust { justify-content: center; flex-wrap: wrap; text-align: center; font-size: 11px; }

    /* Features */
    .features-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

    /* Products & Categories */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
    .categories-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }

    /* Promo */
    .promo-grid { grid-template-columns: 1fr; }
    .promo-grid-2 { grid-template-columns: 1fr; }
    .promo-card { aspect-ratio: 16/7; }

    /* Dashboard & Profile (user profile) */
    .dashboard-layout { grid-template-columns: 1fr; }
    .dashboard-sidebar { position: static; }
    .dashboard-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .user-profile-grid { grid-template-columns: 1fr !important; gap: var(--space-6) !important; }
    .order-detail-grid { grid-template-columns: 1fr !important; gap: var(--space-6) !important; }

    /* Product Listing — Mobile: sidebar becomes fixed drawer from right */
    .listing-layout {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .mobile-filter-bar {
        display: flex;
    }

    .filters-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: 300px;
        max-width: 85vw;
        height: 100vh;
        overflow-y: auto;
        z-index: 999;
        border-radius: 0;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease;
        box-shadow: none;
    }

    .filters-sidebar.is-open {
        transform: translateX(0);
        visibility: visible;
        box-shadow: -4px 0 24px rgba(0,0,0,0.18);
    }

    #mobileFilterClose {
        display: flex !important;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-detail-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-6) !important;
    }

    /* Hide Mobile Profile Dropdown (click goes directly to /profile) */
    .nav-dropdown-menu {
        display: none !important;
    }

    /* Footer */
    .site-footer { width: 100%; max-width: 100%; box-sizing: border-box; }
    .footer-top { width: 100%; box-sizing: border-box; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); width: 100%; box-sizing: border-box; }
    .footer-grid > *:first-child { grid-column: 1 / -1; }
    .footer-bottom { flex-direction: column; text-align: center; gap: var(--space-4); width: 100%; box-sizing: border-box; }
    .payment-badges { justify-content: center; flex-wrap: wrap; }
    .footer-social { justify-content: flex-start; }

    /* Newsletter */
    .newsletter-form { flex-direction: column; gap: 0; }
    .newsletter-form .btn { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
    .newsletter-input { border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: var(--space-4) var(--space-5); }

    /* Cart Sidebar */
    .cart-sidebar { width: 100%; max-width: none; }

    /* Section */
    .section-title { font-size: var(--font-size-2xl); }
    .section-py { padding-top: var(--space-12); padding-bottom: var(--space-12); }

    /* Modals */
    .modal-box { width: 95%; }

    /* ===== Admin Mobile Layout ===== */

    /* Hide the desktop sidebar — it becomes a fixed overlay drawer using transform */
    .admin-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 275px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        overflow-y: auto !important;
        z-index: 9999 !important;
        transform: translateX(100%) !important;
        visibility: hidden !important;
        box-shadow: none !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease !important;
        display: flex !important;
    }
    .admin-sidebar.open {
        transform: translateX(0) !important;
        visibility: visible !important;
        display: flex !important;
        opacity: 1 !important;
        box-shadow: -6px 0 30px rgba(0, 0, 0, 0.4) !important;
    }

    /* زر فتح وإغلاق القائمة على الجوال */
    .admin-menu-toggle-btn {
        display: inline-flex !important;
    }

    /* زر الإغلاق داخل الـ sidebar */
    .admin-sidebar-close {
        display: flex !important;
    }

    /* Overlay خلف القائمة */
    .admin-sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.55) !important;
        backdrop-filter: blur(3px) !important;
        z-index: 9998 !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.25s ease, visibility 0.25s ease !important;
    }
    .admin-sidebar-overlay.active {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* المحتوى الرئيسي يأخذ كامل العرض */
    .admin-main {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden;
    }
    .admin-content {
        padding: var(--space-4);
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* شريط المحمول العلوي */
    .admin-mobile-topbar {
        display: flex !important;
    }

    .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-header-toggle { display: flex !important; }

    /* إصلاح جميع الجداول في الجوال */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .admin-table {
        min-width: 600px;
    }

    /* Admin topbar title على الموبايل */
    .admin-topbar-title {
        font-size: var(--font-size-sm);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 200px;
    }

    /* Admin dashboard grid: عمود واحد */
    .admin-dashboard-grid { grid-template-columns: 1fr; }

    /* Mobile Bottom Nav */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid var(--border-light);
        z-index: var(--z-fixed);
        box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .mobile-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: var(--space-2) var(--space-1);
        color: var(--text-muted);
        font-size: 10px;
        text-decoration: none;
        transition: color var(--transition-fast);
        position: relative;
    }
    .mobile-nav-item i { font-size: 20px; }
    .mobile-nav-item:hover,
    .mobile-nav-item.active { color: var(--accent); }

    body { padding-bottom: 64px; }

    /* Toast: ارتفع فوق Mobile Bottom Nav */
    .toast-container {
        bottom: calc(64px + var(--space-4));
    }
}

/* =====================
   Large Mobile: 576px
===================== */
@media (max-width: 576px) {
    .categories-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
    .features-grid { grid-template-columns: 1fr 1fr; }
    .sorting-bar { flex-direction: column; align-items: flex-start; gap: var(--space-3); }

    /* On small phones ensure products grid stays 2-col */
    .listing-layout .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    /* Top bar stacks on small screens */
    .listing-top-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Profile form 2 cols to 1 col */
    .profile-form-grid-2 { grid-template-columns: 1fr !important; }

    /* Footer: من عمودين إلى عمود واحد مبكراً على 576px */
    .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .footer-tagline { max-width: 100%; }
}

/* =====================
   Mobile: 480px
===================== */
@media (max-width: 480px) {
    html { font-size: 15px; }
    .container { padding: 0 var(--space-4); }

    .hero-title { font-size: 1.9rem; letter-spacing: -0.3px; }
    .hero-actions .btn { padding: 0.7rem 1.5rem; }
    .hero-stats { flex-wrap: wrap; gap: var(--space-5); }

    .features-grid { grid-template-columns: 1fr; }
    .categories-grid { grid-template-columns: repeat(2, 1fr); }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

    .section-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--space-2); }
    .section-tabs::-webkit-scrollbar { height: 3px; }

    .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .footer-social { justify-content: flex-start; }

    .toast-container { bottom: calc(64px + var(--space-3)); right: var(--space-3); left: var(--space-3); }
    .toast { max-width: none; }

    .dashboard-stats-grid { grid-template-columns: 1fr 1fr; }

    /* Auth pages */
    .auth-layout { grid-template-columns: 1fr !important; }
    .auth-aside { display: none !important; }

    /* Admin topbar title أصغر */
    .admin-topbar-title {
        font-size: var(--font-size-xs);
        max-width: 160px;
    }

    /* Admin filter bar: stack vertically */
    .admin-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .admin-filter-bar .form-control,
    .admin-filter-bar select,
    .admin-filter-bar .btn,
    .admin-search-input {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Cart sidebar full width */
    .cart-sidebar {
        width: 100vw;
        max-width: 100vw;
    }

    /* Sorting bar */
    .sorting-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    .sorting-select { width: 100%; }
}

/* =====================
   Small Mobile: 390px
===================== */
@media (max-width: 390px) {
    html { font-size: 14.5px; }
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
    .hero-title { font-size: 1.7rem; }
    .product-price { font-size: var(--font-size-base); }
    .category-icon-wrap { width: 52px; height: 52px; font-size: 22px; }

    /* Admin topbar: اضغط العنوان */
    .admin-topbar-title { max-width: 130px; }

    /* Reduce admin content padding */
    .admin-content { padding: var(--space-3); }

    /* Card padding تقليل */
    .card-body { padding: var(--space-4); }

    /* Dashboard stats: عمود واحد */
    .dashboard-stats-grid { grid-template-columns: 1fr; }
}

/* =====================
   Very Small: 360px
===================== */
@media (max-width: 360px) {
    html { font-size: 14px; }
    .container { padding: 0 var(--space-3); }
    .products-grid { gap: var(--space-2); }
    .hero-title { font-size: 1.55rem; }
    .categories-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
    .modal-box { width: 100%; border-radius: 0; max-height: 100vh; }

    /* Admin topbar title: اختصار قوي */
    .admin-topbar-title { max-width: 110px; font-size: 12px; }

    /* إخفاء إضافي للعناصر الثانوية */
    .d-none-mobile { display: none !important; }

    /* Hero trust: عمودي */
    .hero-trust { flex-direction: column; text-align: center; }

    /* Footer tagline أقصر */
    .footer-tagline { font-size: var(--font-size-xs); }
}

/* =====================
   Admin Responsive (تكميلي)
===================== */
@media (max-width: 768px) {
    .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .admin-stats-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .admin-table { font-size: var(--font-size-xs); }
    .admin-table th,
    .admin-table td { padding: var(--space-2) var(--space-3); }
}

/* =====================
   Print
===================== */
@media print {
    .site-header, .main-nav, .topbar, .site-footer,
    .cart-sidebar, .toast-container, .mobile-drawer,
    .mobile-bottom-nav { display: none !important; }
    body { color: black; padding-bottom: 0; }
    .card { box-shadow: none; border: 1px solid #ccc; }
}

/* =====================
   Desktop Only (>768px)
===================== */
@media (min-width: 769px) {
    .mobile-bottom-nav { display: none !important; }
    body { padding-bottom: 0; }

    /* Restore admin sidebar to its natural flex position on desktop */
    .admin-sidebar {
        position: relative !important;
        transform: none !important;
        visibility: visible !important;
        right: auto !important;
        left: auto !important;
        width: var(--sidebar-width, 256px) !important;
        height: auto !important;
        min-height: 100vh;
        box-shadow: none !important;
        transition: none;
        flex-shrink: 0;
    }

    /* Make sure overlay is never visible on desktop */
    .admin-sidebar-overlay { display: none !important; }
    .admin-mobile-topbar   { display: none !important; }
    .admin-sidebar-close   { display: none !important; }

    /* Reset admin-main padding on desktop */
    .admin-main {
        padding-top: 0 !important;
        flex: 1;
        min-width: 0;
        overflow-x: hidden;
    }

    /* Reset dropdown alignment on desktop */
    .nav-dropdown-menu {
        left: auto !important;
        right: 0 !important;
    }

    /* Ensure listing layout has sidebar on desktop */
    .listing-layout {
        grid-template-columns: 280px 1fr !important;
    }
    .filters-sidebar {
        position: sticky !important;
        transform: none !important;
        visibility: visible !important;
        top: calc(var(--header-height) + 60px) !important;
        right: auto !important;
        height: auto !important;
        overflow-y: visible !important;
        z-index: 1 !important;
        box-shadow: none !important;
    }

    /* Toast: عودة للموضع الطبيعي على Desktop */
    .toast-container {
        bottom: var(--space-6);
        right: var(--space-6);
        left: auto;
    }

    /* Admin topbar title: العودة للحجم الطبيعي */
    .admin-topbar-title {
        font-size: var(--font-size-base);
        max-width: none;
        overflow: visible;
        white-space: normal;
    }

    /* Admin filter bar: أفقي */
    .admin-filter-bar {
        flex-direction: row;
        align-items: center;
    }
    .admin-filter-bar .form-control,
    .admin-filter-bar select,
    .admin-filter-bar .btn,
    .admin-search-input {
        width: auto !important;
    }
}

/* =====================
   Medium Desktop: 1024px-1280px
   (admin-dashboard-grid يعود لعمودين)
===================== */
@media (min-width: 1025px) {
    .admin-dashboard-grid { grid-template-columns: 2fr 1fr; }
    .admin-stats-grid { grid-template-columns: repeat(4, 1fr); }
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
}