/**
 * @file
 * Stock Notification Toggle Styles
 *
 * Styles for the stock notification toggle button and form visibility.
 */

/* Toggle button styling */
.notify-me-toggle-btn {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background-color: #dd3923;
  color: #ffffff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  margin-left: 0.5rem;
  transition: background-color 0.3s ease;
  vertical-align: middle;
}

.notify-me-toggle-btn:hover {
  background-color: #3a3b54;
}

/* Make buttons inline in the commerce stock notifications container */
#edit-commerce-stock-notifications {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Ensure the fieldset takes full width and appears below buttons */
#edit-commerce-stock-notifications fieldset {
  flex-basis: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
}

/* Hide notification form fieldset and wrapper by default */
fieldset[data-drupal-selector*="stock-notifications-notification"],
fieldset[data-drupal-selector*="stock-notifications-notification"] .fieldset-wrapper {
  display: none !important;
}

/* Show when visible class is added */
fieldset[data-drupal-selector*="stock-notifications-notification"].visible {
  display: block !important;
  margin-top: 1rem;
}

fieldset[data-drupal-selector*="stock-notifications-notification"].visible .fieldset-wrapper {
  display: block !important;
  padding: 1rem;
  border: 1px solid #e4dcd4;
  border-radius: 3px;
  background-color: #f9f9f9;
}

/* Reserve email link color */
.reserve-email-link a,
.reserve-email-link {
  color: #DD3923 !important;
}