/* Smart Post Filter v3.0 — sidebar design */

/* ============================================================
   CSS VARIABLES
============================================================ */
:root {
    --spf-orange:    #f97316;
    --spf-orange-h:  #ea6b0a;
    --spf-red:       #d71635;
    --spf-text:      #303745;
    --spf-gray:      #979ba2;
    --spf-border:    #e5e7eb;
    --spf-bg:        #f9fafb;
    --spf-white:     #ffffff;
    --spf-chip-act:  #e06057;
    --spf-radius:    8px;
    --spf-sidebar-w: 400px;
    --spf-ease:      cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   TRIGGER BUTTON
============================================================ */
.spf-trigger-btn {
    display:      inline-flex;
    align-items:  center;
    gap:          8px;
    background:   var(--spf-orange);
    color:        #fff;
    border:       none;
    border-radius: var(--spf-radius);
    padding:      12px 24px;
    font-family:  'IBM Plex Sans', sans-serif;
    font-size:    15px;
    font-weight:  500;
    cursor:       pointer;
    user-select:  none;
    transition:   background 0.2s, transform 0.15s;
    box-shadow:   0 2px 8px rgba(249,115,22,0.35);
}
.spf-trigger-btn:hover  { background: var(--spf-orange-h); }
.spf-trigger-btn:active { transform: scale(0.97); }

.spf-trigger-count {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       20px;
    height:          20px;
    padding:         0 5px;
    background:      rgba(255,255,255,0.28);
    border-radius:   10px;
    font-size:       12px;
    font-weight:     700;
}

/* ============================================================
   OVERLAY
============================================================ */
.spf-overlay {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.45);
    z-index:    99998;
    opacity:    0;
    visibility: hidden;
    transition: opacity 0.3s var(--spf-ease), visibility 0.3s var(--spf-ease);
}
.spf-overlay.is-open { opacity: 1; visibility: visible; }

/* ============================================================
   SIDEBAR
============================================================ */
.spf-sidebar {
    position:       fixed;
    top:            0;
    right:          0;
    width:          var(--spf-sidebar-w);
    max-width:      100vw;
    height:         100%;
    background:     var(--spf-white);
    z-index:        99999;
    display:        flex;
    flex-direction: column;
    transform:      translateX(100%);
    transition:     transform 0.32s var(--spf-ease);
    box-shadow:     -4px 0 32px rgba(0,0,0,0.14);
}
.spf-sidebar.is-open { transform: translateX(0); }

.spf-sidebar-head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px 24px;
    border-bottom:   1px solid var(--spf-border);
    flex-shrink:     0;
}
.spf-sidebar-title {
    font-family: 'Sora', sans-serif;
    font-size:   18px;
    font-weight: 700;
    color:       var(--spf-text);
    margin:      0;
}
.spf-sidebar-close {
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       var(--spf-gray);
    font-size:   24px;
    line-height: 1;
    padding:     4px 6px;
    transition:  color 0.15s;
    display:     flex;
    align-items: center;
}
.spf-sidebar-close:hover { color: var(--spf-text); }

.spf-sidebar-body {
    flex:       1;
    overflow-y: auto;
    padding:    24px;
}

.spf-sidebar-foot {
    padding:    16px 24px;
    border-top: 1px solid var(--spf-border);
    display:    flex;
    gap:        12px;
    flex-shrink: 0;
}

/* ============================================================
   FILTER GROUPS
============================================================ */
.spf-group { margin-bottom: 28px; }

.spf-group-head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   12px;
}
.spf-group-title {
    font-family:    'Sora', sans-serif;
    font-size:      12px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color:          var(--spf-gray);
}
.spf-clear-btn {
    background:  none;
    border:      none;
    cursor:      pointer;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size:   12px;
    color:       var(--spf-chip-act);
    padding:     0;
    display:     none;
    transition:  opacity 0.15s;
}
.spf-clear-btn:hover { opacity: 0.7; }

/* ============================================================
   CHIPS
============================================================ */
.spf-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.spf-chip {
    display:      inline-flex;
    align-items:  center;
    gap:          6px;
    padding:      6px 13px;
    border:       1.5px solid var(--spf-border);
    border-radius: 20px;
    cursor:       pointer;
    background:   var(--spf-white);
    user-select:  none;
    transition:   border-color 0.15s, background 0.15s, color 0.15s;
}
.spf-chip input[type="checkbox"] { display: none; }
.spf-chip-label {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size:   13px;
    font-weight: 500;
    color:       var(--spf-text);
    transition:  color 0.15s;
}
.spf-chip-count {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size:   11px;
    color:       var(--spf-gray);
    transition:  color 0.15s;
}
.spf-chip:hover { border-color: var(--spf-chip-act); }
.spf-chip.is-active {
    background:   var(--spf-chip-act);
    border-color: var(--spf-chip-act);
}
.spf-chip.is-active .spf-chip-label,
.spf-chip.is-active .spf-chip-count { color: #fff; }

/* ============================================================
   ACTIVE BAR
============================================================ */
.spf-active-bar {
    background:    var(--spf-bg);
    border-radius: var(--spf-radius);
    padding:       10px 14px;
    margin-bottom: 20px;
    display:       none;
}
.spf-active-label {
    display:        block;
    font-family:    'IBM Plex Sans', sans-serif;
    font-size:      11px;
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--spf-gray);
    margin-bottom:  8px;
}
.spf-active-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.spf-active-chip {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    background:  var(--spf-chip-act);
    color:       #fff;
    border-radius: 12px;
    padding:     3px 8px 3px 10px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size:   12px;
    font-weight: 500;
}
.spf-active-chip-remove {
    background:  none;
    border:      none;
    cursor:      pointer;
    color:       rgba(255,255,255,0.75);
    font-size:   13px;
    line-height: 1;
    padding:     0;
    display:     flex;
    align-items: center;
}
.spf-active-chip-remove:hover { color: #fff; }

/* ============================================================
   BUTTONS (inside sidebar footer)
============================================================ */
.spf-btn {
    flex:         1;
    border:       none;
    border-radius: var(--spf-radius);
    padding:      12px 20px;
    font-family:  'IBM Plex Sans', sans-serif;
    font-size:    14px;
    font-weight:  500;
    cursor:       pointer;
    transition:   background 0.15s, opacity 0.15s;
}
.spf-btn-primary {
    background: var(--spf-orange);
    color:      #fff;
    box-shadow: 0 2px 8px rgba(249,115,22,0.25);
}
.spf-btn-primary:hover { background: var(--spf-orange-h); }
.spf-btn-secondary {
    background: var(--spf-bg);
    color:      var(--spf-text);
    border:     1.5px solid var(--spf-border);
}
.spf-btn-secondary:hover { background: var(--spf-border); }

/* ============================================================
   RESULTS
============================================================ */
.spf-results-meta {
    font-family:   'IBM Plex Sans', sans-serif;
    font-size:     14px;
    color:         var(--spf-gray);
    margin-bottom: 16px;
    min-height:    20px;
}
.spf-posts-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   24px;
    min-height:            80px;
    transition:            opacity 0.2s;
}
.spf-posts-grid.is-loading { opacity: 0.4; pointer-events: none; }
.spf-no-results {
    grid-column: 1/-1;
    font-family: 'IBM Plex Sans', sans-serif;
    color:       var(--spf-gray);
    text-align:  center;
    padding:     48px 0;
}

/* ============================================================
   CARD
============================================================ */
.spf-card {
    border-radius:  var(--spf-radius);
    overflow:       hidden;
    background:     var(--spf-white);
    box-shadow:     0 1px 4px rgba(0,0,0,0.07);
    display:        flex;
    flex-direction: column;
    transition:     box-shadow 0.2s, transform 0.2s;
}
.spf-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.11);
    transform:  translateY(-2px);
}
.spf-card-image-wrap {
    display:    block;
    position:   relative;
    height:     200px;
    overflow:   hidden;
    flex-shrink: 0;
}
.spf-card-image {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.35s;
}
.spf-card:hover .spf-card-image { transform: scale(1.04); }
.spf-card-image-placeholder { width: 100%; height: 100%; background: var(--spf-border); }

.spf-card-badge {
    position:       absolute;
    top:            12px;
    left:           12px;
    background:     var(--spf-red);
    color:          #fff;
    font-family:    'Sora', sans-serif;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding:        4px 10px;
    border-radius:  4px;
}
.spf-card-body {
    padding:        16px 20px 20px;
    display:        flex;
    flex-direction: column;
    gap:            8px;
    flex:           1;
}
.spf-card-terms { display: flex; flex-wrap: wrap; gap: 6px; }
.spf-card-term {
    font-family:     'IBM Plex Sans', sans-serif;
    font-size:       11px;
    font-weight:     500;
    padding:         3px 8px;
    border-radius:   4px;
    text-decoration: none;
    transition:      opacity 0.15s;
}
.spf-card-term:hover { opacity: 0.75; }
.spf-card-term--cat { background: rgba(215,22,53,0.08); color: var(--spf-red); }
.spf-card-term--tag { background: rgba(224,96,87,0.08); color: var(--spf-chip-act); }
.spf-card-title {
    margin:      0;
    font-family: 'Sora', sans-serif;
    font-size:   16px;
    font-weight: 700;
    line-height: 1.35;
    color:       var(--spf-text);
}
.spf-card-title a { color: inherit; text-decoration: none; }
.spf-card-title a:hover { color: var(--spf-red); }
.spf-card-meta {
    display:     flex;
    gap:         12px;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size:   12px;
    color:       var(--spf-gray);
    margin-top:  auto;
}

/* ============================================================
   PAGINATION
============================================================ */
.spf-pager {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    margin-top:      32px;
    flex-wrap:       wrap;
}
.spf-pager-btn {
    width:         36px;
    height:        36px;
    border:        1.5px solid var(--spf-border);
    border-radius: var(--spf-radius);
    background:    var(--spf-white);
    cursor:        pointer;
    font-family:   'IBM Plex Sans', sans-serif;
    font-size:     13px;
    color:         var(--spf-text);
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    border-color 0.15s, background 0.15s, color 0.15s;
}
.spf-pager-btn:hover     { border-color: var(--spf-orange); color: var(--spf-orange); }
.spf-pager-btn.is-active { background: var(--spf-orange); border-color: var(--spf-orange); color: #fff; }

/* ============================================================
   SPINNER
============================================================ */
.spf-spinner {
    width:  36px;
    height: 36px;
    border: 3px solid var(--spf-border);
    border-top-color: var(--spf-orange);
    border-radius:    50%;
    animation:        spf-spin 0.7s linear infinite;
    margin:           40px auto;
    grid-column:      1/-1;
}
@keyframes spf-spin { to { transform: rotate(360deg); } }

/* ============================================================
   DYNAMIC TITLE  [smart_post_filter_title]
============================================================ */
.spf-dyn-title {
    margin-bottom: 8px;
}
.spf-dyn-h2 {
    transition: opacity 0.2s;
}
.spf-dyn-filters {
    display:    flex;
    flex-wrap:  wrap;
    gap:        6px;
    margin-top: 10px;
}
.spf-dyn-chip {
    display:     inline-flex;
    align-items: center;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size:   12px;
    font-weight: 500;
    padding:     4px 10px;
    border-radius: 12px;
}
.spf-dyn-chip--cat {
    background: rgba(215,22,53,0.09);
    color:      var(--spf-red);
}
.spf-dyn-chip--tag {
    background: rgba(224,96,87,0.10);
    color:      var(--spf-chip-act);
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 480px) {
    :root { --spf-sidebar-w: 100vw; }
    .spf-posts-grid { grid-template-columns: 1fr; }
}