/*
 * mobile-optimize.css — storefront mobile Phase 1 (critical responsive fixes)
 * Owner: single source of truth for mobile (<=991px) touch/overflow fixes. Loaded AFTER the
 * (S3) main.css in Front/layouts/head.blade.php so these rules win without editing main.css.
 * Scope: @media (max-width:991px) only — desktop is untouched. See ReferenceDoc/MOBILE_RESPONSIVE_AUDIT.md.
 * !important is used deliberately here to beat main.css's compound/:hover/breakpoint selectors
 * (32 breakpoints); keep all mobile overrides in THIS file so ownership stays clear.
 */

/* [Phase 2] Sticky CTA bars: hidden by default (all desktop, and on mobile until JS reveals them). */
.pdp-sticky-cta,
.co-sticky-cta { display: none; }

@media (max-width: 991px) {

    /* 1. Product-card action buttons — always visible on touch (were opacity:0 until :hover),
          44px targets. Quick-view stays hidden on mobile (unchanged from main.css). */
    .product-cart-wrap .product-action-1,
    .product-cart-wrap .product-img-action-wrap .product-action-1 {
        opacity: 1 !important;
        visibility: visible !important;
    }
    .product-action-1 a.action-btn,
    .product-action-1 button {
        width: 44px !important;
        height: 44px !important;
        line-height: 44px !important;
    }
    .product-action-1 .atn-wd-icon {
        width: 20px !important;
        height: 20px !important;
    }

    /* 2. Quantity steppers (PDP + cart) — horizontal 44px targets, input 16px (no iOS zoom).
          position:static overrides the cramped absolute mini-spinner in main.css. */
    .detail-qty {
        display: inline-flex !important;
        align-items: center;
        max-width: none !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
    }
    .detail-qty > a,
    .detail-qty .qty-up,
    .detail-qty .qty-down,
    .detail-qty .pd-qty-up,
    .detail-qty .pd-qty-down {
        position: static !important;
        width: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    .detail-qty .qty-val {
        min-height: 44px !important;
        height: 44px !important;
        width: 48px !important;
        font-size: 16px !important;
        text-align: center;
        padding: 0 !important;
    }
    .detail-qty .qty-icon {
        width: 16px;
        height: 16px;
    }
    #product_details_wpr .detail-extralink .detail-qty {
        height: auto !important;
    }

    /* 3. Bottom navigation — 48px tap height, larger icons. */
    .res-footer ul li a {
        min-height: 48px !important;
        display: inline-flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 6px 4px !important;
    }
    .res-footer ul li a img {
        width: 24px !important;
        height: 24px !important;
    }

    /* 4. Pagination — 44px targets. */
    .pagination-area .page-link {
        min-width: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* 5. Order / cart action buttons — >=40px tap height, 12px font floor. */
    .order_vmd a,
    .order-common-btn a.btn,
    .action-btn-row-cart a {
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    /* 6. Newsletter form — stop the 500px min-width horizontal overflow. */
    .newsletter .newsletter-inner .newsletter-content form {
        min-width: 100% !important;
    }

    /* 7. Product spec table — allow horizontal scroll instead of page overflow. */
    #Additional-info {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #Additional-info table {
        min-width: 320px;
    }

    /* 8. Registration OTP inputs — usable touch grid (were col-lg-1, collapsing on phones). */
    .otpRow {
        display: flex !important;
        gap: 10px;
        flex-wrap: wrap;
    }
    .otpRow input,
    .otpRow .col-lg-1 {
        flex: 0 0 52px;
        width: 52px !important;
        max-width: 52px;
        height: 52px !important;
        padding: 0 !important;
        text-align: center;
        font-size: 20px !important;
    }

    /* 10. Side-drawer menu rows (category / account drawers) — 44px tap rows (were padding:2px 0, H4).
          H1/H2 font floors are intentionally NOT added: the LIVE (S3) main.css already uses >=12.8px
          for card CTA/category/title/filters/breadcrumb — the audit's smaller px were from the
          commented-out local main.css. Adding floors here would be no-ops or shrink desktop rems. */
    .menu-content ul li a,
    .general-settings ul li a,
    .userIn ul li a {
        min-height: 44px !important;
        display: flex !important;
        align-items: center;
        padding: 8px 4px !important;
    }

    /* 11. Cart action icons (wishlist / delete / buy-later / added-by) — the icon inside the 40px
          tap box (rule 5) stayed 14px, so it read as a tiny glyph. Match the icon to the target. */
    .action-btn-row-cart a img,
    .action-btn-row-cart a .atn-wd-icon {
        width: 20px !important;
        height: 20px !important;
        max-width: none !important;
    }

    /* 12. Hover-tooltip artifacts on action buttons (buy-now / send-enquiry) — the ::before caret
          and ::after label are hover affordances that stick and float on touch (the "floating bag
          + caret" on the PDP). Suppress on mobile; the aria-label still names the control. */
    .showTooltip::before,
    .showTooltip::after {
        display: none !important;
    }

    /* 13. PDP buy row — with the 44px stepper (rule 2) the Add-to-Cart + wishlist + buy-now could
          overflow their inline-flex container on narrow phones and wrap MID-GROUP (icons floating
          under the button). Make it a proper flex-wrap row: stays one line when it fits (~>=400px),
          and below that wraps into clean aligned rows (stepper / [Add-to-Cart · wishlist · buy-now]). */
    .detail-extralink {
        flex-wrap: wrap !important;
        align-items: center;
        row-gap: 10px;
    }
    .product-extra-link2 {
        display: inline-flex !important;
        align-items: center;
        flex-wrap: nowrap !important;
        flex-shrink: 0 !important;
        gap: 6px;
    }
    .product-extra-link2 .button-add-to-cart {
        margin: 0 !important;
    }

    /* 14. [Phase 2] Sticky CTA bars (PDP Add-to-Cart, checkout Place-Order) — fixed above the bottom
          nav (footer.main = 64px @ bottom:0). Revealed by JS (.is-visible), hidden while a field is
          focused (.is-kbd). */
    .pdp-sticky-cta.is-visible:not(.is-kbd),
    .co-sticky-cta.is-visible:not(.is-kbd) {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 64px;
        z-index: 1068;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        background: #fff;
        border-top: 1px solid #e9e9e9;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    }
    .pdp-sticky-qtybox {
        display: inline-flex;
        align-items: center;
        border: 1px solid #ddd;
        border-radius: 8px;
        flex: 0 0 auto;
    }
    .pdp-sticky-step {
        width: 40px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #F16522;
        text-decoration: none;
    }
    .pdp-sticky-qtyval {
        min-width: 30px;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        line-height: 44px;
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
        padding: 0 6px;
    }
    .pdp-sticky-add,
    .co-sticky-btn {
        flex: 1;
        min-height: 44px;
        background: #F16522;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-weight: 500;
        font-size: 15px;
    }
    .co-sticky-total {
        flex: 0 0 auto;
        line-height: 1.15;
    }
    .co-sticky-total small {
        display: block;
        font-size: 10px;
        color: #8a97a6;
    }
    .co-sticky-total strong {
        font-size: 15px;
        color: #16335C;
        font-weight: 500;
    }
}

/* 9. Modals (login / enquiry / address, incl. modal-lg) — fit the phone viewport (C7). */
@media (max-width: 575.98px) {
    .modal-dialog,
    .modal-dialog.modal-lg {
        max-width: 100% !important;
        margin: 0.5rem !important;
    }
    .modal-content {
        max-height: calc(100vh - 1rem);
        overflow-y: auto;
    }
}