/* AAG ROI Calculator — inherits the theme's design tokens, with fallbacks. */
.aag-roi {
  --roi-blue:   var(--blue, #21409A);
  --roi-dark:   var(--blue-dark, #0A162E);
  --roi-amber:  var(--amber, #FBAB18);
  --roi-ink:    var(--black, #181818);
  --roi-grey:   var(--grey, #939598);
  --roi-rule:   var(--grey-rule, #EBEBEB);
  --roi-panel:  var(--off-white, #FAFAFA);
  --roi-font:   var(--f-body, "Archivo", system-ui, sans-serif);
  --roi-head:   var(--f-head, "Archivo", system-ui, sans-serif);

  font-family: var(--roi-font);
  color: var(--roi-ink);
  padding: 64px 24px;
  background: #fff;
}
.aag-roi--dark { background: var(--roi-dark); color: #fff; }

.aag-roi-inner { max-width: 1040px; margin: 0 auto; }

.aag-roi-head { text-align: center; margin-bottom: 40px; }
.aag-roi-head h2 { font-family: var(--roi-head); font-size: clamp(24px, 3vw, 34px); line-height: 1.1; margin: 0 0 12px; }
.aag-roi-head p { color: var(--roi-grey); font-size: 16px; max-width: 620px; margin: 0 auto; }
.aag-roi--dark .aag-roi-head p { color: rgba(255,255,255,.65); }

.aag-roi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 820px) { .aag-roi-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ── Inputs ─────────────────────────────────────────────── */
.aag-roi-field { margin-bottom: 26px; }
.aag-roi-field > label {
  display: block; font-size: 13px; font-weight: 600; margin-bottom: 10px;
  font-family: var(--roi-head);
}
.aag-roi--dark .aag-roi-field > label { color: #fff; }

.aag-roi-slider { display: flex; align-items: center; gap: 16px; }
.aag-roi-slider input[type=range] {
  flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px;
  background: var(--roi-rule); outline: none; cursor: pointer;
}
.aag-roi--dark .aag-roi-slider input[type=range] { background: rgba(255,255,255,.15); }
.aag-roi-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--roi-blue); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer;
}
.aag-roi-slider input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--roi-blue);
  border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer;
}
.aag-roi-readout { display: flex; align-items: center; gap: 4px; }
.aag-roi-readout input {
  width: 92px; text-align: right; font-weight: 600; font-family: var(--roi-head);
}
.aag-roi-suffix { color: var(--roi-grey); font-weight: 600; }
.aag-roi--dark .aag-roi-suffix { color: rgba(255,255,255,.6); }

.aag-roi-input { position: relative; display: flex; align-items: center; }
/* Higher specificity than the base number-input rule so the R prefix has room. */
.aag-roi .aag-roi-input.is-currency input[data-role="number"] { padding-left: 28px; }
.aag-roi-prefix {
  position: absolute; left: 12px; color: var(--roi-grey); font-weight: 600; pointer-events: none;
}

.aag-roi input[data-role="number"] {
  font-family: var(--roi-font); font-size: 15px; color: var(--roi-ink);
  padding: 11px 12px; border: 1px solid var(--roi-rule); border-radius: 8px; background: #fff;
  width: 100%; box-sizing: border-box; -moz-appearance: textfield;
}
.aag-roi input[data-role="number"]:focus { border-color: var(--roi-blue); outline: none; box-shadow: 0 0 0 3px rgba(33,64,154,.12); }
.aag-roi--dark input[data-role="number"] { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; }
.aag-roi--dark .aag-roi-prefix { color: rgba(255,255,255,.6); }

/* ── Results ────────────────────────────────────────────── */
.aag-roi-results {
  background: var(--roi-panel); border: 1px solid var(--roi-rule); border-radius: 16px; padding: 28px;
}
.aag-roi--dark .aag-roi-results { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }

.aag-roi-tile { padding: 14px 0; border-bottom: 1px solid var(--roi-rule); display: flex; flex-direction: column; gap: 4px; }
.aag-roi--dark .aag-roi-tile { border-bottom-color: rgba(255,255,255,.1); }
.aag-roi-tile-label { font-size: 13px; color: var(--roi-grey); }
.aag-roi-tile-value { font-family: var(--roi-head); font-size: 22px; font-weight: 700; }
.aag-roi--dark .aag-roi-tile-value { color: #fff; }

.aag-roi-tile.is-primary {
  background: var(--roi-blue); color: #fff; margin: -28px -28px 8px; padding: 24px 28px;
  border-radius: 16px 16px 0 0; border-bottom: 0;
}
.aag-roi-tile.is-primary .aag-roi-tile-label { color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.aag-roi-tile.is-primary .aag-roi-tile-value { font-size: 40px; color: var(--roi-amber); }

/* ── Email capture ──────────────────────────────────────── */
.aag-roi-email { margin-top: 22px; }
.aag-roi-email-label { font-size: 13px; font-weight: 600; margin: 0 0 10px; font-family: var(--roi-head); }
.aag-roi-email-row { display: flex; gap: 8px; }
.aag-roi-email input[type=email] {
  flex: 1; font-family: var(--roi-font); font-size: 15px; padding: 11px 12px;
  border: 1px solid var(--roi-rule); border-radius: 8px; background: #fff; color: var(--roi-ink);
  box-sizing: border-box;
}
.aag-roi--dark .aag-roi-email input[type=email] { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; }
.aag-roi-email input[type=email]:focus { border-color: var(--roi-blue); outline: none; box-shadow: 0 0 0 3px rgba(33,64,154,.12); }
.aag-roi-email button {
  font-family: var(--roi-head); font-weight: 600; font-size: 14px; white-space: nowrap;
  padding: 11px 18px; border: 0; border-radius: 8px; background: var(--roi-amber); color: var(--roi-ink); cursor: pointer;
  transition: background .2s ease;
}
.aag-roi-email button:hover { background: #e09500; }
.aag-roi-email button:disabled { opacity: .6; cursor: default; }
.aag-roi-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aag-roi-email-msg { font-size: 13px; margin: 10px 0 0; min-height: 18px; }
.aag-roi-email-msg.is-ok { color: #1a7f37; }
.aag-roi-email-msg.is-err { color: #c0362c; }
.aag-roi--dark .aag-roi-email-msg.is-ok { color: #7ee2a8; }
.aag-roi--dark .aag-roi-email-msg.is-err { color: #ff9a90; }

.aag-roi-disclaimer { text-align: center; font-size: 12px; color: var(--roi-grey); margin: 32px 0 0; }

@media (prefers-reduced-motion: reduce) { .aag-roi * { transition: none !important; } }