/* Professional Offers & Bundles storefront cards.
 * Intentionally self-contained: no external font import and defensive rules for
 * custom WooCommerce builders such as standalone product renderers.
 */

.pob-offers,
.pob-bundle {
    --pob-card-bg: #f8efff;
    --pob-card-hover-bg: #fbf6ff;
    --pob-card-selected-bg: #ffffff;
    --pob-card-border: #eee3f4;
    --pob-card-selected-border: #744397;
    --pob-title-color: #29232f;
    --pob-price-color: #29232f;
    --pob-compare-color: #918a96;
    --pob-discount-bg: #f1ddff;
    --pob-discount-color: #7438a4;
    --pob-standard-bg: #f3f1f4;
    --pob-standard-color: #77717b;
    --pob-badge-bg: #6c2ca3;
    --pob-badge-color: #ffffff;
    --pob-radio-border: #d6cbdc;
    --pob-radio-selected: #744397;
    --pob-focus: #744397;
    --pob-radius: 11px;
    --pob-card-gap: 9px;
    --pob-card-padding-y: 17px;
    --pob-card-padding-x: 20px;
    display: block !important;
    position: relative !important;
    float: none !important;
    clear: both !important;
    flex: 0 0 100% !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
    height: auto !important;
    margin: 18px 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    box-sizing: border-box;
    container-type: inline-size;
    container-name: pob-commerce;
}


/*
 * Variable-product placement. POB renders before the theme-managed
 * .woocommerce-variation-add-to-cart action area. That action area is left
 * completely to the theme, preventing Add to Cart / Buy Now controls from
 * sharing a grid cell or stacking on top of the cards.
 */
form.cart.pob-cart-has-offers .single_variation_wrap > .pob-offers {
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 14px 0 16px !important;
    clear: both !important;
}

/* If a non-standard template temporarily emits the group inside the CTA
 * container before JS relocates it, keep it full width during that brief state. */
form.cart.pob-cart-has-offers .woocommerce-variation-add-to-cart.variations_button > .pob-offers {
    display: block !important;
    position: relative !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 14px 0 16px !important;
}

/* Simple products can place the fieldset directly in form.cart. */
form.cart.pob-cart-has-offers > .pob-offers {
    display: block !important;
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Keep WooCommerce's native quantity control visible for offer products.
 * Selecting an offer updates this input, while manually changing the input
 * selects the matching quantity offer. Theme-provided +/- controls therefore
 * continue to work without POB replacing their UI. */

.pob-offers *,
.pob-offers *::before,
.pob-offers *::after,
.pob-bundle *,
.pob-bundle *::before,
.pob-bundle *::after {
    box-sizing: border-box;
}

.pob-offers__legend {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    color: var(--pob-title-color);
    background: transparent;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
}

.pob-offers__list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: var(--pob-card-gap);
    margin: 0;
    padding: 0;
}

.pob-offers .pob-offer-card {
    position: relative;
    display: grid !important;
    grid-template-columns: 29px minmax(0, 1fr) max-content;
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    min-height: 88px;
    margin: 0 !important;
    padding: var(--pob-card-padding-y) var(--pob-card-padding-x) !important;
    overflow: visible;
    border: 2px solid var(--pob-card-border) !important;
    border-radius: var(--pob-radius) !important;
    background: var(--pob-card-bg) !important;
    background-image: none;
    color: var(--pob-title-color);
    box-shadow: none;
    cursor: pointer;
    transform: none;
    transition: border-color .16s ease, background-color .16s ease;
}

.pob-offers .pob-offer-card:hover {
    border-color: var(--pob-card-selected-border) !important;
    background: var(--pob-card-hover-bg) !important;
    box-shadow: none;
    transform: none;
}

.pob-offers .pob-offer-card.is-selected {
    z-index: 1;
    border-color: var(--pob-card-selected-border) !important;
    background: var(--pob-card-selected-bg) !important;
    background-image: none;
    box-shadow: none;
    transform: none;
}

.pob-offer-card__control {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none;
}

.pob-offer-card__radio {
    display: grid !important;
    place-items: center;
    width: 29px !important;
    height: 29px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid var(--pob-radio-border) !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: none;
}

.pob-offer-card__radio-dot {
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: transparent;
    transform: scale(0);
    transition: transform .14s ease, background-color .14s ease;
}

.pob-offer-card.is-selected .pob-offer-card__radio {
    border-color: var(--pob-radio-selected) !important;
}

.pob-offer-card.is-selected .pob-offer-card__radio-dot {
    background: var(--pob-radio-selected);
    transform: scale(1);
}

.pob-offer-card__control:focus-visible + .pob-offer-card__radio {
    outline: 3px solid color-mix(in srgb, var(--pob-focus) 28%, transparent);
    outline-offset: 3px;
}

.pob-offer-card__content {
    display: flex !important;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 0;
}

.pob-offer-card__title {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--pob-title-color);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
}

.pob-offer-card__discount {
    display: inline-flex !important;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 22px;
    margin: 0 !important;
    padding: 4px 9px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: var(--pob-discount-bg) !important;
    color: var(--pob-discount-color);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
}

.pob-offer-card__discount.is-standard {
    background: var(--pob-standard-bg) !important;
    color: var(--pob-standard-color);
    font-weight: 600;
    text-transform: none;
}

.pob-offer-card__pricing {
    display: grid !important;
    min-width: 88px;
    justify-items: end;
    align-content: center;
    gap: 3px;
    margin: 0;
    padding: 0;
    text-align: var(--pob-price-align, end);
}

.pob-offer-card__offer-price {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--pob-price-color);
    font: inherit;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0;
    white-space: nowrap;
}

.pob-offer-card__offer-price .woocommerce-Price-amount,
.pob-offer-card__offer-price .woocommerce-Price-currencySymbol {
    color: inherit;
    font: inherit !important;
}

/* Discounted offer totals are the primary commercial price on the card. */
.pob-offer-card.is-discounted .pob-offer-card__offer-price {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.1;
}

/* A safe variable-product preview already contains a real server-calculated
 * price, so do not visually demote it like the generic “Choose options” state.
 * This applies to both standard and discounted offers: the primary price should
 * have the same visual hierarchy on every offer card. */
.pob-offer-card[data-pob-waiting-price]:not([data-pob-waiting-price=""]) .pob-offer-card__pricing.is-waiting .pob-offer-card__offer-price {
    max-width: none;
    color: var(--pob-price-color);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    text-align: var(--pob-price-align, end);
}

.pob-offer-card__compare-price {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--pob-compare-color);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.15;
    text-decoration: line-through;
    white-space: nowrap;
}

.pob-offer-card__per-unit,
.pob-offer-card__savings {
    margin: 0;
    color: var(--pob-compare-color);
    font: inherit;
    font-size: 11px;
    line-height: 1.2;
}

.pob-offer-card__pricing.is-waiting .pob-offer-card__offer-price {
    max-width: 96px;
    color: var(--pob-compare-color);
    font-size: 12px;
    font-weight: 600;
    white-space: normal;
    text-align: end;
}

.pob-offer-card__badge {
    position: absolute !important;
    top: -11px !important;
    inset-inline-end: 17px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    margin: 0 !important;
    padding: 5px 12px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: var(--pob-badge-bg) !important;
    background-image: none;
    color: var(--pob-badge-color);
    box-shadow: none;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    animation: none;
    transform: none;
    z-index: 2;
}

.pob-offer-card__availability {
    grid-column: 2 / -1;
    color: var(--pob-compare-color);
    font-size: 12px;
}

.pob-offer-card.is-unavailable {
    opacity: .55;
    cursor: not-allowed;
}

/* Bundle presentation kept consistent with the offer-card visual language. */
.pob-bundle {
    border: 2px solid var(--pob-card-selected-border);
    border-radius: var(--pob-radius);
    padding: 1.25rem;
    background: var(--pob-card-selected-bg);
    box-shadow: none;
}

.pob-bundle__title {
    margin: 0 0 .85rem;
    color: var(--pob-title-color);
    font-size: 1.05rem;
    font-weight: 700;
}

.pob-bundle__components {
    display: grid;
    gap: .85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pob-bundle__component {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
}

.pob-bundle__image {
    width: 3.25rem;
    height: 3.25rem;
    object-fit: cover;
    border-radius: .45rem;
}

.pob-bundle__component-copy {
    display: grid;
}

.pob-bundle__component-copy small,
.pob-bundle__notice,
.pob-included-price,
.pob-bundle-price__label {
    opacity: .75;
}

.pob-bundle-child-marker {
    display: inline-block;
    font-weight: 700;
}
.pob-bundle-child-marker::before { content: "↳"; }
[dir="rtl"] .pob-bundle-child-marker::before { content: "↲"; }

.pob-included-price {
    font-size: .875em;
}

.pob-cart-bundle-child .product-thumbnail img {
    transform: scale(.85);
}

.pob-bundle-price__label {
    font-size: .8em;
}

/* Component-width responsiveness for narrow page-builder columns. */
@container pob-commerce (max-width: 600px) {
    .pob-offers .pob-offer-card {
        grid-template-columns: 27px minmax(0, 1fr) max-content;
        column-gap: 12px;
        min-height: 82px;
        padding: 15px 14px !important;
    }
    .pob-offer-card__radio { width: 27px !important; height: 27px !important; }
    .pob-offer-card__radio-dot { width: 12px; height: 12px; }
    .pob-offer-card__pricing { min-width: 76px; }
    .pob-bundle-choice { grid-template-columns: auto 46px minmax(0, 1fr); }
    .pob-bundle-choice__unavailable { grid-column: 3; }
}

@container pob-commerce (max-width: 350px) {
    .pob-offers .pob-offer-card { grid-template-columns: 27px minmax(0, 1fr); }
    .pob-offer-card__pricing { grid-column: 2; justify-items: start; text-align: start; }
    .pob-offer-card__pricing.is-waiting .pob-offer-card__offer-price { max-width: none; text-align: start; }
    .pob-offer-card.is-discounted .pob-offer-card__offer-price,
    .pob-offer-card[data-pob-waiting-price]:not([data-pob-waiting-price=""]) .pob-offer-card__pricing.is-waiting .pob-offer-card__offer-price { font-size: 19px; }
    .pob-offer-card__badge { inset-inline-end: 10px !important; }
    .pob-bundle { padding: .9rem; }
    .pob-bundle-choice { grid-template-columns: auto 40px minmax(0, 1fr); gap: 8px; }
}

@media (max-width: 600px) {
    .pob-offers .pob-offer-card {
        grid-template-columns: 27px minmax(0, 1fr) max-content;
        column-gap: 12px;
        min-height: 82px;
        padding: 15px 14px !important;
    }

    .pob-offer-card__radio {
        width: 27px !important;
        height: 27px !important;
    }

    .pob-offer-card__radio-dot {
        width: 12px;
        height: 12px;
    }

    .pob-offer-card__pricing {
        min-width: 76px;
    }
}

@media (max-width: 350px) {
    .pob-offers .pob-offer-card {
        grid-template-columns: 27px minmax(0, 1fr);
    }

    .pob-offer-card__pricing {
        grid-column: 2;
        justify-items: start;
        text-align: start;
    }

    .pob-offer-card__pricing.is-waiting .pob-offer-card__offer-price {
        max-width: none;
        text-align: start;
    }

    .pob-offer-card.is-discounted .pob-offer-card__offer-price,
    .pob-offer-card[data-pob-waiting-price]:not([data-pob-waiting-price=""]) .pob-offer-card__pricing.is-waiting .pob-offer-card__offer-price {
        font-size: 19px;
    }

    .pob-offer-card__badge {
        inset-inline-end: 10px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pob-offer-card,
    .pob-offer-card__radio,
    .pob-offer-card__radio-dot {
        transition: none !important;
    }
}

@media (forced-colors: active) {
    .pob-offers .pob-offer-card,
    .pob-offers .pob-offer-card.is-selected {
        border-color: ButtonText !important;
        background: Canvas !important;
        color: CanvasText;
        box-shadow: none;
    }

    .pob-offers .pob-offer-card.is-selected {
        outline: 2px solid SelectedItem;
    }
}

/* 1.2.6 duplicate-runtime safety: if a stale installation manages to print the
 * same offer group twice before JS runs, never expose the second adjacent copy.
 * storefront.js removes the duplicate node completely once initialized. */
form.cart .single_variation_wrap > [data-pob-offers] + [data-pob-offers] {
    display: none !important;
}


/* Offer package-count controls in the classic cart. */
.pob-offer-package-control {
    display: inline-grid;
    grid-template-columns: auto minmax(3.25rem, 4.5rem) auto;
    align-items: center;
    gap: .35rem;
    max-width: 15rem;
}

.pob-offer-package-control__button,
.pob-offer-package-control__input {
    min-height: 2.25rem;
    box-sizing: border-box;
}

.pob-offer-package-control__button {
    min-width: 2.25rem;
    padding: .25rem .5rem;
    cursor: pointer;
}

.pob-offer-package-control__input {
    width: 100%;
    text-align: center;
}

.pob-offer-package-control__summary {
    grid-column: 1 / -1;
    display: block;
    line-height: 1.3;
    opacity: .78;
}


/* Merchant-selected structural appearance controls. */
.pob-offers[data-pob-badge-position="left"] .pob-offer-card__badge {
    inset-inline-end: auto !important;
    inset-inline-start: 17px !important;
}

@media (max-width: 600px) {
    .pob-offers[data-pob-badge-position="left"] .pob-offer-card__badge {
        inset-inline-end: auto !important;
        inset-inline-start: 10px !important;
    }
}

.pob-offer-card__package-rule {
    grid-column: 2 / -1;
    display: block;
    font-size: .78em;
    line-height: 1.3;
    opacity: .76;
}

/* 2.0 configurable bundle groups */
.pob-bundle__groups { display:grid; gap:16px; }
.pob-bundle-group { margin:0; padding:14px; border:1px solid var(--pob-card-border); border-radius:var(--pob-radius); min-width:0; }
.pob-bundle-group legend { font-weight:700; padding:0 6px; }
.pob-bundle-group__rule { margin:0 0 10px; font-size:.88em; opacity:.75; }
.pob-bundle-group__choices { display:grid; gap:10px; }
.pob-bundle-choice { display:grid; grid-template-columns:auto 56px 1fr auto; gap:10px; align-items:center; padding:10px; border:1px solid var(--pob-card-border); border-radius:calc(var(--pob-radius) * .8); background:var(--pob-card-bg); cursor:pointer; }
.pob-bundle-choice.is-selected { border-color:var(--pob-card-selected-border); background:var(--pob-card-selected-bg); }
.pob-bundle-choice.is-unavailable { opacity:.55; cursor:not-allowed; }
.pob-bundle-choice input { margin:0; }
.pob-bundle-choice__included { font-weight:700; }
.pob-bundle-choice__unavailable { font-size:.8em; }
.pob-bundle-group.is-invalid { outline:2px solid currentColor; outline-offset:2px; }
.pob-bundle__selection-total { font-weight:700; margin:14px 0 0; }
@media (max-width:600px){ .pob-bundle-choice { grid-template-columns:auto 46px 1fr; } .pob-bundle-choice__unavailable { grid-column:3; } }

/* Never let the native WooCommerce quantity field overflow a narrow builder
 * column. This preserves the theme's normal width while adding only a safety cap. */
form.cart.pob-cart-has-offers .quantity,
form.cart.pob-cart-has-offers input[name="quantity"] {
    max-width: 100%;
}