/* ============================================================
   Monogram Smart Search PRO — Public Stylesheet
   ============================================================ */

:root {
  --msp-field-bg:          #ffffff;
  --msp-field-text:        #1a1a1a;
  --msp-field-placeholder: #999999;
  --msp-field-border:      #dddddd;
  --msp-field-radius:      4px;
  --msp-field-height:      44px;
  --msp-field-width:       300px;
  --msp-field-shadow:      none;
  --msp-dropdown-bg:       #ffffff;
  --msp-dropdown-hover:    #f8f8f8;
  --msp-dropdown-text:     #1a1a1a;
  --msp-icon-color:        #1a1a1a;
  --msp-see-all-bg:        #1a1a1a;
  --msp-see-all-txt:       #ffffff;
  --msp-transition:        0.18s ease;
}

/* ── Inline wrapper (shortcode) ──────────────────────────── */
.msp-search-wrapper {
  position:    relative;
  display:     inline-block;
  font-family: inherit;
  width:       var(--msp-field-width);
  max-width:   100%;
}

.msp-search-field-wrap {
  position: relative;
  display:  flex;
  width:    100%;
  height:   var(--msp-field-height);
}

/* ── Input ───────────────────────────────────────────────── */
.msp-search-input {
  flex:               1 1 auto;
  width:              100%;
  height:             var(--msp-field-height);
  padding:            0 82px 0 14px; /* room for clear + search */
  background:         var(--msp-field-bg);
  color:              var(--msp-field-text);
  border:             1px solid var(--msp-field-border);
  border-radius:      var(--msp-field-radius);
  box-shadow:         var(--msp-field-shadow);
  font-size:          15px;
  font-family:        inherit;
  appearance:         none;
  -webkit-appearance: none;
  box-sizing:         border-box;
  outline:            none;
  line-height:        normal;
  margin:             0;
  display:            block;
  transition:         border-color var(--msp-transition), box-shadow var(--msp-transition);
}

.msp-search-input::placeholder { color: var(--msp-field-placeholder); opacity: 1; }
.msp-search-input:focus {
  border-color: var(--msp-field-text);
  box-shadow:   0 0 0 2px rgba(0,0,0,.06);
}

/* ── Search button ───────────────────────────────────────── */
.msp-search-btn {
  position:        absolute;
  right:           0;
  top:             0;
  bottom:          0;
  width:           44px;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  padding:         0;
  margin:          0;
  color:           var(--msp-icon-color);
  transition:      opacity var(--msp-transition);
  line-height:     1;
}
.msp-search-btn:hover { opacity: .65; }
.msp-search-btn svg   { display: block; width: 18px; height: 18px; flex-shrink: 0; }

/* ── Clear button — sits left of search icon with explicit gap ── */
.msp-clear-btn {
  position:        absolute;
  /* right = search-btn width(44px) + gap(8px) = 52px from right edge */
  right:           52px;
  top:             0;
  bottom:          0;
  width:           24px;
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  padding:         0;
  margin:          0;           /* no margin on absolute elements */
  color:           #b0b0b0;
  transition:      color 0.15s;
  line-height:     1;
  z-index:         2;
}
.msp-clear-btn:hover       { color: #555555; }
.msp-clear-btn[hidden]     { display: none !important; }
.msp-clear-btn svg         { display: block; width: 13px; height: 13px; flex-shrink: 0; }

/* ── Inline dropdown ─────────────────────────────────────── */
.msp-search-wrapper .msp-dropdown {
  position:      absolute;
  top:           calc(var(--msp-field-height) + 4px);
  left:          0;
  right:         0;
  background:    var(--msp-dropdown-bg);
  border:        1px solid var(--msp-field-border);
  border-radius: var(--msp-field-radius);
  box-shadow:    0 8px 28px rgba(0,0,0,.12);
  z-index:       99999;
  overflow:      hidden;
  animation:     mspDropIn .15s ease;
  min-width:     280px;
}
.msp-search-wrapper .msp-dropdown[hidden] { display: none; }

@keyframes mspDropIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════
   RESULT ITEMS — shared by inline + header search
   ══════════════════════════════════════════════════════════ */

.msp-dropdown-results {
  list-style: none !important; /* remove any theme bullet points */
  margin:     0 !important;
  padding:    4px 0 !important;
}

/* Remove WP/theme list styles that add dots */
.msp-dropdown-results li,
.msp-result-item {
  list-style:      none !important;
  list-style-type: none !important;
  margin:          0 !important;
  padding:         0 !important;
  background:      none !important;
}
.msp-dropdown-results li::before,
.msp-dropdown-results li::after,
.msp-result-item::before,
.msp-result-item::after {
  display: none !important;
  content: none !important;
}

.msp-result-link {
  display:         flex !important;
  flex-direction:  row !important;
  align-items:     center !important;
  flex-wrap:       nowrap !important;
  gap:             10px;
  padding:         9px 14px 9px 10px;
  color:           var(--msp-dropdown-text);
  text-decoration: none !important;
  transition:      background var(--msp-transition);
  box-sizing:      border-box;
  width:           100%;
}
.msp-result-link:hover,
.msp-result-item.msp-focused .msp-result-link {
  background: var(--msp-dropdown-hover) !important;
}

/* Image — fixed 44×44 square */
.msp-result-image {
  flex:            0 0 44px;
  width:           44px;
  height:          44px;
  min-width:       44px;
  border-radius:   3px;
  overflow:        hidden;
  background:      #f0f0f0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.msp-result-image img {
  width:       44px;
  height:      44px;
  object-fit:  cover;
  display:     block;
  flex-shrink: 0;
}

/* Info column */
.msp-result-info {
  flex:           1 1 auto;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            2px;
  overflow:       hidden;
}

/* Title — no underline, high specificity to beat theme */
#msp-header-search-inner .msp-result-title,
.msp-search-wrapper .msp-result-title,
.msp-result-link .msp-result-title,
.msp-result-title {
  font-size:       13px;
  font-weight:     500;
  line-height:     1.3;
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
  color:           var(--msp-dropdown-text);
  text-decoration: none !important;
  border-bottom:   none !important;
  box-shadow:      none !important;
}

/* Price — small, no underline, high specificity */
#msp-header-search-inner .msp-result-price,
.msp-search-wrapper .msp-result-price,
.msp-result-link .msp-result-price,
.msp-result-price {
  font-size:       11px;
  font-weight:     400;
  opacity:         .55;
  color:           var(--msp-dropdown-text);
  white-space:     nowrap;
  text-decoration: none !important;
  border-bottom:   none !important;
}
/* WooCommerce price spans */
.msp-result-price *,
.msp-result-price .woocommerce-Price-amount,
.msp-result-price bdi,
.msp-result-price span {
  font-size:       11px !important;
  font-weight:     400 !important;
  text-decoration: none !important;
  border-bottom:   none !important;
}

/* Monogram highlight — bold + subtle bg */
.msp-result-title mark.msp-highlight,
.msp-result-title .msp-highlight {
  font-weight:      700;
  background-color: rgba(0,0,0,.07);
  color:            inherit;
  border-radius:    2px;
  padding:          0 1px;
  font-style:       normal;
}

/* ── See-all button ──────────────────────────────────────── */
.msp-see-all {
  border-top: 1px solid var(--msp-field-border);
  padding:    8px 10px;
}
.msp-see-all-link {
  display:         block;
  padding:         9px 14px;
  background:      var(--msp-see-all-bg);
  color:           var(--msp-see-all-txt) !important;
  font-size:       13px;
  font-weight:     600;
  border-radius:   var(--msp-field-radius);
  text-decoration: none !important;
  text-align:      center;
  letter-spacing:  .02em;
  transition:      opacity var(--msp-transition);
}
.msp-see-all-link:hover { opacity: .85; }

/* ── Loading ─────────────────────────────────────────────── */
.msp-dropdown-loading {
  padding:    16px 14px;
  text-align: center;
  font-size:  13px;
  opacity:    .5;
  color:      var(--msp-dropdown-text);
}

/* ── No-results block ────────────────────────────────────── */
.msp-no-results { padding: 20px 16px; text-align: center; }
.msp-no-results-headline {
  font-size: 14px; font-weight: 600; margin: 0 0 6px;
  color: var(--msp-dropdown-text); line-height: 1.4;
}
.msp-no-results-desc {
  font-size: 12px; opacity: .7; margin: 0 0 12px;
  color: var(--msp-dropdown-text); line-height: 1.45;
}
.msp-no-results-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.msp-no-results-btn {
  display: block; width: 100%; padding: 10px 16px;
  font-size: 13px; font-weight: 600; border-radius: var(--msp-field-radius);
  text-decoration: none !important; text-align: center;
  transition: opacity var(--msp-transition); box-sizing: border-box; line-height: 1.4;
}
.msp-no-results-btn:hover { opacity: .82; }

/* ── No-results page ─────────────────────────────────────── */
.msp-no-results-page { padding: 48px 24px; text-align: center; max-width: 520px; margin: 0 auto; }
.msp-no-results-page .msp-no-results-headline { font-size: 22px; margin-bottom: 14px; }
.msp-no-results-page .msp-no-results-desc     { font-size: 16px; margin-bottom: 28px; }
.msp-no-results-page .msp-no-results-btn      { display: inline-block; width: auto; padding: 13px 32px; font-size: 15px; }

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .msp-dropdown, .msp-result-link,
  .msp-search-btn, .msp-see-all-link,
  .msp-no-results-btn { animation: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   HEADER SEARCH BAR — #msp-header-search
   ──────────────────────────────────────────────────────────────
   NO popup. NO overlay. NO fullscreen dim.
   Just a bar that slides down from below the header,
   with a shadow. Matches the screenshots provided.
   ══════════════════════════════════════════════════════════════ */

#msp-header-search {
  position:        fixed;
  top:             0;          /* JS sets this to actual header bottom */
  left:            0;
  right:           0;
  z-index:         999990;
  background:      var(--msp-field-bg);
  border-bottom:   1px solid var(--msp-field-border);
  box-shadow:      0 6px 24px rgba(0,0,0,.13);
  padding:         12px 24px;
  display:         flex;
  align-items:     center;
  justify-content: center;    /* centered on desktop */
  animation:       mspBarSlideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing:      border-box;
}

#msp-header-search[hidden] { display: none !important; }

@keyframes mspBarSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Inner box — right-aligned on desktop, full-width on mobile ── */
#msp-header-search-inner {
  position:  relative;
  width:     420px;
  max-width: 100%;
}

/* ── Input inside header bar ── */
#msp-header-search-inner .msp-search-input {
  width:         100%;
  height:        44px;
  font-size:     15px;
  padding:       0 82px 0 16px;
  border-radius: 6px;
  border:        1.5px solid var(--msp-field-border);
  background:    var(--msp-field-bg);
  color:         var(--msp-field-text);
  box-shadow:    none;
  box-sizing:    border-box;
  outline:       none;
  display:       block;
  transition:    border-color 0.15s;
}
#msp-header-search-inner .msp-search-input:focus {
  border-color: var(--msp-field-text);
  outline:      none;
}

/* Search button in header bar */
#msp-header-search-inner .msp-search-btn {
  width:  44px;
  height: 44px;
}

/* Clear button in header bar — right = 44px(search) + 8px gap = 52px */
#msp-header-search-inner .msp-clear-btn {
  right:  52px;
  width:  24px;
  height: 44px;
  margin: 0;
}

/* ── Dropdown inside header bar ── */
#msp-header-search-inner .msp-dropdown {
  position:      absolute;
  top:           calc(44px + 6px);
  left:          0;
  right:         0;
  background:    var(--msp-dropdown-bg);
  border:        1px solid var(--msp-field-border);
  border-radius: 6px;
  box-shadow:    0 8px 32px rgba(0,0,0,.14);
  z-index:       999993;
  overflow:      hidden;
  max-height:    60vh;
  overflow-y:    auto;
}
#msp-header-search-inner .msp-dropdown[hidden] { display: none; }

/* ── Mobile: full-width bar, 16px padding each side ── */
@media (max-width: 768px) {
  #msp-header-search {
    padding:         10px 16px;
    justify-content: center;   /* keep centered */
  }

  #msp-header-search-inner {
    width:     100%;
    max-width: 100%;
  }

  #msp-header-search-inner .msp-search-input {
    font-size: 16px; /* prevents iOS zoom */
    height:    46px;
  }

  /* Clear btn vertically centered on mobile */
  #msp-header-search-inner .msp-clear-btn {
    height: 46px;
    top:    0;
    bottom: 0;
  }

  /* Search btn height matches on mobile */
  #msp-header-search-inner .msp-search-btn {
    height: 46px;
  }

  #msp-header-search-inner .msp-dropdown {
    max-height: 55vh;
  }

  /* Mobile result images slightly smaller */
  #msp-header-search-inner .msp-result-image,
  #msp-header-search-inner .msp-result-image img {
    width: 38px; height: 38px; min-width: 38px;
    flex: 0 0 38px;
  }
}