/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.btn-brand-teal {
  background-color: #09B6A2 !important;
  color: white !important;
  font-weight: 700 !important;
  border-radius: 0.5rem !important;
  padding: 0.625rem 1.25rem !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 0 20px rgba(9, 182, 162, 0.3) !important;
  display: inline-block;
}

.btn-brand-teal:hover {
  background-color: #08a291 !important;
  box-shadow: 0 0 30px rgba(9, 182, 162, 0.5) !important;
}

.btn-brand-teal-lg {
  padding: 0.75rem 2.5rem !important;
  font-size: 1.25rem !important;
}

input.form-input-brand-teal:focus, 
textarea.form-input-brand-teal:focus {
  border-color: #09B6A2 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(9, 182, 162, 0.5) !important;
  --tw-ring-color: #09B6A2 !important;
  --tw-ring-offset-width: 0px !important;
}