/* Claims Calculator — Layout styles
   Typography, colours, and button styles are inherited from the active theme.
   CSS custom properties use theme values with sensible fallbacks.
   ------------------------------------------------------------------ */

/* ---- Block wrapper ---- */
.block-claims-calculator {
  padding: var(--space-2, 50px) 0;
}

/* ---- Calculator root ---- */
.claims-calc {
  max-width: 640px;
}

/* ---- No-data state ---- */
.claims-calc__no-data {
  font-style: italic;
  opacity: 0.7;
}

/* ---- Fields row ---- */
.claims-calc__fields {
  display: grid;
  gap: var(--space-1, 20px);
}

@media (min-width: 640px) {
  .claims-calc__fields {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Individual field ---- */
.claims-calc__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.claims-calc__field label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Make the hidden <select> and Selectric wrapper fill the field */
.claims-calc__field .selectric-wrapper,
.claims-calc__field select {
  width: 100%;
}

/* ---- Submit button ---- */
.claims-calc__submit {
  margin-top: var(--space-1, 20px);
}

.claims-calc__submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Results panel ---- */
.claims-calc__results {
  margin-top: var(--space-1, 20px);
}

.claims-calc__amounts {
  display: flex;
  gap: var(--space-1, 20px);
  margin-bottom: var(--space-1, 20px);
  flex-wrap: wrap;
}

.claims-calc__amount {
  flex: 1 1 200px;
  text-align: center;
  padding: var(--space-1, 20px);
  background: var(--color-bg-light, #f6f6f6);
  border-radius: 4px;
}

.claims-calc__amount-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.375em;
  opacity: 0.7;
}

.claims-calc__amount-value {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

/* ---- Description / notes ---- */
.claims-calc__description {
  margin-bottom: 0.5em;
}

.claims-calc__notes {
  font-size: 0.875rem;
  opacity: 0.7;
  margin-bottom: var(--space-1, 20px);
}

/* ---- CTA / Reset actions ---- */
.claims-calc__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-1, 20px);
}