/* ==========================================================
   YouAndYou TV v2.0 RC2
   Components CSS
   Production Ready
========================================================== */


/* ===================================
   BUTTONS
=================================== */

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    min-height:46px;

    padding:0 20px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-hover);

}

.btn-secondary{

    background:var(--secondary);

    color:#000;

}

.btn-secondary:hover{

    background:var(--secondary-hover);

}

.btn-outline{

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

    background:transparent;

    color:#fff;

}

.btn-outline:hover{

    background:var(--bg3);

}

.btn-block{

    width:100%;

}


/* ===================================
   SEARCH BOX
=================================== */

.search-box{

    display:flex;

    align-items:center;

    background:var(--bg2);

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

    border-radius:999px;

    overflow:hidden;

}

.search-box input{

    flex:1;

    padding:0 18px;

    height:48px;

    background:transparent;

    border:none;

    color:#fff;

}

.search-box button{

    width:60px;

    height:48px;

    background:transparent;

    color:#fff;

}

.search-box button:hover{

    background:var(--primary);

}


/* ===================================
   CATEGORY CHIP
=================================== */

.chip{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 16px;

    border-radius:999px;

    background:var(--bg3);

    color:#fff;

    font-size:14px;

    cursor:pointer;

    transition:var(--transition);

}

.chip:hover{

    background:var(--primary);

}


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

.tag{

    display:inline-block;

    padding:5px 10px;

    border-radius:999px;

    background:var(--card-hover);

    font-size:12px;

    color:var(--text-light);

}


/* ===================================
   ALERT
=================================== */

.alert{

    padding:16px 18px;

    border-radius:14px;

    margin-bottom:20px;

}

.alert-success{

    background:rgba(0,200,83,.15);

    color:#00c853;

}

.alert-warning{

    background:rgba(255,179,0,.15);

    color:#ffb300;

}

.alert-danger{

    background:rgba(255,23,68,.15);

    color:#ff1744;

}


/* ===================================
   DROPDOWN
=================================== */

.dropdown{

    position:relative;

}

.dropdown-menu{

    position:absolute;

    top:110%;

    right:0;

    min-width:220px;

    background:var(--card);

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

    border-radius:14px;

    overflow:hidden;

    display:none;

    box-shadow:var(--shadow);

}

.dropdown.open .dropdown-menu{

    display:block;

}

.dropdown-menu a{

    display:block;

    padding:14px 18px;

    color:#fff;

}

.dropdown-menu a:hover{

    background:var(--bg3);

}


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

.modal{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.7);

    z-index:3000;

}

.modal.show{

    display:flex;

}

.modal-content{

    width:min(92%,650px);

    background:var(--card);

    border-radius:18px;

    padding:25px;

}


/* ===================================
   FORM
=================================== */

.form-group{

    margin-bottom:20px;

}

.form-label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

.form-control{

    width:100%;

    height:48px;

    padding:0 15px;

    background:var(--bg2);

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

    border-radius:12px;

    color:#fff;

}

.form-control:focus{

    border-color:var(--secondary);

}


/* ===================================
   TEXTAREA
=================================== */

textarea.form-control{

    min-height:140px;

    padding:15px;

    resize:vertical;

}


/* ===================================
   LIVE VIEWERS
=================================== */

.viewer-counter{

    display:inline-flex;

    align-items:center;

    gap:6px;

    color:#fff;

    background:rgba(255,0,51,.18);

    padding:8px 14px;

    border-radius:999px;

}


/* ===================================
   SKELETON
=================================== */

.skeleton{

    position:relative;

    overflow:hidden;

    background:#2a2a2a;

}

.skeleton::after{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );

    animation:skeletonMove 1.2s infinite;

}


/* ===================================
   TOAST
=================================== */

.toast{

    position:fixed;

    right:20px;

    bottom:20px;

    background:var(--card);

    color:#fff;

    padding:15px 20px;

    border-left:4px solid var(--primary);

    border-radius:12px;

    box-shadow:var(--shadow);

    z-index:5000;

}


/* ===================================
   PAGINATION
=================================== */

.pagination{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:30px;

}

.pagination a{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    background:var(--card);

}

.pagination a.active{

    background:var(--primary);

}


/* ===================================
   RESPONSIVE
=================================== */

@media(max-width:768px){

.btn{

width:100%;

}

.dropdown-menu{

min-width:190px;

}

.modal-content{

padding:18px;

}

.toast{

left:15px;

right:15px;

bottom:15px;

}

}


/* ===================================
   KEYFRAMES
=================================== */

@keyframes skeletonMove{

100%{

left:100%;

}

}