* {
    margin: 0;
    padding: 0;
    /* outline: 1px solid green !important; */

}


img {
    touch-action: manipulation;
}
ul.list-unstyled li {
    list-style: none;
    padding-left: 0;
}


:root {



    --td: 150ms;
    --te: cubic-bezier(0.215, 0.61, 0.355, 1);
}


@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?mig12u');
    src: url('fonts/icomoon.eot?mig12u#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?mig12u') format('truetype'),
    url('fonts/icomoon.woff?mig12u') format('woff'),
    url('fonts/icomoon.svg?mig12u#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}


[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-arrow-right2:before {
    content: "\ea3c";
}

.icon-arrow-left2:before {
    content: "\ea40";
}





a {
    text-decoration: none;
    color: #fff;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

a:hover,
a:focus {
    color: #DDF247;
    text-decoration: none;
    outline: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}




.mobmenu {
    display: none;
}











.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 0;
}

.bg-layer.fade-in {
    opacity: 1;
}


.titlebox {
    position: relative;
}

.titleimg {
    transition: opacity 0.6s ease, transform 0.6s ease;
    opacity: 1;
    transform: translateY(0);
}

.titleimg.fade-up {
    opacity: 0;
    transform: translateY(-30px);
}

.titleimg.fade-down {
    opacity: 0;
    transform: translateY(30px);
}


#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.toast {
    background-color: #DDF247;
    color: black;
    padding: 15px 20px;
    margin-bottom: 10px;
    border-radius: 5px;
    opacity: 0.95;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.toast-error {
    background-color: #f44336;
}

.toast-hide {
    opacity: 0;
    transform: translateX(100%);
}




/* Стили для стрелок слайдера */
.slider-arrows {
    position: absolute;
    width: 100%;
    top: 50%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 5;
}

.arrow {
    width: 70px;
    height: 70px;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 24px;
    border-radius: 50%;
    pointer-events: auto;
    margin: -5% 20px;
    transition: background-color 0.3s ease;
}

.arrow:hover {
    background-color: rgba(0, 0, 0, 0.8);
}





.hover-link {
    color: #ffffff;
    display: inline-block;
    font-weight: normal;
    overflow: hidden;
    padding: 0.5rem 1rem 0.125rem;
    position: relative;
    text-decoration: none;
    transition:
        color 150ms cubic-bezier(0.215, 0.61, 0.355, 1),
        opacity 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
    z-index: 4;
    opacity: 0.7;
    white-space: nowrap;
}


.hover-link::before,
.hover-link::after {
    content: '';
    background-color: #ddf246;
    height: 50%;
    left: 0;
    position: absolute;
    transform: translateX(-110%);
    transform-origin: 0 50%;
    transition: transform 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
    width: 100%;
    z-index: -1;
}


.hover-link::before {
    top: 0;
}


.hover-link::after {
    bottom: 0;
}


.hover-link:hover {
    color: #ffffff;

    opacity: 1;

}


.hover-link:hover::before,
.hover-link:hover::after {
    animation: hover-link-blink 1s 150ms steps(1, end) forwards infinite;
    transform: translateX(calc(100% - 0.5rem));
    transition-duration: 450ms;
}


.hover-link:hover::after {
    transition-delay: 55ms;
}


@keyframes hover-link-blink {
    50%, 100% {
        opacity: 0;
    }
}





body {
    background-color: rgba(22, 22, 22, 1);
    overflow-x: hidden;
    font-family: "Kanit";
}




.line {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.148);
}


.nastygrid {
    display: grid;
    grid-template-rows: minmax(650px, 70vh);
    grid-template-columns: auto;
    gap: 0;
    width: 100vw;
}


.topmenu {
    display: grid;
    grid-template-rows: 350px;
    grid-template-columns: auto;
    gap: 0;
    width: 100vw;
}


.nastyhead {

    display: flex;
    background-image: url(/nasty/img/top_sm.jpg);
    background-repeat: no-repeat;
    background-color: #161616;
    background-position: top;
    background-size: cover;
    position: relative;
    overflow: hidden;
    transition: opacity 0.8s ease-in-out;
    justify-content: center;



}

.mem_content_wrap {display:flex; width: 100vw; justify-content: center;}
.mem_content_grid {
    display: grid;
    grid-template-columns: 30% 30px minmax(600px, 1200px);
    grid-template-rows: auto;
    gap: 20px;
    width: clamp(1400px, 70vw, 1800px);
    margin-top: -200px;


}

.sidebar_conteiner{
    height: 100%;
    display: flex;


}



.separator_conteiner{
    height: 100%;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}


.separator{
    width: 1px;
    height: 100%;
    background-color: rgba(128, 128, 128, 0.2);
}


.user_memcontent{
    margin-left: 20px;
    margin-right: 30px;

    z-index: 1;

}



.background-fade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 0;
}





.memcontent{

    margin-left: 20px;
    margin-right: 30px;

    z-index: 1;

}
/* header */

.nasty-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 100px auto;
    column-gap: 30px;
    font-size: clamp(18px, 1.4vw, 30px);
    font-family: "Kanit";
    width: 100vw;
    height: 100%;


}



.logospace {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 2;
    margin-left: 50px;



}





.menuspace {
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 4;
}

.signspace {
    display: flex;
    justify-content: left;
    align-items: center;



}


.signspace_mem {
    margin-top:5px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;


}


.signleft {
    display: flex;
    text-align: left;
    margin-left: 40px;
}

.signright {
    display: flex;
    text-align: right;
    justify-content: right;
    align-items: center;
    margin-left: 20px;
    border-radius: 10px;
    background-color: rgb(0, 0, 0, 0.7);
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    z-index: 2;

}


.signright a {
    color: rgb(240, 86, 35);
}

.signright a:hover {
    color: #ddf246;
}





.titleholdermain {
    grid-column: span 3 / span 3;

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(249, 6, 75, 0);


}


.nasty-title {
    display: grid;

    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "title titlespace";
    align-items: center;
    height: 100%;
    width: 100%;

    background-image: url("/nasty/img/skewbg3.png");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    background-color: rgba(86, 16, 226, 0);
    z-index: 2;
}

.title {
    grid-area: title;
    display: flex;
    justify-content: right;
    align-items: flex-start;
    margin-bottom: 10%;

}

.titlespace {
    grid-area: titlespace;

    /* background-color: rgba(26, 25, 28, 0); */
}



.headcontener {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: flex-end;



}

.box {
    flex: 1;
    display: flex;
    flex-direction: column;

}

.titlebox {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-top: 40px;

}

.headb {

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


}

.middleblock {

    margin-top: 20px;
    margin-bottom: -10px;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    font-size: clamp(14px, 4vw, 22px);
    color: rgb(173, 173, 173);
    font-weight: 200;
    padding-right: 10%;
    padding-left: 10%;

}



.hbutton {
    display: flex;
    margin-right: 40px;
    margin-left: 100px;
    border-radius: 10px;
    background-color: rgb(240, 86, 35);
    border-radius: 10px;
    padding-left: 60px;
    padding-right: 60px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    transform: skew(-6deg, -5deg);
    margin-top: -20px;
    align-items: center;
    width: 350px;
    justify-content: center;
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(240, 86, 35, 0.3);
}

.hbutton::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(221, 242, 70);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    z-index: -1;
}

.hbutton:hover {
    color: #333;
    box-shadow: 0 5px 20px rgba(221, 242, 70, 0.5),
    0 0 0 4px rgba(221, 242, 70, 0.2);
}

.hbutton:hover::before {
    transform: scaleX(1);
}

.hbutton::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(30deg);
    transition: all 0.4s ease;
    opacity: 0;
}

.hbutton:hover::after {
    left: 120%;
    opacity: 0.8;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}


.hbutton img {
    transition: filter 0.4s ease;
    filter: brightness(1) invert(0);
}

.hbutton:hover img {
    filter: brightness(0) invert(0);
}


.joinbutton {
    display: flex;
    border-radius: 10px;
    background-color: rgb(221, 242, 70);
    font-weight: 800;
    color: #000000;
    align-items: center;
    width: clamp(300px, 80%, 600px);
    justify-content: center;
    font-size: clamp(20px, 2.5vw, 30px);
    cursor: pointer;
    border: none;
    outline: none;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
    z-index: 1;
    font-family: "kanit";
}

.joinbutton::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #f05722;
    transition: left 0.3s ease;
    z-index: -1;
}

.joinbutton:hover::before {
    left: 0;
}

.joinbutton:hover {
    color: white;
}

.icon-container {
    position: relative;
    width: 70px;
    height: 70px;
    margin-right: 0px;
}

.join-icon,
.join-icon-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
}

.join-icon {
    opacity: 1;
}

.join-icon-hover {
    opacity: 0;
}

.joinbutton:hover .join-icon {
    opacity: 0;
}

.joinbutton:hover .join-icon-hover {
    opacity: 1;
}





.joinbutton2 {
    display: flex;

    border-radius: 10px;
    background-color: rgb(221, 242, 70);
    border-radius: 10px;
    padding-left: 80px;
    padding-right: 80px;

    font-weight: 800;

    color: #000000;
    align-items: center;
    justify-content: center;




}




.recentgrid {

    display: grid;
    place-items: center;
    grid-template-rows: 1fr;
    grid-template-columns: auto clamp(800px, 90vw, 1800px) auto;
    gap: 0px;
    width: 100%;


}

#con1 {
    background-color: rgba(39, 128, 106, 0);
    display: flex;
    justify-content: center;
    align-items: center;
}

#con2 {
    background-color: rgba(39, 128, 106, 0);
    display: flex;
    justify-content: center;
    align-items: center;
}

#con3 {


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

    font-size: 30px;
    font-family: "Kanit";
    color: rgb(173, 173, 173);
    width: 1200px;

}





#recenttitle {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: minmax(100px, 200px);
    gap: 15px;


}


#con4 {
    background-color: rgba(39, 128, 106, 0);
    display: flex;
    justify-content: center;
    align-items: center;
}

.con5 {
    background-color: rgba(39, 128, 106, 1);
    display: flex;
    font-size: 18px;
    font-family: "Kanit";

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

.con6 {


    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 3;


}

@keyframes smoothBounce {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
    50% {
        opacity: 1;
        transform: translateY(-5px) scale(1.05);
    }
    75% {
        transform: translateY(5px) scale(0.98);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

.con62 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    opacity: 0;
    transform: translateY(100px);
    transition: transform 0.4s cubic-bezier(0, 1, 0.35, 1);
}



.con62.visible {
    transform: translateY(0);
    animation: smoothBounce 0.4s ease-out forwards;
    opacity: 1;
}


.con63 {

    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 40px;


}


.con7 {
    display: flex;

    background-color: rgba(39, 128, 106, 0);
    justify-content: center;
    align-items: center;


}

.thumbgrid {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 15px;
    width: 100%;
}











#titletopscenes {
    display: flex;
    background-color: rgb(0, 255, 60, 0);
    justify-content: center;
    align-items: center;

}

.titleholder {

    display: flex;

    margin-top: -6%;

    justify-content: center;



    font-size: 26px;
    font-family: "Kanit";
    color: rgb(173, 173, 173);
    font-weight: 400;


}



.modelsgrid {

    display: grid;
    place-items: center;
    grid-template-rows: 1fr;
    grid-template-columns: auto clamp(800px, 90vw, 1800px) auto;
    gap: 0px;
    width: 100%;


}


.titleholder_topscenes {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-size: 26px;
    font-weight: 400;
    font-family: "Kanit";
    color: rgb(173, 173, 173);
    background-image: url("/nasty/img/back2.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    height: 120px;
    margin-top: 60px;
}

.content_topscenes {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: -50px;
}




.content_members {

    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 0px;


}




.thumbholder {

    display: flex;
    justify-content: center;
    font-size: 30px;
    font-family: "Kanit";
    color: rgb(173, 173, 173);
    position: relative;
    z-index: 2;
}


#sitesth {

    grid-column: span 5;
    background-color: rgb(233, 4, 130, 0);


    font-size: 30px;
    font-family: "Kanit";
    color: rgb(173, 173, 173);



}


.titlecg {

    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    padding-bottom: 20px;
}





#ttrsb {

    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;


    background-image: url("/nasty/img/back2.png");


    background-size: cover;

    background-position: center top;
    background-repeat: no-repeat;

}


#showmore {

    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr auto;
    gap: 10px;
    z-index: 2;

}


#chann_select {

    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: auto 1fr;
    gap: 10px;
    z-index: 2;

}



.show-more a {
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    text-transform: capitalize;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    position: relative;
}

.show-more a i {
    padding: 8px;
    margin-left: 10px;
    font-size: 12px;
    border-radius: 20px;
    border-color: transparent;
    background: none;
}

.show-more a::after {
    position: absolute;
    width: 28px;
    height: 28px;
    top: 1px;
    right: 0;
    content: '';
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.10);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.show-more a:hover::after {
    width: 107%;
}



.thumbb {
    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-columns: auto;
    background-color: rgb(30, 30, 30);
    padding: 10px;
    border-radius: 16px;
    /*opacity: 0;*/
    transform: scale(0.95) translateY(30px);
    transition:
        opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.thumbb.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}


.thumbb:hover,
.thumbb:focus {
    background-color: rgb(53, 53, 53);
}



.thumb_modelsback {
    display: grid;

    justify-content: center;
    align-items: center;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 15px;
    width: 100%;



}


.thumbbmod.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}


.thumbbmod:hover,
.thumbbmod:focus {
    background-color: rgb(53, 53, 53);
}




.lastblockholder {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;



}


.thumbgridlastb {
    display: grid;
    margin-top: 50px;
    align-items: center;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr minmax(320px, 500px) 1fr;
    background-image: url("/nasty/img/back2.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    height: 200px;
    width: 100%;
    font-size: 22px;
    color: rgb(173, 173, 173);
    font-weight: 200;
}


.lastbhold {

    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 400;
}

.lastbhold2 {

    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: clamp(16px, 1.5vw, 22px);
    font-weight: 400;
}


.lastbuttonspace {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}


.lasttext {
    grid-column: span 3 / span 3;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -20px;
    text-align: center;
    font-size: clamp(14px, 4vw, 22px);
    padding-right: 10%;
    padding-left: 10%;
    margin-top: 10px;
}


.thumbbmod {

    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    background-color: rgb(30, 30, 30);
    padding: 8px;
    border-radius: 14px;
    opacity: 0;
    transform: scale(0.95) translateY(30px);
    transition:
        opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

.thumbbmod_extra{display: none;}



.reccont {

    display: grid;
    grid-template-rows: auto auto auto auto auto;
    grid-template-columns: 100%;
    gap: 5px;
    width: 100%;
    max-width: 100%;

}




.modcont {

    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 100%;
    gap: 5px;


}




.mainthumb {
    width: 100%;
    transition: transform 0.3s ease;
    max-height: 360px;
    object-fit: cover;

}



.thumb {
    position: relative;
    overflow: hidden;
    border-radius: 10px;


}

.thumb img.mainthumb {
    width: 100%;
    display: block;
    overflow: hidden;
    transition: transform 0.3s ease;

}

.thumbb:hover .thumb img.mainthumb {
    transform: scale(1.08);

}


.thumb::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.thumb-icon-left {
    position: absolute;
    top: 10px;
    left: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

/*.thumb-icon-right {*/
/*    position: absolute;*/
/*    top: 10px;*/
/*    right: 10px;*/
/*    opacity: 0;*/
/*    transition: opacity 0.3s ease;*/
/*    z-index: 2;*/
/*}*/


/* image/video layers order */
.thumb img.mainthumb { position: absolute; inset: 0; z-index: 0; }
.thumb .hover-preview  { position: absolute; inset: 0; z-index: 1; }

/* 4K badge – always visible and safely inset */
.thumb .thumb-icon-right{
    position: absolute;
    top: 12px;
    right: 50px;
    z-index: 10;
    opacity: 1 !important;
    display: block !important;
    pointer-events: none;
    transform: translateZ(0);    /* new layer */
    will-change: transform;
}

.thumb .thumb-icon-right img{
    width: 40px;
    height: 40px;
    display: block;
}


.thumb-icon-left .icon-wrapper {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}


.thumb-icon-left .icon-wrapper:hover {
    background-color: rgba(19, 19, 19, 0.9);
}


.thumb-icon-left.active {
    opacity: 1 !important;
}


.thumb-icon-left .icon-selected {
    display: none;
}


.thumb-icon-left.active .icon-default {
    display: none;
}

.thumb-icon-left.active .icon-selected {
    display: block;
}

.thumb-icon-right img {
    width: 40px;
    height: 40px;
}

.thumb-icon-left img {
    width: 20px;
    height: 20px;
}




.thumbb:hover .thumb::before,
.thumbb:hover .thumb-icon-left,
.thumbb:hover .thumb-icon-right {
    opacity: 1;
    border-radius: 10px;
}







.thumbtitle {
    position: relative;
    width: 100%;
    padding-left: 5px;
    font-size: 20px;
    font-family: "Kanit";
    font-weight: 200;
    color: rgb(173, 173, 173);
    overflow: hidden;
}

.thumbtitle span {
    display: block;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.thumbtitle {
    padding-top: 5px;
    padding-bottom: 5px;
}


.thumbmodels {

    display: flex;
    justify-content: left;
    align-items: center;
    padding-left: 5px;
    padding-right: 15px;




    font-size: 18px;
    font-family: "Kanit";
    font-weight: 400;
    color: rgb(255, 255, 255);




}


.thumbtopmodels {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 5px;
    padding-right: 15px;
    font-size: clamp(14px, 2.5vw, 18px);
    font-family: "Kanit";
    font-weight: 400;
    color: rgb(255, 255, 255);
    white-space: nowrap;
    overflow: hidden;
}

.thumbtopmodels span {
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}




.thumbline {

    display: flex;
    justify-content: left;
    align-items: center;
    padding-left: 5px;
}



.thumbbottom {

    font-size: 20px;
    font-family: "Kanit";
    font-weight: 400;
    color: rgb(173, 173, 173);



    display: flex;
    justify-content: left;
    align-items: center;
    padding-left: 5px;
}


.thumbbottom a {
    color: rgb(173, 173, 173);
}

.thumbbottom a:hover {
    color:  rgb(221, 242, 70);
}




.nasty-bottom {
    display: grid;
    margin-top: 70px;
    grid-template-columns: auto minmax(800px, 1400px) auto;
    grid-template-rows: auto;
    font-size: 30px;
    font-family: "Kanit";
    width: 100vw;
    background-image: url("/nasty/img/botbg.png");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}



.bottomgrid {
    display: grid;
    margin-bottom: 50px;
    width: 100%;
    grid-template-rows: auto;
    grid-template-columns: 1fr auto 50px auto 50px auto 50px;
    grid-template-areas: "copyright botmenu1 space1 botmenu2 space2 botmenu3 sapce3";
    gap: 30px;
}


#botmenu1 {
    grid-area: botmenu1;
    font-size: 26px;
    line-height: 3;
    font-family: "Kanit";
    font-weight: 400;
    color: rgb(173, 173, 173);
    display: block;
    justify-content: center;

    text-align: right;
}

#botmenu2 {
    grid-area: botmenu2;
    font-size: 26px;
    line-height: 3;
    font-family: "Kanit";
    font-weight: 400;
    color: rgb(173, 173, 173);
    display: block;
    justify-content: center;

    text-align: right;
}

#botmenu3 {
    grid-area: botmenu3;
    font-size: 26px;
    line-height: 3;
    font-family: "Kanit";
    font-weight: 400;
    color: rgb(173, 173, 173);
    display: block;
    justify-content: center;

    text-align: right;
}



.copyright {

    grid-area: copyright;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 2;
    font-family: "Kanit";
    font-weight: 200;
    color: rgb(173, 173, 173);
    padding-left: 50px;
    display: block;
    justify-content: left;

    text-align: left;
}



.blinks {

    display: none;
}

.blinks2 {

    display: inline;
}


.blinks a {
    font-size: clamp(16px, 1.2vw, 22px);
    line-height: 1.8;
    font-weight: 200;
    color: rgb(255, 255, 255);
    display: block;

}


.blinks a:hover,
.blinks a:focus {
    color: #DDF247;
    text-decoration: none;
    outline: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}



.left {
    display: flex;
    text-align: left;
    width: 50%;
}

.right {
    display: flex;
    text-align: right;
    justify-content: right;
    align-items: center;
    width: 50%;
    padding-right: 5px;
}


.like-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    padding: 10px 0;
}

.like-icon {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 0.3s ease;
    background-image: url('/nasty/img/like.svg');
}
.like-icon:hover, .liked .like-icon {background-image: url('/nasty/img/like_select.svg');}


.like-count {
    font-size: 20px;
    line-height: 20px;
}


.logo-icon {
    width: 24px;
    height: 24px;
    padding-right: 5px;
}



.play {
    width: 40px;
    height: 40px;
    padding-right: 5px;
    transform: skewY(5.5deg);
}

.join {
    width: 70px;
    height: 70px;
}

.vline {
    width: 1px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.148);
}

.uhd {
    width: clamp(200px, 70%, 600px);
    height: auto;
    margin-top: -50px;
}

.titleimg {
    width: clamp(360px, 80%, 900px);
}


.image-container {
    position: relative;
    display: inline-block;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.image-container::before {
    content: "";
    position: absolute;
    top: 70%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0 0 0 / 40%) 60%, rgb(0 0 0 / 0%) 100%);
    transform: translate(-50%, -50%) rotate(-6deg);
    z-index: -1;
    pointer-events: none;
}

.image-container img {
    display: block;
    position: relative;
    z-index: 1;
}







.modelthumb {
    width: 100%;
    border-radius: 10px;
}


/*.logo {*/
/*    height: 90%;*/
/*}*/


.logo{
    height: 90px;
    width: auto;
    display: block;
}


.buttons_holder {

    display: flex;
    flex-direction: column;
    padding-top: 10px;
    background-color: rgb(233, 4, 130, 0);
    font-size: 30px;
    font-family: "Kanit";
    color: rgb(173, 173, 173);
    width: 100%;
}





.show-more{display: flex; flex-direction: column; justify-content: space-around;}



.channels_holder {


    place-items: center;

    gap: 0px;
    width: clamp(320px, 100vw, 1800px);


}





/* SLIDER */



.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0 0px;
    box-sizing: border-box;


}

.slider-wrapper {

    width: 100%;
}

.slider {
    display: flex;
    width: 100%;
    will-change: transform;
    transition: transform 0.5s ease;



}

.slide {
    flex: 0 0 calc(25% - 20px);
    margin: 0 6px;
    box-sizing: border-box;
    border-radius: 20px;
    padding: 10px;
    background-color: rgb(30, 30, 30);
    font-size: 16px;
    font-weight: 400;
    position: relative;
    overflow: visible;
}

.slide img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
    touch-action: manipulation;


}




.slide img.ch_logo {
    width: 80%;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
    position:relative;
}


.ch_title {
    padding-top: 20px;
    display: block;
    font-size: clamp(16px, 3vw, 22px);
    font-weight: 400;
    color: #fff;
    padding-left: 10px;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;


}

.ch_desc {
    margin-top: -5px;

    display: block;
    font-size: clamp(14px, 3vw, 18px);
    color: #fff;
    padding-bottom: 20px;
    font-weight: 200;
    padding-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: clamp(200px, 5vw, 300px);

}



.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 25%;
    height: 100%;
    color: white;
    border: none;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    font-size: 18px;
    touch-action: manipulation;
}

.prev {
    left: 0;
    justify-content: left;
    touch-action: manipulation;
    background: linear-gradient(to right, #161616 20%, rgba(22, 22, 22, 0) 100%);
}
.prev span {
    background-color: rgba(22, 22, 22, 0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;

}



.next {
    right: 0;
    justify-content: right;
    touch-action: manipulation;
    background: linear-gradient(to left, #161616 20%, rgba(22, 22, 22, 0) 100%);
}

.next span {
    background-color: rgba(22, 22, 22, 0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex
;
    justify-content: center;
    align-items: center;

}



.channels_img{
    border-radius: 10px;

}









/* JOIN PAGE STYLES */


.joinwrap {
    display: flex;
    height: 100vh;
    padding: 20px;
    background-image: url(/nasty/img/joinbg.png);
    background-color: #161616;
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    flex-direction: column;
    justify-content: space-between;
}

.feedbackwrap {
    display: flex;
    height: 30vh;
    padding: 20px;
    background-image: url(/nasty/img/joinbg.png);
    background-color: #161616;
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain;
    flex-direction: column;
    justify-content: space-between;
}





.the_joinform{margin-top: 5%; width:100%}


.plan-toggle {
    display: flex;
    border: 1px solid #888888;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
    width: 100%;
}

.plan-toggle input[type="radio"] {
    display: none;
}

.plan-toggle label {
    flex: 1;
    padding: 12px 20px;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888888;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}

.plan-toggle input[type="radio"]:checked + label {
    color: white;
}

.plan-toggle input[type="radio"]:first-of-type:checked ~ .highlighter {
    transform: translateX(0);
}

.plan-toggle input[type="radio"]:last-of-type:checked ~ .highlighter {
    transform: translateX(100%);
}

.plan-toggle .highlighter {
    position: absolute;
    background-color: black;
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 6px;
    transition: transform 0.3s ease;
    z-index: 1;
}

.plan-toggle svg {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

/* Tariff plans styles */
.tariff-plans {
    display: flex;
    flex-direction: column;
    border: 1px solid #888888;
    border-radius: 8px;
    overflow: hidden;
}

.tariff-plan {
    background-color: #151515;
    padding: 5px 20px 10px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative;
}

.tariff-plan:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tariff-plan.selected {
    background-color: black;
}

.tariff-plan.selected .plan-name {
    color: #ddf246;
}



.selector-icon {

    width: 20px;
    height: 20px;
    padding-right: 5px;

}


.check-icon {
    position: absolute;
    width: 15px;
    height: 15px;
    left: 16px;
    fill: currentColor;
    color: white;
    display: none;
    padding-bottom: 15px;
}

.selected .check-icon {
    display: block;
}

.check-icon-placeholder {
    width: 20px;
    height: 20px;
    visibility: hidden;
}

.tariff-plan-info {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 44px;
}



.email-input-container {
    position: relative;
    margin-top: 24px;
    margin-top: 30px;


}

.email-input {

    width: 100%;
    height: 60px;
    box-sizing: border-box;
    padding-left: 20px;
    background-color: #151515;
    border: 1px solid #888888;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s ease;
}

.email-input:focus {
    border-color: #ddf246;
}

.email-input::placeholder {
    color: #888888;
}

/* Payment method toggle */
.payment-toggle {
    display: flex;
    border: 1px solid #888888;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    margin-top: 20px;
    margin-bottom: 30px;
    width: 100%;
}

/* Submit button */
.submit-button {
    width: 100%;
    padding: 14px;
    background-color: #151515;
    border: 1px solid #888888;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}



.the_joinbutton {
    display: flex;
    border-radius: 10px;
    background-color: rgb(221, 242, 70);
    font-weight: 800;
    color: #000000;
    align-items: center;
    width: 100%;
    height: 70px;
    justify-content: center;
    font-size: clamp(20px, 2.5vw, 30px);
    cursor: pointer;
    border: none;
    outline: none;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
    z-index: 1;
    font-family: "kanit";
}

.the_joinbutton::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #f05722;
    transition: left 0.3s ease;
    z-index: -1;
}

.the_joinbutton:hover::before {
    left: 0;
}

.the_joinbutton:hover {
    color: white;
}

.the_joinbutton:hover .join-icon {
    opacity: 0;
}

.the_joinbutton:hover .join-icon-hover {
    opacity: 1;
}



.submit-button:hover {
    background-color: #2c2c2c;
}

.submit-button:active {
    transform: scale(0.98);
}

/* Error message */
.email-input-container {
    position: relative;
    margin-bottom: 20px;
}

.error-message {
    display: none;
    position: absolute;
    left: 0;
    top: -24px;
    color: #ddf246;
    font-size: 12px;
    align-items: center;
    width: 100%;
}

.error-message.relative {
    display: none;
    position: relative;
    top:0;
    padding-top: 5px;
}

.error-icon {
    margin-right: 5px;
    width: 16px;
    height: 16px;
    fill: #ddf246;
}

.email-input.error {
    border-color: #ddf246;
}

.error-message.visible
{
    display: flex;
}


.payment-toggle input[type="radio"] {
    display: none;
}

.payment-toggle label {
    flex: 1;
    padding: 12px 20px;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888888;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}

.payment-toggle input[type="radio"]:checked + label {
    color: white;
}

.payment-toggle input[type="radio"]:first-of-type:checked ~ .payment-highlighter {
    transform: translateX(0);
}

.payment-toggle input[type="radio"]:last-of-type:checked ~ .payment-highlighter {
    transform: translateX(100%);
}

.payment-toggle .payment-highlighter {
    position: absolute;
    background-color: black;
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 6px;
    transition: transform 0.3s ease;
    z-index: 1;
}

.payment-toggle svg {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.plan-details {
    display: flex;
    flex-direction: column;
}

.plan-name {
    font-weight: 500;
    font-size: 18px;
    color: white;
    margin-bottom: 2px;
}

.plan-name-selected {
    color: #ddf246;
}

.plan-description {
    font-size: 12px;
    color: #8a8a8a;
}

.plan-price {
    text-align: right;
}

.price-amount {
    font-weight: bold;
    font-size: 16px;
    color: white;
}

.price-period {
    font-size: 12px;
    color: #8a8a8a;
}

.tariff-plan input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}




.floating-image-container {
    display: flex;
    position: relative;
    width: 100%;
    z-index: 20;
    flex-direction: column;
    align-items: center;
    margin-top: -95px;

}



.floating-image {
    display: flex;
    position: relative;

    width: 80%;
    z-index: 10;
    height: 100px;
    margin-bottom: 10px;
    justify-content: center;

}

.floating-pic {
    width: 100%;
    height: auto;
    margin-bottom: -40px;
}

/* Основной контейнер */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 20px;
    width: clamp(1000px, 80vw, 1800px);
    margin: 40px auto 0;
    position: relative;
    justify-content: center;


}


.grid-column {
    border-radius: 8px;
    padding: 20px;
    box-shadow: none;
}

.joinform {
    background-color: #1e1e1e;
    border-radius: 20px;
    position: relative;
}

.benefits, .joinsites {
    background-color: transparent;
}


.joinsites, .joinform {
    height: clamp(600px, 80vh, 800px) !important;
}

.joinsites {
    overflow: hidden;
}



.benefits {
    overflow-y: visible;
    height: auto;
}


h2 {
    margin-bottom: 10px;
    text-align: center;
    font-size: clamp(16px, 1.5vw, 24px) ;
    font-family: "Kanit";
    font-weight: 500;
    color: #fff;
    white-space: nowrap;

}

.subtitle {
    font-size: 18px;
    text-align: center;
    margin-top: -15px;
    color: #666;
}

.benefits-container {
    display: flex;
    flex-direction: column;
}

.benefit-item {
    background-color: transparent;
    border-radius: 0;
    padding: 15px 0;
    box-shadow: none;
    border-bottom: 1px solid #363636;
    display: flex;
    align-items: center;
}


.benefit-item:last-child {
    border-bottom: none;
}

.benefit-icon {
    margin-right: 20px;
    flex-shrink: 0;
}

.benefit-icon img {
    width: 70px;
    height: 70px;
    display: block;
}

.benefit-content {
    flex-grow: 1;
}


.form-group {
    margin-bottom: 15px;
}



button {
    background-color: #4a90e2;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    cursor: pointer;
}

h3 {
    margin-bottom: 0px;
    color: #adadad;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-top: 15px;

}

h4 {
    margin-bottom: 0px;
    color: #ffffff;
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 300;
    margin-top: -8px;
    margin-bottom: 15px;
}


.slider-container {
    position: relative;
    height: calc(100% - 80px);
    overflow: hidden;
    margin-top: 20px;
}

.vertical-slider {
    display: flex;
    flex-direction: column;
    position: relative;
    will-change: transform;
}


.slidejoin {
    flex-shrink: 0;
    width: 100%;
    margin-bottom: 20px;
    position: relative;
}

.slidejoin img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.logo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    background-color: rgba(0, 0, 0, 0.7);
    border-bottom-right-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    padding:6px;

    z-index: 3;
}

.gradient-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to bottom, #161616, transparent);
    z-index: 2;
    pointer-events: none;
}

.gradient-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to top, #161616, transparent);
    z-index: 2;
    pointer-events: none;
}


@media (max-width: 1100px) {



    h2 {font-size: 22px;}
    h3 {font-size: 26px; font-size: 16px; white-space: nowrap;}
    h4 {font-size: 22px}

    h4 {
        margin-bottom: 0px;
        color: #ffffff;

        font-weight: 300;
        margin-top: -8px;
        margin-bottom: 15px;
    }


    .grid-container {
        grid-template-columns: 1fr 1.2fr;
        grid-template-rows: auto auto;
        width: 100%;
    }

    .joinsites, .joinform {
        height: clamp(650px, 80vh, 800px) !important;
    }

    .benefits {
        grid-column: 1 / span 2;
        grid-row: 2;
        height: auto;
    }

    .benefits-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }

    .benefit-item {
        margin: 10px;
        padding: 15px;
        border-bottom: 1px solid #363636;
    }

    .benefit-item:nth-last-child(-n+2) {
        border-bottom: none;
    }


}







@media (max-width: 800px) {



    .benefit-item:nth-last-child(-n+2) {
        border-bottom: 1px solid #363636;
    }

    .benefit-item:last-child {
        border-bottom: none;
    }


    .grid-container {
        grid-template-columns: 1fr;
        width: 100%;
        gap: 30px;
    }

    h2 {font-size: 16px; font-size: 16px; white-space: nowrap;}
    h3 {font-size: 18px}
    h4 {font-size: 16px}


    .joinsites, .joinform, .benefits {
        grid-column: 1;
    }

    .joinform {
        grid-row: 1;
        height: clamp(650px, 70vh, 800px) !important;
    }

    .joinsites {
        grid-row: 2;
        height: clamp(500px, 70vh, 660px) !important;
    }

    .benefits {
        grid-row: 3;
    }


    .benefits-container {
        display: flex;
        flex-direction: column;
        gap: 0;
    }


}


.bottomwrap{display: flex;
    width: 100%;
    height: 100%;
}


/* END JOIN PAGE STYLES */












/* LOGIN FORM STYLES*/


.loginwrap, .resetwrap {
    display: flex;
    height: 100vh;
    background-image: url(/nasty/img/joinbg.png);
    background-color: #161616;
    background-repeat: no-repeat;
    background-position: top;
    background-size:auto;
    flex-direction: column;
    justify-content: center;
    overflow-y: hidden;
    align-content: center;
    align-items: center;
}


.login-form, .reset-form
{
    display: flex;
    width: clamp(320px, 50vw, 500px);
    height: 550px;
    border-radius: 20px;
    background-color: #1e1e1e;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;


}

.reset-form {
    height: 415px;
}


.login-title, .reset-title {
    display: flex;
    position: relative;
    width: 100%;
    z-index: 20;
    flex-direction: column;
    align-items: center;
    margin-top: -85px;
    margin-bottom: 20px;

}



.floating-image {
    display: flex;
    position: relative;

    width: 80%;
    z-index: 10;
    height: 100px;
    margin-bottom: 10px;
    justify-content: center;

}




.login-input-container, .reset-input-container {

    width: 70%;


}

.cf-turnstile {
    text-align: center;
    margin-top: 20px;
}

.login-input,.reset-input {

    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding-left: 20px;
    background-color: #151515;
    border: 1px solid #515151;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    font-weight: 400;
    outline: none;
    transition: border-color 0.3s ease;
    margin-top: 20px;
    font-family: "Kanit";
}

.login-input:focus {
    border-color: #ddf246;
}

.login-input::placeholder {
    color: #888888;
}


.login-message,
.reset-message
{
    font-size: 14px;
    align-items: center;
    color: #ddf246;
}

.validation-error {
    font-size: 14px;
    align-items: center;
    color: #ddf246;
}



.login-message.error, .reset-message.error {
    color: #f05722;
}

.loginbutton, .resetbutton {
    margin-top: 30px;
    margin-bottom: 20px;
    display: flex;
    border-radius: 10px;
    background-color: rgb(221, 242, 70);
    font-weight: 800;
    color: #000000;
    align-items: center;
    width: 80%;
    height:60px;
    justify-content: center;
    font-size: clamp(20px, 2.5vw, 30px);
    cursor: pointer;
    border: none;
    outline: none;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
    z-index: 1;
    font-family: "kanit";
}

.loginbutton::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #f05722;
    transition: left 0.3s ease;
    z-index: -1;
}

.loginbutton:hover::before {
    left: 0;
}

.loginbutton:hover {
    color: white;
}

.loginbutton:hover .join-icon {
    opacity: 0;
}

.loginbutton:hover .join-icon-hover {
    opacity: 1;
}

.login-links{
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;

    margin-bottom: 20px;
}

.login_links a {color:#fff; transition: color 0.5s ease;}
.login_links a:hover {color:#ddf246; }
.forgot_password,
.getaccess {
    text-decoration: none;
    color: #333;
}




/* END LOGIN FORM STYLES */












@media only screen and (max-width:1800px) {


    .thumbgrid {

        display: grid;
        grid-template-rows: auto;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 15px;

        width: 100%;
    }


    /*    .thumbgrid > *:nth-child(4n) {*/
    /*        display: none;*/

    /*}*/


}


/* Original designer mobile block starts */


@media only screen and (max-width:1000px) {

    /*.memcontent {*/
    /*    margin-top: 40px;*/
    /*    margin-left: 0px;*/
    /*    margin-right: 0px;*/
    /*}*/

    .memcontent {
        margin-top: -40px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .user_memcontent {
        margin-top: -20px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .mem_content_grid {
        display: grid;
        grid-template-columns: 90%;
        grid-template-rows: auto 1fr;
        gap: 0px;
        justify-items: center;
        justify-content: center;


    }

    .cat_grid {
        display: grid;
        grid-template-columns: 90%;
        grid-template-rows: auto 1fr;
        gap: 0px;
        justify-items: center;
        justify-content: center;


    }


    .sidebar-bottom {
        display: none;
    }



    .image-container {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .image-container::before {
        background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0 0 0 / 90%) 40%, rgb(0 0 0 / 0%) 100%);

    }



    .titleimg.fade-up {
        transform: translateY(-20px);
    }

    .titleimg.fade-down {
        transform: translateY(20px);
    }


    .arrow {
        width: 50px;
        height: 50px;
        font-size: 20px;
        margin: -60px 10px;
    }


    .slide {
        flex: 0 0 calc(50% - 20px);
    }



    #con62 {

        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        font-size: 22px;

    }



    .logospace {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-left: 0px;
        z-index: 10;
    }

    .logo {
        height: clamp(40px, 13vw, 90px);
        padding-left: 30px;
    }

    .menuspace {
        display: none;
    }

    .signspace {
        display: none;
    }

    .mobmenu {
        display: block;

    }









    .nasty-title {
        display: grid;

        grid-template-rows: auto;
        grid-template-columns: auto;
        grid-template-areas: "titlespace""title";
        align-items: end;
        height: 100%;
        width: 100%;

        background-color: rgb(255, 0, 0, 0);
        gap: 20px;

        background-image: url(/nasty/img/skewbg4.png);
        background-repeat: no-repeat;
        background-position: bottom;
        z-index: 2;


    }

    .title {
        grid-area: title;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 90px;

    }

    .titlespace {
        grid-area: titlespace;
        height: 100%;

    }

    .box {
        flex: 1;
        display: flex;
        flex-direction: column;

    }

    .titlebox {
        padding-right: 0px;

        width: 100%;
        display: flex;
        justify-content: center;
        padding-right: 0px;
        padding-bottom: 20px;
        padding-top: 40px;



    }

    .titleimg {
        margin-left: -40px;
    }




    .headb {

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


    }



    .hbutton {
        display: flex;

        margin-left: 0px;
        margin-right: 0px;
        border-radius: 10px;
        margin-left: 0px;
        background-color: rgb(240, 86, 35);
        padding-left: 40px;
        padding-right: 40px;
        padding-top: 10px;
        padding-bottom: 10px;


        color: #fff;
        transform: skew(-6deg, -5deg);
        margin-top: -20px;
        align-items: center;

        justify-content: center;

        width: 65%
    }



    /* Recent block tile */




    .titleholder {

        display: flex;
        padding-top: 10px;
        font-size: 30px;
        font-family: "Kanit";
        color: rgb(173, 173, 173);
        margin-top: -25px;
    }





    .titlecg {

        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr auto 1fr;
        gap: 10px;




    }



    .modelsgrid {

        display: grid;
        place-items: center;
        grid-template-rows: 1fr;
        grid-template-columns: auto;
        gap: 0px;
        padding-left: 0px;
        padding-right: 0px;
        width: 100%;




    }



    .recentgrid {

        display: grid;
        place-items: center;
        grid-template-rows: 1fr;
        grid-template-columns: auto;
        gap: 0px;
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;

    }


    .headcontener {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
        margin-bottom: -40px;
    }


    .show-more{display: none;}



    /* Recent block content */


    .thumbgrid {

        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: 1fr 1fr;
        gap: 15px;

        width: 100%;

    }


    .thumbgrid > *:nth-child(4n) {
        display: flex;
        flex-direction: column;
    }

    .thumbbmod_extra{
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: auto;
        background-color: rgb(30, 30, 30);
        padding: 10px;
        border-radius: 15px;

    }



    .thumb_modelsback {
        display: grid;

        justify-content: center;
        align-items: center;
        grid-template-rows: auto auto;
        grid-template-columns: 1fr 1fr 1fr ;
        gap: 10px;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;



    }





    /* BOTTOM */




    .nasty-bottom {
        display: grid;
        margin-top: 70px;
        grid-template-columns: auto;
        grid-template-rows: auto;
        font-size: 30px;
        font-family: "Kanit";
        width: 100vw;
        background-image: url("/nasty/img/botbg.png");
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
    }


    .bottomgrid {
        grid-template-rows: auto;
        grid-template-columns: auto;
        grid-template-areas: "botmenu1""space1""botmenu2""space2""botmenu3""sapce3""copyright";
        font-size: 32px;
        line-height: 3;
        font-family: "Kanit";
        font-weight: 400;
        gap: 0px;


    }

    .vline {
        height: 1px;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.148);
    }

    .uhd {
        width: clamp(200px, 50%, 400px);
        height: auto;
        margin-top: 0px;
    }

    .copyright {
        grid-area: copyright;
        line-height: 2;
        font-family: "Kanit";
        font-weight: 200;
        color: rgb(173, 173, 173);
        display: block;
        justify-content: center;
        text-align: center;
        padding-left: 0px;
    }




    #botmenu1 {
        grid-area: botmenu1;
        color: rgb(173, 173, 173);
        display: inline-block;
        justify-content: center;
        text-align: center;
        user-select: none;



    }

    #botmenu2 {
        grid-area: botmenu2;
        color: rgb(173, 173, 173);
        display: block;
        justify-content: center;
        text-align: center;
    }


    #botmenu3 {
        grid-area: botmenu3;
        color: rgb(173, 173, 173);
        display: block;
        justify-content: center;

        text-align: center;
    }



    .blinks {
        display: inline-block;

    }

    .blinks2 {
        display: none;
    }


    .blinks a {
        font-size: 24px;
        line-height: 2;
        font-weight: 200;
        color: rgb(255, 255, 255);
        display: block;

    }




    .hidden {
        display: none;
    }



    .menu-content {
        max-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
        opacity: 0;
    }

    .menu-content a {
        padding: 5px 0;
    }


    .menu-content.open {
        max-height: 300px;
        opacity: 1;
        transition: max-height 0.3s ease-in, opacity 0.3s ease-in;
    }


    .thumbgridlastb {
        display: grid;
        margin-top: 50px;

        align-items: center;
        grid-template-rows: auto auto;
        grid-template-columns: 1fr;
        background-image: url("/nasty/img/back2.png");
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        width: 100%;
        height: 200px;
        font-size: 22px;
        color: rgb(173, 173, 173);
        font-weight: 200;

    }

    .lastbhold {
        display: none;
    }

    .lastbhold2 {
        display: none;
    }




}

/* Original designer mobile block ends */



/* SMARTPHONES */
@media only screen and (max-width:767px) {



    .slide {
        flex: 0 0 calc(100% - 20px);
    }

    .thumbgrid {

        display: grid;
        grid-template-rows: auto auto auto auto;
        grid-template-columns: 1fr;
        gap: 15px;

        width: 100%;
    }


    .nastygrid {
        display: grid;
        grid-template-rows: minmax(400px, 50vh);
    }

    .titlebox {
        padding-bottom: 15px;
        justify-content: center;
    }

    .slide {
        flex: 0 0 calc(50% - 20px);
    }

}


.img-link {
    display: inline-block;
}
.img-link:hover {
    text-decoration: none;
    filter: none;
}
.img-link img {
    display: block;
    width: 100%;
    height: auto;
    border: none;
}


.comment-likes {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.comment-likes .like-count {
    font-size: 14px;
    color: #fff;
}

.like-count {
    margin-right: 12px; /* like counter under player */
}


/* CENTRAL MODELS GRID FOR MODELS BLADE: */

.modelsgrid2 {
    display: grid;
    place-items: center;
    grid-template-rows: 1fr;
    grid-template-columns: auto clamp(600px, 80vw, 900px) auto;
    gap: 0px;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    overflow-x: hidden;
}

.thumb_modelsback.models-page {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 100%;
    justify-items: center;
    padding: 0 10px;
    box-sizing: border-box;
}

.thumb_modelsback.models-page .thumbbmod {
    width: 100%;
    max-width: 283px;
    box-sizing: border-box;
}

.thumbbmod .thumb img.modelthumb {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    max-width: 283px;
}

.thumb_modelsback.models-page .thumbbmod { max-width: none; }

.content_topscenes2 {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    margin-top: 0;
}

.con5-models, .con7-models {
    width: 100%;
    max-width: 100%;
    flex-shrink: 0;
    background-color: transparent;
}



.underplayer_button .like-container {
    width: 24px;
    height: 24px;
    padding-bottom: 0;
}

.video-js {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

.video-js .vjs-control-bar {
    display: flex !important;
}


.thumb {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}



/* videos: player box */

.thumb--scene {
    aspect-ratio: 16 / 9;
    background: #000;
    line-height: 0;
}

.thumb--scene img,
.thumb--scene .hover-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* models: portrait box */
.thumb--model {
    aspect-ratio: 3 / 4;
}

.thumb--model img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover preview  */

.thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #000;
    line-height: 0;
}

.thumb img,
.thumb .hover-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    backface-visibility: hidden;
}

.thumb .hover-preview {
    opacity: 0;
    transition: opacity .0s ease;
    pointer-events: none;
    background: #000;
}

.thumb .mainthumb { transition: opacity .0s ease; }
.thumb.hovering .hover-preview { opacity: 1; }
.thumb.hovering .mainthumb     { opacity: 0; }



/* ==== Recent and Top GRIDS & COUNT CONTROL ==== */

/* Base (small): 3 columns */
.thumbgrid.rec-added-grid{
    display:grid;
    gap:15px;
    grid-template-columns: repeat(3, minmax(0,1fr));
}

/* Small: show only first 6 */
.thumbgrid.rec-added-grid.limit-6-sm > .thumbb:nth-child(n+7){
    display:none !important;
}

/* Large: 4 columns and show all (override the hide) */
@media (min-width: 1200px){
    .thumbgrid.rec-added-grid{
        grid-template-columns: repeat(4, minmax(0,1fr));
    }
    .thumbgrid.rec-added-grid.limit-6-sm > .thumbb{
        display:block !important;
    }
}

/* Base (small): 3 columns */
.thumbgrid.top-rated-grid{
    display:grid;
    gap:15px;
    grid-template-columns: repeat(3, minmax(0,1fr));
}

/* Small: show only first 9 */
.thumbgrid.top-rated-grid.limit-9-sm > .thumbb:nth-child(n+10){
    display:none !important;
}

/* Large: 4 columns and show all (override the hide) */
@media (min-width: 1200px){
    .thumbgrid.top-rated-grid{
        grid-template-columns: repeat(4, minmax(0,1fr));
    }
    .thumbgrid.top-rated-grid.limit-9-sm > .thumbb{
        display:block !important;
    }
}

.thumbgrid.rec-added-grid .mainthumb,
.thumbgrid.top-rated-grid .mainthumb{
    max-height:360px;
    object-fit:cover;
}



.ucase { text-transform: uppercase; }


/* === Trailer Signup Overlay === */
.player-container { position: relative; }

/* Full-cover overlay that centers its child */
.player-container .stop-warning-overlay {
    position: absolute;
    inset: 0;                         /* cover the whole player */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;                    /* above Video.js UI */
    pointer-events: auto;
    backdrop-filter: blur(5px);
}

/* Compact centered card */
.stop-warning-card {
    /* behave like 60% of player, but never too tiny/huge */
    width: clamp(420px, 60%, 720px);
    background-color: rgba(0, 0, 0, 0.65);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;              /* center children horizontally */
    padding: 32px 24px 28px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    text-align: center;               /* center text by default */
    position: relative;               /* needed for raised icon positioning */
}

/* Icon / text / button — scoped so globals don't override */
.stop-warning-card .stop-icon {
    position: absolute;
    left: 50%;
    top: 0;                           /* anchor to top of the card */
    transform: translate(-50%, -60%); /* lift icon ~half outside the card */
    width: 100px; height: 100px;
    margin: 0;                        /* avoid margin side-effects */
    opacity: .95;
    pointer-events: none;
}

.stop-warning-card .warning-title {
    font-size: 27px; font-weight: 700; color: #fff;
    margin: 48px 0 6px;               /* extra top space to clear raised icon */
    font-family: 'Kanit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.stop-warning-card .warning-text {
    font-size: 18px; font-weight: 300; color: #fff;
    margin: 0 0 28px; line-height: 1.45;
    font-family: 'Kanit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    max-width: 60ch;
}

.stop-warning-card .warning-button {
    padding: 15px 50px;
    background-color: #ddf246; color: #000;
    border: none; border-radius: 10px;
    font-size: 20px; font-weight: 700;
    font-family: 'Kanit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    cursor: pointer; transition: all .25s ease;
    text-decoration: none; display: inline-block;
}

.stop-warning-card .warning-button:hover,
.stop-warning-card .warning-button:focus-visible {
    background-color: #f05722; color: #fff;
}

/* compact size on ultra-wide players */
@media (min-width: 1200px){
    .stop-warning-card { max-width: 700px; }
}

/* Small screens */
@media (max-width: 600px) {
    .stop-warning-card {
        width: 86vw;
        padding: 18px 14px 16px;
    }
    .stop-warning-card .stop-icon {
        width: 40px; height: 40px;
        transform: translate(-50%, -65%);
    }
    .stop-warning-card .warning-title { margin-top: 28px; font-size: 20px; }
    .stop-warning-card .warning-text  { font-size: 14px; margin-bottom: 12px; }
    .stop-warning-card .warning-button { padding: 10px 28px; font-size: 18px; }
}


/* frontend sidebar title and icons */
.profile_links2{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    margin-right: 20px;
}

/* Each row */
.profile_link2 { color:#fff; }

/* Title + icon on one line */
.profile_link2 .site-link{
    display: inline-flex;       /* row by default */
    align-items: center;
    gap: 8px;                   /* space between text and icon */
    text-decoration: none;
    white-space: nowrap;        /* prevents wrapping to second line */
}

/* Icon size */
.profile_link2 .icon-4k{
    width: 22px;
    height: 22px;
    display: inline-block;
    object-fit: contain;
}


/* --- MODELS SLIDER --- */

:root{
    --models-card-w: 283px;
    --models-gap: 10px;
    --models-visible: 5; /* default: show 5 */
}

/* wrap with arrows */
.models-rail{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 10px;            /* space between arrow and viewport */
    margin: 0 auto;
}

/* exact viewport: N cards + (N-1) gaps */
.models-viewport{
    overflow:hidden;
    width: calc(
        var(--models-visible) * var(--models-card-w) +
        (var(--models-visible) - 1) * var(--models-gap)
    );
    max-width: 100%;
}

/* horizontal scroller */
.models-scroll{
    display:flex;
    gap: var(--models-gap);
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
}
.models-scroll::-webkit-scrollbar{ height:0; }

/* one card = fixed width */
.model-slide{
    flex: 0 0 var(--models-card-w);
    min-width: var(--models-card-w);
    scroll-snap-align:start;
}

/* kill fade-in */
.models-scroll .thumbbmod{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
}

/* arrows */
.models-arrow{
    background: rgba(0,0,0,.45);
    border:0;
    border-radius:50%;
    width:44px; height:44px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
}
.models-arrow[disabled]{ opacity:.35; pointer-events:none; }


/* medium: 4 visible */
@media (max-width: 1200px){
    :root{
        --models-card-w: 240px;
        --models-visible: 4;
    }
}

/* mobile: fluid */
@media (max-width: 768px){
    .models-viewport{ width: 100%; }
    .model-slide{ flex-basis: 70vw; min-width: 70vw; }
}

/* wide screens — show 6 items */
@media (min-width: 2056px){
    :root{ --models-visible: 6; }
}



.up_blockname{
    margin-top: 30px;
}

.downloads-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    width: 100%;
    margin-top: 15px;
}

.download-item {
    background-color: #000000;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.3s ease;

}

.download-item:hover {
    background-color: #141414;
}

.download-icon {
    width: 60px;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.download-icon img {
    width: 100%;
    height: 100%;
    transition: filter 0.3s ease;
}

.download-item:hover .download-icon img {
    filter: brightness(0) saturate(100%) invert(88%) sepia(13%) saturate(2089%) hue-rotate(25deg) brightness(101%) contrast(93%);
}

.download-title {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    margin-bottom: 0px;
    font-family: 'Kanit', sans-serif;
}

.download-size {
    font-size: 12px;
    font-weight: 300;
    color: #adadad;
    text-align: center;
    font-family: 'Kanit', sans-serif;
    margin-bottom: 15px;
}

/* Responsive */
@media only screen and (max-width: 1280px) {
    .downloads-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (max-width: 600px) {
    .downloads-container {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .download-item {
        padding: 20px;
    }

}



/* allows cards to shrink /prevents overlap */
.thumbb{ min-width: 0; }



/* Mobile fixes */
@media (max-width: 1000px){
    .mem_content_grid{ width: 94vw !important; }

    /* Center the inner rail to that width */
    .recentgrid,
    .modelsgrid{
        grid-template-columns: auto minmax(0, 94vw) auto !important;
    }

    /* Force video grids to a single column */
    .thumbgrid{
        grid-template-columns: 1fr !important;
    }

    /* undo hiding 4th card for mobile */
    .thumbgrid > *:nth-child(4n){
        display: initial !important;
    }

}


@media (max-width: 1000px) {

    /* hide sidebar */
    .sidebar, .sidebar-bottom, .thumbgrid_members_side,
    .separator_conteiner {
        display: none !important;
    }

    /* keep the main content column */
    .mem_content_grid {
        grid-template-columns: 90%;
        grid-template-rows: auto 1fr;
        gap: 0;
        justify-items: center;
        justify-content: center;
    }

    /* keep .cat_grid */
    .cat_grid {
        grid-template-columns: 90%;
        grid-template-rows: auto 1fr;
        gap: 0;
        justify-items: center;
        justify-content: center;
    }
}


@media (max-width: 1000px) {

    /* hide radio inputs for tabs */
    .tabs-container input[type="radio"] {
        display: none;
    }

    /* hide PHOTO / VIDEO labels */
    .tab-labels .tab-label {
        display: none;
    }

}


/* MOBILE: tighten player area text + buttons */
@media (max-width: 1000px) {

    /* --- under-player buttons in one row and smaller --- */

    .underplayer_container {
        margin-top: 10px;
    }

    .underplayer_button-container {
        display: flex;
        flex-wrap: wrap;          /* wraps if not enough space */
        gap: 8px;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 12px;
    }

    .underplayer_button,
    .underplayer_button--join {
        height: auto;
        padding: 6px 10px;
        min-width: auto;
    }

    .underplayer_button-text,
    .underplayer_button-text-join {
        font-size: 12px;
        line-height: 1.3;
    }

    /* make icons smaller */
    .underplayer_button-icon,
    .underplayer_button-icon .up_icon-container {
        width: 20px;
        height: 20px;
    }

    .underplayer_button-icon img,
    .underplayer_button .like-icon {
        width: 20px;
        height: 20px;
    }

    /* like */
    .underplayer_button .like-count {
        font-size: 12px;
        margin-right: 6px;
        padding-right: 0;
    }


    /* --- text block under player --- */

    .up_title {
        font-size: 16px;
        line-height: 1.3;
        margin-top: 12px;
        margin-bottom: 4px;
    }

    .up_starring,
    .up_description,
    .up_blockname,
    .up_blockname-v,
    .up_cat-container,
    .up_cat a {
        font-size: 13px;
        line-height: 1.4;
    }

    .up_blockname,
    .up_blockname-v {
        margin-top: 8px;
        margin-bottom: 4px;
    }

    /* description shorter on mobile */
    .up_description {
        max-height: 6em;      /* about 4–5 lines */
        overflow: hidden;
    }


    /* --- downloads grid --- */

    .downloads-container {
        margin-top: 8px;
        gap: 4px;
    }

    .download-title,
    .download-size {
        font-size: 11px;
        line-height: 1.3;
    }


}


/* MOBILE: under-player */
@media (max-width: 1000px) {

    /* Hide description + categories under player for now!! */
    .up_description, .up_blockname,
    .up_cat-container {
        display: none !important;
    }


    /* Under-player buttons */
    .underplayer_button-container {
        display: flex;
        flex-wrap: nowrap;          /* one row */
        gap: 6px;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;         /* no horizontal scrollbar */
    }

    /* Buttons compact */
    .underplayer_button,
    .underplayer_button--join {
        min-width: 0;               /* allow shrinking */
        padding: 6px 4px;
        height: auto;
        margin-top: 0;
        width: auto !important;

        white-space: normal;
        text-align: center;
    }

    /* Smaller text */
    .underplayer_button-text,
    .underplayer_button-text-join {
        font-size: 12px;
        line-height: 1.2;
    }

    /* Smaller icons */
    .underplayer_button-icon,
    .underplayer_button-icon .up_icon-container {
        width: 18px;
        height: 18px;
    }

    .underplayer_button-icon img,
    .underplayer_button .like-icon {
        width: 18px;
        height: 18px;
    }

    /* Like button */
    .underplayer_button .like-count {
        font-size: 11px;
        margin-right: 4px;
        padding-right: 0;
    }

    .download-icon {
        width: 22px;
        height: 22px;
    }


}



/* TOP RATED MODELS SLIDER  */

@media (max-width: 1000px) {

    /* models block centered*/
    .modelsgrid {
        grid-template-columns: auto minmax(0, 94vw) auto !important;
        padding-left: 0;
        padding-right: 0;
    }

    .content_topscenes {
        width: 100%;
        max-width: 100%;
    }

    /* Rail + viewport */
    .models-rail {
        width: 100%;
        justify-content: center;
    }

    .models-viewport {
        width: 100%;
        overflow: hidden;
    }

    /* inner row scrolls by swipe */
    .models-scroll {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 10px;
    }

    .models-scroll::-webkit-scrollbar {
        height: 0;
    }

    /* Each slide = “card”  */
    .model-slide {
        flex: 0 0 70vw;      /* 70% of viewport width */
        min-width: 70vw;
        scroll-snap-align: start;
    }

    /* card fills the slide */
    .model-slide .thumbbmod {
        width: 100%;
        box-sizing: border-box;
    }

    .model-slide .thumb--model {
        aspect-ratio: 3 / 4;
        overflow: hidden;
    }

    .model-slide .thumb--model img.modelthumb {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }
}