/* Improved button and icon styling for better readability */

/* Make Previous button text darker and more readable */
.btn-secondary,
.btn-previous,
#btn-prev {
  color: #1f2937 !important; /* Even darker gray for better contrast */
  font-weight: 600 !important;
  text-shadow: 0px 0px 0.5px rgba(0,0,0,0.1); /* Subtle text shadow for better readability */
}

/* Back arrow icon darker */
.btn-secondary i.fas.fa-chevron-left,
.btn-previous i.fas.fa-chevron-left,
#btn-prev i.fas.fa-chevron-left {
  color: #1f2937 !important; /* Darker gray for icon */
}

/* Wizard back button */
.wizard-header .btn-back {
  color: #374151 !important;
}

.wizard-header .btn-back i {
  color: #374151 !important;
}

/* Make sure text has good contrast against backgrounds */
.wizard-actions button,
.wizard-bottom-nav button {
  font-weight: 500;
}

/* Primary button text color adjustment */
.btn-primary,
.btn-launch,
#btn-next {
  color: #ffffff !important;
  font-weight: 600 !important;
  text-shadow: 0px 1px 1px rgba(0,0,0,0.2); /* Text shadow for better contrast on colored background */
}

/* Improve toggle button visibility */
.toggle-text strong {
  color: #374151;
}

/* Better focus states for accessibility */
.btn-secondary:focus,
.btn-previous:focus,
.btn-primary:focus {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

/* Wizard action buttons need darker text */
.wizard-actions #btn-prev {
  color: #374151;
}

.wizard-actions #btn-prev i {
  color: #374151;
}

/* Save as draft button */
.wizard-actions .btn-outline,
#btn-save-draft {
  color: #1f2937 !important; /* Darker gray for better contrast */
  font-weight: 600 !important;
}

/* Ensure consistent styling across all navigation buttons */
.wizard-actions button,
.wizard-bottom-nav button {
  font-size: 14px;
}

/* Pagination buttons on main WhatsApp template page */
.btn-page {
  color: #1f2937 !important; /* Darker gray text for better contrast */
  font-weight: 600 !important; /* Make text slightly bolder */
}

.btn-page:disabled {
  color: #6b7280 !important; /* Better disabled text contrast */
  opacity: 0.6; /* Less transparent for better readability */
}

.btn-page.active {
  color: #ffffff !important; /* Ensure text is white when button is active */
  font-weight: 600 !important;
  text-shadow: 0px 1px 1px rgba(0,0,0,0.2); /* Text shadow for better contrast */
}