/* ===================================================
   Vastu Calculator page
   Uses the same design tokens defined in style.css :root
   =================================================== */

.vastu-calc-section{ background:var(--bg-light); }

/* ----- Form card ----- */
.vastu-card{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:28px;
}
@media (max-width:575px){ .vastu-card{ padding:20px 16px; } }

.vastu-card-title{
  font-weight:700;
  font-size:1.25rem;
  margin-bottom:4px;
  color:var(--text-dark);
}
.vastu-card-sub{
  color:var(--text-muted);
  font-size:.88rem;
  margin-bottom:20px;
}

.vastu-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 18px;
}
@media (max-width:575px){ .vastu-fields{ grid-template-columns:1fr; } }

.vastu-field label{
  display:flex; align-items:center; gap:8px;
  font-size:.84rem; font-weight:600;
  color:var(--text-dark);
  margin-bottom:6px;
}
.vastu-field label i{ color:var(--accent-dark); font-size:1rem; }

.vastu-field .form-select{
  border:1.5px solid var(--border-soft);
  border-radius:var(--radius-sm);
  padding:.6rem .8rem;
  font-size:.86rem;
  color:var(--text-dark);
}
.vastu-field .form-select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 .2rem rgba(255,198,11,.22);
  outline:none;
}

.vastu-required{ color:#e0445a; }

.vastu-field .form-select.is-invalid{
  border-color:#e0445a;
}
.vastu-field .form-select.is-invalid:focus{
  box-shadow:0 0 0 .2rem rgba(224,68,90,.18);
}
.vastu-field .cf-error{
  display:block; max-height:0; opacity:0; overflow:hidden;
  color:#e0445a; font-size:.72rem; margin-top:0; font-weight:500;
  transition:max-height .25s ease, opacity .2s ease, margin-top .25s ease;
}
.vastu-field .cf-error.show{ max-height:32px; opacity:1; margin-top:5px; }

.vastu-disclaimer{
  font-size:.76rem;
  color:var(--text-muted);
  margin:12px 0 0;
}

/* ----- Result card ----- */
.vastu-result-card{
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:28px;
  position:sticky;
  top:90px;
}
@media (max-width:575px){ .vastu-result-card{ padding:20px 16px; position:static; } }

.vastu-result-placeholder{
  text-align:center;
  padding:30px 10px;
  color:var(--text-muted);
}
.vastu-result-placeholder i{
  font-size:2.4rem;
  color:var(--accent-dark);
  display:block;
  margin-bottom:12px;
}
.vastu-result-placeholder p{ font-size:.9rem; margin-bottom:0; }

.vastu-result-placeholder.vastu-warning i{ color:#e0445a; }
.vastu-result-placeholder.vastu-warning p{ color:var(--text-dark); }

/* Score gauge */
.vastu-gauge-wrap{
  display:flex; align-items:center; gap:18px;
  margin-bottom:18px;
  padding-bottom:18px;
  border-bottom:1px solid var(--border-soft);
}
.vastu-gauge{
  --pct:0;
  width:96px; height:96px;
  border-radius:50%;
  flex:0 0 auto;
  background:conic-gradient(var(--vastu-gauge-color, var(--accent)) calc(var(--pct) * 1%), var(--border-soft) 0);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.vastu-gauge::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:50%;
  background:#fff;
}
.vastu-gauge-value{
  position:relative; z-index:2;
  font-weight:700;
  font-size:1.15rem;
  color:var(--text-dark);
}
.vastu-gauge-value small{
  display:block;
  font-weight:600;
  font-size:.62rem;
  color:var(--text-muted);
}

.vastu-verdict-title{
  font-weight:700;
  font-size:1.05rem;
  margin-bottom:4px;
  color:var(--text-dark);
}
.vastu-verdict-sub{
  font-size:.82rem;
  color:var(--text-muted);
  margin-bottom:0;
}

/* Per-factor breakdown */
.vastu-breakdown-title{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:10px;
}
.vastu-factor-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--border-soft);
}
.vastu-factor-row:last-child{ border-bottom:none; }
.vastu-factor-icon{
  width:34px; height:34px;
  border-radius:10px;
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem;
  margin-top:1px;
}
.vastu-factor-icon.tier-ideal{ background:#e3f7ec; color:#1e9e5a; }
.vastu-factor-icon.tier-good{ background:var(--blue-soft); color:#1f6fc9; }
.vastu-factor-icon.tier-neutral{ background:var(--peach-soft); color:#c96a1f; }
.vastu-factor-icon.tier-avoid{ background:#fde6e8; color:#e0445a; }

.vastu-factor-body{ flex:1 1 auto; min-width:0; }
.vastu-factor-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.vastu-factor-name{
  font-size:.87rem;
  font-weight:600;
  color:var(--text-dark);
}
.vastu-factor-badge{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  padding:2px 9px;
  border-radius:999px;
  white-space:nowrap;
}
.vastu-factor-badge.tier-ideal{ background:#e3f7ec; color:#1e9e5a; }
.vastu-factor-badge.tier-good{ background:var(--blue-soft); color:#1f6fc9; }
.vastu-factor-badge.tier-neutral{ background:var(--peach-soft); color:#c96a1f; }
.vastu-factor-badge.tier-avoid{ background:#fde6e8; color:#e0445a; }

.vastu-factor-dir{
  font-size:.78rem;
  color:var(--text-muted);
  margin-top:1px;
}
.vastu-factor-remedy{
  font-size:.78rem;
  color:var(--text-dark);
  background:var(--bg-light);
  border-radius:var(--radius-sm);
  padding:8px 10px;
  margin-top:6px;
}
.vastu-factor-remedy i{ color:var(--accent-dark); margin-right:4px; }

/* CTA */
.vastu-result-cta{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--border-soft);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.vastu-result-cta .btn{ flex:1 1 150px; font-size:.85rem; }