/* Form styling for DJ Magic application */

/* Error message styling */
.error {
  color: #e74c3c;
  font-size: 0.875rem;
  margin-top: 0.125rem;
  margin-bottom: 0;
  display: block;
  font-weight: 500;
  line-height: 1.2;
}

/* Alert styling - Base styles */
.alert {
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: var(--pico-border-radius);
  border: 1px solid;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.alert:last-child {
  margin-bottom: 0;
}

.alert i {
  margin-top: 0.125rem;
  flex-shrink: 0;
}

/* Success alerts */
.alert-success {
  background-color: #d4edda;
  color: #155724;
  border-color: #c3e6cb;
}

.alert-success i {
  color: #28a745;
}

/* Info alerts */
.alert-info {
  background-color: #d1ecf1;
  color: #0c5460;
  border-color: #bee5eb;
}

.alert-info i {
  color: #17a2b8;
}

/* Warning alerts */
.alert-warning {
  background-color: #fff3cd;
  color: #856404;
  border-color: #ffeaa7;
}

.alert-warning i {
  color: #ffc107;
}

/* Error/Danger alerts */
.alert-danger,
.alert-error {
  background-color: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
}

.alert-danger i,
.alert-error i {
  color: #dc3545;
}

/* Dismissible alerts */
.alert-dismissible {
  position: relative;
  padding-right: 3rem;
}

.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem 1.25rem;
  color: inherit;
  background: none;
  border: none;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s ease-in-out;
}

.alert-dismissible .close:hover {
  opacity: 0.75;
}

/* Alert with icon only (no text) */
.alert-icon-only {
  padding: 0.75rem;
  justify-content: center;
}

.alert-icon-only i {
  margin: 0;
}

/* Compact alerts */
.alert-sm {
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
}

/* Large alerts */
.alert-lg {
  padding: 1.5rem 1.75rem;
  font-size: 1rem;
}

/* Alert groups */
.alert-group {
  margin-bottom: 1rem;
}

.alert-group .alert {
  margin-bottom: 0.5rem;
}

.alert-group .alert:last-child {
  margin-bottom: 0;
}

/* Form grid styling - spacing between form field groups */

/* Form field styling to reduce separation between inputs and errors */
.form-grid input,
.form-grid select,
.form-grid textarea {
  margin-bottom: 0;
}

/* Ensure error messages are tightly coupled to their inputs */
.form-grid .error {
  margin-top: 0.125rem;
  margin-bottom: 0;
}

/* Ensure form fields with errors still maintain proper spacing from next field */
.form-grid.has-error {
  margin-bottom: 1.5rem;
}

/* Override any Pico CSS margins that might separate inputs from errors */
.form-grid input + .error,
.form-grid select + .error,
.form-grid textarea + .error {
  margin-top: 0.125rem !important;
  margin-bottom: 0 !important;
}

/* Ensure form fields don't have bottom margins that create separation */
.form-grid input[type="text"],
.form-grid input[type="email"],
.form-grid input[type="password"],
.form-grid input[type="tel"],
.form-grid input[type="url"],
.form-grid input[type="search"],
.form-grid input[type="number"],
.form-grid select,
.form-grid textarea {
  margin-bottom: 0 !important;
}

/* Override Pico CSS form styling that might interfere */
.form-grid input,
.form-grid select,
.form-grid textarea,
.form-grid button {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* More specific overrides for Pico CSS form elements */
section .form-grid input,
section .form-grid select,
section .form-grid textarea,
section .form-grid button {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Override any Pico CSS grid margins */
.form-grid {
  margin-bottom: 1.5rem !important;
}

.form-grid:last-of-type {
  margin-bottom: 0 !important;
}

/* Ensure proper spacing between form elements */
.form-grid + .form-grid {
  margin-top: 0 !important;
}

/* Form section styling */
.form-section {
  margin-bottom: 3rem;
}

.form-section:last-child {
  margin-bottom: 0;
}

/* Form divider styling */
.form-divider {
  margin: 0.5rem 0;
  border: none;
  border-top: 1px solid var(--pico-color-muted-border);
}