/* Default Light Mode */
body {
  background-color: #ffffff;
  color: #000000;
}

/* Dark Mode */
body.front-dark-mode {
  background-color: #121212 !important;
  color: #ffffff !important;
}

/* Example Admin Panel Styling */
.navbar,
.sidebar {
  transition: background 0.3s, color 0.3s;
}
body.front-dark-mode #header{
  background: #121212 !important;
}

body.front-dark-mode .navbar,
body.front-dark-mode .sidebar {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
}

body.front-dark-mode .card {
  background-color: #1a1a1a;
  color: #ffffff;
}

body.front-dark-mode .card-header {
  background-color: #1a1a1a;
  color: #ffffff !important;
}

/* Text and common elements */
body.front-dark-mode h1,
body.front-dark-mode h2,
body.front-dark-mode h3,
body.front-dark-mode h4,
body.front-dark-mode h5,
body.front-dark-mode h6,
body.front-dark-mode p,
body.front-dark-mode a,
body.front-dark-mode span,
body.front-dark-mode strong,
body.front-dark-mode i,
body.front-dark-mode table,
body.front-dark-mode tr,
body.front-dark-mode thead,
body.front-dark-mode label,
body.front-dark-mode td {
  color: #ffffff !important;
}

body.front-dark-mode .text-dark {
  color: #ffffff !important;
}

body.front-dark-mode .navbar .sidenav-toggler-inner .sidenav-toggler-line {
    transition: all 0.15s ease;
    background: #ffffff;
    border-radius: 0.1rem;
    position: relative;
    display: block;
    height: 2px;
}

/* Default dark mode for .bg-light */
body.front-dark-mode .bg-light {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

body.front-dark-mode .section  {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

/* Active state in dark mode */
body.front-dark-mode .bg-light.active,
body.front-dark-mode .bg-light:active,
body.front-dark-mode .bg-light.active:hover,
body.front-dark-mode .bg-light:active:hover {
  background-color: red !important; /* white background */
  color: #000000 !important;           /* black text */
}


body.front-dark-mode .nav-link.active {
  color: #111111 !important; /* off-black for active pill text */
}

body.front-dark-mode .client-card {
  color: #ffffff !important;
  background: #0d0d0d !important; /* rich black */
}

body.front-dark-mode .bg-white {
  color: #ffffff !important;
  background: #0d0d0d !important;
}

/* Non-active pills in dark mode */
body.front-dark-mode  .nav-link {
  color: #ffffff !important;
}
body.front-dark-mode  .nav-link:hover {
  color: #45AC54 !important; /* softer black for hover */
}

/* Active pill in dark mode */
body.front-dark-mode  .nav-link.active {
  color: #45AC54 !important; /* off-black text */
}

body.front-dark-mode .shadow-sm {
  box-shadow: 0 0.3125rem 0.625rem 0 rgba(255, 255, 255, 0.6) !important;
}

/* Dark Mode Form Controls */
body.front-dark-mode textarea,
body.front-dark-mode input,
body.front-dark-mode select {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #555 !important;
}

body.front-dark-mode textarea::placeholder,
body.front-dark-mode input::placeholder {
  color: #bbbbbb !important; /* softer gray for placeholder */
}

body.front-dark-mode .form-container {
  color: #ffffff !important;
  background: #1a1a1a !important;
}

body.front-dark-mode .modal-content {
  color: #ffffff !important;
  background: #1a1a1a !important;
}
body.front-dark-mode .swal2-popup {
  color: #ffffff !important;
  background: #1a1a1a !important;
}

/* Dark mode for Select2 containers (single & multiple) */
body.front-dark-mode .select2-container--default .select2-selection--single,
body.front-dark-mode .select2-container--default .select2-selection--multiple {
    background-color: #1a1a1a !important; /* black background */
    color: #ffffff !important;            /* white text */
    border: 1px solid #555 !important;
}

/* Placeholder text */
body.front-dark-mode .select2-container--default .select2-selection__placeholder {
    color: #bbbbbb !important; /* lighter gray for placeholder */
}

/* Selected option text for single select */
body.front-dark-mode .select2-container--default .select2-selection__rendered {
    color: #ffffff !important; /* white text */
}

/* Selected option tags for multiple select */
body.front-dark-mode .select2-container--default .select2-selection__choice {
    background-color: #333 !important; /* dark gray for tags */
    color: #ffffff !important;         /* white text */
    border: 1px solid #555 !important;
}

/* Remove default "x" color in tags */
body.front-dark-mode .select2-container--default .select2-selection__choice__remove {
    color: #ffffff !important;
}

/* Dropdown options */
body.front-dark-mode .select2-container--default .select2-results__option {
    background-color: #1a1a1a !important; /* black background */
    color: #ffffff !important;           /* white text */
}

/* Highlighted/hovered option */
body.front-dark-mode .select2-container--default .select2-results__option--highlighted {
    background-color: #333 !important; /* slightly lighter black for hover */
    color: #ffffff !important;
}

.payment-information{
  background: #fff;
}

body.front-dark-mode .payment-information {
    background-color: #1e1e1e  !important; /* slightly lighter black for hover */
    color: #ffffff !important;
}

body.front-dark-mode #add-address{
   border: 2px solid #fff !important;
}
body.front-dark-mode .fa-plus{
   color:#fff !important;
}

/* Input text + background */
body.front-dark-mode .form-control {
  color: #ffffff !important;
  background-color: #1a1a1a !important;
  border: 1px solid #555 !important;
}



/* Force labels always visible in dark mode start */
body.front-dark-mode .input-group.input-group-outline .form-label {
  position: static !important;    
  transform: none !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;     
  /* margin-bottom: 0.25rem;          */
}
body.front-dark-mode #myInput:focus{
  border:2px solid #ffffff !important;
  border-top: transparent !important;
}

 body.front-dark-mode .input-group.input-group-outline.is-focused .form-label+.form-control,
      body.front-dark-mode .input-group.input-group-outline.is-filled .form-label+.form-control {
        border-color: #fff !important;
        border-top-color: transparent !important;
        box-shadow: inset 1px 0 #fff, inset -1px 0 #fff, inset 0 -1px #fff;
      }


      body.front-dark-mode .input-group.input-group-outline.is-focused .form-label:before,
      body.front-dark-mode .input-group.input-group-outline.is-focused .form-label:after,
      body.front-dark-mode .input-group.input-group-outline.is-filled .form-label:before,
      body.front-dark-mode .input-group.input-group-outline.is-filled .form-label:after {
        border-top-color: transparent !important;
        box-shadow: inset 0 1px #fff;


      }

      body.front-dark-mode .input-group.input-group-outline.is-focused .form-label,
      body.front-dark-mode .input-group.input-group-outline.is-filled .form-label {
        color: #fff;
        font-size: 14px !important;
        font-weight: 600
      }

/* Force labels always visible in dark mode start */

body.front-dark-mode .custom-control-label{
  color:#ffffff !important
}

body.front-dark-mode .selectgroup-button{
  color:#ffffff !important
}

body.front-dark-mode .no-charge{
  color:#ffffff !important
}

body.front-dark-mode .p-address{
  color:#ffffff !important
}

body.front-dark-mode .selectgroup-item{
  border:2px solid #ffffff !important
}

body.front-dark-mode .dropdown .dropdown-label{
  background:#1a1a1a !important;
  color:#ffffff !important
}

body.front-dark-mode .dropdown .dropdown-list{
  background:#1a1a1a !important;
  color:#ffffff !important
}
body.front-dark-mode .checkbox .checkbox-custom-label{
  color:#ffffff !important
}

/* Dark mode styles for Google Autocomplete */
body.front-dark-mode .pac-container {
    background-color: #1e1e1e !important; /* Dark background */
    color: #ffffff !important; /* White text */
    border: 1px solid #333 !important;
}

body.front-dark-mode .pac-item {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
}

body.front-dark-mode .pac-item:hover {
    background-color: #333333 !important;
    color: #ffffff !important;
}

body.front-dark-mode .pac-item-query {
    color: #ffffff !important;
}

body.front-dark-mode .dataTable-wrapper .dataTable-container .table thead th {
    color: #ffffff !important;
}

body.front-dark-mode .bg-light {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}
body.front-dark-mode .plan_containerwrapper .plan-container {
     background-color: #1a1a1a !important;
  color: #ffffff !important;
}

body.front-dark-mode .plan_containerwrapper .plan-container .plan-desc ul li.no{
  color: #9d9d9d !important;
}

body.front-dark-mode .plan_containerwrapper .plan-container .plan-desc ul li{
  color: #ffffff !important;
}

body.front-dark-mode #footer{
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

body.front-dark-mode .footer-copyright{
  background-color: #121212 !important;
  color: #ffffff !important;
}

body.front-dark-mode  .body{
background-color: #121212 !important;
}

body.front-dark-mode .custom-div-main{
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

body.front-dark-mode .header-body{
   background-color: #1a1a1a !important;
  color: #ffffff !important;
}

body.front-dark-mode   .dropdown-menu{
   background-color: #1a1a1a !important;
  color: #ffffff !important;
}

body.front-dark-mode   .realesate{
   background-color: #1a1a1a !important;
  color: #ffffff !important;
}

 .realesate{
  color: #202945 !important;
}
body.front-dark-mode   .single-section-color{
   background-color: #1a1a1a !important;
  color: #ffffff !important;
}
body.front-dark-mode  .Request-Service{
  color:#C8000D !important
}

#frontdarkModeToggle{
  border:transparent !important
}

body.front-dark-mode .plan_containerwrapper .plan-container .plan-desc ul li:after{
  background-color:#ffffff !important
}
body.front-dark-mode .plan_containerwrapper .plan-container .plan-desc ul li.no:after{
  background-color:#9d9d9d !important
}
