/* ============================================================
   ESTROM — hinnapäringu popup
   Kõik klassid on .ep- prefiksiga, et olemasoleva teemaga
   konflikte ei tekiks. Värvid ja fondid on samad, mis style.css.
   ============================================================ */

.ep-root{
  --ep-bg:#0c1622;
  --ep-card:#101b2b;
  --ep-navy:#122034;
  --ep-navy-card:#16283F;
  --ep-line:#28405C;
  --ep-green:#4C8C3F;
  --ep-green-bright:#7FC49A;
  --ep-text:#eef1f6;
  --ep-muted:#8496AC;
  --ep-ease:cubic-bezier(.16,.8,.24,1);
  font-family:"Space Grotesk",system-ui,-apple-system,sans-serif;
}

/* ---------- Overlay ---------- */
.ep-overlay{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  padding:1.2rem;
  background:rgba(6,11,18,.72);
  -webkit-backdrop-filter:blur(6px) saturate(140%);
  backdrop-filter:blur(6px) saturate(140%);
  opacity:0;visibility:hidden;
  transition:opacity .32s var(--ep-ease),visibility .32s;
}
.ep-overlay.is-open{opacity:1;visibility:visible}

/* ---------- Modal ---------- */
.ep-modal{
  position:relative;
  width:100%;max-width:1000px;max-height:min(680px,92vh);
  display:grid;grid-template-columns:1.35fr .95fr;
  background:var(--ep-card);
  border:1px solid var(--ep-line);
  border-radius:20px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75);
  transform:translateY(18px) scale(.985);
  transition:transform .38s var(--ep-ease);
}
.ep-overlay.is-open .ep-modal{transform:none}

.ep-close{
  position:absolute;top:14px;right:14px;z-index:5;
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:var(--ep-text);font-size:1.05rem;line-height:1;
  cursor:pointer;transition:background .2s,border-color .2s;
}
.ep-close:hover{background:rgba(255,255,255,.12);border-color:var(--ep-green)}

.ep-confirm{
  position:absolute;inset:0;z-index:8;
  display:flex;align-items:center;justify-content:center;
  padding:1.4rem;
  background:rgba(8,14,24,.72);
  backdrop-filter:blur(6px);
}
.ep-confirm[hidden]{display:none!important}
.ep-confirm-card{
  width:min(420px,100%);
  background:var(--ep-card,#122034);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  padding:1.6rem 1.5rem 1.35rem;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.55);
}
.ep-confirm-q{
  margin:0 0 .55rem;
  font-size:1.25rem;font-weight:700;letter-spacing:-.02em;
  color:var(--ep-text);
}
.ep-confirm-text{
  margin:0 0 1.25rem;
  color:var(--ep-muted,#9aa7bd);
  font-size:.95rem;line-height:1.45;
}
.ep-confirm-actions{
  display:flex;flex-wrap:wrap;gap:.65rem;
}
.ep-confirm-actions .ep-btn{flex:1 1 auto;min-width:140px;justify-content:center}

/* ---------- Vasak pool ---------- */
.ep-main{
  padding:2.6rem 2.4rem 2rem;
  overflow-y:auto;
  display:flex;flex-direction:column;
}
.ep-main::-webkit-scrollbar{width:6px}
.ep-main::-webkit-scrollbar-thumb{background:var(--ep-line);border-radius:3px}

.ep-tag{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ep-green-bright);font-weight:600;margin-bottom:.7rem;
}
.ep-tag::before{content:"";width:24px;height:1px;background:var(--ep-green-bright)}

.ep-title{
  font-size:1.85rem;font-weight:700;line-height:1.15;
  color:var(--ep-text);letter-spacing:-.02em;margin:0 0 1.5rem;
}

/* ---------- Progress ---------- */
.ep-progress{display:flex;align-items:center;gap:.85rem;margin-bottom:1.9rem}
.ep-progress-num{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.72rem;font-weight:600;color:var(--ep-muted);
  min-width:34px;letter-spacing:.04em;
}
.ep-progress-track{
  flex:1;height:5px;border-radius:99px;
  background:rgba(255,255,255,.07);overflow:hidden;
}
.ep-progress-fill{
  height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--ep-green),var(--ep-green-bright));
  transition:width .45s var(--ep-ease);
}

/* ---------- Sammud ---------- */
.ep-step{display:none;animation:ep-in .38s var(--ep-ease) both}
.ep-step.is-active{display:block}
@keyframes ep-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.ep-q{
  font-size:1.18rem;font-weight:600;color:var(--ep-text);
  margin:0 0 .35rem;line-height:1.35;
}
.ep-hint{font-size:.84rem;color:var(--ep-muted);margin:0 0 1.15rem}

/* ---------- Valikunupud ---------- */
.ep-opts{display:grid;gap:.6rem}
.ep-opts.ep-two{grid-template-columns:1fr 1fr}

.ep-opt{
  position:relative;text-align:left;cursor:pointer;
  display:flex;align-items:flex-start;gap:.75rem;
  padding:.9rem 1.05rem;
  background:var(--ep-navy-card);
  border:1px solid var(--ep-line);
  border-radius:13px;color:var(--ep-text);
  font:inherit;font-size:.94rem;font-weight:500;
  transition:border-color .2s,background .2s,transform .18s;
}
.ep-opt:hover{border-color:var(--ep-green);transform:translateY(-1px)}
.ep-opt:focus-visible{outline:2px solid var(--ep-green-bright);outline-offset:2px}
.ep-opt.is-sel{
  background:var(--ep-green);border-color:var(--ep-green);
  color:#fff;font-weight:600;
}
.ep-opt.is-sel .ep-opt-sub{color:rgba(255,255,255,.85)}
.ep-opt.is-sel .ep-ico{opacity:1}

.ep-ico{flex-shrink:0;width:20px;height:20px;margin-top:1px;opacity:.7;transition:opacity .2s}
.ep-ico svg{
  width:100%;height:100%;display:block;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.ep-opt-txt{display:flex;flex-direction:column;gap:.15rem}
.ep-opt-sub{font-size:.76rem;font-weight:500;color:var(--ep-muted);line-height:1.3}

/* ---------- Väljad ---------- */
.ep-field{margin-bottom:.85rem}
.ep-label{
  display:block;font-size:.78rem;font-weight:600;
  color:var(--ep-muted);margin-bottom:.35rem;
}
.ep-input{
  width:100%;padding:.85rem 1rem;
  background:var(--ep-navy-card);
  border:1px solid var(--ep-line);border-radius:12px;
  color:var(--ep-text);font:inherit;font-size:.95rem;
  transition:border-color .2s,box-shadow .2s;
}
.ep-input::placeholder{color:#5d6f89}
.ep-input:focus{
  outline:none;border-color:var(--ep-green);
  box-shadow:0 0 0 3px rgba(76,140,63,.18);
}
.ep-input.is-bad{border-color:#d05a5a}
.ep-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}

.ep-err{display:none;font-size:.8rem;color:#e08383;margin:.6rem 0 0}
.ep-err.is-on{display:block}

.ep-consent{
  display:flex;gap:.6rem;align-items:flex-start;
  font-size:.76rem;color:var(--ep-muted);line-height:1.45;
  margin-top:.9rem;cursor:pointer;
}
.ep-consent input{
  accent-color:var(--ep-green);margin-top:.15rem;
  width:15px;height:15px;flex-shrink:0;cursor:pointer;
}

/* ---------- Navigatsioon ---------- */
.ep-nav{display:flex;gap:.7rem;align-items:center;margin-top:1.6rem}
.ep-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.82rem 1.6rem;border-radius:999px;
  font:inherit;font-size:.92rem;font-weight:600;
  cursor:pointer;border:1px solid transparent;
  transition:transform .2s,filter .2s,background .2s,border-color .2s;
}
.ep-btn--next{background:var(--ep-green);color:#fff;border-color:var(--ep-green)}
.ep-btn--next:hover{transform:translateY(-2px);filter:brightness(1.1)}
.ep-btn--next[disabled]{opacity:.4;cursor:not-allowed;transform:none;filter:none}
.ep-btn--back{background:transparent;color:var(--ep-text);border-color:rgba(255,255,255,.2)}
.ep-btn--back:hover{border-color:var(--ep-green-bright)}
.ep-btn--back[hidden]{display:none}

/* ---------- Tänuekraan ---------- */
.ep-done{text-align:center;padding:1.5rem 0 .5rem}
.ep-done-ring{
  width:66px;height:66px;margin:0 auto 1.3rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(76,140,63,.15);border:1px solid var(--ep-green);
  color:var(--ep-green-bright);
}
.ep-done-ring svg{
  width:30px;height:30px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}
.ep-done h3{font-size:1.4rem;font-weight:700;margin:0 0 .6rem;color:var(--ep-text)}
.ep-done p{font-size:.92rem;color:var(--ep-muted);line-height:1.6;max-width:380px;margin:0 auto}
.ep-done-owner{
  margin-top:1.4rem;padding:1rem 1.2rem;
  background:var(--ep-navy-card);border:1px solid var(--ep-line);
  border-radius:14px;text-align:left;
  display:flex;align-items:center;gap:.9rem;
}
.ep-done-av{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:var(--ep-green);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:"JetBrains Mono",monospace;font-size:.82rem;font-weight:600;
}
.ep-done-owner strong{display:block;font-size:.95rem;color:var(--ep-text)}
.ep-done-owner span{display:block;font-size:.78rem;color:var(--ep-muted);margin-top:.1rem}

/* ---------- Parem pool ---------- */
.ep-side{
  background:var(--ep-navy);
  border-left:1px solid var(--ep-line);
  padding:2.6rem 2rem;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
}
.ep-side::after{
  content:"";position:absolute;top:-30%;right:-30%;
  width:340px;height:340px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(76,140,63,.22) 0%,transparent 68%);
  filter:blur(24px);
}
.ep-proof{position:relative;z-index:1;animation:ep-in .5s var(--ep-ease) both}
.ep-proof-kicker{
  font-family:"JetBrains Mono",monospace;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ep-green-bright);margin:0 0 1.1rem;
}
.ep-proof-text{
  font-size:1.16rem;line-height:1.5;font-weight:500;
  color:var(--ep-text);letter-spacing:-.01em;margin:0;
}
.ep-proof-meta{margin-top:1.4rem}
.ep-proof-name{
  font-family:"JetBrains Mono",monospace;
  font-size:.78rem;font-weight:600;color:var(--ep-text);
  text-transform:uppercase;letter-spacing:.06em;margin:0;
}
.ep-proof-role{
  font-family:"JetBrains Mono",monospace;
  font-size:.72rem;color:var(--ep-muted);margin:.25rem 0 0;
  text-transform:uppercase;letter-spacing:.05em;
}
.ep-dots{display:flex;gap:.45rem;margin-top:1.8rem;position:relative;z-index:1}
.ep-dot{
  width:7px;height:7px;border-radius:50%;padding:0;cursor:pointer;
  background:rgba(255,255,255,.22);border:0;
  transition:background .25s,width .25s;
}
.ep-dot.is-on{background:var(--ep-green-bright);width:20px;border-radius:99px}

/* ---------- Mobiil ---------- */
@media (max-width:860px){
  .ep-modal{grid-template-columns:1fr;max-height:94vh}
  .ep-side{display:none}
  .ep-main{padding:2.2rem 1.4rem 1.6rem}
  .ep-title{font-size:1.5rem}
  .ep-opts.ep-two{grid-template-columns:1fr}
  .ep-row{grid-template-columns:1fr}
  .ep-nav{
    position:sticky;bottom:0;background:var(--ep-card);
    padding-top:1rem;margin-top:1.2rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .ep-overlay,.ep-modal,.ep-step,.ep-proof,.ep-progress-fill{
    transition:none;animation:none;
  }
}
