/**
 * @file
 * Newsletter modal styles.
 */

/* Hide Alpine.js elements until they're initialized */
[x-cloak] {
  display: none !important;
}

/* Center the form wrapper */
.newsletter-form-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Center the form itself */
.newsletter-form {
  width: 100%;
  max-width: 28rem; /* 448px */
  margin: 0 auto;
}

/* Ensure modal is properly positioned */
#newsletter-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: none; /* Hidden by default, will be shown by JavaScript or Alpine */
}

/* Show modal when Alpine sets isOpen to true */
#newsletter-modal[style*="display: flex"],
#newsletter-modal[style*="display:flex"] {
  display: flex !important;
}

/* Hide default Drupal labels since we're rendering custom ones in the template */
.newsletter-form .form-item label {
  display: none !important;
}

/* Hide label wrappers that Drupal might add */
.newsletter-form .form-item .form-item__label,
.newsletter-form .form-item > div:first-child label {
  display: none !important;
}

/* Form inputs styling - Clean white boxes with light gray borders */
.newsletter-form input[type="email"],
.newsletter-form input[type="text"] {
  border-radius: 0.5rem !important;
  border: 1px solid #D1D5DB !important;
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  background: white !important;
  color: #374151 !important;
  font-size: 1rem !important;
}

.newsletter-form input[type="email"]::placeholder,
.newsletter-form input[type="text"]::placeholder {
  color: #9CA3AF !important;
}

/* Remove default form item spacing */
.newsletter-form .form-item {
  margin-bottom: 0 !important;
  width: 100%;
}

/* Ensure proper spacing between fields */
.newsletter-form .space-y-4 > * + * {
  margin-top: 1rem;
}

/* Processing loader styling */
.newsletter-processing-loader {
  min-height: 2rem;
}

.newsletter-processing-loader.hidden {
  display: none !important;
}

.newsletter-processing-loader .spinner {
  width: 20px;
  height: 20px;
  border: 3px solid #E5E7EB;
  border-top-color: #6B7280;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Success message styling */
.newsletter-messages {
  margin-bottom: 1rem;
  text-align: center;
}

.newsletter-messages .messages--status {
  background-color: #D1FAE5;
  color: #065F46;
  border: 1px solid #10B981;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin: 0;
}

.newsletter-messages .messages__content {
  font-weight: 500;
}

/* Button gradient - orange to yellow (matching the button style) */
.newsletter-form .form-actions button {
  background: linear-gradient(to right, #CC8500, #FFCC00) !important;
  border: none !important;
  width: 100%;
  padding: 1rem 1.5rem !important;
  border-radius: 9999px !important; /* rounded-full */
  color: black !important;
  font-weight: bold !important;
  font-size: 0.875rem !important; /* text-sm */
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important; /* tracking-wide */
}