/* =========================================================
   Dark mode sweep for themes that hardcode light sections
   Put this at the VERY END of custom_style.css
   ========================================================= */

:root {
  --si-bg: black;
  --si-surface: black;

  --si-accent: #c7ff00;
  --si-accent-hover: #82a600;
  --color-dark: #c7ff00;
}

/* Base */
html,
body {
  background: var(--si-bg) !important;
  color: white !important;
}

/* Common "white block" containers in themes */

.navbar {
  background-color: var(--si-surface) !important;
  color: white !important;
}

.navbar.fixed-top {
  background: black;
}

/* Borders */
/* Text helpers that often force black/gray */

/* Links */
a {
  color: white !important;
}
a:hover {
  color: var(--si-accent) !important;
}

.hero-single {
  position: relative !important;
  isolation: isolate; /* makes ::before/::after layering reliable */
  background: black !important;
  color: #f5f5f5 !important;
  overflow: hidden;
}

.search-form-wrapper {
  background: black;
}

.category-area,
.job-area,
.location-area {
  background-color: white !important;
}

.category-item {
  background-color: black;
  color: white !important;
  border-color: black;
}

.category-content h6 {
  color: white !important;
}
.category-content p {
  color: white !important;
}

/* .location-item, .location-img img {
  border-radius: 0px !important;
} */

/* Force common CTA button patterns in Jobox-like themes */
.theme-btn {
  background-color: var(--si-accent) !important;
  border-color: var(--si-accent) !important;
  color: #0b0b0b !important;
  border-radius: 50px;
}

.theme-btn:hover {
  background-color: var(--si-accent-hover) !important;
  border-color: var(--si-accent) !important;
  color: #0b0b0b !important;
}

.job-item .theme-btn {
  background-color: #0b0b0b !important;
  border-color: white;
  color: white !important;
}

.job-item .theme-btn:hover {
  background-color: var(--si-accent-hover) !important;
  border-color: white !important;
  color: black !important;
}

.plugin-clear_button .clear-button {
  color: var(--si-accent) !important;
}

.flaticon-briefcase,
.category-icon {
  color: white !important;
  background-color: black !important;
}

.category-icon {
  border: 2px white solid;
}

.flaticon-briefcase,
.category-icon {
  width: 65px !important;
  height: 65px;
}

.counter-box .title,
.fa-check-circle {
  color: white !important;
}

.icon {
  background: none !important;
  border: 2px solid white;
}

.counter-box .counter {
  color: white !important;
}
.site-title,
.site-title-tagline {
  color: white !important;
}

.category-area .site-title,
.category-area .site-title-tagline,
.category-area .site-heading p,
.job-area .site-title,
.job-area .site-title-tagline,
.job-area .site-heading p,
.location-area .site-title,
.location-area .site-title-tagline,
.location-area .site-heading p,
.pricing-area .site-title,
.pricing-area .site-title-tagline,
.pricing-area .site-heading p {
  color: black !important;
}

.category-area .site-title-tagline::after,
.job-area .site-title-tagline::after,
.location-area .site-title-tagline::after,
.pricing-area .site-title-tagline::after {
  content: none !important;
  background-color: none !important;
}

.job-item,
.location-item {
  background: black;
}

.job-item {
  background: none;
  border: 1px solid black;
  color: black !important;
}

.job-img {
  flex-shrink: 0;
  width: 60px !important;
  height: 60px !important;
}

.job-img img {
  border: 1px solid black;
  border-radius: 50%;
  width: 60px !important;
  height: 60px !important;
  object-fit: cover;
  object-position: center;
}

.job-title h5 a,
.job-employer,
.job-content {
  color: black !important;
}

.footer,
footer.footer-area {
  background-color: var(--si-surface) !important;
  color: white !important;
}

.footer-area::before,
.footer-area::after {
  content: none;
}

.footer-contact li i {
  color: white !important;
  background: none;
  border: 1px solid white;
}

.footer-widget-title::before,
.footer-widget-title::after {
  content: none;
}

.footer-widget-box p {
  color: white;
}

.footer-contact li {
  color: white;
}

.footer-social li a i {
  height: 38px;
  width: 38px;
  line-height: 38px;
  text-align: center;
  border-radius: 50px;
  background: none;
  color: white;
  transition: var(--transition);
}

.footer-social li a i:hover {
  color: var(--theme-color);
  background: none;
}

.footer-list li a::before {
  background: white;
}

@media (max-width: 991px) {
  .footer .placeholder-column {
    display: none !important;
  }
}

.copyright .copyright-text {
  color: white;
}

.copyright .copyright-text a {
  color: #c7ff00 !important;
}

.footer-widget-title {
  color: white !important;
}

.footer-contact li i {
  color: black;
}
:root {
  --theme-color: #c7ff00;
}

.site-breadcrumb {
  background-color: black;
}

.breadcrumb-title {
  color: white !important;
}

.site-breadcrumb .breadcrumb-menu li a {
  color: white !important;
}

/* detail page */
.job-single {
  background-color: white;
}

.hero-shape-1,
.hero-shape-2,
.hero-shape-3,
.hero-shape-4 {
  display: none;
}

/* .hero-shape-1 {
  filter: invert(0.3) brightness(2.2) contrast(0.2) !important;
}

.hero-shape-2 {
  filter: invert(1) brightness(2.2) contrast(0.5) !important;
}

.hero-shape-3 {
  width: 220px;
  height: 220px;

  background: #ccff00 !important;

  -webkit-mask: url("/static/jobox_style/assets/img/shape/06.svg") no-repeat
    center / contain;
  mask: url("/static/jobox_style/assets/img/shape/06.svg") no-repeat center /
    contain;
}

.hero-shape-4 {
  filter: invert(1) brightness(2.2) contrast(0.5) !important;
} */

.hero-single {
  background: url("../img/career/startup.jpg") no-repeat center / contain !important; /*Remove initial top right instruction*/
  background-size: cover !important;
  background-position: 50% 50%;
  background-color: black;
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
  padding-top: 270px;
  padding-bottom: 200px;
}

@media (max-width: 991px) {
  .hero-single {
    padding-top: 300px;
    padding-bottom: 150px;
  }
}

.hero-single .hero-content .hero-title span::after,
.site-title-tagline::after {
  content: none;
}

.job-grid {
  background-color: white !important;
}

/* Really unclean temporary solution */

.job-results-bar {
  margin-top: -29px;
}

.job-sidebar {
  background-color: white;
  color: black !important;
  border: 1px black solid;
}

.job-sidebar .form-check-label {
  color: black;
}

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

.job-single-employer-info h4,
.job-single-employer-info a,
.job-single-list h5,
.job-single-list-icon,
.job-single-list-info h6 {
  color: black !important;
}

/* .job-single-list-info p {
  color: #555555;
} */

.job-single-img img {
  border: 1px black solid;
}

.job-single-title,
.job-single-details,
.job-single-social-share span,
.related-job h4 {
  color: black !important;
}

.job-single-short-infos {
  color: black;
}

.job-single-social-share a {
  background-color: black;
}

.job-single-social-share a i:before {
  color: white !important;
  background: none;
}

.form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: none !important;
  color: black;
}

.form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: none !important;
}

.job-sidebar .form-check-input:checked {
  background-color: #c7ff00;
  color: black !important;
}

.job-sidebar-title {
  color: black;
}

.pagination .page-link {
  background: none;
  color: black !important;
  border: 1px black solid;
}

.pagination .page-link:hover,
.pagination .page-item.active .page-link {
  background: black;
  color: white !important;
}

.job-sort {
  background: transparent !important;
  padding: 0px !important;
}

.job-sort h5 {
  color: black !important;
}

.search-form-wrapper {
  border: 1px solid white;
}

.search-form .form-group-icon i {
  top: 19px;
}

.ts-dropdown .active {
  color: white !important;
  background-color: #202020 !important;
}

.ts-dropdown {
  background-color: black !important;
  color: var(--bs-body-color);
}

.pricing-area {
  background-color: white;
}
.pricing-wrapper {
  background-color: white;
  border: 1px solid black;
}

.pricing-feature ul li,
.pricing-content,
.pricing-content h4,
.pricing-content .pricing-amount {
  color: black;
}

.pricing-amount {
  margin-bottom: 30px;
}

.pricing-item.active {
  background-color: black;
}

.pricing-popular {
  background-color: black !important;
}
.employer-heading,
.employer-heading-with-img {
  background-color: black;
}
.employer-single {
  background-color: white;
}

.employer-single-job h4 {
  color: black;
}

.employer-heading-tag a {
  background-color: #c7ff00;
  color: black !important;
}

.employer-item {
  background-color: white;
  color: black !important;
}

.employer-content > h5.mb-1{
  color: black !important;
}

.employer-content > span.employer-job{
  color: black !important;
}

@media (max-width: 991px) {
  .navbar {
    padding: 20px 10px !important;
  }
  .navbar .container {
    position: static;
  }

  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100vw;
    background: #000; /* full black background */
    padding: 30px 10px;
    z-index: 999;
  }
}

/* Desktop alignment fix */
@media (min-width: 992px) {
  .navbar-nav {
    align-items: center;
  }

  .navbar-nav .nav-item {
    display: flex;
    align-items: center;
  }

  .navbar-nav .theme-btn {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

.navbar .nav-item .dropdown-menu {
  background-color: black !important;
}