/* House Affordability Calculator - minimal; rely on cg-ui + cg-bootstrap-ui.css + cg-ui.js */

/* Mode pills */
.cg-wrapper .hac-mode-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:6px;
}
.cg-wrapper .hac-mode-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  user-select:none;
  background:#fff;
}
.cg-wrapper .hac-mode-pill input{
  width:16px;
  height:16px;
}


/* Label + info icon: keep (i) next to label text (not pushed to far right) */
.cg-wrapper .hac-label-with-info{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.cg-wrapper .hac-label-with-info .cg-info{
  margin-left:0 !important;
}

/* Top headline stack (match screenshot feel) */
.cg-wrapper .hac-big-stack{
  text-align:center;
  padding:6px 0 10px;
}
.cg-wrapper .hac-title{
  font-weight:800;
  font-size:1.1rem;
  color:#111827;
}
.cg-wrapper .hac-big-money{
  font-weight:900;
  font-size:2.2rem;
  line-height:1.1;
  margin-top:4px;
  margin-bottom:6px;
  color:#111827;
}
.cg-wrapper .hac-subline{
  color:#374151;
  font-weight:500;
}
.cg-wrapper .hac-fit{
  color:#16a34a;
  font-weight:800;
}

/* Bar like screenshot + draggable */
.cg-wrapper .hac-afford-bar{
  position:relative;
  margin:14px auto 6px;
  max-width:520px;
  padding:22px 54px 10px;
  user-select:none;
  touch-action:none;
  cursor:pointer;
}
.cg-wrapper .hac-afford-icon{
  position:absolute;
  top:0;
  width:44px;
  height:44px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#fff;
  background:#111827;
  font-size:22px;
}
.cg-wrapper .hac-afford-icon--left{ left:0; }
.cg-wrapper .hac-afford-icon--right{ right:0; font-size:22px; }

.cg-wrapper .hac-afford-line{
  position:relative;
  height:2px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:visible;
}
.cg-wrapper .hac-afford-fill{
  height:2px;
  width:0%;
  background:#16a34a;
  border-radius:999px;
}
.cg-wrapper .hac-afford-knob{
  position:absolute;
  top:50%;
  left:0%;
  transform:translate(-50%, -50%);
  width:14px;
  height:14px;
  border-radius:999px;
  background:#2563eb;
  box-shadow:0 0 0 3px #fff;
  cursor:grab;
}
.cg-wrapper .hac-afford-knob:active{ cursor:grabbing; }

/* Result rows */
.cg-wrapper .hac-big{
  font-size:1.15rem;
  font-weight:900;
}
.cg-wrapper .hac-big-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:14px 0 8px;
}
.cg-wrapper .hac-big-label{
  font-weight:800;
}

/* Payment rows with subtle left bars */
.cg-wrapper .hac-block-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:14px 0 10px;
  font-weight:900;
}
.cg-wrapper .hac-rows{
  border-top:1px solid rgba(0,0,0,0.06);
}
.cg-wrapper .hac-row{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0 10px 14px;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.cg-wrapper .hac-row::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:5px;
  border-radius:999px;
  background:#e5e7eb;
}
.cg-wrapper .hac-row-val{
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}

.cg-wrapper .hac-row--pi::before{ background:#3b82f6; }
.cg-wrapper .hac-row--tax::before{ background:#22c55e; }
.cg-wrapper .hac-row--ins::before{ background:#f59e0b; }
.cg-wrapper .hac-row--pmi::before{ background:#ef4444; }
.cg-wrapper .hac-row--hoa::before{ background:#8b5cf6; }
.cg-wrapper .hac-row--total::before{ background:#111827; }

/* Formula collapsible */
.cg-wrapper .hac-formula-collapsible{
  margin-top:12px;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:14px;
  overflow:visible;
}
.cg-wrapper .hac-formula-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  cursor:pointer;
  background:rgba(0,0,0,0.02);
  border-radius:14px;
}
.cg-wrapper .hac-formula-title{
  font-weight:900;
}
.cg-wrapper .hac-formula-body{
  padding:12px 14px 14px;
  color:#374151;
  line-height:1.5;
}
.cg-wrapper .hac-formula-text p{
  margin:0 0 10px;
}
.cg-wrapper .hac-formula-text ul{
  margin:0 0 10px 18px;
}


/* DTI block */
.cg-wrapper .hac-dti{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(0,0,0,0.08);
}
.cg-wrapper .hac-dti-title{
  font-weight:600;
  margin-bottom:8px;
}
.cg-wrapper .hac-dti-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:6px 0;
  border-top:1px dashed rgba(0,0,0,0.08);
}
.cg-wrapper .hac-dti-row:first-child{
  border-top:none;
}
.cg-wrapper .hac-dti-label{
  opacity:0.85;
}
.cg-wrapper .hac-dti-val{
  font-weight:600;
}

/* Sensitivity table */
.cg-wrapper .hac-sense-table{
  width:100%;
  border-collapse:collapse;
  margin-top:6px;
}
.cg-wrapper .hac-sense-table th,
.cg-wrapper .hac-sense-table td{
  padding:10px 8px;
  border-top:1px solid rgba(0,0,0,0.08);
  vertical-align:top;
}
.cg-wrapper .hac-sense-table thead th{
  font-weight:700;
  border-top:none;
}
.cg-wrapper .hac-formula-body{
  overflow-x:auto;
}

/* Make advanced header fully clickable */
#hac-section-advanced .cg-section-header{
  cursor:pointer;
}

/* Guideline preset: prevent text truncation */
.cg-wrapper #hac-guideline-field .cg-select,
.cg-wrapper #hac-guideline{
  width:100%;
  min-width:320px;
}
@media (max-width: 520px){
  .cg-wrapper #hac-guideline-field .cg-select,
  .cg-wrapper #hac-guideline{
    min-width:0;
  }
}


/* HAC upgrades: ensure long preset labels & unit selectors don't truncate */
#hac-guideline, #hac-loan-type {
  width: 100%;
}
.cg-input-unit .cg-select--unit{
  width:auto;
  min-width:110px;
  max-width:140px;
}
@media (max-width: 420px){
  .cg-input-unit .cg-select--unit{
    width:auto;
    min-width:96px;
    max-width:120px;
  }
}


/* HAC best upgrades: limiting factor + MI/LTV helper */
.hac-limit{
  margin-top:8px;
  font-size:13px;
  line-height:1.35;
  color:rgba(255,255,255,0.9);
}
.hac-limit strong{ font-weight:700; }

.hac-note{
  margin:6px 0 10px;
  font-size:13px;
  line-height:1.35;
  color:rgba(255,255,255,0.8);
}


/* Limiting factor numeric breakdown */
.hac-limit-breakdown{margin-top:6px;font-size:13px;line-height:1.35;color:#6a7686;}



/* --- PATCH: keep certain selects/fields narrower so text wraps naturally on desktop --- */
.cg-wrapper #hac-dti-field,
.cg-wrapper #hac-rulepack-field,
.cg-wrapper #hac-loan-type-field{
  width: 100%;
  max-width: 420px; /* narrower than before so layout doesn't look stretched */
}

.cg-wrapper #hac-rulepack,
.cg-wrapper #hac-loan-type{
  width: 100%;
  max-width: 100%;
  min-width: 0; /* allow the control to shrink within max-width */
}

/* Slightly narrower on very large screens (keeps alignment with other advanced fields) */
@media (min-width: 1200px){
  .cg-wrapper #hac-dti-field,
  .cg-wrapper #hac-rulepack-field,
  .cg-wrapper #hac-loan-type-field{
    max-width: 380px;
  }
}