/* Search Bar Positioning CSS */
/* Proper, non-overlapping header layout */

/* ===== Main navbar layout (desktop) ===== */
.navbar-part1 .navbar-inner{
  display:grid;
  grid-template-columns: minmax(160px,auto) minmax(0,1fr) minmax(140px,auto); /* logo | search | actions */
  align-items:center;
  column-gap:24px;
  padding:10px 0;
  position:relative;
}

.navbar-part1 .left-side{ flex-shrink:0; }
.navbar-part1 .left-side .logo img{
  width:auto; max-width:260px; height:70px; object-fit:contain;
}

/* ===== Search (desktop) — NOT absolute ===== */
.navbar-part1 .search-part{
  position:static !important;           /* no absolute on desktop */
  left:auto !important; transform:none !important;
  justify-self:center;
  width:100%;
  max-width:520px;                       /* cap for wide screens */
  min-width:0;                           /* allow shrink inside grid */
}

.navbar-part1 .search-input-inline{ position:relative; width:100%; min-width:0; }

.navbar-part1 .search-input-inline-field{
  width:100% !important;
  padding:12px 50px 12px 15px !important;
  border-radius:25px !important;
  border:2px solid #e0e0e0 !important;
  font-size:14px !important;
  outline:none;
  transition:border-color .3s ease;
}
.navbar-part1 .search-input-inline-field:focus{ border-color:#FF8C00 !important; }

.navbar-part1 .search-icon{
  position:absolute !important;
  right:5px !important; top:50% !important; transform:translateY(-50%) !important;
  background:#FF8C00 !important; color:#fff !important; border-radius:50% !important;
  width:35px !important; height:35px !important; display:flex !important; align-items:center !important; justify-content:center !important;
  cursor:pointer !important; border:none !important;
}
/* override any conflicting utility */
.navbar-part1 .search-icon.action-item.icon{
  position:absolute !important; right:5px !important; top:50% !important; transform:translateY(-50%) !important; z-index:10 !important;
}

/* ===== Actions (right) ===== */
.navbar-part1 .user-actions{
  display:flex; align-items:center; gap:15px; margin-left:auto;
}

/* ===== Small desktop squeeze (prevents collisions 992–1200px) ===== */
@media (min-width:992px) and (max-width:1200px){
  .navbar-part1 .left-side .logo img{ max-width:200px !important; height:60px !important; }
  .navbar-part1 .search-part{ max-width:clamp(320px,48vw,520px) !important; }
  .navbar-part1 .user-actions{ gap:10px !important; }
}

/* a bit tighter just under 1100px */
@media (min-width:980px) and (max-width:1099px){
  .navbar-part1 .left-side .logo img{ max-width:170px !important; }
  .navbar-part1 .search-part{ max-width:clamp(280px,44vw,480px) !important; }
}

/* ===== Mobile responsiveness ===== */
@media (max-width:1024px){
  .navbar-part1 .search-part{ max-width:none !important; }
}

@media (max-width:768px){
  .navbar-part1 .navbar-inner{
    display:flex !important; flex-direction:column !important;
    align-items:flex-start !important; gap:10px !important; padding:8px 12px !important;
  }

  /* row 1: logo */
  .navbar-part1 .left-side{
    order:1 !important; width:100% !important;
    display:flex !important; align-items:center !important; justify-content:flex-start !important;
  }

  /* row 2: actions */
  .mobile-nav-actions{
    order:2 !important; width:100% !important;
    display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:14px !important;
  }
  .navbar-part1 .user-actions{ gap:14px !important; }

  /* row 3: search */
  .navbar-part1 .search-part{
    order:3 !important;
    position:relative !important; left:auto !important; transform:none !important;
    width:100% !important; max-width:480px !important; margin:0 0 4px 0 !important;
  }
  .navbar-part1 .search-input-inline{ width:100% !important; }
  .navbar-part1 .search-input-inline-field{ padding:10px 40px 10px 12px !important; font-size:13px !important; }
  .navbar-part1 .search-part .search-icon{ width:30px !important; height:30px !important; right:6px !important; }
}

@media (max-width:480px){
  .navbar-part1 .left-side .logo img{ max-width:260px !important; height:60px !important; }
  .navbar-part1 .search-part{ max-width:380px !important; }
}

/* ===== Android Chrome “Desktop site” handling ===== */
html.force-desktop .navbar-part1 .navbar-inner{
  display:grid !important;
  grid-template-columns:minmax(160px,auto) minmax(0,1fr) auto !important;
}
html.force-desktop .navbar-part1 .search-part{
  max-width:clamp(320px,50vw,520px) !important; min-width:0 !important;
  
  /* === Desktop (>=769px): explicit placement + shrink-safe columns === */
@media (min-width: 769px){
  /* Put items in the three grid columns */
  .navbar-part1 .left-side{ grid-column:1; }
  .navbar-part1 .search-part{ grid-column:2; justify-self:center; }
  .navbar-part1 .mobile-nav-actions{ grid-column:3; justify-self:end; } /* holds user-actions on desktop */

  /* Let every column actually shrink instead of pushing/overlapping */
  .navbar-part1 .left-side,
  .navbar-part1 .user-actions,
  .navbar-part1 .mobile-nav-actions,
  .navbar-part1 .search-part,
  .navbar-part1 .search-input-inline{
    min-width: 0 !important;
  }

  /* Slightly smaller default gap so tight screens don’t collide */
  .navbar-part1 .navbar-inner{ column-gap: 20px !important; }
}

/* === 1280–1200px and smaller: progressively trim widths to keep space === */
@media (max-width: 1280px){
  .navbar-part1 .left-side .logo img{
    max-width: 220px !important;
    height: 62px !important;
  }
  .navbar-part1 .search-part{
    max-width: clamp(300px, 44vw, 500px) !important;
  }
  .navbar-part1 .navbar-inner{ column-gap: 18px !important; }
}

@media (max-width: 1152px){ /* common 13–14″ widths */
  .navbar-part1 .left-side .logo img{
    max-width: 190px !important;
    height: 58px !important;
  }
  .navbar-part1 .search-part{
    max-width: clamp(260px, 42vw, 460px) !important;
  }
  .navbar-part1 .navbar-inner{ column-gap: 16px !important; }
}

@media (max-width: 1060px){
  .navbar-part1 .left-side .logo img{
    max-width: 170px !important;
    height: 56px !important;
  }
  .navbar-part1 .search-part{
    max-width: clamp(240px, 40vw, 420px) !important;
  }
  .navbar-part1 .navbar-inner{ column-gap: 14px !important; }
}

/* If Android Chrome forces “Desktop site”, keep the same safeguards */
html.force-desktop .navbar-part1 .left-side,
html.force-desktop .navbar-part1 .mobile-nav-actions,
html.force-desktop .navbar-part1 .user-actions,
html.force-desktop .navbar-part1 .search-part,
html.force-desktop .navbar-part1 .search-input-inline{
  min-width: 0 !important;
}
html.force-desktop .navbar-part1 .navbar-inner{
  column-gap: 18px !important;
}

}