/**
 * ==========================================================================
 * Compare Drawer + listing-card "Compare" checkbox
 * ==========================================================================
 * Place in: public/css/compare-drawer.css
 * ==========================================================================
 */

/* ── Per-card "Compare" checkbox overlay (item.blade.php / product-card.blade.php) ── */
/* Sits on top of the product image so it adds zero height to the card. */

/* Same corner-ribbon technique as the legacy ".add-plus-icon" chart badge
   (a border-triangle, not an image) — anchored to .product-card (already
   position:relative, same containing block the legacy badge uses) so it
   sits flush on the card's true corner. Carries a real checkbox in its tip
   instead of a plain link+icon, and the ribbon itself brightens on hover
   and on selection, not just the tiny checkmark, for a clear state change. */
.compare-checkbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

/* The ribbon shape lives on its own pseudo-element, purely decorative.
   Border-box sizing collapses an element's own content-box to 0x0 when its
   borders alone account for the full width/height (the trick that draws
   the triangle) — if the checkbox were a child of an element built that
   way, its positioning anchor would land on the diagonal seam between the
   solid and transparent halves instead of inside the visible triangle.
   Keeping the triangle on ::before leaves the label a plain, unbordered
   50x50 box, so the checkbox below positions in ordinary, predictable
   coordinates within it. */
.compare-checkbox-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 50px;
    height: 50px;
    border-top: 25px solid #0A92CA;
    border-right: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid #0A92CA;
    pointer-events: none;
    transition: border-color 0.15s ease;
}

.compare-checkbox-overlay:hover::before,
.compare-checkbox-overlay.is-selected::before {
    border-top-color: #087aa8;
    border-left-color: #087aa8;
}

.compare-checkbox-overlay input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 7px;
    left: 7px;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 2px solid #ffffff;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.compare-checkbox-overlay input[type="checkbox"]:checked {
    border-color: #0A92CA;
}

.compare-checkbox-overlay input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    width: 5px;
    height: 9px;
    border: solid #0A92CA;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.compare-checkbox-overlay input[type="checkbox"]:focus-visible {
    outline: 2px solid #0A92CA;
    outline-offset: 2px;
}

/* Self-contained CSS tooltip — no JS plugin dependency (the site loads
   tooltipster's JS but ships no theme CSS for it, so it never renders). */
.compare-checkbox-overlay::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: max-content;
    max-width: 160px;
    background: rgba(20, 20, 20, 0.92);
    color: #ffffff;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 400;
    padding: 5px 8px;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 10;
}

.compare-checkbox-overlay:hover::after,
.compare-checkbox-overlay:focus-within::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ── Legacy "+COMPARE" chart badge, mirrored to the top-right corner ──
   The new Compare checkbox always stays top-left; on cards that also have
   the legacy badge, the legacy one moves to top-right instead, so the two
   never collide. */

a.add-product--right,
a.add-plus-icon--right {
    left: auto !important;
    right: 0 !important;
    border-left-color: transparent !important;
    border-right: 30px solid #000000 !important;
}

a.add-product--right i,
a.add-plus-icon--right i {
    left: auto;
    right: 0;
    transform: translate(140%, -110%);
}

/* ── Footer drawer ── */

.compare-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035; /* below Bootstrap modal (1050+), above page content */
    background: #ffffff;
    border-top: 1px solid #d8dee3;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.14);
    padding: 10px 20px;
    transform: translateY(0);
    transition: transform 0.25s ease;
}

.compare-drawer--hidden {
    transform: translateY(100%);
    visibility: hidden;
    pointer-events: none;
}

.compare-drawer__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

.compare-drawer__label {
    font-weight: 700;
    font-size: 14px;
    color: #1a1a1a;
    white-space: nowrap;
    flex-shrink: 0;
}

.compare-drawer__items {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    flex: 1 1 auto;
    padding: 2px 0;
}

.compare-drawer__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f4f6f8;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 4px 6px 4px 4px;
    flex-shrink: 0;
    max-width: 190px;
}

.compare-drawer__item-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 4px;
    background: #ffffff;
    flex-shrink: 0;
}

.compare-drawer__item-name {
    font-size: 12px;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
}

.compare-drawer__item-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border: none;
    background: transparent;
    color: #5a6570;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
}

.compare-drawer__item-remove:hover,
.compare-drawer__item-remove:focus-visible {
    background: #e1e5e9;
    color: #1a1a1a;
}

.compare-drawer__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.compare-drawer__status {
    font-size: 12px;
    color: #555555;
    white-space: nowrap;
}

.compare-drawer__clear {
    background: none;
    border: 1px solid #c9ced3;
    color: #333333;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 20px;
    min-height: 36px;
    cursor: pointer;
    white-space: nowrap;
}

.compare-drawer__clear:hover,
.compare-drawer__clear:focus-visible {
    background: #f1f3f5;
}

.compare-drawer__compare-btn {
    background: #076a94;
    border: none;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 22px;
    border-radius: 20px;
    min-height: 40px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.compare-drawer__compare-btn:hover:not(:disabled) {
    background: #065980;
}

.compare-drawer__compare-btn:disabled {
    background: #b7c3ca;
    cursor: not-allowed;
}

.compare-drawer :focus-visible {
    outline: 2px solid #0A92CA;
    outline-offset: 2px;
}

/* ── Mobile ── */

@media (max-width: 767px) {
    .compare-drawer {
        padding: 8px 10px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    .compare-drawer__inner {
        flex-wrap: wrap;
        gap: 8px;
    }

    .compare-drawer__label {
        display: none;
    }

    .compare-drawer__items {
        width: 100%;
        order: 1;
    }

    .compare-drawer__actions {
        width: 100%;
        order: 2;
        justify-content: space-between;
    }

    .compare-drawer__item {
        max-width: 150px;
    }

    .compare-drawer__item-name {
        max-width: 80px;
    }
}