/* ---------- NAV / TABS (unchanged) ---------- */
.navbar.navbar-light.bg-light .nav-tabs { border: none !important; box-shadow: none !important; }
.navbar.navbar-light.bg-light .nav-tabs .nav-link { border: none !important; }

/* Custom input */
.custom-input{
    border:2px solid #ccc;border-radius:25px;padding:.75rem 1.25rem;
    transition:border-color .3s ease, box-shadow .3s ease;
}
.custom-input:focus{ border-color:#007bff; box-shadow:0 0 5px rgba(0,123,255,.5); }

app-categories{ display:inline-block; white-space:nowrap; }

/* Body spacing for fixed navbar */
html,body{ height:100%; margin:0; }
body{ padding-top:80px; display:flex; flex-direction:column; }
.main-content{ flex:1; }

/* categories.component.scss bits */
.nav-tabs{ border:none !important; margin-bottom:0; }
.nav-tabs .nav-item{ border-right:1px solid #000; }
.nav-tabs .nav-item:last-child{ border-right:none; }
.nav-tabs .nav-link{
    color:#003082; background:#fff; font-weight:500; text-transform:uppercase;
    font-size:.85rem; padding:.5rem 2rem; border:none;
    transition:background-color .3s ease, color .3s ease;
}
.nav-tabs .nav-link:hover{ background:rgba(0,0,0,.05); color:#000; }
.nav-tabs .nav-link.active{ background:#003082; color:#fff; }
.nav-tabs .nav-link:focus{ outline:none; box-shadow:none; }

.navbar .nav-link i{ font-size:1.25rem; }
@media (max-width:768px){ .navbar .nav-link i{ font-size:1.1rem; } }

/* Small navbar tweaks */
@media (max-width:767px){ .navbar-brand{ margin-top:10px; } }

/* Horizontal scroll helper (unchanged) */
.scrolling-wrapper{ overflow-x:auto; white-space:nowrap; width:100%; }
.scrolling-wrapper .nav-tabs{ display:inline-flex !important; flex-wrap:nowrap !important; padding-bottom:5px; margin-bottom:0; }
.scrolling-wrapper .nav-tabs .nav-item{ display:inline-block !important; white-space:nowrap !important; float:none !important; }
.scrolling-wrapper .nav-tabs .nav-link{ white-space:nowrap; }

/* Desktop links (unchanged) */
.desktop-links{ margin-right:550px; padding-top:20px; }
@media (max-width:768px){
    .desktop-links{ margin-right:0 !important; padding-top:0 !important; }
}

/* ---------- BRAND (unchanged) ---------- */
.brand-logo{ width:36px; height:36px; object-fit:cover; }
.brand-text{ font-weight:700; color:#003082; font-size:1.5rem; }
@media (max-width:768px){
    .navbar{ padding:.4rem 1rem; }
    .brand-logo{ width:28px; height:28px; }
    .brand-text{ font-size:1.2rem; }
}
@media (max-width:420px){ .brand-text{ display:none; } }

/* =========================================================
   >>> TOOLBAR + LOCATION SEARCH — RESPONSIVE / FIXED ROW <<<
   ========================================================= */

/* Toolbar stays one row (no wrap) on all screens */
.toolbar{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    flex-wrap:nowrap;              /* <-- key: prevent wrap on mobile */
}

/* Keep both wrappers tidy */
.toolbar > .cats-inline,
.toolbar > .search-inline{ display:flex; align-items:center; }

/* Categories chip: auto size */
.cats-inline{ flex:0 0 auto; }

/* Search area: take the remaining width and allow shrinking */
.search-inline{ flex:1 1 auto; min-width:0; }  /* <-- key: lets it shrink instead of wrapping */

/* Make Angular elements play nice in a flex row */
app-categories, app-location-search{ display:inline-flex; align-items:center; vertical-align:middle; }
app-categories, app-location-search, .cats-inline, .search-inline{ margin:0; padding:0; }

/* ---------- Location Search (ls-*) made fluid ---------- */
/* If your component has its own SCSS, these safely override fixed widths */

.ls-wrap{ display:block; } /* container can stretch */
.search-container{
    position:relative;
    display:flex; align-items:center;
    width:100%;                 /* <-- no fixed 520/680px */
    height:44px;
    transition:width .22s ease; /* harmless now that width is 100% */
}
/* Keep 100% width when open */
.ls-wrap.open .search-container{ width:100%; }

/* Collapsed pill */
.search-pill{
    display:inline-flex; align-items:center; gap:.5rem;
    height:44px; line-height:44px; box-sizing:border-box;
    padding:0 .5rem 0 .9rem; margin:0;
    border:1px solid #e5e7eb; border-radius:999px; background:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,.06); font-weight:600; white-space:nowrap;
    cursor:pointer;
}
/* City text truncates instead of pushing refresh offscreen */
.search-pill .city{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:50vw;               /* keeps pill compact on phones */
}

/* Refresh icon button */
.refresh-btn{
    margin-left:.25rem;
    border:1px solid #e5e7eb; background:#fff;
    width:32px; height:32px; border-radius:999px;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.refresh-btn svg{ pointer-events:none; }
.refresh-btn:hover{ background:#f8fafc; }

/* Expanded layer */
.search-expand{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .18s ease; }
.search-expand.open{ opacity:1; pointer-events:auto; }

/* Input fills container */
.search-input{
    height:44px; line-height:44px; box-sizing:border-box;
    width:100%;
    padding:0 3rem 0 1rem;
    border-radius:999px; border:1px solid #e5e7eb; background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
    font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.search-input:focus{ border-color:#60a5fa; box-shadow:0 0 0 4px rgba(96,165,250,.15); outline:none; }

/* Icons & clear */
.icon-right{
    position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
    color:#9ca3af; pointer-events:none;
}
.clear-btn{
    position:absolute; right:2.3rem; top:50%; transform:translateY(-50%);
    border:0; background:transparent; font-size:1.2rem; color:#9ca3af; cursor:pointer;
}

/* Results dropdown */
.results{
    position:absolute; z-index:20; top:calc(100% + 8px); left:0; right:0;
    background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:0 10px 24px rgba(0,0,0,.08);
    max-height:300px; overflow:auto;
}
.result-item{ padding:.7rem .9rem; cursor:pointer; }
.result-item:hover{ background:#f8fafc; }

/* ---------- Small-screen polish ---------- */
@media (max-width:576px){
    .toolbar{ gap:8px; }                  /* tighter space */
    .search-pill, .search-input{ height:40px; line-height:40px; }
    .search-pill .city{ max-width:46vw; } /* a bit narrower on tiny screens */
}