:root {
  --mint-search-ink: #13231a;
  --mint-search-deep: #374151;
  --mint-search-muted: #6b7280;
  --mint-search-line: rgba(19, 35, 26, 0.1);
  --mint-search-bg: rgba(255, 255, 255, 0.88);
  --mint-search-border: #dde1e6;
  --mint-search-accent: #6b7280;
  --mint-search-shadow: 0 24px 60px rgba(19, 35, 26, 0.22);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --mint-search-bg: #fdfdfc;
  }
}

/* #mint-ai-search-root matches this stylesheet's light-DOM copy (only
   used by the [mimi_search] shortcode button, which lives in normal page
   content); :host matches the shadow-root copy that scopes everything
   else — the overlay itself is rendered inside a shadow root so the
   host theme's own button/input styles can never bleed in. */
#mint-ai-search-root,
:host {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--mint-search-ink);
}

.mint-search-trigger {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 999998;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--mint-search-accent);
  box-shadow: var(--mint-search-shadow);
  cursor: pointer;
}

.mint-search-trigger--right {
  left: auto;
  right: 20px;
}

.mint-search-trigger[hidden] {
  display: none;
}

/* Default look for the [mimi_search] shortcode button. This one can't
   live in the shadow root (it's placed wherever the editor puts it in
   normal page content), so it needs !important to hold up against the
   host theme's own button styles. Pass a custom class="" attribute on
   the shortcode to theme it differently instead of fighting this. */
.mint-ai-search-shortcode-trigger {
  all: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid var(--mint-search-border) !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  background: #fff !important;
  color: var(--mint-search-ink) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

body.mint-search-open {
  overflow: hidden;
}

.mint-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(19, 35, 26, 0.32);
}

/* Centered as its own fixed element (not a flex child being centered by
   its parent) so its position never depends on flex order — the bug
   that put the search bar and close button in the wrong place before. */
.mint-search-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(450px, calc(100vw - 56px));
  height: min(80vh, 560px);
  background: var(--mint-search-bg);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 40px;
  box-shadow: var(--mint-search-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Pinned to the card's own top-right corner, independent of the scroll
   content and the search bar below. */
.mint-search-panel__header {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
}

.mint-search-panel__scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.mint-search-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f2f2f2;
  color: var(--mint-search-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.mint-search-panel__body {
  padding: 56px 22px 96px;
}

.mint-search-section + .mint-search-section {
  margin-top: 18px;
}

.mint-search-section__label {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--mint-search-ink);
}

.mint-search-picks {
  display: grid;
  gap: 4px;
}

.mint-search-pick {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 4px;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
}

.mint-search-pick:hover,
.mint-search-suggestion:hover {
  background: #f7f7f5;
}

.mint-search-pick__thumb {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #f2f2ef;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mint-search-pick__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mint-search-pick__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mint-search-pick__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--mint-search-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mint-search-pick__meta {
  font-size: 13px;
  font-weight: 400;
  color: var(--mint-search-muted);
}

.mint-search-pick__meta del {
  margin-right: 4px;
}

.mint-search-suggestions {
  display: grid;
}

.mint-search-suggestion {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: transparent;
  padding: 12px 4px;
  font-size: 15px;
  font-weight: 400;
  color: var(--mint-search-deep);
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
}

.mint-search-suggestion svg {
  flex: 0 0 auto;
  color: var(--mint-search-muted);
}

.mint-search-empty {
  padding: 24px 4px;
  color: var(--mint-search-muted);
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}

.mint-search-bar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  padding: 0 8px 0 22px;
  border-radius: 999px;
  border: 1.5px solid var(--mint-search-border);
  background: #fff;
  box-shadow: 0 14px 24px rgba(17, 17, 17, 0.1);
}

.mint-search-bar.has-query {
  border-color: var(--mint-search-accent);
}

.mint-search-bar__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  font-size: 15px;
  font-weight: 400;
  padding: 10px 0;
  background: transparent;
  color: var(--mint-search-ink);
}

.mint-search-bar__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mint-search-accent);
  color: #fff;
  cursor: pointer;
}

@media (min-width: 768px) {
  .mint-search-trigger {
    left: auto;
    right: 92px;
    bottom: 20px;
  }
}

/* Full-bleed on small/mobile screens instead of a centered floating card. */
@media (max-width: 640px) {
  .mint-search-panel {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
  }
}