/* =============================================================
   mobile-fixes.css  — loaded LAST in both base1.html and
   seat_covers.js, so all rules here win the cascade.
   ============================================================= */

/* Prevent horizontal scroll at the document level */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ── MOBILE ONLY (≤ 768px) ─────────────────────────────────── */
@media (max-width: 768px) {

  /* ── 1. GLOBAL ─────────────────────────────────────────────── */
  img, video, iframe {
    max-width: 100% !important;
  }

  h1, h2, h3, h4, h5, h6 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  /* ── 2. BANNER ─────────────────────────────────────────────── */
  .banner img {
    height: auto !important;
    max-height: 220px !important;
    margin-top: 64px !important;
    object-fit: cover !important;
  }

  /* ── 3. PRODUCT CARDS GRID — single column, no overflow ────── */
  .cards-list,
  .seat-covers-content .cards-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* ── 4. SEAT COVERS PAGE LAYOUT ────────────────────────────── */
  .seat-covers-main-container {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* DO NOT add overflow-x: hidden to seat-covers-content —
     that clips centered heading text */
  .seat-covers-content {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Remove excessive top spacing above the heading */
  .seat-covers-content main,
  .seat-covers-content section {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Override inline style="margin-top: 60px" on heading wrapper */
  .seat-covers-content .h-screen {
    margin-top: 0.75rem !important;
    height: auto !important;
  }

  /* Heading text: make sure it wraps and doesn't clip */
  .seat-covers-content .text-center h3,
  .seat-covers-content h3 {
    white-space: normal !important;
    overflow: visible !important;
    max-width: 95% !important;
    margin: 0 auto 0.75rem !important;
    text-align: center !important;
    font-size: 1.1rem !important;
  }

  /* ── 5. IMAGE WRAPPER ───────────────────────────────────────── */
  .seat-covers-content .product-card > div:first-child {
    position: relative !important;
    height: calc(100vw - 24px) !important;  /* square: viewport width minus grid padding */
    overflow: hidden !important;             /* clips image to rounded top corners only */
    border-radius: 0.5rem 0.5rem 0 0 !important;
  }

  /* Image fills the square wrapper absolutely */
  .seat-covers-content .product-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: unset !important;
    max-height: none !important;
    object-fit: cover !important;
    background: #ffffff !important;
    display: block !important;
    border-radius: 0 !important;
  }

  /* ── 6. PRODUCT CARD ────────────────────────────────────────── */
  /* overflow: visible — do NOT clip card-content.
     min-height gives the grid a definite row height that covers
     both the square image and the card-content below it. */
  .seat-covers-content .product-card {
    display: block !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
  }

  /* ── 7. CARD CONTENT — plain block, renders below image in normal flow */
  .seat-covers-content .card-content {
    padding: 0.75rem !important;
  }

  .seat-covers-content .product-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    font-size: 0.95rem !important;
  }

  /* ── 7. SIDEBAR CLOSE ROW ──────────────────────────────────── */
  .sidebar-close-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.5rem 0.75rem 0.75rem !important;
    border-bottom: 1px solid #dee2e6 !important;
    margin-bottom: 0.5rem !important;
  }

  .sidebar-close-label {
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: #1c2833 !important;
  }

  .sidebar-close-btn {
    background: transparent !important;
    border: 1px solid #aaa !important;
    border-radius: 4px !important;
    padding: 0.3rem 0.75rem !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    color: #333 !important;
  }

  /* ── 8. SIDEBAR — hidden by default, fixed overlay when open ── */
  .seat-covers-sidebar {
    display: none !important;
  }

  /* When the user taps "Filters", sidebar slides in as an
     overlay just below the navbar so they don't need to scroll */
  .seat-covers-sidebar.sidebar-open {
    display: block !important;
    position: fixed !important;
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    background: #f8f9fa !important;
    border-bottom: 2px solid #dee2e6 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    width: 100% !important;
    height: auto !important;
    padding: 1rem !important;
  }

  /* ── 8. FILTERS TOGGLE BUTTON ──────────────────────────────── */
  .filters-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin: 0.75rem 1rem !important;
    padding: 0.5rem 1rem !important;
    background: #fff !important;
    color: #1a1a2e !important;
    border: 1.5px solid #d0d5dd !important;
    border-radius: 8px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    z-index: 10 !important;
    position: relative !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  }

  /* ── 9. PRODUCT DETAIL PAGE — stack image above bill details ── */
  /* High-specificity selectors to guarantee column layout on mobile */
  .product_image_seat_cover_details .main-content-layout {
    flex-direction: column !important;
    gap: 1rem !important;
    padding: 0 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .product_image_seat_cover_details .product-name-section {
    margin: 1rem 0.75rem !important;
    padding: 0.75rem 1rem !important;
  }

  .product_image_seat_cover_details .product-name-section h4 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-shadow: none !important;
    font-size: clamp(1.1rem, 3.5vw, 1.5rem) !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .product_image_seat_cover_details .main-content-layout .image-container {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    flex: none !important;
    display: block !important;
  }

  .product_image_seat_cover_details .main-content-layout .image-container .seat-cover-image {
    width: 100% !important;
    height: auto !important;
    max-height: 60vh !important;
    object-fit: contain !important;
    display: block !important;
  }

  .product_image_seat_cover_details .main-content-layout .bill-details-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
    box-sizing: border-box !important;
  }

  .magnifying-glass {
    display: none !important;
  }

  /* ── 10. MY ORDERS ──────────────────────────────────────────── */

  /* Reduce the 100px top padding that creates a huge gap on mobile */
  .orders-container {
    padding-top: 16px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .orders-container h1 {
    margin-top: 0.5rem !important;
    margin-bottom: 1.25rem !important;
    font-size: 1.5rem !important;
  }

  /* 521–768px: side-by-side layout — fix grid collapsing inside flex card.
     Without flex:1 the 1fr column has no width. align-items:start keeps
     the image pinned to the top instead of vertically centred. */
  .orders-container .order-details-grid {
    flex: 1 !important;
    min-width: 0 !important;
    align-items: start !important;
  }

  .orders-container .order-details-image {
    width: clamp(120px, 22vw, 180px) !important;
    height: auto !important;
    max-height: 160px !important;
    object-fit: contain !important;
    background: #111 !important;
    border-radius: 0.375rem !important;
    align-self: start !important;
  }

  .orders-container .billing-button {
    flex-shrink: 0 !important;
    align-self: center !important;
    white-space: nowrap !important;
  }

  /* Status timeline: wrap so it doesn't overflow the narrow column */
  .orders-container .status-timeline {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .orders-container .status-step {
    width: 4rem !important;
  }

  .orders-container .status-label {
    font-size: 0.65rem !important;
    white-space: normal !important;
  }

  /* ── 11. SEO GUIDE SECTION — fix clipped text ──────────────── */
  .seo-content-wrapper {
    padding: 16px 8px !important;
    overflow: visible !important;
  }

  .seo-content-container {
    overflow: visible !important;
    max-width: 100% !important;
  }

  .seo-content {
    padding: 16px !important;
    overflow: visible !important;
    word-break: break-word !important;
  }

  .seo-features-grid {
    grid-template-columns: 1fr !important;
  }

  .seo-h1, .seo-h2, .seo-h3 {
    font-size: 1.1rem !important;
    word-break: break-word !important;
    white-space: normal !important;
  }

  /* ── 12. CATEGORY CARDS (home page) ────────────────────────── */
  .card {
    width: 90% !important;
    max-width: 340px !important;
    height: auto !important;
    margin: 12px auto !important;
  }

  .card .card_image {
    width: 100% !important;
    height: 200px !important;
  }

  .card .card_image img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
  }

  .card-text {
    font-size: 18px !important;
    margin-left: 5% !important;
  }

  /* ── 13. SLOT SELECTION — 2 per row instead of 3 ───────────── */
  .slot-item {
    flex: 1 0 45% !important;
  }

  /* ── 14. NAVBAR — brand left, toggler right; fix doubled icon ── */
  .navbar-userhome .navbar-brand-userhome {
    order: 1 !important;
    margin-right: auto !important;
  }

  .navbar-userhome .navbar-toggler {
    order: 2 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ── 15. FIX PSEUDO-ELEMENT HAMBURGER from responsive-fixes.css ──────
     responsive-fixes.css adds a ::after ☰ on ALL .navbar-userhome AND
     forces .collapse { display:none !important } (hover-based open).
     For pages using Bootstrap's JS toggle (.navbar-expand-md), we must:
     a) remove the ::after ghost icon
     b) let Bootstrap's .show class override the forced display:none      */

  /* a) Remove the ::after ghost hamburger.
        Specificity: body(0-0-1) + .navbar-userhome×3(0-3-0)
                   + .navbar-expand-md(0-1-0) + ::after(0-0-1) = 0-4-2
        vs responsive-fixes: 0-3-2 → we win. */
  body .navbar-userhome.navbar-userhome.navbar-userhome.navbar-expand-md::after {
    display: none !important;
    content: none !important;
  }

  /* b) Kill the hover-based open rule from responsive-fixes.css.
        Specificity 0-7-1 vs responsive-fixes hover rule 0-6-1 → we win.
        This rule must come BEFORE the .show rule below (same specificity,
        later wins — so .show overrides this when Bootstrap is open). */
  body .navbar-userhome.navbar-userhome.navbar-userhome.navbar-expand-md:hover .collapse.navbar-collapse {
    display: none !important;
  }

  /* c) Allow Bootstrap collapse to show when JS adds .show class.
        Same specificity 0-7-1 as rule b), but comes LATER → wins. */
  body .navbar-userhome.navbar-userhome.navbar-userhome.navbar-expand-md .collapse.navbar-collapse.show,
  body .navbar-userhome.navbar-userhome.navbar-userhome.navbar-expand-md .collapsing.navbar-collapse {
    display: block !important;
  }
}

/* ── MY ORDERS — stacked layout for phones only (≤ 520px) ─── */
@media (max-width: 520px) {
  /* Remove card padding; re-add below image only */
  .orders-container .order-card {
    padding: 0 !important;
    overflow: hidden !important;
  }

  .orders-container .order-details-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Square container matches the poster aspect ratio —
     no clipping (contain), no side bars (same 1:1 shape). */
  .orders-container .order-details-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    background-color: #0d0d0d !important;
    border-radius: 0 !important;
    display: block !important;
  }

  .orders-container .order-details-info {
    padding: 0.75rem 1rem 0 1rem !important;
  }

  .orders-container .order-details-info h3 {
    font-size: 1rem !important;
    text-align: left !important;
  }

  .orders-container .order-details-info p {
    font-size: 0.82rem !important;
    text-align: left !important;
  }

  /* Force all 4 steps into one row — no wrapping */
  .orders-container .status-timeline {
    padding: 0 !important;
    flex-wrap: nowrap !important;
  }

  .orders-container .status-step {
    width: 25% !important;
    flex-shrink: 0 !important;
  }

  .orders-container .status-circle {
    width: 1.8rem !important;
    height: 1.8rem !important;
    font-size: 1rem !important;
  }

  .orders-container .status-label {
    font-size: 0.58rem !important;
    white-space: normal !important;
    line-height: 1.2 !important;
  }

  .orders-container .billing-button {
    display: block !important;
    width: calc(100% - 2rem) !important;
    margin: 0.75rem 1rem 1rem !important;
  }
}

/* ── DESKTOP ONLY (> 768px) ────────────────────────────────── */
@media (min-width: 769px) {
  .filters-toggle-btn {
    display: none !important;
  }

  .seat-covers-sidebar {
    display: block !important;
    position: sticky !important;
    /* Prevent sidebar from consuming too much space at small desktop widths */
    min-width: 200px !important;
    max-width: 240px !important;
    width: 22% !important;
  }

  .sidebar-close-row {
    display: none !important;
  }

  /* Photos are landscape — object-fit:contain letterboxes them in the
     square aspect-ratio:1/1 container. cover fills the frame instead. */
  .seat-covers-content .product-image {
    object-fit: cover !important;
  }

  /* Fix flex overflow at medium widths (769–1439px):
     seat_cover_fixes.css sets width:80% on .seat-covers-content
     which acts as a sizing hint and pushes total width beyond the
     viewport when the sidebar has a large min-width (280px at 769-991px).
     Setting width:auto lets flex:1 alone govern the size. */
  .seat-covers-content {
    width: auto !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .seat-covers-main-container {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Fix billing button clipped at 1024px:
     order-card is display:flex row; grid has no min-width:0 so it
     won't shrink, pushing the button off the right edge. */
  .orders-container .order-details-grid {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .orders-container .billing-button {
    flex-shrink: 0 !important;
    align-self: center !important;
    white-space: nowrap !important;
  }
}

/* ── SEAT COVER DETAILS — column layout up to 968px ────────── */
/* Loaded LAST to definitively override seat_cover_fixes.css base row rule */
@media (max-width: 60.5rem) {
  .product_image_seat_cover_details .main-content-layout {
    flex-direction: column !important;
    gap: 1rem !important;
    padding: 0 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .product_image_seat_cover_details .product-name-section {
    margin: 1rem 0.75rem !important;
    padding: 0.75rem 1rem !important;
  }

  .product_image_seat_cover_details .product-name-section h4 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-shadow: none !important;
    font-size: clamp(1.1rem, 3.5vw, 1.5rem) !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .product_image_seat_cover_details .main-content-layout .image-container {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    flex: none !important;
    display: block !important;
  }

  .product_image_seat_cover_details .main-content-layout .image-container .seat-cover-image {
    width: 100% !important;
    height: auto !important;
    max-height: 60vh !important;
    object-fit: contain !important;
    display: block !important;
  }

  .product_image_seat_cover_details .main-content-layout .bill-details-section {
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
    box-sizing: border-box !important;
  }

  .product_image_seat_cover_details {
    overflow-x: hidden !important;
  }
}