/* Canada Mortgage Payment Calculator - Ratehub-inspired */
/* Brand vars */
:root{
  --cmpc-primary:#0E3621;
  --cmpc-accent:#0E3621;
  --cmpc-text:#111827;
  --cmpc-border:#E5E7EB;
}
.cmpc-wrap{
  max-width: 920px;
  margin: 0 auto;
  color: var(--cmpc-text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  padding: 16px;
  display:flex;
  flex-direction:column;
  min-height: 70vh; /* help vertical centering on mobile */
  justify-content: center; /* vertical center on mobile portrait */
}
.cmpc-card{
  background:#fff;
  border:1px solid var(--cmpc-border);
  border-radius:14px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  overflow:hidden;
}
.cmpc-header{
  background: var(--cmpc-primary);
  color:#fff;
  padding:20px 24px;
  font-size:22px;
  font-weight:700;
  text-align:center;
}
.cmpc-body{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  padding:24px;
}
.cmpc-field{ display:flex; flex-direction:column; gap:6px; }
.cmpc-label{ font-weight:600; }
.cmpc-input,.cmpc-select{
  border:1px solid var(--cmpc-border);
  border-radius:10px;
  padding:12px 14px;
  font-size:16px;
  outline:none;
  width:100%;
  background:#fff;
}
.cmpc-row{ display:flex; justify-content:space-between; gap:12px; }
.cmpc-btn{
  background: var(--cmpc-accent) !important;
  color:#fff !important;
  border:none !important;
  border-radius:10px;
  padding:14px 16px;
  font-weight:700;
  cursor:pointer;
  width:100%;
}
.cmpc-summary{ border-top:1px solid var(--cmpc-border); background:#fafafa; padding:20px 24px; }
.cmpc-rows{ display:flex; flex-direction:column; gap:8px; }
.cmpc-row strong{ white-space:nowrap; }

/* Mobile portrait */
@media (max-width: 900px){
  .cmpc-body{ grid-template-columns: 1fr; padding:16px; gap:16px; }
  .cmpc-header{ font-size:20px; padding:16px; }
  .cmpc-summary{ padding:16px; }
  .cmpc-btn{ height:52px; font-size:16px; }
}

/* super small */
@media (max-width: 480px){
  .cmpc-wrap{ min-height: 85vh; }
}

/* prevent theme overrides */
.cmpc-btn, .cmpc-input, .cmpc-select{ box-shadow:none !important; }


/* ===== v1.0.1 Mobile Portrait: true vertical center + full stacking ===== */
.cmpc-wrap{
  min-height: 100dvh; /* dynamic viewport height for mobile toolbars */
  display:flex;
  flex-direction:column;
  justify-content:center; /* vertical center */
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
/* Force every field to full row to avoid two-up on narrow containers */
.cmpc-body .cmpc-field{ grid-column: 1 / -1 !important; }

/* Earlier breakpoint to 1-col to match phone preview even inside wide builders */
@media (max-width: 1200px){
  .cmpc-body{ grid-template-columns: 1fr !important; }
}

/* Down payment input + select: stack on small screens */
@media (max-width: 640px){
  .cmpc-row{ flex-direction: column; }
  .cmpc-row .cmpc-input, .cmpc-row .cmpc-select{ width: 100%; }
}

/* Label wrapping & spacing */
.cmpc-label{ font-size:16px; line-height:1.25; word-break: keep-all; }


/* ===== v1.0.2: Force all options stacked + center for mobile portrait ===== */
@media (max-width: 900px){
  .cmpc-body{ grid-template-columns:1fr !important; justify-items:center; }
  .cmpc-field{ grid-column:1 / -1 !important; width:100%; }
  .cmpc-field .cmpc-input,
  .cmpc-field .cmpc-select{ width:100%; }
  .cmpc-row{ flex-direction:column; align-items:stretch; }
}
/* Center card inside wrap */
.cmpc-wrap{ display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:100dvh; }

/* Button hover color */
.cmpc-btn:hover{ background:#F7D76C !important; color:#0E3621 !important; }