/*
 * Maison Driéa — Mobile Cart Drawer: Prada-style redesign
 * =========================================================
 * Replaces the mobile cart drawer with a Prada-inspired bottom sheet:
 *   • Blurred frosted-glass backdrop (also acts as close button)
 *   • Bottom sheet slides up from bottom of screen
 *   • Horizontal-scroll product strip (like Prada's "Added to shopping bag")
 *   • Fixed footer: Subtotal + "Go to Shopping Bag" + "Proceed to Checkout"
 *
 * HOW TO USE:
 *   Enqueue this file in functions.php AFTER style.css, mobile only:
 *   wp_enqueue_style( 'md-mobile-cart-drawer',
 *       get_template_directory_uri() . '/css/mobile-cart-drawer.css',
 *       array( 'md-style' ), '1.0.0' );
 *
 *   Also enqueue mobile-cart-drawer.js (companion file) after main.js.
 *
 * STRUCTURE expected in the #cartDrawer HTML:
 *   #cartDrawer
 *     .cd-header         ← heading "Added to shopping bag (N)" + ✕ button
 *     .cd-body           ← product items go here (will be laid horizontal)
 *     .cd-footer         ← subtotal + buttons
 */

/* ============================================================
   ONLY APPLY ON MOBILE (≤ 768 px)
   All rules are scoped inside the media query so desktop is
   untouched — your existing desktop drawer stays identical.
============================================================ */

@media screen and (max-width: 768px) {

    /* ----------------------------------------------------------
       1. BLURRED FROSTED-GLASS BACKDROP
       The overlay covers the full screen behind the drawer.
       backdrop-filter gives the frosted blur.
       Clicking the overlay fires closeCartDrawer() via JS.
    ---------------------------------------------------------- */

    .cart-drawer-overlay {
        display: block !important;         /* un-hide it (maison-cart-wishlist hid it) */
        position: fixed !important;
        inset: 0 !important;
        z-index: 1100 !important;
        background: rgba(10, 10, 10, 0.18) !important;
        -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
        backdrop-filter:         blur(12px) saturate(1.4) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1) !important;
        visibility: hidden !important;
    }

    .cart-drawer-overlay.active {
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
        cursor: pointer !important;     /* signals "tap to close" */
    }


    /* ----------------------------------------------------------
       2. BOTTOM SHEET — replaces the full-screen fade
       Slides in from the bottom, sits above the blurred overlay,
       covers roughly the lower ~60% of the screen.
    ---------------------------------------------------------- */

    .cart-drawer {
        /* Override the full-screen behaviour set in style.css mobile block */
        inset: auto 0 0 0 !important;   /* anchor to bottom */
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: 88svh !important;
        border-radius: 16px 16px 0 0 !important;
        background: #ffffff !important;
        box-shadow: 0 -8px 60px rgba(0, 0, 0, 0.14) !important;

        /* Slide from bottom  */
        transform: translateY(100%) !important;
        opacity: 1 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: transform  0.44s cubic-bezier(0.16, 1, 0.3, 1),
                    visibility 0.44s cubic-bezier(0.16, 1, 0.3, 1) !important;

        /* Internal layout */
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    .cart-drawer.active {
        transform: translateY(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Drag pill — purely decorative, Prada uses this on mobile sheets */
    .cart-drawer::before {
        content: '';
        display: block;
        width: 36px;
        height: 3px;
        border-radius: 2px;
        background: rgba(0, 0, 0, 0.18);
        margin: 12px auto 0;
        flex-shrink: 0;
    }


    /* ----------------------------------------------------------
       3. DRAWER HEADER
       "Added to shopping bag (N)" left-aligned, ✕ right-aligned
    ---------------------------------------------------------- */

    .cd-header {
        padding: 16px 24px 14px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    /* The heading text injected by JS or baked into PHP */
    .cd-heading {
        font-size: 12px !important;
        letter-spacing: 0.12em !important;
        text-transform: uppercase !important;
        font-weight: 400 !important;
        color: #0a0a0a !important;
        margin: 0 !important;
    }

    .cd-close {
        font-size: 18px !important;
        line-height: 1 !important;
        color: #0a0a0a !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 4px !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        opacity: 0.6 !important;
    }

    .cd-close:hover,
    .cd-close:active {
        opacity: 1 !important;
    }


    /* ----------------------------------------------------------
       4. HORIZONTAL SCROLL PRODUCT STRIP
       Prada shows a single product prominently with meta text
       beside it. When 2+ items exist they scroll horizontally.
    ---------------------------------------------------------- */

    .cd-body {
        flex: 1 !important;
        padding: 0 !important;
        overflow: hidden !important;     /* outer container: no scroll */
        max-height: none !important;
    }

    /* The scrollable strip */
    .cd-items-strip {
        display: flex !important;
        flex-direction: row !important;
        gap: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        padding: 0 !important;
    }

    .cd-items-strip::-webkit-scrollbar {
        display: none !important;
    }

    /* When .cd-body has no .cd-items-strip (items rendered directly),
       we also handle the flat list of .cd-item elements: */
    .cd-body > .cd-item:first-child ~ .cd-item,
    .cd-body > .cd-item {
        /* Flatten them into a horizontal row via the strip wrapper added by JS */
    }


    /* ----------------------------------------------------------
       5. INDIVIDUAL ITEM CARD (inside horizontal strip)
       Portrait card: image on top, details below.
       Fixed width so multiple cards are clearly scannable.
    ---------------------------------------------------------- */

    .cd-item {
        flex: 0 0 200px !important;
        width: 200px !important;
        min-width: 200px !important;
        padding: 20px 0 20px 20px !important;
        margin: 0 !important;
        border-bottom: none !important;
        border-right: 1px solid rgba(0,0,0,0.06) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        scroll-snap-align: start !important;
        animation: none !important;
        box-sizing: border-box !important;
    }

    /* Last card gets right padding so it doesn't hug the edge */
    .cd-item:last-child {
        padding-right: 20px !important;
        border-right: none !important;
        flex: 0 0 220px !important;
        width: 220px !important;
        min-width: 220px !important;
    }

    /* Product image — 3:4 portrait ratio */
    .cd-item-img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1707 / 2560 !important;
        background: #f5f5f5 !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
        margin-bottom: 12px !important;
    }

    .cd-item-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: top center !important;
        display: block !important;
    }

    /* Product name */
    .cd-item-name {
        font-size: 11.5px !important;
        letter-spacing: 0.04em !important;
        line-height: 1.35 !important;
        color: #0a0a0a !important;
        margin-bottom: 6px !important;
        font-weight: 400 !important;
    }

    /* Variant: Color / Size */
    .cd-item-variant {
        font-size: 10.5px !important;
        color: #888 !important;
        letter-spacing: 0.05em !important;
        line-height: 1.5 !important;
        margin-bottom: 2px !important;
    }

    .cd-item-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-top: 8px !important;
    }

    .cd-item-qty {
        font-size: 10.5px !important;
        color: #888 !important;
    }

    .cd-item-price {
        font-size: 12px !important;
        color: #0a0a0a !important;
        font-weight: 400 !important;
        letter-spacing: 0.03em !important;
    }

    /* Remove link — understated */
    .cd-item-remove {
        font-size: 10px !important;
        color: #bbb !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        margin-top: 10px !important;
        align-self: flex-start !important;
        border-bottom: 1px solid transparent !important;
        transition: color 0.2s, border-color 0.2s !important;
        cursor: pointer !important;
    }

    .cd-item-remove:hover,
    .cd-item-remove:active {
        color: #0a0a0a !important;
        border-bottom-color: #0a0a0a !important;
    }

    /* Horizontal dots / scroll indicator */
    .cd-scroll-dots {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 10px 0 0 !important;
        flex-shrink: 0 !important;
    }

    .cd-scroll-dot {
        width: 5px !important;
        height: 5px !important;
        border-radius: 50% !important;
        background: rgba(0, 0, 0, 0.18) !important;
        transition: background 0.2s, transform 0.2s !important;
        flex-shrink: 0 !important;
    }

    .cd-scroll-dot.active {
        background: #0a0a0a !important;
        transform: scale(1.25) !important;
    }

    /* Empty cart state */
    .cd-empty {
        padding: 32px 24px !important;
        font-size: 12px !important;
        color: #bbb !important;
        letter-spacing: 0.08em !important;
    }


    /* ----------------------------------------------------------
       6. FOOTER — Subtotal + two CTAs
       Prada layout: "Subtotal €4,100" row, then stacked buttons.
    ---------------------------------------------------------- */

    .cd-footer {
        flex-shrink: 0 !important;
        padding: 16px 24px 32px !important;
        border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
        background: #ffffff !important;
        position: static !important;    /* no absolute/fixed games */
    }

    .cd-subtotal-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        font-size: 12.5px !important;
        letter-spacing: 0.05em !important;
        color: #0a0a0a !important;
        font-weight: 400 !important;
        margin-bottom: 16px !important;
    }

    .cd-subtotal-row .cd-subtotal-label {
        text-transform: uppercase !important;
        letter-spacing: 0.1em !important;
        font-size: 11px !important;
        color: #555 !important;
    }

    .cd-subtotal-row .cd-subtotal-amount {
        font-size: 13px !important;
        color: #0a0a0a !important;
    }

    .cd-tax-row {
        display: none !important;   /* Prada hides tax line in the drawer */
    }

    /* "Go to Shopping Bag" — outlined ghost button */
    .cd-bag-btn {
        display: block !important;
        width: 100% !important;
        padding: 14px !important;
        background: transparent !important;
        border: 1px solid #0a0a0a !important;
        font-family: inherit !important;
        font-size: 10px !important;
        letter-spacing: 0.24em !important;
        text-transform: uppercase !important;
        text-align: center !important;
        text-decoration: none !important;
        color: #0a0a0a !important;
        cursor: pointer !important;
        margin-bottom: 10px !important;
        box-sizing: border-box !important;
        transition: background 0.3s, color 0.3s !important;
    }

    .cd-bag-btn:hover,
    .cd-bag-btn:active {
        background: #0a0a0a !important;
        color: #ffffff !important;
    }

    /* "Proceed to Checkout" — solid black button */
    .cd-checkout-btn {
        display: block !important;
        width: 100% !important;
        padding: 15px !important;
        background: #0a0a0a !important;
        border: 1px solid #0a0a0a !important;
        font-family: inherit !important;
        font-size: 10px !important;
        letter-spacing: 0.24em !important;
        text-transform: uppercase !important;
        text-align: center !important;
        text-decoration: none !important;
        color: #ffffff !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        transition: background 0.3s, color 0.3s !important;
        /* Override the ::before fill animation on mobile — not needed */
        overflow: visible !important;
    }

    .cd-checkout-btn::before {
        display: none !important;   /* kill desktop hover fill */
    }

    .cd-checkout-btn:hover,
    .cd-checkout-btn:active {
        background: #333 !important;
        border-color: #333 !important;
    }

    /* PayPal button row (optional — if you have it) */
    .cd-paypal-row {
        margin-top: 10px !important;
        text-align: center !important;
    }

    /* Legal disclaimer text under buttons */
    .cd-legal {
        margin-top: 10px !important;
        font-size: 9.5px !important;
        color: #999 !important;
        letter-spacing: 0.04em !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    .cd-legal a {
        color: inherit !important;
        text-decoration: underline !important;
        text-underline-offset: 2px !important;
    }


    /* ----------------------------------------------------------
       7. BODY SCROLL LOCK
       When the drawer is open we prevent the background from
       scrolling. JS adds .md-drawer-open to <body>.
    ---------------------------------------------------------- */

    body.md-drawer-open {
        overflow: hidden !important;
    }

} /* end @media ≤ 768px */