/* ══════════════════════════════════════════════
   AI Email Tools — shared interactive widgets
   Dependency-free. Themed to match the dark site.
══════════════════════════════════════════════ */
:root{
  --wx-bg:#0d0f1a; --wx-panel:rgba(255,255,255,0.02); --wx-border:rgba(255,255,255,0.08);
  --wx-text:#c8d4e8; --wx-muted:#8898b8; --wx-dim:#6b7fa0;
  --wx-blue:#3b82f6; --wx-blue2:#60a5fa; --wx-purple:#8b5cf6; --wx-purple2:#a78bfa;
  --wx-green:#34d399; --wx-red:#f87171; --wx-amber:#f59e0b;
}
.wx{box-sizing:border-box;font-family:'Inter',system-ui,sans-serif;}
.wx *,.wx *::before,.wx *::after{box-sizing:border-box;}

/* ─── shared card ─── */
.wx-card{background:var(--wx-panel);border:1px solid var(--wx-border);border-radius:14px;padding:24px;margin:28px 0;}
.wx-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--wx-purple2);margin-bottom:8px;display:block;}
.wx-title{font-size:19px;font-weight:800;color:#f0f6ff;margin:0 0 4px;}
.wx-sub{font-size:13px;color:var(--wx-dim);margin:0 0 18px;}

/* ─── buttons ─── */
.wx-btn{display:inline-block;padding:11px 20px;border-radius:8px;font-size:14px;font-weight:600;text-align:center;text-decoration:none;border:none;cursor:pointer;font-family:inherit;transition:opacity .15s,transform .1s;}
.wx-btn:hover{opacity:.88;transform:translateY(-1px);text-decoration:none;}
.wx-btn-purple{background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff;}
.wx-btn-blue{background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff;}
.wx-btn-ghost{background:rgba(255,255,255,0.06);border:1px solid var(--wx-border);color:var(--wx-text);}

/* ─── QUIZ ─── */
.wx-quiz{border-color:rgba(139,92,246,0.25);}
.wx-q-step{display:none;}
.wx-q-step.active{display:block;animation:wxfade .25s ease;}
@keyframes wxfade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.wx-q-prompt{font-size:16px;font-weight:700;color:#eaf1ff;margin:0 0 14px;}
.wx-q-opts{display:grid;gap:10px;}
.wx-q-opt{text-align:left;padding:13px 16px;border-radius:9px;background:rgba(255,255,255,0.03);border:1px solid var(--wx-border);color:var(--wx-text);font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s;}
.wx-q-opt:hover{border-color:rgba(139,92,246,0.5);background:rgba(139,92,246,0.08);}
.wx-q-progress{display:flex;gap:6px;margin-bottom:16px;}
.wx-q-dot{height:4px;flex:1;border-radius:2px;background:rgba(255,255,255,0.08);transition:background .2s;}
.wx-q-dot.on{background:var(--wx-purple);}
.wx-q-back{background:none;border:none;color:var(--wx-dim);font-size:12px;cursor:pointer;font-family:inherit;margin-top:14px;padding:0;}
.wx-q-back:hover{color:var(--wx-text);}
.wx-result{display:none;text-align:center;padding:8px 0;}
.wx-result.show{display:block;animation:wxfade .3s ease;}
.wx-result-badge{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:4px 10px;border-radius:5px;margin-bottom:12px;}
.wx-result h3{font-size:26px;font-weight:800;color:#f0f6ff;margin:0 0 8px;}
.wx-result p{font-size:14px;color:var(--wx-muted);max-width:440px;margin:0 auto 18px;line-height:1.6;}
.wx-result .wx-btn{min-width:220px;}
.wx-result-restart{display:block;background:none;border:none;color:var(--wx-dim);font-size:12px;cursor:pointer;font-family:inherit;margin:14px auto 0;}

/* ─── COST CALCULATOR ─── */
.wx-calc{border-color:rgba(139,92,246,0.22);}
.wx-calc-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px;}
.wx-calc-label{font-size:13px;color:var(--wx-muted);font-weight:600;}
.wx-range{flex:1;min-width:180px;accent-color:var(--wx-purple);height:5px;}
.wx-calc-count{font-size:15px;font-weight:800;color:#f0f6ff;min-width:96px;text-align:right;}
.wx-bars{display:grid;gap:12px;}
.wx-bar-row{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:12px;}
.wx-bar-name{font-size:13px;font-weight:600;color:var(--wx-text);}
.wx-bar-track{background:rgba(255,255,255,0.04);border-radius:6px;height:26px;overflow:hidden;}
.wx-bar-fill{height:100%;border-radius:6px;transition:width .35s cubic-bezier(.4,0,.2,1);min-width:2px;}
.wx-bar-val{font-size:13px;font-weight:800;color:#f0f6ff;min-width:64px;text-align:right;white-space:nowrap;}
.wx-calc-take{margin:18px 0 0;font-size:14px;color:#cbd9f0;line-height:1.6;padding:14px 16px;background:rgba(139,92,246,0.06);border:1px solid rgba(139,92,246,0.2);border-radius:8px;}
.wx-calc-take strong{color:#fff;}
.wx-calc-cta{margin-top:14px;}
.wx-calc-note{font-size:11px;color:var(--wx-dim);margin-top:10px;}

/* ─── ACCORDION ─── */
.wx-acc-item{border-top:1px solid var(--wx-border);}
.wx-acc-item:last-child{border-bottom:1px solid var(--wx-border);}
.wx-acc-head{width:100%;text-align:left;background:none;border:none;color:#e6eeff;font-size:15px;font-weight:600;padding:16px 30px 16px 0;cursor:pointer;font-family:inherit;position:relative;line-height:1.4;}
.wx-acc-head::after{content:"+";position:absolute;right:4px;top:14px;font-size:20px;color:var(--wx-purple2);font-weight:400;transition:transform .2s;}
.wx-acc-item.open .wx-acc-head::after{content:"−";}
.wx-acc-body{max-height:0;overflow:hidden;transition:max-height .28s ease;}
.wx-acc-body-inner{padding:0 0 18px;font-size:14px;color:#9aafcc;line-height:1.7;}

/* ─── STICKY CTA BAR ─── */
.wx-sticky{position:fixed;left:0;right:0;bottom:0;z-index:200;background:rgba(13,15,26,0.94);backdrop-filter:blur(12px);border-top:1px solid rgba(139,92,246,0.28);padding:10px clamp(14px,4vw,40px);display:flex;align-items:center;justify-content:space-between;gap:12px;transform:translateY(110%);transition:transform .3s ease;}
.wx-sticky.show{transform:none;}
.wx-sticky-txt{font-size:13px;color:var(--wx-muted);font-weight:500;}
.wx-sticky-txt strong{color:#f0f6ff;}
.wx-sticky-actions{display:flex;align-items:center;gap:8px;}
.wx-sticky .wx-btn{padding:8px 16px;font-size:13px;}
.wx-sticky-close{background:none;border:none;color:var(--wx-dim);font-size:18px;cursor:pointer;line-height:1;padding:4px 6px;}
.wx-sticky-close:hover{color:var(--wx-text);}
@media(max-width:600px){.wx-sticky-txt{display:none;}.wx-sticky{justify-content:center;}}

/* ─── TRUST STAMP ─── */
.wx-trust{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--wx-dim);background:rgba(52,211,153,0.06);border:1px solid rgba(52,211,153,0.2);border-radius:20px;padding:5px 14px;}
.wx-trust .wx-dot{width:7px;height:7px;border-radius:50%;background:var(--wx-green);box-shadow:0 0 8px rgba(52,211,153,0.6);}

/* ─── table enhancer controls ─── */
.wx-tbl-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0 4px;}
.wx-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--wx-muted);cursor:pointer;user-select:none;font-weight:500;}
.wx-toggle input{accent-color:var(--wx-purple);width:15px;height:15px;}
.wx-row-dim{opacity:.28;}