/* Shared CSS styles for cat and dog pet detail slides */

.feeding-calculator-slide__content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.feeding-calculator-slide__section-heading {
  margin-bottom: 1.5rem;
}

.feeding-calculator-slide__form-fields {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  width: 100%;
}

.feeding-calculator-slide__form-fields .form-field {
  flex: 1;
  margin: 0;
  position: relative;
  max-width: 200px;

  svg {
    position: absolute;
    right: 8px;
    top: 35%;
    z-index: 2;
    pointer-events: none;
  }
}

.feeding-calculator-slide__radio-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  width: 100%;
  background-color: rgb(var(--color-field));
  padding: 1em 2em;
  height: -webkit-fit-content;
  border-radius: var(--blocks-radius);
  text-align: left;
  transition: border-color 0.2s, background-color 0.2s;

  input {
    display:none;
  }
}

.feeding-calculator-slide__radio-label:has(input:checked) .feeding-calculator-slide__radio-item,
.feeding-calculator-slide__radio-item:has(input:checked) {
  border-color: 2px solid rgb(var(--color-text-heading));
  background-color: rgb(var(--color-text-heading));

  .feeding-calculator-slide__radio-title,
  .feeding-calculator-slide__radio-description {
    color: rgb(var(--color-background));
  }
}

.feeding-calculator-slide__radio-description {
  font-size: 1.2rem;
    opacity: 0.8;
}

.feeding-calculator-slide__treats-checkbox {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 2rem 0; 

  input {
    width: 25px;
    height: 25px;
    background-color: rgb(var(--color-field));
    border-color: rgb(var(--color-field));

    &::after {
      border-color: rgb(var(--color-field));
    }

    &:checked {
      background-color: rgb(var(--color-text-heading));
      color: rgb(var(--color-background));

      &::after {
        border-color: rgb(var(--color-background));
      }
    }
  }
}

.feeding-calculator-slide--align-h-left .feeding-calculator-slide__treats-checkbox {
  justify-content: flex-start;
}

.feeding-calculator-slide--align-h-center .feeding-calculator-slide__treats-checkbox {
  justify-content: center;
}

.feeding-calculator-slide--align-h-right .feeding-calculator-slide__treats-checkbox {
  justify-content: flex-end;
}

.feeding-calculator-slide__checkbox-label {
  cursor: pointer;
}

.feeding-calculator-slide__navigation {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.feeding-calculator-slide__nav-button {
  width:100%;
}

.feeding-calculator-validation-error {
  color: var(--color-error, #d32f2f);
  font-size: 1rem;
  margin-top: 0.5rem;
  display: block;
}

.feeding-calculator-slide input.error,
.feeding-calculator-slide select.error {
  border-color: var(--color-error, #d32f2f);
  outline-color: var(--color-error, #d32f2f);
}

.feeding-calculator-slide__activity-radios input.error + .feeding-calculator-slide__radio-content,
.feeding-calculator-slide__activity-radios input.error + .feeding-calculator-slide__radio-item {
  outline: 2px solid var(--color-error, #d32f2f);
  outline-offset: 2px;
  border-radius: 4px;
}