/*
 * Weight calculator. Enqueued on its own and kept out of Remove Unused CSS.
 * Card and button rules are repeated here so a stale used-CSS blob cannot
 * leave the embed unstyled when .st-sidebar-widget / .st-button are dropped.
 */

.st-weight-calculator {
  background: var(--st-color-surface, #fff);
  border: 1px solid var(--st-color-line, #dfe7f1);
  border-radius: var(--st-radius-xl, 24px);
  box-shadow: var(--st-shadow-sm, 0 10px 28px rgb(18 43 78 / 8%));
  line-height: 1.5;
  padding: clamp(16px, 2.5vw, 22px);
}

.st-weight-calculator .st-sidebar-widget__header {
  border-bottom: 1px solid var(--st-color-line, #dfe7f1);
  margin-bottom: 0.25rem;
  padding-bottom: 0.85rem;
}

.st-weight-calculator .st-sidebar-widget__body {
  padding-top: 0.35rem;
}

.st-weight-calculator__form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.st-weight-calculator .st-weight-calculator__field,
.st-weight-calculator .fix-bbb {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  justify-content: flex-start;
  margin: 0 !important;
  min-width: 0;
}

.st-weight-calculator__label {
  color: var(--st-color-muted, #718096);
  font-family: var(--st-font-medium, tahoma, sans-serif);
  font-size: 13px;
  line-height: 1.4;
}

.st-weight-calculator
  :is(.st-weight-calculator__input, .st-weight-calculator__select) {
  background: var(--st-color-surface, #fff);
  border: 1px solid var(--st-color-line, #dfe7f1);
  border-radius: var(--st-radius-sm, 10px);
  color: var(--st-color-ink, #172033);
  font-family: var(--st-font-medium, tahoma, sans-serif);
  font-size: 14px;
  min-height: 44px;
  padding: 0.6rem 0.9rem;
  width: 100%;
}

.st-weight-calculator .st-weight-calculator__select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23718096' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: left 0.85rem center;
  background-repeat: no-repeat;
  background-size: 0.7rem;
  padding-left: 2.15rem;
}

.st-weight-calculator
  :is(.st-weight-calculator__input, .st-weight-calculator__select):focus {
  border-color: var(--st-color-teal, #00bbb3);
  box-shadow: var(--st-shadow-focus, 0 0 0 4px rgb(0 187 179 / 18%));
  outline: 0;
}

.st-weight-calculator__input.is-invalid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgb(220 38 38 / 12%);
}

.st-weight-calculator__quantity {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}

.st-weight-calculator__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.st-weight-calculator__result-wrap {
  align-content: center;
  background: linear-gradient(135deg, rgb(2 101 184 / 8%), rgb(0 187 179 / 8%));
  border: 1px solid rgb(2 101 184 / 14%);
  border-radius: var(--st-radius-sm, 10px);
  min-height: 44px;
  padding: 0.7rem 1rem;
  text-align: center;
}

.st-weight-calculator__result-label {
  color: var(--st-color-muted, #718096);
  display: block;
  font-family: var(--st-font-medium, tahoma, sans-serif);
  font-size: 12px;
  margin-bottom: 0.15rem;
}

.st-weight-calculator__result {
  color: var(--st-color-primary, #00348c);
  font-family: var(--st-font-bold, tahoma, sans-serif);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.5;
}

.st-weight-calculator .st-weight-calculator__submit {
  align-items: center;
  background-color: var(--st-color-primary, #00348c);
  background-image: linear-gradient(
    135deg,
    var(--st-color-primary, #00348c),
    var(--st-color-primary-2, #0265b8)
  );
  border: 1px solid transparent;
  border-radius: var(--st-radius-sm, 10px);
  box-shadow: 0 10px 22px rgb(0 52 140 / 18%);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--st-font-semibold, tahoma, sans-serif);
  font-size: 14px;
  gap: 0.5rem;
  justify-content: center;
  line-height: 1.5;
  min-height: 42px;
  padding: 0.72rem 1.15rem;
  width: 100%;
}

.st-weight-calculator .st-weight-calculator__submit:hover {
  background-color: #002a72;
  background-image: linear-gradient(135deg, #002a72, #005bab);
  color: #fff;
}

.st-weight-calculator--embed {
  margin-block: 1.25rem;
  width: 100%;
}

.st-weight-calculator--embed .st-weight-calculator__form {
  display: grid;
  gap: 0.9rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.st-weight-calculator--embed .st-weight-calculator__quantity,
.st-weight-calculator--embed .st-weight-calculator__actions {
  grid-column: 1 / -1;
}

.st-weight-calculator--embed .st-weight-calculator__quantity {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.st-weight-calculator--embed .st-weight-calculator__actions {
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.st-weight-calculator--embed .st-weight-calculator__submit {
  min-width: 9rem;
  width: auto;
}

@media (width <= 767px) {
  .st-weight-calculator--embed .st-weight-calculator__form,
  .st-weight-calculator--embed .st-weight-calculator__quantity,
  .st-weight-calculator--embed .st-weight-calculator__actions {
    grid-template-columns: 1fr;
  }

  .st-weight-calculator--embed .st-weight-calculator__submit {
    width: 100%;
  }
}