/* ============================================================================
   SIRO Cost Calculator — small (dark/hero) and full (light/page) variants.
   ============================================================================ */

.siro-calc {
  /* GPT5-5 .quote-card — solid near-white card on navy hero, dark text */
  --siro-calc-bg:        rgba(255, 255, 255, 0.96);
  --siro-calc-input-bg:  #ffffff;
  --siro-calc-text:      var(--siro-text);
  --siro-calc-text-mute: var(--siro-text-muted);
  --siro-calc-border:    rgba(255, 255, 255, 0.22);

  background: var(--siro-calc-bg);
  border: 1px solid var(--siro-calc-border);
  border-radius: var(--siro-radius-lg);
  padding: var(--siro-space-9);
  color: var(--siro-calc-text);
  font-family: var(--siro-font-body);
  max-width: 460px;
  box-shadow: 0 28px 80px rgba(0, 27, 63, 0.28);
}

.siro-calc-variant-full .siro-calc {
  --siro-calc-bg:        var(--siro-surface);
  --siro-calc-input-bg:  var(--siro-surface);
  --siro-calc-text:      var(--siro-text);
  --siro-calc-text-mute: var(--siro-text-muted);
  --siro-calc-border:    var(--siro-outline-dark);

  max-width: 540px;
  /* Standalone variant lives in a single-column section — center the card
     instead of letting it hug the left padding edge. */
  margin-inline: auto;
  box-shadow: var(--siro-shadow-ambient);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---- Embedded CFF (Calculated Fields Form) hygiene -----------------------
   In shortcode mode the widget wraps a CFF form. CFF emits a default
   <input type="submit"> that's a small native browser button (looks broken
   against the rest of the V3 styling) and does nothing useful on this page —
   the gold "Cere ofertă personalizată" CTA below the embed is the real
   action. Hide the submit + clean up CFF's form fieldset chrome so the form
   inherits the V3 input styling rather than browser defaults.
   ------------------------------------------------------------------------ */
.siro-calc__embed input[type="submit"],
.siro-calc__embed button[type="submit"],
.siro-calc__embed .pbSubmit,
.siro-calc__embed .cff-form-buttons-container {
  display: none !important;
}

.siro-calc__embed form,
.siro-calc__embed fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}

.siro-calc__embed .cff-form .field,
.siro-calc__embed .cff-form .fields,
.siro-calc__embed .cff-form .dfield {
  margin-bottom: var(--siro-space-3);
}

.siro-calc__embed .cff-form label {
  display: block;
  font-family: var(--siro-font-body);
  font-size: var(--siro-fs-sm);
  font-weight: 600;
  color: var(--siro-text-muted);
  margin-bottom: var(--siro-space-2);
}

.siro-calc__embed .cff-form input[type="text"],
.siro-calc__embed .cff-form input[type="number"],
.siro-calc__embed .cff-form select {
  width: 100%;
  padding: var(--siro-space-3) var(--siro-space-4);
  background: var(--siro-calc-input-bg);
  border: 1px solid var(--siro-outline-dark);
  border-radius: var(--siro-radius-sm, 8px);
  font-family: var(--siro-font-body);
  font-size: var(--siro-fs-md);
  color: var(--siro-calc-text);
  box-sizing: border-box;
}

.siro-calc__embed .cff-form input:focus,
.siro-calc__embed .cff-form select:focus {
  outline: 2px solid var(--siro-color-accent);
  outline-offset: 1px;
}

.siro-calc__badge {
  display: inline-block;
  font-family: var(--siro-font-body);
  font-size: var(--siro-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(194, 155, 39, 0.14);
  color: var(--siro-color-primary);
  padding: 4px var(--siro-space-3);
  border-radius: 100px;
  margin-bottom: var(--siro-space-4);
}

.siro-calc-variant-full .siro-calc__badge {
  background: var(--siro-eyebrow-pill-bg);
  color: var(--siro-color-yellow);
}

.siro-calc__title {
  font-family: var(--siro-font-display);
  font-size: var(--siro-fs-2xl);
  font-weight: 800;
  margin: 0 0 var(--siro-space-2);
  color: var(--siro-calc-text);
}

.siro-calc__sub {
  color: var(--siro-calc-text-mute);
  font-size: var(--siro-fs-sm);
  margin: 0 0 var(--siro-space-6);
  line-height: 1.5;
}

.siro-calc__form {
  display: grid;
  gap: var(--siro-space-5);
  margin-bottom: var(--siro-space-2);
}

.siro-calc__field { display: block; }

.siro-calc__label {
  display: block;
  color: var(--siro-calc-text-mute);
  font-size: var(--siro-fs-xs);
  margin-bottom: var(--siro-space-2);
  font-weight: 500;
}

.siro-calc__input {
  width: 100%;
  background: var(--siro-calc-input-bg);
  border: 1px solid var(--siro-outline-dark, rgba(21, 25, 31, 0.12));
  border-radius: var(--siro-radius-sm);
  color: var(--siro-calc-text);
  padding: var(--siro-space-input-y) var(--siro-space-4);
  font-family: var(--siro-font-body);
  font-size: var(--siro-fs-sm);
  outline: none;
  transition: border-color var(--siro-trans-fast);
}
.siro-calc__input:focus {
  border-color: var(--siro-color-accent);
}
.siro-calc__input::placeholder {
  color: var(--siro-calc-text-mute);
  opacity: 0.6;
}

.siro-calc-variant-full .siro-calc__input {
  color: var(--siro-text);
}

.siro-calc__result {
  background: rgba(194, 155, 39, 0.10);
  border: 1px solid rgba(194, 155, 39, 0.30);
  border-radius: var(--siro-radius-sm);
  padding: var(--siro-space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--siro-space-6) 0;
  flex-wrap: wrap;
  gap: var(--siro-space-3);
}

.siro-calc__result-label {
  color: var(--siro-calc-text-mute);
  font-size: var(--siro-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.siro-calc__result-value {
  color: var(--siro-color-accent);
  font-family: var(--siro-font-display);
  font-size: var(--siro-fs-3xl);
  font-weight: 800;
  line-height: 1;
}

.siro-calc__disclaimer {
  font-size: 11px;
  color: var(--siro-calc-text-mute);
  margin: var(--siro-space-3) 0 0;
  line-height: 1.5;
  opacity: 0.7;
}