/* =============================================
   FIRST PAGE DARK THEME
   ============================================= */

/* Body background override for first page */
body {
   background: #07080f;
}

/* Banner */
.slider-dot.slider-dot-active {
   background-color: #fff !important;
   width: 20px;
   border-radius: 9999px;
}

.banners-slider-wrapper {
   overflow: hidden;
}

.banners-track {
   display: flex;
   gap: 16px;
   transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   will-change: transform;
   cursor: grab;
   user-select: none;
}

.banner-slide {
   width: 100%;
}

/* =============================================
   HERO SECTION
   ============================================= */
.hero-section {
   background-image: url('../images/car-city.jpg');
   background-size: cover;
   background-position: center 55%;
   background-repeat: no-repeat;
}

.hero-overlay {
   background: linear-gradient(110deg,
         rgba(7, 8, 15, 0.97) 40%,
         rgba(7, 8, 15, 0.80) 60%,
         rgba(7, 8, 15, 0.45) 80%,
         rgba(7, 8, 15, 0.20) 100%);
}

html.light .hero-overlay {
   background: linear-gradient(110deg,
         rgba(7, 8, 15, 0.75) 40%,
         rgba(7, 8, 15, 0.55) 60%,
         rgba(7, 8, 15, 0.25) 80%,
         rgba(7, 8, 15, 0.10) 100%);
}

html.light .hero-search-form {
   border-color: rgba(255, 255, 255, 0.25);
}

html.light .hero-search-form .text-\[--color-text\] {
   color: #ffffff;
}

html.light .hero-search-form .text-\[--color-label\] {
   color: rgba(255, 255, 255, 0.6);
}

html.light .hero-search-form .border-\[--color-border\] {
   border-color: rgba(255, 255, 255, 0.25);
}

html.light .hero-search-form .bg-\[--color-bg-input\] {
   background-color: #1f2937;
}

html.light .hero-search-form .hover\:bg-\[--color-bg-hover\]:hover {
   background-color: rgba(255, 255, 255, 0.2);
}


.hero-title {
   font-size: clamp(2.5rem, 8.5vw, 7.5rem);
   line-height: 0.92;
   letter-spacing: -0.03em;
}

/* =============================================
   HERO SEARCH BAR - DATE PICKER DARK OVERRIDES
   ============================================= */

/* Hide the default date picker label inside hero */
.hero-date-field #rental-form>div>label {
   display: none !important;
}

/* Remove picker white background/border inside hero */
.hero-date-field .ant-picker {
   background: transparent !important;
   border: none !important;
   border-radius: 0 !important;
   box-shadow: none !important;
   width: 100% !important;
   height: 100% !important;
   min-height: 72px !important;
   padding: 12px 20px !important;
}

.hero-date-field .ant-picker:hover,
.hero-date-field .ant-picker-focused {
   background: transparent !important;
   border: none !important;
   box-shadow: none !important;
   transform: none !important;
}

.hero-date-field .ant-picker input {
   color: white !important;
   font-size: 14px !important;
   font-weight: 600 !important;
}

.hero-date-field .ant-picker input::placeholder {
   color: rgba(255, 255, 255, 0.60) !important;
   font-weight: 400 !important;
}

.hero-date-field .ant-picker-separator {
   color: rgba(255, 255, 255, 0.5) !important;
}

.hero-date-field .ant-picker-suffix {
   color: var(--color-orange) !important;
}

.hero-date-field #rental-form {
   height: 100%;
}

.hero-date-field #rental-form>div,
.hero-date-field #rental-form>div>.relative {
   height: 100%;
}

/* Location select dark option colors */
.dark-select option {
   background: #0f1420;
   color: white;
}

/* =============================================
   FLEET CARD HOVER (de-emphasize siblings)
   ============================================= */
.fleet-grid:has(.fleet-card:hover) .fleet-card:not(:hover) {
   opacity: 0.7;
   filter: brightness(0.85);
}

@media (max-width: 768px) {
   .hero-section {
      background-attachment: scroll;
   }
}