/**
 * Registration Form Block Styles
 * Updated to match "Schedule & Location / Who This Class Is For" styling
 */

.registration-form-block {
  margin-bottom: 6rem;
  background-color: transparent; /* Clean background, no images */
}

.registration-form-block .registration-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 1024px) {
  .registration-form-block .registration-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center; /* Align tops */
  }
}

/* Left Column: Clean Text */
.registration-form-block .schedule-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.registration-form-block .schedule-list {
  list-style-type: disc;
  padding-left: 1.25rem;
  color: #58585b; /* Sub-headline color for text */
  margin: 0 0 2rem 1em;
  font-size: 17px;
  line-height: 1.6;
}

.registration-form-block .schedule-list li {
  margin-bottom: 1rem;
}

.registration-form-block .schedule-list li::marker {
  color: #999; /* Subtle bullets */
}

.registration-form-block .schedule-list li strong {
  font-weight: 700;
  color: #3a3a3a;
}

.registration-form-block .childcare-note {
  font-size: 0.9rem;
  color: #64748b;
  font-style: italic;
  line-height: 1.5;
}

/* Right Column: Clean Card */
.registration-form-block .form-wrapper {
  background-color: #fff8e1; /* Light beige matching screenshot */
  padding: 2rem; /* Reduced from 2.5rem for more compact feel */
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02); /* Very subtle shadow */
}

/* Typography inside card */
.registration-form-block .form-intro-content {
  color: #3a3a3a;
  margin-bottom: 2rem;
  line-height: 1.6;
  font-size: 17px;
}

.registration-form-block .form-intro-content h2,
.registration-form-block .form-intro-content h3,
.registration-form-block .form-title {
  font-size: 1.25rem;
  font-weight: 700; /* Bold title */
  color: #0f172a;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.registration-form-block .form-intro-content p {
  margin-bottom: 1rem;
}

.registration-form-block .form-intro-content ul {
  list-style-type: disc;
  padding-left: 1.25rem;
  margin: 1rem 0 1.5rem 1em;
}

.registration-form-block .form-intro-content ul li {
  margin-bottom: 0.75rem;
}

.registration-form-block .form-intro-content ul li::marker {
  color: #3a3a3a; /* Darker bullets inside card */
}

.registration-form-block .form-subtitle {
  color: #3a3a3a;
  font-size: 17px;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

/* Form Fields Styling - Compact & Clean */
.registration-form-block .form-container {
  margin-top: 2rem;
}

/* Ninja Forms Specific Styling */
.registration-form-block .nf-form-content {
  padding: 0;
}

/* Field Labels - Tighter spacing */
.registration-form-block .nf-field-label label {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #0f172a !important; /* Navy blue from mockup */
  margin-bottom: 0.375rem !important; /* Reduced from 0.5rem */
  line-height: 1.2 !important;
  display: block;
}
.nf-form-content .label-above .nf-field-label,
.nf-form-content .label-below .nf-field-label,
.nf-form-content .label-hidden .nf-field-label {
  margin-bottom: 0px !important;
}
/* Required asterisk styling */
.registration-form-block .ninja-forms-req-symbol {
  color: #dc2626;
  margin-left: 0.25rem;
}

/* Input Fields - Compact */
.registration-form-block .nf-field input[type="text"],
.registration-form-block .nf-field input[type="email"],
.registration-form-block .nf-field input[type="tel"],
.registration-form-block .nf-field select,
.registration-form-block .nf-field textarea {
  width: 100% !important;
  padding: 0.5rem 0.75rem !important; /* More compact padding */
  border-radius: 0.375rem !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  font-size: 0.9375rem !important;
  line-height: 1.4 !important;
  color: #1e293b !important;
  box-shadow: none !important;
}

.registration-form-block .nf-field input:focus,
.registration-form-block .nf-field select:focus,
.registration-form-block .nf-field textarea:focus {
  border-color: #334e68 !important; /* Navy focus state */
  box-shadow: 0 0 0 3px rgba(51, 78, 104, 0.1) !important;
}

/* Field Rows - Tighter Spacing */
.registration-form-block .nf-row {
  margin-bottom: 0.375rem !important; /* Reduced from 1rem */
}

.registration-form-block .nf-field-container {
  margin-bottom: 0 !important;
}

.registration-form-block .nf-field {
  margin-bottom: 0 !important;
}

/* Two-column fields */
.registration-form-block .nf-cell {
  padding: 0 0.5rem !important;
}

.registration-form-block .nf-cell:first-child {
  padding-left: 0 !important;
}

.registration-form-block .nf-cell:last-child {
  padding-right: 0 !important;
}

/* Select Dropdown Styling */
.registration-form-block .nf-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23334e68' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 12px !important;
  padding-right: 2.5rem !important;
}

/* Submit Button - Match Brand CTAs */
.registration-form-block .nf-field input[type="submit"],
.registration-form-block .nf-field button[type="submit"] {
  display: inline-block !important;
  width: 100% !important;
  background-color: #ff6a13 !important; /* Brand orange */
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1.125rem !important;
  padding: 1rem 3rem !important;
  border-radius: 0.375rem !important; /* Slight rounded corners */
  border: none !important;
  cursor: pointer !important;
  margin-top: 0.75rem !important;
  transition: background-color 0.2s, transform 0.2s !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  height: auto !important;
}

.registration-form-block .nf-field input[type="submit"]:hover,
.registration-form-block .nf-field button[type="submit"]:hover {
  background-color: #0f172a !important; /* Darker orange on hover */
  box-shadow: none !important;
}

/* Helper text below button */
.registration-form-block .nf-after-field {
  margin-top: 0.75rem !important;
  font-size: 0.8125rem !important;
  color: #64748b !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

/* Hide "Fields marked with * are required" text */
.registration-form-block .nf-form-fields-required {
  display: none !important;
}

/* Error Messages */
.registration-form-block .nf-error-msg,
.registration-form-block .nf-error {
  color: #dc2626 !important;
  font-size: 0.8125rem !important;
  margin-top: 0.375rem !important;
}

.registration-form-block .nf-error-field-errors {
  border-color: #dc2626 !important;
}

/* Description/Helper Text */
.registration-form-block .nf-field-description p {
  font-size: 0.8125rem !important;
  color: #64748b !important;
  margin-top: 0.375rem !important;
  line-height: 1.4 !important;
}

/* Title styling */
.registration-form-block .form-title {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 0.375rem !important; /* Tighter */
  line-height: 1.3 !important;
  text-align: center;
}

.registration-form-block .form-subtitle {
  color: #3a3a3a !important;
  font-size: 0.9375rem !important;
  margin-bottom: 1.25rem !important; /* Reduced from 1.5rem */
  line-height: 1.5 !important;
}

.registration-form-block .form-subtitle p {
  margin-bottom: 0.5rem;
  text-align: center;
}

.registration-form-block .steps-cta-wrapper {
  text-align: center;
}

.registration-form-block .steps-cta-button {
  display: inline-block;
  background-color: #ff6a13;
  color: white;
  font-weight: 700;
  font-size: 1.125rem;
  padding: 1rem 3rem;
  border-radius: 0.375rem;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.2s;
  margin-top: 15px;
}

.registration-form-block .steps-cta-button:hover {
  background-color: #e55a0a;
  transform: translateY(-2px);
}


/* Responsive adjustments */
@media (max-width: 768px) {
  .registration-form-block .nf-cell {
    padding: 0 !important;
    margin-bottom: 1rem !important;
  }
}