:root {
  --body-bg-bE: #070707;
  --dealCard-bg-bE: #000000;
  --dark-text-bE: hsl(0, 0%, 90%);
  --grey-text-bE: hsl(0, 0%, 90%);
  --light-grey-text-bE: hsl(0, 0%, 95%);
  --large-header-bE: 1.5rem;
  --form-bg-bE: #232a31;
  --form-bg-bEText: #232a31;
  --form-border: #353535;
  --refine-text2: #474747;
  --spacer-col: #353535;
  --bg-slateButton: #004a77;
}

.dark-mode {
  --body-bg-bE: #fff;
  --dealCard-bg-bE: #ffffff;
  --dark-text-bE: #191919;
  --grey-text-bE: hsl(0, 0%, 29%);
  --light-grey-text-bE: hsl(0, 0%, 45%);
  --large-header-bE: 1.5rem;
  --form-bg-bE: #ffffff;
  --form-bg-bEText: #ffffff;
  --form-border: #dee2e6;
  --refine-text2: #dee2e6;
  --spacer-col: #e5e5e5;
  --bg-slateButton: #007dbd;
}

.add_deal_h1 {
  font-size: 1.5rem;
  color: var(--darkText-light);
  font-weight: 600 !important;
  margin-top: 1.25rem;
  padding-bottom: 0.5rem;
}

.loc_Butt {
  width: 250px;
  margin: 0 auto;
  cursor: pointer;
  border: none;
  background: var(--bg-slateButton);
  color: var(--text-justWhite);
  font-weight: 600;
  font-size: 1.15rem;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  opacity: 1;
  transition: opacity 0.33s ease-in-out;
  border-radius: 1.5rem;
  margin-top: 0.5rem;
}

.loc_Butt2 {
  width: 250px;
  margin: 0 auto;
  cursor: pointer;
  border: none;
  background: var(--bg-slateButton);
  color: var(--text-justWhite);
  font-weight: 600;
  font-size: 1.15rem;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  opacity: 1;
  transition: opacity 0.33s ease-in-out;
  border-radius: 1.5rem;
  margin-top: 0.5rem;
}

.main_container_newListing {
  max-width: 1024px;
  padding-bottom: 2rem;
  margin-top: 2rem;
  border-radius: 10px;
  padding-left: 2rem;
  padding-right: 2rem;
}

.step_container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  border-radius: 10px;
}

.add_deal_spacer {
  width: 100%;
  height: 0.125rem;
  border-radius: 25px;
  background-color: var(--spacer-col);
}

.cancel_butt {
  width: 280px;
  margin: 0 auto;
  cursor: pointer;
  border: none;
  background: var(--body-bg-bE);
  color: var(--text-justWhite);
  font-weight: 400;
  font-size: 1.1rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  opacity: 1;
  transition: opacity 0.33s ease-in-out, border-color 0.33s ease-in-out;
  border-radius: 1.5rem;
  margin-top: 0.5rem;
}

.cancel_butt:hover {
  opacity: 0.6;
}

.heading-custom {
  color: #155a8a;
}

.lightGrey_text_bE {
  color: var(--light-grey-text-bE);
}

body {
  font-family: "Poppins";
  background-color: var(--body-bg-bE);
  color: var(--text-whiteBlack);
}

.custom-btn {
  background-color: #155a8a;
  border-color: #155a8a;
  color: white;
}

.custom-btn:hover {
  background-color: #134f7a;
  border-color: #134f7a;
}

.card {
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.strength-indicator {
  font-size: 0.9em;
  margin-top: 5px;
}

.card {
  background-color: var(--body-bg);
  color: var(--text-whiteBlack);
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.form-label {
  margin-bottom: 0.15rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: var(--dark-text-bE);
  font-family: "Inter";
}

.form-control {
  color: var(--grey-text-bE) !important;
  background-color: var(--form-bg-bE);
  border: 2px solid var(--form-border) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  font-family: "Inter";
}

.table {
  margin-bottom: 0rem !important;
}

#detDescrip,
#about_business {
  background-color: var(--form-bg-bEText) !important;
}

.form-select {
  background-color: var(--form-bg-bE);
  border: 2px solid var(--form-border) !important;
  color: var(--grey-text-bE);
  font-weight: 500 !important;
}

.form-control:focus,
.form-select:focus {
  border: 1px solid white;
  background-color: var(--form-bg-bE);
}

.form-check-input {
  background-color: white;
  border-color: black;
}

.dark-mode .form-control::placeholder {
  color: #bbb;
}

.form-check-label {
  color: var(--dark-text-bE);
  font-size: 0.925rem !important;
  font-family: "Inter";
}

.dark-mode .custom-btn {
  background-color: #4a90e2;
  border-color: #4a90e2;
  color: white;
}

.dark-mode .custom-btn:hover {
  background-color: #3a7ac7;
  border-color: #3a7ac7;
}

.dark-mode .table {
  color: #e0e0e0;
}

.form-check-input:checked {
  background-color: #0a84ff !important;
  border-color: #0a84ff !important;
}

.dark-mode .table-bordered th,
.dark-mode .table-bordered td {
  border-color: #555;
}

/* Target autofilled fields (both internal and WebKit-based) */
input:-webkit-autofill,
input:-internal-autofill-selected,
textarea:-webkit-autofill,
textarea:-internal-autofill-selected,
select:-webkit-autofill,
select:-internal-autofill-selected {
  background-color: var(--form-bg-bE) !important; /* Custom background */
  color: var(--grey-text-bE) !important; /* Custom text color */
  border: 2px solid var(--form-border) !important; /* Custom border */
  -webkit-text-fill-color: var(
    --grey-text-bE
  ) !important; /* Ensure text color is applied */
  background-image: none !important; /* Remove background image */
  appearance: none !important; /* Remove default appearance */
}

/* Autofilled input fields when in focus */
input:-webkit-autofill:focus,
input:-internal-autofill-selected:focus,
textarea:-webkit-autofill:focus,
textarea:-internal-autofill-selected:focus,
select:-webkit-autofill:focus,
select:-internal-autofill-selected:focus {
  background-color: var(
    --form-bg-bE
  ) !important; /* Keep background consistent */
  color: var(--grey-text-bE) !important; /* Keep text color */
  border: 2px solid var(--form-border) !important; /* Keep border */
}

/* Additional fix for inputs in focus (autofilled or not) */
input:focus,
textarea:focus,
select:focus {
  background-color: var(--form-bg-bE) !important; /* Keep background on focus */
  color: var(--grey-text-bE) !important; /* Ensure text color remains */
  border: 2px solid var(--form-border) !important; /* Border consistency */
}

/* Prevent autofill background color in specific browsers */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--form-bg-bE) inset !important; /* Prevent autofill background color */
}

/* For textareas and select elements */
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--form-bg-bE) inset !important; /* Prevent autofill background */
}

/* Unchecked state */
.form-check-input:not(:checked) {
  background-color: white !important; /* Ensure background is white when unchecked */
  border-color: black !important; /* Ensure border is black when unchecked */
}

/* Focus state */
.form-check-input:focus {
  background-color: white !important; /* Keep the background white on focus */
  border-color: #444444 !important; /* Keep the border black on focus */
}

/* Checked state */
.form-check-input:checked {
  background-color: #0a84ff !important; /* Blue when checked */
  border-color: rgba(
    199,
    223,
    247,
    0.26
  ) !important; /* Blue border when checked */
}

.spacing_for_lines {
  margin-top: 4rem;
  margin-bottom: 5rem;
}

.first_step_container {
  margin-top: 2.5rem;
  padding-bottom: 6rem;
}

a {
  font-family: "Inter" !important;
}

button {
  font-family: "Inter";
}

.add-deal-for-user-btn {
  padding-bottom: 2rem;
}

@media screen and (max-width: 768px) {
  .add_deal_h1 {
    margin-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .main_container_newListing {
    border: none;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    margin-top: 1rem;
  }

  .step_container {
    /* border: 2px solid var(--form-border); */
    padding-left: 0.5em;
    padding-right: 0.5rem;
    border-radius: 0px;
  }
}