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

.bg-image {
  height: 100vh;
  background-image: url("/assets/hornet-06b5cb61.webp");
  background-size: cover;
  background-position: center;
}

@keyframes blink {
  0% { opacity: 1; }
  40% { opacity: .3; }
  70% { opacity: 1; }
  100% { opacity: 1; }
}
.animate-blink {
  animation: blink 0.35s linear;
}

.fade-in {
  animation: fadeInRow 0.3s;
}
.fade-out {
  animation: fadeOutRow 0.3s;
}

@keyframes fadeInRow {
  0% { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; }
  100% { opacity: 1; height: auto; padding-top: 0.5rem; padding-bottom: 0.5rem; }
}
@keyframes fadeOutRow {
  0% { opacity: 1; height: auto; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  100% { opacity: 0; height: 0; padding-top: 0; padding-bottom: 0; }
}

/* Also for instant hiding for in-between states: */
.paid-row.opacity-0 {
  opacity: 0 !important;
  height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: all 0.3s;
}

.tab-btn {
  padding: 0.5rem 1rem;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
  color: #93c5fd; /* text-blue-300 */
  background: none;
}
.tab-btn:hover, .tab-btn:focus {
  color: #60a5fa; /* text-blue-400 */
  border-bottom-color: #60a5fa;
  background: #1e293b22; /* optional translucent bg */
}
.tab-btn.active {
  color: #38bdf8;     /* text-blue-400 */
  border-bottom-color: #2563eb; /* border-blue-600 */
  background: #1e293b;  /* bg-blue-900 */
}
/* Pagy */
.pagy.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin-top: 1rem;
  font-size: 0.95rem;
}
.pagy.nav a,
.pagy.nav span,
.pagy.nav .current {
  border-radius: 0.375rem;
  background: rgba(30,64,175,0.7); /* blue-900, 70% */
  color: #BFDBFE; /* blue-200 */
  padding: 0.4em 0.8em;
  transition: background 0.15s;
  cursor: pointer;
  text-decoration: none;
}
.pagy.nav .current[aria-current="page"] {
  background: #1d4ed8;  /* blue-700 */
  color: #DBEAFE;       /* blue-100 */
  font-weight: bold;
  cursor: default;
  pointer-events: none;
}
.pagy.nav a[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background: rgba(30,64,175,0.4);
  color: #60a5fa;
}
.pagy.nav .gap {
  padding-left: 0.8em;
  padding-right: 0.8em;
  color: #9ca3af;               /* gray-400 */
  background: transparent;
  cursor: default;
}
.pagy.nav a:hover:not([aria-current="page"]):not([aria-disabled="true"]) {
  background: rgba(32, 83, 202, 1);  /* blue-700 solid */
  color: #FFF;
}
/* end Pagy */