/* ===================================================================
   TDS Solar — Compare Slider styles
   All selectors are namespaced under .cmpslider-root / #cmpslider-*
   so this can be dropped into an existing page without touching its
   global styles. The only two things that are ever a risk of leaking
   — the universal reset and page-level background — are scoped to
   .cmpslider-root instead of * / body.
   =================================================================== */

.cmpslider-root{
    /* ---- LEFT / WITH SOLAR (light, soothing) ---- */
    --cmpslider-left-bg-1:    #F9FCFD;
    --cmpslider-left-bg-2:    #EEF5F7;
    --cmpslider-left-bg-3:    #E2EEF1;
    --cmpslider-left-heading: #0A7285;
    --cmpslider-left-amber:   #B45309;
    --cmpslider-left-body:    #45565E;
    --cmpslider-left-ring:    #0A7285;
    --cmpslider-left-ring-bg: #FFFFFF;
    --cmpslider-left-glow:    rgba(255, 189, 89, 0.16);

    /* ---- RIGHT / WITHOUT SOLAR (black, kept as-is) ---- */
    --cmpslider-right-bg-1:   #0A0B0D;
    --cmpslider-right-bg-2:   #060708;
    --cmpslider-right-heading:#F3F4F6;
    --cmpslider-right-body:   #97A0A8;
    --cmpslider-right-warn:   #E2574C;
    --cmpslider-right-glow:   rgba(226, 87, 76, 0.14);

    /* ---- Divider ---- */
    --cmpslider-div-top:      #22D3EE;
    --cmpslider-div-bottom:   #F5A623;

    --cmpslider-font-head: 'Poppins', sans-serif;
    --cmpslider-font-body: 'Inter', sans-serif;

    /* ---- demo shell (safe to delete if embedding just the .cmpslider-stage block) ---- */
    display:flex;
    align-items:center;
    justify-content:center;
    /*min-height:100vh;*/
    /*background:*/
    /*        radial-gradient(circle at 20% 15%, #eef3f2 0%, transparent 55%),*/
    /*        radial-gradient(circle at 85% 85%, #eef2f5 0%, transparent 55%),*/
    /*        #F3F5F4;*/
    padding:48px 20px;
}

.comparison-section{
    padding-top: 1.0rem;
    width: 100%;
}

.cmpslider-root, .cmpslider-root *{ box-sizing:border-box; margin:0; padding:0; }

.cmpslider-stage{
    width:100%;
    font-family: var(--cmpslider-font-body);
    height: 400px;
}

.cmpslider-eyebrow{
    text-align:center;
    font-family:var(--cmpslider-font-body);
    font-size:12px;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#8a97a0;
    margin-bottom:14px;
}

/* ============ COMPARE COMPONENT ============ */
.cmpslider-compare{
    position:relative;
    width:100%;
    aspect-ratio: 16 / 8.6;
    /*min-height:380px;*/
    border-radius:28px;
    overflow:hidden;
    isolation:isolate;
    cursor:col-resize;
    box-shadow:
            0 40px 80px -30px rgba(15, 30, 40, 0.35),
            0 0 0 1px rgba(15,30,40,0.05);
    -webkit-user-select:none;
    user-select:none;
    height: 400px;
}

.cmpslider-panel{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    /*padding:40px;*/
}

.cmpslider-panel-inner{
    /*max-width:987px;*/
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:22px;
}

/* faint technical grid texture, shared */
.cmpslider-grid-tex{
    position:absolute;
    inset:0;
    background-image:
            linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events:none;
}

/* ---------- WITHOUT SOLAR (base layer, black, always full) ---------- */
.cmpslider-panel-without{
    background:
            radial-gradient(circle at 78% 20%, var(--cmpslider-right-glow), transparent 45%),
            linear-gradient(160deg, var(--cmpslider-right-bg-1) 0%, var(--cmpslider-right-bg-2) 100%);
    z-index:1;
}
.cmpslider-panel-without .cmpslider-grid-tex{
    background-image:
            linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px);
}

/* ---------- WITH TDS SOLAR (top layer, light, clipped by slider) ---------- */
.cmpslider-panel-with{
    background:
            radial-gradient(circle at 24% 22%, var(--cmpslider-left-glow), transparent 45%),
            linear-gradient(160deg, var(--cmpslider-left-bg-1) 0%, var(--cmpslider-left-bg-2) 55%, var(--cmpslider-left-bg-3) 100%);
    z-index:2;
    clip-path: inset(0 calc(100% - var(--cmpslider-pos, 50%)) 0 0);
    will-change: clip-path;
}
.cmpslider-panel-with .cmpslider-grid-tex{
    background-image:
            linear-gradient(to right, rgba(10,60,70,0.05) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(10,60,70,0.05) 1px, transparent 1px);
}

/* ---------- Icon ring ---------- */
.cmpslider-icon-ring{
    width:64px;
    height:64px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.cmpslider-icon-ring svg{ width:28px; height:28px; }

.cmpslider-panel-with .cmpslider-icon-ring{
    background: var(--cmpslider-left-ring-bg);
    border:1.5px solid rgba(10,114,133,0.28);
    color: var(--cmpslider-left-ring);
    box-shadow: 0 8px 24px -10px rgba(10,114,133,0.35);
}
.cmpslider-panel-without .cmpslider-icon-ring{
    background: rgba(226,87,76,0.08);
    border:1.5px solid rgba(226,87,76,0.35);
    color: var(--cmpslider-right-warn);
    box-shadow: 0 8px 24px -10px rgba(226,87,76,0.35);
}

/* ---------- Headings ---------- */
.cmpslider-title{
    font-family:var(--cmpslider-font-head);
    font-weight:800;
    letter-spacing:-0.01em;
    /*font-size:clamp(1.5rem, 3vw, 2.35rem);*/
    line-height:1.1;
}
.cmpslider-panel-with .cmpslider-title{ color: var(--cmpslider-left-heading); }
.cmpslider-panel-without .cmpslider-title{ color: var(--cmpslider-right-heading); }

/* ---------- Bullets ---------- */
.cmpslider-points{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.cmpslider-points li{
    font-family:var(--cmpslider-font-body);
    font-weight:600;
    font-size:0.30rem;
    line-height:1.55;
    position:relative;
    padding-left:18px;
}
.cmpslider-points li::before{
    content:"";
    position:absolute;
    left:0;
    top:9px;
    width:6px;
    height:6px;
    border-radius:50%;
}

.cmpslider-panel-with .cmpslider-points li{ color: var(--cmpslider-left-body); }
.cmpslider-panel-with .cmpslider-points li::before{ background: var(--cmpslider-left-body); }
.cmpslider-panel-with .cmpslider-points li.cmpslider-highlight{ color: var(--cmpslider-left-amber); font-weight:700; }
.cmpslider-panel-with .cmpslider-points li.cmpslider-highlight::before{ background: var(--cmpslider-left-amber); }

.cmpslider-panel-without .cmpslider-points li{ color: var(--cmpslider-right-body); }
.cmpslider-panel-without .cmpslider-points li::before{ background: var(--cmpslider-right-body); }

/* ---------- Divider ---------- */
.cmpslider-divider{
    position:absolute;
    top:0;
    bottom:0;
    left: var(--cmpslider-pos, 50%);
    width:2px;
    transform:translateX(-50%);
    z-index:3;
    background:linear-gradient(to bottom, var(--cmpslider-div-top) 0%, var(--cmpslider-div-bottom) 100%);
    box-shadow: 0 0 18px rgba(34,211,238,0.55);
    pointer-events:none;
    will-change: left;
}

.cmpslider-handle{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border:1.5px solid rgba(255,255,255,0.75);
    box-shadow:
            0 0 0 6px rgba(34,211,238,0.08),
            0 10px 26px -8px rgba(0,0,0,0.45);
    color:#fff;
}
.cmpslider-handle svg{ width:18px; height:18px; }

.cmpslider-caption-row{
    display:flex;
    justify-content:space-between;
    margin-top:16px;
    font-family:var(--cmpslider-font-body);
    font-size:12px;
    font-weight:600;
    letter-spacing:.04em;
    color:#9aa4ab;
    padding:0 4px;
}
.cmpslider-caption-row .cmpslider-dot{
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    margin-right:6px;
    vertical-align:middle;
}
.cmpslider-caption-row .cmpslider-left-cap .cmpslider-dot{ background:var(--cmpslider-left-heading); }
.cmpslider-caption-row .cmpslider-right-cap .cmpslider-dot{ background:var(--cmpslider-right-warn); margin-right:0; margin-left:6px; }

@media (max-width:560px){
    .cmpslider-compare{ aspect-ratio: 3/4; border-radius:20px; }
    .cmpslider-panel{ padding:26px; }
    .cmpslider-panel-inner{ gap:16px; }
    .cmpslider-icon-ring{ width:52px; height:52px; }
    .cmpslider-icon-ring svg{ width:22px; height:22px; }
}

@media (prefers-reduced-motion: reduce){
    .cmpslider-panel-with, .cmpslider-divider{ transition:none !important; }
}