/**
 * Product Compare – Frontend Styles
 *
 * Same palette as the Collection Guide, so the two read as one piece:
 *   Total's Customizer properties where they exist
 *     --wpex-body-color, --wpex-woo-price-color, --wpex-surface-1 (#f1edea)
 *   and the Sisyphus-Total child theme's hardcoded colours, mirrored once
 *     #c1bcb8 hairlines, #e5e1dc image wells, #595047 secondary text,
 *     #be8154 "selected" brass
 *   plus the concept's saffron for the primary action (as on the guide's
 *   Explore button), with black text for contrast.
 *
 * The tray and dialog are printed in the footer, outside .wccg, so the
 * tokens are declared on every root this plugin renders.
 */

.wcpc,
.wcpc-toggle,
.wcpc-admin-notice {
    --wcpc-ink: var(--wpex-body-color, #000);
    --wcpc-muted: #595047;
    --wcpc-line: #c1bcb8;
    --wcpc-well: #e5e1dc;
    --wcpc-accent: #be8154;
    --wcpc-paper: var(--wpex-surface-1, #f1edea);
    --wcpc-price: var(--wpex-woo-price-color, #707070);
    --wcpc-cta: #f08f00;
    --wcpc-cta-hover: #d98000;
    --wcpc-on-cta: #000;
}

.wcpc [hidden] {
    display: none !important;
}

/* Visually hidden, still read by screen readers. */
.wcpc-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Compare button ─── */
.wcpc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    appearance: none;
    margin: 0;
    padding: 7px 14px;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--wcpc-ink);
    background: transparent;
    border: 1px solid var(--wcpc-line);
    /* The theme's button radius, so its outline matches the buttons it
       sits beside (the guide's "Shop now" and Explore). */
    border-radius: var(--wpex-btn-border-radius, 6px);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.wcpc-toggle:hover {
    border-color: var(--wcpc-ink);
}
.wcpc-toggle:focus-visible {
    outline: 2px solid var(--wcpc-accent);
    outline-offset: 2px;
}
.wcpc-toggle[aria-pressed="true"] {
    background: #fff;
    border-color: var(--wcpc-accent);
    box-shadow: inset 0 0 0 1px var(--wcpc-accent);
}

/* + when off, ✓ when on — drawn, so no font glyph can go missing. */
.wcpc-toggle-icon {
    position: relative;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
}
.wcpc-toggle-icon::before,
.wcpc-toggle-icon::after {
    content: "";
    position: absolute;
    background: currentColor;
}
.wcpc-toggle-icon::before {
    left: 4px;
    top: 0;
    width: 2px;
    height: 10px;
}
.wcpc-toggle-icon::after {
    left: 0;
    top: 4px;
    width: 10px;
    height: 2px;
}
.wcpc-toggle[aria-pressed="true"] .wcpc-toggle-icon::before,
.wcpc-toggle[aria-pressed="true"] .wcpc-toggle-icon::after {
    background: none;
}
.wcpc-toggle[aria-pressed="true"] .wcpc-toggle-icon::after {
    left: 1px;
    top: 0;
    width: 4px;
    height: 8px;
    border: solid var(--wcpc-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* In the guide's hero, sit level with the Explore button. */
.wcpc-toggle--hero {
    padding: .75em 1.4em;
    font-size: 14px;
}

/* On the guide's grid cards, the same outline as the card button beside
   it ("Shop now"): its type size and padding, less 1px each way for this
   button's border, so the two are exactly the same height. */
.wcpc-toggle--card {
    padding: calc(.6em - 1px) 1.2em;
    font-size: 13px;
    letter-spacing: .06em;
}

/* ─── Tray ─── */
.wcpc-tray {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    background: #000;
    color: #fff;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .2);
}

.wcpc-tray-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    max-width: var(--wpex-container-width, 1300px);
    margin: 0 auto;
    padding: 12px 16px;
}

.wcpc .wcpc-tray-text p {
    margin: 0;
    line-height: 1.4;
}
.wcpc .wcpc-tray-count {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.wcpc .wcpc-tray-names {
    font-size: 14px;
    font-weight: 300;
    color: #d5d1ce;
}

.wcpc-tray-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
}

.wcpc .wcpc-clear {
    appearance: none;
    background: none;
    border: 0;
    padding: 8px 4px;
    font: inherit;
    font-size: 14px;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.wcpc .wcpc-open {
    --wpex-btn-bg: var(--wcpc-cta);
    --wpex-btn-color: var(--wcpc-on-cta);
    --wpex-hover-btn-bg: var(--wcpc-cta-hover);
    --wpex-hover-btn-color: var(--wcpc-on-cta);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .7em 1.5em;
}
.wcpc .wcpc-open:disabled {
    --wpex-btn-bg: #5b5249;
    --wpex-hover-btn-bg: #5b5249;
    --wpex-btn-color: #fff;
    --wpex-hover-btn-color: #fff;
    cursor: not-allowed;
}
.wcpc .wcpc-clear:focus-visible,
.wcpc .wcpc-open:focus-visible {
    outline: 2px solid var(--wcpc-cta);
    outline-offset: 2px;
}

/* Keep the tray from covering the end of the page. */
html.wcpc-has-tray body {
    padding-bottom: 76px;
}

@media (max-width: 767px) {
    .wcpc-tray-inner {
        flex-wrap: wrap;
    }
    .wcpc-tray-actions {
        width: 100%;
        justify-content: space-between;
    }
    html.wcpc-has-tray body {
        padding-bottom: 120px;
    }
}

/* ─── Dialog ─── */
html.wcpc-dialog-open {
    overflow: hidden;
}

.wcpc-dialog {
    width: min(1100px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    padding: 0;
    color: var(--wcpc-ink);
    background: var(--wcpc-paper);
    border: 1px solid var(--wcpc-line);
    border-radius: 0;
}
.wcpc-dialog::backdrop {
    background: rgba(0, 0, 0, .55);
}

.wcpc-dialog-head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    background: var(--wcpc-paper);
    border-bottom: 1px solid var(--wcpc-line);
}

.wcpc .wcpc-dialog-title {
    margin: 0;
    font-size: clamp(24px, 1.25rem + 1vw, 32px);
    font-weight: 300;
    line-height: 1.1;
    color: var(--wcpc-ink);
}

.wcpc .wcpc-close {
    appearance: none;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 30px;
    line-height: 1;
    color: var(--wcpc-ink);
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
}
.wcpc .wcpc-close:hover {
    border-color: var(--wcpc-line);
}
.wcpc .wcpc-close:focus-visible {
    outline: 2px solid var(--wcpc-accent);
    outline-offset: 2px;
}

.wcpc-dialog-body {
    padding: 8px 24px 24px;
}

.wcpc .wcpc-loading,
.wcpc .wcpc-error,
.wcpc .wcpc-empty {
    margin: 24px 0;
    color: var(--wcpc-muted);
}

/* ─── Comparison table ───
 * Selectors go through .wcpc-dialog so they outrank the theme's table
 * rules (the Customizer gives thead a black background).
 */
.wcpc-table-wrap {
    overflow-x: auto;
}
.wcpc-table-wrap:focus-visible {
    outline: 2px solid var(--wcpc-accent);
    outline-offset: 2px;
}

.wcpc-dialog .wcpc-table {
    /* Total paints thead from these (the Customizer sets it black). */
    --wpex-table-thead-bg: transparent;
    --wpex-table-thead-color: var(--wcpc-ink);
    --wpex-table-th-color: var(--wcpc-ink);
    --wpex-table-cell-border-color: var(--wcpc-line);

    width: 100%;
    min-width: 560px;
    margin: 0;
    /* Separate, not collapse: Chrome drops borders on sticky cells in a
       collapsed table (the row labels stick while scrolling sideways). */
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    background: none;
    border: 0;
}
.wcpc-dialog .wcpc-table thead {
    background: none;
}

.wcpc-dialog .wcpc-table th,
.wcpc-dialog .wcpc-table td {
    padding: 14px 12px;
    text-align: left;
    vertical-align: top;
    color: var(--wcpc-ink);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--wcpc-line);
    font-size: 15px;
    line-height: 1.5;
}

.wcpc-dialog .wcpc-table .wcpc-corner,
.wcpc-dialog .wcpc-table th[scope="row"] {
    width: 150px;
}

.wcpc-dialog .wcpc-table th[scope="row"] {
    background: var(--wcpc-paper);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wcpc-muted);
}

.wcpc-dialog .wcpc-table thead th {
    font-weight: 400;
    border-bottom-color: var(--wcpc-ink);
}
.wcpc-dialog .wcpc-table thead .wcpc-corner {
    border-bottom-color: var(--wcpc-ink);
}

/*
 * The square comes from the image itself, not from its frame. A frame with
 * aspect-ratio and an image at height: 100% works in Chrome, but Safari
 * does not resolve that percentage: the image comes out taller than the
 * frame, gets scaled up to fill it and cropped — zoomed in and off-centre
 * on iPhones. `contain` on white shows the whole product (the photos are
 * shot on white), which is what a side-by-side comparison needs.
 */
.wcpc-col-media {
    display: block;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid var(--wcpc-line);
}
.wcpc .wcpc-col-media img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.wcpc .wcpc-col-name {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .03em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--wcpc-ink);
    text-decoration: none;
}
.wcpc .wcpc-col-name:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wcpc .wcpc-remove {
    appearance: none;
    padding: 4px 0;
    font: inherit;
    font-size: 13px;
    color: var(--wcpc-muted);
    background: none;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.wcpc .wcpc-remove:focus-visible {
    outline: 2px solid var(--wcpc-accent);
    outline-offset: 2px;
}

.wcpc-dialog .wcpc-table .wcpc-price {
    font-weight: 300;
    color: var(--wcpc-price);
}

.wcpc-none {
    color: var(--wcpc-line);
}

.wcpc-dialog .wcpc-table .wcpc-actions-row td {
    border-bottom: 0;
    padding-top: 20px;
}

.wcpc .wcpc-view {
    --wpex-btn-bg: var(--wcpc-cta);
    --wpex-btn-color: var(--wcpc-on-cta);
    --wpex-hover-btn-bg: var(--wcpc-cta-hover);
    --wpex-hover-btn-color: var(--wcpc-on-cta);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 14px;
    padding: .7em 1.2em;
}
.wcpc .wcpc-view:focus-visible {
    outline: 2px solid var(--wcpc-accent);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .wcpc-dialog {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
    }
    .wcpc-dialog-head {
        padding: 12px 16px;
    }
    .wcpc-dialog-body {
        padding: 4px 16px 16px;
    }
    .wcpc-dialog .wcpc-table .wcpc-corner,
    .wcpc-dialog .wcpc-table th[scope="row"] {
        width: 104px;
    }
    /* Only phones scroll the table sideways, so only they need the row
       labels pinned. (Sticky cells also make Chrome drop the odd row
       border, which is not worth paying for where nothing scrolls.) */
    .wcpc-dialog .wcpc-table th[scope="row"] {
        position: sticky;
        left: 0;
        z-index: 1;
    }
    .wcpc-dialog .wcpc-table th,
    .wcpc-dialog .wcpc-table td {
        font-size: 14px;
        padding: 12px 10px;
    }
}

/* ─── Store-manager notice ─── */
.wcpc-admin-notice {
    display: inline-block;
    padding: 6px 10px;
    font-size: 13px;
    color: #5b4a00;
    background: #fff8e5;
    border-left: 3px solid #ffb900;
}

@media (prefers-reduced-motion: reduce) {
    .wcpc-toggle {
        transition: none;
    }
}