/* custom.css */

/* -------- Tiny critical CSS (reduce CLS) -------- */
#map, #mapid { min-height: 420px; }
.container { margin-top: 1rem; }

/* Prevent icon layout jumps if icon CSS is delayed */
.fa, .fas, .far, .fal, .fab { display: inline-block; width: 1em; }

/* -------- Spinner overlay (safe to keep even if not used) -------- */
#sharkSpinnerOverlay {
  display: none;
  position: fixed;
  z-index: 3000;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(255,255,255,0.82);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.shark-spin { animation: sharkspin 1.3s linear infinite; transform-origin: 50% 50%; }
@keyframes sharkspin { 100% { transform: rotate(360deg);} }

/* -------- Success alert -------- */
.reg-success-alert {
  max-width: 440px;
  margin: 2.3rem auto 1.5rem auto;
  padding: 1.6rem 1.4rem 1.2rem 1.4rem;
  border-radius: 1.2rem;
  box-shadow: 0 4px 18px #93e2fa2c;
  text-align: center;
  font-size: 1.12rem;
  background: linear-gradient(120deg, #d8f6ff 0%, #e7fcff 80%, #fff 100%);
  border: 1.5px solid #70e0ff;
  position: relative;
  overflow: hidden;
  animation: fadeInDown .7s cubic-bezier(.4,1.8,.5,1);
}
.reg-success-alert .fa-circle-check {
  color: #22bb7b; font-size: 2.2rem; margin-bottom: 0.4rem; animation: pop-in .9s cubic-bezier(.7,-0.2,.3,1.6);
}
.reg-success-alert .sparkle {
  color: #ffd966; position: absolute; font-size: 1.4em; left: 15%; top: 22%; transform: rotate(-25deg);
  animation: sparklePop .9s cubic-bezier(.45,.25,.35,1.5) .1s both;
}
.reg-success-alert .sparkle2 {
  color: #70e0ff; position: absolute; font-size: 1em; right: 18%; top: 16%; transform: rotate(19deg);
  animation: sparklePop2 1.2s cubic-bezier(.45,.25,.35,1.5) .2s both;
}
.reg-success-alert .reg-main  { font-size: 1.08em; color: #0f4f8e; }
.reg-success-alert .reg-small { font-size: .98em;  color: #2f7f66; }

@keyframes fadeInDown   { from {opacity:0; transform: translateY(-40px);} to {opacity:1; transform: translateY(0);} }
@keyframes pop-in       { 0% {transform:scale(0.2);} 60% {transform:scale(1.2);} 100% {transform:scale(1);} }
@keyframes sparklePop   { 0% {opacity:0; transform: scale(0.5) rotate(-25deg);} 50% {opacity:1; transform: scale(1.4) rotate(-25deg);} 100% {opacity:0.95; transform: scale(1) rotate(-25deg);} }
@keyframes sparklePop2  { 0% {opacity:0; transform: scale(0.5) rotate(19deg);} 50% {opacity:1; transform: scale(1.6) rotate(19deg);} 100% {opacity:0.95; transform: scale(1) rotate(19deg);} }

/* -------- Contrast upgrades (WCAG AA aims) -------- */
/* Strengthen “muted/secondary” text without overpowering */
.text-muted,
.text-secondary { color: #495057 !important; }  /* darker than Bootstrap default */

/* Ensure solid body text color inside cards */
.card .card-title,
.card .card-text,
.card .fw-bold { color: #212529 !important; }

/* Small text: avoid too-light gray & too tiny size */
.small, small { font-size: 0.9375rem !important; color: #495057 !important; }

/* Links & button links */
a,
.btn-link { color: #0a58ca !important; text-decoration-thickness: .08em; }
a:hover,
.btn-link:hover { color: #084298 !important; text-decoration: underline; }

/* Outline primary buttons frequently fail on light backgrounds */
.btn-outline-primary { color: #0a58ca !important; border-color: #0a58ca !important; }
.btn-outline-primary:hover { background:#0a58ca !important; color:#fff !important; }

/* Inputs placeholder contrast */
::placeholder { color: #6c757d !important; opacity: 1; }

/* Alerts/badges with yellow backgrounds need darker text for AA */
.badge.bg-warning,
.bg-warning,
.bg-warning.text-dark {
  color: #1a1a1a !important; /* darker than default */
  font-size: 0.9rem;          /* ~14px qualifies as "large" for WCAG in some contexts */
  font-weight: 600;
}

/* Stars, ratings etc. */
.text-warning,
.fa-star,
.fa-star-half-stroke { color: #A47C00 !important; }

/* Just in case the spinner’s “text-primary” shows while overlay visible */
#sharkSpinnerOverlay .text-primary { color:#0a58ca !important; }

/* Country rows (if any) */
.country-row-stats .text-muted,
.country-row-stats span { color:#495057 !important; }

/* Make outline-primary readable on focus/active (navbar + anywhere) */
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
  color: #fff !important;
  background-color: #1777ff !important;
  border-color: #1777ff !important;
  box-shadow: 0 0 0 0.25rem rgba(23,119,255,.28) !important; /* accessible focus glow */
}

/* Also handle nav-link buttons explicitly (header buttons are nav-link + btn) */
.navbar .nav-link.btn:focus,
.navbar .nav-link.btn:focus-visible,
.navbar .nav-link.btn:active {
  color: #fff !important;
}

/* Restore .btn's own border/background on header nav buttons. Bootstrap's own
   .nav-link rule sets `border:0; background:0 0;`, and — because .nav-link is
   defined later than .btn in bootstrap.min.css — that wins at equal specificity
   over .btn/.btn-outline-primary/.btn-primary's border and background-color for
   any element combining both classes, as every button in this navbar does.
   Confirmed live via computed styles: Destinations/Species/Register rendered
   with border-width:0 and a fully transparent background, i.e. plain text.
   The extra class here (.navbar .nav-link.btn = 3 classes) outweighs .nav-link
   alone (1 class), so no !important is needed; each button's own .btn-primary/
   .btn-outline-primary variables still control the actual colors used.
   See docs/IMPROVEMENT_PLAN_2026.md #1b. */
.navbar .nav-link.btn {
  border-width: var(--bs-btn-border-width);
  border-style: solid;
  border-color: var(--bs-btn-border-color);
  background-color: var(--bs-btn-bg);
  color: var(--bs-btn-color);
}

/* Optional: tone down Bootstrap’s default blue rectangle for all buttons */
.btn:focus,
.btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 0.25rem rgba(23,119,255,.22) !important;
}