/*
 * 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.
 */

/*
 *= require actiontext
 */

/* Tom Select customizations to match the app design */
.tom-select-filter + .ts-wrapper {
  min-width: 160px;
}

.tom-select-filter + .ts-wrapper .ts-control {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  color: #6b7280;
  background-color: white;
  min-height: 38px;
  box-shadow: none;
}

.tom-select-filter + .ts-wrapper .ts-control:focus,
.tom-select-filter + .ts-wrapper.focus .ts-control {
  border-color: #202D3B;
  box-shadow: 0 0 0 2px rgba(32, 45, 59, 0.1);
  outline: none;
}

.tom-select-filter + .ts-wrapper .ts-control .item {
  background: #202D3B;
  color: white;
  border-radius: 0.25rem;
  padding: 0.125rem 0.5rem;
  margin: 0.125rem;
  font-size: 0.75rem;
}

.tom-select-filter + .ts-wrapper .ts-control .item .remove {
  color: rgba(255, 255, 255, 0.7);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  margin-left: 0.375rem;
  padding-left: 0.375rem;
}

.tom-select-filter + .ts-wrapper .ts-control .item .remove:hover {
  color: white;
}

.tom-select-filter + .ts-wrapper .ts-dropdown {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  margin-top: 0.25rem;
}

.tom-select-filter + .ts-wrapper .ts-dropdown .option {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.tom-select-filter + .ts-wrapper .ts-dropdown .option:hover,
.tom-select-filter + .ts-wrapper .ts-dropdown .option.active {
  background: #f3f4f6;
  color: #202D3B;
}

.tom-select-filter + .ts-wrapper .ts-dropdown .option.selected {
  background: #202D3B;
  color: white;
}

/* Placeholder styling */
.tom-select-filter + .ts-wrapper .ts-control input::placeholder {
  color: #6b7280;
  opacity: 1;
}

/* Override Tailwind's .hidden class for Tom Select dropdown content */
.ts-wrapper .ts-dropdown-content {
  display: block !important;
}

/* Donation form: theme-aware accent colors.
 * Falls back to the original hardcoded values when no theme primary color is set.
 * --theme-primary is injected into :root by Theme#css_variables via the public layout. */
.donation-accent-bg {
  background-color: var(--theme-primary, #3d99cb);
}

/* Applied to the currently-selected frequency/amount button */
.donation-selected {
  border-color: var(--theme-primary, #0284c7) !important;
  background-color: color-mix(in srgb, var(--theme-primary, #0284c7) 10%, white) !important;
}

/* Primary action buttons (Continue, Complete Donation) */
.donation-btn-primary {
  background-color: var(--theme-primary, #2563eb);
  color: white;
  transition: filter 0.15s;
}
.donation-btn-primary:hover {
  filter: brightness(0.88);
}

/* Hover accent border on unselected amount/frequency buttons */
.donation-amount-btn:hover,
.frequency-btn:hover {
  border-color: var(--theme-primary, #0284c7);
}