/*
 * Guild Commerce — Mini Cart (Header Dropdown) Styling
 * ----------------------------------------------------------------------------
 * Targets Elementor Pro's WooCommerce Menu Cart widget.
 * Enqueued globally (widget is in the site header on every page).
 *
 * Brand colors:
 *   #F9C466 — gold (primary CTA: checkout)
 *   #4B2D45 — plum (secondary button: view cart, accents, close X)
 *   #003944 — header dark (button text on gold)
 *   #2E404A — body text
 *
 * Layout per designer mockup:
 *   ┌─────────────────────────── × ┐
 *   │ ┌─────────────────────────┐ │
 *   │ │ name          [image]   │ │
 *   │ │ member price            │ │
 *   │ │ [qty]                   │ │
 *   │ │ line total              │ │
 *   │ │ 🗑                       │ │
 *   │ └─────────────────────────┘ │
 *   │ סך הכל            ₪180.00   │
 *   │ [ yellow checkout button ]  │
 *   │ [ plum view-cart button  ]  │
 *   └────────────────────────────┘
 *
 * Quantity box is visually styled to look like a spinner but is read-only
 * in Phase 1. Phase 2 wires it to WC AJAX for live updates.
 */

/* ============================================================================
   Specificity strategy
   --------------------------------------------------------------------------
   Theme (hello-theme-child-master/style.css) and Elementor Pro's own
   `widget-woocommerce-menu-cart-rtl.min.css` both target `.elementor-menu-cart__*`
   classes. To win the cascade unconditionally we prepend the widget-level
   class `.elementor-widget-woocommerce-menu-cart` to every rule that could
   collide. This buys us (0,2,0)+ specificity over the bare class selectors
   used elsewhere, and combined with our late enqueue (priority 100 + deps
   on Elementor's stylesheet) makes our rules authoritative.
   ========================================================================= */

/* ============================================================================
   1. Dropdown panel container
   ========================================================================= */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 20px 20px 16px !important;
    position: relative;
    /* 360px gives enough room for the member price line
       ("מחיר לחברי הארגון: 40.00 ₪") to fit inline on one row with a
       72px image and 40px trash-slot reserved. */
    min-width: 360px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* ============================================================================
   2. Close button (X at top-right, RTL-aware via right: property)
   --------------------------------------------------------------------------
   Elementor emits .elementor-menu-cart__close-button as an empty <div>.
   We draw the × glyph with two rotated pseudo-elements so we don't need an
   extra SVG or font icon.
   ========================================================================= */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease;
    z-index: 2;
    background: transparent !important;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button:hover {
    opacity: 1;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button::before,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button::after {
    content: '' !important;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    background: #4B2D45;
    border-radius: 1px;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__close-button::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* ============================================================================
   3. Products list — vertical stack of cards
   ========================================================================= */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__products {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Each product is a bordered card:
     grid col 1 = image (72px)   — visual RIGHT in RTL, spans both rows
     grid col 2 = info stack     — visual LEFT in RTL (name / price row)
   Card is `position: relative` so the trash icon can absolute-position
   itself at the bottom-left, aligned to the same baseline as the qty
   spinner (which lives in row 2 of the info column). This removes the
   "extra row 3 below image" problem — card is exactly 2 rows tall. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 72px 1fr !important;
    /* Row 1 = name, sized to content.
       Row 2 = 1fr, fills remaining height so its bottom = card's content
       bottom. Combined with `align-self: end` on the price block, this
       forces the qty row to sit exactly where the trash does (bottom: 12px). */
    grid-template-rows: auto 1fr !important;
    gap: 6px 12px !important;
    /* Reserve 40px on the physical LEFT edge for the absolutely-positioned
       trash icon (24px icon + 12px padding inset + 4px breathing room). */
    padding: 12px 12px 0px 40px !important;
    /* Guarantee the card is at least image-height + vertical padding, so
       row 2 has a consistent bottom reference even when content is short. */
    min-height: 96px !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    align-items: start !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Image — logical col 1 (RIGHT in RTL), spans both rows. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-image {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    align-self: start !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-image img {
    width: 72px !important;
    height: 72px !important;
    border-radius: 6px !important;
    object-fit: cover !important;
    display: block !important;
    max-width: 72px !important;
}

/* Name — logical col 2 (LEFT in RTL), top row. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name a {
    color: #4B2D45 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
}

/* Price block (dual price + qty + line total) — bottom of info stack.
   `align-self: end` pushes the entire price block (and its qty row at
   the bottom) to row 2's bottom edge — which equals the card's padding
   bottom — which equals where the absolutely-positioned trash's bottom
   sits. Result: qty spinner's bottom pixel aligns with trash's bottom pixel. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-price {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: end !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove (trash) — absolutely positioned at the bottom-LEFT of the card
   so it visually aligns with the BOTTOM of the qty spinner in row 2.
   --------------------------------------------------------------------------
   Elementor Pro's default renders this container as a small circle with
   ::before/::after drawing the × glyph, anchor transparent. We reset all
   that, paint the trashbin SVG as our own background, and position the
   element absolutely at `bottom: 12px; left: 12px` — matching the card's
   12px bottom padding so the trash sits on the same baseline as the
   qty spinner (which lives at the bottom of card row 2).
   The card reserves a 48px padding-inline-start to keep qty/total from
   overlapping the trash horizontally. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove {
    position: absolute !important;
    /* Use the `inset` shorthand to set all four physical edges at once,
       so there's no chance of a later `inset-inline-*` line quietly
       overriding one of them via RTL mapping (what happened previously:
       `inset-inline-end: auto !important` AFTER `left: 12px !important`
       resolved to `left: auto` in RTL and nuked our positioning). */
    inset: auto auto 12px 12px !important;
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: auto !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    color: transparent !important;
    background-image: url('../images/trashbin.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove:hover {
    opacity: 1;
    border: 0 !important;
}

/* Kill Elementor's × drawn by ::before/::after on the parent container. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove::before,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove::after,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove:hover::before,
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove:hover::after {
    content: none !important;
    display: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ============================================================================
   4. Pricing block (injected by class-mini-cart.php filter)
   Layout: member price line / qty box / line total — stacked vertically.
   ========================================================================= */
/* Pricing block layout (per mockup):
     Row 1: member price line (spans full width)
     Row 2: [qty spinner at col 1 = visual RIGHT in RTL]
            [line total at col 2 = visual LEFT of qty, text flush-right]
   -----------------------------------------------------------------------
   CRITICAL: grid MUST be full-width. Previously I used `auto auto` with
   `justify-content: start` which sized tracks to content (~130px total),
   making the member row span only 130px and wrap its text across 2 lines.
   Now `auto 1fr` makes col 2 stretch to fill remaining space, so the
   member row spans the full pricing-block width (~170-200px depending on
   card size). */
.guild-mini-cart-pricing {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    row-gap: 8px !important;
    column-gap: 12px !important;
    align-items: center !important;
    width: 100%;
    font-size: 0.875rem !important;
}

/* Member price row — full pricing-block width.
   Plain inline flow (not flex) so Hebrew label + value flow naturally
   word-by-word and wrap cleanly if still tight. `white-space: normal`
   explicit to be safe; `text-align: start` = right in RTL. */
.guild-mini-cart-pricing__member {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: block !important;
    color: #225D73 !important;
    font-weight: 600 !important;
    text-align: start;
    line-height: 1.4;
}

.guild-mini-cart-pricing__label {
    color: #225D73 ;
    font-weight: 600;
    margin-inline-end: 4px;
}

.guild-mini-cart-pricing__value {    
    color: #225D73 ;
    font-weight: 600;
}

.guild-mini-cart-pricing__value .woocommerce-Price-amount {
    color: #225D73 ;
    font-weight: 600 !important;
}

/* Quantity spinner — now INTERACTIVE (real up/down <button> elements,
   clicks wired via mini-cart.js → WC-AJAX → fragment refresh).
   64×28 rounded box, number in main area, up/down arrow buttons stacked
   on the trailing side. Buttons are real DOM nodes so they receive clicks;
   arrow glyphs painted via data-URI SVG background. */
.guild-mini-cart-pricing__qty {
    grid-column: 1 !important;
    grid-row: 2 !important;
    display: inline-grid !important;
    grid-template-columns: 1fr 18px;
    grid-template-rows: 1fr 1fr;
    width: 64px;
    height: 28px;
    margin: 0 !important;
    border: 1px solid #2E404A;
    border-radius: 6px;
    overflow: hidden;
    background: transparent;
    position: relative;
}

.guild-mini-cart-pricing__qty-value {
    grid-column: 1;
    grid-row: 1 / 3;
    justify-self: center !important;
    align-self: center !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
}

/* Real <button> elements — clickable, styled to look identical to the
   previous decorative pseudo-elements. No visible content; arrows drawn
   via background-image. */
.guild-mini-cart-pricing__qty-btn {
    grid-column: 2;
    width: 18px;
    height: auto;
    padding: 0;
    margin: 0;
    border: 0;
    border-inline-start: 1px solid #2E404A;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 6px 4px;
    cursor: pointer;
    font-size: 0;
    color: transparent;
    line-height: 1;
    transition: background-color 0.15s ease;
}

.guild-mini-cart-pricing__qty-btn:hover {
    background-color: rgba(46, 64, 74, 0.08);
}

.guild-mini-cart-pricing__qty-btn:active {
    background-color: rgba(46, 64, 74, 0.16);
}

.guild-mini-cart-pricing__qty-btn--up {
    grid-row: 1;
    border-bottom: 1px solid #2E404A;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='%232E404A'%3E%3Cpath d='M5 0L0 6h10z'/%3E%3C/svg%3E");
}

.guild-mini-cart-pricing__qty-btn--down {
    grid-row: 2;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='%232E404A'%3E%3Cpath d='M5 6L0 0h10z'/%3E%3C/svg%3E");
}

/* Dim the spinner while an AJAX update is in flight so double-clicks feel right. */
.guild-mini-cart-pricing__qty.is-updating {
    opacity: 0.6;
    pointer-events: none;
}

/* Line total — sits next to qty in row 2 col 2 (visual LEFT in RTL,
   to the left of the qty spinner which sits on the visual right).
   Prominent but not oversized; matches mockup's dark teal weight-700 look. */
.guild-mini-cart-pricing__total {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: center !important;
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #2E404A !important;
    text-align: start;
    white-space: nowrap;
}

.guild-mini-cart-pricing__total .woocommerce-Price-amount {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #2E404A !important;
}

/* ============================================================================
   5. Remove buttons — Elementor emits TWO anchor tags, one with class
   `.elementor_remove_from_cart_button` and one with `.remove_from_cart_button`.
   We hide the first and style the second with our trash SVG.
   ========================================================================= */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove .elementor_remove_from_cart_button {
    display: none !important;
}

/* The two anchor tags inside the remove container:
   - `.elementor_remove_from_cart_button`  — kept, full-cover click target (opacity 0 per Elementor default; works fine for us)
   - `.remove_from_cart_button`            — hidden (we only need one working trash button) */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove .elementor_remove_from_cart_button {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    z-index: 2 !important;
    background: none !important;
    text-indent: -9999px;
    overflow: hidden;
}
header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove {
    bottom: 20px !important;
}
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-remove .remove_from_cart_button {
    display: none !important;
}

/* ============================================================================
   6. Subtotal row — "סכום ביניים: 180.00 ₪"
   ========================================================================= */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    padding: 12px 4px !important;
    border-top: 1px solid #e0e0e0 !important;
    border-bottom: none !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #2E404A !important;
    margin: 0 !important;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal strong {
    font-weight: 600 !important;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal .woocommerce-Price-amount {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #2E404A !important;
}

/* ============================================================================
   7. Footer buttons — yellow primary CTA (checkout), plum secondary (view cart)
   Theme `.elementor-menu-cart__main .elementor-button` sets padding/height to
   non-!important defaults; our chained selector + !important wins cleanly.
   ========================================================================= */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button {
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    display: inline-flex !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    min-height: 44px !important;
    height: auto !important;
    line-height: 1 !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
    transition: opacity 0.15s ease;
}

.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button:hover {
    opacity: 0.9;
}

/* Primary CTA — gold checkout button (order: 1 so it appears on top). */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button--checkout {
    background: #F9C466 !important;
    color: #003944 !important;
    order: 1 !important;
}

/* Secondary — plum view-cart button. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button--view-cart {
    background: #4B2D45 !important;
    color: #fff !important;
    order: 2 !important;
}

/* Button text inner span — kill theme's font-size override. */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__footer-buttons .elementor-button-text {
    font-size: 1rem !important;
    line-height: 1 !important;
    font-weight: 500 !important;
}

/* ============================================================================
   8. Empty-cart state — native WC message
   ========================================================================= */
.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main .woocommerce-mini-cart__empty-message {
    text-align: center !important;
    padding: 32px 16px !important;
    color: #2E404A !important;
    margin: 0 !important;
}

/* ============================================================================
   9. Mobile tweaks (≤767px)
   ========================================================================= */
@media (max-width: 767px) {
    .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__main {
        min-width: min(calc(100vw - 32px), 340px) !important;
        padding: 16px !important;
    }

    .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product {
        grid-template-columns: 64px 1fr !important;
    }

    .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-image img {
        width: 64px !important;
        height: 64px !important;
        max-width: 64px !important;
    }
}