/* =========================================
   VRChatCustom 2.0
   Mod Cards Styles
========================================= */



/* ===============================
   MOD GRID
================================ */


.mod-grid {


    width:

    100%;


    display:

    grid;



    grid-template-columns:

    repeat(
        3,
        1fr
    );



    gap:

    30px;



}







/* ===============================
   MOD CARD
================================ */


.mod-card {


    position:

    relative;



    overflow:

    hidden;



    background:

    var(--card-bg);



    border:

    1px solid var(--glass-border);



    border-radius:

    var(--radius-large);



    backdrop-filter:

    blur(20px);



    transition:

    var(--transition-normal);



}







/* ===============================
   HOVER EFFECT
================================ */


.mod-card:hover {


    transform:

    translateY(-12px);



    border-color:

    rgba(
        0,
        245,
        212,
        .35
    );



    box-shadow:

    0 20px 50px
    rgba(
        0,
        245,
        212,
        .15
    );



}







/* ===============================
   MOD IMAGE
================================ */


.mod-image {


    width:

    100%;



    height:

    220px;



    overflow:

    hidden;



    position:

    relative;



}






.mod-image img {


    width:

    100%;



    height:

    100%;



    object-fit:

    cover;



    transition:

    .5s ease;



}







.mod-card:hover .mod-image img {


    transform:

    scale(1.08);



}







/* ===============================
   IMAGE OVERLAY
================================ */


.mod-image::after {


    content:"";


    position:

    absolute;



    inset:

    0;



    background:

    linear-gradient(
        transparent,
        rgba(7,9,18,.8)
    );



}







/* ===============================
   MOD CONTENT
================================ */


.mod-content {


    padding:

    25px;



}







/* ===============================
   CATEGORY TAG
================================ */


.mod-category {


    display:

    inline-flex;



    align-items:

    center;



    padding:

    6px 14px;



    border-radius:

    var(--radius-full);



    background:

    rgba(
        0,
        245,
        212,
        .1
    );



    color:

    var(--primary);



    font-size:

    12px;



    font-weight:

    700;



    margin-bottom:

    15px;



}







/* ===============================
   TITLE
================================ */


.mod-title {


    font-family:

    var(--font-title);



    font-size:

    22px;



    margin-bottom:

    12px;



    color:

    var(--text-primary);



}







/* ===============================
   DESCRIPTION
================================ */


.mod-description {


    color:

    var(--text-secondary);



    font-size:

    14px;



    line-height:

    1.7;



    min-height:

    70px;



}







/* ===============================
   META INFO
================================ */


.mod-meta {


    display:

    flex;



    justify-content:

    space-between;



    align-items:

    center;



    margin-top:

    25px;



    padding-top:

    15px;



    border-top:

    1px solid var(--border);



}







.mod-downloads {


    display:

    flex;



    align-items:

    center;



    gap:

    7px;



    color:

    var(--text-secondary);



    font-size:

    14px;



}





.mod-version {


    color:

    var(--primary);



    font-size:

    13px;



    font-weight:

    600;



}







/* ===============================
   TAGS
================================ */


.mod-tags {


    display:

    flex;



    flex-wrap:

    wrap;



    gap:

    8px;



    margin-top:

    18px;



}



.mod-tags span {


    padding:

    5px 10px;



    border-radius:

    8px;



    background:

    rgba(
        255,
        255,
        255,
        .05
    );



    color:

    var(--text-muted);



    font-size:

    12px;



}








/* ===============================
   CARD ACTIONS
================================ */


.mod-actions {


    display:

    flex;



    gap:

    12px;



    margin-top:

    25px;



}







.mod-actions button {


    flex:

    1;



    height:

    45px;



    border-radius:

    var(--radius-full);



    font-weight:

    700;



    transition:

    var(--transition-normal);



}







.install-btn {

    flex:1;

    padding:12px 20px;

    border-radius:14px;

    text-align:center;

    font-weight:700;

    font-size:14px;

    color:#070912;

    text-decoration:none;


    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );


    border:1px solid rgba(255,255,255,0.2);


    box-shadow:

    0 0 20px rgba(0,245,212,0.25);


    transition:0.35s ease;


}


.install-btn:hover {


    transform:translateY(-3px);


    box-shadow:

    0 0 35px rgba(0,245,212,0.6);


}





.details-btn {

    flex: 1;

    padding: 12px 20px;

    border-radius: 14px;

    background: rgba(255,255,255,0.05);

    border: 1px solid rgba(255,255,255,0.12);

    color: white;

    font-weight: 700;

    font-size: 14px;

    cursor: pointer;

    transition: 0.35s ease;

}


.details-btn:hover {

    border-color: var(--primary);

    box-shadow: 
    0 0 20px rgba(0,245,212,0.25);

    transform: translateY(-3px);

}







/* ===============================
   FEATURED CARD
================================ */


.featured-card {


    padding:

    35px;



    border-radius:

    var(--radius-large);



    background:

    var(--card-bg);



    border:

    1px solid var(--glass-border);



    transition:

    var(--transition-normal);



}







.featured-card:hover {


    transform:

    translateY(-8px);



    box-shadow:

    var(--shadow-glow);



    border-color:

    rgba(
        0,
        245,
        212,
        .3
    );



}







.featured-grid {


    display:

    grid;



    grid-template-columns:

    repeat(
        3,
        1fr
    );



    gap:

    25px;



}