/**
 * 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;
}