/* #1c1d26 */
/* Dark background & default text color */
body {
  background-color: #1c1d26;
  color: #e0e0e0;
  margin: 0; /* Let Bootstrap handle container spacing if you like */
  padding: 0;
  font-family: sans-serif;
}

/* Drop-down styling: light gray background, white text, or anything you prefer */
.form-control {
  background-color: #3a3a3a;  /* or #333333, #2a2a2a, etc. */
  color: #ffffff;
  border: 1px solid #666;
}

/* Center your container to keep it neat */
.container, .container-fluid {
  max-width: 1200px;
  margin: auto;
}

/* Headings: lighter color to contrast background */
h1, h3, label {
  color: #e0e0e0;
}

/* Region box styling (Skin Region 1/2/3, Eye Color) */
.region-box {
  border: 1px solid #999;
  background: #353535;
  color: #e0e0e0;
  padding: 10px;
  cursor: pointer;
  user-select: none; /* disable text selection on click */
  transition: background-color 0.2s;
  margin: 5px 0;
}

.region-box:hover {
  background: #3a3a3a;
}

.active-region {
  border: 2px solid #fff;
  background: #525252;
  font-weight: bold;
}

/* A small “chosen color” box or display under each region label */
.chosen-color-box {
  margin-bottom: 30px;
  /* The actual background color is set via JS */
  /* Just ensure the text is centered and visible */
  text-align: center;
  color: #ffffff;  
  /* Provide some height/padding so we see the color clearly */
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.chosen-color-swatch {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  border: 1px solid #999;
}

/* Color bank buttons */
.color-bank-btn {
  border: 2px solid #000;
  min-width: 80px;
  min-height: 40px;
  margin: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.2s;
  line-height: 1.2;
}

.color-bank-btn:hover {
  opacity: 0.85;
}

/* Preview image styling */
#previewImg {
  border: 1px solid #999;
  margin-bottom: 1rem;
  max-width: 400px; /* or whichever size you prefer */
  width: 100%;
}

/* Stylized “radio” buttons for Gender */
.gender-radio {
  display: none; /* hide the actual input */
}

/* The default, unselected label style */
.gender-label {
  display: inline-block;
  padding: 8px 16px;
  border: 2px solid #666;
  border-radius: 4px;
  margin-right: 10px;
  cursor: pointer;
  position: relative;
  background-color: #2a2a2a;
  color: #e0e0e0;
  user-select: none;
}

/* Show a checkmark when checked, but color depends on male/female */
.gender-radio:checked + .gender-label::after {
  content: "✔";
  font-size: 16px;
  position: absolute;
  top: 0;
  right: 8px;
}

/* Make the male checkbox + background blue on check */
#genderMale:checked + label[for="genderMale"] {
  background-color: #236cfe;
  color: #fff;
}
#genderMale:checked + label[for="genderMale"]::after {
  color: #fff;
}

/* Make the female checkbox + background pink on check */
#genderFemale:checked + label[for="genderFemale"] {
  background-color: #ff66d0;
  color: #fff;
}
#genderFemale:checked + label[for="genderFemale"]::after {
  color: #fff;
}

/* Green button for “Generate Code” */
#generateBtn {
  background-color: #28a745;
  border-color: #28a745;
  color: #fff;
}
#generateBtn:hover {
  background-color: #218838;
}