.subscription-form-wrapper {
  display: flex;
  flex-direction: column; /* Allow message to stack below */
  align-items: center;
  margin-top: 2rem; /* Adjust spacing as needed */
  padding: 0 1rem; /* Add some padding for smaller screens */
}

.subscription-form {
  display: flex;
  align-items: center;
  border: 2px solid var(--primary); /* Using primary color for border */
  border-radius: 50px; /* Pill shape */
  overflow: hidden; /* Ensures content stays within rounded corners */
  max-width: 600px; /* Limit width for better appearance */
  width: 100%;
  box-shadow: var(--shadow-md); /* Using existing shadow variable */
  transition: all var(--transition-normal); /* Using existing transition variable */
}

.form-step {
  display: flex;
  flex-grow: 1;
  align-items: center; /* Align inputs vertically in the step */
}

.form-step.hidden {
  display: none; /* Use display: none for hiding */
}

.subscription-form input[type="email"],
.subscription-form input[type="text"] {
  flex-grow: 1;
  flex-shrink: 1; /* Allow inputs to shrink */
  flex-basis: 0%; /* Allow inputs to shrink to 0 if needed */
  padding: 1rem 1.2rem;
  border: none;
  outline: none;
  font-size: 1rem;
  color: var(--text); /* Using text color variable */
  background-color: var(--background); /* Using background color variable */
  min-width: 0; /* Crucial: Allows input to shrink below its content size */
  box-sizing: border-box; /* Include padding in width calculation */
  overflow: hidden; /* Hide overflowing text if input shrinks too much */
  text-overflow: ellipsis; /* Add ellipsis for overflowing placeholder/text */
}

/* Add a subtle border between inputs in the name step */
.name-fields input:first-child {
  border-right: 1px solid var(--background-alt); /* Using background-alt for separator */
}

.subscription-form input::placeholder {
  color: var(--text-light); /* Using text-light for placeholder color */
  white-space: nowrap; /* Prevent placeholder text from wrapping */
  overflow: hidden; /* Hide overflowing placeholder text */
  text-overflow: ellipsis; /* Add ellipsis for overflowing placeholder */
}

.subscription-form button {
  background-color: var(--primary); /* Using primary color for button background */
  color: white; /* Text color for button */
  border: none;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap; /* Prevent button text from wrapping */
  transition: background-color var(--transition-normal); /* Using existing transition variable */
  border-radius: 0 50px 50px 0; /* Rounded only on the right */
  margin-left: -2px; /* Overlap border slightly to hide it */
  display: flex; /* Enable flex for button content */
  align-items: center;
  justify-content: center;
  position: relative; /* For spinner positioning */
}

.subscription-form button:hover {
  background-color: var(--primary-dark); /* Using primary-dark for hover state */
}

.subscription-form button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Button text */
.subscription-form button .button-text {
  transition: opacity 0.3s ease;
}

/* Spinner styles */
.spinner {
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid #fff;
  border-radius: 50%;
  width: 1.2rem;
  height: 1.2rem;
  animation: spin 1s linear infinite;
  position: absolute;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.spinner.hidden {
  display: none;
}

.subscription-form button.loading .button-text {
  opacity: 0;
}

.subscription-form button.loading .spinner {
  opacity: 1;
  display: block; /* Override hidden class */
}

/* Form Message Styles */
.form-message {
  margin-top: 1rem;
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  width: 100%;
  max-width: 600px;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.form-message.hidden {
  display: none;
}

.form-message.show {
  opacity: 1;
  transform: translateY(0);
}

.form-message.success {
  background-color: rgba(76, 175, 80, 0.1); /* Greenish background */
  color: #4caf50; /* Green text */
  border: 1px solid #4caf50;
}

.form-message.error {
  background-color: rgba(244, 67, 54, 0.1); /* Reddish background */
  color: #f44336; /* Red text */
  border: 1px solid #f44336;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .subscription-form {
    max-width: 95%;
    padding: 0 0.5rem; /* Added slight internal padding to the form container */
  }
  .subscription-form input {
    padding: 0.6rem 0.8rem; /* Increased padding for email input */
    font-size: 0.9rem; /* Increased font size for email input */
  }
  .subscription-form button {
    padding: 0.6rem 1rem; /* Increased padding for button */
    font-size: 0.9rem; /* Increased font size for button text */
  }
  .subscription-form button .button-text {
    font-size: 0.9rem; /* Explicitly scale down button text */
  }
}

/* NEW: Mobile-specific adjustments for the name step (stacked layout) */
@media (max-width: 600px) {
  /* Using 600px as the breakpoint for stacking */
  .subscription-form.name-step-active {
    flex-direction: column; /* Stack inputs and button */
    border-radius: var(--radius-md); /* Less aggressive rounding when stacked */
    padding: 1rem; /* Add internal padding to the form container */
  }

  .subscription-form.name-step-active .form-step {
    width: 100%; /* Inputs take full width */
    flex-direction: column; /* Stack inputs within the name step */
  }

  .subscription-form.name-step-active input {
    width: 100%; /* Ensure inputs take full width */
    margin-bottom: 0.75rem; /* Space between stacked inputs */
    border-radius: var(--radius-sm); /* Rounded corners for individual inputs */
    padding: 0.8rem 1rem; /* Larger padding for inputs */
    font-size: 1rem; /* Larger font size for inputs */
  }

  .subscription-form.name-step-active .name-fields input:first-child {
    border-right: none; /* Remove right border when stacked */
    border-bottom: 1px solid var(--background-alt); /* Add bottom border */
  }
  .subscription-form.name-step-active .name-fields input:last-child {
    margin-bottom: 0; /* No margin after the last input */
  }

  .subscription-form.name-step-active button {
    width: 100%; /* Button takes full width */
    border-radius: var(--radius-sm); /* Square corners for button when stacked */
    margin-left: 0; /* Remove negative margin */
    margin-top: 0.75rem; /* Space above button */
    padding: 0.8rem 1rem; /* Larger padding for button */
    font-size: 1rem; /* Larger font size for button */
  }
  .subscription-form.name-step-active button .spinner {
    width: 1.2rem; /* Restore original spinner size */
    height: 1.2rem;
  }
}

/* Responsive adjustments for very small screens */
@media (max-width: 420px) {
  /* Adjusted breakpoint for stacking */
  .subscription-form {
    /* Even tighter padding for very small screens */
    padding: 0 0.2rem; /* Further reduced padding */
    flex-direction: column; /* Stack the inputs and button vertically */
    border-radius: var(--radius-md); /* Slightly less rounded when stacked */
  }

  .form-step {
    width: 100%; /* Take full width when stacked */
    flex-direction: column; /* Stack inputs within the name step */
  }

  .subscription-form input {
    padding: 0.6rem 0.8rem; /* Slightly more padding when stacked */
    font-size: 0.85rem; /* Slightly larger font when stacked */
    width: 100%; /* Ensure inputs take full width */
    border-radius: var(--radius-sm); /* Rounded corners for individual inputs */
    margin-bottom: 0.5rem; /* Space between stacked inputs */
  }

  .name-fields input:first-child {
    border-right: none; /* Remove right border when stacked */
    border-bottom: 1px solid var(--background-alt); /* Add bottom border */
  }
  .name-fields input:last-child {
    border-bottom: none; /* No bottom border for the last input */
  }

  .subscription-form button {
    width: calc(100% - 4px); /* Take full width, accounting for margin-left */
    border-radius: var(--radius-sm); /* Square corners for button when stacked */
    margin-left: 0; /* Remove negative margin when stacked */
    margin-top: 0.5rem; /* Space above button when stacked */
    padding: 0.6rem 1rem; /* Adjusted button padding */
    font-size: 0.9rem; /* Adjusted button font size */
  }
  .subscription-form button .button-text {
    font-size: 0.9rem; /* Ensure button text scales */
  }
  .spinner {
    width: 1rem;
    height: 1rem;
  }
}

@media (max-width: 480px) {
  .subscription-form {
    padding: 0 0.2rem; /* Slightly more padding than previous extreme */
  }
  .subscription-form input {
    padding: 0.4rem 0.5rem; /* Increased padding for better touch target */
    font-size: 0.8rem; /* Increased font size for readability */
  }
  .subscription-form button {
    padding: 0.4rem 0.6rem; /* Increased padding for better touch target */
    font-size: 0.8rem; /* Increased font size for readability */
  }
  .subscription-form button .button-text {
    font-size: 0.8rem; /* Ensure button text scales */
  }
  .spinner {
    width: 0.8rem; /* Slightly larger spinner */
    height: 0.8rem;
  }
}

/* Override placeholder text for very small screens using attribute selector */
@media (max-width: 400px) {
  /* Targeting even smaller screens */
  .subscription-form input[type="text"] {
    /* This will apply to both first and last name inputs */
    font-size: 0.7rem; /* Make font even smaller if needed */
  }
  .subscription-form button {
    font-size: 0.7rem;
  }
  .subscription-form button .button-text {
    font-size: 0.7rem;
  }
}

/* Keyframes for spinner (already in blog.css, but included here for completeness if this file is standalone) */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}