/**
 * Zibuke OnCall — Global Visual Enhancements + Strict Colour Rules
 * ────────────────────────────────────────────────────────────────
 *
 * COLOUR RULES (enforced globally):
 *   Black bg (#000000)     → lime text (#CFFF04)
 *   White text (#ffffff)   → black bg (#000000)
 *   Lime bg (#CFFF04)   → black text (#000000)
 *   White bg (#ffffff)     → black text (#000000)
 */

/* ═══════════════════════════════════════════════════════════════
   0. CSS CUSTOM PROPERTIES — Brand Tokens
   ═══════════════════════════════════════════════════════════════ */
:root {
  --zo-black:   #000000;
  --zo-white:   #ffffff;
  --zo-lime:    #CFFF04;
  --zo-lime-h:  #ffffff;          /* hover tint            */
  --zo-dark:    #000000;
  --zo-surface: #000000;
  --zo-border:  #cfff04;
  --zo-border2: #cfff04;
  --zo-lime10:  #cfff04;
  --zo-lime05:  #cfff04;
  --zo-muted:   #ffffff;
  --zo-radius:  14px;
  --zo-shadow:  0 6px 28px #000000;
  --zo-shadow-lg: 0 12px 48px #000000;
  --zo-transition: .25s cubic-bezier(.4,0,.2,1);
}

/* ═══════════════════════════════════════════════════════════════
   1. STRICT COLOUR RULE — Dark Theme Base
   Rule: Black bg → lime text
   ═══════════════════════════════════════════════════════════════ */
body {
  background: var(--zo-black);
  color: var(--zo-lime);
  font-family: 'Inter', 'Space Grotesk', system-ui, -apple-system, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── Headings: lime on black ── */
h1,h2,h3,h4,h5,h6 {
  color: var(--zo-lime);
  line-height: 1.25;
  margin-bottom: .5em;
  font-weight: 800;
  letter-spacing: -.015em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); }
h4 { font-size: 1.15rem; }
p  { color: var(--zo-lime); margin-bottom: 1rem; }
a  { color: var(--zo-lime); transition: opacity var(--zo-transition); }
a:hover { opacity: .78; }

/* ═══════════════════════════════════════════════════════════════
   2. STRICT COLOUR RULE — White Text on Black
   ═══════════════════════════════════════════════════════════════ */
.text-white { color: var(--zo-white) !important; background: var(--zo-black) !important; }
.bg-black   { background: var(--zo-black) !important; color: var(--zo-lime) !important; }

/* ═══════════════════════════════════════════════════════════════
   3. STRICT COLOUR RULE — Lime Background → Black Text
   ═══════════════════════════════════════════════════════════════ */
.bg-lime {
  background: var(--zo-lime) !important;
  color: var(--zo-black) !important;
}
.bg-lime * { color: var(--zo-black) !important; }
.bg-lime a { color: var(--zo-black) !important; text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   4. STRICT COLOUR RULE — White Background → Black Text
   ═══════════════════════════════════════════════════════════════ */
.bg-white {
  background: var(--zo-white) !important;
  color: var(--zo-black) !important;
}
.bg-white h1,.bg-white h2,.bg-white h3,.bg-white h4,
.bg-white h5,.bg-white h6,.bg-white p,.bg-white label {
  color: var(--zo-black) !important;
}
.bg-white a { color: var(--zo-black) !important; }

/* ═══════════════════════════════════════════════════════════════
   5. BUTTONS
   Lime bg → black text  |  Outline = lime on black
   ═══════════════════════════════════════════════════════════════ */
button, .btn, input[type="submit"] {
  font-family: inherit;
  font-weight: 700;
  font-size: .95rem;
  border: none;
  border-radius: 10px;
  padding: 14px 28px;
  cursor: pointer;
  transition: all var(--zo-transition);
  letter-spacing: .02em;
}
button:hover, .btn:hover, input[type="submit"]:hover {
  transform: translateY(-2px);
}
button:active, .btn:active { transform: translateY(0); }
button:disabled, .btn:disabled {
  opacity: .55; cursor: not-allowed; transform: none !important;
}

/* Primary: lime bg → black text */
.btn-lime, .btn-primary, button[type="submit"],
.btn-black {
  background: var(--zo-lime);
  color: var(--zo-black);
  box-shadow: 0 4px 18px #cfff04;
}
.btn-lime:hover, .btn-primary:hover, button[type="submit"]:hover,
.btn-black:hover {
  background: var(--zo-lime);
  color: var(--zo-black);
}

/* Ghost / outline: lime text on black */
.btn-ghost, .btn-outline, .btn-secondary {
  background: transparent;
  border: 2px solid var(--zo-lime);
  color: var(--zo-lime);
}
.btn-ghost:hover, .btn-outline:hover, .btn-secondary:hover {
  background: transparent;
  color: var(--zo-lime);
}

/* ═══════════════════════════════════════════════════════════════
   6. FORM INPUTS  (lime border, lime text, black bg)
   ═══════════════════════════════════════════════════════════════ */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="date"],
input[type="search"], textarea, select {
  width: 100%;
  padding: 14px 18px;
  background: #000000;
  border: 2px solid var(--zo-border);
  border-radius: 10px;
  color: var(--zo-lime);
  font-family: inherit;
  font-size: 1rem;
  transition: all var(--zo-transition);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--zo-lime);
  box-shadow: 0 0 0 4px rgba(207, 255, 4, 0.25);
  background: #000000;
}
input::placeholder, textarea::placeholder { color: rgba(207, 255, 4, 0.5); }
label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: .88rem;
  color: var(--zo-lime);
  letter-spacing: .02em;
}
.form-group { margin-bottom: 1.4rem; }

/* ── Dropdown / Select — forced black bg, lime text, no highlight ── */
select {
  background: #000000 !important;
  color: #CFFF04 !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23CFFF04' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px !important;
  padding-right: 36px;
}
select option,
select optgroup {
  background: #000000 !important;
  color: #CFFF04 !important;
  -webkit-text-fill-color: #CFFF04 !important;
}
select option:hover,
select option:focus,
select option:active,
select option:checked {
  background: #000000 !important;
  color: #CFFF04 !important;
  -webkit-text-fill-color: #CFFF04 !important;
  outline: none !important;
  box-shadow: none !important;
}
select:focus option,
select:focus option:hover,
select:focus option:checked {
  background: #000000 !important;
  color: #CFFF04 !important;
  -webkit-text-fill-color: #CFFF04 !important;
}
/* Remove highlight on the closed-select display line */
select:focus {
  outline: none !important;
  border-color: var(--zo-lime) !important;
  box-shadow: 0 0 0 4px #cfff04 !important;
  background-color: #000000 !important;
  color: #CFFF04 !important;
}
/* WebKit highlight removal */
select::-webkit-scrollbar { width: 6px; }
select::-webkit-scrollbar-track { background: #000000; }
select::-webkit-scrollbar-thumb { background: #cfff04; border-radius: 3px; }
/* Remove tap-highlight on mobile */
select, select option {
  -webkit-tap-highlight-color: transparent !important;
}


/* White-background form variant */
.bg-white input, .bg-white textarea, .bg-white select {
  background: var(--zo-white);
  border-color: #ffffff;
  color: var(--zo-black);
}
.bg-white input:focus, .bg-white textarea:focus {
  border-color: var(--zo-black);
  box-shadow: 0 0 0 3px #000000;
}
.bg-white label { color: var(--zo-black); }
.bg-white input::placeholder { color: #000000; }
.bg-white select,
.bg-white select option {
  background: #000000 !important;
  color: #CFFF04 !important;
  -webkit-text-fill-color: #CFFF04 !important;
  border-color: var(--zo-lime) !important;
}
.bg-white select option:hover,
.bg-white select option:focus,
.bg-white select option:checked {
  background: #000000 !important;
  color: #CFFF04 !important;
  -webkit-text-fill-color: #CFFF04 !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. CARDS  (black bg, lime border, lime text)
   ═══════════════════════════════════════════════════════════════ */
.card, .portal-card, .login-card, .info-card {
  background: var(--zo-dark);
  border: 1px solid var(--zo-border);
  border-radius: var(--zo-radius);
  padding: 2rem;
  margin-bottom: 1.25rem;
  color: var(--zo-lime);
  transition: all var(--zo-transition);
}

.card h2,.card h3,.card h4,
.portal-card h2,.portal-card h3,
.login-card h2,.login-card h3 { color: var(--zo-lime); }

/* Lime-background card variant */
.card-lime {
  background: var(--zo-lime);
  color: var(--zo-black);
  border-color: var(--zo-lime);
}
.card-lime h2,.card-lime h3,.card-lime h4,
.card-lime p,.card-lime span,.card-lime a { color: var(--zo-black) !important; }

/* ═══════════════════════════════════════════════════════════════
   8. LAYOUT & SPACING
   ═══════════════════════════════════════════════════════════════ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}
@media (max-width: 768px) { .container { padding: 0 1rem; } }
.section { padding: 4rem 0; }
@media (max-width: 768px) { .section { padding: 2.5rem 0; } }

/* ═══════════════════════════════════════════════════════════════
   9. TOP BAR & HEADER
   ═══════════════════════════════════════════════════════════════ */
.top-bar {
  background: var(--zo-black);
  color: var(--zo-lime);
  border-bottom: 1px solid var(--zo-border);
  font-size: .82rem;
  padding: 6px 0;
}
.top-bar a { color: var(--zo-lime); }

.site-header, .header-inner {
  background: var(--zo-black);
  color: var(--zo-lime);
}
.site-header a { color: var(--zo-lime); }

.main-nav a {
  position: relative;
  padding: .5rem 1rem;
  color: var(--zo-lime);
  font-weight: 600;
  transition: all var(--zo-transition);
}
.main-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%;
  width: 0; height: 2px;
  background: var(--zo-lime);
  transition: all .3s ease;
  transform: translateX(-50%);
}
.main-nav a:hover::after,
.main-nav a.active::after { width: 75%; }
.main-nav a:hover,
.main-nav a.active {
  background: transparent !important;
  color: var(--zo-lime) !important;
}
.main-nav a:hover { opacity: .85; }

.nav-cta {
  background: var(--zo-lime) !important;
  color: var(--zo-black) !important;
  border-radius: 8px;
  padding: 8px 20px !important;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   10. FOOTER  (black bg → lime text)
   ═══════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--zo-black);
  color: var(--zo-lime);
  border-top: 1px solid var(--zo-border);
  padding: 3rem 0 1.5rem;
}
.site-footer a { color: var(--zo-lime); }
.site-footer h4 { color: var(--zo-lime); }
.footer-bottom { color: var(--zo-muted); }

/* ═══════════════════════════════════════════════════════════════
   11. MOBILE NAV
   ═══════════════════════════════════════════════════════════════ */
.hamburger {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: .5rem;
}
.hamburger span {
  display: block;
  width: 24px; height: 2.5px;
  margin: 5px 0;
  background: var(--zo-lime);
  border-radius: 2px;
  transition: all .3s ease;
}
@media (max-width: 768px) {
  .hamburger { display: block; }
  .main-nav {
    position: fixed;
    top: 0; right: -100%;
    width: 82%; max-width: 320px;
    height: 100vh;
    background: var(--zo-black);
    border-left: 1px solid var(--zo-border);
    padding: 5rem 2rem 2rem;
    transition: right .35s ease;
    z-index: 999;
    overflow-y: auto;
  }
  .main-nav.active { right: 0; }
  .main-nav a {
    display: block;
    padding: 1rem 0;
    border-bottom: 1px solid var(--zo-border);
    font-size: 1.05rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   12. SERVER STATUS INDICATOR
   ═══════════════════════════════════════════════════════════════ */
[data-server-status] {
  font-size: .8rem;
  padding: 5px 14px;
  border-radius: 20px;
  background: var(--zo-lime10);
  color: var(--zo-lime);
  display: inline-block;
  margin: .8rem 0;
  font-weight: 600;
  transition: all .3s ease;
}
[data-server-status][data-status="ready"]   { background: var(--zo-black); color: #10b981; }
[data-server-status][data-status="warming"] { background: var(--zo-black); color: #f59e0b; }
[data-server-status][data-status="degraded"]{ background: var(--zo-black); color: #ef4444; }

/* ═══════════════════════════════════════════════════════════════
   13. LOGIN PAGE REFINEMENTS
   ═══════════════════════════════════════════════════════════════ */
.login-container {
  max-width: 480px;
  margin: 2rem auto;
  padding: 2rem 1rem;
}
.login-card {
  background: var(--zo-dark);
  border: 1px solid var(--zo-border2);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  box-shadow: var(--zo-shadow-lg);
}
@media (max-width: 768px) {
  .login-card { padding: 2rem 1.25rem; border-radius: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   14. PORTAL GRID  (less crowded, cleaner)
   ═══════════════════════════════════════════════════════════════ */
.portal-grid, .dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}
@media (max-width: 768px) {
  .portal-grid, .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   15. STAT CARDS  (lime value, muted label, dark bg)
   ═══════════════════════════════════════════════════════════════ */
.stat-card {
  background: var(--zo-dark);
  border: 1px solid var(--zo-border);
  border-radius: var(--zo-radius);
  padding: 1.5rem;
  text-align: center;
  color: var(--zo-lime);
  transition: all var(--zo-transition);
}
.stat-card:hover {
  border-color: var(--zo-border2);
  transform: translateY(-3px);
  
}
.stat-value {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--zo-lime);
  line-height: 1;
  margin-bottom: .35rem;
}
.stat-label {
  font-size: .82rem;
  color: var(--zo-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   16. TABLES  (dark bg, lime accents)
   ═══════════════════════════════════════════════════════════════ */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background: var(--zo-dark);
  border-radius: var(--zo-radius);
  overflow: hidden;
  color: var(--zo-lime);
}
thead { background: #cfff04; }
th {
  padding: 1rem;
  text-align: left;
  font-weight: 700;
  color: var(--zo-lime);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--zo-border);
}
td {
  padding: 1rem;
  border-bottom: 1px solid var(--zo-border);
  color: var(--zo-lime);
}
tbody tr { transition: background .2s; }
tbody tr:hover { background: var(--zo-lime05); }
@media (max-width: 768px) {
  table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ═══════════════════════════════════════════════════════════════
   17. ALERTS
   ═══════════════════════════════════════════════════════════════ */
.alert {
  padding: 1rem 1.4rem;
  border-radius: 10px;
  margin: 1rem 0;
  border-left: 4px solid;
  font-weight: 500;
}
.alert-success { background: var(--zo-black); border-color: #10b981; color: #10b981; }
.alert-warning { background: var(--zo-black); border-color: #f59e0b; color: #f59e0b; }
.alert-error   { background: var(--zo-black); border-color: #ef4444; color: #ef4444; }
.alert-info    { background: var(--zo-black); border-color: #3b82f6; color: #3b82f6; }

/* ═══════════════════════════════════════════════════════════════
   18. SECTION BACKGROUNDS  (enforce colour rules)
   ═══════════════════════════════════════════════════════════════ */
.section-black {
  background: var(--zo-black);
  color: inherit;
}
.section-black h1, .section-black h2, .section-black h3,
.section-black p, .section-black a { color: inherit; }

/* Callback Section: Black bg with lime text (Rule 1) */
.callback-section {
  background: var(--zo-black) !important;
  color: var(--zo-lime) !important;
}
.callback-section h1, .callback-section h2, .callback-section h3, .callback-section h4 {
  color: var(--zo-lime) !important;
}
.callback-section p {
  color: var(--zo-lime) !important;
}
.callback-section label {
  color: var(--zo-lime) !important;
}

.section-lime {
  background: var(--zo-lime);
  color: var(--zo-black);
}
.section-lime h1, .section-lime h2, .section-lime h3,
.section-lime p, .section-lime a { color: var(--zo-black); }
.stats {
  background: var(--zo-lime) !important;
  color: var(--zo-black) !important;
}
.stats h1, .stats h2, .stats h3, .stats h4, .stats p, .stats a { color: var(--zo-black) !important; }

.section-white {
  background: var(--zo-white);
  color: var(--zo-black);
}
.section-white h1, .section-white h2, .section-white h3,
.section-white p, .section-white label { color: var(--zo-black); }
.section-white a { color: var(--zo-black); }

/* ═══════════════════════════════════════════════════════════════
   19. LOADING ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

.fade-in  { animation: fadeIn .45s ease both; }
.pulse    { animation: pulse 2s ease-in-out infinite; }

.spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 3px solid var(--zo-lime10);
  border-top-color: var(--zo-lime);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════
   20. SCROLLBAR
   ═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--zo-black); }
::-webkit-scrollbar-thumb { background: var(--zo-lime); border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════════
   21. ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--zo-lime);
  outline-offset: 3px;
}
.skip-link {
  position: absolute; top: -50px; left: 0;
  background: var(--zo-lime); color: var(--zo-black);
  padding: 10px 20px; font-weight: 700;
  z-index: 10000; transition: top .3s;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ═══════════════════════════════════════════════════════════════
   22. UTILITIES
   ═══════════════════════════════════════════════════════════════ */
.text-lime   { color: var(--zo-lime)  !important; }
.text-black  { color: var(--zo-black) !important; }
.text-white  { color: var(--zo-white) !important; }
.bg-black    { background: var(--zo-black) !important; }
.bg-lime     { background: var(--zo-lime)  !important; color: var(--zo-black) !important; }
.bg-white    { background: var(--zo-white) !important; color: var(--zo-black) !important; }
.hide-mobile { display: block; }
.show-mobile { display: none; }
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}

/* ═══════════════════════════════════════════════════════════════
   24. VARIETY BANDS — break pages into alternating backgrounds
   (mirrors css/colour-enforcer.css so pages that load only this
   stylesheet still get the band classes the JS enforcer assigns).
   Each band obeys one of the Four Colour Rules.

   Each band sets ONLY its own background + text colour (inherited by
   descendants). We deliberately do NOT use blanket
   `.zo-band-x h2,p,a { color !important }` descendant rules — those would
   force lime/black text onto elements sitting inside a sub-card with its OWN
   background (e.g. a white info-card inside a black band), causing invisible
   text. The correct text colour for any element with its own background is
   enforced by the JS enforcer (computed-style aware) and the collapse rules. ═══ */
/* Black / surface bands set only their own bg+text (descendants inherit lime
   via base tag rules). No descendant text forcing, so a sub-card with its own
   light background is not turned invisible. */
.zo-band-black    { background: var(--zo-black) !important; color: var(--zo-lime) !important; }
.zo-band-surface { background: #0a0a0a !important;          color: var(--zo-lime) !important; }

/* Lime / white bands (Rule 3 / Rule 4) — text must be BLACK; base tag rules
   elsewhere set lime (invisible on lime/white), so force black on descendants. */
.zo-band-lime    { background: var(--zo-lime) !important;   color: var(--zo-black) !important; }
.zo-band-lime a  { color: var(--zo-black) !important; text-decoration: underline; }
.zo-band-lime h1,.zo-band-lime h2,.zo-band-lime h3,.zo-band-lime h4,
.zo-band-lime h5,.zo-band-lime h6,.zo-band-lime p,.zo-band-lime li,
.zo-band-lime small,.zo-band-lime strong,.zo-band-lime em,
.zo-band-lime label { color: var(--zo-black) !important; }
/* Buttons inside a lime band flip to outline (black-on-lime would vanish). */
.zo-band-lime .btn-lime, .zo-band-lime .btn-primary, .zo-band-lime button[type="submit"] {
  background: var(--zo-black) !important; color: var(--zo-lime) !important; border-color: var(--zo-black) !important;
}
/* Printable band — Rule 4 (white bg → black text). Invoices/receipts ONLY. */
.zo-band-white { background: var(--zo-white) !important; color: var(--zo-black) !important; }
.zo-band-white h1,.zo-band-white h2,.zo-band-white h3,.zo-band-white h4,
.zo-band-white h5,.zo-band-white h6,.zo-band-white p,.zo-band-white a,
.zo-band-white li,.zo-band-white span,.zo-band-white label,.zo-band-white small,
.zo-band-white strong,.zo-band-white em { color: var(--zo-black) !important; }

/* ═══════════════════════════════════════════════════════════════
   25. PRINT
   ═══════════════════════════════════════════════════════════════ */
@media print {
  .no-print { display: none !important; }
  body { background: #ffffff; color: #000000; }
  .card { border: 1px solid #ffffff; page-break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════
   26. STRICT BUTTON CONTRAST & CLICK RULES
   ═══════════════════════════════════════════════════════════════ */

/* 1. White Background -> Black Button, White Text (No color changes on hover/click) */
.bg-white button, .bg-white .btn, .bg-white input[type="submit"],
.section-white button, .section-white .btn, .section-white input[type="submit"],
.card-color-white button, .card-color-white .btn, .card-color-white input[type="submit"],
[style*="background-color: #ffffff"] button, [style*="background-color: #ffffff"] .btn,
[style*="background-color: #fff"] button, [style*="background-color: #fff"] .btn,
[style*="background: #ffffff"] button, [style*="background: #ffffff"] .btn,
[style*="background: #fff"] button, [style*="background: #fff"] .btn {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
}
/* Prevent hover, active and focus state color changes */
.bg-white button:hover, .bg-white .btn:hover, .bg-white input[type="submit"]:hover,
.bg-white button:active, .bg-white .btn:active, .bg-white input[type="submit"]:active,
.bg-white button:focus, .bg-white .btn:focus, .bg-white input[type="submit"]:focus,
.section-white button:hover, .section-white .btn:hover, .section-white input[type="submit"]:hover,
.section-white button:active, .section-white .btn:active, .section-white input[type="submit"]:active,
.section-white button:focus, .section-white .btn:focus, .section-white input[type="submit"]:focus,
.card-color-white button:hover, .card-color-white .btn:hover, .card-color-white input[type="submit"]:hover,
.card-color-white button:active, .card-color-white .btn:active, .card-color-white input[type="submit"]:active,
.card-color-white button:focus, .card-color-white .btn:focus, .card-color-white input[type="submit"]:focus {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* 2. Lime Background (#CFFF04) -> Black Button, Lime Text (#CFFF04) (No color changes on hover/click) */
.bg-lime button, .bg-lime .btn, .bg-lime input[type="submit"],
.section-lime button, .section-lime .btn, .section-lime input[type="submit"],
.card-color-lime button, .card-color-lime .btn, .card-color-lime input[type="submit"],
[style*="background-color: #cfff04"] button, [style*="background-color: #cfff04"] .btn,
[style*="background: #cfff04"] button, [style*="background: #cfff04"] .btn,
.zo-band-lime button, .zo-band-lime .btn, .zo-band-lime input[type="submit"] {
  background: #000000 !important;
  color: #cfff04 !important;
  border: 2px solid #000000 !important;
}
/* Prevent hover, active and focus state color changes */
.bg-lime button:hover, .bg-lime .btn:hover, .bg-lime input[type="submit"]:hover,
.bg-lime button:active, .bg-lime .btn:active, .bg-lime input[type="submit"]:active,
.bg-lime button:focus, .bg-lime .btn:focus, .bg-lime input[type="submit"]:focus,
.section-lime button:hover, .section-lime .btn:hover, .section-lime input[type="submit"]:hover,
.section-lime button:active, .section-lime .btn:active, .section-lime input[type="submit"]:active,
.section-lime button:focus, .section-lime .btn:focus, .section-lime input[type="submit"]:focus,
.card-color-lime button:hover, .card-color-lime .btn:hover, .card-color-lime input[type="submit"]:hover,
.card-color-lime button:active, .card-color-lime .btn:active, .card-color-lime input[type="submit"]:active,
.card-color-lime button:focus, .card-color-lime .btn:focus, .card-color-lime input[type="submit"]:focus,
.zo-band-lime button:hover, .zo-band-lime .btn:hover, .zo-band-lime input[type="submit"]:hover,
.zo-band-lime button:active, .zo-band-lime .btn:active, .zo-band-lime input[type="submit"]:active,
.zo-band-lime button:focus, .zo-band-lime .btn:focus, .zo-band-lime input[type="submit"]:focus {
  background: #000000 !important;
  color: #cfff04 !important;
  border-color: #000000 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* 3. Black Background -> Lime Button (#CFFF04), Black Text (No color changes on hover/click) */
.bg-black button, .bg-black .btn, .bg-black input[type="submit"],
.section-black button, .section-black .btn, .section-black input[type="submit"],
.card-color-black button, .card-color-black .btn, .card-color-black input[type="submit"],
.site-footer button, .site-footer .btn, .site-footer input[type="submit"],
body:not(.bg-white):not(.bg-lime):not(.section-white):not(.section-lime):not(.card-color-white):not(.card-color-lime) button,
body:not(.bg-white):not(.bg-lime):not(.section-white):not(.section-lime):not(.card-color-white):not(.card-color-lime) .btn,
body:not(.bg-white):not(.bg-lime):not(.section-white):not(.section-lime):not(.card-color-white):not(.card-color-lime) input[type="submit"] {
  background: #cfff04 !important;
  color: #000000 !important;
  border: 2px solid #cfff04 !important;
}
/* Prevent hover, active and focus state color changes */
.bg-black button:hover, .bg-black .btn:hover, .bg-black input[type="submit"]:hover,
.bg-black button:active, .bg-black .btn:active, .bg-black input[type="submit"]:active,
.bg-black button:focus, .bg-black .btn:focus, .bg-black input[type="submit"]:focus,
.section-black button:hover, .section-black .btn:hover, .section-black input[type="submit"]:hover,
.section-black button:active, .section-black .btn:active, .section-black input[type="submit"]:active,
.section-black button:focus, .section-black .btn:focus, .section-black input[type="submit"]:focus,
.card-color-black button:hover, .card-color-black .btn:hover, .card-color-black input[type="submit"]:hover,
.card-color-black button:active, .card-color-black .btn:active, .card-color-black input[type="submit"]:active,
.card-color-black button:focus, .card-color-black .btn:focus, .card-color-black input[type="submit"]:focus,
.site-footer button:hover, .site-footer .btn:hover, .site-footer input[type="submit"]:hover,
.site-footer button:active, .site-footer .btn:active, .site-footer input[type="submit"]:active,
.site-footer button:focus, .site-footer .btn:focus, .site-footer input[type="submit"]:focus,
body:not(.bg-white):not(.bg-lime):not(.section-white):not(.section-lime):not(.card-color-white):not(.card-color-lime) button:hover,
body:not(.bg-white):not(.bg-lime):not(.section-white):not(.section-lime):not(.card-color-white):not(.card-color-lime) .btn:hover,
body:not(.bg-white):not(.bg-lime):not(.section-white):not(.section-lime):not(.card-color-white):not(.card-color-lime) input[type="submit"]:hover,
body:not(.bg-white):not(.bg-lime):not(.section-white):not(.section-lime):not(.card-color-white):not(.card-color-lime) button:active,
body:not(.bg-white):not(.bg-lime):not(.section-white):not(.section-lime):not(.card-color-white):not(.card-color-lime) .btn:active,
body:not(.bg-white):not(.bg-lime):not(.section-white):not(.section-lime):not(.card-color-white):not(.card-color-lime) input[type="submit"]:active,
body:not(.bg-white):not(.bg-lime):not(.section-white):not(.section-lime):not(.card-color-white):not(.card-color-lime) button:focus,
body:not(.bg-white):not(.bg-lime):not(.section-white):not(.section-lime):not(.card-color-white):not(.card-color-lime) .btn:focus,
body:not(.bg-white):not(.bg-lime):not(.section-white):not(.section-lime):not(.card-color-white):not(.card-color-lime) input[type="submit"]:focus {
  background: #cfff04 !important;
  color: #000000 !important;
  border-color: #cfff04 !important;
  box-shadow: none !important;
  transform: none !important;
}