/* Input around ~300px, panel ~400px on desktop */
.tbc-search { position: relative; }
.tbc-search__form { width: max-content; }
.tbc-search__input {
  width: 300px;
  padding: .6rem .8rem;
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
}
.tbc-search__panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 400px;            /* wider dropdown */
  margin-top: .25rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  max-height: 70vh;
  overflow: auto;
  z-index: 999;
}

/* Detached overlay mode */
.tbc-search[data-mode="detached"] .tbc-search__panel {
  position: fixed;
	top: 100px;
    left: 50%;
    transform: translate(-50%, 0%);
    width: min(1200px, 92vw);
    max-height: min(80vh, 820px);
    margin-top: 0;
    border-radius: 1rem;
    z-index: 999;
	padding: 1.75rem;
/*   top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: min(800px, 92vw);
  max-height: min(80vh, 820px);
  margin-top: 0;
  border-radius: 1rem;
  z-index: 999; */
	
}

/* Backdrop */
.tbc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 99;
}
.tbc-overlay.is-open { opacity: 1; pointer-events: auto; }

/* Groups & rows */
.tbc-group{ font:600 .8rem/1.2 system-ui, sans-serif; color:#64748b; padding:.5rem .75rem; border-top:1px solid #f1f5f9; }
.tbc-row{ display:flex; align-items:center; gap:.6rem; padding:.5rem 1.75rem; text-decoration:none; color:#0f172a; }
.tbc-row:hover{ background:#f8fafc; }
.tbc-row img,.tbc-thumb{ width:40px; height:40px; object-fit:cover; border-radius:.5rem; background:#f1f5f9; }
.tbc-title{ flex:1 1 auto; }
.tbc-price{ white-space:nowrap; font-weight:600; }
.tbc-view-all{ display:block; padding:.6rem .75rem; text-align:center; border-top:1px solid #f1f5f9; text-decoration:none; }

/* Mobile tweaks */
@media (max-width: 640px){
  .tbc-search__input { width: 100%; }
  .tbc-search__panel { width: 100vw; left: 50%; transform: translateX(-50%); }
  .tbc-search[data-mode="detached"] .tbc-search__panel { width: 96vw; }
}

/* Loader */

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-top-color: #1C9E53;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite; 
	justify-self: center;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}