/* 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; }

/* -------- Footer background image with accessible overlay -------- */
/* Wrap your footer content with <div class="footer-bg-wrapper"> (or apply class to <footer>) */
.footer-bg-wrapper {
  /* Keep your original image, add a gradient overlay as the first layer */
  background-image:
    linear-gradient(rgba(0,0,0,0.48), rgba(0,0,0,0.48)),
    url("/assets/footer-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000; /* fallback base */
  position: relative;
}

/* Guarantee readable footer text & links over the image */
.footer-bg-wrapper,
.footer-bg-wrapper .text-muted,
.footer-bg-wrapper .text-secondary { color: #ffffff !important; }

.footer-bg-wrapper a,
.footer-bg-wrapper .footer-link {
  color: #ffffff !important;
  text-decoration-thickness: .08em;
}
.footer-bg-wrapper a:hover,
.footer-bg-wrapper .footer-link:hover {
  color: #e6f0ff !important;
  text-decoration: underline;
}

/* Buttons in footer over the image */
.footer-bg-wrapper .btn-outline-secondary {
  color: #e9ecef !important;
  border-color: rgba(233,236,239,.85) !important;
}
.footer-bg-wrapper .btn-outline-secondary:hover,
.footer-bg-wrapper .btn-outline-secondary:focus {
  background: #e9ecef !important;
  color: #1b1e21 !important;
  border-color: #e9ecef !important;
}

/* Slightly stronger overlay for small screens */
@media (max-width: 576px) {
  .footer-bg-wrapper {
    background-image:
      linear-gradient(rgba(0,0,0,0.58), rgba(0,0,0,0.58)),
      url("/assets/footer-bg.jpg");
  }
}
/* Make outline-primary readable on focus/active (navbar + footer + 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;
}

/* 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;
}