/*
 * AfghanZone Public Product Detail — Canonical Purchase Actions Final v1.0.0
 * UI-only compatibility layer.
 *
 * Purpose:
 * - restore the existing canonical Website Order button to the visible action surface;
 * - preserve Cart, WhatsApp, Message and quantity controls;
 * - keep mobile controls inside the viewport;
 * - keep desktop controls aligned without changing any business logic.
 *
 * Canonical order engine remains public-customer-orders.js ->
 * POST /api/v1/marketplace/orders.
 */

:root {
    --az-buy-orange: #f97316;
    --az-buy-orange-deep: #ea580c;
    --az-buy-green: #059669;
    --az-buy-green-deep: #047857;
    --az-buy-ink: #172033;
    --az-buy-line: #e5e7eb;
}

/* ---------------------------------------------------------
   Desktop / tablet detail actions
   The runtime enhancers produce:
   quantity + cart + WhatsApp + Place Order + Message.
   Give every canonical action an explicit track.
   --------------------------------------------------------- */
@media (min-width: 761px) {
    .product-detail-page .quantity-order-row {
        display: grid !important;
        grid-template-columns:
            minmax(112px, .74fr)
            minmax(126px, 1fr)
            minmax(145px, 1.12fr)
            minmax(150px, 1.18fr)
            minmax(118px, .92fr) !important;
        align-items: stretch !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    .product-detail-page .quantity-order-row > * {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        grid-column: auto !important;
    }

    .product-detail-page .quantity-order-row .quantity-control {
        order: 1 !important;
    }

    .product-detail-page .quantity-order-row .detail-cart-button {
        order: 2 !important;
    }

    .product-detail-page .quantity-order-row [data-detail-whatsapp] {
        order: 3 !important;
    }

    .product-detail-page .quantity-order-row .public-order-button {
        order: 4 !important;
        grid-column: auto !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 44px !important;
        padding: 0 12px !important;
        border: 1px solid rgba(234,88,12,.18) !important;
        border-radius: 11px !important;
        background: linear-gradient(135deg, var(--az-buy-orange) 0%, var(--az-buy-orange-deep) 100%) !important;
        color: #fff !important;
        box-shadow: 0 8px 18px rgba(234,88,12,.17) !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    .product-detail-page .quantity-order-row .az-chat-button {
        order: 5 !important;
        grid-column: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 44px !important;
        padding: 0 10px !important;
        border: 1px solid #dbe4ff !important;
        border-radius: 11px !important;
        background: #f4f6ff !important;
        color: #4338ca !important;
        box-shadow: none !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    .product-detail-page .quantity-order-row .public-order-button i,
    .product-detail-page .quantity-order-row .az-chat-button i {
        flex: 0 0 auto !important;
    }
}

/* Slightly narrower desktops: keep five actions readable. */
@media (min-width: 761px) and (max-width: 1180px) {
    .product-detail-page .quantity-order-row {
        grid-template-columns:
            minmax(100px, .72fr)
            repeat(4, minmax(105px, 1fr)) !important;
        gap: 6px !important;
    }

    .product-detail-page .quantity-order-row > button {
        padding-inline: 7px !important;
        font-size: 9px !important;
    }
}

/* ---------------------------------------------------------
   Mobile: one quantity row + four canonical actions.
   No implicit grid tracks, no clipped Place Order button.
   --------------------------------------------------------- */
@media (max-width: 760px) {
    #mobile-product-action {
        position: sticky !important;
        inset-inline: 0 !important;
        bottom: 0 !important;
        z-index: 80 !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-template-rows: 46px 48px !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
        overflow: visible !important;
        border-top: 1px solid rgba(148,163,184,.24) !important;
        background: rgba(255,255,255,.975) !important;
        box-shadow: 0 -10px 30px rgba(15,23,42,.09) !important;
        backdrop-filter: blur(16px) saturate(145%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(145%) !important;
    }

    #mobile-product-action > * {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    #mobile-product-action .quantity-control {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        order: 1 !important;
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
    }

    #mobile-product-action > button {
        grid-column: auto !important;
        grid-row: 2 !important;
        height: 48px !important;
        min-height: 48px !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 0 5px !important;
        overflow: hidden !important;
        border-radius: 12px !important;
        font-size: 8.5px !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    /* Right-to-left visual priority: Order, Cart, WhatsApp, Message. */
    #mobile-product-action .public-order-button {
        order: 2 !important;
        border: 1px solid rgba(234,88,12,.16) !important;
        background: linear-gradient(135deg, var(--az-buy-orange) 0%, var(--az-buy-orange-deep) 100%) !important;
        color: #fff !important;
        box-shadow: 0 7px 18px rgba(234,88,12,.18) !important;
    }

    #mobile-product-action .mobile-cart-add {
        order: 3 !important;
        border: 1px solid #fed7aa !important;
        background: linear-gradient(180deg, #fffaf4 0%, #fff1e2 100%) !important;
        color: var(--az-buy-orange-deep) !important;
        box-shadow: none !important;
    }

    #mobile-product-action [data-detail-whatsapp] {
        order: 4 !important;
        border: 1px solid rgba(5,150,105,.18) !important;
        background: linear-gradient(135deg, var(--az-buy-green) 0%, var(--az-buy-green-deep) 100%) !important;
        color: #fff !important;
        box-shadow: 0 7px 18px rgba(5,150,105,.14) !important;
    }

    #mobile-product-action .az-chat-button {
        order: 5 !important;
        border: 1px solid #dbe4ff !important;
        background: #f4f6ff !important;
        color: #4338ca !important;
        box-shadow: none !important;
    }

    /* Make the cart action understandable instead of an unexplained bag icon. */
    html[lang="ps"] #mobile-product-action .mobile-cart-add::after,
    html:not([lang]) #mobile-product-action .mobile-cart-add::after {
        content: "ټوکرۍ";
    }
    html[lang="fa"] #mobile-product-action .mobile-cart-add::after {
        content: "سبد";
    }
    html[lang="en"] #mobile-product-action .mobile-cart-add::after {
        content: "Cart";
    }

    #mobile-product-action .mobile-cart-add::after {
        margin-inline-start: 3px;
        font-size: 8px;
        font-weight: 900;
    }

    #mobile-product-action .public-order-button i,
    #mobile-product-action .az-chat-button i,
    #mobile-product-action [data-detail-whatsapp] i,
    #mobile-product-action .mobile-cart-add i {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    #mobile-product-action > button:disabled {
        opacity: .5 !important;
        box-shadow: none !important;
    }

    /* The desktop duplicate stays hidden on mobile. */
    .product-detail-page .quantity-order-row {
        display: none !important;
    }

    /* Reserve breathing room below long review/specification content. */
    .product-detail-page .detail-main {
        padding-bottom: 12px !important;
    }
}

@media (max-width: 360px) {
    #mobile-product-action {
        gap: 4px !important;
        padding-inline: 5px !important;
    }

    #mobile-product-action > button {
        padding-inline: 3px !important;
        font-size: 7.5px !important;
    }

    #mobile-product-action .mobile-cart-add::after {
        font-size: 7px !important;
    }
}

/* Dark-mode compatibility */
html[data-theme="dark"] #mobile-product-action {
    border-top-color: #334155 !important;
    background: rgba(15,23,42,.975) !important;
}
html[data-theme="dark"] #mobile-product-action .mobile-cart-add {
    border-color: #7c2d12 !important;
    background: #2a160d !important;
    color: #fdba74 !important;
}
html[data-theme="dark"] #mobile-product-action .az-chat-button {
    border-color: #3730a3 !important;
    background: #1e1b4b !important;
    color: #c7d2fe !important;
}