/* 1) Make the page box-model predictable and kill horizontal overflow */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* horizontal only; keep vertical scroll working */
  background: #000 !important;
  color: #fff !important;
}

/* 2) You had ".ul.us_menu.dark" (typo). Use "ul.us_menu.dark". */
ul.us_menu.dark {
  background: #000 !important;
  color: #fff !important;
}

/* 3) Footer variants */
#footer,
.footer {
  background: #000 !important;
  color: #fff !important;
}

/* 4) Containers & rows
   If you’re on Bootstrap 5, rows use CSS vars for gutters; on BS4 they use -15px margins.
   Either way, ensure they don’t protrude past the viewport. */
.container,
.container-fluid {
  /* Avoid vw widths; let it be fluid */
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  /* If you truly want edge-to-edge, keep padding 0;
     otherwise add padding so rows with negative margins don’t overflow. */
  padding-left: 1rem;
  padding-right: 1rem;
  
  background: #000 !important;
  color: #fff !important;
}

/* For Bootstrap 5: zero gutters (or use the HTML class g-0) */
.row {
  --bs-gutter-x: 0;      /* BS5 */
  --bs-gutter-y: 0;      /* BS5 */
  margin-left: 0;        /* helpful for BS4 as well */
  margin-right: 0;
  padding: 0;            /* your original intent */
  width: 100%;
  max-width: 100%;
  background: #000 !important;
  color: #fff !important;
  /* You had "margin: 5 auto;" and "padding: 5;" which were invalid (no units). */
}

/* If you’re on Bootstrap 4, also neutralize the default -15px row margins explicitly */
.row > [class^="col"],
.row > [class*=" col"] {
  padding-left: 0;
  padding-right: 0;
}

/* 5) Images: prevent them from exceeding their container */
img {
  filter: brightness(0.8);
  display: block;        /* avoids inline whitespace overflow cases */
  max-width: 100%;       /* not fit-content */
  height: auto;
}

.modal-content, .modal-header, .modal-body, .modal-footer {
  background: #000 !important;
  color: #fff !important;
}

.bg-light {
  background-color: #000 !important;
  color: #fff !important;
}

#payment-form {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #ff0000 !important;
}

form .form-control, .form-signup {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #ff0000 !important;
}

.border  {
  border: 1px solid #ff0000 !important;
}

.text-muted {
  color: #fffffff3 !important;
  font-style: italic !important;
}

.dark-override {
  background: #000 !important;
  color: #fff !important;
}

.dark-override .text-muted {
  color: #fffffff3 !important;
  font-style: italic !important;
}

.fa , .fa-solid, .fa-brands{
  color: #ff0000 !important;
  font-size: inherit !important ;
  font-weight: 400 !important ;
  line-height: 1 !important ;
  font-size: smaller !important ;
} 
/* Input and label fixes for dark theme */
/* ——— DARK FORM OVERRIDES (put this LAST) ——— */

/* Inputs/selects/textarea everywhere, including inside modals & input-groups */
.modal-content .form-control,
.input-group .form-control,
.form-outline .form-control,
.form-control,
textarea.form-control,
select.form-control {
  background-color: #111 !important;
  color: #fff !important;
  border: 1px solid #ff0000 !important;
  border-radius: 4px;
}

/* Labels (MDB .form-outline + regular labels) */
.modal-content label,
.form-outline .form-label,
.form-label,
.input-label,
label {
  background: transparent !important;
  color: #fff !important;
  font-weight: 500;
}

/* Input-group addon (eye icon background) */
.input-group-text,
.input-group-addon {
  background-color: #111 !important;
  color: #fff !important;
  border: 1px solid #ff0000 !important;
}

/* Placeholder contrast */
::placeholder {
  color: #ccc !important;
  opacity: 1;
}

/* Focus state */
.form-control:focus {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #ff3333 !important;
  box-shadow: 0 0 4px #ff3333 !important;
}

/* Chrome/Edge/Safari autofill reset (prevents light/yellow fill) */
input.form-control:-webkit-autofill,
input.form-control:-webkit-autofill:hover,
input.form-control:-webkit-autofill:focus,
textarea.form-control:-webkit-autofill,
select.form-control:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 0 0px 1000px #111 inset !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

/* Disabled/read-only to keep dark */
.form-control:disabled,
.form-control[readonly] {
  background-color: #1a1a1a !important;
  color: #bbb !important;
  opacity: 1 !important;
}

/* Buttons (optional, to match your red accent) */
.btn-primary {
  background-color: #c40000 !important;
  border-color: #c40000 !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #ff0000 !important;
  border-color: #ff0000 !important;
}

/* ==== ABSOLUTE DARK FORM FIXES ==== */

/* Regular focus + MDB outline + Bootstrap variants */
.form-control:focus,
.form-outline .form-control:focus,
.form-outline .form-control.active,
.input-group .form-control:focus,
.modal-content .form-control:focus {
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid #ff3333 !important;
  box-shadow: 0 0 6px #ff3333 !important;
  outline: none !important;
  caret-color: #ff0000 !important;
}

/* Force label (MDB floating style) to stay white while active */
.form-outline .form-control:focus ~ .form-label,
.form-outline .form-control.active ~ .form-label {
  color: #fff !important;
  background: transparent !important;
}

/* Also catch pseudo-elements some themes use for "highlight" bars */
.form-outline .form-notch,
.form-outline .form-notch-leading,
.form-outline .form-notch-trailing {
  border-color: #ff0000 !important;
}

ul.us_menu.custom, ul.us_menu.custom .us_sub-menu li, ul.us_menu.custom ul.us_sub-menu
Specificity: (0,2,1)
 {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #ff3333 !important;
  box-shadow: 0 0 4px #ff3333 !important;
}

.us_menu,  .horizontal , .custom {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #ff3333 !important;
  box-shadow: 0 0 4px #ff3333 !important;
}