/*
 * SliderCaptcha – Drag to Verify  v1.3.0
 * All class names are prefixed with "scap130-" to guarantee zero conflict
 * with any WordPress theme, page builder, or contact-form plugin.
 * CSS custom properties are scoped inside .scap130-wrapper only.
 */

/* ── Scoped CSS variables (never leak to the rest of the page) ─────────── */
.scap130-wrapper {
    --scap-handle:       #4f46e5;
    --scap-fill-start:   #c7d2fe;
    --scap-fill-end:     #4f46e5;
    --scap-track-bg:     #e0e7ff;
    --scap-track-border: rgba(79, 70, 229, 0.20);
    --scap-success:      #16a34a;
    --scap-error:        #dc2626;
    --scap-text:         #6b7280;
    --scap-height:       52px;
    --scap-handle-size:  44px;
    --scap-radius:       9999px;
    --scap-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                         Helvetica, Arial, sans-serif;

    /* Layout reset — fight any box-sizing inheritance from themes */
    -webkit-box-sizing: border-box !important;
            box-sizing: border-box !important;
    display:     block !important;
    width:       100% !important;
    max-width:   420px !important;
    margin:      12px 0 !important;
    padding:     0 !important;
    font-family: var(--scap-font) !important;
    -webkit-user-select: none !important;
       -moz-user-select: none !important;
        -ms-user-select: none !important;
            user-select: none !important;
    /* Isolate from any float/flex/grid parent */
    float:       none !important;
    clear:       none !important;
    line-height: normal !important;
    font-size:   14px !important;
}

/* ── Track (the sliding rail) ───────────────────────────────────────────── */
.scap130-wrapper .scap130-track {
    -webkit-box-sizing: border-box !important;
            box-sizing: border-box !important;
    position:     relative !important;
    display:      block !important;
    width:        100% !important;
    height:       var(--scap-height) !important;
    background:   var(--scap-track-bg) !important;
    border-radius: var(--scap-radius) !important;
    border:       1.5px solid var(--scap-track-border) !important;
    overflow:     hidden !important;
    cursor:       default !important;
    padding:      0 !important;
    margin:       0 !important;
    /* Undo any shadow/outline from form builders */
    box-shadow:   none !important;
    outline:      none !important;
    -webkit-transition: border-color .18s ease, box-shadow .18s ease !important;
            transition: border-color .18s ease, box-shadow .18s ease !important;
}

/* ── Fill bar ────────────────────────────────────────────────────────────── */
.scap130-wrapper .scap130-fill {
    -webkit-box-sizing: border-box !important;
            box-sizing: border-box !important;
    position:     absolute !important;
    left:         0 !important;
    top:          0 !important;
    bottom:       0 !important;
    width:        0 !important;          /* JS controls this */
    height:       100% !important;
    background:   -webkit-linear-gradient(left, var(--scap-fill-start) 0%, var(--scap-fill-end) 100%) !important;
    background:           linear-gradient(90deg,  var(--scap-fill-start) 0%, var(--scap-fill-end) 100%) !important;
    border-radius: var(--scap-radius) !important;
    pointer-events: none !important;
    margin:       0 !important;
    padding:      0 !important;
    border:       none !important;
}

/* ── Label text ──────────────────────────────────────────────────────────── */
.scap130-wrapper .scap130-label {
    -webkit-box-sizing: border-box !important;
            box-sizing: border-box !important;
    position:     absolute !important;
    top:          0 !important;
    left:         0 !important;
    right:        0 !important;
    bottom:       0 !important;
    display:      -webkit-box !important;
    display:      -ms-flexbox !important;
    display:      flex !important;
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
    font-size:    13.5px !important;
    font-weight:  500 !important;
    letter-spacing: .02em !important;
    color:        var(--scap-text) !important;
    pointer-events: none !important;
    z-index:      1 !important;
    margin:       0 !important;
    padding:      0 !important;
    border:       none !important;
    background:   transparent !important;
    line-height:  normal !important;
    -webkit-transition: opacity .18s ease, color .18s ease !important;
            transition: opacity .18s ease, color .18s ease !important;
}

/* ── Handle (draggable knob) ─────────────────────────────────────────────── */
.scap130-wrapper .scap130-handle {
    -webkit-box-sizing: border-box !important;
            box-sizing: border-box !important;
    position:     absolute !important;
    left:         4px !important;        /* JS overrides this while dragging */
    top:          50% !important;
    -webkit-transform: translateY(-50%) !important;
            transform: translateY(-50%) !important;
    width:        var(--scap-handle-size) !important;
    height:       var(--scap-handle-size) !important;
    background:   #ffffff !important;
    border-radius: 50% !important;
    border:       2px solid var(--scap-handle) !important;
    box-shadow:   0 2px 8px rgba(79, 70, 229, .25) !important;
    display:      -webkit-box !important;
    display:      -ms-flexbox !important;
    display:      flex !important;
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
    cursor:       grab !important;
    z-index:      2 !important;
    margin:       0 !important;
    padding:      0 !important;
    /* Override any form builder button/input reset */
    -webkit-appearance: none !important;
       -moz-appearance: none !important;
            appearance: none !important;
    outline:      none !important;
    -webkit-transition: border-color .18s ease, box-shadow .18s ease !important;
            transition: border-color .18s ease, box-shadow .18s ease !important;
    will-change:  left !important;
}

.scap130-wrapper .scap130-handle:active {
    cursor:     grabbing !important;
    box-shadow: 0 4px 16px rgba(79, 70, 229, .40) !important;
    -webkit-transform: translateY(-50%) scale(1.07) !important;
            transform: translateY(-50%) scale(1.07) !important;
}

/* ── Arrow SVG inside handle ─────────────────────────────────────────────── */
.scap130-wrapper .scap130-handle svg {
    display:        block !important;
    width:          18px !important;
    height:         18px !important;
    color:          var(--scap-handle) !important;
    pointer-events: none !important;
    -webkit-transition: color .18s ease !important;
            transition: color .18s ease !important;
    /* Prevent SVG from inheriting fill from theme */
    fill:           none !important;
    stroke:         currentColor !important;
}

/* ════════════════════════ STATE MODIFIERS ══════════════════════════════════ */

/* ── Dragging ────────────────────────────────────────────────────────────── */
.scap130-wrapper.scap130-dragging .scap130-track {
    border-color: var(--scap-handle) !important;
    box-shadow:   0 0 0 3px rgba(79, 70, 229, .12) !important;
}
.scap130-wrapper.scap130-dragging .scap130-label {
    opacity: .35 !important;
}

/* ── Verifying ───────────────────────────────────────────────────────────── */
.scap130-wrapper.scap130-verifying .scap130-handle {
    cursor:    wait !important;
    -webkit-animation: scap130Pulse 1s ease-in-out infinite !important;
            animation: scap130Pulse 1s ease-in-out infinite !important;
}
.scap130-wrapper.scap130-verifying .scap130-label {
    color: var(--scap-handle) !important;
}

@-webkit-keyframes scap130Pulse {
    0%, 100% { box-shadow: 0 2px 8px  rgba(79, 70, 229, .25); }
    50%       { box-shadow: 0 2px 20px rgba(79, 70, 229, .55); }
}
@keyframes scap130Pulse {
    0%, 100% { box-shadow: 0 2px 8px  rgba(79, 70, 229, .25); }
    50%       { box-shadow: 0 2px 20px rgba(79, 70, 229, .55); }
}

/* ── Verified ────────────────────────────────────────────────────────────── */
.scap130-wrapper.scap130-verified .scap130-track {
    border-color: var(--scap-success) !important;
    background:   #dcfce7 !important;
}
.scap130-wrapper.scap130-verified .scap130-fill {
    background: -webkit-linear-gradient(left, #bbf7d0 0%, var(--scap-success) 100%) !important;
    background:         linear-gradient(90deg, #bbf7d0 0%, var(--scap-success) 100%) !important;
}
.scap130-wrapper.scap130-verified .scap130-handle {
    border-color: var(--scap-success) !important;
    cursor:       default !important;
}
.scap130-wrapper.scap130-verified .scap130-handle svg {
    color: var(--scap-success) !important;
}
.scap130-wrapper.scap130-verified .scap130-label {
    color:       var(--scap-success) !important;
    font-weight: 600 !important;
    opacity:     1 !important;
}

/* ── Failed / shake ──────────────────────────────────────────────────────── */
.scap130-wrapper.scap130-failed .scap130-track {
    border-color: var(--scap-error) !important;
    -webkit-animation: scap130Shake .4s ease !important;
            animation: scap130Shake .4s ease !important;
}
.scap130-wrapper.scap130-failed .scap130-label {
    color: var(--scap-error) !important;
}
.scap130-wrapper.scap130-failed .scap130-handle {
    border-color: var(--scap-error) !important;
}
.scap130-wrapper.scap130-failed .scap130-handle svg {
    color: var(--scap-error) !important;
}

@-webkit-keyframes scap130Shake {
    0%, 100% { -webkit-transform: none; transform: none; }
    20%       { -webkit-transform: translateX(-6px); transform: translateX(-6px); }
    40%       { -webkit-transform: translateX(6px);  transform: translateX(6px);  }
    60%       { -webkit-transform: translateX(-4px); transform: translateX(-4px); }
    80%       { -webkit-transform: translateX(4px);  transform: translateX(4px);  }
}
@keyframes scap130Shake {
    0%, 100% { transform: none; }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px);  }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px);  }
}

/* ── Keyboard focus ring ─────────────────────────────────────────────────── */
.scap130-wrapper .scap130-handle:focus-visible {
    outline:        2px solid var(--scap-handle) !important;
    outline-offset: 3px !important;
}
/* Fallback for browsers without :focus-visible */
.scap130-wrapper .scap130-handle:focus {
    outline:        2px solid var(--scap-handle) !important;
    outline-offset: 3px !important;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .scap130-wrapper .scap130-handle,
    .scap130-wrapper .scap130-fill,
    .scap130-wrapper .scap130-track,
    .scap130-wrapper .scap130-label {
        -webkit-transition: none !important;
                transition: none !important;
        -webkit-animation:  none !important;
                animation:  none !important;
    }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .scap130-wrapper {
        max-width: 100% !important;
        --scap-height:      48px;
        --scap-handle-size: 40px;
    }
}