/**
 * =============================================================================
 *  Al Qamara — Quick View modal styles (self-contained, loads on EVERY page)
 *
 *  WHY THIS IS A SEPARATE FILE (not part of css/woocommerce.css):
 *  woocommerce.css only loads on WooCommerce-specific pages (is_shop(),
 *  is_product(), is_cart(), etc. — see inc/enqueue.php) to avoid shipping
 *  WC-only CSS to pages that don't need it. But the Quick View corner icon
 *  can appear ANYWHERE a product card renders — including homepage widgets
 *  (inc/widgets.php) — where woocommerce.css never loads at all. Confirmed
 *  live: the modal rendered with zero styling on the homepage because of
 *  this exact gap.
 *
 *  This file is enqueued unconditionally by inc/quick-view.php (same place
 *  its JS is already enqueued unconditionally) whenever Quick View itself
 *  is enabled, so it's guaranteed present wherever the modal can open.
 *
 *  It is ALSO fully self-contained: several rules below duplicate a small
 *  number of single-product-page rules from woocommerce.css (variation
 *  select/swatch-button hiding, the qty + Add to Cart + Buy Now row ratio,
 *  the WhatsApp/Messenger order row) rather than relying on that file being
 *  loaded too. On pages where BOTH files happen to load (shop, product,
 *  etc.) the duplicate rules are byte-identical, so there's no visual
 *  conflict — just redundancy, which is the safer trade-off here.
 * =============================================================================
 */

/* ── Modal shell ─────────────────────────────────────────────────────────── */
.alq-quickview-modal .modal-dialog { max-width: 780px; }
.alq-quickview-modal .modal-content {
    border: none;
    border-radius: 14px;
    overflow: hidden;
}
.alq-quickview-modal .modal-body {
    padding: 2.25rem;
    position: relative;
}
.alq-quickview-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 5;
}

.alq-quickview-loading,
.alq-quickview-error { min-height: 220px; }
.alq-quickview-loading .spinner-border {
    color: var(--alq-accent, #b8912a);
    width: 2.25rem;
    height: 2.25rem;
}

.alq-quickview-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2rem;
}
.alq-quickview-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    background: var(--alq-wc-bg-alt, #f8f9fb);
}
.alq-quickview-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--alq-primary, #0f172a);
    margin: 0 0 .5rem;
    padding-right: 2rem; /* keep clear of the close button */
}
/* WooCommerce's own plugin CSS sets .star-rating{float:right} — same
 * recurring bug fixed earlier on the Wishlist and Compare pages this
 * session, found here too via live testing. */
.alq-quickview-rating { margin-bottom: .5rem; }
.alq-quickview-rating .star-rating { float: none; display: inline-block; vertical-align: middle; }
.alq-quickview-price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--alq-accent, #b8912a);
    margin-bottom: .5rem;
}
.alq-quickview-price ins { text-decoration: none; }
.alq-quickview-price del { color: var(--alq-wc-muted, #9ca3af); font-weight: 400; }
.alq-quickview-stock { margin-bottom: .9rem; font-size: .9rem; }
.alq-quickview-desc {
    font-size: .9rem;
    color: var(--alq-wc-muted, #64748b);
    line-height: 1.6;
    margin-bottom: 1rem;
}
.alq-quickview-desc p:last-child { margin-bottom: 0; }


/* ── Variation table + native select ────────────────────────────────────────
   Self-contained copy of woocommerce.css's `.woocommerce div.product
   .type-product table.variations` rules, scoped to `.alq-quickview-summary`
   instead so it works regardless of whether woocommerce.css is loaded on
   the current page. Values kept identical to the single-product page. ── */
.alq-quickview-summary form.cart { margin-bottom: 1rem; }
.alq-quickview-summary table.variations {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: .75rem;
}
.alq-quickview-summary table.variations th { font-size: .85rem; font-weight: 600; padding: .4rem .5rem .4rem 0; }
.alq-quickview-summary table.variations td.label { padding-right: .75rem; font-weight: 600; }
.alq-quickview-summary table.variations td select {
    width: 100%;
    max-width: 100%;
    border: 1.5px solid var(--alq-wc-border, #eef0f2);
    border-radius: 5px;
    padding: .38rem .7rem;
    font-size: .88rem;
    color: var(--alq-primary, #0f172a);
    background: #fff;
}
.alq-quickview-summary table.variations td select:focus {
    border-color: var(--alq-accent, #b8912a);
    outline: none;
    box-shadow: 0 0 0 3px rgba(184,145,42,.15);
}
/* The theme's own variation-swatch script (js/main.js, "VARIATION BUTTONS")
 * adds this class to the native <select> once it builds pill-style buttons
 * next to it — but the CSS rule that hides it (in woocommerce.css) is
 * scoped to `.woocommerce div.product.type-product`, which never matches
 * inside this modal. That mismatch was the exact bug reported live: BOTH
 * the native dropdown AND the swatch buttons showing at once. */
.alq-quickview-summary table.variations td select.alq-var-select-hidden {
    display: none !important;
}

/* ── Variation swatch buttons ── (self-contained copy — these two rules ARE
   unscoped/global in woocommerce.css, but that file doesn't load on every
   page Quick View can appear on, so duplicated here for safety.) ── */
.alq-quickview-summary .alq-var-btn-group {
    display  : flex;
    flex-wrap: wrap;
    gap      : .4rem;
    margin-top: .25rem;
}
.alq-quickview-summary .alq-var-btn {
    padding      : .3rem .75rem;
    font-size    : .82rem;
    font-weight  : 500;
    color        : var(--alq-primary, #0f172a);
    background   : #fff;
    border       : 1.5px solid var(--alq-wc-border, #eef0f2);
    border-radius: 5px;
    cursor       : pointer;
    transition   : border-color .18s, background .18s, color .18s;
    line-height  : 1.4;
    white-space  : nowrap;
}
.alq-quickview-summary .alq-var-btn:hover:not(.disabled):not(.selected) {
    border-color : var(--alq-accent, #b8912a);
    color        : var(--alq-accent, #b8912a);
}
.alq-quickview-summary .alq-var-btn.selected {
    border-color : var(--alq-accent, #b8912a);
    background   : var(--alq-accent, #b8912a);
    color        : #fff;
}
.alq-quickview-summary .alq-var-btn.selected:hover { color: #fff; }
.alq-quickview-summary .alq-var-btn.disabled {
    opacity: .4;
    cursor : not-allowed;
    text-decoration: line-through;
}
.alq-quickview-summary .reset_variations {
    font-size: .78rem;
    color: var(--alq-wc-muted, #64748b);
    text-decoration: none;
    display: block;
    margin-left: .5rem;
}
.alq-quickview-summary .reset_variations:hover { color: var(--alq-accent, #b8912a); }
.alq-quickview-summary .reset_variations[style*="hidden"] { display: none !important; }

.alq-quickview-summary .single_variation_wrap { min-height: 0 !important; }
.alq-quickview-summary .woocommerce-variation { min-height: 0 !important; }
.alq-quickview-summary .woocommerce-variation-description { font-size: .85rem; margin-bottom: .25rem; }
.alq-quickview-summary .woocommerce-variation-price { margin-bottom: .5rem; }
/* Sale-price underline fix — .alq-quickview-price (above) only covers the
 * STATIC price range shown before a variation is picked. Once WooCommerce's
 * own variation-form JS injects the resolved variation's own price into
 * .woocommerce-variation-price (a separate element), that one needs the
 * same <ins>/<del> reset — found live: the underline persisted specifically
 * after selecting a variation with a sale price, same underline bug fixed
 * earlier this session on the Wishlist/Compare pages. */
.alq-quickview-summary .woocommerce-variation-price ins { text-decoration: none; }
.alq-quickview-summary .woocommerce-variation-price del { color: var(--alq-wc-muted, #9ca3af); font-weight: 400; }


/* ── Quantity + Add to Cart + Buy Now row — same ratio as the single
   product page: qty box fixed width, Add to Cart flex:1 (fills remaining
   space), Buy Now flex:0 0 auto (auto-width, sits at the right edge). ── */
.alq-quickview-summary form.cart {
    display     : flex !important;
    align-items : center;
    gap         : .75rem;
    flex-wrap   : wrap;
    width       : 100%;
    margin-top  : 0;
}
/* The div containing qty + Add to Cart + Buy Now (variable products) needs
 * nowrap so those three sit on ONE row — but the form itself (which also
 * contains the full-width variations table above this div) must stay
 * `wrap`, otherwise a `nowrap` form with two 100%-width children (the
 * table AND this div) forces them onto the same line and the second one
 * overflows off-screen. Found live: this exact bug when both rules were
 * mistakenly merged into one shared `flex-wrap: nowrap`. */
.alq-quickview-summary .woocommerce-variation-add-to-cart {
    display    : flex !important;
    flex-wrap  : nowrap !important;
    width      : 100% !important;
    gap        : .75rem;
    align-items: center;
    margin-top : .75rem !important;
}
.alq-quickview-summary table.variations,
.alq-quickview-summary .single_variation_wrap {
    flex : 0 0 100%;
    width: 100%;
}
.alq-quickview-summary .quantity {
    flex   : 0 0 auto;
    display: flex;
    align-items: center;
    border: 1.5px solid var(--alq-wc-border, #eef0f2);
    border-radius: var(--alq-wc-radius, 5px);
    overflow: hidden;
}
.alq-quickview-summary .qty {
    width: 56px;
    height: 42px;
    text-align: center;
    border: none;
    font-size: .95rem;
    font-weight: 600;
    color: var(--alq-primary, #0f172a);
    background: #fff;
}
.alq-quickview-summary .qty:focus { outline: none; box-shadow: none; }
.alq-quickview-summary .woocommerce-variation-add-to-cart-disabled .quantity { display: none !important; }

.alq-quickview-summary .button,
.alq-quickview-summary .single_add_to_cart_button {
    height: 42px;
    padding: 0 1.6rem;
    font-size: .9rem;
    font-weight: 700;
    background: var(--alq-accent, #b8912a) !important;
    color: #fff !important;
    border: none;
    border-radius: var(--alq-wc-radius, 5px);
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
    line-height: normal;
}
.alq-quickview-summary .button:hover,
.alq-quickview-summary .single_add_to_cart_button:hover {
    background: var(--alq-accent-dark, #9a7821) !important;
}
.alq-quickview-summary .single_add_to_cart_button {
    flex           : 1 1 0 !important;
    min-width      : 0;
    text-align     : center;
    justify-content: center;
}
.alq-quickview-summary .single_add_to_cart_button:disabled,
.alq-quickview-summary .single_add_to_cart_button.disabled {
    background: var(--alq-accent, #b8912a) !important;
    opacity: .55;
    cursor: not-allowed;
}

/* Buy Now — outlined, auto-width, always sits at the right edge because
 * Add to Cart fills the remaining space via flex:1 above.
 *
 * Specificity note (found live, shop page only — homepage looked fine
 * because its <body> lacks the plain `.woocommerce` class WC adds on
 * shop/product/etc. pages): the theme's own sitewide button rule in
 * css/woocommerce.css sets `.woocommerce button.button.alt { background:
 * ... !important }` (the Buy Now button's own markup carries both
 * `.button` and `.alt`) — specificity (0,3,1) via `.woocommerce` +
 * `button` tag + two classes. A three-class selector here
 * (`.alq-quickview-modal .alq-quickview-summary .alq-buy-now-btn`, tried
 * first) is only (0,3,0) — still LOWER on the tie-break — so even with
 * !important on both sides, that sitewide rule kept winning and Buy Now
 * rendered solid gold instead of outlined whenever `.woocommerce` was
 * present as an ancestor. Adding `.button` (already in the button's own
 * class list) as a 4th class raises this to (0,4,0), safely above
 * (0,3,1) unconditionally. */
.alq-quickview-modal .alq-quickview-summary .button.alq-buy-now-btn {
    flex           : 0 0 auto !important;
    text-align     : center;
    justify-content: center;
    background   : transparent !important;
    color        : var(--alq-accent, #b8912a) !important;
    border       : 2px solid var(--alq-accent, #b8912a) !important;
    padding-left : 1.4rem !important;
    padding-right: 1.4rem !important;
    margin-left  : 0 !important;
}
.alq-quickview-modal .alq-quickview-summary .button.alq-buy-now-btn:hover {
    background: var(--alq-accent, #b8912a) !important;
    color     : #fff !important;
}


/* ── WhatsApp / Messenger order row (only shown if the Customizer options
   are on for those buttons) — self-contained copy, not depending on a
   `.woocommerce` ancestor class being present on the current page. ── */
.alq-quickview-summary .alq-order-row {
    display    : flex;
    flex-wrap  : nowrap;
    gap        : .6rem;
    margin-top : .6rem;
}
.alq-quickview-summary .alq-order-btn {
    display         : inline-flex !important;
    align-items     : center;
    justify-content : center;
    gap             : .4rem;
    flex            : 1 1 0;
    height          : 36px !important;
    padding         : 0 1rem !important;
    font-size       : .8rem !important;
    font-weight     : 600 !important;
    border-radius   : var(--alq-wc-radius, 4px) !important;
    text-decoration : none !important;
    transition      : background .2s, color .2s, border-color .2s;
    white-space     : nowrap;
    line-height     : 1 !important;
}
.alq-quickview-summary .alq-order-btn svg {
    width      : .9rem;
    height     : .9rem;
    flex-shrink: 0;
}
.alq-quickview-summary .alq-wa-btn {
    background : var(--alq-whatsapp, #25d366) !important;
    color      : #fff !important;
    border     : 2px solid var(--alq-whatsapp, #25d366) !important;
}
.alq-quickview-summary .alq-wa-btn:hover {
    background  : var(--alq-whatsapp-dark, #1ebe5d) !important;
    border-color: var(--alq-whatsapp-dark, #1ebe5d) !important;
    color       : #fff !important;
}
.alq-quickview-summary .alq-msg-btn {
    background : linear-gradient(135deg, var(--alq-messenger, #0084ff) 0%, var(--alq-messenger-end, #7b00ff) 100%) !important;
    color      : #fff !important;
    border     : 2px solid var(--alq-messenger, #0084ff) !important;
}
.alq-quickview-summary .alq-msg-btn:hover {
    background : linear-gradient(135deg, #006ae0 0%, #6200d6 100%) !important;
    border-color: #006ae0 !important;
    color      : #fff !important;
}


/* ── View Full Details — plain text link, no border/background (confirmed
   with the user: a "button" look wasn't wanted here, just a clean link;
   removed the border-top this had originally, which visually collided
   with the WhatsApp/Messenger row's own border right above it). ── */
.alq-quickview-full-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--alq-primary, #0f172a);
    text-decoration: none;
    margin-top: .9rem;
}
.alq-quickview-full-link:hover { color: var(--alq-accent, #b8912a); text-decoration: underline; }


@media (max-width: 767.98px) {
    .alq-quickview-modal .modal-body { padding: 1.5rem; }
    .alq-quickview-layout {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .alq-quickview-image img { max-width: 220px; margin: 0 auto; display: block; }
}

/* Mobile: tighten the qty + Add to Cart + Buy Now row — same values the
 * single-product page already uses at this breakpoint (woocommerce.css,
 * "Mobile: tighten the gap") — copied here so the modal matches exactly,
 * since the modal's own column is often narrower than the real page's
 * mobile content column. */
@media (max-width: 575.98px) {
    .alq-quickview-summary form.cart { gap: .5rem; }
    .alq-quickview-summary .woocommerce-variation-add-to-cart { gap: .5rem !important; }
    .alq-quickview-summary .button,
    .alq-quickview-summary .single_add_to_cart_button {
        padding : 0 .9rem;
        justify-content: center;
    }
    .alq-quickview-summary .alq-buy-now-btn {
        padding-left : .9rem !important;
        padding-right: .9rem !important;
    }
    .alq-quickview-summary .alq-order-row { gap: .35rem; }
    .alq-quickview-summary .alq-order-btn {
        font-size: .7rem !important;
        padding  : 0 .3rem !important;
        gap      : .2rem !important;
        height   : 34px !important;
    }
    .alq-quickview-summary .alq-order-btn svg {
        width : .7rem;
        height: .7rem;
    }
}