/**
 * navbar.css
 * Styles ONLY for the new Search, Wishlist, Cart, and Profile elements.
 * The main header layout is controlled by the theme CSS.
 */

/* Disable iOS Safari double-tap zoom on body and interactive elements */
html, body, a, button, .menu-trigger {
  touch-action: manipulation;
}

/* Widen the navbar's container so the logo lines up with the left edge of the
   page's content (e.g. the filter sidebar on cycle-rent-mumbai) and the
   right-side actions (Login/Cart/Wishlist) line up with the right edge of the
   content. Bootstrap's .container caps at 1170-1300px depending on viewport
   while listing pages use a 1320px content max-width — that mismatch is what
   pushes the navbar inward. We also zero out the default container/row/col
   gutters so the nav's outer edges sit flush at the 1320px boundary instead
   of being inset by ~12-27px of padding + logo margin. */
@media (min-width: 1025px) {
  .header-area .navbar-container {
    max-width: 1285px;
    padding-left: 0;
    padding-right: 0;
  }
  .header-area .navbar-container > .row {
    margin-left: 0;
    margin-right: 0;
  }
  .header-area .navbar-container > .row > .col-12 {
    padding-left: 0;
    padding-right: 0;
  }
  /* Default logo margin-left is 15px; bring it to 0 so the logo sits exactly
     at the page's content edge. Pages that need inset can add their own. */
  .header-area .navbar-container .main-nav .logo {
    margin-left: 0;
  }
}

/* Styles for the main navigation layout to support added elements */
@media (min-width: 1025px) {
  .header-area .main-nav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .header-area .nav {
    flex-grow: 1;
    justify-content: center; /* Push links to right */
    display: flex !important;
    flex-wrap: nowrap; /* Bootstrap .nav defaults to wrap — keeps all menu items on one row when Contact Us is present */
    float: none !important; /* Override theme float */
    margin-left: auto;
    align-items: center;
  }

  .header-area .main-nav .nav li a {
    white-space: nowrap; /* Don't allow a single menu label to break across lines */
  }
}

/* Tighten per-item padding once we're below ~1300px so 5 menu items + search + icons still fit before the mobile hamburger breakpoint kicks in. */
@media (min-width: 1025px) and (max-width: 1300px) {
  .header-area .main-nav .nav li {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .search-wrapper {
    width: 200px;
  }
}

/* Right Side Actions Container */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 20px;
  font-family: "DM Sans", sans-serif;
}

/* Search Bar */
.search-wrapper {
  position: relative;
  background-color: #e6f8ff;
  border: 1px solid transparent;
  border-radius: 50px;
  padding: 6px 15px;
  display: flex;
  align-items: center;
  width: 260px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.search-wrapper.is-active,
.search-wrapper:focus-within {
  background-color: #ffffff;
  border-color: #00a5f1;
}

.search-wrapper.is-active .search-icon,
.search-wrapper:focus-within .search-icon {
  color: #00a5f1;
}

.header-area .main-nav .search-wrapper input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  /* iOS Safari zooms the page when focusing inputs under 16px. Keep visual size
     small via font-size:16px on the input + smaller surrounding chrome. */
  font-size: 16px;
  color: #303030;
  width: 100%;
  font-family: "Poppins", sans-serif;
  cursor: text;
}

.search-wrapper input::placeholder {
  color: #b0bfca;
}

.search-wrapper:hover {
  background-color: #d0e8f7;
  cursor: text;
}

.search-wrapper:hover .search-icon {
  color: #00a5f1;
}

.search-wrapper .search-icon {
  color: #303030;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* Icons (Heart, Bag) */
.action-icon-btn {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #e6f8ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #303030;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  padding: 0;
}

.action-icon-btn:hover {
  background-color: #d0e8f7;
  color: #00a5f1;
}

/* Cart Icon Wrapper */
.cart-icon-wrapper {
  position: relative;
  display: inline-flex;
}

.cart-count-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #00a5f1;
  color: #ffffff;
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 5;
}

/* Profile Avatar */
.profile-avatar-btn {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #00a5f1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  cursor: pointer;
  border: none;
  padding: 0;
}

/* Login Button */
.login-btn {
  position: relative;
  overflow: hidden;
  background-color: #e6f8ff;
  color: #303030;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-btn:hover {
  background-color: #d0e8f7;
  color: #00a5f1;
}

/* Utility */
.hidden {
  display: none !important;
}

/* Mobile + iPad (≤1023px) hamburger drop-down.
   The menu is rendered inline (not absolute) so it pushes the page
   content below it down as it expands — matching the "drops from above
   and shoves everything down" behavior. We animate `max-height` instead
   of toggling `display`, so we get a real CSS transition that stays in
   sync with the dark `.mobile-nav-header-overlay` (350ms, same easing).
   `display: block !important` overrides templatemo's `display: none` /
   `display: flex !important` rules; visibility is controlled via
   max-height + the `.menu-trigger.active` class, not slideToggle. */
@media (max-width: 1024px) {
  .header-area .main-nav .menu-trigger {
    display: block !important;
  }

  .header-area .main-nav .nav {
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    max-height: 0;
    opacity: 0 !important;
    -webkit-transform: translateY(-12px) !important;
    transform: translateY(-12px) !important;
    -webkit-transition: max-height 0.48s cubic-bezier(0.4, 0, 0.2, 1), 
                        opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1), 
                        -webkit-transform 0.42s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: max-height 0.48s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.42s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* Reveal when the hamburger is active. We use the .nav-open class toggled on .header-area by custom.js. */
  .header-area.nav-open .main-nav .nav {
    max-height: 360px; /* Fits 6-7 menu items exactly without empty-height transition lag */
    opacity: 1 !important;
    -webkit-transform: translateY(0) !important;
    transform: translateY(0) !important;
    -webkit-transition: max-height 0.48s cubic-bezier(0.4, 0, 0.2, 1), 
                        opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1), 
                        -webkit-transform 0.42s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: max-height 0.48s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.42s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .header-area .main-nav .nav li {
    width: 100%;
    background: #f7f7f7 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0 !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
    text-align: center !important;
    display: block;
  }

  /* Cart / Profile / Login move into the dropdown at this range */
  .mobile-nav-item {
    display: block !important;
  }

  .mobile-nav-item.hidden {
    display: none !important;
  }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .header-actions {
    display: none; /* Hide on mobile + iPad — actions move to hamburger menu */
  }

  .mobile-nav-item {
    display: block !important;
    /* border-top: 1px solid #f0f0f0; */
  }

  .mobile-nav-item.hidden {
    display: none !important;
  }

  .mobile-search-item {
    padding: 15px 20px !important;
  }

  .mobile-search-item .search-wrapper {
    width: 100% !important;
    background-color: #f4f7f9 !important;
  }

  .header-area .nav li.mobile-nav-item a {
    /* padding: 12px 20px !important; */
    color: #303030 !important;
    font-weight: 600 !important;
    background: none !important;
  }

  .header-area .nav li.mobile-nav-item a:hover {
    color: #00a5f1 !important;
  }

  /* Dark sheet over the header bar while the menu is open — the theme's own
     overlay (#303030, z-index 98, 0.35s scaleY sweep from the top), just
     re-enabled on mobile. It deliberately covers the logo: the bar reads as a
     solid dark strip with only the close icon on it. */
  .mobile-nav-header-overlay {
    display: block !important;
  }

  /* Close icon sits on the dark overlay, so its strokes are white. The hamburger
     (menu shut, white header) stays #303030 via the base rules above. */
  .header-area .main-nav .menu-trigger.active span {
    background-color: transparent !important;
  }
  .header-area .main-nav .menu-trigger.active span:before,
  .header-area .main-nav .menu-trigger.active span:after {
    background-color: #ffffff !important;
    /* Longer strokes than the 25px button box. The theme's cross is built from
       the two hamburger bars rotated about a 33% origin, which leaves a cramped
       ~18px X; re-centering both bars on the span (left 50% + translate) lets us
       size them independently of the button width. Nothing clips them — the
       trigger is data-ripple="off", so it is exempt from the overflow:hidden
       that common.css puts on ripple host buttons. */
    width: 34px !important;
    left: 50% !important;
    top: 0 !important;
    -webkit-transform-origin: center !important;
    transform-origin: center !important;
  }

  .header-area .main-nav .menu-trigger.active span:before {
    -webkit-transform: translate(-50%, 0) rotate(45deg) !important;
    transform: translate(-50%, 0) rotate(45deg) !important;
  }

  .header-area .main-nav .menu-trigger.active span:after {
    -webkit-transform: translate(-50%, 0) rotate(-45deg) !important;
    transform: translate(-50%, 0) rotate(-45deg) !important;
  }

  /* Tap feedback rides on the bar span that is already inside the button.
     button-ripple.js is opted out here (data-ripple="off" in includes/navbar.php):
     its injected <span class="tt-ripple"> is a plain span, so the hamburger rules
     above painted it as a dark 46px box and gave it its own :before/:after bars —
     that was the second cross. Opacity on the span dims its pseudo-element bars
     with it, so the whole icon acknowledges the press as one piece. */
  .header-area .main-nav .menu-trigger:active span {
    opacity: 0.45;
    transition: opacity 90ms ease-out;
  }
}

@media (min-width: 1025px) {
  .mobile-nav-item {
    display: none !important;
  }

  .mobile-nav-header-overlay {
    display: none !important;
  }
}

/* Prevent desktop header flash on pages that explicitly use mobile cart navbar */
@media (max-width: 767px) {
  body.mobile-cart-nav-page .header-area {
    display: none !important;
  }
}

/**
 * ==========================================
 * GLOBAL MODAL SCROLLBAR FIX
 * Prevents layout shift when modals open
 * Applies to all Bootstrap modals globally
 * ==========================================
 */

/* Fix scrollbar gap for ALL modals - override Bootstrap default padding-right */
body.modal-open {
  padding-right: 0 !important;
  overflow-y: scroll !important;
}

/* Alternative: If using Bootstrap 5.x with scrollbar compensation, use this */
html body.modal-open {
  overflow: hidden;
  padding-right: 0 !important;
}

/* Ensure modal backdrop and modals still work properly */
.modal {
  overflow-y: auto;
}

.modal-dialog {
  position: relative;
}

/* Fix for mobile modals */
@media (max-width: 767px) {
  body.modal-open {
    padding-right: 0 !important;
  }
}