/* Yade EV navbar stability fixes */

/* Localization rendering: ensure Ethiopic glyph support */
html,
body {
  font-family: "Poppins", "Noto Sans SC", "Noto Sans Ethiopic", sans-serif;
}

/* Prevent accidental sideways scrolling */
html,
body {
  overflow-x: hidden;
}

/* Remove extra vertical whitespace above navbar */
body {
  margin-top: 0 !important;
}

.header-top {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.header-top .row {
  flex-wrap: nowrap;
}

.header-top-left ul,
.header-top-right ul {
  margin-bottom: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.header-top-left li,
.header-top-right li {
  line-height: 1.2;
}

/* Prevent email/hours text from breaking into a second line */
.header-top-left a,
.header-top-left li,
.header-top-right a {
  white-space: nowrap;
}

/* Keep top bar compact on medium widths */
@media (max-width: 1400px) and (min-width: 1181px) {
  .header-top {
    font-size: 13px;
  }

  .header-top-left li.me-4 {
    margin-right: 12px !important;
  }
}

/* Keep language dropdown active item visible */
.dropdown-item.active {
  background-color: #69A316;
  color: #ffffff !important;
}

/* Keep desktop nav in one line and avoid touching logo */
@media (min-width: 1181px) {
  .header-nav-menu-inner .row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  .header-nav-menu-inner .col-xl-2.col-md-3.col-5 {
    flex: 0 0 170px;
    max-width: 170px;
  }

  .header-nav-menu-inner .col-lg-7 {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
  }

  .header-nav-menu-inner .col-lg-3 {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .header-nav-menu .navbar-collapse {
    margin-left: 18px;
  }

  #responsive-menu {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .header-nav-menu-inner .navbar-logo .site-header-logo {
    width: auto !important;
    max-width: 150px;
    max-height: 48px;
    object-fit: contain;
  }

  .navbar-nav .nav-link {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
  }
}

/* Medium desktop widths were causing logo/Home overlap */
@media (min-width: 1181px) and (max-width: 1450px) {
  .navbar-nav .nav-link {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 13px;
  }

  .header-nav-menu-inner .navbar-logo .site-header-logo {
    max-width: 138px;
    max-height: 44px;
  }

  .navbar-button .btn {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Tight desktop range: hide quote button, keep search + menu readable */
@media (min-width: 1181px) and (max-width: 1320px) {
  .navbar-button .btn {
    display: none;
  }

  .navbar-button .mt_search i {
    margin-right: 0 !important;
  }
}

/*
 * styles.css sets .slicknav_nav .slicknav_item a { pointer-events: none } below 1100px.
 * That blocks taps on the Language row and on SlickNav's parent-link "breadcrumb" back row.
 */
@media (max-width: 1100px) {
  .slicknav_nav .slicknav_item a,
  .slicknav_nav .slicknav_parent-link a {
    pointer-events: auto !important;
  }
}

@media (max-width: 1180px) {
  .slicknav_nav .slicknav_item,
  .slicknav_nav .slicknav_item a,
  .slicknav_nav .slicknav_parent-link a,
  .slicknav_nav .slicknav_arrow {
    pointer-events: auto !important;
  }
}

/* Mobile hero layout: prevent text overlap/breaking */
@media (max-width: 768px) {
  .header-nav-menu-inner {
    position: relative;
    z-index: 100090 !important;
  }

  .header-nav-menu {
    background: transparent !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 100080 !important;
  }

  .header-nav-menu-inner {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    overflow: visible !important;
  }

  #slicknav-mobile {
    position: relative !important;
    z-index: 100100 !important;
    overflow: visible !important;
  }

  .navbar-logo .site-header-logo {
    max-width: 132px;
    max-height: 42px;
    width: auto !important;
    height: auto;
    object-fit: contain;
  }

  /* Keep hamburger visible and styled for dark hero */
  .slicknav_menu {
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    width: 100% !important;
    z-index: 100110 !important;
    overflow: visible !important;
  }

  .slicknav_btn {
    position: fixed !important;
    right: 16px !important;
    top: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 100120 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .slicknav_btn.slicknav_open:before,
  .slicknav_btn.slicknav_collapsed:before {
    position: static !important;
    display: block;
    line-height: 1;
    padding: 8px 10px;
    color: #1f2b2b !important;
    border: 1px solid rgba(31, 43, 43, 0.45);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
  }

  /* Make opened mobile nav dark instead of white */
  .slicknav_nav {
    position: fixed !important;
    top: 86px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #0f1b1f !important;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    padding: 8px 0 !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    text-align: center;
    z-index: 100130 !important;
  }

  .slicknav_nav ul,
  .slicknav_nav li {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .slicknav_nav a,
  .slicknav_nav .slicknav_row,
  .slicknav_nav .dropdown-menu > li > a {
    background: transparent !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 10px 44px 10px 16px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    position: relative !important;
    box-sizing: border-box;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    letter-spacing: 0.2px;
  }

  .slicknav_nav a:hover,
  .slicknav_nav .slicknav_row:hover,
  .slicknav_nav .dropdown-menu > li > a:hover {
    background: #69a316 !important;
    color: #ffffff !important;
  }

  .slicknav_nav .slicknav_item {
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
    display: block !important;
    width: 100% !important;
  }

  .slicknav_nav .slicknav_arrow {
    position: absolute !important;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
    float: none !important;
    display: block;
    line-height: 1;
    z-index: 2;
    pointer-events: auto !important;
    cursor: pointer;
  }

  /* Force submenu items visible and styled in mobile */
  .slicknav_nav .dropdown-menu {
    position: static !important;
    display: none !important;
    float: none !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 0 10px !important;
    background: #142328 !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 100140 !important;
  }

  /* Keep hero/slider beneath mobile menu stack */
  .banner,
  .home-hero,
  .home-hero .home-banner-slider,
  .home-hero .hero-slide,
  .home-hero .slick-list,
  .home-hero .slick-track {
    position: relative;
    z-index: 10 !important;
  }

  /* Expand only active/tapped submenu */
  .slicknav_nav li.slicknav_open > .dropdown-menu,
  .slicknav_nav li.slicknav_open > ul.dropdown-menu,
  .slicknav_nav li.slicknav_open > ul {
    display: block !important;
  }

  /* Kill template white blocks inside mobile menu */
  .slicknav_nav .dropdown-menu,
  .slicknav_nav .dropdown-menu li,
  .slicknav_nav .dropdown-menu li a,
  .slicknav_nav .dropdown-menu > li > a,
  .slicknav_nav .slicknav_parent ul,
  .slicknav_nav .slicknav_parent ul li,
  .slicknav_nav .slicknav_parent ul li a {
    background: #142328 !important;
    background-color: #142328 !important;
    color: #ffffff !important;
    border: 0 !important;
  }

  /* Top-level rows should also cover hero image behind menu */
  .slicknav_nav > li,
  .slicknav_nav > li > a,
  .slicknav_nav > li > .slicknav_item {
    background: #0f1b1f !important;
  }

  /*
   * Deterministic mobile overlay layer:
   * when hamburger is open, nav becomes a full overlay above hero imagery.
   */
  body.mobile-nav-open .slicknav_nav {
    position: fixed !important;
    top: 86px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-height: none !important;
    height: calc(100vh - 86px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    z-index: 2147483000 !important;
    display: block !important;
    background: #0f1b1f !important;
  }

  body.mobile-nav-open .slicknav_nav > li,
  body.mobile-nav-open .slicknav_nav > li > a,
  body.mobile-nav-open .slicknav_nav > li > .slicknav_item,
  body.mobile-nav-open .slicknav_nav .dropdown-menu,
  body.mobile-nav-open .slicknav_nav .dropdown-menu li,
  body.mobile-nav-open .slicknav_nav .dropdown-menu li a {
    background: #0f1b1f !important;
    opacity: 1 !important;
  }

  /*
   * Direct SlickNav-state fallback (independent of JS body class):
   * if the button is open, force full overlay menu above hero image.
   */
  #slicknav-mobile .slicknav_menu .slicknav_btn.slicknav_open ~ .slicknav_nav {
    position: fixed !important;
    top: 86px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100vh - 86px) !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #0f1b1f !important;
    z-index: 2147483001 !important;
  }

  #slicknav-mobile .slicknav_menu .slicknav_btn.slicknav_collapsed ~ .slicknav_nav {
    display: none !important;
  }

  .slicknav_nav li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .slicknav_nav li:last-child {
    border-bottom: 0;
  }

  .slicknav_nav .dropdown-menu li {
    width: 100% !important;
  }

  /* Keep non-dropdown items visually equal to dropdown rows */
  .slicknav_nav li:not(.slicknav_parent) > a {
    padding-right: 16px !important;
  }

  .slicknav_nav .slicknav-reserve-item {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 0 !important;
    margin-top: 4px;
    padding: 10px 16px !important;
    background: #0f1b1f !important;
  }

  .slicknav_nav .mobile-reserve-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 48px !important;
    background: #69a316 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
  }

  .slicknav_nav .mobile-reserve-link:hover {
    background: #87c332 !important;
    color: #ffffff !important;
  }

  .banner {
    margin-top: 0 !important;
    padding-top: 72px !important;
    padding-bottom: 48px !important;
    position: relative;
    z-index: 2;
  }

  .feature {
    position: relative;
    z-index: 1;
  }

  .banner .banner-inner {
    width: 100% !important;
    padding-top: 24px !important;
    padding-bottom: 16px !important;
  }

  .banner .section-title h1 {
    font-size: 46px !important;
    line-height: 1.15 !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  .banner .section-title h6,
  .banner .section-body p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .spin-container {
    margin: 0 !important;
    display: inline-block;
    white-space: nowrap;
  }

  .spin-container .spin {
    animation: none !important;
    display: inline;
  }

  .banner-btn li a {
    width: auto !important;
    min-width: 170px;
  }

  /*
   * Homepage: template uses .feature-inner { margin-top: -150px }, which pulls the
   * white feature card over the hero CTAs on small screens. Use a gentler overlap
   * and reserve space so "Contact Us" stays visible above the card.
   */
  .feature-inner {
    margin-top: -48px !important;
  }

  .banner .section-body {
    padding-bottom: 1.75rem !important;
  }

  .banner-btn {
    position: relative;
    z-index: 2;
    margin-bottom: 0.35rem;
  }

  .about {
    margin-top: -48px !important;
  }

  /* Keep mobile panels inside viewport */
  .slicknav_nav,
  .banner,
  .banner .container,
  .banner .banner-inner {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .banner .section-title h1 {
    font-size: 38px !important;
  }

  .feature-inner {
    margin-top: -20px !important;
  }

  .about {
    margin-top: -32px !important;
  }
}

@media (max-width: 375px) {
  .feature-inner {
    margin-top: 0 !important;
  }
}

/*
 * Global mobile/tablet nav overlay safety (same breakpoint that enables slicknav).
 * Prevent hero/slider layers from covering hamburger panel/content.
 */
@media (max-width: 1180px) {
  header,
  .header-nav-menu,
  .header-nav-menu-inner,
  #slicknav-mobile,
  .slicknav_menu {
    position: relative !important;
    z-index: 2147482000 !important;
    overflow: visible !important;
  }

  #slicknav-mobile .slicknav_btn {
    position: fixed !important;
    z-index: 2147483000 !important;
  }

  #slicknav-mobile .slicknav_nav {
    position: fixed !important;
    top: 86px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100vh - 86px) !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: none !important;
    background: #0f1b1f !important;
    z-index: 2147482999 !important;
  }

  #slicknav-mobile .slicknav_menu .slicknav_btn.slicknav_open ~ .slicknav_nav {
    display: block !important;
  }

  .home-hero,
  .home-hero .home-banner-slider,
  .home-hero .hero-slide,
  .home-hero .slick-list,
  .home-hero .slick-track,
  .banner {
    position: relative !important;
    z-index: 1 !important;
  }
}

/* Why-us badge logo: keep small (avoid huge white circle over photo) */
.why-us .ev-logo {
  max-width: 96px;
  max-height: 96px;
  padding: 6px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-us .ev-logo img {
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  object-fit: contain;
}

/* Partner / “YADI Global Strength” slider: images fill slide width (avoid narrow vertical strips) */
.partner-slider {
  width: 100%;
}

.partner-slider .slick-list {
  margin: 0 -6px;
}

.partner-slider .slick-slide {
  height: auto;
}

.partner-slider .slick-slide > .slide {
  width: 100%;
  display: block;
  padding: 0 6px;
  box-sizing: border-box;
}

.partner-slider .slick-slide img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  display: block;
}

@media (max-width: 600px) {
  .partner-slider .slick-slide img {
    height: 200px;
  }
}

.nav-item.nav-disabled .nav-link {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.vehicle-wall-card {
  position: relative;
  border: 1px solid #dfe8d8;
  background: #fff;
}

.vehicle-wall-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.vehicle-wall-label {
  position: absolute;
  left: 12px;
  bottom: 70px;
  background: rgba(5, 39, 48, 0.85);
  color: #fff;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
}

.vehicle-wall-slider .slide {
  padding: 0 10px;
}

.vehicle-wall-slider .slick-list {
  margin: 0 -10px;
}

.vehicle-wall-info {
  border-top: 1px solid #eff3ea;
}

/* Home hero: rotating YADI vehicle backgrounds */
.home-hero {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
}

.home-hero .home-banner-slider,
.home-hero .home-banner-slider .hero-slide {
  min-height: 630px;
}

.home-hero .hero-slide {
  position: relative;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex !important;
  align-items: center;
}

.home-hero .hero-slide:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20, 25, 30, 0.48) 0%, rgba(20, 25, 30, 0.2) 38%, rgba(20, 25, 30, 0.34) 100%);
}

.home-hero .hero-slide > .container {
  position: relative;
  z-index: 2;
}

.home-hero .banner-inner {
  padding-top: 140px !important;
}

.home-hero .home-banner-slider .slick-dots {
  bottom: 18px;
}

.home-hero .slick-prev,
.home-hero .slick-next {
  z-index: 7;
  width: 42px;
  height: 42px;
  top: 52%;
  visibility: visible !important;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
}

.home-hero .slick-prev {
  left: 18px !important;
  right: auto !important;
}

.home-hero .slick-next {
  right: 18px !important;
  left: auto !important;
}

.home-hero .slick-prev:before,
.home-hero .slick-next:before,
.home-hero .slick-prev:after,
.home-hero .slick-next:after {
  font-size: 24px;
  color: #fff;
  visibility: visible !important;
}

.home-hero .slick-prev:before,
.home-hero .slick-prev:after {
  content: "\f053" !important;
  font-family: "FontAwesome" !important;
}

.home-hero .slick-next:before,
.home-hero .slick-next:after {
  content: "\f054" !important;
  font-family: "FontAwesome" !important;
}

.reserve-payment-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.reserve-payment-methods > p {
  grid-column: 1 / -1;
  margin-bottom: 2px !important;
}

.reserve-payment-option {
  border: 1px solid #e9efe5;
  border-radius: 10px;
  padding: 14px 12px;
  padding-right: 36px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.reserve-payment-option input {
  accent-color: #fff;
  width: 18px;
  height: 18px;
  min-width: 18px;
}

.reserve-payment-option:has(input:checked) {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
  border-color: #ffffff;
}

.reserve-payment-option:has(input:checked)::after {
  content: "\f00c";
  font-family: "FontAwesome";
  font-size: 12px;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #1d2b2b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.reserve-payment-telebirr { background: linear-gradient(135deg, #1f9aff, #1d6fd1); }
.reserve-payment-chapa { background: linear-gradient(135deg, #2bb673, #07a36f); }
.reserve-payment-stripe { background: linear-gradient(135deg, #6f56ff, #5950d7); }
.reserve-payment-cash { background: linear-gradient(135deg, #9aa3b2, #6f7784); }

@media (max-width: 767px) {
  .home-hero .banner-inner {
    padding-top: 110px !important;
  }

  .reserve-payment-methods {
    grid-template-columns: 1fr;
  }
}

.header-top {
  background: rgba(66, 76, 72, 0.9) !important;
  backdrop-filter: blur(2px);
}

.header-nav-menu {
  background: rgba(11, 20, 21, 0.9) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.header-nav-menu-inner {
  padding-bottom: 14px !important;
}

.reserve-total-wrap {
  border: 1px solid #dce8d1;
}

.product-list .product-info h5 {
  position: static !important;
  display: block !important;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 8px !important;
}

.product-list .product-info p {
  position: static !important;
  clear: both;
}

.product-list .product-info .badge,
.product-list .product-info .label,
.product-list .product-info [class*="label-"],
.product-list .product-info [class*="badge-"] {
  display: none !important;
}