.ari-search-root {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  pointer-events: none;
}
.ari-search-root.ari-open {
  display: block;
  pointer-events: auto;
}
.ari-search-backdrop {
  position: absolute;
  inset: 0;
  z-index: 150;
  background: rgba(6, 8, 12, 0.7);
  backdrop-filter: blur(16px) saturate(0.6) brightness(0.4);
  -webkit-backdrop-filter: blur(16px) saturate(0.6) brightness(0.4);
  opacity: 1;
  transition: opacity 0.3s ease;
}
.ari-search-root.ari-open:not(.ari-closing) .ari-search-backdrop {
  animation: ariSearchFade 0.3s ease;
}
.ari-search-root.ari-closing .ari-search-backdrop {
  opacity: 0;
}
.ari-search-panel {
  position: fixed;
  left: 50%;
  top: clamp(8px, 6dvh, 80px);
  z-index: 151;
  display: flex;
  flex-direction: column;
  width: 94dvw;
  max-width: 680px;
  max-height: 88dvh;
  transform: translateX(-50%);
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  pointer-events: auto;
  opacity: 1;
}
.ari-search-root.ari-open:not(.ari-closing) .ari-search-panel {
  animation: ariSearchPanelIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.ari-search-root.ari-closing .ari-search-panel {
  animation: ariSearchPanelOut 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes ariSearchFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ariSearchPanelIn {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.96) translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
  }
}
@keyframes ariSearchPanelOut {
  from {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) scale(0.96) translateY(-8px);
  }
}
.ari-search-glow {
  height: 2px;
  width: 100%;
  flex-shrink: 0;
  opacity: 0.8;
  background: linear-gradient(to right, transparent, #e9652b, transparent);
}
.ari-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 58px;
  padding: 0 14px; /* px-3.5 */
  background: rgba(255, 255, 255, 0.01);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .ari-search-input-wrap {
    height: 68px;
    padding: 0 20px; /* md:px-5 */
  }
}
.ari-search-input-wrap .ari-search-icon {
  color: #e9652b;
  font-size: 26px !important;
  margin-right: 10px; /* mr-2.5 */
  flex-shrink: 0;
  animation: ariSearchPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; /* tailwind animate-pulse */
}
@media (min-width: 768px) {
  .ari-search-input-wrap .ari-search-icon {
    margin-right: 16px; /* md:mr-4 */
  }
}
@keyframes ariSearchPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.ari-search-input-wrap input {
  flex: 1;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  font-family: Inter, sans-serif;
  font-size: 15px;
  color: #fff;
  caret-color: #e9652b;
}
@media (min-width: 768px) {
  .ari-search-input-wrap input {
    font-size: 16px;
  }
}
.ari-search-input-wrap input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}
.ari-search-input-wrap input:focus {
  outline: none;
  box-shadow: none;
}
.ari-search-input-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-left: 12px;
}
/* Scope to global SearchOverlay only — do not style catalog toolbar clear */
.ari-search-root .ari-search-clear {
  display: none;
  padding: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  line-height: 1;
  transition: all 0.2s ease;
}
.ari-search-root .ari-search-clear.ari-show,
.ari-search-root .ari-search-clear:not([hidden]) {
  display: inline-flex;
}
.ari-search-root .ari-search-clear[hidden] {
  display: none !important;
}
.ari-search-root .ari-search-clear:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
}
.ari-search-root .ari-search-clear .material-symbols-outlined {
  font-size: 20px !important;
}
.ari-search-esc {
  font-family: Montserrat, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 2px 6px; /* px-1.5 py-0.5 */
  border-radius: 0;
  user-select: none;
}
.ari-search-results {
  flex-grow: 1;
  overflow-y: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.15);
  max-height: calc(78dvh - 74px);
  scrollbar-width: none;
}
.ari-search-results[hidden] {
  display: none !important;
}
.ari-search-results.ari-results-in {
  animation: ariSearchResultsIn 0.15s ease-out;
}
.ari-search-results::-webkit-scrollbar {
  display: none;
}
@keyframes ariSearchResultsIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.ari-search-list {
  display: flex;
  flex-direction: column;
  gap: 8px; /* gap-2 */
  padding: 14px; /* p-3.5 */
}
@media (min-width: 768px) {
  .ari-search-list {
    padding: 20px; /* md:p-5 */
  }
}
.ari-search-item {
  display: flex;
  align-items: center;
  gap: 14px; /* gap-3.5 */
  width: 100%;
  text-align: left;
  text-decoration: none;
  padding: 12px; /* p-3 */
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left-width: 4px;
  border-left-color: transparent;
  background: rgba(255, 255, 255, 0.01);
  color: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0;
}
@media (min-width: 768px) {
  .ari-search-item {
    gap: 18px; /* md:gap-4.5 */
    padding: 14px; /* md:p-3.5 */
  }
}
.ari-search-item:hover {
  background: rgba(255, 255, 255, 0.02);
  border-left-color: rgba(255, 255, 255, 0.2);
}
.ari-search-item.ari-active {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.12);
  border-left-color: #e9652b;
}
.ari-search-item-icon {
  flex-shrink: 0;
  font-size: 22px !important;
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.2s ease;
}
@media (min-width: 768px) {
  .ari-search-item-icon {
    font-size: 25px !important;
  }
}
.ari-search-item.ari-active .ari-search-item-icon {
  color: #e9652b;
}
.ari-search-item-body {
  flex: 1;
  min-width: 0;
  padding-right: 8px;
}
.ari-search-item-title {
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  transition: color 0.2s ease;
}
@media (min-width: 768px) {
  .ari-search-item-title {
    font-size: 14px;
  }
}
.ari-search-item.ari-active .ari-search-item-title {
  color: #e9652b;
}
.ari-search-item-title .ari-hl,
.ari-search-item-title .text-accent {
  color: #e9652b;
  font-weight: 700;
}
.ari-search-item-desc {
  font-family: Inter, sans-serif;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.375;
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .ari-search-item-desc {
    font-size: 12px;
  }
}
.ari-search-item-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .ari-search-item-meta {
    gap: 16px;
  }
}
.ari-search-type {
  font-family: Montserrat, sans-serif;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.35);
  transition: all 0.3s ease;
}
@media (min-width: 768px) {
  .ari-search-type {
    font-size: 8.5px;
  }
}
.ari-search-item.ari-active .ari-search-type {
  background: rgba(233, 101, 43, 0.15);
  border-color: rgba(233, 101, 43, 0.3);
  color: #e9652b;
}
.ari-search-item-arrow {
  font-size: 20px !important;
  color: rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}
@media (min-width: 768px) {
  .ari-search-item-arrow {
    font-size: 24px !important;
  }
}
.ari-search-item.ari-active .ari-search-item-arrow {
  color: #e9652b;
  transform: translateX(4px); /* translate-x-1 */
}
.ari-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px; /* py-12 */
  gap: 10px; /* gap-2.5 */
}
.ari-search-empty .material-symbols-outlined {
  font-size: 56px !important;
  color: rgba(255, 255, 255, 0.1);
}
.ari-search-empty p {
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
  margin: 0;
}
.ari-search-empty .ari-q,
.ari-search-empty .text-accent {
  color: #e9652b;
}
.ari-search-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px; /* px-5 py-2.5 */
  background: #0d0d0d;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  user-select: none;
}
.ari-search-footer span {
  font-family: Montserrat, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.15);
}
.ari-search-footer .ari-count {
  color: rgba(255, 255, 255, 0.25);
}
.ari-search-footer kbd {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1px 4px;
  font: inherit;
  color: inherit;
  border-radius: 0;
}

/* Theme icon sizing inside search overlay */
.ari-search-root .svg-icon,
.ari-search-root .ari-theme-icon {
	display: inline-block;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: var(--svg-icon-url);
	mask-image: var(--svg-icon-url);
}
.ari-search-input-wrap .ari-search-icon {
	width: 26px;
	height: 26px;
	min-width: 26px;
	min-height: 26px;
	font-size: 0 !important;
	color: #e9652b;
	background-color: #e9652b;
}
.ari-search-item-icon {
	width: 22px;
	height: 22px;
	font-size: 0 !important;
}
@media (min-width: 768px) {
	.ari-search-item-icon {
		width: 25px;
		height: 25px;
	}
}
.ari-search-item-arrow {
	width: 20px;
	height: 20px;
	font-size: 0 !important;
}
@media (min-width: 768px) {
	.ari-search-item-arrow {
		width: 24px;
		height: 24px;
	}
}
.ari-search-root .ari-search-clear .svg-icon,
.ari-search-root .ari-search-clear .ari-theme-icon {
	width: 20px;
	height: 20px;
}
.ari-search-empty .svg-icon,
.ari-search-empty .ari-theme-icon {
	width: 56px;
	height: 56px;
	color: rgba(255, 255, 255, 0.1);
}