/* --- FEED TABS (Sticky & Standard) --- */
.pe-feed-section { position: relative; padding-bottom: 60px; background: var(--bg-body); }

/* Sticky Wrapper (Home) */
.pe-sticky-tabs-wrapper {
    width: 100%;
    background: var(--bg-body); 
    border-bottom: 1px solid var(--border-color);
    padding: 12px 0;
    margin-bottom: 30px;
    z-index: 800;
    
    position: -webkit-sticky;
    position: sticky; 
    top: 0; 
    
    opacity: 0.98;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Standard Wrapper (Archives) */
.pe-feed-tabs-wrapper {
    width: 100%;
    margin-bottom: 30px; 
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 15px;
}

.pe-feed-tabs { display: flex; justify-content: center; gap: 12px; }

.pe-feed-tab {
    background: var(--bg-surface); 
    border: 1px solid var(--border-color);
    font-size: 0.95rem; font-weight: 600; color: var(--text-muted);
    padding: 8px 24px; cursor: pointer; border-radius: 50px;
    transition: all 0.2s ease;
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
    height: 40px; /* Fixed height helps alignment */
}

.pe-feed-tab:hover { color: var(--primary); border-color: var(--primary); background: var(--bg-subtle); }

.pe-feed-tab.active {
    background: var(--text-main); 
    color: var(--bg-body);
    border-color: var(--text-main);
    box-shadow: 0 4px 12px var(--shadow-color);
}
.pe-feed-tab.active svg { stroke: var(--bg-body); }

/* FIX: Ensure SVGs are always visible and don't shrink */
.pe-feed-tab svg {
    width: 18px; 
    height: 18px; 
    flex-shrink: 0; /* Crucial for missing icons */
    display: block; 
}

/* Loader */
.pe-feed-loader { padding: 40px; text-align: center; }
.spinner {
    width: 30px; height: 30px; border: 3px solid var(--border-color);
    border-top: 3px solid var(--primary); border-radius: 50%;
    animation: spin 0.8s linear infinite; margin: 0 auto;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.pe-no-results { text-align: center; font-size: 1.2rem; color: var(--text-muted); grid-column: 1 / -1; padding: 40px; }

/* FIX: Mobile Tabs Display */
@media (max-width: 768px) {
    .pe-sticky-tabs-wrapper { 
        padding: 10px 0; 
        box-shadow: 0 4px 15px var(--shadow-color); 
    }
    
    .pe-feed-tabs { 
        display: flex; 
        width: 100%;
        justify-content: space-between; /* Evenly spread */
        gap: 8px; 
        overflow-x: auto;
    }
    
    .pe-feed-tab { 
        flex: 1; 
        justify-content: center; 
        padding: 16px 9px;
        font-size: 0.85rem; 
        border-radius: 10px; 
    }
    
    .pe-feed-tab svg { 
        margin-right: 4px; /* Small space between icon and text */
    }
}

/* --- FEED TABS (Sticky & Standard) --- */
.pe-feed-section { position: relative; padding-bottom: 60px; background: var(--bg-body); }

/* Sticky Wrapper */
.pe-sticky-tabs-wrapper {
    width: 100%;
    background: var(--bg-body); 
    border-bottom: 1px solid var(--border-color);
    padding: 12px 0;
    margin-bottom: 30px;
    z-index: 800;
    
    position: -webkit-sticky;
    position: sticky; 
    top: 0; 
    
    opacity: 0.98;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: padding 0.3s;
    
    /* Fix for z-index stacking context */
    isolation: isolate;
}

/* --- FLEX CONTAINER --- */
.pe-controls-row {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    width: 100%;
    gap: 20px;
}

/* --- LEFT: SORT TABS (Restored Pill Design) --- */
.pe-feed-tabs { 
    display: flex; 
    gap: 10px; 
    align-items: center;
}

.pe-feed-tab {
    background: var(--bg-surface); 
    border: 1px solid var(--border-color); /* Restore Border */
    font-size: 0.9rem; 
    font-weight: 600; 
    color: var(--text-muted);
    padding: 8px 20px; 
    cursor: pointer; 
    border-radius: 50px; /* Pill Shape */
    transition: all 0.2s ease;
    display: flex; 
    align-items: center; 
    gap: 6px; 
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.pe-feed-tab:hover { 
    color: var(--text-main); 
    border-color: var(--text-light);
    background: var(--bg-subtle); 
    transform: translateY(-1px);
}

/* Active State: Solid Dark Pill */
.pe-feed-tab.active {
    color: var(--bg-body);
    background: var(--text-main);
    border-color: var(--text-main);
    box-shadow: 0 4px 12px var(--shadow-color);
}

.pe-feed-tab svg { width: 16px; height: 16px; flex-shrink: 0; display: block; }
.pe-feed-tab.active svg { stroke: var(--bg-body); }

/* --- RIGHT: TYPE FILTER (Dropdown) --- */
.pe-type-filters {
    display: flex;
    align-items: center;
}

.pe-select-wrapper {
    position: relative;
    min-width: 180px;
}

.pe-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: 10px 36px 10px 18px; 
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px var(--shadow-color);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pe-select:hover {
    border-color: var(--text-light);
    background: var(--bg-subtle);
}

.pe-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.pe-select-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-muted);
}

/* Loader */
.pe-feed-loader { padding: 40px; text-align: center; }
.spinner {
    width: 30px; height: 30px; border: 3px solid var(--border-color);
    border-top: 3px solid var(--primary); border-radius: 50%;
    animation: spin 0.8s linear infinite; margin: 0 auto;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.pe-no-results { text-align: center; font-size: 1.2rem; color: var(--text-muted); grid-column: 1 / -1; padding: 40px; }

/* --- MOBILE RESPONSIVE (Single Line Scroll) --- */
@media (max-width: 768px) {
    
    /* 1. Wrapper Padding */
    .pe-sticky-tabs-wrapper { 
        padding: 10px 0; 
        margin-bottom: 20px;
        overflow: hidden; /* Contain the pseudo-element */
        position: sticky; /* Ensure sticky works */
    }
    
    /* 2. Visual Scroll Cue (Fade Out Right) */
    .pe-sticky-tabs-wrapper::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 40px; /* Width of the fade */
        background: linear-gradient(to right, rgba(255,255,255,0), var(--bg-body));
        pointer-events: none; /* Allow clicks through */
        z-index: 810;
    }
    /* Dark mode fade adjustment */
    [data-theme="dark"] .pe-sticky-tabs-wrapper::after {
        background: linear-gradient(to right, rgba(2, 6, 23, 0), var(--bg-body));
    }

    .pe-sticky-tabs-wrapper .pe-container {
        padding-right: 0; /* Allow full bleed scroll */
    }

    /* 3. Horizontal Scroll Container */
    .pe-controls-row {
        display: flex;
        flex-direction: row; 
        align-items: center;
        justify-content: flex-start;
        
        overflow-x: auto;        /* Enable Scroll */
        -webkit-overflow-scrolling: touch; /* Smooth iOS scroll */
        scrollbar-width: none;   /* Firefox hide scrollbar */
        
        white-space: nowrap;
        gap: 12px;
        padding-right: 60px; /* Extra padding so last item isn't hidden by fade */
    }
    
    .pe-controls-row::-webkit-scrollbar {
        display: none; /* Chrome/Safari hide scrollbar */
    }

    /* Sort Tabs */
    .pe-feed-tabs {
        flex-shrink: 0;
        gap: 8px;
        padding-right: 12px;
        border-right: 1px solid var(--border-color); /* Separator */
    }

    .pe-feed-tab {
        padding: 8px 14px;
        font-size: 0.85rem;
    }

    /* Filter Dropdown */
    .pe-type-filters {
        flex-shrink: 0;
    }

    .pe-select-wrapper {
        min-width: auto;
    }

    .pe-select {
        padding: 8px 34px 8px 14px;
        font-size: 0.85rem;
    }
}