@use "@/assets/styles/variables" as *;

// max width 1400px
@media (max-width: 1400px) {
  .why-choose-section {
    .box {
      h5 {
        font-size: 20px;
      }
    }
  }

  // Lexus banner large desktop
  .all-cars-container .lexus-banner {
    .banner-bottom .lexus-car img {
      width: 450px !important;
      max-width: 38vw !important;
    }
  }
}

// max width 1200px
@media (max-width: 1200px) {

  // Lexus banner medium desktop/laptop
  .all-cars-container .lexus-banner {
    .banner-bg {
      min-height: 350px;
      padding: 20px 0 120px;
    }

    .lexus-logo-top {
      img {
        height: 70px !important;
        width: auto !important;
      }
    }

    .banner-content {
      min-height: 200px;

      .banner-text {
        max-width: 60%;

        h2 {
          font-size: 40px;
        }

        p {
          font-size: 15px;
        }
      }
    }

    .banner-bottom {
      height: 100px;

      .lexus-car img {
        width: 380px !important;
        max-width: 38vw !important;
      }
    }
  }
}

// max width 1000px (small laptop)
@media (max-width: 1000px) {
  .all-cars-container .lexus-banner {
    .banner-bg {
      min-height: 280px;
      padding: 15px 0 100px;
    }

    .lexus-logo-top {
      margin-bottom: 15px;

      img {
        height: 55px !important;
        width: auto !important;
      }
    }

    .banner-content {
      min-height: 180px;

      .banner-text {
        max-width: 55%;

        h2 {
          font-size: 32px;
        }

        p {
          font-size: 13px;
        }

        .lexus-cta {
          padding: 12px 20px;
          font-size: 12px;
        }
      }
    }

    .banner-bottom {
      height: 80px;

      .lexus-car img {
        width: 320px !important;
        max-width: 40vw !important;
      }
    }
  }

  // start how-work-section
  .how-work-section {
    .cards {
      .main-card {
        justify-content: flex-start !important;
      }
    }
  }

  // end how-work-section

  .search-home {
    padding: 10px;

    .dropdown-container.search {
      .dropdown-toggle-container {
        font-size: 19px;
      }
    }
  }
}

// max width 1000px - other styles (lexus banner styles moved above)
@media (max-width: 1000px) {
  .product-page {
    .details-container {
      margin-top: 70px;
    }
  }

  .payment-order-section {
    .main-one {
      gap: 40px;
    }

    .custom-row {
      width: 100%;

      p {
        width: 100% !important;
      }
    }

    .image-container {
      width: 100%;
      height: 400px;

      button {
        z-index: 111;
        position: relative;
      }
    }
  }

  .all-cars-container {
    .dropdown-toggle-container,
    .inp {
      width: 100% !important;
    }

    .v-progress-linear {
      width: 100% !important;
    }
  }
}

// max width 992px
@media (max-width: 992px) {
  .navbar {
    .items {
      .links {
        gap: 25px;
      }
    }
  }

  .empty-container {
    margin-top: 50px;
    margin-bottom: 50px;
    width: 100%;
    height: fit-content;
    padding: 20px;

    h4 {
      font-size: 20px !important;
      line-height: 35px;
    }

    p {
      width: 100% !important;
    }
  }

  // Lexus banner tablet
  .all-cars-container .lexus-banner {
    .banner-bg {
      min-height: 280px;
      padding: 15px 0 100px;
    }

    .lexus-logo-top {
      margin-bottom: 10px;

      img {
        height: 60px !important;
        width: auto !important;
      }
    }

    .banner-content {
      min-height: 180px;

      .banner-text {
        max-width: 100%;
        text-align: center;

        h2 {
          font-size: 32px;
        }

        p {
          font-size: 14px;
          padding: 0 10px;
        }

        .lexus-cta {
          padding: 12px 20px;
          font-size: 12px;
        }
      }
    }

    .banner-bottom {
      height: 80px;

      .lexus-car img {
        width: 320px !important;
        max-width: 50vw !important;
      }
    }
  }

  // start payment-order-section
  .payment-order-section {
    .image-container {
      .text {
        align-items: center;

        button {
          z-index: 1;
          width: fit-content;
          padding: 0px 15px;
        }

        h3 {
          z-index: 1;
          margin-top: -15px;
        }
      }
    }
  }

  // end payment-order-section
  // start  search-home
  .search-home {
    padding: 35px;
    border-radius: 30px;

    .inp {
      padding: 10px;
    }

    .dropdown-container.search {
      .dropdown-toggle-container {
        font-size: 20px;
        width: 100%;
      }
    }
  }

  // end  search-home
  // start how-work-section
  .how-work-section {
    .text-container {
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      h2 {
        margin: 10px 0;
      }
    }

    .cards {
      .main-card {
        &:hover {
          width: auto !important;
          top: 0;
        }
      }
    }
  }

  // end how-work-section
}

// max width 950px
@media (max-width: 950px) {
  .single-new-container .news-box .icons {
    flex-wrap: wrap;
    gap: 12px;
  }

  .single-new-container {
    .single-new {
      padding: 16px;
    }

    .news-related {
      margin-top: 50px;
    }
  }

  .single-new-container .single-new .img-box .image {
    height: 220px;
  }

  .text-page {
    margin-bottom: 30px;
    margin-top: 30px;

    .title {
      font-size: 30px;
      margin-top: 10px;
    }
  }

}

// max width 805px
@media (max-width: 805px) {
  .popup-container {
    padding: 10px 22px;
  }
}

// max width 775px
@media (max-width: 775px) {
  $mainSpace: 80px !important;

  .about-us {
    margin-bottom: 0px !important;

    .image {
      border-radius: 24px !important;

      img,
      .overlay {
        border-radius: 24px !important;
      }
    }
  }

  iframe {
    width: 100% !important;
    height: 300px !important;
  }

  .wishlist-page {
    padding-bottom: 40px;
  }

  .empty-container {
    height: fit-content;
  }

  .footer-container {

    .main-links-container,
    .foot-line {
      flex-direction: column;
      gap: 40px;
      text-align: center;
    }

    .subscripe-container {
      align-items: center;
    }

    .image-container {
      p {
        width: 100% !important;
      }

      .icons {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px !important;
      }
    }

    .all-links {
      gap: 50px !important;
      justify-content: center;
      flex-direction: column;
    }

    .foot-line {
      gap: 20px;
    }
  }

  .product-page {
    .details-container {
      .nameCar {
        font-size: 24px;
      }

      .desc {
        p {
          width: 100%;
        }
      }

      .main-details {
        gap: 20px;

        .details {
          gap: 30px;
          flex-direction: column;

          .detail {
            width: 100%;
            justify-content: space-between;
          }
        }
      }

      .btns-container {
        flex-direction: column;

        .buy {
          width: 100%;
        }
      }
    }

    .mySwiper {
      width: 100%;
      height: 350px;
      margin: 0;
    }
  }

  .order-finance-container {
    padding: 24px;

    .radio-container {
      gap: 10px;

      .radio-btn {
        align-items: center;
      }
    }

    .send-btn,
    .text {
      width: 100% !important;
      margin-bottom: 0px;
      text-align: center;
    }
  }

  .modal-form {
    width: 95% !important;
    padding: 24px !important;

    .folder-container {
      height: 100px !important;
    }

    button {
      height: 46px !important;
      margin-top: 20px !important;
    }
  }

  .jobs-container .all-jobs .job {
    text-align: center;
    padding: 30px;

    div+div {
      justify-content: center;
      margin-top: 20px;
    }

    p {
      width: 100%;
    }
  }

  .how-work-section .text-container {
    button {
      width: 145px;
      height: 50px;
      margin-top: 15px;
      margin-bottom: 25px;
    }
  }

  .contact-page {
    .map-container {
      .cities-drop {
        order: 1;
      }
    }
  }

  html[dir="rtl"] {
    .how-work-section {
      .cards {
        svg {
          width: 90px;
          height: 90px;
        }

        .num {
          span {
            font-size: 30px !important;
            transform: translateX(-42%) !important;
            top: 20% !important;
          }
        }
      }
    }
  }

  html[dir="ltr"] {
    .how-work-section {
      .cards {
        svg {
          width: 90px;
          height: 90px;
        }

        .num {
          span {
            font-size: 30px !important;
            left: auto !important;
            right: 14%;
            top: 20% !important;
          }
        }
      }
    }

  }

  .explore-brands-section p,
  .why-choose-section p,
  .news-page .box p,
  .banks-container p,
  .cars-section-home .text p,
  .how-work-section .text-container p,
  .payment-order-section .text-contaier {
    width: 100% !important;
    text-align: center;
  }

  .mobileHead {
    font-size: 24px !important;
    line-height: 38px !important;
    width: 100% !important;
  }

  .search-home .searchBtn {
    width: 140px;
    height: 48px;
  }

  .cars-section-home {
    padding: 25px 0px;

    .more-btn {
      margin-top: 10px;
    }
  }

  .hero-section {
    .slider {
      /* Fixed height to prevent layout shift and scrollbars (was fit-content) */
      height: 100vh !important;
      min-height: 320px;
    }
  }
}

// max width 690px
@media (max-width: 690px) {

  // start popup-container
  .popup-container {
    .modal-custom-container {
      padding: 40px 20px;

      .close {
        left: 14px;
        top: 10px;
      }

      .item {
        width: 140px;
        height: fit-content;
        gap: 8px;
        padding: 10px 0px;

        h5 {
          margin: 0px;
        }

        p {
          width: 100%;
          font-size: 13px;
          padding: 0px 5px;
        }
      }
    }
  }

  // end popup-container
}

// max width 575px
@media (max-width: 575px) {
  .search-home-p {
    padding: 0 25px;

    .search-home {
      padding: 15px;
    }
  }

  // Lexus banner mobile
  .all-cars-container .lexus-banner {
    .banner-bg {
      min-height: 240px;
      padding: 10px 0 80px;
    }

    .lexus-logo-top {
      margin-bottom: 8px;

      img {
        height: 50px !important;
        width: auto !important;
      }
    }

    .banner-content {
      min-height: 150px;

      .banner-text {
        max-width: 100%;
        text-align: center;

        h2 {
          font-size: 24px;
          margin-bottom: 10px;
        }

        p {
          font-size: 12px;
          line-height: 1.6;
          margin-bottom: 12px;
          padding: 0 10px;
        }

        .lexus-cta {
          padding: 10px 18px;
          font-size: 12px;
        }
      }
    }

    .banner-bottom {
      height: 70px;

      .lexus-car img {
        width: 280px !important;
        max-width: 60vw !important;
      }
    }
  }
}