/* Magic Cloud AI Pricing calculator, design 1g.
   Colors: Divi setting → theme token → design value. Fonts: theme tokens → Scto Grotesk → system. */
.mcap-root {
  --_dark: var(--mcap-dark, var(--mc-turquoise, #00373f));
  --_accent: var(--mcap-accent, var(--mc-pale-turquoise, #0a576e));
  --_light: var(--mcap-light, var(--mc-blue, #afe1ff));
  --_total-bg: var(--mcap-total-bg, var(--mc-pale-yellow, #fffab4));
  --_font: var(--mc-font-family, "Scto Grotesk B", Helvetica, Arial, sans-serif);
  --_title-font: var(--mc-title-font-family, "Scto Grotesk A", Helvetica, Arial, sans-serif); /* has Medium 500 + Bold 700; used for every weighted element */
  /* Design 1g sizes × scale. 1 = pixel-exact reference; 1.2 matches magiccloud.fi's 16px body text. */
  --_s: var(--mcap-scale, 1.2);
  container-type: inline-size;
  font-family: var(--_font);
  color: var(--_dark);
  line-height: 1.2;
}
.mcap-root *, .mcap-root *::before, .mcap-root *::after { box-sizing: border-box; }
.mcap-num { font-variant-numeric: tabular-nums; }
.mcap-short { display: none; }

.mcap-card { background: #fff; border-radius: 12px; overflow: hidden; }
.mcap-card--static { pointer-events: none; }

/* Top: model select + sliders */
.mcap-top { padding: 32px 34px 30px; display: flex; flex-direction: column; gap: 28px; }
.mcap-field { display: flex; flex-direction: column; gap: 9px; }
.mcap-label {
  font: 700 calc(11px * var(--_s))/1 var(--_title-font);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--_accent);
}
.mcap-label--light { color: var(--_light); }
.mcap-label--accent { font-size: calc(10.5px * var(--_s)); }
.mcap-select {
  appearance: none; -webkit-appearance: none;
  width: 100%; margin: 0;
  padding: 15px 46px 15px 16px;
  border: 1.5px solid #cfe0e5; border-radius: 10px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2714%27 height=%279%27 viewBox=%270 0 14 9%27><path d=%27M1 1l6 6 6-6%27 fill=%27none%27 stroke=%27%230A576E%27 stroke-width=%272%27 stroke-linecap=%27round%27/></svg>") no-repeat right 16px center;
  font: 500 calc(14px * var(--_s))/1.2 var(--_title-font); color: var(--_dark);
  cursor: pointer;
}
.mcap-select:focus-visible, .mcap-range:focus-visible { outline: 2px solid var(--_accent); outline-offset: 2px; }
.mcap-rate { font: 400 calc(11.67px * var(--_s))/1.4 var(--_font); color: #5b6e72; }

.mcap-sliders { display: flex; flex-direction: column; gap: 24px; }
.mcap-slider { display: flex; flex-direction: column; gap: 7px; }
.mcap-slider-head { display: flex; justify-content: space-between; align-items: baseline; }
.mcap-slider-label { font: 500 calc(13px * var(--_s))/1 var(--_title-font); color: var(--_dark); }
.mcap-slider-value { font: 500 calc(15px * var(--_s))/1 var(--_title-font); color: var(--_dark); }
.mcap-range {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 22px; margin: 0; padding: 0; border: 0;
  background: linear-gradient(90deg, var(--_accent) 0 var(--mcap-fill, 0%), #cfe4f2 var(--mcap-fill, 0%) 100%) no-repeat center / 100% 6px;
  border-radius: 999px; cursor: pointer;
}
.mcap-range::-webkit-slider-runnable-track { height: 6px; background: transparent; }
.mcap-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px;
  background: var(--_dark); border: 3px solid #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 55, 63, .35);
}
.mcap-range::-moz-range-track { height: 6px; background: transparent; }
.mcap-range::-moz-range-thumb {
  width: 16px; height: 16px; background: var(--_dark); border: 3px solid #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 55, 63, .35);
}
.mcap-scale { display: flex; justify-content: space-between; font: 400 calc(11.67px * var(--_s))/1 var(--_font); color: #6f8387; }

/* Breakdown */
.mcap-breakdown { background: var(--_dark); padding: 28px 34px 30px; display: flex; flex-direction: column; gap: 20px; }
.mcap-lines { display: flex; flex-direction: column; gap: 13px; }
.mcap-line { display: flex; justify-content: space-between; gap: 12px; font: 400 calc(12px * var(--_s))/1.4 var(--_font); }
.mcap-line-label { color: var(--_light); }
.mcap-line-amount { color: #fff; white-space: nowrap; }
.mcap-line--fee { border-top: 1px solid rgba(215, 238, 255, .25); padding-top: 13px; }
.mcap-total {
  background: var(--_total-bg); border-radius: 10px; padding: 20px 22px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
}
.mcap-total-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mcap-yearly { font: 400 calc(11.5px * var(--_s))/1.3 var(--_font); color: var(--_accent); }
.mcap-total-amount { font: 700 calc(34px * var(--_s))/1 var(--_title-font); letter-spacing: -.02em; color: var(--_dark); white-space: nowrap; }
.mcap-note { font: 400 calc(11px * var(--_s))/1.4 var(--_font); color: var(--_light); opacity: .8; }

/* Builder placeholder when the price list is empty */
.mcap-placeholder {
  background: #fff; border: 1.5px dashed var(--_accent); border-radius: 12px;
  padding: 40px 34px; text-align: center; font-weight: 500;
}

/* Compact layout (design 1g mobile) when the module itself is narrow: phone, or a narrow Divi column. */
@container (max-width: 480px) {
  .mcap-long { display: none; }
  .mcap-short { display: inline; }
  .mcap-rate, .mcap-scale, .mcap-label--light { display: none; }

  .mcap-top { padding: 22px 20px 24px; gap: 22px; }
  .mcap-label { font-size: calc(10.5px * var(--_s)); }
  .mcap-select { padding: 14px 42px 14px 14px; font-size: calc(13.5px * var(--_s)); background-position: right 14px center; }

  .mcap-sliders { gap: 18px; }
  .mcap-slider-label { font-size: calc(12.5px * var(--_s)); }
  .mcap-slider-value { font-size: calc(14px * var(--_s)); }

  .mcap-breakdown { padding: 20px; gap: 14px; }
  .mcap-lines { gap: 14px; }
  .mcap-line { font-size: calc(11.5px * var(--_s)); line-height: 1.3; }
  .mcap-line--fee { border-top: 0; padding-top: 0; border-bottom: 1px solid rgba(215, 238, 255, .25); padding-bottom: 14px; }

  .mcap-total { padding: 16px 18px; gap: 12px; flex-direction: column; align-items: start; }
  .mcap-yearly { font-size: calc(11px * var(--_s)); }
  .mcap-total-amount { font-size: calc(24px * var(--_s)); }
}