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

/* No @import lines here: Propshaft doesn't rewrite them, so they request
 * unhashed paths that 404 in production. The layout already links every
 * stylesheet in app/assets/stylesheets individually with digested URLs. */

.turbo-progress-bar {
  background: #336699;
  height: 3px;
}

/* Donation forms nudge the Continue button when no amount is chosen yet, rather
 * than greying it out until one is. Applied by the `donate` Stimulus
 * controller, which removes the class again on animationend. */
@keyframes zw-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

.zw-shake {
  animation: zw-shake 0.4s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .zw-shake { animation: none; }
}

/* The place picker's "more results are coming" dots (see
 * app/views/shared/_place_picker_field.html.erb). Colour is inherited, so the
 * dots pick up the row's text-stone-500 rather than introducing one of their
 * own. Kept here rather than as Tailwind utilities because the staggered
 * per-dot delays are the whole effect. */
.zw-dots {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
  margin-right: 0.5rem;
}

.zw-dots span {
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: currentColor;
  opacity: 0.25;
  animation: zw-dots 1.2s ease-in-out infinite;
}

.zw-dots span:nth-child(2) { animation-delay: 0.2s; }
.zw-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes zw-dots {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

/* Still dots rather than no dots: the row's text already says what is
 * happening, and the indicator has to stay legible without the animation. */
@media (prefers-reduced-motion: reduce) {
  .zw-dots span { animation: none; opacity: 0.55; }
}

/* Stop Safari from converting a held click on nav links into a link-drag. */
nav a,
nav button,
[data-controller~="admin-sidebar"] a,
[data-controller~="admin-sidebar"] button {
  -webkit-user-drag: none;
  user-drag: none;
}