/* GirlScanner template, 2026 redesign. DLE 12-13.
   Palette comes from the logo: chili red, stem green, blush wordmark, on aubergine.
   To change the look, edit the tokens in :root. */

/* FONTS
----------------------------------------------- */
@font-face {font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(../fonts/onest-latin-wght-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url(../fonts/onest-cyrillic-wght-normal.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face {font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; font-display: swap;
    src: url(../fonts/unbounded-latin-wght-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face {font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; font-display: swap;
    src: url(../fonts/unbounded-cyrillic-wght-normal.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}

/* TOKENS
----------------------------------------------- */
:root {
    --ink: #160c13;        /* page */
    --plum: #21131d;       /* panels */
    --plum-2: #2f1d2a;     /* raised controls */
    --line: #472c3f;       /* borders */
    --blush: #f9e8f0;      /* text */
    --mute: #c0a6b5;       /* secondary text */
    --pink: #ff9dbe;       /* links on dark */
    --chili: #de1f3d;      /* primary actions */
    --chili-hi: #f23d5a;   /* hover, scan line */
    --stem: #8acb3f;       /* download, positive */
    --stem-ink: #16230a;   /* text on stem */

    --display: 'Unbounded', 'Onest', Arial, sans-serif;
    --body: 'Onest', Arial, sans-serif;

    --r-s: 6px;
    --r-m: 10px;
    --gutter: 28px;
    --header-h: 72px;
    --cols: 2;             /* cards per row on desktop; ad rows follow this rhythm */
}

/* BASE
----------------------------------------------- */
*, *::before, *::after {box-sizing: border-box;}
* {margin: 0; padding: 0; border: 0;}
html {-webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px);}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
table {border-collapse: collapse; border-spacing: 0;}
input, select {vertical-align: middle;}
img {max-width: 100%;}

body {
    font: 400 15px/1.45 var(--body);
    color: var(--blush);
    background: var(--ink);
    min-height: 100%;
    width: 100%;
}

a {color: var(--blush); text-decoration: none;}
a:hover, a:focus {color: var(--pink);}

:focus-visible {outline: 2px solid var(--pink); outline-offset: 2px;}

h1, h2, h3, h4, h5 {font-weight: 600; font-size: 24px; line-height: 1.25;}
b, strong, .fw700 {font-weight: 700;}

.clr {clear: both;}
.clearfix:after {content: ""; display: table; clear: both;}
.hidden, #dofullsearch {display: none;}
.nowrap {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ps-link {cursor: pointer;}
.anim {transition: opacity .2s;}
.mr-25 {margin-right: 16px;}
.mb-20 {margin-bottom: 20px;}
.icon-left .fa, .icon-left .icon {margin-right: 8px;}
.icon-right .fa, .icon-right .icon {margin-left: 8px;}

.fx-row {display: flex; flex-wrap: wrap; justify-content: space-between;}
.fx-col {display: flex; flex-direction: column;}
.fx-center {justify-content: center;}
.fx-middle {align-items: center;}
.fx-start {justify-content: flex-start;}
.fx-between {justify-content: space-between;}
.fx-first {order: -1;}
.fx-last {order: 10;}
.fx-1 {flex: 1 1 0; max-width: 100%; min-width: 50px;}

/* IMAGE BOXES (used by DLE modules, keep the class names)
----------------------------------------------- */
.img-box, .img-wide, .img-square, .img-resp, .img-resp-vert, .img-resp-sq, .img-fit {overflow: hidden; position: relative;}
.img-resp {padding-top: 56.25%;}
.img-resp-vert {padding-top: 150%;}
.img-resp-sq {padding-top: 100%;}
.img-box img, .img-square img, .img-resp img, .img-resp-vert img, .img-resp-sq img {width: 100%; min-height: 100%; display: block;}
.img-resp img, .img-resp-vert img, .img-resp-sq img {position: absolute; left: 0; top: 0;}
.img-wide img {width: 100%; display: block;}
.img-fit img {width: 100%; height: 100%; object-fit: cover;}
.img-box, .img-resp, .img-resp-vert, .img-resp-sq {background-color: var(--plum-2);}

/* FORM CONTROLS
----------------------------------------------- */
button, textarea, input[type="text"], input[type="search"], input[type="password"], input[type="email"] {
    appearance: none; -webkit-appearance: none;
    font: inherit;
    font-size: 16px;
}

.button, .btn, .pagi-load a, .up-second li a, .usp-edit a, .qq-upload-button,
button:not(.color-btn):not([class*=fr]),
html input[type="button"], input[type="reset"], input[type="submit"], .meta-fav a, .usp-btn a {
    display: inline-block;
    padding: 0 22px;
    height: 42px;
    line-height: 42px;
    border-radius: var(--r-s);
    text-align: center;
    font-family: var(--body);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--chili);
    cursor: pointer;
    transition: background-color .15s;
}

.button:hover, .btn:hover, .up-second li a:hover, .usp-edit a:hover, .qq-upload-button:hover,
.pagi-load a:hover, .usp-btn a:hover, button:not(.color-btn):hover,
html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .meta-fav a:hover {
    background: #b9142e;
    color: #fff;
}

input[type="text"], input[type="search"], input[type="password"], input[type="email"], select, textarea {
    width: 100%;
    color: var(--blush);
    background: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--r-s);
}

input[type="text"], input[type="search"], input[type="password"], input[type="email"] {height: 42px; padding: 0 14px;}
select {height: 42px; padding: 0 12px; width: auto;}
textarea {padding: 12px 14px; overflow: auto; vertical-align: top; resize: vertical;}

input:focus, textarea:focus, select:focus {border-color: var(--pink); outline: 0;}
input::placeholder, textarea::placeholder {color: var(--mute); opacity: 1; font-size: 15px;}

/* PAGE GRID
----------------------------------------------- */
.wrap {min-width: 320px; position: relative;}
.wrap-center {max-width: 1400px; margin: 0 auto; position: relative;}
.wrap-main {display: flex; flex-direction: column; min-height: 100vh;}
.content {display: flex; flex-direction: column; flex: 1 0 auto;}
.content > * {width: 100%;}

.cols {display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start;}
.col-main {grid-column: 2; grid-row: 1; padding: 28px var(--gutter) 40px; min-width: 0; min-height: 70vh;}
.col-left {grid-column: 1; grid-row: 1; padding: 28px 0 40px var(--gutter);}

#dle-content {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    grid-auto-flow: dense;   /* cards close the gap left beside a full-width ad row */
    gap: 26px 20px;
}
#dle-content > *:not(.thumb) {grid-column: 1 / -1; min-width: 0;}

/* HEADER
----------------------------------------------- */
.header {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: var(--header-h);
    padding: 6px var(--gutter);
    background: var(--ink);
    border-bottom: 1px solid var(--line);
}

.logo {flex: none; display: block; width: 216px; margin-left: -28px;}  /* the PNG has empty space on its left */
.logo img {display: block; width: 100%; height: auto;}

.hmenu {display: flex; align-items: center; gap: 2px;}
.hmenu li {white-space: nowrap;}
.hmenu a {display: block; padding: 8px 11px; border-radius: var(--r-s); font-weight: 500; color: var(--blush);}
.hmenu a:hover {background: var(--plum-2); color: var(--blush);}

.search-wrap {flex: 1 1 200px; min-width: 180px;}
.search-box {position: relative; width: 100%;}
.search-box input[type="text"] {padding-right: 48px; background: var(--plum);}
.search-box button:not(.color-btn):not([class*=fr]) {
    position: absolute; right: 0; top: 0;
    width: 46px; padding: 0;
    color: var(--blush);
    background: transparent;
}
.search-box button:not(.color-btn):hover {background: transparent; color: var(--pink);}

.btn-fav {flex: none; color: var(--mute); cursor: pointer;}
.btn-fav .fa {color: var(--chili-hi);}
.btn-login {flex: none; height: 40px; line-height: 40px; background: var(--plum-2); padding: 0 18px;}
.btn-login:hover {background: var(--line);}
.btn-menu {display: none;}

/* ONLYFANS STRIP
----------------------------------------------- */
.carou {padding: 24px var(--gutter) 26px; background: var(--plum); border-bottom: 1px solid var(--line);}
.carou-caption {font: 600 20px/1.3 var(--display); margin-bottom: 16px; min-height: 36px; display: flex; align-items: center;}
.carou-in {transition: opacity .3s;}
.carou-item {display: block; width: 268px; aspect-ratio: 16 / 9; float: left; border-radius: var(--r-s);}
.carou-desc {position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; padding: 12px; color: #fff; font-size: 14px;}
.carou-title {font-weight: 600;}
.carou-subtitle a {color: #fff;}
.carou-item:hover .carou-desc, .model-in:hover .carou-desc {opacity: 0;}
.mask-img-after:after {
    content: ''; position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; height: 55%;
    background: linear-gradient(to bottom, rgba(22, 12, 19, 0), rgba(22, 12, 19, .78));
    pointer-events: none;
}
@media screen and (min-width: 1220px) {.carou-item {width: 100%;}}

/* SECTIONS
----------------------------------------------- */
.sect + .sect {margin-top: 48px;}
.sect-header {margin-bottom: 18px; gap: 10px;}
.sect-title {font: 600 21px/1.3 var(--display);}

.grid-select {display: flex; gap: 2px; padding: 3px; border-radius: var(--r-s); background: var(--plum);}
.grid-select span {
    min-width: 34px; height: 32px; line-height: 32px; padding: 0 9px;
    text-align: center;
    color: var(--mute);
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}
.grid-select span:hover {color: var(--blush);}
.grid-select span.current {color: #fff; background: var(--chili);}
.ored_sort_btn {font-weight: 600;}

/* VIDEO CARD
   The scanner frame is the one flourish in this design: on hover the
   thumbnail gets viewfinder corners and a single scan line passes over it.
----------------------------------------------- */
.thumb {position: relative; min-width: 0;}
.th-img {display: block; border-radius: var(--r-m);}
.th-desc {padding: 11px 2px 0;}
.th-title {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--blush);
}
.th-studio {
    position: absolute; z-index: 20; left: 17px; top: 17px;
    max-width: calc(100% - 34px);
    padding: 3px 9px;
    border-radius: 4px;
    font-size: 13px; font-weight: 600;
    color: #fff;
    background: rgba(22, 12, 19, .82);
}
.th-studio a {color: #fff;}
.th-star {margin-top: 3px; color: var(--mute); font-size: 14px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;}
.th-star a {color: var(--mute);}
.th-star a:hover {color: var(--pink);}
.th-meta {margin-top: 5px; padding: 0 2px; gap: 12px; font-size: 13px; color: var(--mute);}
.th-meta .fa {color: var(--mute);}
.th-meta-btn {font-weight: 600; color: var(--pink);}
.th-meta-btn:hover {color: var(--blush);}

.th-img::before, .model-in::before {
    content: ''; position: absolute; z-index: 15; inset: 8px; pointer-events: none; opacity: 0;
    --c: var(--blush);
    background:
        linear-gradient(var(--c), var(--c)) 0 0 / 22px 2px,
        linear-gradient(var(--c), var(--c)) 0 0 / 2px 22px,
        linear-gradient(var(--c), var(--c)) 100% 0 / 22px 2px,
        linear-gradient(var(--c), var(--c)) 100% 0 / 2px 22px,
        linear-gradient(var(--c), var(--c)) 0 100% / 22px 2px,
        linear-gradient(var(--c), var(--c)) 0 100% / 2px 22px,
        linear-gradient(var(--c), var(--c)) 100% 100% / 22px 2px,
        linear-gradient(var(--c), var(--c)) 100% 100% / 2px 22px;
    background-repeat: no-repeat;
}
.th-img.mask-img-after::after, .model-in.mask-img-after::after {transition: none;}

.th-img:hover::before, .th-img:focus-visible::before,
.model-in:hover::before, .model-in:focus-visible::before {opacity: 1;}

.th-img:hover::after, .th-img:focus-visible::after,
.model-in:hover::after, .model-in:focus-visible::after {
    top: 0; height: 2px; bottom: auto;
    background: var(--chili-hi);
    box-shadow: 0 0 14px 3px rgba(242, 61, 90, .75);
    animation: scan 1.1s ease-in-out both;
}
@keyframes scan {
    from {top: 0; opacity: 1;}
    90% {top: 100%; opacity: 1;}
    to {top: 100%; opacity: 0;}
}

.th-trailer {
    position: absolute; z-index: 20; right: 10px; top: 10px;
    width: 32px; height: 32px; line-height: 32px; text-align: center; padding-left: 2px;
    border-radius: 50%; font-size: 11px; cursor: pointer; color: #fff; background: var(--chili);
}
.th-trailer:hover {background: var(--chili-hi);}

.th-img video {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.vid-loader {position: absolute; z-index: 5; left: 0; top: 0; right: 0; height: 4px; overflow: hidden; background: var(--plum-2);}
.vid-loader:before {content: ""; position: absolute; left: 0; top: 0; height: 100%; background: var(--chili); animation: load1 2s infinite linear;}

/* Ad slots: one full-width row, content centred */
.th-rkl {grid-column: 1 / -1; text-align: center; overflow: hidden;}
.th-rkl:empty {display: none;}
.th-rkl img {display: block; margin: 0 auto;}
.side-rkl {margin-top: 20px; text-align: center; overflow: hidden;}
.frkl {text-align: center; margin: 15px auto 0; overflow: hidden;}

/* List view */
@media screen and (min-width: 760px) {
    .grid-list #dle-content {grid-template-columns: minmax(0, 1fr); row-gap: 18px;}
    .grid-list .thumb {display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 18px;}
    .grid-list .th-img {grid-column: 1; grid-row: 1 / 3;}
    .grid-list .th-desc {grid-column: 2; grid-row: 1; padding-top: 4px;}
    .grid-list .th-meta {grid-column: 2; grid-row: 2; align-self: end; padding-bottom: 4px;}
    .grid-list .th-title {font-size: 18px;}
    .grid-list .th-star {-webkit-line-clamp: 2;}
    .grid-list .th-studio {max-width: 266px;}
}

/* Trailer popup */
.tr-overlay {position: fixed; z-index: 998; inset: 0; opacity: .75; background: #000;}
.tr-box {position: fixed; z-index: 999; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, calc(100% - 24px)); font-size: 18px; font-weight: 600; color: #fff;}
.tr-header .fa {font-size: 22px; cursor: pointer; margin-left: 15px;}
.tr-video {margin: 12px 0; background: #000;}
.tr-btm {text-align: center;}

/* MODELS
----------------------------------------------- */
.model-in {display: block; border-radius: var(--r-m);}
.grid-models {display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px;}
.model-incat {width: auto; min-width: 0;}
.mp-models .model-item {width: 23%;}

/* SIDEBAR
----------------------------------------------- */
.side-box {margin-bottom: 24px;}
.side-bt {font: 600 15px/1.35 var(--display); padding-bottom: 12px;}
.side-find {margin-bottom: 8px;}
input.side-find[type="search"] {height: 38px; font-size: 14px; background: var(--plum);}
.side-none {display: none; padding: 8px 10px; color: var(--mute); font-size: 14px;}
.side-none.is-shown {display: block;}
.col-left .side-bc {max-height: 500px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent;}
.nav li a {display: block; padding: 5px 10px; border-radius: var(--r-s); color: var(--mute);}
.nav li a:hover {background: var(--plum-2); color: var(--blush);}
.nav li.side-pin a {color: var(--blush); font-weight: 600; background: var(--plum); margin-bottom: 6px;}
.nav li.side-pin a:hover {background: var(--plum-2);}
.side-item {margin-bottom: 15px; display: block;}
.side-img {border-radius: var(--r-s);}
.side-title {margin-top: 7px;}

/* SEO TEXT, BANNER, FOOTER
----------------------------------------------- */
.site-desc {padding: 30px var(--gutter); color: var(--mute); background: var(--plum); line-height: 1.6;}
.site-desc > * {max-width: 74ch;}
.site-desc h1, .site-desc h2, .site-desc h3 {font: 600 18px/1.35 var(--display); margin-bottom: 12px; color: var(--blush);}
.site-desc p + h2, .site-desc p + h3, .site-desc p + p {margin-top: 12px;}
.site-desc a, .uf-fb {color: var(--pink); text-decoration: underline; cursor: pointer;}
.site-desc li {list-style: disc; margin-left: 24px;}
.site-desc img {float: left; max-width: 200px; margin: 0 10px 10px 0;}

.promo-banner {order: 9; padding: 0 var(--gutter) 30px; text-align: center;}
.promo-banner img {display: inline-block; border-radius: var(--r-s);}

.footer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 6px 28px;
    padding: 26px var(--gutter);
    color: var(--mute);
    font-size: 14px;
    border-top: 1px solid var(--line);
}
.ft-logo {width: 180px; display: block; grid-row: 1 / 3;}
.ft-logo img {display: block; width: 100%; height: auto;}
.ft-one a {color: var(--blush); font-weight: 600;}
.ft-one a:hover, .ft-two a:hover {color: var(--pink);}
.ft-two {grid-column: 2;}
.ft-two span {color: var(--blush);}
.ft-counter {grid-column: 3; grid-row: 1 / 3;}

#gotop {
    position: fixed; right: 16px; bottom: 16px; z-index: 50; display: none;
    width: 46px; height: 46px; line-height: 46px; text-align: center;
    border-radius: 50%; cursor: pointer; color: var(--blush);
    background: var(--plum-2); border: 1px solid var(--line);
}
#gotop:hover {border-color: var(--pink);}

/* PAGINATION
----------------------------------------------- */
.bottom-nav {text-align: center; padding-top: 12px;}
.pagi-nav {max-width: 100%; display: inline-block;}
.pagi-nav > span {display: inline-block;}
.pagi-load > span {display: none;}
.pagi-load a {margin-bottom: 15px; padding: 0 80px;}
.navigation {line-height: 40px;}
.navigation_w {line-height: 30px;}
.navigation a, .navigation span, .navigation_w a, .navigation_w span,
.pnext a, .pprev a, .pprev > span, .pnext > span {
    display: inline-block;
    min-width: 40px;
    padding: 0 10px;
    margin: 4px 2px;
    text-align: center;
    border-radius: var(--r-s);
    background: var(--plum);
    color: var(--blush);
}
.navigation_w a, .navigation_w span {min-width: 28px; padding: 0 6px;}
.navigation a:hover, .navigation_w a:hover {background: var(--plum-2); color: var(--blush);}
.navigation span, .navigation_w span {color: #fff; background: var(--chili);}
.navigation span.nav_ext {background: transparent; color: var(--mute);}
.dle-comments-navigation .pagi-nav {margin-bottom: 0;}

/* VIDEO PAGE
----------------------------------------------- */
.speedbar {margin-bottom: 14px; font-size: 14px; color: var(--mute);}
.speedbar a {color: var(--mute);}
.speedbar a:hover {color: var(--pink);}
.speedbar .fa {margin-right: 8px;}

.fheader {display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px;}
.fheader h1 {flex: 1; min-width: 0; font-size: 26px; font-weight: 700;}
.fheader h1 a {font-size: 17px; margin-left: 10px;}
.to-fav {flex: none;}
.k-fav {
    width: 44px; height: 44px; line-height: 44px; text-align: center;
    border-radius: var(--r-s); font-size: 18px; cursor: pointer;
    color: var(--blush); background: var(--plum-2);
}
.k-fav:hover {background: var(--line);}
.k-fav-added {color: #fff; background: var(--chili);}

.fplayer {position: relative; margin-bottom: 14px;}
.fplayer .tabs-sel {display: flex; gap: 4px; padding-right: 180px; overflow-x: auto; white-space: nowrap;}
.fplayer .tabs-sel span {
    padding: 9px 16px; cursor: pointer; font-weight: 600; font-size: 14px;
    border-radius: var(--r-s) var(--r-s) 0 0; color: var(--mute); background: var(--plum);
}
.fplayer .tabs-sel span:hover {color: var(--blush);}
.fplayer .tabs-sel span.current {color: #fff; background: var(--chili);}
.fcompl {position: absolute; right: 0; top: 7px; font-size: 14px;}
.fcompl a {color: var(--mute);}
.fcompl a:hover {color: var(--pink);}

.tabs-b {display: none; background: #000; border-radius: 0 var(--r-m) var(--r-m) var(--r-m); overflow: hidden;}
.tabs-b.visible {display: block;}
.fluid_video_wrapper, .k2s-preview {width: 100% !important;}
.video-box embed, .video-box object, .video-box video, .video-box iframe, .video-box frame {
    max-width: 100% !important; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
}
.mejs-container {max-width: 100% !important;}

.custom-preview {
    position: relative; width: 100%; padding-top: 56.25%;
    background: var(--plum) center center / cover no-repeat;
    cursor: pointer; overflow: hidden;
}
.custom-preview .overlay {position: absolute; inset: 0; background: rgba(22, 12, 19, .18);}
.custom-preview .overlay::before {
    content: ''; position: absolute; inset: 22px; --c: var(--blush);
    background:
        linear-gradient(var(--c), var(--c)) 0 0 / 40px 3px,
        linear-gradient(var(--c), var(--c)) 0 0 / 3px 40px,
        linear-gradient(var(--c), var(--c)) 100% 0 / 40px 3px,
        linear-gradient(var(--c), var(--c)) 100% 0 / 3px 40px,
        linear-gradient(var(--c), var(--c)) 0 100% / 40px 3px,
        linear-gradient(var(--c), var(--c)) 0 100% / 3px 40px,
        linear-gradient(var(--c), var(--c)) 100% 100% / 40px 3px,
        linear-gradient(var(--c), var(--c)) 100% 100% / 3px 40px;
    background-repeat: no-repeat;
}
.custom-preview .play-btn {
    position: absolute; z-index: 2; top: 50%; left: 50%;
    width: 84px; height: 84px; margin: -42px 0 0 -42px;
    border-radius: 50%; background: var(--chili); transition: background-color .15s;
}
.custom-preview .play-btn::before {
    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-38%, -50%);
    border-left: 26px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent;
}
.custom-preview:hover .play-btn {background: var(--chili-hi);}
#player-container, #player-container-2 {display: none;}

/* Premium plans */
.fbtns {display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-bottom: 14px;}
.fbtn {
    position: relative; display: block; min-height: 60px; padding: 10px 14px;
    border-radius: var(--r-s); border: 1px solid var(--line); cursor: pointer;
}
.fbtn div {font-weight: 600; font-size: 15px; color: var(--blush);}
.fbtn span {font-size: 13px; color: var(--mute);}
.fbtn:hover, .fbtn.is-active {border-color: var(--pink);}
.fbtn-vip {
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 700; color: var(--stem-ink);
    background: var(--stem); border-color: var(--stem);
}
.fbtn-vip:hover {background: #a0dc58; border-color: #a0dc58;}

.fmain {background: var(--plum); border-radius: var(--r-m); margin-bottom: 30px;}
.fctrl {padding: 0 18px; border-bottom: 1px solid var(--line); gap: 8px 20px;}
.ftabs {gap: 4px 22px;}
.ftab {height: 54px; line-height: 54px; cursor: pointer; color: var(--mute); font-weight: 500;}
.ftab .fa {margin-right: 7px;}
.ftab:hover {color: var(--blush);}
.ftab.is-active {color: var(--blush); box-shadow: inset 0 -3px var(--chili-hi);}
.fmain-desc {padding: 18px; display: none;}
.fmain-desc br {display: none;}
.fmain-desc.visible {display: block;}

.vpm-rate {display: flex; align-items: center; gap: 4px; white-space: nowrap;}
.rate-data {display: none;}
.rate-counts {width: 120px; height: 40px; position: relative; font-size: 13px; color: var(--mute);}
.rate-plus, .rate-minus {
    width: 40px; height: 40px; line-height: 40px; text-align: center;
    border-radius: var(--r-s); font-size: 16px; cursor: pointer; color: var(--blush); background: var(--plum-2);
}
.rate-plus:hover {color: var(--stem-ink); background: var(--stem);}
.rate-minus:hover {color: #fff; background: var(--chili);}
.rate-bar {position: absolute; left: 0; right: 0; bottom: 5px; height: 5px; border-radius: 3px; overflow: hidden; background: var(--chili);}
.rate-fill {width: 50%; height: 100%; position: absolute; left: 0; top: 0; background: var(--stem); transition: width 1s linear;}
.rate-perc {margin-right: 5px; font-size: 17px; font-weight: 700; color: var(--stem);}

.ftags {line-height: 1.8;}
.ftags-capt {font-weight: 600; color: var(--mute); font-family: var(--body);}
.ftags-capt::before {font-family: 'FontAwesome'; margin-right: 6px;}
.ftags a {color: var(--pink);}
.fdesc + .ftags {padding-top: 12px;}
.frels {margin-top: 20px;}
.frels .sect-content {display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 26px 20px;}
.thumb-rel .th-desc {padding-bottom: 4px;}

/* Download links */
.flinks-group {margin-top: 22px;}
.flink {margin-bottom: 6px;}
.flink img {width: 16px; height: 16px; margin: 0 5px 0 10px;}
.flink-name:after {content: ''; flex: 1 1 auto; margin: 0 15px; height: 1px; border-top: 1px dashed var(--line);}
.flink-btn {
    position: relative; display: block; overflow: hidden;
    height: 34px; line-height: 34px; padding: 0 15px 0 46px;
    font-weight: 600; border-radius: var(--r-s);
    color: var(--stem-ink); background: var(--stem);
}
.flink-btn a {color: var(--stem-ink);}
.flink-btn:hover, .flink-btn a:hover {color: var(--stem-ink);}
.flink-btn:hover {background: #a0dc58;}
.flink-btn .fa {position: absolute; left: 0; top: 0; width: 34px; height: 34px; line-height: 34px; text-align: center; background: rgba(0, 0, 0, .14);}
.flink-part {width: 135px; padding: 5px 10px; border-radius: var(--r-s); color: var(--blush); background: var(--plum-2);}
.flink-part > .name {float: left; padding-right: 5px;}
.flink-part > .size {float: right;}
.flinks-sel a, .flinks-sel span {
    display: inline-block; position: relative;
    height: 40px; line-height: 40px; padding: 0 15px; margin: 0 4px 4px 0;
    border-radius: var(--r-s); font-weight: 600; font-size: 15px;
    color: var(--mute); background: var(--plum-2);
}
.flinks-sel a:hover {color: var(--blush);}
.flinks-sel a.selected {color: #fff; background: var(--chili);}
.flinks-blc {display: none;}

/* TEXT PAGES
----------------------------------------------- */
.mtitle, .sub-title h1, .form-wrap h1, .searchpage h1 {margin-bottom: 15px; font: 600 22px/1.3 var(--display);}
.full-text {line-height: 1.6; font-size: 16px;}
.full-text img:not(.emoji) {max-width: 100%; height: auto; margin: 10px 0;}
.full-text > img[style*="left"], .full-text > .highslide img[style*="left"] {margin: 0 10px 10px 0;}
.full-text > img[style*="right"], .full-text > .highslide img[style*="right"] {margin: 0 0 10px 10px;}
.full-text a {text-decoration: underline; color: var(--pink);}
.full-text a:hover {text-decoration: none;}
.full-text h2, .full-text h3, .full-text h4, .full-text h5 {margin: 14px 0 8px; font-size: 19px; font-weight: 600;}
.full-text p {margin-bottom: 10px;}
.full-text ul, .full-text ol {margin: 0 0 10px;}
.full-text ul li {list-style: disc; margin-left: 24px;}
.full-text ol li {list-style: decimal; margin-left: 24px;}
.full-taglist {margin-top: 20px;}
.full-taglist a {color: var(--pink);}
.full-taglist span:not(.fa):not(:last-child):after {content: ","; display: inline;}
.sect-about-text, .form-wrap, .searchpage .box_in {max-width: 860px;}

/* COMMENTS
----------------------------------------------- */
.add-comms {margin-bottom: 26px;}
.ac-inputs {gap: 10px; margin-bottom: 10px;}
.ac-inputs input {flex: 1 1 200px; width: auto;}
.ac-textarea textarea {height: 110px; margin-bottom: 12px;}
.ac-protect, .ac-textarea .bb-editor + br {display: none;}
.comments_subscribe {display: block;}
.comments_subscribe input {margin-right: 10px;}
.mass_comments_action {padding: 10px; margin: 20px 0 0; text-align: right; background: var(--plum-2); border-radius: var(--r-s);}
.last-comm-link a {display: block; margin-bottom: 12px; font-weight: 600; color: var(--pink);}

.comm-item {margin-bottom: 18px; font-size: 14px; flex-wrap: nowrap; gap: 12px;}
.comm-left {flex: none; width: 44px;}
.comm-img {height: 44px; border-radius: 50%;}
.comm-right {min-width: 0;}
.comm-one > span {margin-right: 12px; color: var(--mute);}
.comm-one > span.comm-author, .comm-one > span.comm-author a {font-weight: 600; color: var(--blush);}
.comm-two {margin: 4px 0 8px;}
.comm-three-left > a, .comm-three-right li a {color: var(--mute);}
.comm-three-right li {display: inline-block; margin-left: 12px;}
.comm-three a:hover {color: var(--pink);}
.comm-rate3 {display: inline-block; margin-right: 12px; white-space: nowrap; color: var(--mute);}
.comm-rate3 a {color: var(--mute);}
.comm-rate3 > span {margin: 0 5px;}
.comm-rate3 > span > span.ratingtypeplus {color: var(--mute);}
.comm-rate3 > span > span.ratingplus {color: var(--stem);}
.comm-rate3 > span > span.ratingminus {color: var(--chili-hi);}

/* LOGIN DIALOG
----------------------------------------------- */
.login-overlay, .mmenu-overlay {position: fixed; z-index: 998; inset: 0; opacity: .7; display: none; background: #000;}
.login-box {
    position: fixed; z-index: 999; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: none;
    width: min(380px, calc(100% - 32px));
    padding: 30px;
    background: var(--plum);
    border: 1px solid var(--line);
    border-radius: var(--r-m);
}
.login-close {position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; line-height: 34px; text-align: center; font-size: 20px; cursor: pointer; color: var(--mute);}
.login-close:hover {color: var(--blush);}
.login-title {margin-bottom: 14px; text-align: center; font: 600 18px/1.3 var(--display);}
.login-avatar {width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;}
.login-input {margin-bottom: 10px;}
.login-btn button:not(.color-btn):not([class*=fr]) {width: 100%; margin: 6px 0 12px;}
.login-btm a {font-size: 14px; color: var(--pink);}
.login-menu {border-top: 1px solid var(--line); border-left: 1px solid var(--line);}
.login-menu li {width: 50%; text-align: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);}
.login-menu a {display: block; padding: 10px 5px; font-size: 14px;}
.login-menu li .fa {display: none;}
.login-admin {margin: -6px 0 16px; text-align: center;}
.login-soc-title {display: flex; align-items: center; margin: 20px 0 12px; color: var(--mute); font-size: 14px;}
.login-soc-title:before, .login-soc-title:after {content: ''; flex: 1; height: 1px; background: var(--line);}
.login-soc-title:before {margin-right: 12px;}
.login-soc-title:after {margin-left: 12px;}
.login-soc-btns {text-align: center;}
.login-soc-btns a {display: inline-block; margin: 0 3px; vertical-align: top;}
.login-soc-btns img {display: block; width: 32px; height: 32px; border-radius: 50%;}

/* Owl Carousel v2.1.0 */
.owl-carousel {
    opacity: 0;
    overflow: hidden;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 1;
}

.owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
}

.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0px, 0px, 0px);
}

.owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    /* -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; */
}

.owl-carousel .owl-item > img {
    display: block;
    width: 100%; /* -webkit-transform-style: preserve-3d; */
}

.owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled {
    display: none;
}

.owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot {
    cursor: pointer;
    cursor: hand;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.owl-carousel.owl-loaded {
    display: block;
    opacity: 1;
    overflow: visible;
}

.owl-carousel.owl-loading {
    opacity: 0;
    display: block;
}

.owl-carousel.owl-hidden {
    opacity: 0;
}

.owl-carousel.owl-refresh .owl-item {
    display: none;
}

.owl-carousel.owl-drag .owl-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.owl-carousel.owl-grab {
    cursor: move;
    cursor: grab;
}

.owl-carousel.owl-rtl {
    direction: rtl;
}

.owl-carousel.owl-rtl .owl-item {
    float: right;
}

.no-js .owl-carousel {
    display: block;
}

.owl-carousel .animated {
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.owl-carousel .owl-animated-in {
    z-index: 0;
}

.owl-carousel .owl-animated-out {
    z-index: 1;
}

.owl-carousel .fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.owl-height {
    transition: height 500ms ease-in-out;
}

.owl-carousel .owl-item .owl-lazy {
    opacity: 0;
    transition: opacity 400ms ease;
}

.owl-carousel .owl-item img.owl-lazy {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.owl-carousel .owl-video-wrapper {
    position: relative;
    height: 100%;
    background: #000;
}

.owl-carousel .owl-video-play-icon {
    position: absolute;
    height: 80px;
    width: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    cursor: pointer;
    z-index: 1;
    background-color: #FFF;
    -webkit-backface-visibility: hidden;
    transition: -webkit-transform 100ms ease;
    transition: transform 100ms ease;
}

.owl-carousel .owl-video-play-icon:hover {
    -webkit-transform: scale(1.3, 1.3);
    -ms-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3);
}

.owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon {
    display: none;
}

.owl-carousel .owl-video-tn {
    opacity: 0;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: opacity 400ms ease;
}

.owl-carousel .owl-video-frame {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
}

.owl-nav {position: absolute; left: 0; right: 0; top: 0;}
.owl-prev, .owl-next {
    position: absolute; top: -50px; z-index: 30;
    width: 36px; height: 36px; line-height: 36px; text-align: center;
    border-radius: 50%; font-size: 20px; color: var(--blush); background: var(--plum-2);
}
.owl-prev {right: 42px;}
.owl-next {right: 0;}
.owl-prev:hover, .owl-next:hover {color: #fff; background: var(--chili);}
.owl-prev.disabled, .owl-next.disabled {opacity: .4;}
.sect-models .owl-prev, .sect-models .owl-next {top: -54px;}

/* MOBILE PANEL
----------------------------------------------- */
.side-panel {
    position: fixed; z-index: 889; left: -320px; top: 0;
    display: flex; flex-direction: column; gap: 12px;
    width: 280px; height: 100%; padding: 16px;
    overflow: hidden auto;
    background: var(--plum);
    transition: left .25s;
}
.side-panel.active {left: 0;}
.side-panel .hnav {order: 1;}
.side-panel .btn-login {order: 2; width: 100%;}
.side-panel .side-box {order: 3; margin: 0;}
.side-panel .search-wrap {display: none;}
.side-panel .hmenu {flex-direction: column; align-items: stretch;}
.close-overlay {position: fixed; left: 0; top: 0; z-index: 888; display: none; width: 100%; height: 100%; background: rgba(0, 0, 0, .6);}
.btn-close {
    position: fixed; z-index: 889; left: 280px; top: -44px;
    width: 44px; height: 44px; line-height: 44px; text-align: center; font-size: 18px; cursor: pointer;
    color: #fff; background: var(--chili); transition: top .25s;
}
.btn-close.active {top: 0;}
body.opened-menu {overflow: hidden; width: 100%; height: 100%;}

/* DLE COMPONENTS (engine.css is built for light backgrounds)
----------------------------------------------- */
.berrors {margin: 0 0 24px; padding: 14px 18px; color: var(--blush); background: var(--plum); border-left: 3px solid var(--chili); border-radius: var(--r-s);}
.vote-title, .findrelated, #dlefastreplycomments, .commentsreplyname {color: var(--blush); background: var(--plum); border-color: var(--line);}
.form-textarea > label {background: var(--plum-2);}
.tableform td, .tableform th {border-top-color: var(--line);}
#searchtable fieldset {border-color: var(--line);}
#searchtable select {background: var(--ink);}
.sres-wrap, .sres-wrap:nth-child(2n) {background: var(--plum); border-color: var(--line);}
.us-prof {background: var(--plum);}
.usp-left, .usp-name, .usp-activ, .usp-meta li:nth-child(2n+1) {background: var(--plum-2);}
.pm-menu a {background: var(--plum-2);}
.pm-menu a:hover, .pm tr:nth-child(1) {background: var(--chili);}
.pm tr:nth-child(2n+2), .userstop tr:nth-child(2n+2) {background: var(--plum);}
.quote, .title_quote {color: var(--mute); background: var(--plum);}
.hide {background: var(--plum); color: var(--mute);}
.bb-editor textarea {background: var(--ink);}
.bb-btn {background: var(--plum-2); border-color: var(--line);}
.bb-btn:hover {background: var(--line);}
.cloud-tags span a:hover {background: var(--chili);}
#searchsuggestions span.seperator a {background: var(--plum-2);}
#loading-layer {background-color: var(--plum-2);}
.ui-dialog {color: var(--blush); background: var(--plum) !important; border: 1px solid var(--line) !important;}
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {font-family: var(--body);}

/* K2S embed */
.k2s-preview a.play-btn {
	width: 68px;
	height: 48px;
	margin: -24px 0 0 -34px;
	border: none;
	background: rgba(33, 33, 33, 0.8);
	clip-path: path("M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z");
	opacity: 1;
	pointer-events: none;
	transition: 0.1s ease-in;
}

.k2s-preview a.play-btn i {
	margin: 14px 0 0 26px;
}

.k2s-preview .poster:hover + .play-btn {
	background: #f03;
}

.k2s-preview a.download-btn {
	top: 0;
	right: 0;
	border: solid transparent;
	border-width: 10px 20px 0 9px;
}

/* ADAPTIVE
----------------------------------------------- */
@media screen and (max-width: 1320px) {
    .hmenu a {padding: 8px;}
    .logo {width: 180px; margin-left: -22px;}
    .header {gap: 12px;}
}

@media screen and (max-width: 1120px) {
    :root {--gutter: 20px;}
    .btn-menu {
        display: block; flex: none; margin-left: auto;
        width: 42px; height: 42px; line-height: 42px; text-align: center;
        border-radius: var(--r-s); cursor: pointer; font-size: 18px;
        color: var(--blush); background: var(--plum-2);
    }
    .header > .hnav {display: none;}
    .header {flex-wrap: wrap;}
}

@media screen and (max-width: 950px) {
    :root {--gutter: 14px; --header-h: 0px;}
    .header {position: relative;}
    .cols {display: block;}
    .col-left {display: none;}
    .col-main {padding-top: 20px;}
    .header > .btn-login, .header > .btn-fav {display: none;}
    .header > .search-wrap {order: 5; flex: 1 0 100%;}
    .footer {grid-template-columns: 1fr; justify-items: center; text-align: center;}
    .ft-logo, .ft-two, .ft-counter {grid-column: 1; grid-row: auto;}
    .fplayer .tabs-sel {padding-right: 0;}
    .fcompl {position: static; padding-top: 8px; text-align: right;}
}

@media screen and (max-width: 760px) {
    .grid-select:not(#grid-select-order) {display: none;}
    .sect-title {font-size: 18px;}
    .fheader h1 {font-size: 21px;}
    .tr-box {height: auto;}
    .comments-tree-list .comments-tree-list {padding-left: 0 !important;}
    .comments-tree-list .comments-tree-list:before, .mass_comments_action {display: none;}
    .dcont button {font-size: 12px; padding: 0 15px !important;}
    .not-logged .login-avatar {display: none;}
    .form-item {padding-left: 0;}
    .form-item > label {float: none; width: auto; margin-left: 0; padding: 0 0 6px;}
}

@media screen and (max-width: 600px) {
    :root {--cols: 1;}
    .grid-models {grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));}
    .ftabs {flex-wrap: nowrap; overflow-x: auto; white-space: nowrap;}
    .fctrl {padding: 0 12px 12px;}
    .fmain-desc {padding: 14px 12px;}
    .vpm-rate {width: 100%; justify-content: center;}
    .flink-btn {width: 100%; text-align: center;}
    .flink-name:after {display: none;}
    .custom-preview .overlay::before {inset: 12px;}
    .ui-dialog {width: 100% !important;}
    .upop-left, .upop-right {float: none !important; width: 100% !important; margin: 0; padding: 0 20px;}
    .upop-left {margin-bottom: 10px; text-align: center;}
    .ui-dialog-buttonset button {display: block; margin: 0 0 5px; width: 100%;}
    #dofullsearch, #searchsuggestions span.seperator {display: none !important;}
    .attach .download-link {margin: 0 -15px 0 0; float: none; display: block; padding: 0 10px;}
    .attach-info {float: none;}
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {animation: none !important; transition: none !important; scroll-behavior: auto !important;}
    .th-img:hover::after, .model-in:hover::after, .th-img:focus-visible::after, .model-in:focus-visible::after {display: none;}
}
