/* ==========================================================
   AJAX Post Search and Filter — Frontend Style v1.0.0
   ========================================================== */

.apf-wrapper { font-family: inherit; }

/* Layout */
.apf-layout { display: flex; gap: 28px; align-items: flex-start; }

/* Sidebar */
.apf-sidebar { width: 260px; flex-shrink: 0; background: var(--apf-sidebar-bg,#f8fafc); border-radius: 10px; padding: 18px; border: 1px solid #e2e8f0; }

/* Search */
.apf-search-wrap { position: relative; margin-bottom: 18px; }
.apf-search { width: 100%; padding: 9px 36px 9px 12px; border: 1px solid var(--apf-search-border,#cbd5e0); border-radius: 6px; font-size: 14px; box-sizing: border-box; outline: none; background: #fff; transition: border-color .2s; }
.apf-search:focus { border-color: var(--apf-accent,#3b82f6); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.apf-search-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: .4; pointer-events: none; }

/* Filter groups */
.apf-filter-group { margin-bottom: 18px; }
.apf-filter-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #94a3b8; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.apf-toggle-label { cursor: pointer; user-select: none; }
.apf-toggle-label:hover { color: #64748b; }
.apf-toggle-icon { display: inline-block; font-size: 16px; transition: transform .2s; line-height: 1; }

/* Checkbox */
.apf-check-label { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 13px; color: #475569; cursor: pointer; }
.apf-check-label input[type="checkbox"],.apf-check-label input[type="radio"] { display: none; }
.apf-checkbox-custom { width: 16px; height: 16px; border: 2px solid #cbd5e0; border-radius: 4px; flex-shrink: 0; position: relative; transition: border-color .15s,background .15s; }
.apf-check-label input[type="checkbox"]:checked + .apf-checkbox-custom { background: var(--apf-accent,#3b82f6); border-color: var(--apf-accent,#3b82f6); }
.apf-check-label input[type="checkbox"]:checked + .apf-checkbox-custom::after { content:''; position:absolute; left:3px; top:0; width:5px; height:9px; border:2px solid #fff; border-top:none; border-left:none; transform:rotate(45deg); }
.apf-check-label:hover .apf-checkbox-custom { border-color: var(--apf-accent,#3b82f6); }

/* Radio */
.apf-radio-custom { width: 16px; height: 16px; border: 2px solid #cbd5e0; border-radius: 50%; flex-shrink: 0; position: relative; transition: border-color .15s; }
.apf-check-label input[type="radio"]:checked + .apf-radio-custom { border-color: var(--apf-accent,#3b82f6); }
.apf-check-label input[type="radio"]:checked + .apf-radio-custom::after { content:''; position:absolute; top:3px; left:3px; width:6px; height:6px; background:var(--apf-accent,#3b82f6); border-radius:50%; }
.apf-check-label:hover .apf-radio-custom { border-color: var(--apf-accent,#3b82f6); }
.apf-check-label:hover { color: #1e293b; }

/* Select dropdown filter */
.apf-select-filter { width:100%; padding:8px 12px; border:1px solid #cbd5e0; border-radius:6px; font-size:13px; background:#fff; color:#374151; cursor:pointer; outline:none; transition:border-color .2s; box-sizing:border-box; }
.apf-select-filter:focus { border-color: var(--apf-accent,#3b82f6); }

/* Show more */
.apf-show-more { display:inline-block; margin-top:4px; color:var(--apf-accent,#3b82f6); cursor:pointer; font-size:12px; font-weight:600; }
.apf-show-more:hover { text-decoration:underline; }

/* Date range */
.apf-date-range { display:flex; flex-direction:column; gap:8px; }
.apf-date-presets { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.apf-date-preset { background:#fff; border:1px solid #cbd5e0; border-radius:5px; padding:5px 4px; font-size:11px; font-weight:500; color:#475569; cursor:pointer; text-align:center; transition:all .15s; }
.apf-date-preset:hover { border-color:var(--apf-accent,#3b82f6); color:var(--apf-accent,#3b82f6); background:#eff6ff; }
.apf-date-preset.active { background:var(--apf-accent,#3b82f6); border-color:var(--apf-accent,#3b82f6); color:#fff; }
.apf-date-custom { display:flex; flex-direction:column; gap:5px; }
.apf-date-label { font-size:11px; color:#94a3b8; font-weight:600; }
.apf-date-input { width:100%; padding:7px 10px; border:1px solid #cbd5e0; border-radius:6px; font-size:13px; box-sizing:border-box; outline:none; background:#fff; color:#374151; }
.apf-date-input:focus { border-color:var(--apf-accent,#3b82f6); }
.apf-clear-date { background:none; border:none; color:#ef4444; font-size:12px; font-weight:600; cursor:pointer; padding:2px 0; text-align:left; }
.apf-clear-date:hover { text-decoration:underline; }

/* Reset button */
.apf-reset-btn { width:100%; margin-top:16px; padding:8px 0; background:none; border:1px solid #e2e8f0; border-radius:6px; font-size:12px; font-weight:600; color:#94a3b8; cursor:pointer; transition:border-color .2s,color .2s; }
.apf-reset-btn:hover { border-color:#ef4444; color:#ef4444; }

/* Main */
.apf-main { flex:1; min-width:0; }

/* Top bar */
.apf-top-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:12px; flex-wrap:nowrap; }
.apf-results-count { font-size:14px; color:#64748b; font-weight:500; }
.apf-sort-wrap { display:flex; align-items:center; gap:6px; flex-shrink:0; white-space:nowrap; }
.apf-sort-label { font-size:14px; color:#64748b; }
.apf-sort-select { border:1px solid #e2e8f0; border-radius:6px; padding:6px 10px; font-size:14px; background:#fff; color:#374151; cursor:pointer; outline:none; }
.apf-sort-select:focus { border-color:var(--apf-accent,#3b82f6); }

/* Active chips */
.apf-active-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.apf-chip { display:inline-flex; align-items:center; gap:4px; background:#eff6ff; border:1px solid #bfdbfe; color:#1d4ed8; border-radius:20px; padding:3px 10px 3px 12px; font-size:12px; font-weight:500; }
.apf-chip-author { background:#f0fdf4; border-color:#bbf7d0; color:#15803d; }
.apf-chip-date   { background:#fdf4ff; border-color:#e9d5ff; color:#7e22ce; }
.apf-chip-remove { background:none; border:none; padding:0; margin-left:2px; font-size:14px; line-height:1; cursor:pointer; color:inherit; opacity:.6; }
.apf-chip-remove:hover { opacity:1; }

/* Grid */
.apf-posts-wrap { position:relative; }
.apf-posts { display:grid; gap:20px; }
.apf-posts.apf-cols-3 { grid-template-columns:repeat(3,1fr); }
.apf-posts.apf-cols-2 { grid-template-columns:repeat(2,1fr); }
.apf-posts.apf-cols-1 { grid-template-columns:1fr; }

/* Post card */
.apf-post { background:var(--apf-card-bg,#fff); border:var(--apf-card-border-width,1px) solid var(--apf-card-border,#e2e8f0); border-radius:var(--apf-card-radius,8px); box-shadow:var(--apf-card-shadow,none); display:flex; flex-direction:column; overflow:hidden; transition:box-shadow .2s,transform .2s; }
.apf-post:hover { box-shadow:0 8px 28px rgba(0,0,0,.14); transform:translateY(-3px); }
.apf-post-thumbnail { overflow:hidden; height:var(--apf-img-height,200px); }
.apf-post-thumbnail a { display:block; height:100%; }
.apf-post-thumbnail img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }
.apf-post:hover .apf-post-thumbnail img { transform:scale(1.05); }
.apf-post-body { padding:16px; display:flex; flex-direction:column; flex:1; }
.apf-post-title { font-size:var(--apf-title-size,17px); font-weight:var(--apf-title-weight,bold); margin:0 0 8px; line-height:1.35; }
.apf-post-title a { color:var(--apf-title-color,#1a202c); text-decoration:none; }
.apf-post-title a:hover { color:var(--apf-accent,#3b82f6); }
.apf-post-excerpt { color:var(--apf-excerpt-color,#718096); font-size:var(--apf-excerpt-size,14px); line-height:1.65; flex-grow:1; margin-bottom:12px; }
.apf-post-excerpt p { margin:0; }

/* Post meta */
.apf-post-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:12px; padding-top:10px; border-top:1px solid #f1f5f9; }
.apf-meta-author,.apf-meta-date { display:inline-flex; align-items:center; gap:5px; font-size:var(--apf-meta-size,12px); color:var(--apf-meta-color,#94a3b8); }
.apf-meta-icon { width:13px; height:13px; flex-shrink:0; stroke:currentColor; }

/* Read more */
.apf-read-more { display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:600; color:var(--apf-readmore-color,#3b82f6); text-decoration:none; margin-top:auto; }
.apf-read-more::after { content:'→'; transition:transform .15s; }
.apf-read-more:hover::after { transform:translateX(3px); }

/* No posts */
.apf-no-posts { color:#94a3b8; font-size:15px; padding:32px 0; text-align:center; grid-column:1/-1; }

/* Load More */
.apf-load-more-wrap { text-align:center; margin-top:28px; }
.apf-load-more { padding:11px 32px; background:var(--apf-btn-bg,#3b82f6); color:var(--apf-btn-color,#fff); border:none; border-radius:var(--apf-btn-radius,6px); font-size:14px; font-weight:600; cursor:pointer; transition:opacity .2s,transform .15s; }
.apf-load-more:hover { opacity:.88; transform:translateY(-1px); }

/* RTL */
.apf-rtl { direction:rtl; }
.apf-rtl .apf-layout { flex-direction:row-reverse; }
.apf-rtl .apf-search-icon { right:auto; left:10px; }
.apf-rtl .apf-search { padding:9px 12px 9px 36px; }
.apf-rtl .apf-check-label { flex-direction:row-reverse; justify-content:flex-end; }
.apf-rtl .apf-filter-label { flex-direction:row-reverse; }
.apf-rtl .apf-top-bar { flex-direction:row-reverse; }
.apf-rtl .apf-post-meta { flex-direction:row-reverse; }
.apf-rtl .apf-read-more::after { content:'←'; }
.apf-rtl .apf-active-chips { flex-direction:row-reverse; }
.apf-rtl .apf-date-presets { direction:rtl; }

/* Responsive */
@media(max-width:960px) { .apf-posts.apf-cols-3 { grid-template-columns:repeat(2,1fr); } .apf-sidebar { width:210px; } }
@media(max-width:660px) { .apf-layout { flex-direction:column; } .apf-sidebar { width:100%; } .apf-posts.apf-cols-3,.apf-posts.apf-cols-2 { grid-template-columns:1fr; } }