/* Category navigation: keep the title and its counter in one row. */
.sidebar_menu li {
    height: auto;
    min-height: 30px;
}

.sidebar_menu li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-height: 30px;
    height: auto;
    box-sizing: border-box;
    line-height: 1.25;
}

.sidebar_menu.side_block {
    overflow: hidden;
}

.sidebar_menu.side_block ul {
    width: 100%;
}

.sidebar_menu.side_block li > a {
    padding-right: 12px;
    padding-left: 12px;
}

.sidebar_menu .category-count {
    flex: 0 0 auto;
    margin-left: auto;
    color: #929292;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sidebar_menu li > a:hover .category-count {
    color: #fff;
}

/* One visible, responsive H1 on list, tag, and category pages. */
.page-heading {
    position: relative;
    margin: 0 20px 22px;
    padding: 0 0 10px;
    border-bottom: 1px solid #ececec;
}

.page-heading::before {
    display: none;
}

.page-heading h1 {
    margin: 0;
    color: #272727;
    font-family: "RobotoMedium", Arial, sans-serif;
    font-size: clamp(20px, 1.75vw, 26px);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
}

/* Breadcrumbs stay close to the page title without layout hacks. */
.breadcrumbs {
    margin: 0 20px 6px;
    padding: 6px 10px;
    border: 1px solid #ececec;
    border-radius: 7px;
    background: #fafafa;
    color: #686868;
    font-size: 13px;
    line-height: 1.45;
}

.breadcrumbs #dle-speedbar {
    display: block;
}

.breadcrumbs a {
    color: #c81740;
    font-size: inherit;
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: #9f1032;
    text-decoration: underline;
}

.partner-links {
    padding: 4px 20px 8px;
    color: #606060;
    font-size: 14px;
    line-height: 20px;
}

.partner-links__title {
    margin-bottom: 4px;
    color: #888;
    font-family: "RobotoMedium", Arial, sans-serif;
    font-size: 12px;
    letter-spacing: .04em;
    line-height: 16px;
    text-transform: uppercase;
}

.partner-links a {
    display: inline-block;
    color: #555;
    font-size: inherit;
    line-height: inherit;
}

.partner-links a:hover {
    color: #c81740;
}

.footer .about .footer-promo-link {
    color: #202020;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.footer .about .footer-promo-link:hover {
    color: #c81740;
}

@media screen and (min-width: 769px) {
    .breadcrumbs #dle-speedbar {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media screen and (min-width: 1011px) {
    .content > .right {
        padding-top: 10px;
    }

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

/* Keyword cloud: a compact, legible card rather than plain text above links. */
.side-box {
    margin: 0 10px 20px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    background: #fff;
}

.side-box .side-bt {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 11px 12px;
    border-bottom: 1px solid #ededed;
    background: #fafafa;
    color: #303030;
    font-family: "RobotoMedium", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.2;
}

.side-box .side-bt .fa {
    color: #e41d4b;
    font-size: 14px;
}

.side-box .cloud-tags.v2-tax-links {
    margin: 0;
    background: #fff;
}

/* Video facts stay with the description instead of interrupting the player. */
.pg-full .pg-topmeta {
    max-width: 640px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 8px;
    padding: 10px 12px;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: #fafafa;
    color: #6f6f6f;
    font-size: 13px;
    line-height: 1.25;
}

.pg-full .pg-topmeta span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 5px;
    background: #fff;
    color: #666;
    box-shadow: inset 0 0 0 1px #eeeeee;
    white-space: nowrap;
}

.pg-full .pg-topmeta span::before {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    flex: 0 0 14px;
    border-radius: 0;
    background: center / 14px 14px no-repeat;
    content: "";
}

.pg-full .pg-topmeta span:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c81740' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
}

.pg-full .pg-topmeta span:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c81740' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M7 3v4M17 3v4M3 10h18'/%3E%3C/svg%3E");
}

.pg-full .pg-topmeta span:nth-child(3)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c81740' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.pg-full .pg-rate {
    display: flex;
    width: fit-content;
    gap: 10px;
    margin: 0 auto 12px 0;
}

.pg-full .pg-rate__label {
    color: #303030;
    font-family: "RobotoMedium", Arial, sans-serif;
    font-size: 13px;
    line-height: 15px;
    white-space: nowrap;
}

.pg-full .pg-rate .short_rating {
    float: none;
    width: 75px;
    height: 15px;
}

.pg-full .pg-rate .ratebox,
.pg-full .pg-rate .rate {
    height: 15px;
    line-height: 15px;
}

/* DLE rating core: showfull intentionally does not load engine.min.css. */
.pg-full .pg-rate .rating {
    float: none;
    width: 75px;
    height: 15px;
    color: #909090;
    font: 11px Tahoma, Helvetica, sans-serif;
    line-height: 15px;
    text-align: left;
}

.pg-full .pg-rate .unit-rating {
    position: relative;
    width: 75px;
    height: 15px;
    margin: 0 !important;
    padding: 0;
    list-style: none;
    background: url('../dleimages/rating.png') 0 0 no-repeat;
}

.pg-full .pg-rate .unit-rating li {
    float: left;
    margin: 0;
    padding: 0;
    text-indent: -90000px;
}

.pg-full .pg-rate .unit-rating li a {
    position: absolute;
    z-index: 17;
    top: 0;
    display: block;
    width: 15px;
    height: 15px;
    padding: 0;
    text-decoration: none;
    text-indent: -9000px;
}

.pg-full .pg-rate .unit-rating li a:hover {
    z-index: 2;
    left: 0;
    background: url('../dleimages/rating.png') 0 -15px no-repeat;
}

.pg-full .pg-rate .unit-rating a.r1-unit { left: 0; }
.pg-full .pg-rate .unit-rating a.r1-unit:hover { width: 15px; }
.pg-full .pg-rate .unit-rating a.r2-unit { left: 15px; }
.pg-full .pg-rate .unit-rating a.r2-unit:hover { width: 30px; }
.pg-full .pg-rate .unit-rating a.r3-unit { left: 30px; }
.pg-full .pg-rate .unit-rating a.r3-unit:hover { width: 45px; }
.pg-full .pg-rate .unit-rating a.r4-unit { left: 45px; }
.pg-full .pg-rate .unit-rating a.r4-unit:hover { width: 60px; }
.pg-full .pg-rate .unit-rating a.r5-unit { left: 60px; }
.pg-full .pg-rate .unit-rating a.r5-unit:hover { width: 75px; }

.pg-full .pg-rate .unit-rating li.current-rating {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: block;
    height: 15px;
    background: url('../dleimages/rating.png') 0 -30px no-repeat;
    text-indent: -9000px;
}

.pg-full .pg-tags-buttons a {
    color: #c81740;
}

.pg-full .pg-tags-buttons a:hover {
    color: #fff;
    border-color: #e41d4b;
    background: #e41d4b;
}

.pg-full .pg-tags-buttons {
    margin: 0 0 16px !important;
    padding: 10px 12px !important;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: #fafafa;
}

.pg-full .pg-tags-buttons:before {
    color: #202020 !important;
}

/* Highslide is used for screenshot previews; engine.min.css is not loaded on full articles. */
.highslide-wrapper,.highslide-outline{background:#fff}.highslide-image{border:2px solid #fff}.highslide-active-anchor,.highslide-active-anchor img{visibility:hidden}.highslide-dimming{background:#000}.highslide-html{background-color:#fff}.highslide-html-content{display:none}.highslide-loading{display:block;color:#fff;font-size:9px;font-weight:700;text-decoration:none;padding:3px;border:1px solid #fff;background:#000}a.highslide-full-expand{background:url(../dleimages/fullexpand.gif) no-repeat;display:block;margin:0 10px 10px 0;width:34px;height:34px}.highslide-footer{height:11px}.highslide-footer .highslide-resize{float:right;height:12px;width:11px;background:url(../dleimages/resize.gif)}.highslide-resize{cursor:nw-resize}.highslide-display-block{display:block}.highslide-display-none{display:none}.highslide-caption{display:none;padding:5px;background:#fff}.highslide-controls{width:195px;height:40px;background:url(../../../engine/classes/highslide/graphics/controlbar-black-border.gif) 0 -90px no-repeat;margin:10px 15px 10px 0}.highslide-controls ul{position:relative;left:15px;height:40px;list-style:none;margin:0;padding:0;background:url(../../../engine/classes/highslide/graphics/controlbar-black-border.gif) right -90px no-repeat}.highslide-controls li{float:left;padding:5px 0}.highslide-controls a{background:url(../../../engine/classes/highslide/graphics/controlbar-black-border.gif);display:block;float:left;height:30px;width:30px;outline:0}.highslide-controls a.disabled{cursor:default}.highslide-controls a span{display:none}.highslide-controls .highslide-previous a{background-position:0 0}.highslide-controls .highslide-previous a:hover{background-position:0 -30px}.highslide-controls .highslide-previous a.disabled{background-position:0 -60px!important}.highslide-controls .highslide-play a{background-position:-30px 0}.highslide-controls .highslide-play a:hover{background-position:-30px -30px}.highslide-controls .highslide-play a.disabled{background-position:-30px -60px!important}.highslide-controls .highslide-pause a{background-position:-60px 0}.highslide-controls .highslide-pause a:hover{background-position:-60px -30px}.highslide-controls .highslide-pause a.disabled{background-position:-60px -60px!important}.highslide-controls .highslide-next a{background-position:-90px 0}.highslide-controls .highslide-next a:hover{background-position:-90px -30px}.highslide-controls .highslide-next a.disabled{background-position:-90px -60px!important}.highslide-controls .highslide-move a{background-position:-120px 0}.highslide-controls .highslide-move a:hover{background-position:-120px -30px}.highslide-controls .highslide-full-expand a{background-position:-150px 0}.highslide-controls .highslide-full-expand a:hover{background-position:-150px -30px}.highslide-controls .highslide-full-expand a.disabled{background-position:-150px -60px!important}.highslide-controls .highslide-close a{background-position:-180px 0}.highslide-controls .highslide-close a:hover{background-position:-180px -30px}

/* Keep parser-provided related-video titles compact without changing the layout. */
.related-grid .rel-card__title {
    display: -webkit-box;
    max-height: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

@media screen and (min-width: 481px) and (max-width: 1024px) {
    .pg-full .pg-head,
    .pg-full .pg-title {
        text-align: left;
    }
}

/* Keep the existing float layout, but start each visual row from the left. */
@media screen and (min-width: 1025px) {
    .related-grid .rel-card:nth-child(3n + 1) {
        clear: left;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .related-grid .rel-card:nth-child(2n + 1) {
        clear: left;
    }
}

/* Desktop header: the same red visual language as the compact navigation. */
@media screen and (min-width: 1011px) {
    .header {
        display: flex;
        align-items: center;
        height: 60px;
        border-bottom-color: #c81740;
        background: #e41d4b;
        box-shadow: 0 2px 8px rgba(128, 12, 43, 0.16);
    }

    .header .logo {
        flex: 0 0 200px;
        float: none;
        background: transparent !important;
        border-right: 1px solid rgba(255, 255, 255, 0.24);
    }

    .header .logo > a {
        display: block;
        width: 200px;
        height: 60px;
    }

    .header .searchblock {
        order: 2;
        flex: 0 1 680px;
        float: none;
        width: clamp(360px, 56vw, 680px);
        height: 60px;
        margin-right: auto;
        padding: 10px 14px;
    }

    .header .searchform {
        height: 40px;
        padding: 5px 42px 5px 13px;
        border: 0;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(92, 5, 29, 0.18);
    }

    .header .searchform:focus {
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
    }

    .header input.searchbt {
        top: 1px;
        right: 3px;
        width: 38px;
        height: 38px;
        background-position: -41px -2px;
    }

    .header .login_box {
        order: 3;
        display: flex;
        align-self: stretch;
    }

    .header .login_box > .favorites_link,
    .header .login_box > .login-btn {
        float: none;
        display: block;
        width: 58px;
        height: 60px;
        border-left-color: rgba(255, 255, 255, 0.24);
        background-image: none;
        color: rgba(255, 255, 255, 0.9);
        text-align: center;
        transition: background-color 0.2s ease;
    }

    .header .login_box > .favorites_link {
        order: 1;
        position: relative;
        padding: 37px 0 4px;
        font-size: 12px;
        line-height: 15px;
    }

    .header .login_box > .favorites_link::before {
        position: absolute;
        top: 8px;
        left: 0;
        width: 100%;
        color: #fff;
        content: "♡";
        font-family: Arial, sans-serif;
        font-size: 31px;
        font-weight: 400;
        line-height: 29px;
    }

    .header .login_box > .login-btn {
        order: 2;
        position: relative;
        cursor: pointer !important;
    }

    .header .login_box > .login-btn::before {
        position: absolute;
        top: 12px;
        left: 0;
        width: 100%;
        color: #fff;
        content: "⇥";
        font-family: Arial, sans-serif;
        font-size: 31px;
        line-height: 32px;
        text-align: center;
    }

    .header .login_box > .favorites_link:hover,
    .header .login_box > .login-btn:hover {
        background-color: rgba(125, 11, 42, 0.22);
    }
}

@media screen and (max-width: 1010px) {
    .header {
        border-bottom: 0;
    }

    .content > .right {
        padding-top: 0;
    }
}



/* Full numbered pagination. DLE already renders page links and ellipses. */
.navigation-holder {
    clear: both;
    height: auto;
    margin: 0 10px 20px;
    padding: 12px 0 6px;
    overflow-x: auto;
    overflow-y: hidden;
    text-align: center;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.navigation {
    display: inline-flex;
    clear: none;
    align-items: stretch;
    width: max-content;
    max-width: none;
    white-space: nowrap;
    font-size: 0;
    text-align: center;
}

.navigation > a,
.navigation > span,
.navigation > b {
    display: inline-flex !important;
    float: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid #e7e7e7;
    border-left: 0;
    color: #e41d4b;
    background: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 38px;
    vertical-align: middle;
}

.navigation > b {
    padding: 0;
    color: #999;
}

.navigation > b > a,
.navigation > b > span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    border: 0 !important;
    color: #e41d4b;
    background: transparent;
    font-size: 14px;
    line-height: 38px !important;
}

.navigation > .prev {
    border-left: 1px solid #e7e7e7 !important;
}

.navigation > span:not(.nav_ext) {
    color: #fff;
    border-color: #e41d4b;
    background: #e41d4b;
}

.navigation > .nav_ext {
    display: inline-flex !important;
    color: #777 !important;
    border-color: #e7e7e7 !important;
    background: #fff !important;
}

.navigation > a:hover,
.navigation > b > a:hover {
    color: #fff;
    border-color: #e41d4b;
    background: #e41d4b;
}

@media screen and (max-width: 480px) {
    .navigation-holder {
        margin-right: 0;
        margin-left: 0;
        text-align: left;
    }

    .navigation > a,
    .navigation > span {
        min-width: 38px;
        padding-right: 8px;
        padding-left: 8px;
    }
}

@media screen and (max-width: 810px) {
    .short_post {
        margin-bottom: 0;
    }

    .short_post .video_time {
        position: absolute;
        left: 6px;
        bottom: 6px;
    }

    .page-heading {
        margin: 0 10px 18px;
        padding-bottom: 10px;
    }

    .page-heading h1 {
        font-size: clamp(20px, 5.5vw, 24px);
    }

    .breadcrumbs {
        margin: 0 10px 6px;
        padding: 8px 10px;
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    .partner-links {
        padding: 4px 10px 8px;
    }

    .side-box {
        margin-right: 10px;
        margin-left: 10px;
    }

    .pg-full .pg-topmeta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 8px;
        padding: 8px;
    }

    .pg-full .pg-topmeta span {
        min-height: 25px;
        padding: 0 8px;
        font-size: 12px;
    }

    .pg-full .pg-tags-buttons {
        padding: 8px 10px !important;
    }
}