@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');
:root{--ev-red:#8b0e12;--ev-dark:#333;--ev-bg:#f4f3f1;--ev-bg2:#eeece9;--ev-white:#fff;--ev-bd:rgba(0,0,0,0.1);--ev-rad:10px}
.ev-wrap *{box-sizing:border-box;margin:0;padding:0}
.ev-wrap{font-family:'PT Sans',sans-serif;color:var(--ev-dark);max-width:960px;margin:0 auto;padding:1rem}
.ev-tool{background:var(--ev-white);border-radius:14px;box-shadow:0 4px 24px rgba(0,0,0,.10),0 1px 4px rgba(0,0,0,.06);padding:1.5rem}

/* Steps */
.ev-steps{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:1.25rem;align-items:center}
.ev-step{display:flex;align-items:center;gap:4px;font-size:11px;color:#888}
.ev-sn{width:18px;height:18px;border-radius:50%;background:var(--ev-bg2);font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#888;transition:all .3s;flex-shrink:0}
.ev-step.done .ev-sn{background:var(--ev-dark);color:var(--ev-white)}
.ev-step.active .ev-sn{background:var(--ev-red);color:var(--ev-white)}
.ev-arr{color:#ccc;font-size:10px}

/* Upload */
.ev-upload{border:2px dashed #ccc;border-radius:var(--ev-rad);padding:2.5rem;text-align:center;cursor:pointer;background:var(--ev-bg);position:relative;transition:all .2s}
.ev-upload:hover{border-color:var(--ev-red);background:var(--ev-bg2)}
.ev-upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.ev-upload-icon{width:40px;height:40px;background:var(--ev-red);border-radius:9px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.ev-upload-icon svg{stroke:var(--ev-white);fill:none;width:20px;height:20px;stroke-width:2}

/* ── STACKED LAYOUT ── */
/* Preview card — full width */
.ev-preview-card{border-radius:var(--ev-rad);border:1px solid var(--ev-bd);overflow:hidden;background:var(--ev-white);width:100%}
.ev-preview-header{padding:.6rem .85rem;background:var(--ev-bg);border-bottom:1px solid var(--ev-bd);display:flex;align-items:center;justify-content:space-between}
.ev-preview-title{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#888}
.ev-detect-badge{font-size:10px;padding:3px 8px;border-radius:10px;font-weight:700;display:none;letter-spacing:.03em}
.ev-scanning{background:var(--ev-bg2);color:#999;display:inline-flex;align-items:center;gap:5px}
.ev-done{background:#EAF5EC;color:#1B5E20;display:inline-flex;align-items:center;gap:5px}
.ev-cs{position:relative;line-height:0;width:100%;overflow:hidden}
.ev-cs canvas{position:absolute;top:0;left:0}
.ev-cs canvas:first-child{position:relative;display:block;width:100% !important;height:auto !important}


/* ── SELECTIONS — tabbed, full width below preview ── */
.ev-selections-wrap{margin-top:.85rem}
.ev-sel-tabs{display:flex;background:none;border-bottom:2px solid var(--ev-bd);margin-bottom:0}
.ev-sel-tab{padding:.55rem 1.25rem;font-size:12px;font-weight:700;cursor:pointer;color:#888;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s;letter-spacing:.02em}
.ev-sel-tab.on{color:var(--ev-red);border-bottom-color:var(--ev-red)}
.ev-sel-panel{display:none !important;padding:.85rem 0}
.ev-sel-panel.on{display:block !important}
.ev-sel-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;min-width:0;padding:.85rem 0 0 0}
@media(max-width:600px){.ev-sel-cols{grid-template-columns:1fr 1fr}}
@media(max-width:380px){.ev-sel-cols{grid-template-columns:1fr}}
.ev-sel-group{min-width:0}
.ev-sel-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ev-red);margin-bottom:.6rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ev-badge-i{font-size:9px;padding:2px 6px;border-radius:6px;background:var(--ev-bg2);color:#666;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.ev-chips{display:flex;flex-direction:column;gap:3px;width:100%}
.ev-chip{padding:4px 8px;border-radius:6px;font-size:11px;cursor:pointer;border:1.5px solid var(--ev-bd);color:var(--ev-dark);transition:all .15s;background:var(--ev-white);font-family:'PT Sans',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:left;box-sizing:border-box}
.ev-chip:hover{border-color:var(--ev-red);color:var(--ev-red)}
.ev-chip.on{border:2px solid var(--ev-red);color:var(--ev-red);background:var(--ev-white);font-weight:700}
.ev-swatches{display:flex;flex-wrap:wrap;gap:6px;width:100%;align-items:flex-start}
.ev-sw-w{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;flex-shrink:0;margin-bottom:4px}
.ev-sw{width:22px;height:22px;border-radius:4px;border:2px solid transparent;transition:all .15s}
.ev-sw-w.on .ev-sw{border-color:var(--ev-red) !important;transform:scale(1.12)}
.ev-sw-n{font-size:8px;color:#888;text-align:center;max-width:32px;line-height:1.2;word-break:break-word}
/* CTA row */
.ev-cta-row{margin-top:.85rem}
.ev-cta{width:100%;padding:.85rem;background:var(--ev-red);color:var(--ev-white);border:none;border-radius:var(--ev-rad);font-size:14px;font-weight:700;cursor:pointer;font-family:'PT Sans',sans-serif;letter-spacing:.02em;transition:opacity .2s}
.ev-cta:hover{opacity:.88}

/* Lead form */
.ev-lead-box{background:var(--ev-white);border:none;border-radius:0;padding:0;margin-top:0;display:none}
.ev-lead-box h3{font-size:16px;font-weight:700;margin-bottom:5px}
.ev-lead-box p{font-size:13px;color:#666;margin-bottom:1rem;line-height:1.6}
.ev-frow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
@media(max-width:500px){.ev-frow{grid-template-columns:1fr}}
.ev-fg{display:flex;flex-direction:column;gap:4px}
.ev-fg label{font-size:11px;font-weight:700;color:#888;letter-spacing:.05em;text-transform:uppercase}
.ev-fg input,.ev-fg select{padding:.6rem .75rem;border:1.5px solid var(--ev-bd);border-radius:7px;font-size:13px;font-family:'PT Sans',sans-serif;background:var(--ev-white);color:var(--ev-dark);width:100%;transition:border-color .15s}
.ev-fg input:focus,.ev-fg select:focus{outline:none;border-color:var(--ev-red)}
.ev-sub{width:100%;padding:.8rem;background:var(--ev-red);color:var(--ev-white);border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;margin-top:.75rem;font-family:'PT Sans',sans-serif;letter-spacing:.02em;transition:opacity .2s}
.ev-sub:hover{opacity:.88}
.ev-success{background:#EAF5EC;border:1px solid #4CAF50;border-radius:8px;padding:1rem;text-align:center;color:#1B5E20;font-size:13px;line-height:1.7;font-weight:700}

/* Before/after */


@media(max-width:500px){}






.ev-big-spin{width:26px;height:26px;border:3px solid var(--ev-bd);border-top-color:var(--ev-red);border-radius:50%;animation:ev-spin .8s linear infinite;margin:0 auto 10px}
@keyframes ev-spin{to{transform:rotate(360deg)}}

/* Design report */
.ev-ai-box{display:none;margin-top:1.25rem;border-radius:var(--ev-rad);border:1px solid var(--ev-bd);overflow:hidden}
.ev-ai-hd{background:var(--ev-bg2);color:var(--ev-dark);padding:.75rem 1rem;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--ev-bd);display:flex;align-items:center;gap:6px}
.ev-ai-hd::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ev-red);flex-shrink:0}
.ev-ai-bd{padding:1.25rem;background:var(--ev-bg)}
.ev-ai-bd p{font-size:13px;line-height:1.8;margin-bottom:.75rem}
.ev-ai-bd p:last-child{margin:0}
.ev-divider{height:1px;background:var(--ev-bd);margin:1rem 0}
.ev-cost-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ev-red);margin-bottom:.6rem}
.ev-cg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:500px){.ev-cg{grid-template-columns:1fr 1fr}}
.ev-cc{background:var(--ev-white);border-radius:8px;padding:.75rem;border:1px solid var(--ev-bd)}
.ev-cc-l{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#888;margin-bottom:3px}
.ev-cc-v{font-size:15px;font-weight:700;color:var(--ev-dark)}
.ev-disclaimer{font-size:11px;color:#888;margin-top:.85rem;line-height:1.6}

/* Spinners */
.ev-spin-sm{width:9px;height:9px;border:1.5px solid rgba(0,0,0,.12);border-top-color:#999;border-radius:50%;animation:ev-spin .7s linear infinite;flex-shrink:0;display:inline-block}
.ev-spin{width:14px;height:14px;border:2px solid rgba(139,14,18,.2);border-top-color:var(--ev-red);border-radius:50%;animation:ev-spin .7s linear infinite;flex-shrink:0;display:inline-block}


/* ── PAINT TOOLBAR ── */
.ev-toolbar{display:flex;align-items:center;gap:6px;padding:.5rem .75rem;background:var(--ev-bg);border-bottom:1px solid var(--ev-bd);flex-wrap:wrap}
.ev-tb-btn{width:28px;height:28px;border-radius:6px;border:1px solid var(--ev-bd);background:var(--ev-white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;padding:0}
.ev-tb-btn svg{stroke:#888;fill:none;width:13px;height:13px;stroke-width:2}
.ev-tb-btn:hover{border-color:var(--ev-red);background:var(--ev-bg)}
.ev-tb-btn.on{background:var(--ev-red);border-color:var(--ev-red)}
.ev-tb-btn.on svg{stroke:#fff}
.ev-tb-sep{width:1px;height:20px;background:var(--ev-bd);flex-shrink:0}
.ev-tb-lbl{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#888;white-space:nowrap}
#ev-bsz{width:70px;accent-color:var(--ev-red)}
.ev-paint-hint{font-size:11px;color:var(--ev-red);font-weight:700}
/* Cursor canvas sits on top */
#ev-cCur{cursor:crosshair}

/* ── UPLOAD TIPS ── */
.ev-upload-tips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}
.ev-tip-good,.ev-tip-bad{font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px}
.ev-tip-good{background:#f0faf0;color:#2d6a2d}
.ev-tip-bad{background:#fdf0f0;color:#8b0e12}

/* ── DISCLAIMER ── */
.ev-disclaimer{font-size:11px;color:#999;text-align:center;margin:.75rem 0 0;line-height:1.5;padding:0 .5rem}




















/* ── BEFORE / AFTER TOGGLE ── */
.ev-ba { margin-top:1.25rem; display:none; }
.ev-ba.show { display:block; }

.ev-ba-toggle {
    display: flex;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    border: 2px solid var(--ev-red);
    border-bottom: none;
}
/* Before button: square bottom-left to connect with viewer */
#ev-tbBefore { border-radius: 6px 0 0 0; }
/* After button: square bottom-right to connect with viewer */
#ev-tbAfter  { border-radius: 0 6px 0 0; }
/* toggle corners handled by parent border-radius */
.ev-ba-tb {
    flex: 1;
    padding: .65rem .75rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--ev-white);
    color: var(--ev-red);
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ev-ba-tb + .ev-ba-tb { border-left: 2px solid var(--ev-red); }
.ev-ba-tb.on { background: var(--ev-red); color: var(--ev-white); }

.ev-ba-viewer {
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
    background: var(--ev-bg);
}
.ev-ba-img {
    width: 100%;
    height: auto;
    display: block;
}
.ev-ba-hidden { display: none !important; }

.ev-ba-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: .5rem;
    min-height: 200px;
}

/* Overlay canvases hidden — preview shows original photo only */
#ev-cCol, #ev-cPat { display: none !important; }

.ev-fg-full { grid-column: 1 / -1; }

/* ── SIDING DETECTION ANIMATION ── */
.ev-cs { position: relative; }
.ev-scan-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
    border-radius: 4px;
}
.ev-scan-line {
    position: absolute;
    left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(139,14,18,0.0) 20%, rgba(139,14,18,0.8) 50%, rgba(139,14,18,0.0) 80%, transparent 100%);
    animation: ev-scan 2s ease-in-out infinite;
    box-shadow: 0 0 12px 4px rgba(139,14,18,0.3);
}
@keyframes ev-scan {
    0%   { top: 0%; opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}
.ev-scan-corners::before,
.ev-scan-corners::after {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    border-color: var(--ev-red);
    border-style: solid;
    opacity: 0.7;
}
.ev-scan-corners::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.ev-scan-corners::after  { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }
.ev-scan-label {
    position: absolute;
    bottom: 10px; left: 50%;
    transform: translateX(-50%);
    background: rgba(139,14,18,0.85);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    animation: ev-pulse 1.5s ease-in-out infinite;
}
@keyframes ev-pulse {
    0%, 100% { opacity: 0.7; }
    50%       { opacity: 1; }
}

/* ── SIDING DETECTION ANIMATION ── */
.ev-cs { position: relative; }
.ev-scan-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
}
.ev-scan-overlay.active { opacity: 1; }
.ev-scan-line {
    position: absolute;
    left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(139,14,18,.7), transparent);
    animation: ev-scan 1.8s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(139,14,18,.5);
}
@keyframes ev-scan {
    0%   { top: 0%;   opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}
.ev-scan-corners::before,
.ev-scan-corners::after {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    border-color: var(--ev-red);
    border-style: solid;
    opacity: .8;
}
.ev-scan-corners::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.ev-scan-corners::after  { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }