/* 
 * FlowLatin - Archive & Category CSS (Consolidated)
 * -----------------------------------------------
 * Centralizes layout and category-specific styles for all archive pages.
 */

/* 1. COMMON ARCHIVE ELEMENTS */

.flowlatin-category-header {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flowlatin-category-header img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    position: relative;
    z-index: 2;
}

.category-lottie-bg {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.4;
    mix-blend-mode: overlay;
    transform: scaleX(4.5) scaleY(1);
}

/* Category Text Header */
.category-text-header {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font-size: clamp(2rem, 8vw, 5rem);
    text-transform: uppercase;
    font-weight: 900;
    z-index: 3;
    text-align: center;
    width: 100%;
    letter-spacing: 5px;
    text-shadow: 0 0 30px rgba(0,0,0,0.8);
}

.category-text-white { color: #fff; }

/* Pagination */
.flowlatin-pagination {
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
}

.flowlatin-pagination ul {
    display: flex !important;
    gap: 12px;
    list-style: none !important;
    padding: 0 !important;
    flex-wrap: wrap;
    justify-content: center;
}

.flowlatin-pagination ul li span,
.flowlatin-pagination ul li a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 15px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(5px);
}

.flowlatin-pagination ul li span.current {
    background: #dc2626;
    border-color: #dc2626;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.2);
    color: #fff;
}

.flowlatin-pagination ul li a:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.flowlatin-pagination ul li span.dots {
    background: transparent;
    border-color: transparent;
    min-width: 30px;
    padding: 0;
    opacity: 0.5;
}



@media (max-width: 768px) {
    .flowlatin-pagination ul {
        gap: 8px;
    }
    .flowlatin-pagination ul li span,
    .flowlatin-pagination ul li a {
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
        font-size: 12px;
    }
}

/* Empty States */
.flowlatin-empty {
    text-align: center;
    padding: 100px 20px;
}

.flowlatin-empty-icon { font-size: 64px; margin-bottom: 20px; }
.flowlatin-empty-heading { color: #fff; font-size: 24px; margin-bottom: 10px; }
.flowlatin-empty-body { color: #aaa; }

/* 2. BEATPORT GLASS DESIGN (body.category-beatport) */

/* Contenedor principal con max-width */
body.archive.category-beatport .posts-main-container.ast-container {
    max-width: 1400px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Grid de 4 columnas */
body.archive.category-beatport .flowlatin-archive-full-content {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px !important;
    padding: 40px 0 !important;
    margin: 0 auto !important;
}

/* Resetear estilos de article para cards */
body.archive.category-beatport .flowlatin-archive-full-content article {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Card item & hover */
body.archive.category-beatport .flowlatin-archive-grid-item {
    position: relative !important;
    background: #1a1a1a !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

body.archive.category-beatport .flowlatin-archive-grid-item:hover {
    transform: translateY(-12px) scale(1.02) !important;
    box-shadow: 0 16px 48px rgba(110, 68, 255, 0.4) !important;
}

/* Image container */
body.archive.category-beatport .flowlatin-archive-grid-item .image-container {
    position: relative !important;
    width: 100% !important;
    padding-top: 100% !important;
    overflow: hidden !important;
    background: #000 !important;
}

body.archive.category-beatport .flowlatin-archive-grid-item .post-thumbnail {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
}

body.archive.category-beatport .flowlatin-archive-grid-item .post-thumbnail img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.archive.category-beatport .flowlatin-archive-grid-item:hover .post-thumbnail img {
    transform: scale(1.15) !important;
}

/* Overlays & Glass */
body.archive.category-beatport .dark-overlay {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4) !important;
    z-index: 1 !important;
    transition: background 0.4s ease !important;
}

body.archive.category-beatport .flowlatin-archive-grid-item:hover .dark-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
}

body.archive.category-beatport .glass-overlay {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 88% !important;
    padding: 25px 15px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    z-index: 2 !important;
    height: 65% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.archive.category-beatport .flowlatin-archive-grid-item:hover .glass-overlay {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Category Logo & Title */


body.archive.category-beatport .glass-overlay .flowlatin-title {
    display: block !important;
    margin: 0 0 5px 0 !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    line-height: 1.2 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
    text-align: center !important;
    width: 100% !important;
    word-wrap: break-word !important;
    position: relative !important;
    text-transform: uppercase !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    flex-grow: 0 !important;
}

body.archive.category-beatport .post-date {
    display: inline-block !important;
    font-size: 0.7rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 2px 8px !important;
    letter-spacing: 1px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 3. FLOWLATIN PLAYLIST DESIGN (body.category-flowlatin) */

body.archive.category-flowlatin .site-content .ast-container,
body.archive.category-bazar .site-content .ast-container {
    max-width: 1800px !important;
}

.fl-playlist-wrapper {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    color: #fff;
}

.fl-beatport-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #000;
    border: 1px solid #222;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 20px;
}

.fl-list-header {
    display: grid;
    grid-template-columns: 60px 1fr 100px 180px 80px 80px 80px 80px 80px;
    gap: 15px;
    padding: 12px 15px;
    background: #1a1a20;
    color: #888;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid #222;
    align-items: center;
}

.fl-track-row {
    display: grid;
    grid-template-columns: 60px 1fr 100px 180px 80px 80px 80px 80px 80px;
    gap: 15px;
    padding: 10px 15px;
    background: #0d0d10;
    align-items: center;
    transition: background 0.2s;
    border-bottom: 1px solid #1a1a1a;
}

.fl-track-row:hover { background: #18181c; }

.fl-track-img { width: 55px; height: 55px; border-radius: 4px; object-fit: cover; border: 1px solid rgba(220, 38, 38, 0.3); }
.fl-track-name { font-size: 14px; color: #ffffff; font-weight: 500; line-height: 1.3; }
.fl-home-track-artist { font-size: 11px; color: #888; font-weight: 400; line-height: 1.2; white-space: normal; padding-right: 10px; margin-top: 1px; }

.fl-col-genre { color: #ff0000ff; font-size: 13px; font-weight: 500; }
.fl-col-fecha { color: #aaa; font-size: 12px; display: flex; flex-direction: column; align-items: flex-start; }

.fl-no-visto-badge {
    background: #ff0000ff;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    text-transform: uppercase;
}

.fl-dl-btn {
    color: #fff; width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}

.fl-dl-btn:hover { background: #ff0000ff; box-shadow: 0 0 10px rgba(220, 38, 38, 0.4); }

/* Play Button Sonaar Grid Override (Category) */
.fl-col-play :is(.srp_play, .srp_play:hover, .iron-audioplayer.iron-playing .srp_play) {
    border-color: #dc2626 !important;
    color: #dc2626 !important;
}

/* FinalBoss Custom Play Button - Archive */
.fl-col-play .fl-custom-play-btn {
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: 2px solid #555 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #555 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.fl-col-play .fl-custom-play-btn:hover {
    border-color: #dc2626 !important;
    color: #dc2626 !important;
    transform: scale(1.05);
}

.fl-col-play .fl-custom-play-btn.fl-playing {
    border-color: #dc2626 !important;
    color: #dc2626 !important;
}

.fl-col-play .fl-custom-play-btn i {
    font-size: 16px !important;
}

/* Toggle Icons Logic */
.fl-col-play .fl-custom-play-btn .play-icon { display: block !important; }
.fl-col-play .fl-custom-play-btn .pause-icon { display: none !important; }

.fl-col-play .fl-custom-play-btn.fl-playing .play-icon { display: none !important; }
.fl-col-play .fl-custom-play-btn.fl-playing .pause-icon { display: block !important; }

/* Hide icons during loading */
.fl-col-play .fl-custom-play-btn.fl-loading-audio i:not(.spinner-icon) {
    display: none !important;
}

/* 4. TRAXSOURCE DESIGN OVERRIDES (body.category-traxsource) */

@media (max-width: 768px) {
    body.archive.category-traxsource .traxsource-archive-grid {
        padding: 10px 0 40px !important;
        gap: 15px !important;
    }
    
    body.archive.category-traxsource .flowlatin-title {
        font-size: 1.4rem !important;
        font-weight: 800;
    }
}

/* 5. RESPONSIVE OPTIMIZATIONS (GENERAL ARCHIVE) */

@media (max-width: 1200px) {
    body.category-beatport .flowlatin-archive-full-content {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 900px) {
    .fl-list-header { display: none !important; }
    .fl-track-row {
        grid-template-columns: 50px 1fr 44px !important;
        gap: 10px !important;
    }
    .fl-track-img, .desktop-only { display: none !important; }
}

@media (max-width: 480px) {
    body.category-beatport .flowlatin-archive-full-content {
        grid-template-columns: 1fr !important;
    }
}

/* 6. LIVEMASHUP PLAYLIST DESIGN (body.category-livemashup) */

body.archive.category-livemashup .site-content .ast-container {
    max-width: 1800px !important;
}

body.archive.category-livemashup .fl-livemashup-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #0d0d10;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

body.archive.category-livemashup .fl-list-header {
    display: grid;
    grid-template-columns: 60px 1fr 100px 100px 150px 80px 80px 80px;
    gap: 15px;
    padding: 15px 20px;
    background: #15151a;
    color: #9ca3af;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 2px solid #2d2d35;
    align-items: center;
}

body.archive.category-livemashup .fl-track-row {
    display: grid;
    grid-template-columns: 60px 1fr 100px 100px 150px 80px 80px 80px;
    gap: 15px;
    padding: 12px 20px;
    background: transparent;
    align-items: center;
    transition: background 0.3s ease;
    border-bottom: 1px solid #1f1f25;
}

body.archive.category-livemashup .fl-track-row:hover { background: #1a1a24; }

body.archive.category-livemashup .key-badge {
    display: inline-block;
    width: 46px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 800; /* Bold for clarity */
    color: #000; /* Forced Black Text */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Tone Filter Buttons - CATEGORIA LIVEMASHUP (flex-wrap: wrap para responsive) */
.livemashup-filters .camelot-keys-filter {
    background: rgba(30, 30, 30, 0.9);
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #444;
}

.livemashup-filters .camelot-keys-filter .filter-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.livemashup-filters .camelot-keys-filter > div:first-child {
    text-align: left;
    margin-bottom: 12px;
}

.livemashup-filters .tone-filter-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 32px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    color: #000 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    cursor: pointer;
}

.livemashup-filters .tone-filter-link:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.livemashup-filters .tone-filter-link.active {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8), 0 4px 12px rgba(0,0,0,0.5);
    background-color: var(--active-bg);
}

/* Tone Filter Buttons - FORMULARIO DE SUBIDA + HOME (flex-wrap: nowrap, 2 filas fijas) */
form .camelot-keys-filter,
.livemashup-upload-container .camelot-keys-filter,
.fl-home-livemashup-list .camelot-keys-filter {
    background: rgba(30, 30, 30, 0.9);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #444;
    margin-top: 10px;
}

form .camelot-keys-filter .filter-row,
.livemashup-upload-container .camelot-keys-filter .filter-row,
.fl-home-livemashup-list .camelot-keys-filter .filter-row {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
}

form .tone-filter-link,
.livemashup-upload-container .tone-filter-link,
.fl-home-livemashup-list .tone-filter-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    height: 32px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    color: #000 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    cursor: pointer;
    padding: 2px 4px;
    text-align: center;
    white-space: nowrap;
}

form .tone-filter-link:hover,
.livemashup-upload-container .tone-filter-link:hover,
.fl-home-livemashup-list .tone-filter-link:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

form .tone-filter-link.active,
form .tone-filter-link.selected,
.livemashup-upload-container .tone-filter-link.active,
.fl-home-livemashup-list .tone-filter-link.active {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8), 0 4px 12px rgba(0,0,0,0.5);
    transform: scale(1.05);
}

/* Responsive - CATEGORIA */
@media (max-width: 768px) {
    .livemashup-filters {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .livemashup-filters .tone-filter-link {
        width: 38px !important;
        height: 28px !important;
        font-size: 11px !important;
    }

    .livemashup-filters .camelot-keys-filter {
        padding: 10px 8px !important;
    }

    .livemashup-filters .camelot-keys-filter .filter-row {
        gap: 4px !important;
    }
}

/* Responsive - FORMULARIO DE SUBIDA + HOME */
@media (max-width: 768px) {
    form .tone-filter-link,
    .livemashup-upload-container .tone-filter-link,
    .fl-home-livemashup-list .tone-filter-link {
        height: 28px !important;
        font-size: 10px !important;
        padding: 2px 2px !important;
    }
    
    form .camelot-keys-filter,
    .livemashup-upload-container .camelot-keys-filter,
    .fl-home-livemashup-list .camelot-keys-filter {
        padding: 10px 6px !important;
    }
    
    form .camelot-keys-filter .filter-row,
    .livemashup-upload-container .camelot-keys-filter .filter-row,
    .fl-home-livemashup-list .camelot-keys-filter .filter-row {
        gap: 3px !important;
        margin-bottom: 4px !important;
    }
}

@media (max-width: 480px) {
    form .tone-filter-link,
    .livemashup-upload-container .tone-filter-link,
    .fl-home-livemashup-list .tone-filter-link {
        height: 24px !important;
        font-size: 9px !important;
        padding: 1px 2px !important;
    }
    
    form .camelot-keys-filter .filter-row,
    .livemashup-upload-container .camelot-keys-filter .filter-row,
    .fl-home-livemashup-list .camelot-keys-filter .filter-row {
        gap: 2px !important;
    }
}

body.archive.category-livemashup .fl-col-genre { color: #dc2626; font-size: 13px; font-weight: 500; }

body.archive.category-livemashup .fl-col-play .srp_play {
    width: 42px !important;
    height: 42px !important;
    border: 2px solid #555 !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
}

body.archive.category-livemashup .fl-col-play :is(.srp_play:hover, .iron-audioplayer.iron-playing .srp_play) {
    border-color: #dc2626 !important;
    color: #dc2626 !important;
}

/* FinalBoss Custom Play Button - LiveMashup */
body.archive.category-livemashup .fl-col-play .fl-custom-play-btn {
    width: 42px !important;
    height: 42px !important;
    background: transparent !important;
    border: 2px solid #555 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #555 !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body.archive.category-livemashup .fl-col-play .fl-custom-play-btn:hover {
    border-color: #dc2626 !important;
    color: #dc2626 !important;
    transform: scale(1.05);
}

body.archive.category-livemashup .fl-col-play .fl-custom-play-btn.fl-playing {
    border-color: #dc2626 !important;
    color: #dc2626 !important;
}

body.archive.category-livemashup .fl-col-play .fl-custom-play-btn i {
    font-size: 18px !important;
}

/* LiveMashup Toggle Logic (Explicit) */
body.archive.category-livemashup .fl-col-play .fl-custom-play-btn .play-icon { display: block !important; }
body.archive.category-livemashup .fl-col-play .fl-custom-play-btn .pause-icon { display: none !important; }

body.archive.category-livemashup .fl-col-play .fl-custom-play-btn.fl-playing .play-icon { display: none !important; }
body.archive.category-livemashup .fl-col-play .fl-custom-play-btn.fl-playing .pause-icon { display: block !important; }

body.archive.category-livemashup .fl-col-play .fl-custom-play-btn.fl-loading-audio i:not(.spinner-icon) {
    display: none !important;
}

@media (max-width: 900px) {
    body.archive.category-livemashup .fl-list-header { display: none !important; }
    body.archive.category-livemashup .fl-track-row {
        grid-template-columns: 50px 1fr 50px !important;
        gap: 12px !important;
        padding: 15px 10px !important;
    }
    body.archive.category-livemashup .fl-dl-btn {
        width: 38px !important;
        height: 38px !important;
        background: #dc2626 !important;
        border-radius: 50% !important;
    }
}

/* ==========================================
   CAMELOT KEY HIGHLIGHTING (Category Page)
   ========================================== */

/* Base transition for all tracks */
body.archive.category-livemashup .fl-track-row {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-left: 6px solid transparent !important;
    position: relative !important;
}

/* Track DIMMED (Not compatible) */
body.archive.category-livemashup .fl-livemashup-list.has-active-key .fl-track-row:not(.fb-current):not(.fb-compatible) {
    opacity: 0.4 !important;
    filter: grayscale(0.5) !important;
}

/* Current Playing Track */
body.archive.category-livemashup .fl-track-row.fb-current,
body.archive.category-livemashup .fl-track-row.current {
    background: rgba(255, 0, 0, 0.15) !important;
    border-left: 6px solid #ff0000 !important;
    box-shadow: inset 0 0 50px rgba(255, 0, 0, 0.1) !important;
    z-index: 20 !important;
}

/* Compatible Tracks */
body.archive.category-livemashup .fl-track-row.fb-compatible {
    opacity: 1 !important;
    filter: none !important;
    border-left: 6px solid var(--key-color, #ff0000) !important;
    background: rgba(var(--key-color-rgb, "255,0,0"), 0.18) !important;
    box-shadow: 0 4px 30px var(--key-color, rgba(255, 0, 0, 0.3)) !important;
    z-index: 10 !important;
}

body.archive.category-livemashup .fl-track-row.fb-compatible .key-badge {
    box-shadow: 0 0 25px var(--key-color, #ff0000), inset 0 0 10px rgba(255,255,255,0.4) !important;
    border: 2px solid #fff !important;
}