/* ============================================================
   Smart Search & Filter Pro — Frontend Styles
   ============================================================ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --ssfp-primary:        #6366f1;
  --ssfp-primary-dark:   #4f46e5;
  --ssfp-secondary:      #8b5cf6;
  --ssfp-columns:        4;
  --ssfp-radius:         14px;
  --ssfp-radius-sm:      8px;
  --ssfp-shadow:         0 4px 24px rgba(0,0,0,.09);
  --ssfp-shadow-lg:      0 12px 40px rgba(0,0,0,.14);
  --ssfp-bg:             #ffffff;
  --ssfp-surface:        #f8f8fc;
  --ssfp-border:         #e4e4f0;
  --ssfp-text:           #1e1e2e;
  --ssfp-text-muted:     #6b7280;
  --ssfp-card-bg:        #ffffff;
  --ssfp-transition:     .22s ease;
  --ssfp-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Wrapper ────────────────────────────────────────────────── */
.ssfp-wrapper {
  font-family:    var(--ssfp-font);
  color:          var(--ssfp-text);
  box-sizing:     border-box;
  margin:         0 auto 40px;
  max-width:      100%;
}
.ssfp-wrapper *, .ssfp-wrapper *::before, .ssfp-wrapper *::after {
  box-sizing: inherit;
}

/* ── Search Panel ───────────────────────────────────────────── */
.ssfp-search-panel {
  background:    var(--ssfp-bg);
  border:        1px solid var(--ssfp-border);
  border-radius: var(--ssfp-radius);
  box-shadow:    var(--ssfp-shadow);
  padding:       24px;
  margin-bottom: 32px;
}

/* Glassmorphism modifier */
.ssfp-glass .ssfp-search-panel {
  background:         rgba(255,255,255,.65);
  backdrop-filter:    blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-color:       rgba(255,255,255,.35);
}

/* ── Search Input ───────────────────────────────────────────── */
.ssfp-search-field-wrap {
  position:      relative;
  margin-bottom: 18px;
}
.ssfp-search-icon {
  position:      absolute;
  left:          14px;
  top:           50%;
  transform:     translateY(-50%);
  color:         var(--ssfp-text-muted);
  pointer-events:none;
  display:       flex;
}
.ssfp-search-input {
  width:         100%;
  height:        52px;
  padding:       0 44px 0 46px;
  font-size:     16px;
  font-family:   var(--ssfp-font);
  border:        2px solid var(--ssfp-border);
  border-radius: var(--ssfp-radius-sm);
  background:    var(--ssfp-surface);
  color:         var(--ssfp-text);
  outline:       none;
  transition:    border-color var(--ssfp-transition), box-shadow var(--ssfp-transition);
  appearance:    none;
  -webkit-appearance: none;
}
.ssfp-search-input:focus {
  border-color: var(--ssfp-primary);
  box-shadow:   0 0 0 4px color-mix(in srgb, var(--ssfp-primary) 15%, transparent);
  background:   #fff;
}
.ssfp-search-clear {
  position:    absolute;
  right:       14px;
  top:         50%;
  transform:   translateY(-50%);
  background:  transparent;
  border:      none;
  cursor:      pointer;
  color:       var(--ssfp-text-muted);
  padding:     4px;
  display:     flex;
  border-radius:50%;
  transition:  color var(--ssfp-transition), background var(--ssfp-transition);
}
.ssfp-search-clear:hover { color: var(--ssfp-primary); background: var(--ssfp-surface); }

/* ── Autocomplete ───────────────────────────────────────────── */
.ssfp-autocomplete {
  position:      absolute;
  top:           calc(100% + 8px);
  left:          0;
  right:         0;
  background:    #fff;
  border:        1px solid var(--ssfp-border);
  border-radius: var(--ssfp-radius-sm);
  box-shadow:    var(--ssfp-shadow-lg);
  z-index:       9999;
  max-height:    380px;
  overflow-y:    auto;
  display:       none;
}
.ssfp-autocomplete.is-open { display: block; }
.ssfp-autocomplete-list { list-style: none; margin: 0; padding: 6px 0; }
.ssfp-autocomplete-list li {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     10px 14px;
  cursor:      pointer;
  transition:  background var(--ssfp-transition);
}
.ssfp-autocomplete-list li:hover,
.ssfp-autocomplete-list li[aria-selected="true"] { background: var(--ssfp-surface); }
.ssfp-ac-thumb {
  width:         44px;
  height:        44px;
  border-radius: 6px;
  object-fit:    cover;
  flex-shrink:   0;
  background:    var(--ssfp-surface);
}
.ssfp-ac-thumb-placeholder {
  width:           44px;
  height:          44px;
  border-radius:   6px;
  background:      var(--ssfp-surface);
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--ssfp-text-muted);
}
.ssfp-ac-info { flex: 1; min-width: 0; }
.ssfp-ac-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssfp-ac-cat   { font-size: 12px; color: var(--ssfp-primary); font-weight: 500; }
.ssfp-ac-excerpt { font-size: 12px; color: var(--ssfp-text-muted); margin-top: 2px; }

/* ── Popular Searches ───────────────────────────────────────── */
.ssfp-popular-searches {
  position:      absolute;
  top:           calc(100% + 8px);
  left:          0;
  right:         0;
  background:    #fff;
  border:        1px solid var(--ssfp-border);
  border-radius: var(--ssfp-radius-sm);
  box-shadow:    var(--ssfp-shadow-lg);
  z-index:       9998;
  padding:       14px;
  display:       none;
}
.ssfp-popular-searches.is-open { display: block; }
.ssfp-popular-label { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ssfp-text-muted); }
.ssfp-popular-list  { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ssfp-popular-list li button {
  background:    var(--ssfp-surface);
  border:        1px solid var(--ssfp-border);
  border-radius: 20px;
  padding:       5px 14px;
  font-size:     13px;
  cursor:        pointer;
  color:         var(--ssfp-text);
  font-family:   var(--ssfp-font);
  transition:    background var(--ssfp-transition), border-color var(--ssfp-transition), color var(--ssfp-transition);
}
.ssfp-popular-list li button:hover {
  background:    var(--ssfp-primary);
  border-color:  var(--ssfp-primary);
  color:         #fff;
}

/* ── Filters Row ────────────────────────────────────────────── */
.ssfp-filters-row {
  display:     flex;
  flex-wrap:   wrap;
  gap:         14px;
  align-items: flex-end;
}
.ssfp-filter-group { display: flex; flex-direction: column; gap: 6px; flex: 1 1 180px; }
.ssfp-filter-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ssfp-text-muted); }
.ssfp-select-wrap  { position: relative; }
.ssfp-select {
  width:         100%;
  height:        44px;
  padding:       0 36px 0 12px;
  border:        2px solid var(--ssfp-border);
  border-radius: var(--ssfp-radius-sm);
  background:    var(--ssfp-surface);
  color:         var(--ssfp-text);
  font-size:     14px;
  font-family:   var(--ssfp-font);
  outline:       none;
  appearance:    none;
  -webkit-appearance: none;
  cursor:        pointer;
  transition:    border-color var(--ssfp-transition);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 12px center;
}
.ssfp-select:focus       { border-color: var(--ssfp-primary); background-color: #fff; }
.ssfp-select[multiple]   { height: auto; min-height: 44px; max-height: 120px; padding: 6px 12px; background-image: none; }

/* ── Logic Toggle ───────────────────────────────────────────── */
.ssfp-logic-group  { flex: 0 0 auto; }
.ssfp-logic-toggle { display: flex; border: 2px solid var(--ssfp-border); border-radius: var(--ssfp-radius-sm); overflow: hidden; }
.ssfp-logic-btn {
  flex:        1;
  padding:     10px 16px;
  background:  transparent;
  border:      none;
  font-size:   13px;
  font-weight: 600;
  cursor:      pointer;
  color:       var(--ssfp-text-muted);
  font-family: var(--ssfp-font);
  transition:  background var(--ssfp-transition), color var(--ssfp-transition);
}
.ssfp-logic-btn.active { background: var(--ssfp-primary); color: #fff; }
.ssfp-logic-btn:first-child { border-right: 2px solid var(--ssfp-border); }

/* ── Action Buttons ─────────────────────────────────────────── */
.ssfp-btn-group { flex: 0 0 auto; flex-direction: row; gap: 8px; }
.ssfp-search-btn,
.ssfp-btn-primary {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       11px 22px;
  background:    var(--ssfp-primary);
  color:         #fff;
  border:        none;
  border-radius: var(--ssfp-radius-sm);
  font-size:     14px;
  font-weight:   600;
  font-family:   var(--ssfp-font);
  cursor:        pointer;
  text-decoration: none;
  transition:    background var(--ssfp-transition), transform var(--ssfp-transition), box-shadow var(--ssfp-transition);
  box-shadow:    0 2px 10px color-mix(in srgb, var(--ssfp-primary) 30%, transparent);
}
.ssfp-search-btn:hover,
.ssfp-btn-primary:hover {
  background:  var(--ssfp-primary-dark);
  transform:   translateY(-1px);
  box-shadow:  0 4px 16px color-mix(in srgb, var(--ssfp-primary) 40%, transparent);
}
.ssfp-clear-btn,
.ssfp-btn-outline {
  display:       inline-flex;
  align-items:   center;
  padding:       10px 20px;
  background:    transparent;
  color:         var(--ssfp-text-muted);
  border:        2px solid var(--ssfp-border);
  border-radius: var(--ssfp-radius-sm);
  font-size:     14px;
  font-weight:   600;
  font-family:   var(--ssfp-font);
  cursor:        pointer;
  text-decoration: none;
  transition:    border-color var(--ssfp-transition), color var(--ssfp-transition);
}
.ssfp-clear-btn:hover,
.ssfp-btn-outline:hover { border-color: var(--ssfp-primary); color: var(--ssfp-primary); }

/* ── Loading / Spinner ──────────────────────────────────────── */
.ssfp-loading {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  padding:         48px;
  color:           var(--ssfp-text-muted);
  font-size:       15px;
}
.ssfp-spinner {
  width:           28px;
  height:          28px;
  border:          3px solid var(--ssfp-border);
  border-top-color:var(--ssfp-primary);
  border-radius:   50%;
  animation:       ssfp-spin .7s linear infinite;
}
@keyframes ssfp-spin { to { transform: rotate(360deg); } }

/* ── Results Header ─────────────────────────────────────────── */
.ssfp-results-header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         0 0 16px;
  border-bottom:   1px solid var(--ssfp-border);
  margin-bottom:   20px;
}
.ssfp-result-count { font-size: 14px; color: var(--ssfp-text-muted); font-weight: 500; }

/* ── Results Grid ───────────────────────────────────────────── */
.ssfp-grid {
  display:               grid;
  grid-template-columns: repeat(var(--ssfp-columns, 4), 1fr);
  gap:                   24px;
}

/* ── Result Card ────────────────────────────────────────────── */
.ssfp-card {
  background:    var(--ssfp-card-bg);
  border:        1px solid var(--ssfp-border);
  border-radius: var(--ssfp-radius);
  overflow:      hidden;
  box-shadow:    var(--ssfp-shadow);
  display:       flex;
  flex-direction:column;
  transition:    transform var(--ssfp-transition), box-shadow var(--ssfp-transition);
}
.ssfp-card:hover {
  transform:  translateY(-4px);
  box-shadow: var(--ssfp-shadow-lg);
}
.ssfp-card-image {
  aspect-ratio:    16/9;
  overflow:        hidden;
  background:      var(--ssfp-surface);
}
.ssfp-card-image img {
  width:         100%;
  height:        100%;
  object-fit:    cover;
  display:       block;
  transition:    transform .4s ease;
}
.ssfp-card:hover .ssfp-card-image img { transform: scale(1.05); }
.ssfp-card-image--placeholder {
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--ssfp-border);
}

.ssfp-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; gap: 10px; }

.ssfp-card-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.ssfp-cat-badge {
  font-size:    11px;
  font-weight:  700;
  text-transform: uppercase;
  letter-spacing:.05em;
  color:        var(--ssfp-primary);
  background:   color-mix(in srgb, var(--ssfp-primary) 10%, transparent);
  padding:      3px 9px;
  border-radius:20px;
}

.ssfp-card-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; }
.ssfp-card-title a { color: var(--ssfp-text); text-decoration: none; transition: color var(--ssfp-transition); }
.ssfp-card-title a:hover { color: var(--ssfp-primary); }

.ssfp-card-excerpt { margin: 0; font-size: 14px; color: var(--ssfp-text-muted); line-height: 1.6; flex: 1; }

.ssfp-card-meta { display: flex; flex-direction: column; gap: 4px; }
.ssfp-meta-item { font-size: 12px; color: var(--ssfp-text-muted); }
.ssfp-meta-item strong { color: var(--ssfp-text); }

.ssfp-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ssfp-tag {
  font-size:    12px;
  color:        var(--ssfp-text-muted);
  background:   var(--ssfp-surface);
  border:       1px solid var(--ssfp-border);
  padding:      2px 8px;
  border-radius:4px;
}

.ssfp-card-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-top:      auto;
  padding-top:     12px;
  border-top:      1px solid var(--ssfp-border);
}
.ssfp-card-date { font-size: 12px; color: var(--ssfp-text-muted); }
.ssfp-card-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  font-size:     13px;
  font-weight:   600;
  color:         var(--ssfp-primary);
  text-decoration:none;
  transition:    gap var(--ssfp-transition), color var(--ssfp-transition);
}
.ssfp-card-btn:hover { gap: 10px; color: var(--ssfp-primary-dark); }

/* ── No Results ─────────────────────────────────────────────── */
.ssfp-no-results {
  text-align: center;
  padding:    60px 20px;
  color:      var(--ssfp-text-muted);
}
.ssfp-no-results-icon { margin-bottom: 16px; color: var(--ssfp-border); }
.ssfp-no-results-title { font-size: 20px; font-weight: 700; color: var(--ssfp-text); margin: 0 0 8px; }
.ssfp-no-results-msg   { font-size: 15px; margin: 0 0 24px; }
.ssfp-no-results-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ── Pagination ─────────────────────────────────────────────── */
.ssfp-pagination { text-align: center; margin-top: 32px; }
.ssfp-load-more-btn {
  padding:    12px 32px;
  background: transparent;
  border:     2px solid var(--ssfp-primary);
  color:      var(--ssfp-primary);
  border-radius:var(--ssfp-radius-sm);
  font-size:  15px;
  font-weight:700;
  font-family:var(--ssfp-font);
  cursor:     pointer;
  transition: background var(--ssfp-transition), color var(--ssfp-transition);
}
.ssfp-load-more-btn:hover { background: var(--ssfp-primary); color: #fff; }
.ssfp-load-more-btn:disabled { opacity:.5; cursor:default; }

/* ── Utilities ──────────────────────────────────────────────── */
.ssfp-hidden { display: none !important; }

/* ── Dark Mode ──────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .ssfp-dark-mode {
    --ssfp-bg:        #1a1a2e;
    --ssfp-surface:   #16213e;
    --ssfp-border:    #2d2d4e;
    --ssfp-text:      #e2e8f0;
    --ssfp-text-muted:#94a3b8;
    --ssfp-card-bg:   #1e1e3f;
    --ssfp-shadow:    0 4px 24px rgba(0,0,0,.4);
  }
  .ssfp-dark-mode .ssfp-search-input,
  .ssfp-dark-mode .ssfp-select {
    background:  var(--ssfp-surface);
    color:       var(--ssfp-text);
    border-color:var(--ssfp-border);
  }
  .ssfp-dark-mode .ssfp-autocomplete,
  .ssfp-dark-mode .ssfp-popular-searches { background: #1e1e3f; border-color: var(--ssfp-border); }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ssfp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ssfp-grid { grid-template-columns: 1fr; }
  .ssfp-search-panel { padding: 16px; }
  .ssfp-filters-row  { flex-direction: column; }
  .ssfp-filter-group { flex: 1 1 100%; }
  .ssfp-btn-group    { flex-direction: row; width: 100%; }
  .ssfp-search-btn   { flex: 1; justify-content: center; }
}

/* ── Accessibility ──────────────────────────────────────────── */
.ssfp-search-input:focus-visible,
.ssfp-search-btn:focus-visible,
.ssfp-clear-btn:focus-visible,
.ssfp-logic-btn:focus-visible,
.ssfp-card-btn:focus-visible,
.ssfp-card-title a:focus-visible {
  outline:        2px solid var(--ssfp-primary);
  outline-offset: 2px;
}

/* ── Card entrance animation ────────────────────────────────── */
@keyframes ssfp-fadeup {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
.ssfp-card {
  animation: ssfp-fadeup .3s ease both;
}
.ssfp-card:nth-child(2)  { animation-delay:.06s }
.ssfp-card:nth-child(3)  { animation-delay:.12s }
.ssfp-card:nth-child(4)  { animation-delay:.18s }
.ssfp-card:nth-child(5)  { animation-delay:.22s }
.ssfp-card:nth-child(6)  { animation-delay:.26s }
.ssfp-card:nth-child(n+7){ animation-delay:.3s  }