/* ==========================================================================
   COMPONENT: Back In Stock Notification Form
   Compliant with 100% Zero Magic Numbers & Design Tokens
   ========================================================================== */

back-in-stock-form {
  display: block;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.back-in-stock {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background-color: rgba(var(--color-foreground), var(--opacity-5));
  border: var(--border-hairline) solid var(--color-border);
}

.back-in-stock__title {
  margin: var(--space-0);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: rgb(var(--color-foreground));
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.back-in-stock__desc {
  margin-top: var(--space-1);
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
  color: rgba(var(--color-foreground), var(--opacity-75));
  line-height: var(--leading-normal);
}

.back-in-stock__inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media screen and (min-width: 750px) {
  .back-in-stock__inputs {
    flex-direction: row;
    align-items: center;
  }
}

.back-in-stock__input {
  flex: 1;
  min-height: var(--space-11);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: var(--border-hairline) solid var(--color-border);
  font-size: var(--font-size-sm);
  color: rgb(var(--color-foreground));
  background-color: transparent;
}

.back-in-stock__btn {
  min-height: var(--space-11);
  padding: var(--space-2) var(--space-6);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  white-space: nowrap;
}

.back-in-stock__message {
  margin-top: var(--space-2);
  margin-bottom: var(--space-0);
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}

.back-in-stock__message--success {
  background-color: rgba(var(--color-foreground), var(--opacity-10));
  color: rgb(var(--color-foreground));
}

.back-in-stock__message--error {
  background-color: rgba(var(--color-foreground), var(--opacity-5));
  color: rgb(var(--color-foreground));
}