/* ==================================================
   Shared before/after drag-to-compare slider component.
   Same markup/behavior as the homepage "Why Choose Us" slider
   (assets/js/home-choose.js drives both) -- extracted here so any
   page can drop it in without needing the rest of home-choose.css.
   ================================================== */
:root {
    --cmp-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
    --cmp-orange: #ff5e14;
    --cmp-ink: #14161a;
}

.amzy-compare,
.amzy-compare * {
    all: revert;
    box-sizing: border-box;
}

.amzy-compare {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3.3;
    border-radius: 20px;
    overflow: hidden;
    cursor: ew-resize;
    box-shadow: 0 20px 50px rgba(20, 22, 26, 0.14);
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
    font-family: var(--cmp-font);
}

.amzy-compare-stage { position: relative; width: 100%; height: 100%; }

.amzy-compare-wrap { position: absolute; inset: 0; overflow: hidden; }

.amzy-compare-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.amzy-compare-label {
    position: absolute;
    top: 16px;
    padding: 6px 16px;
    border-radius: 999px;
    font-family: var(--cmp-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #fff;
    z-index: 3;
}

.amzy-compare-label--before { left: 16px; background: rgba(20, 22, 26, 0.55); backdrop-filter: blur(4px); }
.amzy-compare-label--after { right: 16px; background: var(--cmp-orange); }

/* Full-height invisible track the handle slides along -- no visible
   seam line, only the round grip shows. */
.amzy-compare-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    z-index: 4;
    transform: translateX(-50%);
    pointer-events: none;
}

.amzy-compare-handle-btn {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    color: var(--cmp-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 6px 18px rgba(20, 22, 26, 0.25);
    cursor: ew-resize;
    pointer-events: auto;
    transition: background 0.2s ease, color 0.2s ease;
}

.amzy-compare-handle-btn:hover,
.amzy-compare.dragging .amzy-compare-handle-btn {
    background: var(--cmp-orange);
    color: #fff;
}

.amzy-compare-handle-btn:focus-visible {
    outline: 2px solid var(--cmp-orange);
    outline-offset: 3px;
}

/* Explicit Font Awesome declaration -- the all:revert boundary above
   strips the icon font/content the "fas" class would otherwise supply. */
.amzy-compare i {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-style: normal;
}

@media (max-width: 768px) {
    .amzy-compare { aspect-ratio: 4 / 3.4; border-radius: 14px; }
    .amzy-compare-label { top: 10px; padding: 5px 12px; font-size: 10.5px; }
    .amzy-compare-label--before { left: 10px; }
    .amzy-compare-label--after { right: 10px; }
    .amzy-compare-handle-btn { width: 36px; height: 36px; font-size: 12px; }
}