/* =====================================================
   Storefront responsive + overflow layer

   Loaded LAST, at the end of <body> (see includes/footer.php).
   Page-level <style> blocks live inside <body>, so this file has to
   come after them to win specificity ties. Everything here is a
   layout/overflow correction — put visual design in css/theme.css.

   See DESIGN-SPEC.md §5
   ===================================================== */

/* =====================================================
   1. Hard overflow containment
   ===================================================== */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* The classic culprits: a child of a flex/grid row refusing to shrink. */
.row,
.header-content,
.footer-grid,
.main-content,
main,
section {
    max-width: 100%;
    min-width: 0;
}

/* .container needs the same containment WITHOUT losing its readable-width cap —
   a plain `max-width:100%` here would override --container-max from every
   earlier sheet and let the page run edge to edge on a wide monitor. */
.container {
    max-width: min(100%, var(--container-max, 1320px));
    min-width: 0;
}

/* 100vw includes the scrollbar gutter, so `width:100vw` on a page that
   scrolls vertically is always ~15px too wide. Neutralise it. */
.full-bleed,
.banner-slider,
.banner-slide,
.hero,
.hero-section {
    max-width: 100%;
}

/* Marquee / ticker strips animate a very wide child. It must be clipped
   by a wrapper that itself cannot exceed the viewport. */
.marquee-bar,
.marquee-wrapper,
.top-bar,
.ticker {
    max-width: 100%;
    overflow: hidden;
}

/* Absolutely-positioned decorations must never extend the page box. */
body > *[style*="position:absolute"],
body > *[style*="position: absolute"] {
    max-width: 100%;
}

img,
video,
canvas,
svg,
iframe,
embed,
object,
table {
    max-width: 100%;
}

pre,
code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* =====================================================
   2. Tables always scroll inside their own box
   ===================================================== */

.table-responsive,
.table-wrapper,
.orders-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* A bare table that nobody wrapped: make it scroll rather than the page. */
.card-body > table,
.content > table,
main table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

/* ...but a wrapped table keeps normal table layout. */
.table-responsive > table,
.table-wrapper > table {
    display: table;
    width: 100%;
    white-space: normal;
}

/* =====================================================
   3. Long strings
   ===================================================== */

td, th, li, p, span, a, h1, h2, h3, h4, h5, h6, label, dd, dt {
    overflow-wrap: break-word;
}

.order-number,
.sku,
.tracking-code,
.coupon-code,
.email,
[href^="mailto:"],
.break-any {
    overflow-wrap: anywhere;
}

/* =====================================================
   4. Fixed-position furniture
   ===================================================== */

/* Floating action buttons: pin them, cap them, and keep them clear of the
   mobile bottom nav. */
.floating-buttons {
    position: fixed;
    inset-inline-start: 16px;
    bottom: 16px;
    inset-inline-end: auto;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 64px;
}

.float-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.toast-container {
    position: fixed;
    top: 16px;
    inset-inline-start: 16px;
    z-index: 9999;
    max-width: calc(100vw - 32px);
}

/* =====================================================
   4b. Order-tracking form
   The lookup now needs an e-mail as well as an order number (it used to
   reveal any order to anyone who guessed a number). The original one-field
   row crushed two fields plus the button into a single line, so it lays out
   as a grid instead.
   ===================================================== */

.tracking-hero .search-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    max-width: 760px;
    margin-inline: auto;
    text-align: start;
}

.tracking-hero .search-form .form-group {
    margin-bottom: 0;
    min-width: 0;
}

.tracking-hero .search-form label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--fs-sm, 12px);
    font-weight: 600;
    white-space: nowrap;
}

.tracking-hero .search-form input {
    width: 100%;
    min-width: 0;
}

.tracking-hero .search-form button {
    white-space: nowrap;
    height: 46px;
}

@media (max-width: 768px) {
    .tracking-hero .search-form {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .tracking-hero .search-form button { width: 100%; }
}

/* =====================================================
   5. Breakpoints
   ===================================================== */

/* ---------- <= 1200px ---------- */
@media (max-width: 1200px) {
    .row-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- <= 992px : tablets ---------- */
@media (max-width: 992px) {
    /* Any two-column "content + sidebar" shell stacks. */
    .page-layout,
    .shop-layout,
    .products-layout,
    .checkout-layout,
    .cart-layout,
    .profile-layout,
    .account-layout,
    .product-detail,
    .product-layout,
    .with-sidebar,
    .two-col {
        display: block !important;
    }

    .page-sidebar,
    .shop-sidebar,
    .filters-sidebar,
    .account-sidebar,
    .profile-sidebar,
    .order-summary,
    .cart-summary,
    .checkout-summary {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;   /* sticky summaries trap the page */
        top: auto !important;
        margin-bottom: 16px;
    }

    .row-3,
    .row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; }
    .footer-col ul { columns: 1 !important; }

    /* Product gallery + details stack */
    .product-gallery,
    .product-details,
    .product-info-col { width: 100% !important; max-width: 100% !important; }

    .product-thumbnails {
        display: flex;
        flex-direction: row !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 4px;
    }
    .product-thumbnails > * { flex: 0 0 auto; width: 64px; height: 64px; }
}

/* ---------- <= 768px : phones ---------- */
@media (max-width: 768px) {
    .row,
    .flex-row {
        flex-direction: column;
        gap: 12px;
    }

    .row-2,
    .row-3,
    .row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .footer-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .footer-bottom-content {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    /* Filter / toolbar rows become full-width stacks */
    .filters-form,
    .toolbar,
    .page-toolbar,
    .sort-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .filters-form .form-control,
    .filters-form .btn,
    .toolbar .form-control,
    .toolbar .btn { width: 100%; }

    /* Section headers: title over action, not squeezed side by side */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Modals fill the screen instead of overflowing it */
    .modal { padding: 12px; }
    .modal-content {
        width: 100%;
        max-width: 100%;
        max-height: 88vh;
    }
    .modal-footer { flex-wrap: wrap; }
    .modal-footer .btn { flex: 1 1 auto; }

    /* Hero */
    .hero,
    .hero-section { padding-block: 28px; }
    .hero-content { grid-template-columns: 1fr !important; text-align: center; }
    .hero-buttons { justify-content: center; flex-wrap: wrap; }

    /* Banner slider height on phones */
    .banner-slider,
    .banner-slide { min-height: 180px; max-height: 44vh; }

    /* Keep content clear of the fixed bottom nav */
    body { padding-bottom: 0; }
    .main-content,
    main.main-content { padding-bottom: 72px; }

    /* One FAB on a phone, not a stack. Two 48px buttons plus the bottom nav
       covered real links (the "عرض الكل" section actions sit right under them).
       Contact is already one tap away in the nav, so only WhatsApp stays. */
    .floating-buttons {
        bottom: 74px;
        inset-inline-start: 10px;
        gap: 8px;
    }
    .float-btn { width: 44px; height: 44px; font-size: 20px; }
    .float-btn .tooltip { display: none; }
    .floating-buttons .chat-btn { display: none; }

    /* Tap targets */
    a.btn, button, .btn, .action-btn, .pagination a, .pagination span {
        min-height: 40px;
    }

    /* Stat/feature strips */
    .features-row,
    .features-grid,
    .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
}

/* ---------- <= 480px : small phones ---------- */
@media (max-width: 480px) {
    .row-2,
    .row-3,
    .row-4 { grid-template-columns: 1fr; }

    /* Products stay two-up — one-up reads as a broken page. */
    .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    .features-row,
    .features-grid,
    .stats-row { grid-template-columns: 1fr !important; }

    .banner-slider,
    .banner-slide { min-height: 150px; }

    .btn-lg { width: 100%; }

    /* Slider arrows shrink so they don't cover the slide */
    .slider-arrow,
    .banner-nav,
    .carousel-arrow { width: 34px !important; height: 34px !important; font-size: 14px !important; }
}

/* ---------- <= 360px : the floor ---------- */
@media (max-width: 360px) {
    :root { --container-pad: 10px; }
    .product-card .product-info { padding: 8px; }
    .products-grid { gap: 8px !important; }
}

/* =====================================================
   6. Print
   ===================================================== */

@media print {
    .main-header,
    .main-nav,
    .top-bar,
    .marquee-bar,
    .main-footer,
    .floating-buttons,
    .bottom-nav,
    .mobile-search-bar,
    .chat-widget,
    .no-print { display: none !important; }

    body { background: #fff; color: #000; font-size: 12px; }
    .container { max-width: 100%; padding: 0; }
    .card { box-shadow: none; border: 1px solid #ddd; }
}
