/* Lane E: "better coupon combination" box on cart and checkout.
   Own class (not .woocommerce-info, which WooCommerce's cart.js moves around). */
.amazin-best-combo__notice {
    margin: 0 0 2em;
    padding: 1em 1.5em;
    border-top: 3px solid var(--amazin-accent, #1e85be);
    border-radius: var(--amazin-radius, 0);
    background: #f6f5f8;
    color: inherit;
}
.amazin-best-combo.is-updating .amazin-best-combo__notice {
    opacity: 0.5;
    pointer-events: none;
}
.amazin-best-combo__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em 1em;
    margin: 0;
}
.amazin-best-combo__text {
    flex: 1 1 16em;
}
.amazin-best-combo__apply[disabled] {
    opacity: 0.6;
    cursor: progress;
}

/* Confirmation dialog (swap case). Lives inside the box so the theme's module-scoped
   .button / .button.alt styles still apply; look copied from the page by amazin-cart.js. */
.amazin-best-combo__dialog {
    max-width: min(32em, calc(100vw - 2em));
    padding: 1.5em 1.75em;
    border: 0;
    border-top: 4px solid var(--amazin-accent, currentColor);
    border-radius: var(--amazin-radius, 4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    background: #fff;
    color: var(--amazin-text, inherit);
    font-family: var(--amazin-font, inherit);
}
.amazin-best-combo__dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}
.amazin-best-combo .amazin-best-combo__dialog .amazin-best-combo__title {
    margin: 0 0 0.5em;
    padding: 0;
    font-family: var(--amazin-heading-font, inherit);
    color: var(--amazin-heading-color, inherit);
    font-size: 1.4em;
    line-height: 1.3;
}
.amazin-best-combo__body {
    margin: 0 0 1.25em;
    padding: 0;
}
.amazin-best-combo__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    justify-content: flex-end;
}
.amazin-best-combo__dialog .button:focus-visible {
    outline: 2px solid var(--amazin-accent, currentColor);
    outline-offset: 2px;
}

/* "Keep my coupons" is the quieter choice (owner ruling): white button with the site's black
   text and border (the heading colour amazin-cart.js reads from the page), next to the solid
   accent "Switch coupons" (.button.alt). amazin-cart.js only sets --amazin-* custom properties on
   the box (never inline styles on the buttons), so this rule is what the buttons end up with. The
   !important and the long selector beat theme rules such as body .button / .et_pb_button. */
.amazin-best-combo .amazin-best-combo__dialog .button.amazin-best-combo__keep {
    background: #fff !important;
    border: 2px solid var(--amazin-heading-color, #222) !important;
    color: var(--amazin-heading-color, #222) !important;
    box-shadow: none;
}
.amazin-best-combo .amazin-best-combo__dialog .button.amazin-best-combo__keep:hover {
    background: color-mix(in srgb, var(--amazin-heading-color, #222) 8%, #fff) !important;
}