/* ========================================================================== 
   BSIT Global Search
   - Search icon beside Google Translate in top bar
   - Spotlight-style quick search (opens with click or Ctrl/Cmd + Space)
   - Search Details page UI helpers (pagination, per-page, z-index fixes)
   ========================================================================== */

/* Top header (right side) */
.right-side-head .lang{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.right-side-head .lang .bsit-gt-el{
  display:inline-flex;
  align-items:center;
}

/* Force ordering: Search icon BEFORE language selector & translate */
.right-side-head .lang .bsit-nav-search-btn{ order: 0; }
.right-side-head .lang label{ order: 1; }
.right-side-head .lang #languageSelector{ order: 2; }
.right-side-head .lang .bsit-gt-el{ order: 3; }

/* Search icon (no white circle background) */
.bsit-nav-search-btn{
  border:0;
  background:transparent;
  color:#111;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 8px;
  border-radius:10px;
  cursor:pointer;
  line-height:1;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}

.bsit-nav-search-btn i{ font-size:16px; }

.bsit-nav-search-btn:hover{
  background: rgba(0,0,0,.06);
  transform: translateY(-1px);
}

.bsit-nav-search-btn:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(239,180,5,.35);
}

/* --------------------------------------------------------------------------
   Spotlight-style overlay (Mac Spotlight vibe)
   -------------------------------------------------------------------------- */

.bsit-spotlight{
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
}

.bsit-spotlight.is-open{ display:block; }

.bsit-spotlight__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(5px);
}

.bsit-spotlight__panel{
  position: absolute;
  left: 50%;
  top: 18vh;
  transform: translateX(-50%) scale(0.98);
  width: min(720px, calc(100vw - 24px));
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.35);
  overflow: hidden;
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
}

.bsit-spotlight.is-open .bsit-spotlight__panel{
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.bsit-spotlight__form{ margin: 0; }

.bsit-spotlight__row{
  display:flex;
  align-items: stretch;
}

.bsit-spotlight__inputwrap{
  position: relative;
  flex: 1 1 auto;
}

.bsit-spotlight__icon{
  position:absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .55;
}

.bsit-spotlight__input{
  width: 100%;
  height: 56px;
  border: 0;
  outline: none;
  background: transparent;
  padding: 0 16px 0 44px;
  font-size: 18px;
  font-weight: 600;
  color: #111;
}

.bsit-spotlight__input::placeholder{
  color: rgba(0,0,0,.45);
  font-weight: 500;
}

.bsit-spotlight__actions{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  gap: 10px;
  padding-right: 12px;
}

/* Search button (match site: btn-bsit-primary) */
.bsit-spotlight__btn{
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
}


.bsit-spotlight__close{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 0;
  background: rgba(0,0,0,.06);
  color: #111;
  font-size: 22px;
  line-height: 1;
}

.bsit-spotlight__close:hover{ background: rgba(0,0,0,.10); }

@media (max-width:575px){
  .bsit-spotlight__panel{ top: 14vh; }
  .bsit-spotlight__input{ height: 52px; font-size: 16px; }
}

/* --------------------------------------------------------------------------
   Search Details page
   -------------------------------------------------------------------------- */

.bsit-search-page .bsit-search-form{
  /* Smaller + cleaner (matches BeeSmart hero proportions) */
  max-width: 520px;
  margin: 0;
}

.bsit-search-page .bsit-search-field{ position: relative; flex: 1 1 0%; }
.bsit-search-page .bsit-search-field{ min-width: 0; }

.bsit-search-page .bsit-search-submit{ flex: 0 0 auto; }

.bsit-search-page .bsit-search-field .bsit-search-ico{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  opacity:.65;
  pointer-events:none;
}

.bsit-search-page .bsit-search-input-group{
  /* Use grid so input never overlaps the button, even if other CSS tries to
     absolutely-position hero buttons on services pages. */
  display:grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap:12px;
  align-items:center;
  width:100%;
}

@media (max-width: 575.98px){
  .bsit-search-page .bsit-search-input-group{
    grid-template-columns: 1fr;
  }
}


.bsit-search-page .bsit-search-form .form-control{
  height:38px !important;
  border-radius:14px;
  padding:0 12px 0 42px !important;
  font-size:15px;
  min-width:0;
  box-sizing:border-box;
}

.bsit-search-page .bsit-search-submit{
  /* Hard reset any "hero button" absolute positioning coming from other
     page styles (this was causing overlap in your screenshots). */
  position: static !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  margin: 0 !important;

  height:38px !important;
  padding:0 20px;
  border-radius:999px;
  white-space:nowrap;
}


.bsit-search-page .bsit-search-meta{
  max-width: 560px;
  margin: 10px 0 0;
  opacity: .8;
  font-size: 14px;
  /* Hero background is dark, so keep it readable */
  color: rgba(255,255,255,.78);
}

/* Popular cards (right side) – reduce font size to avoid overpowering hero */
.bsit-search-page .privacy-quickwrap .stat-card .stat-num{
  font-size: 28px;
  line-height: 1.12;
}

@media (max-width: 991.98px){
  .bsit-search-page .privacy-quickwrap{ margin-top: 18px; }
  .bsit-search-page .privacy-quickwrap .stat-card .stat-num{ font-size: 24px; }
}

/* Keep the yellow circles BEHIND the hero copy/search UI */
.bsit-search-page .services-hero{ isolation:isolate; }
.bsit-search-page .services-hero::before,
.bsit-search-page .services-hero::after{ z-index:0 !important; }
.bsit-search-page .services-hero .container{ position:relative; z-index:2; }

.bsit-search-toolbar{
  max-width:980px;
  margin: 18px auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.bsit-search-toolbar .bsit-search-count{ font-weight:800; color:#111; }

.bsit-search-toolbar .bsit-search-subcount{
  opacity:.75;
  font-size:13px;
  margin-left:8px;
}

.bsit-search-toolbar .bsit-search-perpage{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  margin:0;
}

.bsit-search-toolbar select{
  height:36px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.14);
  padding:0 10px;
  background:#fff;
}

.bsit-search-results{
  max-width:980px;
  margin: 18px auto 0;
}

.bsit-search-card{
  background:#fff;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.06);
  padding:14px 14px 12px;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  margin-bottom:12px;
}

.bsit-search-card h3{
  font-size:18px;
  margin:0 0 6px;
  line-height:1.25;
  font-weight:800;
}

.bsit-search-card h3 a{ color:#111; text-decoration:none; font-weight:800; }

.bsit-search-card h3 a:hover{ text-decoration:underline; }

.bsit-search-url{ font-size:12px; opacity:.75; margin-bottom:6px; word-break:break-all; }

.bsit-search-snippet{ margin:0; opacity:.9; }

.bsit-search-empty{
  background:#fff;
  border-radius:14px;
  border:1px dashed rgba(0,0,0,.18);
  padding:18px;
}

.bsit-search-empty h3{ margin:0 0 8px; font-size:18px; }
.bsit-search-empty p{ margin:0; opacity:.85; }

.bsit-search-pagination{
  max-width:980px;
  margin: 18px auto 0;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}

.bsit-search-pagination .bsit-page{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:0 10px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  margin:0 5px 10px;
  font-weight:800;
  color:#111;
  cursor:pointer;
  user-select:none;
  transition:transform .12s ease, box-shadow .12s ease;
}

.bsit-search-pagination .bsit-page:hover{ box-shadow:0 10px 18px rgba(0,0,0,.10); transform:translateY(-1px); }
.bsit-search-pagination .bsit-page.is-active{ background:#efb405; border-color:#efb405; color:#111; }
.bsit-search-pagination .bsit-page.is-disabled{ opacity:.45; pointer-events:none; }

@media (max-width:575px){
  .bsit-search-page .bsit-search-submit{ width:100%; }
  .bsit-search-page .bsit-search-form .form-control{ height:44px !important; }
  .bsit-search-page .bsit-search-submit{ height:44px !important; }
}