/* ============================================================
   NISARGA — Estimate Calculator (popup journey)
   Uses theme tokens from styles.css
   ============================================================ */

.est-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 32px);
  background: rgba(42,30,22,0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.est-overlay.open { opacity: 1; pointer-events: auto; }

.est-modal {
  position: relative; width: 100%; max-width: 720px;
  max-height: 92vh; display: flex; flex-direction: column;
  background: var(--sand-50); border-radius: 22px; overflow: hidden;
  box-shadow: 0 50px 120px -30px rgba(42,30,22,0.6);
  transform: translateY(24px) scale(.97); opacity: 0;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s;
}
.est-overlay.open .est-modal { transform: none; opacity: 1; }

/* Header */
.est-head { padding: 22px clamp(22px,4vw,40px) 0; flex-shrink: 0; }
.est-head-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.est-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--espresso); }
.est-brand .est-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--terracotta); }
.est-close { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: var(--cocoa); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: .25s; display: grid; place-items: center; flex-shrink: 0; }
.est-close:hover { background: var(--espresso); color: var(--sand-50); border-color: var(--espresso); transform: rotate(90deg); }

.est-progress { margin-top: 18px; height: 4px; border-radius: 4px; background: var(--sand-200); overflow: hidden; }
.est-progress-bar { height: 100%; width: 16%; background: var(--terracotta); border-radius: 4px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.est-stepmeta { margin-top: 10px; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); font-weight: 600; }

/* Body */
.est-body { flex: 1; overflow-y: auto; padding: clamp(18px,3vw,28px) clamp(22px,4vw,40px); }
.est-step { display: none; animation: estIn .45s cubic-bezier(.2,.8,.2,1); }
.est-step.active { display: block; }
@keyframes estIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes estInBack { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.est-step.back { animation-name: estInBack; }

.est-step h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing: -0.02em; color: var(--espresso); line-height: 1.08; }
.est-step .est-sub { color: var(--stone); margin-top: 8px; font-size: 0.98rem; max-width: 48ch; }
.est-fields { margin-top: 24px; }

/* Choice cards grid */
.est-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.est-choice {
  text-align: left; cursor: pointer; border: 1.5px solid var(--line);
  background: var(--sand-50); border-radius: 14px; padding: 20px;
  transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
  display: flex; flex-direction: column; gap: 6px; position: relative;
}
.est-choice:hover { border-color: var(--clay-400); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.est-choice.sel { border-color: var(--terracotta); background: #fff; box-shadow: 0 0 0 3px rgba(198,85,46,0.14); }
.est-choice .ec-ico { font-size: 1.5rem; color: var(--terracotta); margin-bottom: 4px; }
.est-choice .ec-ico svg { width: 26px; height: 26px; display: block; }
/* project-type cards: icon in a tinted tile */
.est-choices .est-choice .ec-ico {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 10px;
  background: var(--sand-150); display: grid; place-items: center;
  transition: background .25s, color .25s;
}
.est-choices .est-choice.sel .ec-ico { background: var(--terracotta); color: var(--sand-50); }
.est-tier .ec-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--sand-150); display: grid; place-items: center; flex-shrink: 0; transition: background .25s, color .25s; }
.est-tier .ec-ico svg { width: 22px; height: 22px; }
.est-tier.sel .ec-ico { background: var(--terracotta); color: var(--sand-50); }
.est-choice .ec-title { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: var(--espresso); }
.est-choice .ec-desc { font-size: 0.85rem; color: var(--stone); line-height: 1.4; }
.est-choice .ec-check { position: absolute; top: 16px; right: 16px; width: 22px; height: 22px; border-radius: 50%; background: var(--terracotta); color: #fff; display: grid; place-items: center; font-size: 0.8rem; opacity: 0; transform: scale(.6); transition: .25s; }
.est-choice.sel .ec-check { opacity: 1; transform: none; }

/* Tier cards (full width, with price hint) */
.est-tiers { display: flex; flex-direction: column; gap: 12px; }
.est-tier { flex-direction: row; align-items: center; gap: 16px; }
.est-tier > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }
.est-tier .ec-ico { margin: 0; }
.est-tier .ec-price { margin-left: auto; text-align: right; flex-shrink: 0; }
.est-tier .ec-price b { font-family: var(--font-display); color: var(--espresso); font-size: 1.05rem; display: block; }
.est-tier .ec-price span { font-size: 0.74rem; color: var(--stone); }

/* Chips */
.est-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.est-chip { cursor: pointer; border: 1.5px solid var(--line); background: var(--sand-50); border-radius: 100px; padding: 11px 20px; font-weight: 600; font-size: 0.95rem; color: var(--cocoa); transition: .2s; }
.est-chip:hover { border-color: var(--clay-400); }
.est-chip.sel { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }

/* Slider / number */
.est-field { margin-bottom: 22px; }
.est-field label { display: block; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--stone); margin-bottom: 10px; }
.est-area-row { display: flex; align-items: center; gap: 16px; }
.est-area-num { width: 130px; flex-shrink: 0; }
.est-area-num input { width: 100%; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--espresso); background: var(--sand-100); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; text-align: center; }
.est-area-num input:focus { outline: none; border-color: var(--terracotta); }
.est-range { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 6px; background: var(--sand-200); outline: none; }
.est-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--terracotta); cursor: pointer; border: 3px solid var(--sand-50); box-shadow: var(--shadow-sm); }
.est-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--terracotta); cursor: pointer; border: 3px solid var(--sand-50); }
.est-total-hint { margin-top: 12px; font-size: 0.95rem; color: var(--cocoa); }
.est-total-hint b { color: var(--terracotta); font-family: var(--font-display); }

.est-input, .est-select { width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--espresso); background: var(--sand-50); border: 1.5px solid var(--line); border-radius: 10px; padding: 14px 15px; transition: border-color .25s, box-shadow .25s; }
.est-input:focus, .est-select:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 4px rgba(198,85,46,0.12); background: #fff; }
.est-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Footer nav */
.est-foot { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px clamp(22px,4vw,40px); border-top: 1px solid var(--line-soft); background: var(--sand-100); }
.est-back { background: none; border: none; color: var(--stone); font-weight: 600; cursor: pointer; font-family: var(--font-body); font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px; padding: 8px; transition: color .2s; }
.est-back:hover { color: var(--espresso); }
.est-back[hidden] { visibility: hidden; }
.est-next { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; padding: 14px 26px; border-radius: 100px; border: none; cursor: pointer; background: var(--terracotta); color: var(--sand-50); transition: transform .25s, background .25s, opacity .2s; }
.est-next:hover { background: var(--terracotta-deep); transform: translateY(-2px); }
.est-next:disabled { opacity: 0.45; pointer-events: none; }
.est-err { color: #B3261E; font-size: 0.85rem; font-weight: 600; margin-top: 8px; min-height: 1em; }

/* ---------- RESULT step ---------- */
.est-result { text-align: center; }
.est-result .er-eyebrow { font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--terracotta); font-weight: 700; }
.est-range-big { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; color: var(--espresso); font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1; margin: 14px 0 6px; }
.est-range-big .dash { color: var(--clay-400); font-weight: 400; }
.est-rate-note { color: var(--stone); font-size: 0.95rem; }
.est-breakdown { margin-top: 26px; text-align: left; background: var(--sand-100); border-radius: 16px; padding: 22px 24px; }
.est-breakdown h4 { font-family: var(--font-display); font-size: 1rem; color: var(--espresso); margin-bottom: 14px; }
.est-brow { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.est-brow:first-of-type { border-top: none; }
.est-brow .eb-label { color: var(--cocoa); font-size: 0.92rem; }
.est-brow .eb-bar { flex: 1; height: 6px; border-radius: 6px; background: var(--sand-200); overflow: hidden; max-width: 160px; margin-left: auto; }
.est-brow .eb-bar span { display: block; height: 100%; background: var(--clay-400); border-radius: 6px; }
.est-brow .eb-val { font-family: var(--font-display); font-weight: 600; color: var(--espresso); font-size: 0.92rem; width: 92px; text-align: right; flex-shrink: 0; }
.est-summary { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.est-summary .es-tag { font-size: 0.82rem; background: var(--sand-150); color: var(--cocoa); border-radius: 100px; padding: 7px 14px; font-weight: 600; }
.est-disclaimer { margin-top: 18px; font-size: 0.8rem; color: var(--stone); line-height: 1.5; max-width: 52ch; margin-left: auto; margin-right: auto; }
.est-result-cta { margin-top: 22px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* success tick on contact submit / sending */
.est-sending { display: inline-flex; align-items: center; gap: 10px; }
.est-spin { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: estspin .7s linear infinite; }
@keyframes estspin { to { transform: rotate(360deg); } }

/* trust line on contact step */
.est-trust { margin-top: 16px; font-size: 0.82rem; color: var(--stone); display: flex; align-items: center; gap: 8px; }
.est-trust .est-lock { color: var(--olive); }

@media (max-width: 560px) {
  .est-choices { grid-template-columns: 1fr; }
  .est-grid2 { grid-template-columns: 1fr; }
  .est-modal { max-height: 94vh; border-radius: 18px; }
  .est-tier .ec-price { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .est-overlay, .est-modal, .est-step { transition: none !important; animation: none !important; }
}