/**
 * SMC Quick Cart - styles
 *
 * Theme-neutral: every visual property uses CSS custom properties so the
 * host theme can override colors, spacing, and typography by setting the
 * properties on a parent element (typically :root or body).
 *
 * Scoping: every rule is namespaced under .smc-quickcart, .smc-quickcart-*,
 * or :where(.smc-quickcart) so the plugin cannot leak styles into the rest
 * of the page.
 *
 * Accessibility:
 *   - High-contrast focus rings (visible against light AND dark themes).
 *   - Modal traps focus visually with a clear shadow ring.
 *   - prefers-reduced-motion strips animations.
 *   - Touch targets >= 44x44 on the close button and action buttons.
 *
 * @package smcQuickCart
 * @copyright Copyright 2026 San Marco Coffee
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 */

/* ---- Theme tokens ------------------------------------------------------- */

.smc-quickcart {
    /* Colors. Defaults align with San Marco Coffee's site design tokens
     * (--smc-account, --smc-buy, etc. defined in user_customcss.css).
     * Falls back to sensible values if the page hasn't loaded those
     * tokens yet, so the popup never renders unstyled.
     */
    --smc-qc-overlay:        rgba(15, 25, 40, 0.55);
    --smc-qc-surface:        #ffffff;
    --smc-qc-surface-2:      #f7fafc;
    --smc-qc-border:         var(--border-color, #e2e8f0);
    --smc-qc-text:           var(--smc-account, #15293f);
    --smc-qc-text-muted:     #4a5568;

    /* Primary action button = "Shopping Cart". Uses SMC's spend-money green
     * since clicking goes to the next step toward purchase. */
    --smc-qc-accent:         var(--smc-buy, #2d7a3e);
    --smc-qc-accent-hover:   var(--smc-buy-hover, #246430);
    --smc-qc-accent-contrast:#ffffff;

    /* Secondary action button = "Continue Shopping". Outlined green so it's
     * visually paired with primary but clearly secondary. */
    --smc-qc-secondary:      #ffffff;
    --smc-qc-secondary-hover:#f0faf2;
    --smc-qc-secondary-text: var(--smc-buy, #2d7a3e);
    --smc-qc-secondary-border: var(--smc-buy, #2d7a3e);

    --smc-qc-success-bg:     #e9f5ec;
    --smc-qc-success-text:   #1d6e36;
    --smc-qc-success-icon:   #2d7a3e;
    --smc-qc-error-bg:       #fdecea;
    --smc-qc-error-text:     #8b1a1a;
    --smc-qc-focus-ring:     var(--smc-action-hover, #007bff);

    /* Sizing - matches 1.5.5 reference: ~365px wide, smaller padding,
     * ~200px max image. The narrower modal feels more focused. */
    --smc-qc-radius:         3px;
    --smc-qc-radius-sm:      3px;
    --smc-qc-shadow:         0 0 5px rgba(0, 0, 0, 0.5);
    --smc-qc-max-width:      365px;
    --smc-qc-padding:        1rem;

    /* Type */
    --smc-qc-font:           inherit;
    --smc-qc-title-size:     1.2rem;
    --smc-qc-title-weight:   600;
    --smc-qc-body-size:      0.95rem;
}

/* ---- Modal root --------------------------------------------------------- */

.smc-quickcart {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    font: var(--smc-qc-body-size) / 1.5 var(--smc-qc-font);
    color: var(--smc-qc-text);
}

.smc-quickcart--hidden {
    display: none;
}

.smc-quickcart__overlay {
    position: absolute;
    inset: 0;
    background: var(--smc-qc-overlay);
    animation: smc-qc-fade-in 180ms ease-out both;
}

.smc-quickcart__dialog {
    position: relative;
    background: var(--smc-qc-surface);
    border-radius: var(--smc-qc-radius);
    box-shadow: var(--smc-qc-shadow);
    width: calc(100% - 2rem);
    max-width: var(--smc-qc-max-width);
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    /* No overflow clipping here - the close button intentionally
     * overhangs the top-right corner. Inner sections handle their own
     * border-radius clipping where needed. */
    outline: none;
    animation: smc-qc-pop-in 200ms cubic-bezier(0.2, 0.85, 0.4, 1.05) both;
}

.smc-quickcart__dialog:focus-visible {
    box-shadow: var(--smc-qc-shadow), 0 0 0 3px var(--smc-qc-focus-ring);
}

/* Visually-hidden helper for screen-reader-only content. Used for the
 * dialog title (which exists for aria-labelledby + a11y but is redundant
 * visually since the popup body shows its own status headline). */
.smc-quickcart__sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Close button: base styles common to both sizes. The .smc-quickcart--close-small
 * (default) and .smc-quickcart--close-large variants applied to the modal root
 * by JS pick the size. Toggle via admin Configuration -> SMC Quick Cart ->
 * Close button size. Both variants pass WCAG AA contrast and labeling; only
 * "large" meets WCAG AAA mobile touch-target minimum (44x44 CSS px). */
.smc-quickcart__close {
    position: absolute;
    padding: 0;
    background-color: #888;
    border: 2px dashed #333;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background-color 120ms ease, transform 120ms ease;
}
.smc-quickcart__close:hover {
    background-color: var(--smc-qc-accent);
    transform: scale(1.05);
    color: #fff;
}
.smc-quickcart__close:focus-visible {
    outline: 2px solid var(--smc-qc-focus-ring);
    outline-offset: 2px;
}
.smc-quickcart__close > span { line-height: 0.9; font-weight: 600; }

/* "small" variant - matches 1.5.5 .pzenajx-close exactly: 28px overhanging
 * the corner, the original San Marco Coffee popup look. Below WCAG AAA
 * mobile touch-target (44x44) but passes WCAG AA (24x24) easily. */
.smc-quickcart--close-small .smc-quickcart__close {
    top: -10px;
    right: -10px;
    width: 28px;
    height: 28px;
    font-size: 16px;
}

/* "large" variant - 44x44 touch target meets WCAG AAA Success Criterion
 * 2.5.5 (Target Size). Worth turning on if customer base uses phones in
 * conditions where fingers may be imprecise (gloves, motion, smaller
 * screens). The button still overhangs but uses a smaller offset because
 * a larger circle would otherwise sit too far outside the modal frame. */
.smc-quickcart--close-large .smc-quickcart__close {
    top: -16px;
    right: -16px;
    width: 44px;
    height: 44px;
    font-size: 22px;
}

.smc-quickcart__body {
    padding: var(--smc-qc-padding);
    overflow-y: auto;
    flex: 1 1 auto;
}

/* Visually-hidden live region (announced by SR; not shown). */
.smc-quickcart__live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- Popup content ------------------------------------------------------- */

.smc-quickcart-popup-heading {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--smc-qc-text);
}

.smc-quickcart-popup-body {
    text-align: center;
}

/* ---- Single-product popup body ----------------------------------------- */

/* Center single-product info and use the full modal width to give the
 * image room to breathe (matches the 1.5.5 single-add visual). */
.smc-quickcart-popup-info {
    text-align: center;
}

.smc-quickcart-popup-image {
    margin: 0 0 0.75rem;
    text-align: center;
}
.smc-quickcart-popup-image img {
    max-width: 200px;
    max-height: 200px;
    width: auto;
    height: auto;
    border-radius: var(--smc-qc-radius-sm);
}

.smc-quickcart-popup-title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--smc-qc-text);
    text-align: center;
}

.smc-quickcart-popup-info .qty-in-cart,
.smc-quickcart-popup-info .qty-max {
    margin: 0.25rem 0 0.75rem;
    font-size: 0.95rem;
    color: var(--smc-qc-text-muted);
    text-align: center;
}

/* Attribute list - render as plain centered lines (matches 1.5.5 layout:
 * "Grind-Whole Bean", "Type-Regular", etc.). The list semantics stay (good
 * for screen readers) but the visual collapses to plain text rows. */
.smc-quickcart-popup-info .attr_list,
.smc-quickcart-itemcart-meta .attr_list {
    list-style: none;
    margin: 0.75rem auto 0;
    padding: 0;
    display: inline-block;
    text-align: left;
}
.smc-quickcart-popup-info .attr_list li,
.smc-quickcart-itemcart-meta .attr_list li {
    margin: 0.2rem 0;
    font-size: 0.95rem;
    color: var(--smc-qc-text);
    line-height: 1.4;
}
.smc-quickcart-popup-info .attr_list .attr-opt,
.smc-quickcart-itemcart-meta .attr_list .attr-opt {
    font-weight: 600;
    color: var(--smc-qc-text);
}
.smc-quickcart-popup-info .attr_list .attr-sep,
.smc-quickcart-itemcart-meta .attr_list .attr-sep {
    margin: 0 0.25rem;
    color: var(--smc-qc-text-muted);
}

/* ---- Multi-add list ----------------------------------------------------- */

.smc-quickcart-popup-heading {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--smc-qc-text);
    text-align: center;
}

.smc-quickcart-itemcart-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.smc-quickcart .smc-quickcart-itemcart-item {
    position: relative;
    display: flex;
    gap: 0.6rem;
    align-items: center;
    padding: 0.5rem 0.6rem 0.5rem 1.85rem;
    margin-bottom: 0.35rem;
    background-color: var(--smc-qc-success-bg);
    border-radius: var(--smc-qc-radius-sm);
    background-repeat: no-repeat;
    background-position: 0.5rem 50%;
    background-size: 1rem 1rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232d7a3e'><path d='M10 0a10 10 0 1 0 0 20A10 10 0 0 0 10 0zm5.7 7.7l-7 7a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.4L8 12.6l6.3-6.3a1 1 0 0 1 1.4 1.4z'/></svg>");
    list-style: none;
}

/* Failed-add row gets the error icon and a red wash. */
.smc-quickcart .smc-quickcart-itemcart-item--error {
    background-color: var(--smc-qc-error-bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238b1a1a'><path d='M10 0a10 10 0 1 0 0 20A10 10 0 0 0 10 0zm1 14H9v-2h2v2zm0-4H9V5h2v5z'/></svg>");
}

.smc-quickcart .smc-quickcart-itemcart-image {
    flex: 0 0 60px;
}
.smc-quickcart .smc-quickcart-itemcart-image img {
    width: 60px;
    height: auto;
    border-radius: var(--smc-qc-radius-sm);
    background: transparent;
}

.smc-quickcart .smc-quickcart-itemcart-content {
    flex: 1 1 auto;
    text-align: left;
    min-width: 0;
}

/* Title: rendered as <div> (not <h4>) so theme heading rules can't touch it.
 * High-specificity prefix locks the size at 15px regardless of inherited
 * theme cascades. Resets margin/padding/font-weight to known values. */
.smc-quickcart .smc-quickcart-itemcart-item .smc-quickcart-itemcart-title {
    margin: 0 0 0.2rem;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--smc-qc-text);
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
}

/* Inside multi-add rows, attributes stack vertically with a hyphen between
 * label and value (Grind-Whole Bean, Type-Regular, ...). Matches 1.5.5
 * reference. Hide .attr-sep and inject "-" via .attr-opt::after. All rules
 * scoped under .smc-quickcart so theme ul/li styles don't bleed through. */
.smc-quickcart .smc-quickcart-itemcart-item .attr_list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
    background: none;
}
.smc-quickcart .smc-quickcart-itemcart-item .attr_list li {
    display: block;
    font-size: 12px;
    margin: 0;
    padding: 0;
    color: var(--smc-qc-text-muted);
    line-height: 1.35;
    list-style: none;
    background: none;
    text-indent: 0;
}
.smc-quickcart .smc-quickcart-itemcart-item .attr_list li::before {
    content: none;
}
.smc-quickcart .smc-quickcart-itemcart-item .attr_list .attr-opt {
    font-weight: 600;
    color: var(--smc-qc-text);
}
.smc-quickcart .smc-quickcart-itemcart-item .attr_list .attr-opt::after {
    content: "-";
    font-weight: normal;
    color: var(--smc-qc-text-muted);
    margin: 0 0.1em;
}
.smc-quickcart .smc-quickcart-itemcart-item .attr_list .attr-sep {
    display: none;
}
.smc-quickcart .smc-quickcart-itemcart-item .attr_list .attr-val {
    color: var(--smc-qc-text-muted);
    font-weight: normal;
}

/* Per-row inline message (e.g. "out of stock" on a single failed product).
 * Stripped of its own success-bg since the parent row already carries it. */
.smc-quickcart-itemcart-msg .messages,
.smc-quickcart-itemcart-msg .messages li {
    list-style: none;
    margin: 0;
    padding: 0;
    background: transparent;
}
.smc-quickcart-itemcart-msg .messages li {
    padding-left: 0;
    background-image: none;
}

/* ---- Status messages ---------------------------------------------------- */

.smc-quickcart .messages {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}
.smc-quickcart .messages li {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0.75rem 0.875rem 0.75rem 2.5rem;
    border-radius: var(--smc-qc-radius-sm);
    font-size: 0.95rem;
    line-height: 1.4;
    background-repeat: no-repeat;
    background-position: 0.75rem center;
    background-size: 1.25rem 1.25rem;
}
.smc-quickcart .messages li:last-child { margin-bottom: 0; }

/* Green check circle icon (matches 1.5.5 site visual). Inline SVG so the
 * icon ships with the CSS - no extra HTTP request. */
.smc-quickcart .messages .success-msg {
    background-color: var(--smc-qc-success-bg);
    color: var(--smc-qc-success-text);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232d7a3e'><path d='M10 0a10 10 0 1 0 0 20A10 10 0 0 0 10 0zm5.7 7.7l-7 7a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.4L8 12.6l6.3-6.3a1 1 0 0 1 1.4 1.4z'/></svg>");
}
.smc-quickcart .messages .error-msg {
    background-color: var(--smc-qc-error-bg);
    color: var(--smc-qc-error-text);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238b1a1a'><path d='M10 0a10 10 0 1 0 0 20A10 10 0 0 0 10 0zm1 14H9v-2h2v2zm0-4H9V5h2v5z'/></svg>");
}

/* ---- Action buttons ----------------------------------------------------- */

.smc-quickcart-popup-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: var(--smc-qc-padding);
    padding-top: var(--smc-qc-padding);
    border-top: 1px solid var(--smc-qc-border);
    justify-content: center;
    flex-wrap: wrap;
}

.smc-quickcart-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    min-width: 130px;
    padding: 0.5rem 1.1rem;
    border-radius: var(--smc-qc-radius-sm);
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* Primary = "Shopping Cart" / "View Cart". Slate navy from SMC tokens. */
.smc-quickcart-action--primary {
    background: var(--smc-qc-accent);
    color: var(--smc-qc-accent-contrast);
}
.smc-quickcart-action--primary:hover {
    background: var(--smc-qc-accent-hover);
    color: var(--smc-qc-accent-contrast);
    text-decoration: none;
}

/* Secondary = "Continue Shopping". Outlined green: white bg, green text,
 * green border. Visually paired with primary but clearly secondary. */
.smc-quickcart-action--secondary {
    background: var(--smc-qc-secondary);
    color: var(--smc-qc-secondary-text);
    border-color: var(--smc-qc-secondary-border);
}
.smc-quickcart-action--secondary:hover {
    background: var(--smc-qc-secondary-hover);
    border-color: var(--smc-qc-secondary-border);
    color: var(--smc-qc-secondary-text);
    text-decoration: none;
}

.smc-quickcart-action:focus-visible {
    outline: 2px solid var(--smc-qc-focus-ring);
    outline-offset: 2px;
}

/* ---- Trigger button (the catalog add-to-cart button) -------------------- */
/*
 * Intentionally minimal so the host theme's button style (.btn, .btn-primary,
 * etc.) takes precedence when applied via the $extra_class argument to
 * smc_quickcart_button(). When NO theme class is passed, this provides a
 * sensible default.
 */
.smc-quickcart-trigger {
    display: inline-block;
    cursor: pointer;
    font: inherit;
}

/* ---- Quick-options modal body ------------------------------------------ */

.smc-quickcart-options-product {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 480px) {
    .smc-quickcart-options-product { grid-template-columns: 1fr; }
}

.smc-quickcart-options-image img { max-width: 100%; height: auto; border-radius: var(--smc-qc-radius-sm); }

.smc-quickcart-options-name { margin: 0 0 0.5rem; font-size: 1.05rem; }
.smc-quickcart-options-availability,
.smc-quickcart-options-model { margin: 0 0 0.25rem; font-size: 0.875rem; color: var(--smc-qc-text-muted); }
.smc-quickcart-options-availability .lbl,
.smc-quickcart-options-model .lbl { font-weight: 600; color: var(--smc-qc-text); margin-right: 0.25rem; }
.smc-quickcart-options-availability .in-stock { color: var(--smc-qc-success-text); }
.smc-quickcart-options-availability .out-stock { color: var(--smc-qc-error-text); }
.smc-quickcart-options-price { margin: 0.5rem 0; font-size: 1.1rem; font-weight: 700; }

.smc-quickcart-options-attrs { margin: 0.75rem 0; }

.smc-quickcart-options-action {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--smc-qc-border);
}

.smc-quickcart-options-qty {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 0.75rem;
}
.smc-quickcart-options-qty label { font-weight: 600; }
.smc-quickcart-options-qty input[type="number"] {
    width: 4rem;
    text-align: center;
    padding: 0.375rem;
    border: 1px solid var(--smc-qc-border);
    border-radius: var(--smc-qc-radius-sm);
    font: inherit;
}
.smc-quickcart-options-qty-stepper { display: inline-flex; flex-direction: column; gap: 2px; }
.smc-quickcart-step {
    width: 28px;
    min-height: 22px;
    padding: 0;
    border: 1px solid var(--smc-qc-border);
    background: var(--smc-qc-surface-2);
    cursor: pointer;
    border-radius: var(--smc-qc-radius-sm);
    font-weight: 700;
    line-height: 1;
}
.smc-quickcart-step:hover { background: var(--smc-qc-surface); }
.smc-quickcart-step:focus-visible { outline: 2px solid var(--smc-qc-focus-ring); outline-offset: 1px; }

/* ---- Loading state ------------------------------------------------------ */

/* Subtle loading state. Only applied after a 250ms delay (see postAction
 * in JS) so fast roundtrips don't flash. Uses cursor change only - no
 * fullscreen wash, which felt heavy and made the page seem broken during
 * the cold-start lag on idle test boxes. */
body.smc-quickcart-loading { cursor: progress; }
body.smc-quickcart-loading * { cursor: progress; }

/* ---- Body scroll lock when modal open ----------------------------------- */

body.smc-quickcart-open {
    overflow: hidden;
}

/* ---- Animations --------------------------------------------------------- */

@keyframes smc-qc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes smc-qc-pop-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

@media (prefers-reduced-motion: reduce) {
    .smc-quickcart__overlay,
    .smc-quickcart__dialog {
        animation: none !important;
    }
}
.smc-quickcart--no-motion .smc-quickcart__overlay,
.smc-quickcart--no-motion .smc-quickcart__dialog {
    animation: none !important;
}

/* =============================================================================
   v1.1.0 - Wishlist context modifier
   -----------------------------------------------------------------------------
   When the modal opens from a wishlist-originated action, JS adds the
   .smc-quickcart--wishlist class to the modal root (driven by the server-
   rendered data-smc-quickcart-context="wishlist" wrapper inside popcontent).
   This block overrides ONLY the color tokens used for the action buttons,
   success bar accents, and focus ring. All sizing, spacing, layout, and
   accessibility behavior is identical to the default green-theme modal.

   The blue tokens reference the same site-wide SMC palette used by all
   wishlist UI (--smc-account for chrome, --smc-action-hover for the
   bright accent). If those vars aren't loaded for some reason the
   hardcoded fallbacks keep the modal usable. Clicking back to wishlist
   feels visually consistent with where the customer came from.

   Wording is swapped server-side via the wishlist-specific language
   constants (SMC_QUICKCART_SUCCESS_WISHLIST_*, _BUTTON_CONTINUE_WISHLIST).
   ============================================================================= */
.smc-quickcart.smc-quickcart--wishlist {
    /* Primary action (Shopping Cart) - slate-navy at rest, bright blue
     * hover. Matches the site-wide Add-to-Cart pattern in chrome contexts
     * so the customer reads it as "go to the standard cart action" rather
     * than the spend-money green of the regular cart popup. */
    --smc-qc-accent:           var(--smc-account, #15293f);
    --smc-qc-accent-hover:     var(--smc-action-hover, #007bff);
    --smc-qc-accent-contrast:  #ffffff;

    /* Secondary action (Back to Wishlist) - outlined blue. */
    --smc-qc-secondary:        #ffffff;
    --smc-qc-secondary-hover:  #eff7ff;
    --smc-qc-secondary-text:   var(--smc-account, #15293f);
    --smc-qc-secondary-border: var(--smc-account, #15293f);

    /* Success accent - softer blue bar instead of green. Keeps the
     * affordance ("something just happened") without implying purchase
     * commitment. */
    --smc-qc-success-bg:       #e8f1fb;
    --smc-qc-success-text:     #15293f;
    --smc-qc-success-icon:     var(--smc-action-hover, #007bff);

    /* Focus ring stays the bright blue (same as default cart popup -
     * it's an accessibility token, not a brand token). */
    --smc-qc-focus-ring:       var(--smc-action-hover, #007bff);
}

/* Override the success-msg checkmark icon when in wishlist context. The
 * SVG background-image in the base .success-msg rule has the green
 * #2d7a3e color baked into the data URL (not parameterizable via CSS
 * vars), so we need a parallel rule with a blue-filled SVG. Specificity:
 * .smc-quickcart.smc-quickcart--wishlist .messages .success-msg is one
 * class higher than the base, so this wins. */
.smc-quickcart.smc-quickcart--wishlist .messages .success-msg {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23007bff'><path d='M10 0a10 10 0 1 0 0 20A10 10 0 0 0 10 0zm5.7 7.7l-7 7a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.4L8 12.6l6.3-6.3a1 1 0 0 1 1.4 1.4z'/></svg>");
}

/* =============================================================================
   v1.1.0 - Wishlist modal "Don't ask again" checkbox
   -----------------------------------------------------------------------------
   This rule lives in the QuickCart CSS because the checkbox itself is only
   rendered when QuickCart wishlist integration is enabled. Keeping the
   styling co-located with the toggle keeps both controlled by the same
   plugin's lifecycle.

   Specificity note: the wishlist modal lives at #smc-wl-modal-overlay and
   has its own CSS that may hide bare input[type="checkbox"] elements (used
   for product-attribute checkboxes in other contexts). We scope rules with
   the overlay id + !important to defeat any inherited display:none. The
   #smc-wl-remember-check id selector also provides a strong specificity
   anchor independent of the parent.
   ============================================================================= */
#smc-wl-modal-overlay .smc-wl-remember-line {
    display: flex !important;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--smc-qc-border, #e2e8f0);
    font-size: 0.85rem;
    color: var(--smc-qc-text-muted, #4a5568);
    cursor: pointer;
    line-height: 1.4;
}

#smc-wl-modal-overlay .smc-wl-remember-line input[type="checkbox"],
#smc-wl-remember-check {
    /* Defeat any global rule hiding checkboxes inside the modal. The
     * appearance: auto + width/height: auto are belt-and-suspenders for
     * any reset rule that zeroed out form-element dimensions. */
    display: inline-block !important;
    visibility: visible !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0.2rem 0 0 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    position: static !important;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--smc-action-hover, #007bff);
}

#smc-wl-modal-overlay .smc-wl-remember-line span {
    flex: 1;
}

/* The modal popup body. When inside an add-to-wishlist confirmation
 * (wishlist-list-add response), this gets the wishlist context attribute.
 * The .smc-quickcart-popup-message paragraph isn't styled by default; add
 * a minimal centered presentation that matches the existing popup-title. */
.smc-quickcart-popup-message {
    text-align: center;
    margin: 0.5rem 0 1rem;
    color: var(--smc-qc-text, #15293f);
    font-size: 0.95rem;
}

/* =============================================================================
   v1.1.0 - Quick-add active banner on wishlists management page
   -----------------------------------------------------------------------------
   The banner only appears when SMC_QUICKCART_WISHLIST_INTEGRATION is on AND
   the customer has a session-stored quick-add list. It surfaces the active
   state (which list is auto-receiving adds) and gives a one-click clear.

   Visual treatment: soft blue tinted card matching the wishlist context
   color tokens, with the check icon in bright blue to signal "active /
   working" rather than info or warning. Sits at the top of the page,
   above the "Create a New List" section.
   ============================================================================= */
.smc-wl-quickadd-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 0 0 16px 0;
    background-color: #e8f1fb;
    border: 1px solid #b8d4ef;
    border-left: 4px solid #007bff;
    border-radius: 4px;
    color: #15293f;
}

.smc-wl-quickadd-banner-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: #007bff;
    line-height: 1;
}

.smc-wl-quickadd-banner-body {
    flex: 1;
    line-height: 1.35;
    font-size: 13px;
}

.smc-wl-quickadd-banner-body strong {
    display: block;
    font-size: 13px;
    margin-bottom: 1px;
    color: #15293f;
}

.smc-wl-quickadd-banner-body span strong {
    /* Inline list-name emphasis inside the body text - reset display
     * to inline since the outer rule made strong block-level. */
    display: inline;
    font-size: inherit;
    margin: 0;
}

.smc-wl-quickadd-banner-action {
    flex-shrink: 0;
}

.smc-wl-quickadd-banner-action .btn {
    white-space: nowrap;
    padding: 5px 12px;
    font-size: 12px;
}

/* Mobile: stack the action below the body */
@media (max-width: 600px) {
    .smc-wl-quickadd-banner {
        flex-wrap: wrap;
    }
    .smc-wl-quickadd-banner-body {
        flex-basis: calc(100% - 3rem);
    }
    .smc-wl-quickadd-banner-action {
        flex-basis: 100%;
        margin-top: 0.5rem;
        text-align: right;
    }
}