/* Loaded after calculator.css when the site selects StickerSaucer. */
.stm-calculator {
  --stm-ink: #171919;
  --stm-muted: #565c5a;
  --stm-cream: #f4f6f5;
  --stm-panel: #fff;
  --stm-input: #fff;
  --stm-border: #d7dbd8;
  --stm-control-border: #818984;
  --stm-frame: var(--stm-border);
  --stm-red: #326600;
  --stm-red-hover: #244d00;
  --stm-action-bg: #91ff00;
  --stm-action-hover: #adff42;
  --stm-action-text: #141615;
  --stm-link: #326600;
  --stm-link-hover: #244d00;
  --stm-focus: #326600;
  --stm-selected: #edffd6;
}

.stm-calculator .stm-tabs {
  margin: 0;
  background: var(--stm-panel);
  border: 1px solid var(--stm-frame);
  border-radius: 8px 8px 0 0;
}
.stm-calculator .stm-tabs button {
  position: relative;
  flex: 0 1 auto;
  width: auto;
  border: 0 !important;
  border-radius: 7px;
  background: transparent !important;
}
.stm-calculator .stm-tabs button + button { margin-left: 0; }
.stm-calculator .stm-tabs button[aria-selected=true] { color: var(--stm-ink) !important; }
.stm-calculator .stm-tabs button[aria-selected=true]::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 16px;
  right: 16px;
  height: 3px;
  background: var(--stm-action-bg);
}
.stm-calculator .stm-form {
  border: 1px solid var(--stm-frame);
  border-top: 0;
  border-radius: 0 0 8px 8px;
}

.stm-calculator .stm-quote,
.stm-calculator .stm-mobile-bar {
  --stm-ink: #fff;
  --stm-muted: #c6ceca;
  --stm-border: #464d49;
  --stm-red: var(--stm-action-bg);
  --stm-focus: var(--stm-action-bg);
  background: #191c1b;
  color: var(--stm-muted);
  border-color: #191c1b;
}
.stm-calculator .stm-quote [data-price] {
  font-size: 36px;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.stm-calculator .stm-quote-actions { margin-top: 8px; }
.stm-calculator .stm-primary:disabled {
  background: #424845 !important;
  border-color: #626b65 !important;
  color: #d2d8d4 !important;
}
.stm-calculator .stm-error {
  color: #812522;
  background: #fff1ef;
  border-left-color: #ae3834;
}

.stm-calculator [data-card-preview] { width: 48px; height: 48px; }
.stm-calculator [data-artwork-preview] { width: 76px; height: 76px; background: #fff; }
.stm-artwork-page {
  background: #f4f6f5;
  color: #171919;
  font-family: system-ui, sans-serif;
}
.stm-calculator.stm-artwork-portal { border-width: 1px; border-radius: 8px; }