/**
 * Autocomplete suggest List Styles
 */
.ui-autocomplete {
    position: absolute;
    left: 0;
    top: 0;
    width: 500px;
    box-shadow: 0 3px 6px rgba(25, 32, 36, 0.16), 0 -1px 4px rgba(25, 32, 36, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 8px;
    background: #FFF;
    text-align: left;
    z-index: 9050;
    padding:0;
    margin-left:1px;
    margin-top:12px;
    /* set scrolling */
    height:auto;
    overflow:auto;
    overflow-x:hidden;
}

.ui-autocomplete-spinner {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='2'/%3E%3Cpath d='M10 2a8 8 0 0 1 8 8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 10 10' to='360 10 10' dur='0.6s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") !important;
    background-position: right 10px center !important;
    background-repeat: no-repeat !important;
    background-size: 20px 20px !important;
}

.ui-menu .ui-menu-item{
    height: 45px;
    overflow: hidden;
    position: relative;
}

.ui-menu .ui-menu-item a{
    font-size: 15px;
    border-radius: 0px;
    cursor: pointer;
    color: #000;
    top: 0;
    position: absolute;
    width: 100%;
    padding-left:8px;
    padding-right:0;
    line-height: 38px;
    border-top: 1px solid #dddddd;
    text-decoration:unset;
}


.ui-menu .ui-menu-item a:hover,
#ui-active-menuitem {
    background: #F9A13B;
    border-color: #F9A13B;
    color: #fff;
}

.rate-search-bg {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.rate-search-bg img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto; /* Uses the image's natural dimensions */
  object-fit: cover; /* Ensures proper coverage */
  /*animation: zoomInEffect 10s ease-out forwards;*/
  min-height: 500px; /* Sets a minimum height */
  transform-origin: center center;
}

@keyframes zoomInEffect {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

/* =============================================
   Dark semi-transparent container
   ============================================= */
.rate-search-container{
  background: rgba(20, 25, 35, 0.75);
  padding: 18px 18px;
  border-radius: 15px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.rate-search-container .border-start{
  border-left: 0 !important;
}

/* =============================================
   Input fields — dark glass style
   ============================================= */
.rate-search-container .form-control {
  height: 35px;
  border: 0;
  font-weight: 500;
  font-size: 15px;
  padding-top: 0;
  padding-bottom: 0;
  width: 100%;
  background: transparent;
  color: #fff;
}

.rate-search-container .form-control:focus {
  background: transparent;
  color: #fff;
  box-shadow: unset;
}

.rate-search-container .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.input-group-bs-fix{
  display: inline-flex;
  width: 100%;
  padding: 3px 2px 3px 10px;
  border-radius: 5px;
}

.input-group-bs-fix .input-group-text{
  padding: 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
}

.rate-search-container .input-group-text{
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
}

/* Dark input wrapper — override Bootstrap .border */
.rate-search-container .input-group-bs-fix.border {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Icon color inside inputs */
.rate-search-container .input-group-text .fas,
.rate-search-container .input-group-text .far {
  color: rgba(255, 255, 255, 0.7);
}

/* Override .text-primary on icons inside dark container */
.rate-search-container .text-primary {
  color: rgba(255, 255, 255, 0.7) !important;
}

.mini-rc-container {
  background: #fff;
  display: flex;
  justify-content: center;
  min-height: 500px;
  max-width: 100%;
  position: relative;
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .rate-search-container .form-control{
    font-size: 14px;
  }
}

@media (max-width: 991px) {
  .rate-search-container {
    background: rgba(20, 25, 35, 0.75);
    padding: 18px 18px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .mini-rc-container{
    height: 600px;
  }

  .rate-search-bg img {
   min-height: 600px;
  }

}

/*@media (max-width: 767px) {

  .rate-search-container{
    max-width: 360px;
  }

}*/

.rate-search-container .bootstrap-datetimepicker-widget table td.day {
  height: 30px;
  line-height: 25px;
  width: 30px;
}

.rate-search-container .bootstrap-datetimepicker-widget table th {
  height: 30px;
  line-height: 30px;
}

.rate-search-container .bootstrap-datetimepicker-widget table td.active,
.rate-search-container .bootstrap-datetimepicker-widget table td.active:hover,
.rate-search-container .bootstrap-datetimepicker-widget table td span.active{
  background-color: #F9A13B;
}

.rate-search-container .bootstrap-datetimepicker-widget table td.today:before{
  border-bottom-color: #F9A13B;
}

.rate-search-container .bootstrap-datetimepicker-widget table td.disabled, .bootstrap-datetimepicker-widget table td.disabled:hover{
  color: #ccc;
}

#rate-search{
  display: flex;
  justify-content: center;
}

/* =============================================
   Row-2 labels — gold/amber uppercase
   ============================================= */

#rate-search .row-2 label{
  padding-bottom: 2px;
  color: #F9A13B;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1.2px;
  font-weight: 600;
}

/* =============================================
   Row-3 labels — white, normal case
   (checkbox label, driver's age, country)
   ============================================= */
label[for="toggle_oneway"] {
  color: #fff;
}

/* Country & driver age labels — orange */
label[for="country_code"],
label[for="drivers_age"] {
  color: #F9A13B;
  font-size: 11px;
  letter-spacing: 1.2px;
  font-weight: 600;
}

.search-image-wrapper{
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* =============================================
   Select dropdowns — dark glass style
   ============================================= */
#country_code, #drivers_age{
  max-width: 250px;
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 5px;
}

#country_code option, #drivers_age option {
  background: #1a1f2e;
  color: #fff;
}

/* Checkbox styling */
.rate-search-container .form-check-input {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.3);
}

.rate-search-container .form-check-input:checked {
  background-color: #F9A13B;
  border-color: #F9A13B;
}

/* =============================================
   Cars/Vans category cards — pill shape
   ============================================= */
.filter-vehicle-category-card {
  flex: 1;
  max-width: 80px;
  padding: 7px;
  margin-right: 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s;
  background: transparent;
  color: #fff;
}
.filter-vehicle-category-card:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.filter-vehicle-category-card.selected {
  background-color: #F9A13B;
  color: white;
  border-color: #F9A13B;
}
.filter-vehicle-category-card.disabled {
  background-color: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
  cursor: not-allowed;
  opacity: 0.6;
}

/* =============================================
   Search button — orange pill
   ============================================= */
#search_button_compact{
  border-radius: 25px;
  line-height: 14px;
  font-weight: 600;
  background-color: #F9A13B;
  border-color: #F9A13B;
}

#search_button_compact:hover {
  background-color: #e8922e;
  border-color: #e8922e;
}

/* =============================================
   Preview / loading content card rows
   ============================================= */
.rate-search-container .lc-row-2, .rate-search-container .lc-row-3 {
  height: 45px;
}

.rate-search-container .lc-row-3{
  margin-bottom: 3px;
}

.rate-search-container .lc-row-1 {
  height: 40px;
  max-width: 80px;
  margin-right: 6px;
}

.rate-search-container .lc-row-2-label{
  padding-bottom: 2px;
  font-weight: 500;
  color: #F9A13B;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1.2px;
}

/* Loading skeleton in dark theme */
.rate-search-container .lc_bg {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
}

@media (min-width: 992px) and (max-width: 1400px) {
  #input_date_pickup, #input_date_dropoff{
    padding: 0px 0px 0px 9px !important;
  }

  .rate-search-container .form-control{
    font-size: 14px !important;
  }
}

/* Specialty Selection Card - Inline Style */
.specialty-selection-card-inline {
  display: flex;
  align-items: center;
  background: #F9A13B;
  color: white;
  border-radius: 20px;
  padding: 7px 12px;
  margin-left: 6px;
  font-size: 14px;
  font-weight: 500;
  max-width: 120px;
  animation: slideInRight 0.3s ease-out;
}

.specialty-selection-card-inline .specialty-name {
  color: white;
  font-weight: 600;
  text-transform: capitalize;
  margin-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.specialty-selection-card-inline .btn-close-specialty {
  background: none;
  border: none;
  font-size: 16px;
  color: white;
  cursor: pointer;
  padding: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  opacity: 0.8;
}

.specialty-selection-card-inline .btn-close-specialty:hover {
  opacity: 1;
  background-color: rgba(255,255,255,0.2);
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Date range highlighting between pickup and dropoff */
.bootstrap-datetimepicker-widget table td.day.in-range {
  background-color: rgba(249, 161, 59, 0.2);
}
.bootstrap-datetimepicker-widget table td.day.in-range:hover {
  background-color: rgba(249, 161, 59, 0.5)
}
.bootstrap-datetimepicker-widget table td.day.range-start,
.bootstrap-datetimepicker-widget table td.day.range-end,
.bootstrap-datetimepicker-widget table td.day.active,
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.day.active:hover {
  background-color: #F9A13B;
  color: #fff;
}
.bootstrap-datetimepicker-widget table td.day.hover-range {
  background-color: rgba(249, 161, 59, 0.2);
  color: rgb(41, 44, 56);
}
.bootstrap-datetimepicker-widget table td.day.hover-range:hover {
  background-color: rgba(249,161,59,0.25);
}

/* =============================================
   Error box styling for dark theme
   ============================================= */
#error_box_search .alert-danger {
  background: rgba(220, 53, 69, 0.2);
  border-color: rgba(220, 53, 69, 0.4);
  color: #ff8a96;
}