/* Widget with spinner + draw animation */
.sfc-cfp-wrap{ display:inline-block; }
.sfc-cfp-widget{ font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans','Liberation Sans',sans-serif; font-size:14px; width:300px; max-width:100%; }
.sfc-cfp-box{ display:flex; align-items:center; gap:12px; background:#fff; color:#111; border:1px solid #e5e7eb; border-radius:8px; padding:24px; width:100%; cursor:pointer; user-select:none; }
.sfc-cfp-wrap[data-theme="dark"] .sfc-cfp-box{ background:#0f1115; color:#f6f6f6; border-color:#333; }

.sfc-cfp-mark{ position:relative; width:24px; height:24px; border:2px solid currentColor; border-radius:4px; display:inline-block; overflow:hidden; transition: background-color .3s ease, border-color .3s ease; }
.sfc-cfp-widget[data-state="passed"] .sfc-cfp-mark{ background:#16a34a; border-color:#16a34a; }

.sfc-cfp-spinner{
  position:absolute; left:50%; top:50%; width:14px; height:14px;
  margin-left:-7px; margin-top:-7px;
  border:2px solid rgba(0,0,0,.2); border-top-color:rgba(0,0,0,.6); border-radius:50%;
  animation:sfc-rot 1s linear infinite; opacity:0; pointer-events:none;
}
.sfc-cfp-wrap[data-theme="dark"] .sfc-cfp-spinner{ border:2px solid rgba(255,255,255,.2); border-top-color:rgba(255,255,255,.8); }
.sfc-cfp-widget[data-state="verifying"] .sfc-cfp-spinner{ opacity:1; }
.sfc-cfp-widget[data-state="passed"] .sfc-cfp-spinner,
.sfc-cfp-widget[data-state="failed"] .sfc-cfp-spinner{ opacity:0; }

@keyframes sfc-rot{ to{ transform:rotate(360deg); } }

.sfc-cfp-check{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }
.sfc-cfp-check path{
  fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:22; stroke-dashoffset:22;
}
.sfc-cfp-widget[data-state="passed"] .sfc-cfp-check path{ animation:sfc-draw .45s ease forwards .1s; }
@keyframes sfc-draw{ to{ stroke-dashoffset:0; } }

.sfc-cfp-text{ flex:1; text-align: center; }
.sfc-cfp-badge{ display:flex; align-items:center; gap:8px; }
.sfc-cfp-logo{ height:24px; width:auto; display:block; }

.sfc-cfp-honeypot{ position:absolute !important; left:-99999px !important; width:1px !important; height:1px !important; opacity:0 !important; }

.sfc-cfp-widget.sfc-cfp-invisible {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

/* --- Slider Puzzle Verification --- */
.sfc-cfp-slider{
    display:none;
    margin-top:8px;
}
.sfc-cfp-widget.sfc-cfp-slider-mode .sfc-cfp-slider{
    display:block;
}

/* Make the main box look non-clickable while in puzzle mode. */
.sfc-cfp-widget.sfc-cfp-slider-mode .sfc-cfp-box{
    cursor:default;
}

.sfc-cfp-slider-title{
    font-size:14px;
    font-weight:600;
    color:#222;
    margin:4px 0 6px;
}

/* Canvas container. */
.sfc-cfp-slider-image{
    position:relative;
    width:260px;          /* match canvas attributes to avoid stretching */
    max-width:100%;
    height:140px;         /* match canvas attributes */
    border-radius:8px;
    overflow:hidden;
    background:#f3f3f3;
    margin:0 auto 8px;
    box-shadow:0 0 2px rgba(0,0,0,0.2);
}

/* The canvases fill the container. */
.sfc-cfp-puzzle-bg,
.sfc-cfp-puzzle-piece{
    position:absolute;
    top:0;
    left:0;
    border-radius:8px;
}

.sfc-cfp-puzzle-bg{
    width:100%;
    height:100%;
}

.sfc-cfp-puzzle-piece{
    width:60px;   /* match canvas width/height for precise positioning */
    height:60px;
    z-index:5;
    pointer-events:none;
    transition:left 0.15s ease;
}

/* Slider bar */
.sfc-cfp-slider-track{
    position:relative;
    width:100%;
    height:36px;
    background:#e9e9e9;
    border-radius:40px;
    overflow:hidden;
    cursor:pointer;
    user-select:none;
}
.sfc-cfp-slider-track-inner{
    position:relative;
    width:100%;
    height:100%;
}

.sfc-cfp-slider-fill{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:0%;
    background:linear-gradient(90deg,#42a5f5,#1e88e5);
    border-radius:40px;
    transition:width 0.15s ease;
}

.sfc-cfp-slider-thumb{
    position:absolute;
    top:0;
    left:0;
    width:36px;
    height:36px;
    border-radius:50%;
    background:#fff;
    border:1px solid #ccc;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    transition:background 0.2s ease,left 0.1s linear;
    box-shadow:0 1px 2px rgba(0,0,0,0.2);
}
.sfc-cfp-slider-thumb:hover{
    background:#f8f8f8;
}

.sfc-cfp-slider-text{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:36px;
    line-height:36px;
    font-size:13px;
    font-weight:500;
    color:#555;
    pointer-events:none;
    text-align:center;
}

/* Solved state – JS adds .sfc-cfp-slider-solved to .sfc-cfp-slider. */
.sfc-cfp-slider.sfc-cfp-slider-solved .sfc-cfp-slider-fill{
    background:linear-gradient(90deg,#66bb6a,#43a047);
    width:100% !important;
}
.sfc-cfp-slider.sfc-cfp-slider-solved .sfc-cfp-slider-thumb{
    background:#4caf50;
    color:#fff;
}
.sfc-cfp-slider.sfc-cfp-slider-solved .sfc-cfp-slider-text{
    color:#2e7d32;
    font-weight:600;
}

/* Responsive – slightly shorter image on mobile. */
@media (max-width:400px){
    .sfc-cfp-slider-image{
        height:120px;
    }
}