/*
 * SMJ Global Search Bar — Premium 2026 UI
 * Elementor-hardened: all layout-critical rules use !important to override
 * theme/Elementor global resets (svg { width:100% }, img { max-width:100% }, etc.)
 */

/* ── CSS Tokens ─────────────────────────────────────────────────────────── */
.smj-sb-wrap {
  --sb-height:       52px;
  --sb-radius:       999px;
  --sb-bg:           #ffffff;
  --sb-border:       #e2e8f0;
  --sb-border-focus: #3b82f6;
  --sb-shadow:       0 2px 12px rgba(0,0,0,.08);
  --sb-shadow-focus: 0 0 0 3px rgba(59,130,246,.18), 0 4px 20px rgba(0,0,0,.10);
  --sb-text:         #1e293b;
  --sb-placeholder:  #94a3b8;
  --sb-icon-color:   #64748b;
  --sb-btn-bg:       var(--smj-primary, #1a6fb5);
  --sb-btn-hover:    var(--smj-primary-dk, #155fa0);
  --sb-btn-text:     #ffffff;
  --sb-font:         var(--smj-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif);
  --sb-dd-radius:    20px;
  --sb-dd-shadow:    0 8px 40px rgba(0,0,0,.13);
  --sb-hl-color:     #fef08a;
  --sb-result-hover: #f0f7ff;
  --sb-width:        var(--smj-sb-width, 600px);

  /* Layout — full-width within Elementor column, zero side margins */
  position:    relative    !important;
  display:     block       !important;
  width:       100%        !important;
  max-width:   100%        !important;  /* fill entire column — no width cap */
  margin-left:  0          !important;
  margin-right: 0          !important;
  font-family: var(--sb-font) !important;
  box-sizing:  border-box  !important;
  flex-shrink: 0;
}

/* ── Nuke ALL SVG global overrides inside the search bar ────────────────── */
/* Elementor Kit and most themes set: svg { max-width:100%; display:block; }
   which inflates inline SVG icons. Override every SVG inside .smj-sb-wrap. */
.smj-sb-wrap svg,
.smj-sb-wrap svg * {
  width:       auto !important;
  height:      auto !important;
  max-width:   none !important;
  max-height:  none !important;
  display:     inline !important;
}

/* ── Inner pill ─────────────────────────────────────────────────────────── */
.smj-sb-inner {
  display:       flex         !important;
  flex-direction:row          !important;
  align-items:   center       !important;
  flex-wrap:     nowrap       !important;
  height:        var(--sb-height) !important;
  background:    var(--sb-bg)     !important;
  border:        1.5px solid var(--sb-border) !important;
  border-radius: var(--sb-radius) !important;
  box-shadow:    var(--sb-shadow) !important;
  padding:       0 6px 0 18px    !important;
  gap:           6px             !important;
  overflow:      hidden          !important;
  box-sizing:    border-box      !important;
  transition:    border-color .2s ease, box-shadow .2s ease;
  width:         100% !important;
  margin:        0    !important;
}

.smj-sb-wrap.smj-sb--focused .smj-sb-inner,
.smj-sb-inner:focus-within {
  border-color: var(--sb-border-focus) !important;
  box-shadow:   var(--sb-shadow-focus) !important;
}

.smj-sb-inner:hover {
  border-color: #cbd5e1  !important;
  box-shadow:   0 4px 18px rgba(0,0,0,.10) !important;
}

/* ── Search icon span ───────────────────────────────────────────────────── */
.smj-sb-icon {
  flex-shrink:    0           !important;
  flex-grow:      0           !important;
  width:          20px        !important;
  height:         20px        !important;
  min-width:      20px        !important;
  min-height:     20px        !important;
  max-width:      20px        !important;
  max-height:     20px        !important;
  display:        flex        !important;
  align-items:    center      !important;
  justify-content:center      !important;
  color:          var(--sb-icon-color) !important;
  pointer-events: none        !important;
  overflow:       hidden      !important;
  transition:     color .2s;
}

/* The SVG inside the icon span — hard-coded pixel sizes, !important */
.smj-sb-icon svg {
  display:    block     !important;
  width:      20px      !important;
  height:     20px      !important;
  min-width:  20px      !important;
  min-height: 20px      !important;
  max-width:  20px      !important;
  max-height: 20px      !important;
  flex-shrink:0         !important;
  overflow:   visible   !important;
  vertical-align: middle !important;
}

.smj-sb-wrap.smj-sb--focused .smj-sb-icon,
.smj-sb-inner:focus-within .smj-sb-icon {
  color: var(--sb-border-focus) !important;
}

/* ── Input field ────────────────────────────────────────────────────────── */
.smj-sb-input {
  flex:        1 1 0     !important;
  min-width:   0         !important;
  width:       100%      !important;
  height:      100%      !important;
  border:      none      !important;
  outline:     none      !important;
  box-shadow:  none      !important;
  background:  transparent !important;
  font-family: var(--sb-font)  !important;
  font-size:   15px      !important;
  font-weight: 400       !important;
  color:       var(--sb-text) !important;
  caret-color: var(--sb-border-focus);
  padding:     0 4px     !important;
  margin:      0         !important;
  letter-spacing: .01em;
  -webkit-appearance: none;
  appearance:  none;
  box-sizing:  border-box !important;
}

.smj-sb-input::placeholder {
  color:       var(--sb-placeholder) !important;
  font-weight: 400 !important;
  opacity:     1;
}

.smj-sb-input::-webkit-search-cancel-button,
.smj-sb-input::-webkit-search-decoration {
  display: none !important;
}

/* ── Clear (×) button ───────────────────────────────────────────────────── */
.smj-sb-clear {
  flex-shrink:     0           !important;
  flex-grow:       0           !important;
  width:           28px        !important;
  height:          28px        !important;
  min-width:       28px        !important;
  border:          none        !important;
  border-radius:   50%         !important;
  background:      #f1f5f9     !important;
  color:           #64748b     !important;
  cursor:          pointer     !important;
  display:         flex        !important;
  align-items:     center      !important;
  justify-content: center      !important;
  padding:         0           !important;
  margin:          0           !important;
  line-height:     1           !important;
  box-shadow:      none        !important;
  transition:      background .15s, color .15s;
}

.smj-sb-clear:hover {
  background: #e2e8f0 !important;
  color:      #1e293b !important;
}

.smj-sb-clear[hidden] { display: none !important; }

/* SVG inside clear button */
.smj-sb-clear svg {
  display:    block !important;
  width:      13px  !important;
  height:     13px  !important;
  min-width:  13px  !important;
  max-width:  13px  !important;
  pointer-events: none !important;
}

/* ── Search button ──────────────────────────────────────────────────────── */
.smj-sb-btn {
  flex-shrink:    0           !important;
  flex-grow:      0           !important;
  height:         calc(var(--sb-height) - 10px) !important;
  padding:        0 22px      !important;
  border:         none        !important;
  border-radius:  var(--sb-radius) !important;
  background:     var(--sb-btn-bg) !important;
  color:          var(--sb-btn-text) !important;
  font-family:    var(--sb-font) !important;
  font-size:      14px        !important;
  font-weight:    600         !important;
  letter-spacing: .02em;
  cursor:         pointer     !important;
  white-space:    nowrap      !important;
  display:        inline-flex !important;
  align-items:    center      !important;
  justify-content:center      !important;
  margin:         0           !important;
  box-shadow:     0 2px 8px rgba(26,111,181,.25) !important;
  transition:     background .18s ease, transform .12s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance:     none;
  box-sizing:     border-box  !important;
  text-decoration:none        !important;
  line-height:    1           !important;
}

.smj-sb-btn:hover {
  background:  var(--sb-btn-hover)               !important;
  transform:   translateY(-1px)                  !important;
  box-shadow:  0 4px 14px rgba(26,111,181,.35)   !important;
  color:       var(--sb-btn-text)                !important;
  text-decoration: none                          !important;
}

.smj-sb-btn:active {
  transform:  translateY(0)                  !important;
  box-shadow: 0 1px 4px rgba(26,111,181,.2)  !important;
}

/* ── Dropdown container ─────────────────────────────────────────────────── */
.smj-sb-dropdown {
  position:      absolute     !important;
  top:           calc(var(--sb-height) + 8px) !important;
  left:          0            !important;
  right:         0            !important;
  z-index:       99999        !important;
  background:    #ffffff      !important;
  border:        1px solid #e2e8f0 !important;
  border-radius: var(--sb-dd-radius) !important;
  box-shadow:    var(--sb-dd-shadow) !important;
  overflow:      hidden       !important;
  animation:     smjSbSlideIn .18s cubic-bezier(.16,1,.3,1);
  transform-origin: top center;
  box-sizing:    border-box   !important;
  width:         100%         !important;
}

.smj-sb-dropdown[hidden] { display: none !important; }

@keyframes smjSbSlideIn {
  from { opacity:0; transform:translateY(-6px) scale(.98); }
  to   { opacity:1; transform:translateY(0)    scale(1);   }
}

/* ── Result list ────────────────────────────────────────────────────────── */
.smj-sb-results {
  list-style:  none   !important;
  margin:      0      !important;
  padding:     6px 0  !important;
}

/* ── Single result row ──────────────────────────────────────────────────── */
.smj-sb-result {
  display:     flex       !important;
  align-items: center     !important;
  gap:         12px       !important;
  padding:     10px 16px  !important;
  cursor:      pointer    !important;
  transition:  background .12s;
  outline:     none;
  text-decoration: none !important;
  box-sizing:  border-box !important;
}

.smj-sb-result:hover,
.smj-sb-result:focus {
  background: var(--sb-result-hover) !important;
}

/* Thumbnail image */
.smj-sb-result__img {
  flex-shrink:   0           !important;
  flex-grow:     0           !important;
  width:         52px        !important;
  height:        42px        !important;
  min-width:     52px        !important;
  max-width:     52px        !important;
  object-fit:    cover       !important;
  border-radius: 10px        !important;
  background:    #f1f5f9     !important;
  display:       block       !important;
}

/* SVG inside placeholder thumbnail */
.smj-sb-result__img--placeholder {
  display:         flex   !important;
  align-items:     center !important;
  justify-content: center !important;
  color:           #cbd5e1 !important;
}

.smj-sb-result__img--placeholder svg {
  display:   block  !important;
  width:     22px   !important;
  height:    22px   !important;
  min-width: 22px   !important;
  max-width: 22px   !important;
}

/* Body */
.smj-sb-result__body {
  flex:        1 1 0   !important;
  min-width:   0       !important;
  display:     flex    !important;
  flex-direction: column !important;
  gap:         2px     !important;
}

.smj-sb-result__title {
  font-size:      14px        !important;
  font-weight:    600         !important;
  color:          #1e293b     !important;
  white-space:    nowrap      !important;
  overflow:       hidden      !important;
  text-overflow:  ellipsis    !important;
  line-height:    1.3         !important;
  display:        block       !important;
  text-decoration:none        !important;
}

.smj-sb-result__sub {
  display:     flex        !important;
  align-items: center      !important;
  gap:         8px         !important;
  flex-wrap:   wrap        !important;
}

.smj-sb-result__meta {
  font-size:      12px     !important;
  color:          #64748b  !important;
  white-space:    nowrap   !important;
  overflow:       hidden   !important;
  text-overflow:  ellipsis !important;
  display:        inline   !important;
}

.smj-sb-result__price {
  font-size:   13px                              !important;
  font-weight: 700                               !important;
  color:       var(--smj-price-color, #16a34a)   !important;
  white-space: nowrap                            !important;
  display:     inline                            !important;
}

/* Keyword highlight */
.smj-sb-hl {
  background:    var(--sb-hl-color) !important;
  color:         inherit            !important;
  border-radius: 2px                !important;
  padding:       0 1px              !important;
}

/* ── Searching / no-results state ───────────────────────────────────────── */
.smj-sb-searching,
.smj-sb-no-results {
  display:         flex           !important;
  align-items:     center         !important;
  justify-content: center         !important;
  padding:         18px 16px      !important;
  font-size:       13px           !important;
  color:           #94a3b8        !important;
  font-style:      italic         !important;
  list-style:      none           !important;
}

.smj-sb-searching::before {
  content:       '';
  display:       inline-block   !important;
  width:         14px           !important;
  height:        14px           !important;
  margin-right:  8px            !important;
  border:        2px solid #e2e8f0 !important;
  border-top-color: var(--sb-border-focus) !important;
  border-radius: 50%            !important;
  animation:     smjSbSpin .6s linear infinite;
  flex-shrink:   0;
}

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

/* ── "View all" footer ──────────────────────────────────────────────────── */
.smj-sb-footer {
  border-top:  1px solid #f1f5f9 !important;
  padding:     10px 16px         !important;
}

.smj-sb-footer[hidden] { display: none !important; }

.smj-sb-view-all {
  display:      block          !important;
  font-size:    13px           !important;
  font-weight:  600            !important;
  color:        var(--sb-btn-bg) !important;
  text-align:   center         !important;
  padding:      6px 0          !important;
  border-radius:8px            !important;
  text-decoration: none        !important;
  transition:   background .15s;
}

.smj-sb-view-all:hover {
  background:      var(--sb-result-hover) !important;
  text-decoration: none                   !important;
}

/* Divider between results */
.smj-sb-result + .smj-sb-result {
  border-top: 1px solid #f8fafc !important;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .smj-sb-wrap      { --sb-height: 46px; }
  .smj-sb-btn       { padding: 0 14px !important; font-size: 13px !important; }
  .smj-sb-input     { font-size: 14px !important; }
  .smj-sb-result__img { width:40px !important; height:34px !important; min-width:40px !important; }
}

@media (max-width: 400px) {
  .smj-sb-btn {
    padding:   0 12px !important;
    font-size: 0      !important;
    width:     40px   !important;
    min-width: 40px   !important;
  }
  .smj-sb-btn::after {
    content: '';
    display: block    !important;
    width:   18px     !important;
    height:  18px     !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
  }
}

/* ── Dark mode ──────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .smj-sb-wrap {
    --sb-bg:           #1e293b;
    --sb-border:       #334155;
    --sb-text:         #f1f5f9;
    --sb-placeholder:  #64748b;
    --sb-icon-color:   #94a3b8;
    --sb-shadow:       0 2px 12px rgba(0,0,0,.3);
    --sb-result-hover: #1e3a5f;
    --sb-hl-color:     rgba(254,240,138,.25);
  }
  .smj-sb-dropdown    { background:#1e293b !important; border-color:#334155 !important; }
  .smj-sb-result__title { color: #f1f5f9 !important; }
  .smj-sb-result + .smj-sb-result { border-top-color: #334155 !important; }
  .smj-sb-footer      { border-top-color: #334155 !important; }
  .smj-sb-clear       { background:#334155 !important; color:#94a3b8 !important; }
  .smj-sb-clear:hover { background:#475569 !important; }
}