.asfp-container{border:1px solid #e5e7eb;padding:20px;border-radius:12px;margin:20px 0;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.05)}
.asfp-filter-bar{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px;align-items:flex-start;background:linear-gradient(135deg,#f8fafc 0%,#ffffff 100%);padding:16px;border-radius:8px;border:1px solid #e5e7eb}
.asfp-filter-bar .asfp-label{font-weight:600;color:#111827;margin:2px 4px 4px 0;display:block;font-size:13px;text-transform:uppercase;letter-spacing:0.5px}
.asfp-filter-bar .asfp-label-global{width:100%; font-size:18px;font-weight:700;color:#1f2937;margin-bottom:12px;padding-bottom:12px;border-bottom:2px solid #e5e7eb;text-transform:none;letter-spacing:normal;background:linear-gradient(90deg,#2563eb,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.asfp-filter-bar .asfp-label-search{color:#2563eb}
.asfp-filter-bar .asfp-label-category{color:#059669}
.asfp-filter-bar .asfp-label-tag{color:#dc2626}
.asfp-filter-bar .asfp-label-sort{color:#7c3aed}
.asfp-search-wrap{position:relative;}
.asfp-filter-bar input.asfp-search{width:100%;padding:10px 14px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;transition:all 0.3s ease;font-size:14px}
.asfp-filter-bar input.asfp-search:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,0.1);outline:none}
.asfp-filter-bar .asfp-filter-group{position:relative}
.asfp-filter-bar select{padding:10px 40px 10px 14px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;transition:all 0.3s ease;font-size:14px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
/* Up icon when dropdown is open */
.asfp-filter-bar select.asfp-dropdown-open{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 3l5 5H1z'/%3E%3C/svg%3E")}
/* Hide default dropdown arrow for all selects */
.asfp-filter-bar select::-ms-expand{display:none}
.asfp-filter-bar select:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,0.1);outline:none}
.asfp-filter-bar .asfp-apply{padding:10px 20px;border:none;background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);color:#fff;border-radius:8px;cursor:pointer;font-weight:600;transition:all 0.3s ease;box-shadow:0 2px 4px rgba(37,99,235,0.2)}
.asfp-filter-bar .asfp-apply:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(37,99,235,0.4)}
.asfp-autocomplete{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e5e7eb;border-top:none;border-radius:0 0 6px 6px;box-shadow:0 8px 16px rgba(0,0,0,0.08);max-height:320px;overflow:auto;display:none;z-index:1000}
.asfp-autocomplete .asfp-suggest{padding:10px 12px;cursor:pointer;display:flex;align-items:center;gap:12px;transition:background 0.2s ease}
.asfp-autocomplete .asfp-suggest:hover{background:#f3f4f6}
.asfp-autocomplete .asfp-suggest-image{width:50px;height:50px;object-fit:cover;border-radius:6px;flex-shrink:0}
.asfp-autocomplete .asfp-suggest-no-image{width:50px;height:50px;background:#e5e7eb;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.asfp-autocomplete .asfp-suggest-no-image::before{content:"📷";font-size:24px;opacity:0.3}
.asfp-autocomplete .asfp-suggest-title{flex:1;font-size:14px;color:#1e293b;line-height:1.4}
.asfp-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;min-height:40px}
.asfp-results.asfp-loading{opacity:.6}
.asfp-results.asfp-template5-layout{grid-template-columns:1fr;gap:32px}
.asfp-no-results{grid-column:1/-1;text-align:center;padding:60px 20px;background:#f9fafb;border:2px dashed #e5e7eb;border-radius:12px;color:#6b7280;font-size:16px;font-weight:500}
@media (min-width: 1280px) {
    .asfp-results.asfp-template5-layout{grid-template-columns:repeat(2,1fr)}
   .asfp-design-sidebar .asfp-template7-layout{grid-template-columns: repeat(2, 1fr);} 
}

/* Template 6 - Masonry Grid Layout */
.asfp-results.asfp-template6-layout {
    display: block;
    width: 100%;
    column-gap: 2rem;
    column-count: 1;
}
.asfp-results.asfp-template6-layout .asfp-no-results{display:block;margin:0 auto;   column-span:all;-webkit-column-span:all}

@media (min-width: 768px) {
    .asfp-results.asfp-template6-layout {
        column-count: 2;
    }
}

@media (min-width: 992px) {
    .asfp-results.asfp-template6-layout {
        column-count: 3;
    }
}

.asfp-results.asfp-template6-layout > .asfp-item {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 2rem;
    display: block;
    width: 100%;
}

/* Base Item Styles */
.asfp-item{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.08);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);position:relative}
.asfp-item:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,0.15);border-color:#d1d5db}

/* Image Container with Zoom Effect */
.asfp-image-container{position:relative;overflow:hidden;height:250px}
.asfp-image{width:100%;height:100% !important;object-fit:cover;transition:transform 0.4s ease}
.asfp-item:hover .asfp-image{transform:scale(1.1)}

/* Category Tags - Colors are set dynamically from theme settings */
.asfp-category-tag{display:inline-block;background:#3b82f6;color:#fff;padding:6px 12px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;box-shadow:0 2px 8px rgba(0,0,0,0.15);transition:all 0.3s ease}
.asfp-category-badge-wrapper{position:absolute;top:16px;left:16px;z-index:10}
.asfp-category{color:#2563eb;font-size:12px;font-weight:600;letter-spacing:0.5px;margin-bottom:8px}

/* Content Area */
.asfp-content{padding:20px}
.asfp-title{font-size:18px;font-weight:700;margin:0 0 12px 0;line-height:1.3}
.asfp-title a{color:#1f2937;text-decoration:none;transition:color 0.3s ease}
.asfp-title a:hover{color:#2563eb}
.asfp-excerpt{font-size:14px;color:#6b7280;line-height:1.5;margin:0 0 12px 0}

/* Meta Information (Date & Author) - Displayed after excerpt */
.asfp-meta-info{display:flex;gap:16px;align-items:center;font-size:13px;color:#6b7280;padding-top:12px;border-top:1px solid #e5e7eb}
.asfp-meta-info .asfp-date,
.asfp-meta-info .asfp-author{display:inline-flex;align-items:center}
.asfp-meta{display:flex;gap:8px;align-items:center;font-size:12px;color:#9ca3af;margin-top:12px;padding-top:12px;border-top:1px solid #e5e7eb}
.asfp-meta-item{display:inline-flex;align-items:center}
.asfp-meta-separator{margin:0 4px;opacity:0.5}

.asfp-date{font-size:12px;color:#9ca3af}
.asfp-author{font-size:12px;color:#9ca3af}
.asfp-author-info{display:flex;align-items:center;gap:12px;font-size:12px;color:#6b7280}
.asfp-author-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #e5e7eb}
.asfp-author-details{display:flex;flex-direction:column;gap:2px}
.asfp-author{font-weight:600;color:#374151;display:block}
.asfp-author-name{font-weight:600;color:#374151;font-size:14px;display:block}
.asfp-role{color:#9ca3af;font-style:italic;font-size:11px;display:block}
.asfp-author-role{color:#9ca3af;font-size:11px;display:block}
.asfp-read-more{margin-top:15px}
.asfp-read-more a{color:#2563eb;text-decoration:none;font-weight:600;font-size:14px;transition:all 0.3s ease;display:inline-flex;align-items:center;gap:4px}
.asfp-read-more a:hover{color:#1d4ed8;transform:translateX(4px)}
.asfp-read-more a svg{transition:transform 0.3s ease}
.asfp-read-more a:hover svg{transform:translateX(4px)}

/* Template 1 - Modern Card with Overlay */
.asfp-template1 .asfp-image-container{position:relative}
.asfp-template1 .asfp-image-container::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);opacity:0;transition:opacity 0.4s ease}
.asfp-template1:hover .asfp-image-container::after{opacity:1}
.asfp-template1 .asfp-category-tag {
    color: #fff;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
    top: 13px;
    position: absolute;
    left: 13px;
    background-color: transparent;
    border: 1px solid #20394e;
    background-color: rgb(32 57 78 / 23%);
}.asfp-template1:hover .asfp-category-tag{transform:scale(1.05);box-shadow:0 4px 12px rgba(37,99,235,0.4)}

/* Template 2 - Professional Business */
.asfp-template2{border-left:4px solid #2563eb}
.asfp-template2 .asfp-category-tag{background:#059669;color:#fff;top:12px;left:12px;right:auto}
.asfp-template2 .asfp-date{color:#2563eb;font-weight:600}
.asfp-template2 .asfp-author-info{border-top:1px solid #e5e7eb;padding-top:12px;margin-top:12px}

/* Template 3 - Travel Blog */
.asfp-template3{background:linear-gradient(135deg,#f8fafc 0%,#ffffff 100%)}
.asfp-template3 .asfp-category{color:#059669;font-weight:700}
.asfp-template3 .asfp-read-more a{background:#2563eb;color:#fff;padding:8px 16px;border-radius:20px;display:inline-block;transition:all 0.3s ease}
.asfp-template3 .asfp-read-more a:hover{background:#1d4ed8;transform:translateY(-2px)}

/* Responsive Design */
@media (max-width: 768px) {
    .asfp-results{grid-template-columns:1fr;gap:15px}
    .asfp-image-container{height:180px}
    .asfp-content{padding:15px}
    .asfp-title{font-size:16px}
}

.asfp-status{display:none !important;}
.asfp-error{padding:8px;border:1px solid #ef4444;background:#fee2e2;color:#991b1b;border-radius:4px}
.asfp-tabs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.asfp-tab{padding:6px 10px;border:1px solid #cbd5e1;background:#f8fafc;color:#111827;border-radius:999px;cursor:pointer;font-size:13px}
.asfp-tab.active{background:#2563eb;border-color:#2563eb;color:#fff}

/* Enhanced label styling */
.asfp-filter-bar .asfp-label{
    position: relative;
    margin-bottom: 4px;
}

.asfp-filter-bar .asfp-label::after{
    content: ':';
    margin-left: 2px;
}

.asfp-filter-bar .asfp-label-global::after{
    content: '';
}

/* Filter group styling */
.asfp-filter-group{
    display: flex;
    flex-direction: column;
    margin-right: 16px;
    margin-bottom: 8px;
}

.asfp-filter-group{
    display: flex;
    flex-direction: column;
    margin-right: 16px;
    margin-bottom: 8px;
}

.asfp-filter-group:last-child{
    margin-right: 0;
}

/* Additional styling improvements */
.asfp-filter-bar .asfp-apply{
    padding: 10px 20px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.asfp-filter-bar .asfp-apply:hover{
    background: #1d4ed8;
    border-color: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
}

.asfp-filter-bar select.asfp-sort{
    min-width: 150px;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px !important;
    padding-right: 40px !important;
    text-indent: 0.01px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background-color: #fff !important;
}
/* Hide default browser dropdown icons for all browsers */
.asfp-filter-bar select.asfp-sort::-ms-expand {
    display: none !important;
}
/* Additional override to ensure no default icon shows */
.asfp-filter-bar .asfp-filter-group:has(select.asfp-sort) select.asfp-sort {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.asfp-filter-bar .asfp-search-wrap{
    position: relative;
}

.asfp-filter-bar .asfp-search:focus{
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}


/* Template 4 - Author Focused Blog Style */
.asfp-template4{background:#fff;border:1px solid #e5e7eb;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.asfp-template4 .asfp-category-tag{background:#2563eb;color:#fff;border-radius:20px;padding:6px 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px}
.asfp-template4 .asfp-date{color:#2563eb;font-weight:600;font-size:13px;margin-bottom:10px;display:flex;align-items:center;gap:4px}
.asfp-template4 .asfp-date-icon{font-size:14px}
.asfp-template4 .asfp-title{color:#1e293b;font-size:19px;font-weight:700;margin-bottom:10px}
.asfp-template4 .asfp-excerpt{color:#64748b;font-size:14px;line-height:1.6;margin-bottom:16px}
.asfp-template4 .asfp-author-info{background:#f8fafc;padding:12px;border-radius:8px;margin-top:12px;border:1px solid #e2e8f0}
.asfp-template4 .asfp-author-avatar{width:48px;height:48px;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,0.1)}
.asfp-template4 .asfp-author-name{font-weight:700;color:#1e293b;font-size:14px}
.asfp-template4 .asfp-author-role{color:#64748b;font-size:12px;font-weight:500}
.asfp-template4:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,0.12)}

/* Template 5 - Horizontal Card Layout */
.asfp-template5{background:#fff;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,0.1);overflow:hidden;display:flex;flex-direction:column;transition:all 0.3s ease}
.asfp-template5:hover{box-shadow:0 10px 25px rgba(0,0,0,0.15)}
.asfp-template5 .asfp-image-section{width:100%;height:224px;overflow:hidden}
.asfp-template5 .asfp-image{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease}
.asfp-template5:hover .asfp-image{transform:scale(1.05)}
.asfp-template5 .asfp-content-section{padding:24px;display:flex;flex-direction:column;justify-content:space-between;flex:1}
.asfp-template5 .asfp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.asfp-template5 .asfp-date-wrapper{display:flex;align-items:center;color:#6b7280;font-size:14px}
.asfp-template5 .asfp-calendar-icon{width:20px;height:20px;margin-right:8px;color:#9ca3af}
.asfp-template5 .asfp-category-badge{background:#dbeafe;color:#fff;font-size:12px;font-weight:600;padding:6px 12px;border-radius:9999px}
.asfp-template5 .asfp-title{font-size:20px;font-weight:700;color:#111827;margin-bottom:8px;line-height:1.3}
.asfp-template5 .asfp-title a{color:#111827;text-decoration:none;transition:color 0.3s ease}
.asfp-template5 .asfp-title a:hover{color:#2563eb}
.asfp-template5 .asfp-excerpt{color:#6b7280;font-size:16px;line-height:1.5;margin-bottom:24px}
.asfp-template5 .asfp-author-info{display:flex;align-items:center;gap:16px}
.asfp-template5 .asfp-author-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}
.asfp-template5 .asfp-author-details{display:flex;flex-direction:column}
.asfp-template5 .asfp-author-name{font-weight:600;color:#111827;font-size:14px;margin:0}
.asfp-template5 .asfp-author-role{color:#6b7280;font-size:14px;margin:0}

/* Template 5 Responsive - Horizontal on larger screens */
@media (min-width: 640px) {
    .asfp-template5{flex-direction:row}
    .asfp-template5 .asfp-image-section{width:41.666667%;height:auto;min-height:280px}
    .asfp-template5 .asfp-content-section{width:58.333333%}
}

/* Template 6 - Masonry Grid Layout - Styles defined at top of file */
.asfp-template6{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 4px 6px rgba(0,0,0,0.1);transition:all 0.3s ease;break-inside:avoid;margin-bottom:2rem}
.asfp-template6:hover{transform:translateY(-4px);box-shadow:0 10px 20px rgba(0,0,0,0.15)}
.asfp-template6 .asfp-image-container{position:relative;overflow:hidden;width:100%}
.asfp-template6 .asfp-image{width:100%;height:100%;display:block;transition:transform 0.4s ease}
.asfp-template6:hover .asfp-image{transform:scale(1.05)}
.asfp-template6 .asfp-content{padding:24px}
.asfp-template6 .asfp-category{color:#ef4444;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;display:block}
.asfp-template6 .asfp-category.food{color:#ef4444}
.asfp-template6 .asfp-category.travel{color:#3b82f6}
.asfp-template6 .asfp-category.adventure{color:#10b981}
.asfp-template6 .asfp-category.lifestyle{color:#8b5cf6}
.asfp-template6 .asfp-category.business{color:#f59e0b}
.asfp-template6 .asfp-category.music{color:#ec4899}
.asfp-template6 .asfp-title{font-size:24px;font-weight:700;margin:8px 0 12px 0;line-height:1.3;color:#1f2937}
.asfp-template6 .asfp-title a{color:#1f2937;text-decoration:none;transition:color 0.3s ease}
.asfp-template6 .asfp-title a:hover{color:#2563eb}
.asfp-template6 .asfp-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:14px;color:#6b7280;margin-bottom:16px}
.asfp-template6 .asfp-meta-item{display:inline-block}
.asfp-template6 .asfp-meta-separator{color:#d1d5db;margin:0 4px}
.asfp-template6 .asfp-excerpt{color:#4b5563;line-height:1.6;font-size:16px}

.asfp-template6 .asfp-title a {
    color: #1f2937;
    text-decoration: none;
    transition: color 0.3s ease;
}

.asfp-template6 .asfp-title a:hover {
    color: #2563eb;
}

.asfp-template6 .asfp-meta {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}

.asfp-template6 .asfp-meta-item {
    display: flex;
    align-items: center;
}

.asfp-template6 .asfp-meta-separator {
    color: #d1d5db;
    margin: 0 4px;
}

.asfp-template6 .asfp-excerpt {
    font-size: 16px;
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .asfp-filter-bar{
        flex-direction: column;
        align-items: stretch;
    }
    
    .asfp-filter-group{
        margin-right: 0;
        margin-bottom: 12px;
    }
    
    .asfp-search-wrap{
        min-width: 100%;
    }
    
    .asfp-filter-bar .asfp-apply{
        margin-top: 10px;
        width: 100%;
    }
    
    .asfp-template6 .asfp-title {
        font-size: 20px;
    }
    
    .asfp-template6 .asfp-excerpt {
        font-size: 14px;
    }
}

/* ============================================
   FILTER DESIGN VARIATIONS
   ============================================ */

/* Variation 1: Minimalist & Modern */
.asfp-container.asfp-design-minimalist .asfp-filter-bar {
    background-color: white;
    padding: 1.5rem 2rem;
    border-radius: 0.75rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.asfp-container.asfp-design-minimalist .asfp-filter-group {
    margin: 0;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.asfp-container.asfp-design-minimalist .asfp-search-wrap {
    position: relative;
    min-width: 200px;
    flex: 0 0 auto;
}


.asfp-container.asfp-design-minimalist .asfp-search {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.asfp-container.asfp-design-minimalist .asfp-search:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.asfp-container.asfp-design-minimalist .asfp-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    white-space: nowrap;
    margin-right: 0.5rem;
}

.asfp-container.asfp-design-minimalist .asfp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.asfp-container.asfp-design-minimalist .asfp-tab {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 9999px;
    border: none;
    background-color: #f3f4f6;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s ease;
}

.asfp-container.asfp-design-minimalist .asfp-tab:hover {
    background-color: #e5e7eb;
}

.asfp-container.asfp-design-minimalist .asfp-tab.active {
    background-color: #3b82f6;
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.asfp-container.asfp-design-minimalist select {
    appearance: none;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #374151;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: bolder;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 150px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}

.asfp-container.asfp-design-minimalist select:focus {
    outline: none;
    background-color: white;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Variation 2: Sidebar Style */
.asfp-container.asfp-design-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.asfp-container.asfp-design-sidebar .asfp-filter-bar {
    background-color: #f9fafb;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.asfp-container.asfp-design-sidebar .asfp-filter-group {
    margin: 0;
    width: 100%;
}

.asfp-container.asfp-design-sidebar .asfp-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 0.75rem;
    display: block
}

.asfp-container.asfp-design-sidebar .asfp-label::after {
    content: none;
}

.asfp-container.asfp-design-sidebar .asfp-search-wrap {
    position: relative;
    width: 100%;
}


.asfp-container.asfp-design-sidebar .asfp-search {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    height: 40px;
}

.asfp-container.asfp-design-sidebar .asfp-search:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.asfp-container.asfp-design-sidebar .asfp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.asfp-container.asfp-design-sidebar .asfp-tab {
    padding: 0.5rem 0.75rem;
    text-align: center;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    background-color: white;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 0 1 auto;
}

.asfp-container.asfp-design-sidebar .asfp-tab:hover {
    background-color: #f3f4f6;
}

.asfp-container.asfp-design-sidebar .asfp-tab.active {
    background-color: #6366f1;
    color: white;
    border-color: #6366f1;
}

.asfp-container.asfp-design-sidebar select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background-color: white;
    color: #374151;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 400;
    height: 40px;
}

.asfp-container.asfp-design-sidebar select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.asfp-container.asfp-design-sidebar .asfp-apply {
    width: 100%;
    padding: 0.625rem 1rem;
    background-color: #6366f1;
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}

.asfp-container.asfp-design-sidebar .asfp-apply:hover {
    background-color: #4f46e5;
}

/* Sidebar layout on larger screens */
@media (min-width: 768px) {
    .asfp-container.asfp-design-sidebar {
        flex-direction: row;
    }
    
    .asfp-container.asfp-design-sidebar .asfp-filter-bar {
        width: 16rem;
        flex-shrink: 0;
    }
    
    .asfp-container.asfp-design-sidebar .asfp-content-wrapper {
        flex: 1;
    }
}

/* Variation 3: Compact Dropdowns */
.asfp-container.asfp-design-compact .asfp-filter-bar {
    background-color: #f9fafb;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
}

.asfp-container.asfp-design-compact .asfp-filter-group {
    margin: 0;
    display: flex;
    gap: 0.5rem;
}

.asfp-container.asfp-design-compact .asfp-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.asfp-container.asfp-design-compact .asfp-search-wrap {
    flex-grow: 1;
    min-width: 12rem;
}

.asfp-container.asfp-design-compact .asfp-search {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    background-color: white;
    transition: all 0.2s ease;
    height: 40px;
}

.asfp-container.asfp-design-compact .asfp-search:focus {
    outline: none;
    border-color: #a855f7;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}
.asfp-container.asfp-design-compact .asfp-filter-group{position:relative}
.asfp-container.asfp-design-compact select{
    height: 40px;
    padding-right: 2rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
}
/* Up icon when dropdown is open (compact design) */
.asfp-container.asfp-design-compact select.asfp-dropdown-open{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 3l5 5H1z'/%3E%3C/svg%3E");
}
.asfp-container.asfp-design-compact select,
.asfp-container.asfp-design-compact .asfp-tabs {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;   
    border-radius: 0.375rem;
    background-color: white;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.asfp-container.asfp-design-compact .asfp-sort-icon {
display: none;
}
.asfp-container.asfp-design-compact select:hover,
.asfp-container.asfp-design-compact .asfp-tabs:hover {
    background-color: #f9fafb;
}

.asfp-container.asfp-design-compact select:focus {
    outline: none;
    border-color: #a855f7;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.asfp-container.asfp-design-compact .asfp-tab {
    padding: 0.375rem 0.75rem;
    border: 1px solid #d1d5db;
    background-color: white;
    color: #374151;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.asfp-container.asfp-design-compact .asfp-tab:hover {
    background-color: #f3f4f6;
}

.asfp-container.asfp-design-compact .asfp-tab.active {
    background-color: #a855f7;
    color: white;
    border-color: #a855f7;
}

/* Icon styling for modern designs */
.asfp-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
}

/* Add padding to search input when icon is present */
.asfp-search-wrap:has(.asfp-search-icon) .asfp-search,
.asfp-container.asfp-design-minimalist .asfp-search-wrap:has(.asfp-search-icon) .asfp-search,
.asfp-container.asfp-design-sidebar .asfp-search-wrap:has(.asfp-search-icon) .asfp-search,
.asfp-container.asfp-design-compact .asfp-search-wrap:has(.asfp-search-icon) .asfp-search {
    padding-left: 2.75rem !important;
}

.asfp-sort-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.asfp-sort-wrapper select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px !important;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/* Up icon when dropdown is open (sort wrapper) */
.asfp-sort-wrapper select.asfp-dropdown-open {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 3l5 5H1z'/%3E%3C/svg%3E") !important;
}
.asfp-sort-wrapper select::-ms-expand {
    display: none !important;
}
.asfp-sort-wrapper select::-webkit-appearance {
    -webkit-appearance: none !important;
}
.asfp-sort-wrapper select::-moz-appearance {
    -moz-appearance: none !important;
}

.asfp-sort-icon {
    display: none;
}

.asfp-chevron-icon {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: #9ca3af;
    pointer-events: none;
}

/* Responsive adjustments for all variations */
@media (max-width: 640px) {
    .asfp-container.asfp-design-minimalist .asfp-filter-bar,
    .asfp-container.asfp-design-compact .asfp-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .asfp-container.asfp-design-minimalist .asfp-search-wrap,
    .asfp-container.asfp-design-compact .asfp-search-wrap {
        width: 100%;
        min-width: 100%;
    }
    
    .asfp-container.asfp-design-minimalist select,
    .asfp-container.asfp-design-compact select {
        width: 100%;
    }
}

/* ============================================
   PAGINATION STYLES
   ============================================ */

.asfp-pagination {

    display: flex;
    justify-content: center;
    align-items: center;
}

.asfp-pager {
    display: flex;
    margin-top: 2.5rem;
    align-items: center;
    gap: 0.5rem;
}

.asfp-pager button {
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e5e7eb;
    background-color: #fff;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.asfp-pager button:hover:not([disabled]) {
    background-color: #f9fafb;
    border-color: #d1d5db;
}

.asfp-pager button.active {
    background-color: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}

.asfp-pager button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f9fafb;
}

.asfp-pager .asfp-prev,
.asfp-pager .asfp-next {
    min-width: auto;
    padding: 0.5rem 1rem;
}

.asfp-pager .asfp-pages {
    display: flex;
    gap: 0.5rem;
    margin: 0 0.5rem;
}

/* Responsive pagination */
@media (max-width: 640px) {
    .asfp-pagination {
        margin-top: 1.5rem;
    }
    
    .asfp-pager button {
        min-width: 2rem;
        height: 2rem;
        padding: 0.375rem 0.5rem;
        font-size: 0.8125rem;
    }
    
    .asfp-pager .asfp-prev,
    .asfp-pager .asfp-next {
        padding: 0.375rem 0.75rem;
    }
}

/* ============================================
   COLOR THEMES
   ============================================ */

/* Blue Theme (Default) */
.asfp-theme-blue .asfp-tab.active,
.asfp-theme-blue .asfp-pager button.active {background-color:#3b82f6;border-color:#3b82f6;color:#fff}
.asfp-theme-blue .asfp-title a:hover,
.asfp-theme-blue .asfp-read-more a {color:#2563eb}
.asfp-theme-blue .asfp-read-more a:hover {color:#1d4ed8}
.asfp-theme-blue .asfp-search:focus,
.asfp-theme-blue select:focus {border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.1)}

/* Green Theme */
.asfp-theme-green .asfp-tab.active,
.asfp-theme-green .asfp-pager button.active {background-color:#10b981;border-color:#10b981;color:#fff}
.asfp-theme-green .asfp-title a:hover,
.asfp-theme-green .asfp-read-more a {color:#059669}
.asfp-theme-green .asfp-read-more a:hover {color:#047857}
.asfp-theme-green .asfp-search:focus,
.asfp-theme-green select:focus {border-color:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,0.1)}

/* Purple Theme */
.asfp-theme-purple .asfp-tab.active,
.asfp-theme-purple .asfp-pager button.active {background-color:#8b5cf6;border-color:#8b5cf6;color:#fff}
.asfp-theme-purple .asfp-title a:hover,
.asfp-theme-purple .asfp-read-more a {color:#7c3aed}
.asfp-theme-purple .asfp-read-more a:hover {color:#6d28d9}
.asfp-theme-purple .asfp-search:focus,
.asfp-theme-purple select:focus {border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,0.1)}

/* Red Theme */
.asfp-theme-red .asfp-tab.active,
.asfp-theme-red .asfp-pager button.active {background-color:#ef4444;border-color:#ef4444;color:#fff}
.asfp-theme-red .asfp-title a:hover,
.asfp-theme-red .asfp-read-more a {color:#dc2626}
.asfp-theme-red .asfp-read-more a:hover {color:#b91c1c}
.asfp-theme-red .asfp-search:focus,
.asfp-theme-red select:focus {border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,0.1)}

/* Orange Theme */
.asfp-theme-orange .asfp-tab.active,
.asfp-theme-orange .asfp-pager button.active {background-color:#f97316;border-color:#f97316;color:#fff}
.asfp-theme-orange .asfp-title a:hover,
.asfp-theme-orange .asfp-read-more a {color:#ea580c}
.asfp-theme-orange .asfp-read-more a:hover {color:#c2410c}
.asfp-theme-orange .asfp-search:focus,
.asfp-theme-orange select:focus {border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,0.1)}

/* Pink Theme */
.asfp-theme-pink .asfp-tab.active,
.asfp-theme-pink .asfp-pager button.active {background-color:#ec4899;border-color:#ec4899;color:#fff}
.asfp-theme-pink .asfp-title a:hover,
.asfp-theme-pink .asfp-read-more a {color:#db2777}
.asfp-theme-pink .asfp-read-more a:hover {color:#be185d}
.asfp-theme-pink .asfp-search:focus,
.asfp-theme-pink select:focus {border-color:#ec4899;box-shadow:0 0 0 3px rgba(236,72,153,0.1)}

/* Teal Theme */
.asfp-theme-teal .asfp-tab.active,
.asfp-theme-teal .asfp-pager button.active {background-color:#14b8a6;border-color:#14b8a6;color:#fff}
.asfp-theme-teal .asfp-title a:hover,
.asfp-theme-teal .asfp-read-more a {color:#0d9488}
.asfp-theme-teal .asfp-read-more a:hover {color:#0f766e}
.asfp-theme-teal .asfp-search:focus,
.asfp-theme-teal select:focus {border-color:#14b8a6;box-shadow:0 0 0 3px rgba(20,184,166,0.1)}

/* Indigo Theme */
.asfp-theme-indigo .asfp-tab.active,
.asfp-theme-indigo .asfp-pager button.active {background-color:#6366f1;border-color:#6366f1;color:#fff}
.asfp-theme-indigo .asfp-title a:hover,
.asfp-theme-indigo .asfp-read-more a {color:#4f46e5}
.asfp-theme-indigo .asfp-read-more a:hover {color:#4338ca}
.asfp-theme-indigo .asfp-search:focus,
.asfp-theme-indigo select:focus {border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,0.1)}

/* Template 7 - Featured Article + Grid Layout */
/* Layout for Template 7 */
.asfp-results.asfp-template7-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .asfp-results.asfp-template7-layout {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  {
     .asfp-design-sidebar .asfp-template7-layout{grid-template-columns: repeat(2, 1fr);} 
 
}

/* Featured Article - Full Width */
.asfp-template7-featured {
    grid-column: 1 / -1;
    border: none;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.asfp-template7-featured:hover {
    transform: translateY(0);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.asfp-featured-link {
    display: block;
    text-decoration: none;
}

.asfp-featured-bg {
    background-size: cover;
    background-position: center;
    height: 400px;
    position: relative;
}

@media (min-width: 768px) {
    .asfp-featured-bg {
        height: 600px;
    }
}

.asfp-featured-overlay {
    height: 100%;
    width: 100%;
    padding: 1.5rem;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(to top, rgba(17, 24, 39, 0.8) 0%, transparent 100%);
}

@media (min-width: 640px) {
    .asfp-featured-overlay {
        padding: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .asfp-featured-overlay {
        padding: 4rem;
    }
}

.asfp-featured-content {
    max-width: 48rem;
    color: #fff;
}

.asfp-featured-meta {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.asfp-featured-author,
.asfp-featured-date,.asfp-featured-title {
    color: #d1d5db;
}
.asfp-template7 .asfp-featured-title {
margin-top: 0.75rem;
}
.asfp-featured-title {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    line-height: 1.2;
    transition: color 0.3s ease;
}

@media (min-width: 640px) {
    .asfp-featured-title {
        font-size: 2.25rem;
    }
}

@media (min-width: 1024px) {
    .asfp-featured-title {
        font-size: 3rem;
    }
}

.asfp-featured-link:hover .asfp-featured-title {
    color: #d1d5db;
}

.asfp-featured-excerpt {
    color: #d1d5db;
    font-size: 1.125rem;
    margin-bottom: 1rem;
    display: none;
}

@media (min-width: 640px) {
    .asfp-featured-excerpt {
        display: block;
    }
}

.asfp-featured-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.asfp-featured-tag {
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background: transparent;
}

/* Grid Article Cards */
.asfp-template7-grid {
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.asfp-template7-grid:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.asfp-grid-image-link {
    display: block;
    margin-bottom: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

.asfp-template7-grid:hover .asfp-grid-image-link {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.asfp-grid-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.asfp-template7-grid:hover .asfp-grid-image {
    transform: scale(1.03);
}

.asfp-grid-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.asfp-grid-meta {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.asfp-grid-author {
    font-weight: 500;
    color: #1f2937;
    margin: 0;
}

.asfp-meta-separator {
    margin: 0 0.375rem;
}

.asfp-grid-date {
    color: #6b7280;
}

.asfp-grid-title {
    display: flex;
    align-items: flex-start;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    margin-top: 0.5rem;
}

.asfp-grid-title-link {
    color: #1f2937;
    text-decoration: none;
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    transition: color 0.3s ease;
}

.asfp-grid-title-link:hover {
    color: #1d4ed8;
}

.asfp-arrow-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.5rem;
    color: #6b7280;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.asfp-grid-title-link:hover .asfp-arrow-icon {
    transform: translate(2px, -2px);
    color: #1d4ed8;
}

.asfp-grid-excerpt {
    color: #6b7280;
    margin-bottom: 0.75rem;
    flex-grow: 1;
    font-size: 0.875rem;
    line-height: 1.5;
}

.asfp-grid-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.asfp-grid-tag {
    font-size: 0.75rem;
    font-weight: 500;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}