/*
 * Layout-only styles for the gift popup contents.
 *
 * The popup shell (.lef-popup, .popup-inner, .popup-content, .popup-close,
 * overlay, open/close animation) is owned by leflite's popup component and any
 * child-theme overrides — we intentionally do not restyle it here. Each gift
 * option is the theme's own `card-product`; these rules only arrange the cards
 * inside the popup, hide the per-card quantity selector (gifts are a single
 * unit), and mark the gift line in the cart.
 */
.lef-freegift-popup__title {
    margin: 0 0 1rem;
}

/* leflite lays the section out as a flex row, which turns the options grid into a
   flex item: at `flex: 0 1 auto` it shrink-wraps to the cards' max-content instead
   of filling the popup, leaving dead space on the right. Keep it a plain block so
   the grid spans the full popup width. */
.lef-freegift-popup__section {
    display: block;
    padding: 0;
}

.lef-freegift-popup__section + .lef-freegift-popup__section {
    margin-top: 1.5rem;
}

.lef-freegift-popup__section-title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.lef-freegift-popup__error {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    background: #fdecea;
    color: #b32d2e;
    font-size: 0.9em;
}

/* WooCommerce focuses the notice on load (tabindex="-1" + .focus()) so screen
   readers announce it. When the page is reloaded via the keyboard the browser
   marks that programmatic focus as :focus-visible and paints a focus ring on the
   gift notice. The notice is not interactive (role="alert" announces it without
   focus), so suppress the ring on our own notices only. */
.lef-freegift-notices .woocommerce-message:focus,
.lef-freegift-notices .woocommerce-message:focus-visible,
.lef-freegift-notices .woocommerce-info:focus,
.lef-freegift-notices .woocommerce-info:focus-visible {
    outline: none;
    box-shadow: none;
}

/* leflite keeps [data-component] elements visibility:hidden until its loader
   reveals them. A popup we inject after an AJAX cart update is never processed
   by that loader, so force it visible once opened. */
.lef-freegift-popup.popup-opened {
    visibility: visible !important;
}

/* Popup width: 760px, or the full viewport (minus a small margin) when the
   screen is narrower than that. */
.lef-freegift-popup.popup-opened .popup-inner {
    width: 760px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 40px) !important;
    /* Allow the popup to grow tall enough to avoid a scrollbar on normal
       screens; it still scrolls on short ones that can't show everything. */
    max-height: calc(100vh - 60px) !important;
}

/* leflite forces the content area to height:100% and scrolls inside it. Let it
   size to its content instead, so the popup only scrolls when it actually
   exceeds the (tall) max-height above — i.e. on small screens. */
.lef-freegift-popup.popup-opened .popup-inner .popup-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Grid of product cards — the column count is set inline (one per gift, max 3).
   Cards fill the popup width and are stretched to equal height. */
.lef-freegift-popup__options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
    align-items: stretch;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lef-freegift-popup__option {
    margin: 0;
    display: flex; /* let the card fill the (equal-height) grid cell */
}

.lef-freegift-popup__option::before {
    display: none; /* defeat any theme list-marker */
}

/* Make every card the same height. The theme's card carries a 15px vertical margin
   for the shop grid; here the grid's own `gap` does the spacing, so that margin
   would only leave dead space above and below each card inside its row. */
.lef-freegift-popup__option > .card-product {
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* No sale badge in the gift picker: the gift is free, so "on sale" is meaningless
   noise. The card only renders the badge because PopupManager forces
   `woocommerce_product_is_on_sale` true while the card renders — that flag is what
   makes the price component show the strike-through original next to €0,00, so we
   hide the badge here rather than dropping the flag (which would take the €0 price
   display with it). */
.lef-freegift-popup .product-on-sale {
    display: none;
}

/* No product description in the gift picker — keeps cards compact and uniform
   (so equalising heights doesn't leave a big gap), and avoids a scrollbar on
   desktop. */
.lef-freegift-popup .product-excerpt {
    display: none !important;
}

/* The theme has a generic `ul li .icon { width: 20px }` rule. Each gift card in
   the popup lives inside `.lef-freegift-popup__options > li`, so that rule
   stretches the rating's star glyphs: it widens the grey background star row
   while the absolutely-positioned orange fill row keeps its natural width, so the
   percentage-based fill no longer lines up with the stars. Reset the rating star
   icons to their natural glyph width so background and fill match. */
.lef-freegift-popup .star-rating-display .icon-star {
    width: auto;
}

/* Match the shop's responsive layout on small screens: the archive drops to one
   full-width product per row and lays the card out horizontally (image left,
   content right) — see `.product-items .card-product` in the child theme. Two
   columns here left each card ~132px wide, too narrow for the "Selecteren"
   button, and orphaned the third gift on a row of its own. */
@media (max-width: 600px) {
    .lef-freegift-popup__options {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.75rem;
    }

    .lef-freegift-popup__option > .card-product {
        flex-direction: row;
    }

    .lef-freegift-popup__option > .card-product > .image-outer {
        width: 110px;
        min-width: 110px;
    }

    /* The child theme's `.card .content-outer` sets width:100%, which as a flex
       basis sizes the text column to the whole card and pushes it past the edge.
       Take the space the image leaves instead, and allow shrinking below
       min-content (flex items default to min-width:auto). */
    .lef-freegift-popup__option > .card-product > .content-outer {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        padding: 12px;
    }
}

/* Narrow phones: give the text column back the room the image took. */
@media (max-width: 439px) {
    .lef-freegift-popup__option > .card-product > .image-outer {
        width: 90px;
        min-width: 90px;
    }
}

/* Very narrow phones (iPhone SE and similar). The popup shell's padding, the image
   column and the card padding together leave the "Selecteren" button ~109px, while
   its label plus gift icon need ~137px. The label is an anonymous flex item, so it
   cannot shrink below min-content and spills out of the button instead of wrapping.
   Claw back the missing width from the three paddings around it; the button keeps
   its own (house-style) padding. From 360px up the defaults already fit. */
@media (max-width: 359px) {
    .lef-freegift-popup.popup-opened .popup-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .lef-freegift-popup__option > .card-product > .image-outer {
        width: 80px;
        min-width: 80px;
    }

    .lef-freegift-popup__option > .card-product > .content-outer {
        padding: 8px;
    }
}

/* Gifts are always a single unit — hide the card's quantity selector. */
.lef-freegift-popup .qty-lef-wrapper,
.lef-freegift-popup .quantity-holder,
.lef-freegift-popup .quantity {
    display: none !important;
}

/* Navigation is disabled inside the popup, so the card is not clickable. */
.lef-freegift-popup .card-product {
    cursor: default;
}

/* The "Select" button (rendered in place of the add-to-cart link). */
.lef-freegift-popup__choose {
    width: 100% !important;
    text-align: center;
    justify-content: center;
    cursor: pointer;
    line-height: 16px;
    margin: unset !important;
}

.lef-freegift-popup__choose.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Cart line: €0 price marker. */
.lef-freegift-zero {
    font-weight: 600;
}

/* "Free gift" label under the product name (cart, checkout, mini-cart). */
.lef-freegift-label {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--succes, #2e7d32);
    color: #fff;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* The label is added as cart item-meta, which wraps it in a <dl class="variation">
   with an empty key. Hide that key/colon and strip the wrapper's spacing so only
   the badge shows. */
dl.variation:has(.lef-freegift-label) {
    margin: 0 0 4px;
    order: -1; /* show the label above the product name */
    /* The theme dims variation meta in the side-cart with a 4-class selector
       (.woocommerce-item .product-outer .product-content .variation {opacity:.6});
       the gift label is not secondary meta, so force it back to full opacity. */
    opacity: 1 !important;
}

dl.variation:has(.lef-freegift-label) dt {
    display: none;
}

dl.variation:has(.lef-freegift-label) dd {
    margin: 0;
}

dl.variation:has(.lef-freegift-label) dd p {
    margin: 0;
}

/* The label's wrapper sits after the name (in .product-name on the cart, in
   .product-content at checkout/mini-cart); make that container a column so the
   order:-1 above lifts the label above the product name. */
.product-name:has(.lef-freegift-label),
.product-content:has(.lef-freegift-label) {
    display: flex;
    flex-direction: column;
}

/* Side-cart (mini-cart) gift line: quantity is fixed at 1 and not editable. */
.lef-freegift-item .item-quantity-control {
    pointer-events: none;
}

.lef-freegift-item .item-qty-input {
    -moz-appearance: textfield;
    border: none;
    background: transparent;
    width: 1.6em;
    padding: 0;
    text-align: center;
}

.lef-freegift-item .item-qty-input::-webkit-inner-spin-button,
.lef-freegift-item .item-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity.lef-freegift-qty {
    background: unset;
}