/* =============================
   Form Container - Responsive, Premium Style
   ============================= */
.srfm-form-container-4988 {
  --srfm-color-scheme-primary: #ebb102;
  --srfm-color-scheme-text-on-primary: #111c44;
  --srfm-color-scheme-text: #111c44;
  --srfm-bg-color: #1f1f1f; /* dark background */
  padding: 32px 16px !important;
  border-radius: 16px !important;
  max-width: 600px; /* max width for desktop */
  width: 90%; /* shrinkable on mobile */
  margin: 0 auto 32px auto; /* center horizontally, bottom spacing */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  font-family: "Inter", "Helvetica", sans-serif;
  line-height: 1.5;
  box-sizing: border-box;
}

/* =============================
   Form Fields
   ============================= */
.srfm-form-container-4988 input,
.srfm-form-container-4988 textarea,
.srfm-form-container-4988 select {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #ebb102 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

/* Focus effect */
.srfm-form-container-4988 input:focus,
.srfm-form-container-4988 textarea:focus,
.srfm-form-container-4988 select:focus {
  outline: none !important;
  border-color: #ff9038 !important;
  box-shadow: 0 0 0 3px rgba(235, 177, 2, 0.3);
}

/* Placeholder styling */
.srfm-form-container-4988 ::placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
  font-style: italic;
}

/* Labels */
.srfm-form-container-4988 label {
  display: block;
  font-weight: 600;
  margin-bottom: 3px; /* slightly tighter */
  color: #111c44;
}

/* Descriptions */
.srfm-form-container-4988 .srfm-description {
  color: #555555;
  font-size: 14px;
  margin-bottom: 4px; /* slightly tighter */
}

/* =============================
   Spacing between fields (tighter)
   ============================= */
.srfm-form-container-4988 .srfm-block {
  margin-bottom: 8px; /* slightly reduced gap */
}

/* =============================
   Submit Button
   ============================= */
.srfm-form-container-4988 .srfm-submit-button {
  background: linear-gradient(90deg, #ebb102, #ff9038);
  color: #111c44 !important;
  border: none !important;
  border-radius: 24px !important;
  padding: 14px 32px !important;
  font-size: 16px !important;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: inline-block;
}

/* Hover effect: lift and shadow only */
.srfm-form-container-4988 .srfm-submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(235, 144, 56, 0.5);
  background: linear-gradient(90deg, #ebb102, #ff9038); /* keep same */
}

/* =============================
   Error & Success Messages
   ============================= */
.srfm-form-container-4988 .srfm-error-message {
  color: #ff4c4c !important;
  font-size: 13px;
  margin-top: 4px;
}

.srfm-form-container-4988 .srfm-success-box-description {
  color: #ebb102;
  font-weight: 600;
  font-size: 16px;
  margin-top: 12px;
}

/* =============================
   Dropdown adjustments
   ============================= */
.srfm-form-container-4988 select {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
}

/* =============================
   Checkbox & radio tweaks
   ============================= */
.srfm-form-container-4988 .srfm-check-ctn-width,
.srfm-form-container-4988 .srfm-check-ctn-height {
  width: 20px;
  height: 20px;
}

/* =============================
   Responsive Mobile Styles
   ============================= */
@media (max-width: 480px) {
  .srfm-form-container-4988 {
    padding: 24px 12px !important;
    width: 95%;
  }

  .srfm-form-container-4988 input,
  .srfm-form-container-4988 textarea,
  .srfm-form-container-4988 select {
    font-size: 15px !important;
    padding: 12px 14px !important;
  }

  .srfm-form-container-4988 .srfm-submit-button {
    width: 100%; /* full-width button on mobile */
    padding: 14px !important;
  }
}

/* Force black text for SureForm success message */
.srfm-success-box,
.srfm-success-box * {
  color: #000 !important;
}

/* Optional: center the success box and improve spacing */
.srfm-success-box {
  text-align: center;
  padding: 20px 15px;
}

/* Optional: ensure the SVG/checkmark is not affected by text color */
.srfm-success-box img {
  display: block;
  margin: 0 auto 10px;
}