/* radar/src/css/search-inline.css
 *
 * Extracted 2026-04-18 from the second <style> block in
 * frontend/search.php (lines 450-676). Rules kept verbatim so visual
 * output is unchanged; cleanup / de-dupe / BEM-ification is a
 * separate follow-up.
 */
.selected {
    filter: grayscale(1);
    border: 2px solid;
}
.container_slider {
    /* height: 100vh; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.range-slider {
    position: relative;
    width: 300px;
    height: 30px;
}

.range-slider_input {
    width: 100%;
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    opacity: 0;
    margin: 0;
}

.range-slider_input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0;
}

.range-slider_input::-moz-range-thumb {
    width: 30px;
    height: 30px;
    cursor: pointer;
    border-radius: 50% !important;
    opacity: 0;
}

.range-slider_thumb {
    width: 40px;
    height: 40px;
    border: 2px solid #303030;
    border-radius: 50% !important;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-family: 'jost';
    font-size: medium;
    color: #303030;
    z-index: 2;
}

.range-slider_line {
    height: 0.5vmin;
    width: 100%;
    background-color: #e1e1e1;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    position: absolute;
    z-index: 1;
}

.range-slider_line-fill {
    position: absolute;
    height: 0.5vmin;
    width: 0;
    background-color: #303030;
}

.filter_box {
    padding: 5px;
    border: 1px solid lightgrey;
    cursor: pointer;
    transition: 0.5s easy background;
}

.jost {
    font-family: 'jost';
}

.professional_heading {
    font-family: 'jost';
    font-weight: 500;
    font-size: 20px;
    color: #333333
}

.big_heading {
    text-align: center;
    font-size: 50px;
}

.checked_filter {
    background: grey;
    color: white;
}

input:focus {
    outline: none;
    border: none;
}

option {
    border-radius: 0px;
    height: 50px
}

.searchbox_div {
    display: flex;
    flex-flow: row;
    /* height:70px; */
    background: white;
    border-radius: 30px !important;
    align-items: center;
}

.searchbox_div div {
    padding: 5px
}

.searchbox_div select {
    font-family: 'Jost';
    color: white;
    font-weight 900px;
    font-size: 18px;
}

.searchbox_div input {
    height: 30px;
    width: 100%;
    background: transparent;
    border: 0px;
    font-family: 'Jost'
}

.darkbg {
    background: black;
}

.search {
    width: 100%;
}



/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #2196F3;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px !important;
}

.slider.round:before {
    border-radius: 50% !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Smart search (2026-04-19) — wide-box free-text query UI on top of
   /semantic_search/. Lives above the classic filter panel; `body.classic-
   filters-collapsed` hides the filter column and expands results to full
   width until the user toggles it back.
   ──────────────────────────────────────────────────────────────────────── */
.smart-greeting {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 26px;
    color: #1a1a1a;
    margin: 0 0 4px;
    line-height: 1.25;
}
.smart-greeting-sub {
    font-family: jost;
    font-weight: 300;
    color: #666;
    font-size: 14px;
    margin: 0;
}
.smart-greeting-sub em { color: #10bdb5; font-style: normal; }

.smart-input-box {
    flex: 1 1 auto;
    height: 56px;
    font-size: 17px;
    padding: 0 18px;
    border: 2px solid #10bdb5;
    border-radius: 8px !important;
    font-family: jost;
    outline: none;
    background: #fff;
    color: #222;
    transition: box-shadow 0.15s ease;
}
.smart-input-box:focus {
    box-shadow: 0 0 0 4px rgba(16, 189, 181, 0.15);
}

.smart-submit-btn {
    height: 56px;
    min-width: 120px;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600;
    font-size: 16px;
    border-radius: 8px !important;
    border: 0;
}

.smart-mode-bar {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    font-family: jost;
    font-size: 13px;
    color: #444;
}
.smart-mode-bar label { cursor: pointer; }
.smart-mode-bar input[type="radio"] { margin-right: 4px; }
.smart-link-btn {
    background: transparent; border: 0; color: #0d6efd;
    font-family: jost; font-size: 13px; padding: 0; cursor: pointer;
}
.smart-link-btn:hover { text-decoration: underline; }

.smart-debug-strip {
    text-align: center; font-size: 11px; color: #999;
    font-family: jost; padding: 6px 0 10px; letter-spacing: 0.02em;
}

.smart-result { max-width: 900px; margin-left: auto; margin-right: auto; }
.smart-logo { width: 65px !important; height: 65px !important; }
.smart-sim-badge {
    display: inline-block;
    background: rgba(16, 189, 181, 0.12);
    color: #10bdb5;
    font-family: jost;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
}
.smart-product-tag {
    display: inline-block; font-family: jost; font-size: 11px; color: #555;
    background: #f4f4f4; padding: 3px 10px; border-radius: 12px; margin: 2px;
}
.smart-profile-link {
    font-family: jost; font-size: 13px; color: #10bdb5; text-decoration: none;
}
.smart-profile-link:hover { text-decoration: underline; color: #0a8e88; }

.smart-filter-hint {
    max-width: 760px; margin: 16px auto; padding: 18px 20px;
    background: #fafcfc; border: 1px solid #d8ecea; border-radius: 10px;
    text-align: center;
}
.smart-filter-hint.compact { padding: 10px 14px; margin: 8px auto; font-size: 13px; }
.smart-filter-hint ul { padding: 0; margin: 6px 0; list-style: none; }
.smart-filter-hint li { margin: 3px 0; color: #555; }
.smart-apply-btn { font-family: jost !important; }

/* Active filters strip — sits under the search box. Shows EVERY filter
   in force (semantic + classic) so the user always knows what's applied. */
.smart-chip-bar {
    max-width: 900px; margin: 8px auto 4px; padding: 6px 14px 4px;
    text-align: center; font-family: jost; font-size: 13px;
    line-height: 2.0;
}
.smart-chip-bar .smart-chip-label {
    color: #555; margin-right: 6px; font-weight: 500;
}
.smart-chip-bar .smart-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: #f4f4f4; color: #333;
    border: 1px solid #d0d0d0;
    border-radius: 16px; padding: 3px 10px; margin: 2px;
    font-family: jost; font-size: 12px; cursor: pointer; line-height: 1.3;
}
.smart-chip-bar .smart-chip:hover { background: #e8e8e8; }
.smart-chip-bar .smart-chip-tag {
    color: #888; font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.04em;
}
.smart-chip-bar .smart-chip-x {
    font-size: 15px; line-height: 1; color: #999; font-weight: 700;
    margin-left: 2px;
}
/* Semantic chip — distinct teal so user can tell intent vs filter. */
.smart-chip-bar .smart-chip-sem {
    background: rgba(16, 189, 181, 0.10); color: #0a8e88;
    border-color: rgba(16, 189, 181, 0.35);
}
.smart-chip-bar .smart-chip-sem:hover { background: rgba(16, 189, 181, 0.18); }
.smart-chip-bar .smart-chip-sem .smart-chip-tag,
.smart-chip-bar .smart-chip-sem .smart-chip-x { color: #0a8e88; }
/* Clear-all — red, separated. */
.smart-chip-bar .smart-chip-clear {
    background: #fbecec; color: #a23535; border-color: #e7c0c0;
    margin-left: 8px;
}
.smart-chip-bar .smart-chip-clear:hover { background: #f5d6d6; }
.smart-chip-bar .smart-chip-clear .smart-chip-x { color: #a23535; }

/* Collapse the classic filter column on pages where the smart box is active. */
body.classic-filters-collapsed #filteration_panel_company { display: none !important; }
body.classic-filters-collapsed .row > .col-sm-3 { flex: 0 0 0; max-width: 0; padding: 0; overflow: hidden; }
body.classic-filters-collapsed .row > .col-sm-9 { flex: 0 0 100%; max-width: 100%; }

/* ── Skeleton loader (YouTube-style) for search results — theme-agnostic greys,
      shown while results load instead of the old "Working Now..." text. ── */
.rsk-wrap { display: flex; flex-direction: column; gap: 14px; padding: 6px 0; }
.rsk-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px;
            border: 1px solid rgba(128,128,128,0.16); border-radius: 0; }
.rsk-logo { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 6px; }
.rsk-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.rsk-line { height: 12px; border-radius: 4px; }
.rsk-line.w-90 { width: 90%; } .rsk-line.w-80 { width: 80%; }
.rsk-line.w-60 { width: 60%; } .rsk-line.w-40 { width: 40%; }
.rsk-chips { display: flex; gap: 8px; margin: 2px 0; }
.rsk-chip { width: 72px; height: 20px; border-radius: 5px; }
.rsk-sh { position: relative; overflow: hidden; background: rgba(130,130,130,0.16); }
.rsk-sh::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(190,190,190,0.30), transparent);
  animation: rsk-shimmer 1.25s ease-in-out infinite; }
@keyframes rsk-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .rsk-sh::after { animation: none; } }

/* ============================================================================
 * MOBILE RESPONSIVE  (added 2026-06-03)
 * Scoped <=767.98px so the desktop layout is byte-for-byte unchanged.
 * Pairs with src/js/core/mobile-ui.js (hamburger nav + filter drawer).
 * ========================================================================== */
@media (max-width: 767.98px) {

  /* ---- Kill horizontal scroll globally ---- */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* ---- NAV: brand + flexible smart-search + hamburger only ---- */
  /* The right-hand utility/auth cluster (Shortlist / Integrations / Dashboard
     / Sign In) is surfaced inside the hamburger menu instead. */
  nav.fixed.top-0 > div { padding-left: 12px; padding-right: 12px; gap: 8px; }
  nav.fixed.top-0 .flex.items-center.gap-2.shrink-0 { display: none !important; }
  /* The middle smart-search wrapper: let it flex and never overflow. */
  nav.fixed.top-0 .flex-1.min-w-0.flex.items-center.justify-center { margin-left: 4px; margin-right: 4px; }
  /* Trending ticker is noise on a phone. */
  #trending_ticker { display: none !important; }
  /* Smart-search box: fill available width, do not balloon past the viewport. */
  #nav_smart_box { width: 100% !important; max-width: 100% !important; }
  #nav_smart_box.nss-open,
  #nav_smart_box:focus-within { width: 100% !important; max-width: 100% !important; }
  /* On low/narrow viewports the Search button + mode-select crowd the input
     (the button was eating the whole field), so hide them and submit via the
     keyboard "search"/Enter key (enterkeyhint=search + a keydown handler on
     #smart_query_box) — same Enter-to-search UX as the people search. The full
     button + mode controls return at >=768px where there's room. */
  #nav_smart_box .nss-trailing,
  #nav_smart_box.nss-open .nss-trailing,
  #nav_smart_box:focus-within .nss-trailing { display: none !important; max-width: 0 !important; }
  #nav_smart_box #smart_query_box { padding-right: 10px; }
  /* Keep the brand from shrinking to nothing. */
  nav.fixed.top-0 a.shrink-0 { flex: 0 0 auto; }

  /* ---- MAIN: single column. The aside is drawerized (position:fixed) by
       mobile-ui.js, so the content section just fills the row. ---- */
  main.flex { display: block !important; padding-top: 60px; }
  main.flex > section { width: 100% !important; max-width: 100% !important; padding-left: 0; padding-right: 0; }

  /* ---- Smart-search applied-filter band: gentle side padding ---- */
  #radar_smart_search { padding-left: 12px; padding-right: 12px; }
  #smart_chip_bar { margin-left: 0; margin-right: 0; }

  /* ---- Results toolbar: wrap, allow horizontal scroll of control row only
       (so the segmented buttons never clip), comfortable spacing. ---- */
  .flex.flex-col.md\:flex-row.md\:items-center.justify-between.sticky.top-\[60px\] { padding-left: 14px; padding-right: 14px; }
  #view-mode-group .view-mode-btn { min-width: 38px; min-height: 38px; }

  /* ---- Results container: force single column regardless of view mode ---- */
  #company_filter_search_results.grid-view { grid-template-columns: 1fr !important; }
  #company_filter_search_results { padding-left: 12px !important; padding-right: 12px !important; }
  #company_filter_search_results .result_boxes_companies { max-width: 100% !important; }

  /* Table-view card reflow (logo column + full-width name/description + action
     icons on their own row) and the single-scroll-row results toolbar (#4) now
     live in the inline <style> at the END of search.php. They MUST sit after
     the desktop table-view rules (which carry !important) to win on source
     order, so they can't live in this earlier-loaded sheet. See search.php
     "MOBILE (<=767.98px) — results toolbar + result cards". (Updated 2026-06-03.) */

  /* ---- Modals / popovers / floating UI fit the viewport ---- */
  .radar-contact-pop { max-width: 92vw !important; }
  #cols-menu-wrap .cols-menu, [id$="-modal"], .radar-modal { max-width: 96vw !important; }

  /* ---- Copilot launcher: nudge clear of the FAB / bulk bar ---- */
  #radar_copilot_launcher, .radar-copilot-launcher { bottom: 16px !important; right: 14px !important; }
}