@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@font-face {
  font-family: 'Nexa'; /* Give the font a name you'll use in your CSS */
  src: url('../../fonts/Nexa-Heavy.ttf') format('truetype'); /* Fallback to TTF if needed */
  font-weight: 300;
}

/* ::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: orange; 
}
::-webkit-scrollbar-thumb {
  background: #ff6a13; 
}
::-webkit-scrollbar-thumb:hover {
  background: #ff4500; 
} */

.border-theme{
    border: 1px solid #04213C;
}
.border-theme-2{
    border: 2px solid #04213C;
}

.guarentee-badge{
    background-color: #04223c;
}
.authentication-wrapper {
  height: 100vh;
  align-items: center;
  display: flex;
}
.booking_selection_wrapper {
  height: 100vh;
  align-items: center;
  display: flex;
}

.btn-primary {
  color: white;
  border-radius: 25px;
  background-color: #04213C;
  border: 1px solid #04213C;
  transition: all 0.4s;
}
.btn-primary:hover {
  background-color: #04223ce8;
  border: 1px solid #04223ce8;
  box-shadow: 0 0 3px darkblue, 0 0 5px navy;
}
.btn-primary:focus {
  background-color: #04223ce8 !important;
  border: 1px solid #04223ce8 !important;
  box-shadow: 0 0 3px darkblue, 0 0 5px navy !important;
}
.form-floating input {
  border-bottom: 2px solid #04223c !important;
  border-radius: 0 !important;
}
.form-floating input:focus {
  border-radius: 0 !important;
  border-bottom: 2px solid #04223c !important;
}
.form-floating > label {
  all: unset;
}
.form-floating .input-label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem 0.75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
.form-floating label.error {
  font-size: 14px;
  color: #d90000;
  font-weight: 500;
  opacity: 1 !important;
}

.form-floating input:-webkit-autofill,
.form-floating input:-webkit-autofill:hover,
.form-floating input:-webkit-autofill:focus,
.form-floating input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}
.form-floating input:-webkit-autofill {
  -webkit-text-fill-color: #333 !important;
}

/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Nexa", sans-serif;
}

body {
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Card Container */
.card-container {
  width: 100%;
  /* max-width: 800px; */
  /* margin: 20px; */
}

/* Car Card */
.car-card {
  background: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  margin-block: 20px;
}

/* Car Image */
.car-image {
  max-width: 15rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}
.car-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 1.8rem;
}

.car-img {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.car-img img{
  width: 100%;
  height: auto;
}

/* Car Details */
.car-details {
  flex: 2;
  border-right: 1px solid #d1d5db;
  padding-bottom:10px;
}

.details {
  display: flex;
  flex-direction: row;
  border-top: 1px solid #d1d5db;
}

.car-title {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
  font-weight: bolder;
}

.sub-title {
  font-size: 14px;
  color: #777;
}

.car-features span {
  font-size: 14px;
  color: #555;
  margin-right: 10px;
  font-weight: 500;
}

.pickup-details {
  display: inline-flex;
  gap: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px 20px;
}

.pickup-details div {
  font-size: 16px;
  /* color: #555; */
}

.pickup-details .checkmark {
  font-size: 16px;
  /* font-weight: lighter; */
}

/* Pricing Section */

.rating {
  font-size: 14px;
  text-align: center;
  color: #444;
  margin-bottom: 10px;
}

.rating strong {
  font-size: 18px;
  color: #ff9800;
}

.total-price p {
  font-size: 12px;
  color: #777;
}

.total-price h3 {
  font-size: 24px;
  color: #333;
}

.deal-btn {
  /* background-color: #007ac2; */
  color: #fff;
  border: none;
  padding: 1rem 2rem;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s ease;
  width: 100%;
  margin-inline: auto;
  font-weight: bold;
}

.deal-btn:hover {
  /* background-color: #005bb5; */
}

.pickup-location {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.car-pricing {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 20px;
}

.ratings {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  gap: 0.6rem;
}
.ratings-box {
  padding: 0.4rem 0.5rem;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}

.reviews {
  display: flex;
  flex-direction: column;
  margin-top: 0.2rem;
}

.reviews h3{
    font-weight: bolder;
  }
  
.top-bar{
    padding: 10px;
}

.search-result-stats{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.swiper{
    display: flex;
    gap: 20px;
}

.swiper-card{
    width: 100%;
    max-width: 200px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    margin-block: 20px;
    gap: 10px;
}

.swiper-card > div{
   font-size: 0.8rem;
   color:#64748b;
}

.swiper-card-price{
    font-size: 1.5rem;
    font-weight: bolder;
}

.swiper-card img{
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.location-text {
  font-size: 14px; 
  color: #52637a
}

.mr-5{
  margin-right: 3rem !important;
}
@media screen and (max-width: 768px) {
  /* .details {
    flex-direction: column;
  } */
  .car-card {
    flex-direction: column;
  }
  .car-pricing {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
  }
  .location-text {
    font-size: 12px; 
    color: #52637a
  }
  .feature-text {
    font-size: 11px;
  }
  .car-details {
    border-right: none;
    padding-bottom: 0;
  }
  .mr-5{
    margin-right: 0 !important;
  }
  .sm-w-100 {
    width: 100% !important;
  }
  .pickup-details {
    padding: 0;
  }
  .reviews h5{
    font-size: 1rem;
  }
  .deal-btn {
    padding: 0.5rem 1rem;
    font-size: 14px;
  }
  .car-card {
    padding: 10px;
  }
  .summary {
    flex-wrap: wrap-reverse !important;
  }
  .car-img img{
    width: 120%;
    height: 40%;
  }
}