/* Sitewide search suggestions dropdown - lives inside the existing
   #search-popup modal (parent theme header.php/footer.php). Colors match the
   modal's own accent (#A765DD, used on #search-toggle's border) and the
   existing .btc-product-type badge (#b08d57) for visual consistency. */

/* The parent theme's ("bitcointaf") Customizer Additional CSS - a DB-stored
   custom_css post, merged on top of the child theme's own Additional CSS by
   the wp_get_custom_css filter in functions.php - sets #search-toggle to
   display:none site-wide. That predates this feature and is the sole reason
   the icon button next to Sign Up/Login was invisible even though the modal,
   toggle JS, and this new suggestions dropdown all already worked underneath
   it. Overriding here (rather than editing that DB content directly) keeps
   the fix in version-controllable theme code. inline-block matches the
   button's un-styled default, which is all the parent style.css rule
   (border/padding/background, no explicit display) ever assumed.
*/
#search-toggle {
	display: inline-block !important;
}

.btaf-search-field-wrap {
	position: relative;
}

.btaf-search-suggestions {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	/* A flat 360px doesn't account for the modal's own 80px top margin
	   (.form-and-closeicon, parent theme style.css) plus its padding/input -
	   on a shorter viewport that pushes the dropdown's later rows below the
	   visible area entirely. Capping against viewport height keeps it fully
	   reachable (still scrollable, via overflow-y) instead of overflowing
	   off-screen. 220px accounts for that space above the dropdown plus a
	   bottom buffer so it never touches the viewport edge. */
	max-height: min(360px, calc(100vh - 220px));
	overflow-y: auto;
	z-index: 1100;
	text-align: left;
}

.btaf-search-suggestion {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	color: #282828;
	text-decoration: none;
	border-bottom: 1px solid #f1f1f1;
}

.btaf-search-suggestion:last-child {
	border-bottom: none;
}

.btaf-search-suggestion:hover,
.btaf-search-suggestion.is-active {
	background: #f6f2fb;
	color: #A765DD;
}

.btaf-search-suggestion-thumb {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}

.btaf-search-suggestion-text {
	flex: 1;
	font-size: 14px;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Same text-transform/weight/radius as .btc-product-type (parent style.css)
   so the dropdown's badges read as the same "family" as the results page's -
   just a touch smaller/tighter padding to fit a compact row. */
.btaf-search-type-tag {
	flex-shrink: 0;
	font-size: 12px;
	text-transform: capitalize;
	font-weight: 600;
	color: #fff;
	background: #b08d57;
	padding: 2px 8px;
	border-radius: 4px;
	white-space: nowrap;
}

/* Every type on the results page (.btc-product-type, parent style.css) uses
   the same single gold color regardless of type - only Event gets its own
   purple here, reusing the site's actual accent color (already on buttons,
   #search-toggle's border, etc.) rather than an invented one, since it's the
   one category not shown on the results page's cards via that class. */
.btaf-search-type-tag.btaf-tag-event {
	background: #A765DD;
}

.btaf-search-empty {
	padding: 14px;
	font-size: 14px;
	color: #777;
	text-align: center;
}

/* .btc-product-type (parent theme style.css) is absolutely positioned above
   the card, floating over the image - fine for the one type badge it was
   built for, but a second badge with that class (the recurrence tag on a
   search result Event card) would land in the exact same spot and overlap
   it. Pulling this one back into normal flow instead of overriding position
   entirely keeps its existing color/padding/radius. */
.btaf-event-recurrence {
	position: static !important;
	top: auto !important;
	display: inline-block;
	margin: 6px 0 0;
	background-color: #A765DD;
}

.btaf-search-events-heading {
	margin-top: 40px;
	margin-bottom: 20px;
}

@media (max-width: 576px) {
	.search-popup .form-group input {
		width: 100%;
	}
}

/* ============================================================================
   Popup-only visual redesign, scoped entirely under #search-popup on purpose:
   searchform.php also renders a second time as the plain "search again" box
   on search.php itself (outside #search-popup, see that template) - the
   rules above this point are that instance's base styling and are left
   untouched. Everything below only ever matches the modal, so it can safely
   override the base look there (frosted backdrop, pill input, floating round
   submit button, redesigned suggestion rows) without affecting the results
   page's own search box.
   ============================================================================ */


/* 1. Backdrop – bright frosted layer, content visible but not readable */
/* ===== BitcoinTAF – Search popup refresh ===== */
:root{
  --btaf-purple:#52389F;
  --btaf-purple-dark:#3F2A80;
  --btaf-purple-soft:#F1EDFC;
  --btaf-ink:#1D1640;
  --btaf-line:#E6E1F5;
}

/* 1. Backdrop – bright frosted layer, content visible but not readable */
#search-popup.search-popup{
  background:rgba(248,246,255,.72) !important;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  align-items:flex-start !important;   /* sit higher so the dropdown has room */
  padding-top:16vh !important;
}

/* 2. Container – drop the white box, let the pill float */
#search-popup .form-and-closeicon{
  background:transparent !important;
  padding:0 !important;
  width:min(680px,92vw) !important;
  max-width:none !important;
  box-shadow:none !important;
}
#search-popup #searchform{width:100%}
#search-popup .serchBox{position:relative;display:block !important;width:100%}
#search-popup .btaf-search-field-wrap{margin:0 !important;width:100% !important;position:relative}

/* 3. Pill input */
#search-popup input#s.searchField{
  height:62px !important;
  width:100% !important;
  padding:0 76px 0 28px !important;
  border:1px solid var(--btaf-line) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:var(--btaf-ink) !important;
  font-size:16px !important;
  box-shadow:0 12px 32px rgba(82,56,159,.14) !important;
  outline:none !important;
  transition:border-color .2s, box-shadow .2s;
}
#search-popup input#s.searchField::placeholder{color:#8C86A8;opacity:1}
#search-popup input#s.searchField:focus{
  border-color:var(--btaf-purple) !important;
  box-shadow:0 0 0 4px rgba(82,56,159,.14),0 12px 32px rgba(82,56,159,.18) !important;
}

/* 4. Round submit button inside the input, right corner */
#search-popup .searchALign{
  position:absolute !important;
  top:9px !important;          /* (62 - 44) / 2 */
  right:9px !important;
  width:44px !important;
  height:44px !important;
  z-index:3;
}
#search-popup #searchsubmit.btnSearch{
  width:44px !important;
  height:44px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:var(--btaf-purple) !important;
  color:transparent !important;   /* hide the "Search" text */
  font-size:0 !important;
  cursor:pointer;
  transition:background .2s, transform .15s;
  z-index:1;
  /* Without an explicit z-index here, this static-positioned button paints
     BELOW the absolutely-positioned .fa-search icon at rest (fine) - but the
     :hover rule's transform:scale() forces this element into its own
     stacking context, which then paints ABOVE the icon (later in the DOM),
     hiding it. An explicit z-index keeps both in the same comparison so the
     icon's higher z-index (below) always wins, hover or not. */
}
#search-popup #searchsubmit.btnSearch:hover{background:var(--btaf-purple-dark) !important;transform:scale(1.05)}
#search-popup .searchALign .fa-search{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  right:auto !important;
  transform:translate(-50%,-50%);
  font-size:16px !important;
  color:#fff !important;
  z-index:2;
  pointer-events:none;           /* clicks pass through to the button */
}

/* 5. Close button – top-right, above the pill */
#search-popup #search-close.search-close{
  position:absolute !important;
  top:-64px !important;
  right:0 !important;
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  background:#fff !important;
  border:1px solid var(--btaf-line) !important;
  box-shadow:0 6px 18px rgba(82,56,159,.12);
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:0 !important;
  color:var(--btaf-purple) !important;   /* the × glyph */
  font-size:24px !important;
  line-height:1 !important;
  cursor:pointer;
  transition:background .2s, color .2s;
}
#search-popup #search-close.search-close:hover{background:var(--btaf-purple) !important;color:#fff !important}

/* 6. Suggestions dropdown */
#search-popup .btaf-search-suggestions{
  position:absolute !important;
  top:calc(100% + 10px) !important;
  left:0 !important;
  right:0 !important;
  width:auto !important;
  max-height:min(380px,60vh) !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  padding:8px !important;
  background:#fff !important;
  border:1px solid var(--btaf-line) !important;
  border-radius:20px !important;
  box-shadow:0 24px 60px rgba(29,22,64,.16) !important;
  scrollbar-width:thin;
  scrollbar-color:#C9BFEB transparent;
}
#search-popup .btaf-search-suggestions::-webkit-scrollbar{width:6px}
#search-popup .btaf-search-suggestions::-webkit-scrollbar-thumb{background:#C9BFEB;border-radius:6px}

#search-popup .btaf-search-suggestion{
  display:flex !important;
  align-items:center;
  gap:14px;
  padding:10px 12px !important;
  border:0 !important;
  border-radius:12px;
  text-decoration:none !important;
  transition:background .15s;
}
#search-popup .btaf-search-suggestion + .btaf-search-suggestion{margin-top:2px}
#search-popup .btaf-search-suggestion:hover,
#search-popup .btaf-search-suggestion:focus,
#search-popup .btaf-search-suggestion.active{
  background:var(--btaf-purple-soft) !important;
  outline:none;
}
#search-popup .btaf-search-suggestion-thumb{
  width:44px !important;
  height:44px !important;
  flex:0 0 44px;
  border-radius:10px !important;
  object-fit:cover;
}
#search-popup .btaf-search-suggestion-text{
  flex:1 1 auto;
  min-width:0;
  font-size:14.5px !important;
  line-height:1.35;
  color:var(--btaf-ink) !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#search-popup .btaf-search-suggestion:hover .btaf-search-suggestion-text{color:var(--btaf-purple) !important}

/* Type tags – purple only; news = soft, product = solid */
#search-popup .btaf-search-type-tag{
  flex:0 0 auto;
  padding:4px 10px !important;
  border-radius:999px !important;
  font-size:11px !important;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1.4;
  background:var(--btaf-purple-soft) !important;
  color:var(--btaf-purple) !important;
  border:0 !important;
}
#search-popup .btaf-search-type-tag.btaf-tag-product{
  background:var(--btaf-purple) !important;
  color:#fff !important;
}

@media (max-width:575px){
  #search-popup input#s.searchField{height:54px !important;font-size:15px !important;padding:0 64px 0 20px !important}
  #search-popup .searchALign{top:7px !important;right:7px !important;width:40px !important;height:40px !important}
  #search-popup #searchsubmit.btnSearch{width:40px !important;height:40px !important}
  #search-popup .btaf-search-type-tag{display:none}
}