/* ═══════════════════════════════════════════════════
   SPARK WIREFRAME REVIEW — FRONTEND UI
   Injected on pages with review enabled.
   ═══════════════════════════════════════════════════ */

/* ── Root isolation reset ── */
#swfr-root#swfr-root {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #111015 !important;
    -webkit-font-smoothing: antialiased !important;
}
#swfr-root#swfr-root *, #swfr-root#swfr-root *::before, #swfr-root#swfr-root *::after {
    box-sizing: border-box !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
}
/* Reset buttons and inputs so theme styles don't bleed in */
#swfr-root#swfr-root button {
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: inherit !important;
    line-height: normal !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
#swfr-root#swfr-root input,
#swfr-root#swfr-root textarea {
    -webkit-appearance: none !important;
    appearance: none !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
#swfr-root#swfr-root a {
    text-decoration: none !important;
    color: inherit !important;
}
#swfr-root#swfr-root img { max-width: 100% !important; }
#swfr-root#swfr-root p, #swfr-root#swfr-root h1, #swfr-root#swfr-root h2, #swfr-root#swfr-root h3,
#swfr-root#swfr-root h4, #swfr-root#swfr-root h5, #swfr-root#swfr-root h6 {
    margin: 0 !important;
    padding: 0 !important;
}
#swfr-root#swfr-root ul, #swfr-root#swfr-root ol {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* ── CSS Variables ── */
#swfr-root#swfr-root {
    --purple: #5F01D3;
    --pink: #F63D74;
    --text-main: #111015;
    --text-muted: rgba(17,16,21,.7);
    --text-dim: rgba(17,16,21,.5);
    --text-tiny: rgba(17,16,21,.4);
    --border: rgba(0,0,0,.08);
    --glass: rgba(255,255,255,.72);
    --glass-strong: rgba(255,255,255,.85);
    --blur: blur(28px) saturate(180%);
    --blur-heavy: blur(40px) saturate(180%);
    --shadow-glass: inset 0 1px 1px rgba(255,255,255,1), 0 8px 32px rgba(0,0,0,.06);
    --radius-sm: 8px;
    --radius-md: 12px;
    --btn-gradient: linear-gradient(90deg, var(--purple), var(--pink), var(--purple));
}

@keyframes swfr-grad { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }

/* ══════════════════════════════════════
   COMMENT MODE — targets page elements (outside #swfr-root#swfr-root)
   ══════════════════════════════════════ */
body.sp-comment-mode [data-sp-el] {
    position: relative !important;
    cursor: pointer !important;
    outline: 2px solid transparent !important;
    outline-offset: 3px !important;
    border-radius: 4px !important;
    transition: outline-color .15s, background .15s !important;
    overflow: visible !important;
}
body.sp-comment-mode [data-sp-el]:hover {
    outline-color: rgba(95,1,211,.45) !important;
    background: rgba(95,1,211,.04) !important;
    z-index: 10 !important;
}
body.sp-comment-mode .elementor-element[data-sp-el]:hover {
    outline-color: rgba(95,1,211,.45) !important;
    background: rgba(95,1,211,.04) !important;
    z-index: 10 !important;
}
[data-sp-el].sp-el-selected {
    outline: 2px solid rgba(95,1,211,.5) !important;
    background: rgba(95,1,211,.04) !important;
    outline-offset: 3px !important;
    border-radius: 4px !important;
    overflow: visible !important;
    z-index: 10 !important;
}
/* Section selected state */
[data-section].sp-selected,
.e-con.e-parent.sp-selected,
.elementor-section.sp-selected,
[data-element_type="section"].sp-selected {
    outline: 2px solid rgba(95,1,211,.3) !important;
    background: rgba(95,1,211,.02) !important;
    outline-offset: 2px !important;
}

/* Comment badge on sections — lives outside #swfr-root#swfr-root */
.sp-badge {
    position: absolute !important;
    top: 14px !important; right: 14px !important;
    width: 24px !important; height: 24px !important; border-radius: 50% !important;
    background: linear-gradient(90deg, #5F01D3, #F63D74, #5F01D3) !important;
    background-size: 200% auto !important;
    animation: swfr-grad 3s linear infinite !important;
    color: #fff !important; font-size: 10px !important; font-weight: 600 !important;
    z-index: 5 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: 0 4px 14px rgba(95,1,211,.25) !important;
    font-family: 'Poppins', sans-serif !important;
    padding: 0 !important; margin: 0 !important; border: none !important;
}

/* ══════════════════════════════════════
   TOOLBAR
   ══════════════════════════════════════ */
#swfr-root#swfr-root .sp-toolbar {
    position: fixed !important;
    bottom: 28px !important; right: 28px !important; z-index: 99990 !important;
    display: flex !important; align-items: center !important; gap: 10px !important;
}
#swfr-root#swfr-root .sp-tbtn {
    height: 46px !important; border-radius: 24px !important;
    border: 1px solid var(--border) !important;
    background: var(--glass-strong) !important;
    backdrop-filter: var(--blur) !important; -webkit-backdrop-filter: var(--blur) !important;
    box-shadow: var(--shadow-glass) !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    color: var(--text-main) !important;
    font-size: 12px !important; font-weight: 500 !important;
    padding: 0 18px !important; white-space: nowrap !important;
    transition: all .25s cubic-bezier(.16,1,.3,1) !important;
}
#swfr-root#swfr-root .sp-tbtn:hover {
    box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 12px 40px rgba(0,0,0,.1) !important;
    transform: translateY(-2px) !important;
}
#swfr-root#swfr-root .sp-tbtn i {
    width: 18px !important; height: 18px !important; flex-shrink: 0 !important;
    display: block !important;
}
#swfr-root#swfr-root .sp-tbtn.sp-active {
    background: var(--btn-gradient) !important; background-size: 200% auto !important;
    animation: swfr-grad 3s linear infinite !important;
    color: #fff !important; border-color: transparent !important;
    box-shadow: 0 6px 24px rgba(95,1,211,.3), inset 0 1px 1px rgba(255,255,255,.3) !important;
}
#swfr-root#swfr-root .sp-tbtn-signoff {
    background: var(--btn-gradient) !important; background-size: 200% auto !important;
    animation: swfr-grad 3s linear infinite !important;
    color: #fff !important; border-color: transparent !important;
    box-shadow: 0 4px 20px rgba(95,1,211,.25), inset 0 1px 1px rgba(255,255,255,.3) !important;
}
#swfr-root#swfr-root .sp-count {
    background: var(--pink) !important; color: #fff !important;
    font-size: 10px !important; font-weight: 600 !important;
    min-width: 18px !important; height: 18px !important;
    border-radius: 9px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 5px !important;
}

/* ══════════════════════════════════════
   BANNER
   ══════════════════════════════════════ */
#swfr-root#swfr-root .sp-banner {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 99980 !important;
    background: rgba(95,1,211,.88) !important;
    backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important;
    color: #fff !important; text-align: center !important; padding: 10px 20px !important;
    font-size: 13px !important; font-weight: 400 !important;
    display: none !important; align-items: center !important;
    justify-content: center !important; gap: 12px !important;
}
#swfr-root#swfr-root .sp-banner.show { display: flex !important; }
#swfr-root#swfr-root .sp-banner i { width: 16px !important; height: 16px !important; display: block !important; }
#swfr-root#swfr-root .sp-banner button {
    background: rgba(255,255,255,.2) !important; border: none !important; color: #fff !important;
    padding: 5px 14px !important; border-radius: var(--radius-sm) !important;
    font-size: 12px !important; font-weight: 500 !important;
}

/* ══════════════════════════════════════
   STATUS
   ══════════════════════════════════════ */
#swfr-root#swfr-root .sp-status {
    position: fixed !important; bottom: 84px !important; right: 28px !important; z-index: 99989 !important;
    display: flex !important; align-items: center !important; gap: 7px !important;
    background: var(--glass-strong) !important;
    backdrop-filter: var(--blur) !important; -webkit-backdrop-filter: var(--blur) !important;
    border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important;
    padding: 5px 12px !important; font-size: 10px !important; color: var(--text-dim) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
}
#swfr-root#swfr-root .sp-status-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; }
#swfr-root#swfr-root .sp-status-dot.pending { background: linear-gradient(135deg, var(--purple), var(--pink)) !important; }
#swfr-root#swfr-root .sp-status-dot.approved { background: #16a34a !important; }

/* Bottom-left buttons: help + terms */
#swfr-root#swfr-root .sp-bottom-left {
    position: fixed !important; bottom: 28px !important; left: 28px !important; z-index: 99990 !important;
    display: flex !important; align-items: center !important; gap: 8px !important;
}
#swfr-root#swfr-root .sp-help-btn {
    width: 36px !important; height: 36px !important; border-radius: 50% !important;
    border: 1px solid var(--border) !important; background: var(--glass-strong) !important;
    backdrop-filter: var(--blur) !important; -webkit-backdrop-filter: var(--blur) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    color: var(--text-dim) !important;
    transition: all .2s !important;
    padding: 0 !important;
    position: static !important;
}
#swfr-root#swfr-root .sp-help-btn:hover { color: var(--purple) !important; }
#swfr-root#swfr-root .sp-help-btn i { width: 16px !important; height: 16px !important; display: block !important; }
#swfr-root#swfr-root .sp-terms-btn {
    height: 36px !important; border-radius: 18px !important;
    border: 1px solid var(--border) !important; background: var(--glass-strong) !important;
    backdrop-filter: var(--blur) !important; -webkit-backdrop-filter: var(--blur) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
    display: flex !important; align-items: center !important; gap: 5px !important;
    color: var(--text-dim) !important; font-size: 10px !important; font-weight: 500 !important;
    padding: 0 14px 0 10px !important;
    transition: all .2s !important;
}
#swfr-root#swfr-root .sp-terms-btn:hover { color: var(--purple) !important; }
#swfr-root#swfr-root .sp-terms-btn i { width: 14px !important; height: 14px !important; display: block !important; flex-shrink: 0 !important; }

/* Signed-off banner */
#swfr-root#swfr-root .sp-signed-banner {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 99970 !important;
    background: rgba(240,253,244,.92) !important;
    backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid #bbf7d0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
    padding: 10px 20px !important; font-size: 13px !important; color: #16a34a !important;
}
#swfr-root#swfr-root .sp-signed-banner i { width: 18px !important; height: 18px !important; display: block !important; }
#swfr-root#swfr-root .sp-signed-banner strong { font-weight: 600 !important; }

/* ══════════════════════════════════════
   COMMENT PANEL
   ══════════════════════════════════════ */
#swfr-root#swfr-root .sp-panel-overlay {
    position: fixed !important; inset: 0 !important;
    background: rgba(0,0,0,.12) !important; z-index: 99991 !important;
    opacity: 0 !important; pointer-events: none !important; transition: opacity .25s ease !important;
}
#swfr-root#swfr-root .sp-panel-overlay.open { opacity: 1 !important; pointer-events: all !important; }
#swfr-root#swfr-root .sp-panel {
    position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 400px !important; max-width: 92vw !important; z-index: 99992 !important;
    background: var(--glass) !important;
    backdrop-filter: var(--blur-heavy) !important; -webkit-backdrop-filter: var(--blur-heavy) !important;
    border-left: 1px solid var(--border) !important;
    box-shadow: -8px 0 48px rgba(0,0,0,.06) !important;
    display: flex !important; flex-direction: column !important;
    transform: translateX(100%) !important; transition: transform .35s cubic-bezier(.16,1,.3,1) !important;
}
#swfr-root#swfr-root .sp-panel.open { transform: translateX(0) !important; }

#swfr-root#swfr-root .sp-panel-hdr {
    padding: 22px 22px 18px !important; border-bottom: 1px solid var(--border) !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
}
#swfr-root#swfr-root .sp-panel-hdr h3 {
    font-size: 15px !important; font-weight: 500 !important;
    letter-spacing: -.01em !important;
}
#swfr-root#swfr-root .sp-panel-hdr-actions { display: flex !important; gap: 4px !important; }
#swfr-root#swfr-root .sp-panel-hdr-actions button {
    width: 32px !important; height: 32px !important; border-radius: var(--radius-sm) !important;
    border: none !important; background: transparent !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    color: var(--text-dim) !important; transition: all .15s !important;
    padding: 0 !important;
}
#swfr-root#swfr-root .sp-panel-hdr-actions button:hover {
    background: rgba(0,0,0,.04) !important; color: var(--text-main) !important;
}
#swfr-root#swfr-root .sp-panel-hdr-actions button.active {
    background: var(--text-main) !important; color: #fff !important;
}
#swfr-root#swfr-root .sp-panel-hdr-actions button i {
    width: 16px !important; height: 16px !important; display: block !important;
}
#swfr-root#swfr-root .sp-panel-body { flex: 1 !important; overflow-y: auto !important; padding: 22px !important; }

/* Target tags */
#swfr-root#swfr-root .sp-target-tags {
    display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 18px !important;
}
#swfr-root#swfr-root .sp-tag {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    font-size: 11px !important; font-weight: 500 !important;
    padding: 4px 12px !important; border-radius: 20px !important;
}
#swfr-root#swfr-root .sp-tag i { width: 12px !important; height: 12px !important; display: block !important; }
#swfr-root#swfr-root .sp-tag-section {
    background: rgba(95,1,211,.06) !important; color: var(--purple) !important;
    border: 1px solid rgba(95,1,211,.1) !important;
}
#swfr-root#swfr-root .sp-tag-element {
    background: rgba(246,61,116,.06) !important; color: var(--pink) !important;
    border: 1px solid rgba(246,61,116,.1) !important;
}

/* Form */
#swfr-root#swfr-root .sp-form { display: flex !important; flex-direction: column !important; gap: 14px !important; }
#swfr-root#swfr-root .sp-form label {
    font-size: 11px !important; font-weight: 500 !important; color: var(--text-dim) !important;
    margin-bottom: 3px !important; display: block !important;
    letter-spacing: .03em !important; text-transform: uppercase !important;
}
#swfr-root#swfr-root .sp-form input,
#swfr-root#swfr-root .sp-form textarea {
    width: 100% !important; padding: 11px 14px !important; border-radius: var(--radius-md) !important;
    border: 1px solid var(--border) !important; background: rgba(0,0,0,.02) !important;
    font-size: 14px !important; color: var(--text-main) !important;
    outline: none !important; transition: all .2s !important;
}
#swfr-root#swfr-root .sp-form input:focus,
#swfr-root#swfr-root .sp-form textarea:focus {
    border-color: rgba(246,61,116,.4) !important; background: rgba(0,0,0,.04) !important;
    box-shadow: 0 0 0 4px rgba(246,61,116,.08) !important;
}
#swfr-root#swfr-root .sp-form textarea { resize: vertical !important; min-height: 90px !important; }
#swfr-root#swfr-root .sp-form-submit {
    align-self: flex-end !important; padding: 10px 22px !important;
    border-radius: var(--radius-md) !important; border: none !important;
    background: var(--btn-gradient) !important; background-size: 200% auto !important;
    animation: swfr-grad 3s linear infinite !important;
    color: #fff !important; font-size: 13px !important; font-weight: 500 !important;
    display: flex !important; align-items: center !important; gap: 7px !important;
    box-shadow: 0 4px 20px rgba(95,1,211,.25), inset 0 1px 1px rgba(255,255,255,.3) !important;
    transition: all .2s !important;
}
#swfr-root#swfr-root .sp-form-submit:disabled { opacity: .35 !important; cursor: not-allowed !important; }
#swfr-root#swfr-root .sp-form-submit i { width: 14px !important; height: 14px !important; display: block !important; }

/* Comments list */
#swfr-root#swfr-root .sp-comments-list { display: flex !important; flex-direction: column !important; gap: 12px !important; }
#swfr-root#swfr-root .sp-comment-card {
    background: rgba(255,255,255,.45) !important; border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important; padding: 16px 18px !important;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.8) !important;
}
#swfr-root#swfr-root .sp-comment-card-hdr {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important; margin-bottom: 6px !important;
}
#swfr-root#swfr-root .sp-comment-card-hdr strong { font-size: 13px !important; font-weight: 600 !important; }
#swfr-root#swfr-root .sp-comment-card-hdr time { font-size: 10px !important; color: var(--text-tiny) !important; }
#swfr-root#swfr-root .sp-comment-card p {
    font-size: 13px !important; color: var(--text-muted) !important;
    line-height: 1.6 !important;
}
#swfr-root#swfr-root .sp-empty { text-align: center !important; padding: 48px 20px !important; color: var(--text-tiny) !important; font-size: 13px !important; }

/* Replies */
#swfr-root#swfr-root .sp-reply-btn {
    margin-top: 10px !important; font-size: 11px !important; color: var(--text-dim) !important;
    background: none !important; border: none !important;
    display: inline-flex !important; align-items: center !important; gap: 4px !important;
    padding: 4px 0 !important; transition: color .15s !important;
}
#swfr-root#swfr-root .sp-reply-btn:hover { color: var(--purple) !important; }
#swfr-root#swfr-root .sp-reply-btn i { width: 12px !important; height: 12px !important; display: block !important; }

#swfr-root#swfr-root .sp-replies {
    margin-top: 12px !important; padding-left: 16px !important;
    border-left: 2px solid rgba(95,1,211,.12) !important;
    display: flex !important; flex-direction: column !important; gap: 8px !important;
}
#swfr-root#swfr-root .sp-reply-card {
    padding: 10px 14px !important; background: rgba(0,0,0,.02) !important;
    border-radius: 8px !important;
}
#swfr-root#swfr-root .sp-reply-card .sp-comment-card-hdr {
    margin-bottom: 4px !important;
}
#swfr-root#swfr-root .sp-reply-card .sp-comment-card-hdr strong { font-size: 12px !important; }
#swfr-root#swfr-root .sp-reply-card p {
    font-size: 12px !important; color: var(--text-muted) !important; line-height: 1.5 !important;
}

#swfr-root#swfr-root .sp-reply-form {
    margin-top: 10px !important; flex-direction: column !important; gap: 8px !important;
    padding: 12px !important; background: rgba(95,1,211,.02) !important;
    border: 1px solid rgba(95,1,211,.08) !important; border-radius: 10px !important;
    display: none !important;
}
#swfr-root#swfr-root .sp-reply-form.sp-open { display: flex !important; }
#swfr-root#swfr-root .sp-reply-form input,
#swfr-root#swfr-root .sp-reply-form textarea {
    width: 100% !important; padding: 8px 12px !important; border-radius: 8px !important;
    border: 1px solid var(--border) !important; background: rgba(255,255,255,.6) !important;
    font-size: 13px !important; color: var(--text-main) !important; outline: none !important;
    transition: all .2s !important;
}
#swfr-root#swfr-root .sp-reply-form input:focus,
#swfr-root#swfr-root .sp-reply-form textarea:focus {
    border-color: rgba(95,1,211,.3) !important;
    box-shadow: 0 0 0 3px rgba(95,1,211,.06) !important;
}
#swfr-root#swfr-root .sp-reply-form textarea { min-height: 60px !important; resize: vertical !important; }
#swfr-root#swfr-root .sp-reply-actions {
    display: flex !important; justify-content: flex-end !important; gap: 8px !important;
}
#swfr-root#swfr-root .sp-reply-cancel {
    font-size: 12px !important; color: var(--text-dim) !important;
    background: none !important; border: none !important; padding: 6px 12px !important;
}
#swfr-root#swfr-root .sp-reply-cancel:hover { color: var(--text-main) !important; }
#swfr-root#swfr-root .sp-reply-submit {
    font-size: 12px !important; padding: 6px 14px !important; border-radius: 8px !important;
    border: none !important;
    background: var(--btn-gradient) !important; background-size: 200% auto !important;
    animation: swfr-grad 3s linear infinite !important;
    color: #fff !important; display: flex !important; align-items: center !important; gap: 4px !important;
    box-shadow: 0 2px 10px rgba(95,1,211,.2) !important;
}
#swfr-root#swfr-root .sp-reply-submit:disabled { opacity: .5 !important; cursor: not-allowed !important; }
#swfr-root#swfr-root .sp-reply-submit i { width: 12px !important; height: 12px !important; display: block !important; }

/* View more / truncation */
#swfr-root#swfr-root .sp-full-text { display: none !important; }
#swfr-root#swfr-root .sp-full-text.sp-expanded { display: block !important; }
#swfr-root#swfr-root .sp-truncated.sp-hidden { display: none !important; }
#swfr-root#swfr-root .sp-view-more {
    display: inline !important; background: none !important; border: none !important;
    color: var(--purple) !important; font-size: 12px !important; font-weight: 600 !important;
    padding: 0 !important; margin-left: 2px !important; cursor: pointer !important;
    text-decoration: underline !important;
}
#swfr-root#swfr-root .sp-view-more:hover { color: var(--pink) !important; }

/* ══════════════════════════════════════
   SIGN-OFF MODAL
   ══════════════════════════════════════ */
#swfr-root#swfr-root .sp-modal-overlay {
    position: fixed !important; inset: 0 !important;
    background: rgba(250,250,248,.6) !important; backdrop-filter: blur(6px) !important;
    z-index: 99993 !important;
    display: flex !important; align-items: flex-start !important; justify-content: center !important;
    opacity: 0 !important; pointer-events: none !important; transition: opacity .3s ease !important;
    overflow-y: auto !important; padding: 20px 20px !important;
}
#swfr-root#swfr-root .sp-modal-overlay.open { opacity: 1 !important; pointer-events: all !important; }
#swfr-root#swfr-root .sp-modal {
    width: 580px !important; max-width: 94vw !important;
    margin: auto !important; flex-shrink: 0 !important;
    background: var(--glass) !important;
    backdrop-filter: var(--blur-heavy) !important; -webkit-backdrop-filter: var(--blur-heavy) !important;
    border: 1px solid var(--border) !important; border-radius: 20px !important;
    box-shadow: 0 40px 100px rgba(0,0,0,.12), inset 0 1px 1px rgba(255,255,255,1) !important;
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
    transform: translateY(20px) scale(.96) !important;
    transition: transform .4s cubic-bezier(.16,1,.3,1) !important;
}
#swfr-root#swfr-root .sp-modal-overlay.open .sp-modal { transform: translateY(0) scale(1) !important; }
#swfr-root#swfr-root .sp-modal-hdr {
    padding: 28px 28px 0 !important;
    display: flex !important; align-items: flex-start !important; justify-content: space-between !important;
}
#swfr-root#swfr-root .sp-modal-hdr-left .sp-modal-brand {
    display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 14px !important;
}
#swfr-root#swfr-root .sp-modal-hdr-left .sp-modal-brand img { height: 18px !important; width: auto !important; }
#swfr-root#swfr-root .sp-modal-hdr-left .sp-modal-brand span {
    font-size: 9px !important; font-weight: 500 !important;
    letter-spacing: .08em !important; text-transform: uppercase !important;
    background: rgba(95,1,211,.08) !important; color: var(--purple) !important;
    padding: 3px 10px !important; border-radius: 20px !important;
    border: 1px solid rgba(95,1,211,.1) !important;
}
#swfr-root#swfr-root .sp-modal-hdr h2 {
    font-size: 20px !important; font-weight: 300 !important;
}
#swfr-root#swfr-root .sp-modal-hdr p { font-size: 13px !important; color: var(--text-dim) !important; }
#swfr-root#swfr-root .sp-modal-close {
    background: none !important; border: none !important; color: var(--text-dim) !important;
    font-size: 28px !important; line-height: 1 !important; transition: all .25s !important;
    padding: 0 !important;
}
#swfr-root#swfr-root .sp-modal-close:hover { color: var(--pink) !important; transform: rotate(90deg) !important; }
#swfr-root#swfr-root .sp-modal-body {
    flex: 1 !important; overflow-y: auto !important; padding: 22px 28px 28px !important;
    min-height: 0 !important;
}
#swfr-root#swfr-root .sp-terms {
    background: rgba(0,0,0,.02) !important; border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important; padding: 20px !important;
    margin-bottom: 20px !important; max-height: 180px !important; overflow-y: auto !important;
}
#swfr-root#swfr-root .sp-terms h4 {
    font-size: 12px !important; font-weight: 600 !important; margin: 14px 0 3px !important;
}
#swfr-root#swfr-root .sp-terms h4:first-child { margin-top: 0 !important; }
#swfr-root#swfr-root .sp-terms p,
#swfr-root#swfr-root .sp-terms li { font-size: 11px !important; color: var(--text-dim) !important; line-height: 1.7 !important; }
#swfr-root#swfr-root .sp-terms ol { padding-left: 18px !important; margin: 4px 0 !important; list-style: decimal !important; }
#swfr-root#swfr-root .sp-checkbox {
    display: flex !important; align-items: flex-start !important; gap: 10px !important;
    margin-bottom: 20px !important; cursor: pointer !important;
}
#swfr-root#swfr-root .sp-checkbox input[type="checkbox"] {
    width: 18px !important; height: 18px !important; margin-top: 2px !important;
    accent-color: var(--purple) !important; flex-shrink: 0 !important;
    -webkit-appearance: auto !important; appearance: auto !important;
}
#swfr-root#swfr-root .sp-checkbox span { font-size: 13px !important; color: var(--text-muted) !important; line-height: 1.5 !important; }
#swfr-root#swfr-root .sp-modal-fields {
    display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 12px !important; margin-bottom: 20px !important;
}
#swfr-root#swfr-root .sp-modal-field label {
    font-size: 11px !important; font-weight: 500 !important; color: var(--text-dim) !important;
    margin-bottom: 4px !important; display: block !important;
    letter-spacing: .04em !important; text-transform: uppercase !important;
}
#swfr-root#swfr-root .sp-modal-field input {
    width: 100% !important; padding: 11px 14px !important;
    border-radius: var(--radius-md) !important; border: 1px solid var(--border) !important;
    background: rgba(0,0,0,.02) !important; font-size: 14px !important;
    color: var(--text-main) !important; outline: none !important; transition: all .2s !important;
}
#swfr-root#swfr-root .sp-modal-field input:focus {
    border-color: rgba(246,61,116,.4) !important;
    box-shadow: 0 0 0 4px rgba(246,61,116,.08) !important;
}
#swfr-root#swfr-root .sp-sig-wrap { margin-bottom: 8px !important; }
#swfr-root#swfr-root .sp-sig-wrap > label {
    font-size: 11px !important; font-weight: 500 !important; color: var(--text-dim) !important;
    margin-bottom: 6px !important; display: block !important;
    letter-spacing: .04em !important; text-transform: uppercase !important;
}
#swfr-root#swfr-root .sp-sig-area {
    border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important;
    background: rgba(255,255,255,.4) !important; overflow: hidden !important;
}
#swfr-root#swfr-root .sp-sig-area canvas {
    display: block !important; width: 100% !important;
    cursor: crosshair !important; touch-action: none !important;
}
#swfr-root#swfr-root .sp-sig-toolbar {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    padding: 6px 14px !important; border-top: 1px solid var(--border) !important;
}
#swfr-root#swfr-root .sp-sig-hint { font-size: 10px !important; color: var(--text-tiny) !important; }
#swfr-root#swfr-root .sp-sig-clear {
    font-size: 11px !important; font-weight: 500 !important; color: var(--pink) !important;
    background: none !important; border: none !important; padding: 0 !important;
}
#swfr-root#swfr-root .sp-modal-foot {
    padding: 18px 28px !important; border-top: 1px solid var(--border) !important;
    display: flex !important; justify-content: flex-end !important; gap: 10px !important;
}
#swfr-root#swfr-root .sp-btn {
    padding: 11px 24px !important; border-radius: var(--radius-md) !important;
    font-size: 13px !important; font-weight: 500 !important; border: none !important;
    transition: all .2s !important;
}
#swfr-root#swfr-root .sp-btn-cancel {
    background: rgba(0,0,0,.04) !important; color: var(--text-dim) !important;
}
#swfr-root#swfr-root .sp-btn-cancel:hover { background: rgba(0,0,0,.07) !important; }
#swfr-root#swfr-root .sp-btn-approve {
    background: var(--btn-gradient) !important; background-size: 200% auto !important;
    animation: swfr-grad 3s linear infinite !important;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(95,1,211,.25) !important;
}
#swfr-root#swfr-root .sp-btn-approve:disabled { opacity: .35 !important; cursor: not-allowed !important; }

/* Success screen */
#swfr-root#swfr-root .sp-success { text-align: center !important; padding: 48px 28px !important; }
#swfr-root#swfr-root .sp-success i {
    margin-bottom: 16px !important; color: #16a34a !important;
    width: 48px !important; height: 48px !important; display: block !important; margin-left: auto !important; margin-right: auto !important;
}
#swfr-root#swfr-root .sp-success h3 { font-size: 20px !important; font-weight: 300 !important; margin: 0 0 6px !important; }
#swfr-root#swfr-root .sp-success p { font-size: 13px !important; color: var(--text-dim) !important; }
#swfr-root#swfr-root .sp-success .sp-audit {
    margin-top: 22px !important;
    background: rgba(0,0,0,.02) !important; border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important; padding: 18px !important;
    text-align: left !important; font-size: 12px !important; color: var(--text-muted) !important;
    line-height: 1.8 !important;
}
#swfr-root#swfr-root .sp-success .sp-audit strong { color: var(--text-main) !important; font-weight: 500 !important; }

/* ══════════════════════════════════════
   ONBOARDING
   ══════════════════════════════════════ */
#swfr-root#swfr-root .sp-onb-overlay {
    position: fixed !important; inset: 0 !important;
    background: rgba(0,0,0,.45) !important;
    backdrop-filter: blur(6px) !important; z-index: 99995 !important;
    display: none !important; align-items: center !important; justify-content: center !important;
}
#swfr-root#swfr-root .sp-onb-overlay.open { display: flex !important; }
#swfr-root#swfr-root .sp-onb {
    width: 460px !important; max-width: 94vw !important;
    background: #fff !important; border-radius: 20px !important; overflow: hidden !important;
    box-shadow: 0 32px 100px rgba(0,0,0,.2) !important;
}
#swfr-root#swfr-root .sp-onb-head {
    background: #111015 !important; color: #fff !important;
    padding: 22px 28px 18px !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; gap: 10px !important;
}
#swfr-root#swfr-root .sp-onb-head img { height: 20px !important; width: auto !important; }
#swfr-root#swfr-root .sp-onb-dots { display: flex !important; gap: 5px !important; }
#swfr-root#swfr-root .sp-onb-dot {
    height: 5px !important; width: 5px !important; border-radius: 3px !important;
    background: rgba(255,255,255,.2) !important; transition: all .35s !important;
}
#swfr-root#swfr-root .sp-onb-dot.active { width: 20px !important; background: #fff !important; }
#swfr-root#swfr-root .sp-onb-step-lbl {
    font-size: 10px !important; color: rgba(255,255,255,.3) !important;
    letter-spacing: .08em !important; text-transform: uppercase !important;
}
@keyframes swfr-onb-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes swfr-onb-in-back { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
#swfr-root#swfr-root .sp-onb-slide { display: none !important; padding: 28px 28px 20px !important; text-align: center !important; }
#swfr-root#swfr-root .sp-onb-slide.active { display: block !important; animation: swfr-onb-in .4s cubic-bezier(.16,1,.3,1) !important; }
#swfr-root#swfr-root .sp-onb-slide.active.back { animation: swfr-onb-in-back .4s cubic-bezier(.16,1,.3,1) !important; }
#swfr-root#swfr-root .sp-onb-icon {
    width: 42px !important; height: 42px !important; border-radius: 12px !important;
    background: rgba(95,1,211,.06) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    margin: 0 auto 14px !important; color: #5F01D3 !important;
}
#swfr-root#swfr-root .sp-onb-icon i { width: 20px !important; height: 20px !important; display: block !important; }
#swfr-root#swfr-root .sp-onb-slide h2 { font-size: 16px !important; font-weight: 600 !important; margin: 0 0 8px !important; }
#swfr-root#swfr-root .sp-onb-slide p {
    font-size: 12px !important; color: rgba(17,16,21,.5) !important;
    line-height: 1.7 !important; max-width: 360px !important; margin: 0 auto !important;
}
#swfr-root#swfr-root .sp-onb-slide p em { font-style: normal !important; color: #5F01D3 !important; font-weight: 500 !important; }
#swfr-root#swfr-root .sp-onb-slide p strong { color: #111015 !important; }
#swfr-root#swfr-root .sp-onb-foot {
    padding: 14px 24px !important;
    background: rgba(0,0,0,.02) !important; border-top: 1px solid rgba(0,0,0,.08) !important;
    display: flex !important; justify-content: space-between !important; align-items: center !important;
}
#swfr-root#swfr-root .sp-onb-skip {
    background: none !important; border: none !important;
    font-size: 11px !important; color: rgba(17,16,21,.4) !important; padding: 0 !important;
}
#swfr-root#swfr-root .sp-onb-nav { display: flex !important; gap: 8px !important; }
#swfr-root#swfr-root .sp-onb-back {
    background: none !important; border: 1px solid rgba(0,0,0,.08) !important;
    color: rgba(17,16,21,.5) !important; padding: 8px 18px !important;
    border-radius: 8px !important; font-size: 11px !important;
    display: flex !important; align-items: center !important; gap: 5px !important;
}
#swfr-root#swfr-root .sp-onb-back i,
#swfr-root#swfr-root .sp-onb-next i { width: 13px !important; height: 13px !important; display: block !important; }
#swfr-root#swfr-root .sp-onb-next {
    background: #111015 !important; color: #fff !important; border: none !important;
    padding: 8px 22px !important; border-radius: 8px !important;
    font-size: 11px !important; font-weight: 500 !important;
    display: flex !important; align-items: center !important; gap: 5px !important;
}
#swfr-root#swfr-root .sp-onb-terms-link {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    margin-top: 16px !important; padding: 6px 14px !important;
    border: 1px solid rgba(95,1,211,.15) !important; border-radius: 20px !important;
    background: rgba(95,1,211,.04) !important; color: var(--purple) !important;
    font-size: 10px !important; font-weight: 500 !important;
    transition: all .2s !important;
}
#swfr-root#swfr-root .sp-onb-terms-link:hover { background: rgba(95,1,211,.08) !important; }
#swfr-root#swfr-root .sp-onb-terms-link i { width: 12px !important; height: 12px !important; display: block !important; }

/* ══════════════════════════════════════
   SIGN-OFF INLINE LINKS
   ══════════════════════════════════════ */
#swfr-root#swfr-root .sp-terms-link-row {
    margin-bottom: 16px !important;
}
#swfr-root#swfr-root .sp-terms-inline-link {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    padding: 8px 16px !important; border-radius: 8px !important;
    background: rgba(95,1,211,.04) !important; border: 1px solid rgba(95,1,211,.1) !important;
    color: var(--purple) !important; font-size: 12px !important; font-weight: 500 !important;
    transition: all .2s !important;
}
#swfr-root#swfr-root .sp-terms-inline-link:hover { background: rgba(95,1,211,.08) !important; }
#swfr-root#swfr-root .sp-terms-inline-link i { width: 14px !important; height: 14px !important; display: block !important; }
#swfr-root#swfr-root .sp-link-btn {
    background: none !important; border: none !important; padding: 0 !important;
    color: var(--purple) !important; font-size: inherit !important; font-weight: 600 !important;
    text-decoration: underline !important; cursor: pointer !important; display: inline !important;
}
#swfr-root#swfr-root .sp-link-btn:hover { color: var(--pink) !important; }

/* ══════════════════════════════════════
   TERMS & PRIVACY MODAL
   ══════════════════════════════════════ */
#swfr-root#swfr-root .sp-terms-overlay {
    position: fixed !important; inset: 0 !important;
    background: rgba(0,0,0,.5) !important;
    backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important;
    z-index: 99996 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    opacity: 0 !important; pointer-events: none !important; transition: opacity .3s ease !important;
}
#swfr-root#swfr-root .sp-terms-overlay.open { opacity: 1 !important; pointer-events: all !important; }
#swfr-root#swfr-root .sp-terms-box {
    width: 620px !important; max-width: 94vw !important; max-height: 88vh !important;
    background: #fff !important; border-radius: 20px !important;
    box-shadow: 0 40px 100px rgba(0,0,0,.18) !important;
    display: flex !important; flex-direction: column !important; overflow: hidden !important;
    transform: translateY(20px) scale(.96) !important;
    transition: transform .4s cubic-bezier(.16,1,.3,1) !important;
}
#swfr-root#swfr-root .sp-terms-overlay.open .sp-terms-box { transform: translateY(0) scale(1) !important; }
#swfr-root#swfr-root .sp-terms-hdr {
    background: #111015 !important; color: #fff !important;
    padding: 20px 28px !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
}
#swfr-root#swfr-root .sp-terms-hdr img { height: 18px !important; width: auto !important; }
#swfr-root#swfr-root .sp-terms-close {
    background: none !important; border: none !important; color: rgba(255,255,255,.5) !important;
    font-size: 24px !important; line-height: 1 !important; padding: 0 !important;
    transition: all .2s !important;
}
#swfr-root#swfr-root .sp-terms-close:hover { color: #fff !important; }
#swfr-root#swfr-root .sp-terms-tabs {
    display: flex !important; border-bottom: 1px solid rgba(0,0,0,.06) !important;
    padding: 0 28px !important; gap: 0 !important;
}
#swfr-root#swfr-root .sp-terms-tab {
    padding: 14px 20px !important; font-size: 13px !important; font-weight: 500 !important;
    color: var(--text-dim) !important; background: none !important; border: none !important;
    border-bottom: 2px solid transparent !important;
    transition: all .2s !important;
}
#swfr-root#swfr-root .sp-terms-tab:hover { color: var(--text-main) !important; }
#swfr-root#swfr-root .sp-terms-tab.active {
    color: var(--purple) !important; border-bottom-color: var(--purple) !important;
}
#swfr-root#swfr-root .sp-terms-content {
    flex: 1 !important; overflow-y: auto !important; padding: 28px !important;
}
#swfr-root#swfr-root .sp-terms-pane { display: none !important; }
#swfr-root#swfr-root .sp-terms-pane.active { display: block !important; animation: swfr-onb-in .3s ease !important; }
#swfr-root#swfr-root .sp-terms-pane h3 {
    font-size: 14px !important; font-weight: 600 !important; color: var(--text-main) !important;
    margin: 24px 0 6px !important;
}
#swfr-root#swfr-root .sp-terms-pane h3:first-child { margin-top: 0 !important; }
#swfr-root#swfr-root .sp-terms-pane p {
    font-size: 13px !important; color: var(--text-muted) !important; line-height: 1.7 !important;
    margin: 0 0 4px !important;
}
#swfr-root#swfr-root .sp-terms-pane strong { color: var(--text-main) !important; font-weight: 600 !important; }
#swfr-root#swfr-root .sp-terms-foot {
    padding: 16px 28px !important; border-top: 1px solid rgba(0,0,0,.06) !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    font-size: 11px !important; color: var(--text-tiny) !important;
}

/* ══════════════════════════════════════
   TOAST
   ══════════════════════════════════════ */
#swfr-root#swfr-root .sp-toast {
    position: fixed !important; bottom: 100px !important; right: 28px !important; z-index: 99999 !important;
    background: var(--glass-strong) !important; backdrop-filter: var(--blur) !important;
    border: 1px solid var(--border) !important; color: var(--text-main) !important;
    padding: 10px 20px !important; border-radius: var(--radius-md) !important;
    font-size: 13px !important; box-shadow: var(--shadow-glass) !important;
    opacity: 0 !important; transform: translateY(8px) !important;
    pointer-events: none !important; transition: all .3s ease !important;
    white-space: nowrap !important;
}
#swfr-root#swfr-root .sp-toast.show { opacity: 1 !important; transform: translateY(0) !important; }

/* Scrollbar */
#swfr-root#swfr-root ::-webkit-scrollbar { width: 5px !important; }
#swfr-root#swfr-root ::-webkit-scrollbar-track { background: transparent !important; }
#swfr-root#swfr-root ::-webkit-scrollbar-thumb { background: rgba(0,0,0,.08) !important; border-radius: 4px !important; }

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */
@media (max-width: 600px) {
    #swfr-root#swfr-root .sp-toolbar {
        bottom: 16px !important; right: 12px !important; gap: 6px !important;
    }
    #swfr-root#swfr-root .sp-tbtn { height: 40px !important; padding: 0 14px !important; font-size: 11px !important; }
    #swfr-root#swfr-root .sp-panel { width: 100vw !important; max-width: 100vw !important; }
    #swfr-root#swfr-root .sp-modal-fields { grid-template-columns: 1fr !important; }
    #swfr-root#swfr-root .sp-status { bottom: 68px !important; right: 12px !important; }
    #swfr-root#swfr-root .sp-bottom-left { bottom: 16px !important; left: 12px !important; }
    #swfr-root#swfr-root .sp-terms-btn span { display: none !important; }
    #swfr-root#swfr-root .sp-terms-btn { width: 36px !important; padding: 0 !important; border-radius: 50% !important; justify-content: center !important; }
    #swfr-root#swfr-root .sp-terms-tabs { padding: 0 16px !important; }
    #swfr-root#swfr-root .sp-terms-content { padding: 20px 16px !important; }
}
