@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=swap");


*{
    box-sizing:border-box;
}


.kara-player{

    width:100%;
    max-width:650px;

    padding:15px;

    border-radius:22px;

    font-family:"Vazirmatn",sans-serif;

    direction:rtl;

    transition:.3s;

}



/* بخش اصلی */

.kara-main{

    display:flex;

    align-items:center;

    gap:15px;

}



/* کاور */

.kara-cover{

    width:85px;
    height:85px;

    border-radius:18px;

    object-fit:cover;

    flex-shrink:0;

}



/* اطلاعات */

.kara-info{

    flex:1;

}



.kara-title{

    font-size:16px;

    font-weight:700;

}



.kara-artist{

    font-size:13px;

    margin-top:5px;

    opacity:.7;

}



.kara-brand{

    font-size:11px;

    margin-top:6px;

    opacity:.5;

}



/* دکمه پخش */

.kara-actions{

    display:flex;

    align-items:center;

    gap:8px;

}



.kara-btn{

    width:45px;

    height:45px;

    border-radius:50%;

    border:0;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

}



.kara-btn i{

    font-size:22px;

}



/* دانلود و اشتراک */

.kara-footer{

    margin-top:12px;

    display:flex;

    gap:10px;

}


.kara-footer button{

    width:38px;

    height:38px;

    border:0;

    border-radius:50%;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.25s;

}


.kara-footer button i{

    margin:0;

    font-size:17px;

}


.kara-footer button:hover{

    transform:scale(1.1);

}


.kara-footer .download{

    background:#e8f5e9;

    color:#1b5e20;

}


.kara-footer .share{

    background:#e3f2fd;

    color:#1565c0;

}



/* خط زمان */

.kara-progress{

    margin-top:15px;

}


.kara-range{

    width:100%;

    cursor:pointer;

}



.kara-time{

    display:flex;

    justify-content:space-between;

    font-size:11px;

}/* ==========================
   LIGHT
========================== */

.kara-player[data-theme="light"]{

    background:#fff;

    color:#222;

    box-shadow:
    0 10px 30px #0001;

}


.kara-player[data-theme="light"] .kara-btn{

    background:#1b5e20;

    color:white;

}


.kara-player[data-theme="light"] .download{

    background:#e8f5e9;

    color:#1b5e20;

}


.kara-player[data-theme="light"] .share{

    background:#e3f2fd;

    color:#1565c0;

}




/* ==========================
   DARK
========================== */


.kara-player[data-theme="dark"]{

    background:#151515;

    color:white;

}



.kara-player[data-theme="dark"] .kara-btn{

    background:#8bc34a;

    color:#111;

}



.kara-player[data-theme="dark"] .download{

    background:#292929;

    color:#8bc34a;

}


.kara-player[data-theme="dark"] .share{

    background:#292929;

    color:#64b5f6;

}




/* ==========================
   GLASS
========================== */


.kara-player[data-theme="glass"]{

    background:

    rgba(255,255,255,.25);


    backdrop-filter:

    blur(20px);


    border:

    1px solid rgba(255,255,255,.3);


    box-shadow:

    0 15px 40px #0002;

}



.kara-player[data-theme="glass"] .kara-btn{

    background:#2196f3;

    color:white;

}



.kara-player[data-theme="glass"] .download,
.kara-player[data-theme="glass"] .share{

    background:

    rgba(255,255,255,.45);

}




/* ==========================
   ROYAL
========================== */


.kara-player[data-theme="royal"]{

    background:#111;

    color:white;

}



.kara-player[data-theme="royal"] .kara-title{

    color:#ffd700;

}



.kara-player[data-theme="royal"] .kara-btn{

    background:#ffd700;

    color:#111;

}



.kara-player[data-theme="royal"] .download,
.kara-player[data-theme="royal"] .share{

    background:#2b2b2b;

    color:#ffd700;

}
/* ==========================
   OCEAN
========================== */

.kara-player[data-theme="ocean"]{

    background:#e0f7fa;

    color:#004d5a;

}


.kara-player[data-theme="ocean"] .kara-btn{

    background:#00838f;

    color:white;

}


.kara-player[data-theme="ocean"] .download{

    background:#ffffff;

    color:#00838f;

}


.kara-player[data-theme="ocean"] .share{

    background:#ffffff;

    color:#00838f;

}



/* ==========================
   FOREST
========================== */


.kara-player[data-theme="forest"]{

    background:#e8f5e9;

    color:#1b3d1f;

}



.kara-player[data-theme="forest"] .kara-btn{

    background:#2e7d32;

    color:white;

}



.kara-player[data-theme="forest"] .download,
.kara-player[data-theme="forest"] .share{

    background:#ffffff;

    color:#2e7d32;

}




/* ==========================
   SUNSET
========================== */


.kara-player[data-theme="sunset"]{

    background:

    linear-gradient(

    135deg,

    #ff9966,

    #8e2de2

    );


    color:white;

}



.kara-player[data-theme="sunset"] .kara-btn{

    background:white;

    color:#8e2de2;

}



.kara-player[data-theme="sunset"] .download,
.kara-player[data-theme="sunset"] .share{

    background:

    rgba(255,255,255,.25);

    color:white;

}




/* ==========================
   MINIMAL
========================== */


.kara-player[data-theme="minimal"]{

    background:#fafafa;

    color:#222;

    border:1px solid #eee;

}



.kara-player[data-theme="minimal"] .kara-btn{

    background:#222;

    color:white;

}



.kara-player[data-theme="minimal"] .download{

    background:#eeeeee;

    color:#222;

}



.kara-player[data-theme="minimal"] .share{

    background:#eeeeee;

    color:#222;

}




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


@media(max-width:500px){


    .kara-main{

        gap:10px;

    }



    .kara-cover{

        width:70px;

        height:70px;

    }



    .kara-title{

        font-size:14px;

    }



    .kara-artist{

        font-size:12px;

    }



    .kara-btn{

        width:40px;

        height:40px;

    }



    .kara-footer button{

        width:36px;

        height:36px;

    }



    .kara-footer button i{

        font-size:16px;

    }


}

.kara-site{

    font-size:11px;

    opacity:.55;

    margin-right:5px;

    direction:ltr;

    font-weight:500;

}



.kara-footer{

    align-items:center;

}