#fw-section-donations-1757718486 {
--color-primary: #00a884;
--color-primary-rgb: 0, 168, 132;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);
/* ===== Fourthwall Donation Section (safe CSS) ===== */

/* Styles any form in the donation page area */
form {
  background: rgba(10, 10, 10, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: 24px;
  color: #ffffff;
}

/* Headings inside the form */
form h1, form h2, form h3 {
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 0 0 10px 0;
}

/* Paragraph text */
form p {
  opacity: 0.88;
  line-height: 1.5;
}

/* Inputs and message box */
form input[type="text"],
form input[type="email"],
form input[type="number"],
form textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  color: #ffffff;
  outline: none;
}

form input::placeholder,
form textarea::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

/* Focus glow (Riverwalk Teal) */
form input:focus,
form textarea:focus {
  border-color: rgba(0, 140, 140, 0.70);
  box-shadow: 0 0 0 3px rgba(0, 140, 140, 0.18);
}

/* Amount option buttons (non-submit) */
form button {
  border-radius: 12px;
}

/* Try to make option buttons look like tiles */
form button:not([type="submit"]) {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-weight: 700;
  padding: 10px 16px;
  transition: 0.25s ease;
}

form button:not([type="submit"]):hover {
  transform: translateY(-2px);
  border-color: rgba(240, 90, 40, 0.55);
}

/* Main donate button */
form button[type="submit"] {
  width: 100%;
  margin-top: 14px;
  background: #F05A28; /* Mission Orange */
  border: 0;
  color: #ffffff;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 14px 18px;
  transition: 0.25s ease;
}

form button[type="submit"]:hover {
  background: #d94c1f;
  transform: translateY(-2px);
}

}
#fw-section-footer {
--color-primary: #ffffff;
--color-primary-rgb: 255, 255, 255;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);
/* ===== Vaqueros Footer ===== */

footer,
.site-footer,
.footer,
[role="contentinfo"] {
  background: #000000 !important;
  border-top: 3px solid #008C8C !important; /* Teal line */
  padding: 30px 20px !important;
  color: rgba(255,255,255,0.85) !important;
  text-align: center;
}

/* Footer links */
footer a,
.site-footer a,
.footer a,
[role="contentinfo"] a {
  color: rgba(255,255,255,0.80) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

/* Hover effect */
footer a:hover,
.site-footer a:hover,
.footer a:hover,
[role="contentinfo"] a:hover {
  color: #00b5b5 !important; /* brighter teal */
}

/* Small text (copyright, policies, etc.) */
footer p,
footer small,
.site-footer p,
.footer p {
  opacity: 0.7;
  font-size: 13px;
  letter-spacing: 0.5px;
}

}
#fw-section-header {
--color-primary: #ffffff;
--color-primary-rgb: 255, 255, 255;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);
/* ===== Black Header + Teal Line ===== */

/* Target common header containers */
header,
[role="banner"],
.site-header,
.siteHeader,
.header,
.Header,
.navbar,
.Navbar,
.topbar,
.Topbar {
  background: #000000 !important;              /* pure black */
  border-bottom: 3px solid #008C8C !important; /* Riverwalk Teal line */
  box-shadow: none !important;
}

/* Header links */
header a,
[role="banner"] a,
.site-header a,
.siteHeader a,
.header a,
.Header a,
.navbar a,
.Navbar a,
.topbar a,
.Topbar a {
  color: #ffffff !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

/* Hover accent */
header a:hover,
[role="banner"] a:hover,
.site-header a:hover,
.siteHeader a:hover,
.header a:hover,
.Header a:hover,
.navbar a:hover,
.Navbar a:hover,
.topbar a:hover,
.Topbar a:hover {
  color: #00b5b5 !important; /* brighter teal hover */
}

}






#fw-section-password {
--color-primary: #ffffff;
--color-primary-rgb: 255, 255, 255;
--color-background: #000000;
--color-background-rgb: 0, 0, 0;
--color-on-primary: #000000;
--color-on-primary-rgb: 0, 0, 0;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 0;
background-color: var(--color-background);
color: var(--color-on-background);
@keyframes vaqPulse {
  0% { box-shadow: 0 0 0 0 rgba(240,90,40,0.45); }
  70% { box-shadow: 0 0 0 14px rgba(240,90,40,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,90,40,0); }
}

button, input[type="submit"] {
  position: relative;
  animation: vaqPulse 2.2s infinite;
  transform: translateZ(0);
}

button:active, input[type="submit"]:active {
  transform: translateY(1px) scale(0.99);
}

main, .container {
  position: relative;
  border-radius: 18px;
}

main::before, .container::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  background: radial-gradient(circle at top, rgba(0,140,140,0.25), rgba(240,90,40,0.20), rgba(0,0,0,0));
  opacity: 0.12;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

main:hover::before, .container:hover::before {
  opacity: 0.30;
}

button:not([type="submit"]) {
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

button:not([type="submit"]):hover {
  transform: translateY(-2px);
  border-color: rgba(0,140,140,0.65);
}


}