/* 1. Paint ONLY the specific bottom panel background strip */
.site-footer__bottom,
.footer-navbar,
.site-footer .footer-navbar {
    background-color: #2D0052 !important; /* Premium dark purple strip */
    border-top: 2px solid #7B2CBF !important; /* Elegant divider border line */
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* 2. Turn the beta testing & copyright text inside that strip white */
.footer-navbar__start,
.footer-navbar__copyright,
.site-footer__bottom p,
.site-footer__bottom span {
    color: #ffffff !important;
    font-size: 15px !important;
}

/* 3. Turn the Terms and Privacy link text inside that strip white */
.footer-navbar__end a,
.site-footer__menu a,
.site-footer__bottom a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 15px !important;
}

/* 4. Add a nice lavender hover response to the links */
.footer-navbar__end a:hover,
.site-footer__menu a:hover,
.site-footer__bottom a:hover {
    color: #E0AAFF !important;
}


/* 1. Reset and hide the default browser checkbox appearance */
input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #ffffff;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.25em;
  height: 1.25em;
  border: 2px solid #333333; /* Dark border so users can see it clearly */
  border-radius: 4px;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  vertical-align: middle;
}

/* 2. Style the checkbox when it is checked */
input[type="checkbox"]:checked {
  background-color: #1a1a1a; /* Dark background upon clicking */
  border-color: #1a1a1a;
}

/* 3. Create the white checkmark inside the dark background */
input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #ffffff; /* White checkmark color */
  
  /* Windows High Contrast Mode support */
  background-color: CanvasText;
  
  /* Creates the checkmark shape */
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}