/* ------------------------------------------------------------------
   chakra-ui.css  —  cosmetic polish for the Vastu Chakra tool.

   ADDITIVE ONLY. Loaded after circle.css to override look & feel.
   The functional analysis area (#outerCircleDiv, #houseMap, #marker*,
   the <canvas> elements, .transbox, #cropImageDiv) is deliberately
   NOT targeted here — its pixel positioning must stay exactly as-is.
   ------------------------------------------------------------------ */

:root{
  --vk-gold:#c79a3b;
  --vk-gold-dark:#a87f28;
  --vk-maroon:#7a1f1f;
  --vk-ink:#403b34;
  --vk-muted:#6b645b;
  --vk-cream:#faf7f0;
  --vk-card:#ffffff;
  --vk-soft:#f5efe2;
}

body{
  background:var(--vk-cream);
  color:var(--vk-ink);
  font-family:"Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  line-height:1.65;
}

/* --- top navigation (shared _nav.php) --- */
.topnav{
  background:linear-gradient(90deg,#2b2622,#3a322b) !important;
  border-radius:0 0 14px 14px;
  padding:6px 4px;
}
.topnav img{ width:120px !important; margin:6px 0 6px 18px !important; }
.topnav a.icon{ background:var(--vk-gold) !important; }

/* --- step cards: breathing room so content doesn't hit the ceiling --- */
#first-step, #second-step, #third-step{
  max-width:1100px;
  margin:34px auto 28px !important;
  padding:34px 30px 40px;
  background:var(--vk-card);
  border:1px solid #efe7d6;
  border-radius:20px;
  box-shadow:0 12px 34px rgba(80,55,15,.07);
}
#first-step .row, #second-step .row, #third-step .row{ align-items:center; }

/* --- headings & copy --- */
#first-step h2, #second-step h2, #third-step h2{
  color:var(--vk-maroon);
  font-weight:700;
  letter-spacing:.2px;
  margin-bottom:10px;
}
.mahavastu-solution > p,
#second-step-p, #third-step-p{ color:var(--vk-muted); font-size:1.02rem; }

/* --- the preview chakra image --- */
img[id="16_zones_img"]{
  max-width:92%;
  height:auto;
  display:block;
  margin:0 auto;
  filter:drop-shadow(0 10px 26px rgba(122,31,31,.14));
}

/* --- radio option block --- */
.form-check-solution{
  background:var(--vk-soft);
  border-radius:12px;
  padding:16px 18px;
  margin-bottom:16px;
}
.form-check-label.radio{ font-weight:600; color:var(--vk-ink); }
.form-check-solution p{ margin:6px 0 0; color:var(--vk-muted); font-size:.95rem; }

/* --- numbered instruction rows --- */
.vastu-zone-head{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:var(--vk-soft);
  border-left:4px solid var(--vk-gold);
  border-radius:12px;
  padding:14px 18px;
  margin-top:16px !important;
}
.vastu-zone-head span{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px; height:30px;
  background:var(--vk-gold);
  color:#fff;
  font-weight:700;
  border-radius:50%;
}
.vastu-zone-head h4{ margin:3px 0 0; font-size:1rem; color:var(--vk-ink); line-height:1.5; }

/* --- buttons: soft, rounded, sensibly sized (not full-width slabs) --- */
#first-step .btn, #second-step .btn, #third-step .btn,
.third_step_button .btn, .download_button{
  background:linear-gradient(180deg,var(--vk-gold),var(--vk-gold-dark)) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  padding:12px 36px !important;
  font-size:1rem !important;
  font-weight:600 !important;
  width:auto !important;
  letter-spacing:.3px;
  box-shadow:0 6px 16px rgba(167,127,40,.28);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
#first-step .btn:hover, #second-step .btn:hover, #third-step .btn:hover,
.third_step_button .btn:hover, .download_button:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(167,127,40,.34);
}

.browseHomePlan{ color:var(--vk-muted) !important; }

/* --- mobile --- */
@media (max-width:768px){
  #first-step, #second-step, #third-step{
    margin:20px 12px !important;
    padding:24px 18px 30px;
  }
  #first-step h2, #second-step h2, #third-step h2{ font-size:1.5rem; text-align:center; }
  img[id="16_zones_img"]{ margin-top:22px; }
}

/* ==================================================================
   Login & Signup screens
   Turns the absolutely-positioned form into a clean centered card.
   (Overrides the pages' inline styles with !important.)
   ================================================================== */
.foo{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:48px 16px 60px;
  min-height:60vh;
}
.fo{
  position:static !important;
  right:auto !important;
  width:100% !important;
  max-width:440px !important;
  margin:40px auto !important;
  background:var(--vk-card) !important;
  border:1px solid #efe7d6;
  border-radius:18px !important;
  padding:42px 38px !important;
  box-shadow:0 16px 40px rgba(80,55,15,.10) !important;
}
.fo .head{
  color:var(--vk-maroon) !important;
  font-weight:700;
  font-family:"Segoe UI", system-ui, sans-serif !important;
}
.fo .new p{ color:var(--vk-muted); }
.fo .form-label{ font-weight:600; color:var(--vk-ink); margin-bottom:4px; }
.fo .form-control{
  border:1px solid #e3d9c4;
  border-radius:10px;
  padding:11px 14px;
  background:#fffdf8;
}
.fo .form-control:focus{
  border-color:var(--vk-gold);
  box-shadow:0 0 0 3px rgba(199,154,59,.18);
}
.fo .form-text{ font-size:.8rem; color:#9a9387; }

/* primary CTA (Login / SignUp submit) */
.fo button[type="submit"]{
  background:linear-gradient(180deg,var(--vk-gold),var(--vk-gold-dark)) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  padding:13px 24px !important;
  font-size:1.05rem !important;
  font-weight:600 !important;
  width:100% !important;
  margin-top:10px;
  box-shadow:0 6px 16px rgba(167,127,40,.28);
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.fo button[type="submit"]:hover{
  filter:brightness(1.06); transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(167,127,40,.34);
}
/* secondary CTA (the "Sign up" button on the login page) */
.fo button[type="button"]{
  background:#fff !important;
  color:var(--vk-maroon) !important;
  border:2px solid var(--vk-gold) !important;
  border-radius:999px !important;
  padding:11px 24px !important;
  font-size:1rem !important;
  font-weight:600 !important;
  width:100% !important;
}
.fo button[type="button"]:hover{ background:var(--vk-soft) !important; }

.fo .lost a{ color:var(--vk-muted); text-decoration:none; font-size:.9rem; }
.fo .lost a:hover{ color:var(--vk-maroon); }
.fo .login-remember{ display:flex; align-items:center; gap:8px; margin:14px 0 6px; color:var(--vk-muted); font-size:.92rem; }
.fo p[style*="30px"]{ font-size:1rem !important; color:#b9b1a3; margin:14px 0 !important; }

.alert{ max-width:460px; margin:24px auto 0 !important; border-radius:12px; }

@media (max-width:480px){
  .fo{ padding:32px 22px !important; }
  .foo{ padding:24px 12px 40px; }
}