/* ═══════════════════════════════════════════════════════
   Image Comparison Slider — front-end styles
   ═══════════════════════════════════════════════════════ */

/* ── Base container ──────────────────────────────────── */

.ems-compare-container {
    position:        relative;
    width:           100%;
    height:          400px;
    overflow:        hidden;
    background:      #222;
    user-select:     none;
    -webkit-user-select: none;
}

.ems-compare-img {
    position:   absolute;
    left:       0;
    top:        0;
    width:      100%;
    height:     100% !important;
    object-fit: cover;
    display:    block;
}

.ems-compare-img-top {
    clip-path: inset(0 0 0 50%);
}

/* ── Contain режим: рамката = снимката ──
   Долната снимка е в потока и ОПРЕДЕЛЯ размера на контейнера
   (никакви сиви полета, за каквато и да е пропорция). Height контролът
   става max-height на снимката (виж селектора в widget-а). */
[class*="ics-fit-contain"] .ems-compare-container,
.ics-fit-contain .ems-compare-container {
    height: auto !important;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
}
[class*="ics-fit-contain"] .ems-compare-img-bottom,
.ics-fit-contain .ems-compare-img-bottom {
    position: relative;
    width: auto;
    max-width: 100%;
    height: auto !important;
    object-fit: unset;
}

/* ── Shared divider structure ────────────────────────── */

.ems-compare-divider {
    position:        absolute;
    top:             0;
    left:            50%;
    width:           48px;
    height:          100%;
    z-index:         10;
    cursor:          ew-resize;
    display:         flex;
    align-items:     center;
    justify-content: center;
    touch-action:    none;
    transform:       translateX(-50%);
    transition:      none;
}

/* vertical line via ::before */
.ems-compare-divider::before {
    content:        '';
    position:       absolute;
    left:           50%;
    top:            0;
    transform:      translateX(-50%);
    width:          4px;
    height:         100%;
    border-radius:  2px;
    z-index:        1;
    pointer-events: none;
    background:     rgba(255, 255, 255, 0.75);
}

.ems-compare-divider-circle {
    position:        relative;
    z-index:         2;
    width:           40px;
    height:          40px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    transition:      background 0.15s, border-color 0.15s;
    /* default overridden per design */
    background:      #fff;
    border:          2px solid #1976d2;
    box-shadow:      0 2px 10px rgba(25, 118, 210, 0.55);
}

.ems-compare-divider svg {
    width:   20px;
    height:  20px;
    display: block;
    flex-shrink: 0;
}

.ems-compare-divider svg path {
    stroke:         #1976d2;
    stroke-width:   2.5;
    stroke-linecap: round;
    fill:           none;
    transition:     stroke 0.15s;
}

/* ═══════════════════════════════════════════════════════
   MINIMALIST ARROW VARIANTS
   Всички използват чист бял кръг — само иконът се различава
   ═══════════════════════════════════════════════════════ */

/* Shared base for all 4 minimalist arrow designs */
.ics-design-arrow-long .ems-compare-divider::before,
.ics-design-chevron-only .ems-compare-divider::before,
.ics-design-dots .ems-compare-divider::before,
.ics-design-bars .ems-compare-divider::before {
    background:    rgba(255, 255, 255, 0.72);
    width:         2px;
    border-radius: 1px;
    box-shadow:    none;
}

.ics-design-arrow-long .ems-compare-divider-circle,
.ics-design-chevron-only .ems-compare-divider-circle,
.ics-design-dots .ems-compare-divider-circle,
.ics-design-bars .ems-compare-divider-circle {
    width:         38px;
    height:        38px;
    border-radius: 50%;
    background:    rgba(255, 255, 255, 0.95);
    border:        none;
    box-shadow:    0 1px 8px rgba(0, 0, 0, 0.22);
    transition:    background 0.14s, box-shadow 0.14s;
}

.ics-design-arrow-long .ems-compare-divider:hover .ems-compare-divider-circle,
.ics-design-chevron-only .ems-compare-divider:hover .ems-compare-divider-circle,
.ics-design-dots .ems-compare-divider:hover .ems-compare-divider-circle,
.ics-design-bars .ems-compare-divider:hover .ems-compare-divider-circle {
    background: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.32);
}

/* ── Arrow Long  ←———→  (full-width shaft) ── */
.ics-design-arrow-long .ems-compare-divider svg { width: 22px; height: 22px; }
.ics-design-arrow-long .ems-compare-divider svg path {
    stroke:       #222;
    stroke-width: 1.8;
}

/* ── Chevron Only  ‹  › ── */
.ics-design-chevron-only .ems-compare-divider svg { width: 20px; height: 20px; }
.ics-design-chevron-only .ems-compare-divider svg path {
    stroke:       #333;
    stroke-width: 2.2;
}

/* ── Dots  •  • ── */
.ics-design-dots .ems-compare-divider svg { width: 22px; height: 22px; }
.ics-design-dots .ems-compare-divider svg circle {
    fill: #333;
}

/* ── Bars  —  — ── */
.ics-design-bars .ems-compare-divider svg { width: 24px; height: 24px; }
.ics-design-bars .ems-compare-divider svg path {
    stroke:       #333;
    stroke-width: 2.4;
    stroke-linecap: round;
}

/* Elementor editor placeholder */
.ics-placeholder {
    padding:       24px;
    background:    #f5f5f5;
    text-align:    center;
    color:         #999;
    border:        2px dashed #ddd;
    border-radius: 4px;
    font-size:     14px;
}


/* ═══════════════════════════════════════════════════════
   DESIGN 1 — Classic  (default, blue circle + arrows)
   ═══════════════════════════════════════════════════════ */

.ics-design-classic .ems-compare-divider::before {
    background:    rgba(255, 255, 255, 0.75);
    width:         4px;
    border-radius: 2px;
}
.ics-design-classic .ems-compare-divider-circle {
    background:  #fff;
    border:      2px solid #1976d2;
    box-shadow:  0 2px 10px rgba(25, 118, 210, 0.55);
    width:       40px;
    height:      40px;
    border-radius: 50%;
}
.ics-design-classic .ems-compare-divider svg path { stroke: #1976d2; }
.ics-design-classic .ems-compare-divider:hover .ems-compare-divider-circle {
    background: #1976d2;
}
.ics-design-classic .ems-compare-divider:hover svg path { stroke: #fff; }


/* ═══════════════════════════════════════════════════════
   DESIGN 2 — Minimal  (1px frosted line, tiny glass dot)
   ═══════════════════════════════════════════════════════ */

.ics-design-minimal .ems-compare-divider::before {
    background:    rgba(255, 255, 255, 0.55);
    width:         1px;
    border-radius: 0;
    box-shadow:    none;
}
.ics-design-minimal .ems-compare-divider-circle {
    width:           28px;
    height:          28px;
    border-radius:   50%;
    background:      rgba(255, 255, 255, 0.18);
    border:          1px solid rgba(255, 255, 255, 0.75);
    box-shadow:      none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ics-design-minimal .ems-compare-divider svg { width: 13px; height: 13px; }
.ics-design-minimal .ems-compare-divider svg path {
    stroke:       rgba(255, 255, 255, 0.9);
    stroke-width: 2;
}
.ics-design-minimal .ems-compare-divider:hover .ems-compare-divider-circle {
    background: rgba(255, 255, 255, 0.32);
}


/* ═══════════════════════════════════════════════════════
   DESIGN 3 — Dark  (dark circle, white arrows)
   ═══════════════════════════════════════════════════════ */

.ics-design-dark .ems-compare-divider::before {
    background:    rgba(0, 0, 0, 0.55);
    width:         3px;
    border-radius: 1px;
    box-shadow:    0 0 0 1px rgba(255, 255, 255, 0.12);
}
.ics-design-dark .ems-compare-divider-circle {
    background:    #111;
    border:        2px solid #444;
    box-shadow:    0 2px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255,255,255,0.08);
    width:         40px;
    height:        40px;
    border-radius: 50%;
}
.ics-design-dark .ems-compare-divider svg path { stroke: #fff; stroke-width: 2.5; }
.ics-design-dark .ems-compare-divider:hover .ems-compare-divider-circle {
    background: #2a2a2a;
    border-color: #666;
}


/* ═══════════════════════════════════════════════════════
   DESIGN 4 — Bold  (thick amber line, large dark handle)
   ═══════════════════════════════════════════════════════ */

.ics-design-bold .ems-compare-divider::before {
    background:    #f59e0b;
    width:         6px;
    border-radius: 0;
    box-shadow:    0 0 12px rgba(245, 158, 11, 0.5);
}
.ics-design-bold .ems-compare-divider-circle {
    width:         50px;
    height:        50px;
    border-radius: 50%;
    background:    #111;
    border:        3px solid #f59e0b;
    box-shadow:    0 0 0 2px #111, 0 4px 16px rgba(0,0,0,0.5);
}
.ics-design-bold .ems-compare-divider svg { width: 24px; height: 24px; }
.ics-design-bold .ems-compare-divider svg path {
    stroke:       #f59e0b;
    stroke-width: 3;
}
.ics-design-bold .ems-compare-divider:hover .ems-compare-divider-circle {
    background: #f59e0b;
}
.ics-design-bold .ems-compare-divider:hover svg path { stroke: #111; }


/* ═══════════════════════════════════════════════════════
   DESIGN 5 — Neon  (glowing cyan line + circle)
   ═══════════════════════════════════════════════════════ */

.ics-design-neon .ems-compare-divider::before {
    background:    #00e5ff;
    width:         2px;
    border-radius: 0;
    box-shadow:    0 0 6px #00e5ff, 0 0 18px rgba(0, 229, 255, 0.6);
}
.ics-design-neon .ems-compare-divider-circle {
    width:         40px;
    height:        40px;
    border-radius: 50%;
    background:    #070b10;
    border:        2px solid #00e5ff;
    box-shadow:
        0 0 8px  #00e5ff,
        0 0 22px rgba(0, 229, 255, 0.4),
        inset 0 0 8px rgba(0, 229, 255, 0.12);
}
.ics-design-neon .ems-compare-divider svg path {
    stroke:  #00e5ff;
    filter:  drop-shadow(0 0 3px #00e5ff);
}
.ics-design-neon .ems-compare-divider:hover .ems-compare-divider-circle {
    background: rgba(0, 229, 255, 0.14);
}


/* ═══════════════════════════════════════════════════════
   DESIGN 6 — Pill  (capsule-shaped handle)
   ═══════════════════════════════════════════════════════ */

.ics-design-pill .ems-compare-divider::before {
    background:    rgba(255, 255, 255, 0.8);
    width:         2px;
    border-radius: 1px;
}
.ics-design-pill .ems-compare-divider-circle {
    width:         56px;
    height:        28px;
    border-radius: 14px;
    background:    #fff;
    border:        none;
    box-shadow:    0 2px 12px rgba(0, 0, 0, 0.3);
}
.ics-design-pill .ems-compare-divider svg { width: 22px; height: 16px; }
.ics-design-pill .ems-compare-divider svg path {
    stroke:       #333;
    stroke-width: 2.5;
}
.ics-design-pill .ems-compare-divider:hover .ems-compare-divider-circle {
    background: #222;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.ics-design-pill .ems-compare-divider:hover svg path { stroke: #fff; }