/* Your originals—don't change! */
.car-home-section {
  height: 100vh;
  position: relative; /* if needed */
  overflow: hidden;   /* optional */
}

.background-video {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  width: 100%;
  height: 100%;
  z-index: 10; /* behind content */
}

.background-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* NEW: Only add these for the overlay/form—no conflicts */
.search-form-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.50); /* Adjust opacity (e.g., 0.9) for more video visibility */
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 800px;
  z-index: 2000; /* HIGHER than your video's 1000—sits on top safely */
}

.car-search-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tab-button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}

.tab-button.active {
  background: #8B5CF6; /* Purple */
  color: white;
}

.tab-button:not(.active) {
  background: #6B7280; /* Gray */
  color: white;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 1.0rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: #FFFFFF;
}

.form-group select,
.form-group input {
  padding: 0.75rem;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 1rem;
}

.search-button-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.search-btn {
  background: #146db9;
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 0.5rem;
  box-shadow: 0 0 0 transparent;
  transition: background 0.5s ease, box-shadow 0.5s ease;
}

.search-btn:hover {
  background: #115a8a;
  box-shadow: 0 0 10px #146db9;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.1);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.2);
    filter: brightness(1.1);
  }
}

#searchButton {
    position: relative;
    top: 14px;
    padding: 1em 0;
    font-size: 1.25em;
    margin-top: 0;
    display: block;
    width: 180px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
    overflow: hidden;

    animation: pulse-glow 2s infinite;
}

.offers-count {
  font-size: 0.875rem;
  color: #6B7280;
  text-align: center;
}

/* Ensure home-content (your titles) stays above overlay if needed */
.home-content {
  position: relative;
  z-index: 1500; /* Between video (1000) and form (2000)—adjust if titles overlap form */
}

#header {
  z-index: 3000;
}

.placeholder {
  display: inline-block; /* or block, matching original */
  width: 1px;
  height: 0; /* no height, invisible */
  visibility: hidden;
}

select[name="marke"] {
  max-height: 100px;  /* max Höhe */
  overflow-y: auto;   /* vertikal scrollbar */
}

.selectpicker {
  width: 170px !important;
  height: 50px !important;
}

.bootstrap-select .btn.dropdown-toggle {
  height: 10px !important;
  line-height: 30px !important;
  padding: 5px 10px !important;
  font-size: 14px !important;
}

.car-search-form .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Space between fields */
  align-items: end; /* Align bottoms for neatness */
  margin-bottom: 15px; /* Space between rows */
}

.car-search-form .form-group {
  flex: 1; /* Evenly grow/shrink */
  min-width: 120px; /* Prevent tiny fields on mobile */
  margin: 0; /* No extra margins */
}

.car-search-form .form-group select,
.car-search-form .form-group input {
  width: 100%; /* Full width in group */
}

.search-button-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1; /* Take remaining space */
  justify-content: flex-end; /* Push button right */
}

@media (max-width: 768px) { /* Mobile stack */
  .car-search-form .form-row {
    flex-direction: column;
    align-items: stretch;
  }

  .search-button-group {
    justify-content: space-between; /* Button left, count right on mobile */
  }
}

.form-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.tab-button.active {
  border-color: white; /* Or your accent; assumes outline-light theme */
  background-color: rgba(255, 255, 255, 0.1); /* Subtle bg for active */
}

.selectpicker .dropdown-toggle {
  background-color: white !important;
  color: black !important;
  border: 1px solid #ced4da !important;
  height: calc(2.25rem + 2px); /* Matches input height */
}

.form-control {
   background: rgba(26, 32, 45, 1) !important;
  /*color: white !important;*/
  border: 1px solid #188aec !important;
  height: calc(2.25rem + 2px);
  overflow-y: auto;  /* enable scrollbar when needed */
}

.details-form-control {
   background: rgba(19, 29, 39, 0.12) !important;
  /*color: white !important;*/
  border: 1px solid #188aec !important;
  height: calc(2.25rem + 2px);
  overflow-y: auto;  /* enable scrollbar when needed */
}


/* WebKit browsers */
.form-control::-webkit-scrollbar {
  width: 8px;
}
.form-control::-webkit-scrollbar-track {
  background: #1A202D;
}
.form-control::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 4px;
}

/* Firefox */
.form-control {
  scrollbar-width: thin;
  scrollbar-color: #555 #1A202D;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: stretch;
  margin-bottom: 15px;
}

.form-group {
  flex: 1;
  min-width: 120px;
  margin: 0;
}

@media (max-width: 768px) {
  .form-row { flex-direction: column; }
}

.choices__placeholder {
  display: none !important;
}


/*.choices__list--dropdown .choices__list {*/
/*  max-height: 250px !important;*/
/*  overflow-y: auto !important;*/
/*}*/

/*.choices .choices__list--dropdown .choices__item {*/
/*  font-size: 16px !important;*/
/*  color: #000 !important;*/
/*}*/

/*.choices__inner .choices__item {*/
/*  font-size: 16px !important;*/
/*  color: #000 !important;*/
/*}*/

body, :root {
  transition: none !important;
  overflow-x: clip;  /*Prevents horizontal scroll bar */
  background-color: rgba(8,12,16,1) !important;
}

#header-video {
  position: relative;
  overflow: visible;
  cursor: pointer;
}

#bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 1;
  transform: translate(-50%, -50%);
  object-fit: cover;
  opacity: 1;
}

#header-video .container {
  position: relative;
  z-index: 1;
}

.card_brand {
  float: left;
}

.card_model {
  float: right;
}

.featured-list {
  display: flex;
  padding: 0;
  list-style: none;
  width: 100%;
  justify-content: center; /* this centers your only item */
}

.featured-list li {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  width: auto; /* remove fixed width */
}

#right-item {
  margin-left: auto; /* pushes it to right */
}

.featured-list li:nth-child(2) {
  flex: 1;              /* take available space */
  justify-content: center; /* center items horizontally */
}

.featured-list li + li {
  border-left: none !important;
  padding-left: 0 !important;
}

[dir=rtl] .featured-list li + li {
  border-right: none !important;
  padding-right: 0 !important;
}

/* KILL THE DAMN HOVER ZOOM – THIS ONE ACTUALLY WORKS WITH YOUR CODE */
.property-image-slider .swiper-slide img,
.property-image-slider .swiper-slide img:hover,
.property-image-slider img:hover,
.property-image-slider img {
    transform: none !important;
    scale: 1 !important;
    transition: none !important;
    object-fit: cover !important;   /* keeps your bg-img look */
}

/* Extra safety – some themes use a wrapper div with overflow hidden + scale on the img */
.property-image-slider .swiper-slide {
    overflow: hidden;               /* already there probably */
}

.property-image-slider .swiper-slide img:hover {
    transform: scale(1) !important;
}

/* 1. Kill the zoom (you already have this) */
.featured-box:hover .featured-main-img .featured-img {
    transform: scale(1) !important;
}

/* 2. Fix arrow position + make them always visible (or keep hover if you prefer) */
.featured-box .swiper-button-next,
.car-product-section .swiper-button-next {
    right: 0px !important;
}
.featured-box .swiper-button-prev,
.car-product-section .swiper-button-prev {
    left: 0px !important;
}

/* Optional — arrows always visible (most users prefer this on detail pages) */
.property-image-slider .swiper-button-next,
.property-image-slider .swiper-button-prev {
    opacity: 1 !important;
}

/* Navigation arrows – transparent and clean */
.property-image-slider .swiper-button-next,
.property-image-slider .swiper-button-prev {
    background: rgba(0, 0, 0, 0.3) !important;   /* 30% black – nicely transparent */
    /*width: 40px !important;*/
    /*height: 40px !important;*/
    border-radius: 50% !important;
    opacity: 0.5 !important;                     /* slightly transparent */
    transition: none !important;                 /* no animation at all */
}

/* Arrow icons inside */
.property-image-slider .swiper-button-next:after,
.property-image-slider .swiper-button-prev:after {
    font-size: 18px !important;
    color: #fff !important;
}

#result {
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(8,12,16,1) 200px);
  position: relative;
  z-index: 1;
  min-height: 110vh;
}


#result.overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(1,1,1,1) 200px);
  position: relative;
  z-index: 1;
}

#main-content {
  transition: opacity 0.5s;
}

/*
#erstzulassung-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 32px;
  align-items: center;
  justify-items: start;
}
#erstzulassung-list .main-choose-item,
#erstzulassung-list .choose-item,
#erstzulassung-list .label-flex {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}
#erstzulassung-list label {
  margin: 0;
  padding: 0;
} */


.range-slider-display .value {
  cursor: pointer;               /* shows it’s clickable */
  user-select: none;
  transition: background-color 0.2s;
}
.range-slider-display .value:hover {
  background: rgba(var(--theme-color), 1) !important;
}
.range-slider-display .value-editing {
  background: white !important;
  color: #333 !important;
  border: none;
  outline: none;
  border-radius: 4px;
}

#collapseOne {
  transition-duration: 500ms !important;
}
#collapseTwo {
  transition-duration: 500ms !important;
}
#collapseThree {
  transition-duration: 500ms !important;
}
#collapseFour {
  transition-duration: 500ms !important;

}
#collapseFourA {
  transition-duration: 500ms !important;
}

#collapseFive {
  transition-duration: 500ms !important;
}
#collapseSix {
  transition-duration: 500ms !important;
}
#collapseSeven {
  transition-duration: 500ms !important;
}
#collapseEight {
  transition-duration: 500ms !important;
}
#collapseNine {
  transition-duration: 500ms !important;
}
#collapseTen {
  transition-duration: 500ms !important;
}

#collapseThirteen {
  transition-duration: 500ms !important;
}

#collapseTwo .accordion-body {
  transition: padding-bottom 0.75s;
}

#collapseTwenty {
  transition-duration: 500ms !important;
}

#collapseTwenty .sidebar-choose-list {
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE 10+ */
}

#collapseTwenty .sidebar-choose-list::-webkit-scrollbar {
  display: none;                  /* Chrome, Safari */
}

#collapseThirty {
  transition-duration: 500ms !important;
}

.custom-spacer {
  height: 5px;
  line-height: 1;
  font-size: 0;
  /* optional: no display but still takes up space */
}

.filter-sidebar form {
    margin: 0 !important;               /* removes the default form margins */
    padding: 0 !important;              /* just in case */
    display: contents !important;      /* or display: block; */
}

.filter-sidebar {
    margin-top: -50px;
}

#infinite-list .swiper {
  overflow: hidden !important;
}

.swiper-slide img {
  width: 100%;       /* fill width */
  height: 200px;     /* or your desired fixed height */
  object-fit: cover; /* crop and fill container */
}

// Fade in
container.style.opacity = 1;

// Smoothly scroll to top
window.scrollTo({
  top: 0,
  behavior: 'smooth'
});

/*
.scrollable-equipment {

  overflow-y: auto !important;
}

#collapseEleven .accordion-body {
  max-height: 200px;
  overflow-y: auto;
}

#collapseEleven .accordion-body::-webkit-scrollbar {
  display: none;
}

#collapseEleven .accordion-body {
  -ms-overflow-style: none;
  scrollbar-width: none;
} */

#main-content {
  transition: opacity 0.5s ease;
}

.onhover-list {
  display: none;
}

.onhover-dropdown:hover .onhover-list {
  display: block;
}

/* This is the magic that removes the gap */
.onhover-dropdown {
  display: block;
  padding-bottom: 8px;     /* or whatever distance you have to the menu */
  margin-bottom: -8px;     /* pull the menu up visually but keep the hover area */
  background: linear-gradient(transparent, transparent); /* forces hasLayout in old IE */
}

#custom-login-area {
    opacity: 1;
    transition: opacity 0.5s ease;  /* or 0.6s, 0.8s, whatever feels good */
    /* optional: also fade out background/color if needed */
}

#custom-login-area {
  opacity: 0;
  transition: opacity 0.5s;
}
#custom-login-area.visible {
  opacity: 1;
}

#custom-register-area {
  opacity: 0;
  transition: opacity 0.5s;
}
#custom-register-area.visible {
  opacity: 1;
}

#main-content {
  opacity: 0;
  transition: opacity 0.5s;
}
#main-content.visible {
  opacity: 1;
}

.car-home-section .bottom-text {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
  color: white; /* adjust color */
  padding-bottom: 10px; /* optional */
  z-index: 10;
}

 /* glowing and hover effect for codingroom */
.powered-by-link {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;

  /* Pulsing glow animation */
  animation: glowPulse 1.5s infinite alternate;
}

/* On hover: solid blue glow, no animation */
.powered-by-link:hover {
  color: #188ce8;
  animation: glowPulse 1.5s infinite alternate;
  text-shadow: 0 0 12px #188ce8, 0 0 20px #188ce8;
}

/* Pulsing glow keyframes */
@keyframes glowPulse {
  0%, 100% {
    text-shadow: 0 0 5px rgba(24, 140, 232, 0.7), 0 0 10px rgba(24, 140, 232, 0.5);
  }
  50% {
    text-shadow: 0 0 10px rgba(24, 140, 232, 1), 0 0 20px rgba(24, 140, 232, 0.8);
  }
}
 /* glowing and hover effect for codingroom end */


#mouseCar {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  width: 100px;
  z-index:1000
}

/* details.html */
#details-background {
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(8,12,16,1) 400px) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* details.html */
#details-background.overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(1,1,1,1) 400px) !important;
  position: relative !important;
  z-index: 1 !important;
}


.header-bg-container {
  position: relative;
  width: 100vw;
  height: 300px;         /* Your header/container height */
  overflow: hidden;
}

.bg-zoom-animate {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100%;
  object-fit: cover;
  filter: brightness(60%);
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(1);
  animation: zoomInNow 20s linear forwards;
  opacity: 1;

}

.bg-zoom-animate.restart-animation {
  animation: none;                    /* kill current animation */
  offset-distance: 0;                 /* reset any @keyframes offset */
  transform: translate(-50%, -50%) scale(1);  /* force start position */
}
.bg-zoom-animate.restart-animation {
  animation: zoomInNow 20s linear forwards; /* re-apply it */
}

@keyframes zoomInNow {
  0%   { transform: translate(-50%, -50%) scale(1);}
  100% { transform: translate(-50%, -50%) scale(1.1);}
}

.filterSideBar {
z-index: 100;
}

.onhover-list {
  left: 50%;
  transform: translateX(-50%);
  /* keep your other styles... */
}

header .right-side-header .icon-side .login-flex .login-list  a {
    display: block; /* makes the whole area clickable; optional but recommended */
    color: rgba(var(--title-color), 0.6);
    width: 100%;
    transition: color 0.3s;
}

header .right-side-header .icon-side .login-flex .login-list  a:hover {
    color: rgba(var(--theme-color), 1);  /* pick your highlight color */
     transition: 0.4s ease;
}

.custom-user-section {
  min-height: 100vh;
  /* other custom styles */
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(100, 180, 255, 0.7); }  /* same blue family, just brighter & higher alpha */
  50%  { box-shadow: 0 0 0 8px rgba(100, 180, 255, 0); }   /* exactly your original 8px size */
  100% { box-shadow: 0 0 0 0 rgba(100, 180, 255, 0); }
}

/* Optional for a lighter, more modern look: */
.pulse-effect {
  animation: pulse-bright 1.2s infinite;
}

@keyframes pulse-bright {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(3); }     /* bright but not crazy */
  100% { filter: brightness(1); }
}

.drop-zone {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}

.upload-modal-close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
}


.select-dropdown {
  position: relative;
}

.select-button {
  position: relative;
  cursor: pointer;
}

.form-control.auto-height {
  height: auto !important;
  min-height: calc(2.25rem + 2px);
}

/* for dashboard new car table*/
.white-space-nowrap {
  white-space: nowrap;
}


.form-control option[disabled] {
  color: #777;
}

#seller-freetext {
  height: 200px;  /* or whatever height you want */
  text-align: left !important;       /* horizontal alignment */
  vertical-align: top !important;     /* vertical alignment for inline or table cells, but not effective here */
  padding-top: 6px !important; ;       /* optional: to add padding so text isn't flush against edge */
  box-sizing: border-box !important; ; /* to include padding inside the textarea box */
}

#seller-freetext::-webkit-scrollbar {
  width: 8px;
}

#seller-freetext::-webkit-scrollbar-track {
  background: #222;  /* dark background track */
}

#seller-freetext::-webkit-scrollbar-thumb {
  background-color: #555;  /* darker thumb (scroll handle) */
  border-radius: 4px;
  border: 2px solid #222; /* matches track background for padding effect */
}


.overview-info h6 {
  text-transform: none !important;
  font-size: calc(15.8px + 0.0625vw)!important;
}

li.grayed-out {
  opacity: 0.5;
  will-change: opaseller
  /* transform: translateZ(0); */
  /* backface-visibility: hidden; */
}

.car-accordion .accordion-item .accordion-body .label-flex span:only-child {
  font-size: calc(14px + 1 * (100vw - 320px) / 1600);
  font-weight: 400;
}

.highlight-checkbox {
  color: #d6336c !important; /* e.g. a red color */
  font-weight: bold;
}

.car-accordion .accordion-item .accordion-body .sidebar-choose-list.filter-color .main-choose-item .choose-item input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0,0,0,0.15) !important;  /* subtle always-on border (helps with illusion) */
    box-sizing: border-box !important;
    position: relative !important;                 /* important for pseudo-element positioning */
    transition: all 0.2s ease !important;
}

/* Thick black border on checked (as before) */
/*.car-accordion .accordion-item .accordion-body .sidebar-choose-list.filter-color .main-choose-item .choose-item input[type="checkbox"]:checked {
    border: 1px solid #188aec !important;           or box-shadow: 0 0 0 3px #000 !important; for outer ring
}*/

input.beliebig {
  background: linear-gradient(90deg, red, yellow, green, blue, violet) !important;
}

#collapseTen .sidebar-choose-list {
  max-height: 180px;
  overflow-y: auto;
}

/* Webkit browsers (Chrome, Edge, Safari) */
#collapseTen .sidebar-choose-list::-webkit-scrollbar {
  width: 6px;
  background: #333;
}

#collapseTen .sidebar-choose-list::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 3px;
}

/* Firefox */
#collapseTen .sidebar-choose-list {
  scrollbar-width: thin;
  scrollbar-color: #666 #333;
}

#collapseThirteen .sidebar-choose-list {
  max-height: 180px;
  overflow-y: auto;
}

/* Webkit browsers (Chrome, Edge, Safari) */
#collapseThirteen .sidebar-choose-list::-webkit-scrollbar {
  width: 6px;
  background: #333;
}

#collapseThirteen .sidebar-choose-list::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 3px;
}

/* Firefox */
#collapseThirteen .sidebar-choose-list {
  scrollbar-width: thin;
  scrollbar-color: #666 #333;
}

#collapseNineA .sidebar-choose-list {
  max-height: 180px;
  overflow-y: auto;
}

/* Webkit browsers (Chrome, Edge, Safari) */
#collapseNineA .sidebar-choose-list::-webkit-scrollbar {
  width: 6px;
  background: #333;
}

#collapseNineA .sidebar-choose-list::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 3px;
}

/* Firefox */
#collapseNineA .sidebar-choose-list {
  scrollbar-width: thin;
  scrollbar-color: #666 #333;
}

#car-accordion .accordion-body {
    max-height: inherit;
    overflow-y: inherit;
}

#car-accordion {
  overflow-y: auto;
  max-height: 90vh;
  scrollbar-width: none; /* Firefox */
}

#car-accordion::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

#car-accordion .accordion-body {
  overflow: hidden;
}

#red_logout_button {
    background-color: #dd3744;
    color: white; /* optional for contrast */
    border: none; /* if you want no border */
}

#red_logout_button:hover {
  background: #b71c1c;
}



#dashboard-home-button {
    background-color: #188aec;
    color: white; /* optional for contrast */
    border: none; /* if you want no border */
}

#dashboard-home-button:hover {
  background: #146db9;
}

#custom-hidden-contact {
    padding: calc(15px + 5 * (100vw - 320px) / 1600) calc(10px + 5 * (100vw - 320px) / 1600);
    background: transparent !important;
    border-radius: 0px;
    border: 0px solid rgba(var(--bg-color), 1);
    height: 20vh;
}

#car-detail-contact-box {
  margin-top: 20px;
}

.car-detail-section .car-detail-sidebar {
    position: sticky;
    top: 20px !important;
    left: 0px;
}

#custom-reset-button {
    background-color: #dd3744;
    color: white; /* optional for contrast */
    border: none; /* if you want no border */
}

#custom-reset-button:hover {
    background-color: #b3222d; /* a darker red for hover */
}

#user_avatar_modal_content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: #fff;
    pointer-events: auto;
    background-color: rgba(var(--light-bg-color));
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0;
}

#name_of_listed_cars {
    font-size: calc(16px + 2 * (100vw - 320px) / 1600);
    font-weight: 400;
    width: calc(100% - (60px + 20 * (100vw - 320px) / 1600) - (10px + 5 * (100vw - 320px) / 1600));
    color: rgba(var(--title-color), 1);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
}

#id_for_listed_cars {
    font-size: calc(16px + 2 * (100vw - 320px) / 1600);
    font-weight: 400;
    color: rgba(var(--title-color), 1);
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

#account_delete_button {
    background-color: #dd3744;
    color: white; /* optional for contrast */
    border: none; /* if you want no border */
}

body.modal-open {
    padding-right: 0 !important;
}

.form-group label {
    white-space: nowrap; /* prevent label text breaking */
}

.login-icon {
  min-width: 120px; /* Only needed when text is visible */
}

/* Hide text and remove min-width on small screens */
@media (max-width: 992px) {
  .login-icon {
    min-width: unset; /* or any smaller value or even min-width: 0 */
  }
}

@media (min-width: 993px) {
  .login-icon {
    min-width: 140px;
  }
}

/*overrides choices styling */
/*overrides choices styling */

/* Force white text on dropdown container (inheritance for normal options) */
/*overrides choices styling */

/* Force white text on dropdown container (inheritance for normal options) */
.choices__list--dropdown,
.choices__list--dropdown .choices__list {
  color: #fff !important;
  background-color: rgba(20, 30, 70, 0.80) !important;  /* Transparent dark blue panel */
  border-color: #444 !important;
}

/* Remove background from items – fixes "text border" effect */
.choices__list--dropdown .choices__item,
.choices__list--dropdown .choices__item--choice,
.choices__list--dropdown .choices__item--selectable {
  color: #fff !important;
  /* No background-color here – inherits transparent from container */
}

/* Hover (slightly more opaque for visibility) */
.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: rgba(40, 60, 110, 0.80) !important;  /* Hover row blue highlight */
  color: #fff !important;
}

/* Main input (match transparency) */
.choices__inner,
.choices__input,
.choices__list--single .choices__item {
  background-color: rgba(20, 30, 70, 0.8) !important;
  color: #fff !important;
  border-color: #444 !important;
}

/* Placeholder */
.choices__placeholder {
  color: #aaa !important;
}

.choices__list--dropdown .choices__list {
  max-height: 250px !important;
  overflow-y: auto !important;
}

.choices .choices__list--dropdown .choices__item {
  font-size: 16px !important;
}

.choices__inner .choices__item {
  font-size: 16px !important;
}

.choices__list--single .choices__item {
  width: 0;
}

.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list {
  /* existing styles */
  position: relative;
  max-height: 300px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;

  /* custom scrollbar */
  scrollbar-width: thin;               /* Firefox */
  scrollbar-color: #3456a1 transparent;  /* Firefox */
}

/* Chrome, Edge, Safari */
.choices__list--dropdown .choices__list::-webkit-scrollbar,
.choices__list[aria-expanded] .choices__list::-webkit-scrollbar {
  width: 6px;            /* thinner scrollbar */
}

.choices__list--dropdown .choices__list::-webkit-scrollbar-track,
.choices__list[aria-expanded] .choices__list::-webkit-scrollbar-track {
  background: transparent;
}

.choices__list--dropdown .choices__list::-webkit-scrollbar-thumb,
.choices__list[aria-expanded] .choices__list::-webkit-scrollbar-thumb {
  background-color: #222;  /* dark scrollbar */
  border-radius: 3px;
  border: 1px solid transparent; /* some padding */
}

.choices__list--single {
  white-space: nowrap !important;
  word-break: keep-all !important;
}

/*checkboxes for choosing color in the dashboard*/
.color-form-box input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #555;
  border-radius: 4px;
  background-color: #1a1a1a; /* default box color (like "Schwarz") */
  cursor: pointer;
  position: relative;
}

input[type="checkbox"]:checked {
  background-color: #007bff; /* checked color */
  border-color: #007bff;
}

/*input[type="checkbox"]:checked::after {*/
/*  content: "";*/
/*  position: absolute;*/
/*  top: 2px;*/
/*  left: 6px;*/
/*  width: 4px;*/
/*  height: 9px;*/
/*  border: solid white;*/
/*  border-width: 0 2px 2px 0;*/
/*  transform: rotate(45deg);*/
/*}*/

.car-detail-section .car-detail-right .detail-box .overview-list li .overview-icon svg {
  fill: rgba(var(--theme-color), 1);
}

.form-control-ok {
  background-color: #285038 !important;
}

.car-profile-img {
  width: 200px;     /* set your desired width */
  height: 200px;    /* set your desired height */
  overflow: hidden; /* hides anything that overflows */
}

.car-profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover !important; /* or 'contain' depending on desired behavior */
}

.map-profile-img {
  width: 200px;     /* set your desired width */
  height: 200px;    /* set your desired height */
  overflow: hidden; /* hides anything that overflows */
}

.map-profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover !important; /* or 'contain' depending on desired behavior */
}

@media (min-width: 992px) {
  .col-lg-6-price {
    padding-right: 0px;
  }
}

.profile-car-model {
  white-space: nowrap;
}

.profile-name {
color: #fff;
}

#custom-email {
  max-width: 180px; /* Set max width as needed */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container {
  transform: translateX(-20px);
}

.featured-main-img {
  margin: -10px;
  margin-bottom: 5px;
}

/* Three-column layout for zylinder */
#collapseNineA #zylinder-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /*column-gap: 6px;   !* horizontal spacing between columns *!*/
  /*row-gap: 6px;       !* vertical spacing between rows *!*/
}

/* Make sure items don’t add extra margins that break the grid rhythm */
#collapseNineA #zylinder-list .main-choose-item {
  margin: 0;
}

/* Optional: single column on very small screens */
@media (max-width: 480px) {
  #collapseNineA #zylinder-list {
    grid-template-columns: 1fr;
  }
}

#zylinder-list .main-choose-item:first-of-type .choose-item {
  margin-top: 12px;
}

#zylinder-styling {
    padding-top: calc(0px + 8 * (100vw - 320px) / 1600);
}


/* Three-column layout for the preowners */
#collapseTen #preowner-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /*column-gap: 6px;   !* horizontal spacing between columns *!*/
  /*row-gap: 6px;       !* vertical spacing between rows *!*/
}

/* Make sure items don’t add extra margins that break the grid rhythm */
#collapseTen #preowner-list .main-choose-item {
  margin: 0;
}

/* Optional: single column on very small screens */
@media (max-width: 480px) {
  #collapseTen #preowner-list {
    grid-template-columns: 1fr;
  }
}

#preowner-list .main-choose-item:first-of-type .choose-item {
  margin-top: 12px;
}

#preowner-styling {
    padding-top: calc(0px + 8 * (100vw - 320px) / 1600);
}


/* Three-column layout for seats */
#collapseSix #seats-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /*column-gap: 6px;   !* horizontal spacing between columns *!*/
  /*row-gap: 6px;       !* vertical spacing between rows *!*/
}

/* Make sure items don’t add extra margins that break the grid rhythm */
#collapseSix #seats-list .main-choose-item {
  margin: 0;
}

/* Optional: single column on very small screens */
@media (max-width: 480px) {
  #collapseSix #seats-list {
    grid-template-columns: 1fr;
  }
}

#seats-list .main-choose-item:first-of-type .choose-item {
  margin-top: 12px;
}

#seats-styling {
    padding-top: calc(0px + 8 * (100vw - 320px) / 1600);
}


/* Three-column layout for ps */
#collapseNineB #ps-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /*column-gap: 6px;   !* horizontal spacing between columns *!*/
  /*row-gap: 6px;       !* vertical spacing between rows *!*/
}

/* Make sure items don’t add extra margins that break the grid rhythm */
#collapseNineB #ps-list .main-choose-item {
  margin: 0;
}

/* Optional: single column on very small screens */
@media (max-width: 480px) {
  #collapseNineB #ps-list {
    grid-template-columns: 1fr;
  }
}

#ps-list .main-choose-item:first-of-type .choose-item {
  margin-top: 12px;
}

#ps-styling {
    padding-top: calc(0px + 8 * (100vw - 320px) / 1600);
}



/* Two-column layout for colors in filter */
#collapseSeven #color-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /*column-gap: 6px;   !* horizontal spacing between columns *!*/
  /*row-gap: 6px;       !* vertical spacing between rows *!*/
}

/* Make sure items don’t add extra margins that break the grid rhythm */
#collapseSeven #color-list .main-choose-item {
  margin: 0;
}

/* Optional: single column on very small screens */
@media (max-width: 480px) {
  #collapseSeven #color-list {
    grid-template-columns: 1fr;
  }
}

#color-list .main-choose-item:first-of-type .choose-item {
  margin-top: 12px;
}

#color-styling {
    padding-top: calc(0px + 8 * (100vw - 320px) / 1600);
}



/*.accordion-button::after { content:none !important; }*/

.pin-btn {
  cursor:pointer;
  font-size:16px;
  position: relative;
  top: -0px;
}


.accordion-button:first-child::after {
  content: none !important;
}


.pin-btn {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
}

.pin-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5em;  /* Image is bigger than the .pin-btn */
  height: 1.5em;
  transform: translate(-50%, -50%); /* Center the big image over the hotspot */
  pointer-events: none; /* Prevents the image itself from blocking clicks to the span, if you want the span to stay clickable */
}



.detail-information {
    width: calc(35px + 15 * (100vw - 320px) / 1600);
    height: calc(35px + 15 * (100vw - 320px) / 1600);
    background: rgba(var(--bg-color), 1);
    border: 1px solid rgba(var(--theme-color), 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: 0.4s ease;
}

.detail-information:hover {
    background: rgba(var(--bg-color), 0.5);
    border: 1px solid rgba(var(--theme-color), 1);
    border-radius: 4px;
}


.detail-information-avatar {
    width: calc(35px + 15 * (100vw - 320px) / 1600);
    height: calc(35px + 15 * (100vw - 320px) / 1600);
    background: rgba(var(--bg-color), 1);
    border: 1px solid rgba(var(--theme-color), 0.18);
    border-radius: 4px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    transition: 0.4s ease;
}

.detail-information-avatar:hover {
    background: rgba(var(--bg-color), 0.5);
    border: 1px solid rgba(var(--theme-color), 1);
    border-radius: 4px;
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}


/* Target ONLY your button, and kill all specificity races */
.car-product-section .featured-box .featured-content .arrow-btn {
    color: #f8f8f8 !important;
    transition: color 0.3s;
}
.car-product-section .featured-box .featured-content .arrow-btn:hover {
    color: #188aec !important;   /* Your theme blue */
}

.arrow-btn .external-link-icon path {
  fill: #f8f8f8 !important;
  transition: fill 0.3s;
}
.arrow-btn:hover .external-link-icon path {
  fill: #188aec !important;
}


/* For TEXT (no change needed) */
.pulsing-menu.pulse {
  animation: pulsingMenuGlowAnimation 1s ease-in-out infinite !important;
}

/* For ICONS (add this) */
.pulsing-menu.pulse i,
i.pulsing-menu.pulse {
  animation: pulsingMenuGlowIconAnimation 1s ease-in-out infinite !important;
}

@keyframes pulsingMenuGlowAnimation {
  0%, 100% {
    text-shadow: 0 0 3px rgba(255,255,255,0.8), 0 0 10px rgba(255,255,255,0.6);
    color: white;
  }
  50% {
    text-shadow: 0 0 15px rgba(255,255,255,1), 0 0 25px rgba(255,255,255,0.9);
    color: white;
  }
}

@keyframes pulsingMenuGlowIconAnimation {
  0%, 100% {
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.8));
    color: white;
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(255,255,255,1));
    color: white;
  }
}




input.custom-placeholder::placeholder {
  color: #888 !important;
}

.form-control.custom-textarea::placeholder {
  color: #888 !important;
  opacity: 1 !important;
}

.form-control.custom-textarea::-webkit-input-placeholder {
  color: #888 !important;
  opacity: 1 !important;
}

.detail-sub-sidebar .detail-sidebar-box .detail-input.custom-textarea .form-control,
.detail-sub-sidebar .detail-sidebar-box .detail-input.custom-textarea textarea.form-control {
    --bs-secondary-color: #888 !important;   /* ← this is what BS uses for ::placeholder in many cases */
}

.detail-sub-sidebar .detail-sidebar-box .detail-input.custom-textarea .form-control::placeholder,
.detail-sub-sidebar .detail-sidebar-box .detail-input.custom-textarea .form-control::-webkit-input-placeholder {
    color: #888 !important;
    opacity: 1 !important;
}


 #seller_kilometer::placeholder,
  #seller_ps::placeholder,
  #seller_price::placeholder,
  #seller_car_location_postalcode::placeholder,
  #seller_car_location_street::placeholder,
  #seller_car_location_street::placeholder,
  #seller_engine_capacity::placeholder,
  #seller_vin::placeholder,
  input.my-class::placeholder {
  color: rgba(var(--title-color), 0.7);
  opacity: 1 !important;
}

input.form-control[type="number"],
#seller_kilometer {
  -moz-appearance: textfield !important; /* For Firefox */
  appearance: textfield !important; /* For broader compatibility */
}

input.form-control[type="number"]::-webkit-inner-spin-button,
input.form-control[type="number"]::-webkit-outer-spin-button,
#seller_kilometer::-webkit-inner-spin-button,
#seller_kilometer::-webkit-outer-spin-button {
  -webkit-appearance: none !important; /* For Chrome/Safari/Edge */
  margin: 0 !important;
}

@media (max-width: 1200px) {
  .user-form-box .form-input label {
    font-size: calc(16px + 1 * (100vw - 320px) / 1600);
  }
}


.custom-tooltip {
  position: relative;
  cursor: help !important;
}

.tooltip {
  visibility: hidden;
  opacity: 0;

  position: absolute;
  z-index: 100;
  bottom: 100%;            /* ← changed - more reliable */
  left: 50%;
  transform: translateX(-50%);

  margin-bottom: 2px;      /* breathing room instead of relying only on bottom % */

  background: #080c0f;
  color: #fff;
  text-align: left;
  padding: 4px 4px;       /* ← bigger padding helps a lot */
  border-radius: 4px;
  border: 1px solid rgba(var(--theme-color), 1);

  font-size: 13px !important;
  line-height: 1.2;
  max-width: 260px;
  width: max-content;      /* ← very important! */

  white-space: normal;   /* better than normal for most cases */
  word-break: break-word;
  pointer-events: none;

  transition: opacity 0.18s ease, visibility 0s linear 0.18s; /* fade in */
}

.reg-date:hover .tooltip {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
  pointer-events: auto;
}

.reg-date:hover .tooltip {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
  pointer-events: auto;
}

/* Optional: tiny arrow (very popular look) */
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.form-input > span.custom-tooltip:hover > span.tooltip {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
  pointer-events: auto;
}

.form-input .custom-tooltip,
.form-input .custom-tooltip * {
  cursor: help !important;
}

/* General modern styling for the select box itself */
select {
  /* Reset ugly defaults */
  appearance: none;               /* removes default arrow in most browsers */
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Nice look */
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");  /* custom arrow */
  background-repeat: no-repeat;
  background-position: right 0.7em center;
  background-size: 0.65em auto;

  border: 1px solid #ccc;
  border-radius: 6px;             /* softer corners */
  padding: 0.6em 2.5em 0.6em 0.9em;  /* space for arrow */
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);  /* subtle depth */
  transition: border-color 0.2s, box-shadow 0.2s;
}

.choices.is-disabled,
.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__list--single,
.choices.is-disabled .choices__item {
  cursor: pointer !important; /* or "default" */
}

.advertiseCar-center {
  display: flex;
  justify-content: center;
}

.advertiseCar-buttons {
  display: flex;
  gap: 1em; /* space between buttons */
  justify-content: center; /* center horizontally */
}



#cancelAdvertiseCar {
  background: #DD3744;
  color: #fff;
  border: none;
}
#cancelAdvertiseCar:hover {
  background: #b71c1c;
}

#advertiseCar {
    background-color: #188aec;
    color: white; /* optional for contrast */
    border: none; /* if you want no border */
}

#advertiseCar:hover {
  background: #146db9;
}

#custom-login-button-2 {
    background-color: #188aec;
    color: white; /* optional for contrast */
    border: none; /* if you want no border */
}

#custom-login-button-2:hover {
  background: #146db9;
}

#createAccountButton, #details-to-all-cars-of-seller, #sendMessage, #custom-login-button, #filterbutton {
    background-color: #188aec;
    color: white; /* optional for contrast */
    border: none; /* if you want no border */
}

#createAccountButton:hover,
#details-to-all-cars-of-seller:hover,
#sendMessage:hover,
#custom-login-button:hover,
#filterbutton:hover {
  background: #146db9;
}

.lazy-hidden {
  content-visibility: auto;
  contain-intrinsic-size: auto 350px;   /* ← Adjust 350px to roughly match average height of one .featured-box / .job-box / .blog-grid-box */
  /* If your items have very different heights, you can use: contain-intrinsic-size: auto; */
  /* Optional nice reveal effect: */
  transition: opacity 1.2s ease, transform 0.0s ease;
  opacity: 0;
  transform: translateY(0px);
}

.lazy-hidden.visible {
  opacity: 1;
  transform: translateY(0);
}


.featured-box {
  display: flex;
  flex-direction: column;
  /* ^ this is usually already there or easy to add — if not, add it */

  /* This is the important part most people miss: */
}

.featured-box > .card-body,          /* common Bootstrap/Tailwind class */
.featured-box .content,              /* or whatever wrapper holds title + text + price/buttons */
.featured-box > *:last-child,        /* or target the main content block */
.featured-box .inner {               /* adjust selector to whatever actually contains your text/buttons */
  flex: 1;                           /* ← this makes it grow and fill available space */
  display: flex;                     /* optional but often helps */
  flex-direction: column;
}

/* Bonus: push buttons/actions to bottom if you want */
.featured-box .actions,
.featured-box button,
.featured-box .card-footer {
  margin-top: auto;                  /* super clean way to stick to bottom */
}


.featured-box {
  display: flex;
  flex-direction: column;
  height: 100%;               /* if parent .col-lg-4 uses height 100% or flex */
}

.featured-main-img {
  flex-shrink: 0;             /* image area doesn't shrink */
  /* you can add min-height or aspect-ratio here if you want more control */
}

.featured-content {
  flex: 1 1 auto;             /* ← this is the key line: grows to fill remaining space */
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* spreads children vertically – title at top, price at bottom */
}


/* left and right panel in details.html */
.detail-simple-slider .swiper-button-next, .detail-simple-slider .swiper-button-prev {
    width: calc(35px + 13 * (100vw - 320px) / 1600);
    height: calc
↳
calc(35px + 13 * (1294px - 320px) / 1600)
↳
42.9137px
(35px + 13 * (100vw - 320px) / 1600);
    background: rgba(20, 25, 35, 0.3);
}

.swiper-button-next i svg path,
.swiper-button-prev i svg path {
    fill: rgba(255, 255, 255, 0.7) !important; /* 50% transparent white */
}


@media (max-width: 1200px) {
.container {
  margin-left: calc(0.85* var(--bs-gutter-x)) !important;
  }
}


#editAvatar {
  position: absolute;
  top: 85%;      /* 85% from top of container */
  right: -30%;    /* -30% from right of container */
  cursor: pointer;
  /* adjust % values as needed */
}

@media (max-width: 768px) {
    .detail-sub-sidebar .detail-input.custom-textarea .form-control {
        position: relative !important;
        z-index: 999 !important;
        pointer-events: auto !important;
        touch-action: auto !important;
        min-height: 120px !important;   /* prevents it collapsing */
    }

    /* Protects against floating labels or decorative pseudo-elements */
    .detail-input.custom-textarea label,
    .detail-input.custom-textarea::before,
    .detail-input.custom-textarea::after {
        pointer-events: none !important;
    }
}

.back-to-top-icon {
  width: 25px;
  height: 25px;
}

@media (min-width: 600px) { /* Adjust 600px as needed for your breakpoint */
  .back-to-top-icon {
    width: 40px;
    height: 40px;
  }
}

.backgroundForElements, .property-footer-section {
    background: rgba(19, 29, 39, 0.0) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

#form_register {
    opacity: 1;
    transition: opacity 0.5s;
}

#form_register.visible {
    opacity: 1;
    z-index: 2;
}


.video-container {
    position: relative;
    width: 100%;                    /* or whatever width you want */
    aspect-ratio: 16 / 9;           /* ← CHANGE THIS to your video's real aspect ratio */
    background: #000;               /* optional: black background while loading */
}

@supports (-moz-appearance: none) {
  .range-slider {
    position: relative;
  }

  .range-slider input[type="range"] {
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    left: 0;
    top: 2px; /*  (18px thumb - 4px line) / 2  */
    width: 100%;
    height: 18px; /* important in Firefox */
    margin: 0;
    background: transparent;
    border: 0;
    outline: none;
    pointer-events: none;
  }

  .range-slider input[type="range"]::-moz-focus-outer {
    border: 0;
  }

  .range-slider input[type="range"]::-moz-range-track {
    height: 4px;
    background: transparent;
    border: 0;
  }

  .range-slider input[type="range"]::-moz-range-progress {
    height: 4px;
    background: transparent;
    border: 0;
  }

  .range-slider input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px #2196f3 inset;
    cursor: grab;
  }

  .range-slider .range-slider-display {
    position: relative;
  }

  .range-slider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background-color: rgba(var(--content-color), 0.2);
  background-image: linear-gradient(to right, transparent var(--range-slider-value-low-fallback), rgba(var(--theme-color), 1) var(--range-slider-value-low-fallback), rgba(var(--theme-color), 1) var(--range-slider-value-high-fallback), transparent var(--range-slider-value-high-fallback));
  pointer-events: none;
  transform: translateY(-50%);
  z-index: -1 !important;
}
}

.featured-main-img video {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 329 / 214;
  object-fit: cover;
  display: block;
  position: relative;
}

.user_avatar_modal-close {
    cursor: pointer;
}


.profile-img {
  position: relative;
  width: 120px;
  height: 120px;
}

.profile-img-frame {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2px; /* optional */
}

.profile-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


#editAvatar {
  position: absolute;
  bottom: 6px;
  right: -30px;
  z-index: 2;
  cursor: pointer;
}

#editBanner {
  position: absolute;
  top: 80px;
  right: -0px;
  z-index: 2;
  cursor: pointer;
}

.profile-images-row {
  display: flex;
  gap: 16px;  /* space between images */
  align-items: center;
}

#avatar, #banner {
  cursor: pointer;
}

.form-check-box {
  display: flex;
  align-items: center;
  justify-content: space-between;  /* This spreads first item(s) & last item */
}

.form-check-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.remember-wrap {
  display: flex;
  align-items: center;
  gap: 4px; /* Small gap between checkbox and label */
}

.my-login-override .forgot-pass-text {
  color: #fff;                /* Make the text white */
  text-decoration: none;      /* Remove underline */
  cursor: pointer;
  font-weight: 300;
  margin-left: 8px;           /* Adjust/remove as needed */
  transition: color 0.2s;
  font-size: calc(14px + 2 * (100vw - 320px) / 1600);
}

.my-login-override .forgot-pass-text:hover {
  color: #eee;                /* Slightly different white for hover, optional */
}

.my-login-override .form-check-box label {
    width: auto; /* Or: width: 100%; or any value you want */
}

.my-login-override .form-check-box {
    display: flex;
    align-items: center;     /* vertical alignment */
    justify-content: space-between; /* space between left and right */
    gap: 0; /* or desired value */
}


.user_avatar_modal-close {
  position: absolute;
  right: 10px;
  top: 5px;
  cursor: pointer;
  font-size: 25px;
  font-weight: bold;
}

.avatar-banner-missing {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.0);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.avatar-banner-missing-content {
  background: #188ce8 !important;
  padding: 20px 30px;
  border-radius: 8px;
  color: #fff;
}

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 9999;

  justify-content: center;
  align-items: center;
}

.password-modal-box {
  background: white;
  padding: 20px;
  border-radius: 6px;
  min-width: 300px;
  right: 50%;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(21, 31, 41, 0.5019607843) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

#resetEmail {
  background: #10131a !important;
  color: white !important;
  border: 1px solid #188aec;
  border-radius: 4px;
  padding: 6px;
}

#resetEmail::placeholder {
  color: #bbb !important;
}

#sendReset {
  color: #fff;         /* white text */
  background: #007bff; /* blue background */
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

#resetPasswordModal {
  opacity: 1;
}

#login-form-box {
    transition: opacity 0.4s ease-in-out;
    opacity: 1;           /* visible by default */
}

#login-form-box.hidden {
    opacity: 0;
    pointer-events: none;   /* prevents clicking when hidden */
}

#register-form-box {
    transition: opacity 0.4s ease-in-out;
    opacity: 1;           /* visible by default */
}

#register-form-box.hidden {
    opacity: 0;
    pointer-events: none;   /* prevents clicking when hidden */
}


.modal-message {
  color: white;
}



/* only this page/section */
.login-section.login-2 > .container,
.login-section.login-2 > .container > .position-relative {
  pointer-events: none;
}

/* form must still be clickable */
.login-section.login-2 #login-form-box,
.login-section.login-2 #login-form-box * {
  pointer-events: auto;
}

/* only the register section layout should ignore clicks */
.login-section.register > .container,
.login-section.register > .container > .position-relative {
  pointer-events: none;
}

/* but the actual register form must stay clickable */
.login-section.register #register-form-box,
.login-section.register #register-form-box * {
  pointer-events: auto;
}



@media (max-width: 1000px) {
  header .right-side-header .icon-side {
      display: flex;
      align-items: center;
      gap: 50px;
  }
}


@media (max-width: 1000px) {
header .right-side-header {
 padding-right: 13%;
}
}

@media (max-width: 800px) {
header .right-side-header .icon-side .login-flex.onhover-dropdown .onhover-list {
background: rgba(var(--white), 0.9);
}
}

@media (max-width: 450px) {
  .bottom-text {
    display: none;
  }
}