/* Final calculator output fixes.
 * Scope: Profit Margin empty-state/icon alignment and ROAS result alignment/locked outputs.
 */

/* Profit Margin: use the CURRENT rendered ROAS KEY METRICS typography exactly.
 * Keep these selectors specific so older Profit Margin page CSS cannot override them.
 */
.mppm-margin-page .mppm-margin-results-label{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:15px 20px 0!important;
}
.mppm-margin-page .mppm-margin-results-label>span{
  color:#071d37!important;
  font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  font-size:10px!important;
  line-height:1.2!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
}
.mppm-margin-page .mppm-margin-results-label>small{
  margin:0!important;
  color:#748398!important;
  font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  font-size:10px!important;
  line-height:1.2!important;
  font-weight:400!important;
}

/* Profit Margin: metric label + info icon must be the same inline unit as ROAS. */
.mppm-margin-page .mppm-margin-metrics article>span.mppm-margin-metric-label{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:5px!important;
  width:auto!important;
  min-height:15px!important;
  margin:0!important;
  color:#071d37!important;
  font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  font-size:10.5px!important;
  line-height:1.28!important;
  font-weight:850!important;
  letter-spacing:0!important;
  white-space:normal!important;
}
.mppm-margin-page .mppm-margin-output-info{
  position:relative!important;
  display:inline-grid!important;
  place-items:center!important;
  align-self:center!important;
  width:15px!important;
  height:15px!important;
  min-width:15px!important;
  flex:0 0 15px!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  vertical-align:middle!important;
  border:1px solid #cbd9e8!important;
  border-radius:50%!important;
  background:#f7faff!important;
  color:#55718e!important;
  font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:850!important;
}

/* Profit Margin tooltip: desktop is hover-first; keyboard focus and touch/click remain fallbacks. */
.mppm-margin-page .mppm-margin-output-info:hover::after,
.mppm-margin-page .mppm-margin-output-info:focus::after,
.mppm-margin-page .mppm-margin-output-info:focus-visible::after,
.mppm-margin-page .mppm-margin-output-info.open::after{
  opacity:1!important;
  transform:translate(-50%,0)!important;
}

/* Profit Margin card values/formulas follow the current shared ROAS output scale. */
.mppm-margin-page .mppm-margin-metrics article{
  min-height:98px!important;
  padding:14px!important;
  background:#fff!important;
}
.mppm-margin-page .mppm-margin-metrics article>strong{
  display:block!important;
  margin:6px 0 0!important;
  color:#071d37!important;
  font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  font-size:20px!important;
  line-height:1.1!important;
  font-weight:850!important;
  letter-spacing:-.45px!important;
}
.mppm-margin-page .mppm-margin-metrics article>small{
  display:block!important;
  margin:auto 0 0!important;
  padding-top:6px!important;
  color:#718399!important;
  font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
  font-size:9.5px!important;
  line-height:1.38!important;
  font-style:normal!important;
  font-weight:400!important;
}

/* Result panels already have a clear header boundary. Keep only one compact inner gutter. */
#mppm-roas-page .results-body{
  padding:12px 14px 18px!important;
}
#mppm-roas-page .results-body > .result-status{
  width:100%!important;
  margin:0!important;
}
#mppm-roas-page .results-body > .results-section-label{
  width:100%!important;
  margin:12px 0 0!important;
}
#mppm-roas-page .results-body > .metric-grid{
  width:100%!important;
  margin:10px 0 0!important;
}
#mppm-roas-page .results-body > .result-explainer{
  width:100%!important;
  margin:10px 0 0!important;
}

/* ROAS: Free/Guest Pro-only outputs remain visible for discovery, but clearly disabled. */
#mppm-roas-page .metric.mppm-plan-locked{
  position:relative!important;
  background:#f7f9fc!important;
  border-color:#dfe6ee!important;
  box-shadow:none!important;
}
#mppm-roas-page .metric.mppm-plan-locked .metric-label{
  color:#667789!important;
}
#mppm-roas-page .metric.mppm-plan-locked strong{
  color:#7d8b99!important;
}
#mppm-roas-page .metric.mppm-plan-locked em{
  color:#8593a2!important;
}
#mppm-roas-page .metric.mppm-plan-locked .metric-info{
  opacity:.68!important;
}
#mppm-roas-page .mppm-output-pro-pill{
  position:absolute!important;
  right:10px!important;
  bottom:10px!important;
  display:inline-grid!important;
  place-items:center!important;
  min-width:32px!important;
  height:18px!important;
  padding:0 7px!important;
  border:1px solid #cfe0f5!important;
  border-radius:999px!important;
  background:#eaf3ff!important;
  color:#1769e8!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
}

@media(max-width:700px){
  #mppm-roas-page .results-body{padding:10px 12px 16px!important}
  #mppm-roas-page .results-body > .result-status,
  #mppm-roas-page .results-body > .results-section-label,
  #mppm-roas-page .results-body > .metric-grid,
  #mppm-roas-page .results-body > .result-explainer{width:100%!important}
}