/* =========================================================
   MINECRFTMODS FINAL PRODUCT V16
   Search / Filters / Modal / Related / SEO UI / Legal
   ========================================================= */

:root{
    --fp-bg:#07090d;
    --fp-panel:#11151a;
    --fp-panel2:#171c22;
    --fp-border:rgba(255,255,255,.08);
    --fp-text:#f5f7fa;
    --fp-muted:#9ca5b0;
    --fp-purple:#9c6cff;
    --fp-cyan:#45d8ff;
    --fp-green:#72d58a;
}


/* =========================================================
   CATEGORY FILTERS
   ========================================================= */

.fp-filter-wrap{
    max-width:1480px;
    margin:24px auto 18px;
    padding:0 18px;
}

.fp-filter-row{
    display:flex;
    gap:10px;
    overflow-x:auto;
    scrollbar-width:none;
    padding:4px 1px 9px;
}

.fp-filter-row::-webkit-scrollbar{
    display:none;
}

.fp-filter{
    flex:0 0 auto;

    border:1px solid var(--fp-border);

    background:
        linear-gradient(
            145deg,
            #171c22,
            #0e1217
        );

    color:#b9c1cb;

    padding:11px 17px;

    border-radius:11px;

    font-size:14px;
    font-weight:700;

    cursor:pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        color .2s ease,
        background .2s ease;
}

.fp-filter:hover{
    transform:translateY(-2px);
    color:#fff;
    border-color:rgba(156,108,255,.34);
}

.fp-filter.active{
    color:#fff;

    border-color:
        rgba(156,108,255,.44);

    background:
        linear-gradient(
            135deg,
            rgba(156,108,255,.22),
            rgba(69,216,255,.09)
        );

    box-shadow:
        0 8px 25px rgba(82,56,190,.10);
}


/* =========================================================
   SEARCH STATUS
   ========================================================= */

.fp-search-status{
    max-width:1480px;
    margin:0 auto 20px;
    padding:0 20px;

    color:#7f8994;
    font-size:14px;
}

.fp-no-results{
    max-width:1480px;

    margin:34px auto;

    padding:48px 25px;

    text-align:center;

    border-radius:18px;

    border:1px dashed
        rgba(255,255,255,.12);

    background:
        rgba(255,255,255,.025);

    color:#a8b0ba;
}

.fp-no-results strong{
    display:block;
    color:#fff;
    font-size:24px;
    margin-bottom:8px;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.fp-breadcrumb{
    max-width:1320px;

    margin:18px auto 16px;

    padding:0 20px;

    display:flex;
    flex-wrap:wrap;
    gap:8px;

    color:#747e89;

    font-size:13px;
}

.fp-breadcrumb a{
    color:
        color-mix(
            in srgb,
            var(--accent,#9c6cff) 70%,
            white
        );

    text-decoration:none;
}

.fp-breadcrumb a:hover{
    text-decoration:underline;
}


/* =========================================================
   DETAIL EXTRA INFORMATION
   ========================================================= */

.fp-detail-extra{
    max-width:1320px;

    margin:20px auto 0;

    padding:0 20px 30px;
}

.fp-extra-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:16px;
}

.fp-extra-card{
    position:relative;
    overflow:hidden;

    padding:24px;

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--accent,#9c6cff) 5%,
                #171b21
            ),
            #0d1116
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent,#9c6cff) 15%,
            rgba(255,255,255,.08)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}

.fp-extra-card::before{
    content:"";

    position:absolute;
    left:0;
    right:0;
    top:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--accent,#9c6cff),
            transparent 70%
        );
}

.fp-extra-card h3{
    margin:0 0 12px;

    color:#fff;

    font-size:18px;
}

.fp-extra-card p,
.fp-extra-card li{
    color:#959faa;

    line-height:1.65;

    font-size:14px;
}

.fp-extra-card ul{
    padding-left:18px;
    margin:0;
}


/* =========================================================
   RELATED MODS
   ========================================================= */

.fp-related{
    max-width:1320px;

    margin:12px auto 45px;

    padding:0 20px;
}

.fp-related-head{
    display:flex;
    align-items:end;
    justify-content:space-between;

    gap:18px;

    margin-bottom:18px;
}

.fp-related-head small{
    display:block;

    color:
        color-mix(
            in srgb,
            var(--accent,#9c6cff) 72%,
            white
        );

    text-transform:uppercase;

    letter-spacing:.15em;

    font-weight:800;
}

.fp-related-head h2{
    margin:5px 0 0;

    color:#fff;

    font-size:30px;
}

.fp-related-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:14px;
}

.fp-related-card{
    display:flex;
    align-items:center;

    gap:15px;

    padding:15px;

    border-radius:14px;

    text-decoration:none;

    background:
        linear-gradient(
            145deg,
            #171c22,
            #0d1116
        );

    border:
        1px solid var(--fp-border);

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.fp-related-card:hover{
    transform:translateY(-4px);

    border-color:
        color-mix(
            in srgb,
            var(--accent,#9c6cff) 35%,
            rgba(255,255,255,.08)
        );

    box-shadow:
        0 16px 35px rgba(0,0,0,.28);
}

.fp-related-card img{
    width:58px;
    height:58px;

    object-fit:cover;

    border-radius:11px;

    background:#080b0f;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.08);
}

.fp-related-card div{
    min-width:0;
}

.fp-related-card strong{
    display:block;

    color:#fff;

    font-size:16px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.fp-related-card span{
    display:block;

    margin-top:5px;

    color:#7f8994;

    font-size:13px;
}


/* =========================================================
   DOWNLOAD MODAL
   ========================================================= */

.fp-modal-backdrop{
    position:fixed;

    inset:0;

    z-index:999999;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:20px;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    background:
        rgba(3,5,8,.73);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.fp-modal-backdrop.open{
    opacity:1;

    visibility:visible;

    pointer-events:auto;
}

.fp-download-modal{
    --modalAccent:var(--accent,#9c6cff);

    width:min(460px,100%);

    position:relative;

    overflow:hidden;

    padding:28px;

    border-radius:22px;

    background:
        radial-gradient(
            circle at 85% 0%,
            color-mix(
                in srgb,
                var(--modalAccent) 14%,
                transparent
            ),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #181d24,
            #090c10
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--modalAccent) 25%,
            rgba(255,255,255,.08)
        );

    box-shadow:
        0 40px 120px rgba(0,0,0,.65);

    transform:
        translateY(20px)
        scale(.97);

    transition:
        transform .3s
        cubic-bezier(.2,.8,.2,1);
}

.fp-modal-backdrop.open
.fp-download-modal{
    transform:
        translateY(0)
        scale(1);
}

.fp-modal-icon{
    width:72px;
    height:72px;

    margin:0 auto 18px;

    display:grid;
    place-items:center;

    border-radius:18px;

    background:
        color-mix(
            in srgb,
            var(--modalAccent) 12%,
            #171c22
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--modalAccent) 30%,
            transparent
        );

    font-size:30px;

    color:#fff;

    box-shadow:
        0 14px 35px
        color-mix(
            in srgb,
            var(--modalAccent) 12%,
            transparent
        );
}

.fp-download-modal h2{
    margin:0;

    color:#fff;

    text-align:center;

    font-size:25px;
}

.fp-download-modal p{
    margin:10px auto 0;

    color:#8f99a5;

    text-align:center;

    line-height:1.6;

    font-size:14px;
}

.fp-progress-shell{
    height:11px;

    margin-top:26px;

    overflow:hidden;

    border-radius:999px;

    background:#07090c;

    border:
        1px solid rgba(255,255,255,.07);
}

.fp-progress{
    width:0%;
    height:100%;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            var(--modalAccent),
            #45d8ff
        );

    box-shadow:
        0 0 18px
        color-mix(
            in srgb,
            var(--modalAccent) 35%,
            transparent
        );

    transition:
        width .12s linear;
}

.fp-progress-text{
    margin-top:12px;

    display:flex;
    justify-content:space-between;

    color:#77818c;

    font-size:12px;
}

.fp-modal-cancel{
    width:100%;

    margin-top:22px;

    padding:13px;

    border-radius:11px;

    border:
        1px solid rgba(255,255,255,.09);

    background:#12161b;

    color:#c6ccd2;

    font-weight:700;

    cursor:pointer;
}


/* =========================================================
   LEGAL FOOTER
   ========================================================= */

.fp-footer{
    margin-top:65px;

    padding:
        38px 24px 45px;

    border-top:
        1px solid rgba(255,255,255,.065);

    background:
        linear-gradient(
            180deg,
            rgba(8,10,13,.35),
            #06080a
        );
}

.fp-footer-inner{
    max-width:1480px;

    margin:auto;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:25px;

    flex-wrap:wrap;
}

.fp-footer-brand{
    display:flex;

    align-items:center;

    gap:13px;

    color:#fff;

    font-weight:800;
}

.fp-footer-brand img{
    width:40px;
    height:40px;

    object-fit:cover;

    border-radius:10px;
}

.fp-footer-links{
    display:flex;

    gap:16px;

    flex-wrap:wrap;
}

.fp-footer-links a{
    color:#818b96;

    text-decoration:none;

    font-size:13px;
}

.fp-footer-links a:hover{
    color:#fff;
}

.fp-footer-note{
    width:100%;

    margin-top:10px;

    color:#59636d;

    font-size:12px;

    line-height:1.6;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:750px){

    .fp-related-grid,
    .fp-extra-grid{
        grid-template-columns:1fr;
    }

    .fp-related-head h2{
        font-size:26px;
    }

    .fp-filter-wrap{
        margin-top:18px;
        padding:0 17px;
    }

    .fp-download-modal{
        padding:24px 20px;
    }

    .fp-footer-inner{
        align-items:flex-start;
        flex-direction:column;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }

}