/* Ascorbic Addon Front-end Styles */


/*
 * =========================================================
 * GUEST SFW / 18+ TOGGLE
 * =========================================================
 */

.section_adult,
.site-header .c-sub-header-nav .c-sub-nav_wrap .section_adult {
    border: none;
    padding: 16px 0 0 0;
    margin: 0;
    box-sizing: border-box;
    display: inline-block;
    max-width: 100%;
    overflow: visible;
    vertical-align: middle;
}

.checkbox-wrapper .switch {
    display: none;
}


.checkbox-wrapper .switch + label {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    color: #78768d;
    cursor: pointer;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 15px;

    position: relative;

    box-sizing: border-box;
    max-width: 100%;
    white-space: nowrap;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.checkbox-wrapper .switch + label::before,
.checkbox-wrapper .switch + label::after {
    content: '';
    display: block;
}


.checkbox-wrapper .switch + label::before {
    background-color: #05012c;
    border-radius: 500px;

    height: 15px;
    width: 25px;

    -webkit-transition: background-color 0.125s ease-out;
    transition: background-color 0.125s ease-out;
}


.checkbox-wrapper .switch + label::after {
    background-color: #fff;
    border-radius: 13px;

    box-shadow:
        0 3px 1px 0 rgba(37, 34, 71, 0.05),
        0 2px 2px 0 rgba(37, 34, 71, 0.1),
        0 3px 3px 0 rgba(37, 34, 71, 0.05);

    height: 13px;
    width: 13px;

    left: 1px;
    top: 1px;

    position: absolute;

    -webkit-transition: -webkit-transform 0.125s ease-out;
    transition: -webkit-transform 0.125s ease-out;
    transition: transform 0.125s ease-out;
    transition: transform 0.125s ease-out, -webkit-transform 0.125s ease-out;
}


.checkbox-wrapper .switch + label .switch-x-text {
    display: block;
    margin-right: .3em;
}


.checkbox-wrapper .switch + label .switch-x-toggletext {
    display: block;

    font-weight: bold;

    height: 15px;
    width: 25px;

    overflow: hidden;
    position: relative;
}


.checkbox-wrapper .switch + label .switch-x-unchecked,
.checkbox-wrapper .switch + label .switch-x-checked {
    left: 0;
    top: 0;

    position: absolute;

    -webkit-transition:
        opacity 0.125s ease-out,
        -webkit-transform 0.125s ease-out;

    transition: opacity 0.125s ease-out;
    transition:
        transform 0.125s ease-out,
        opacity 0.125s ease-out;
}


/*
 * SFW used to sit at left:-32px, outside the toggle's real box.
 * Reserve that space inside the label instead so Madara's
 * container can size/clip the control normally.
 */
.checkbox-wrapper .switch:not(:checked) + label {
    padding-left: 32px;
}


.checkbox-wrapper .switch:not(:checked) + label::after {
    left: 33px;
}


.checkbox-wrapper .switch + label .switch-x-unchecked {
    opacity: 1;

    -webkit-transform: none;
    transform: none;

    left: 0;
}


.checkbox-wrapper .switch + label .switch-x-checked {
    opacity: 0;

    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}


.checkbox-wrapper .switch + label .switch-x-hiddenlabel {
    position: absolute;
    visibility: hidden;
}


.checkbox-wrapper .switch:checked + label::before {
    background-color: #ffb500;
}


.checkbox-wrapper .switch:checked + label::after {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
}


.checkbox-wrapper .switch:checked + label .switch-x-unchecked {
    opacity: 0;

    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}


.checkbox-wrapper .switch:checked + label .switch-x-checked {
    opacity: 1;

    -webkit-transform: none;
    transform: none;
}


@media (max-width: 767px) {

    .site-header
    .c-sub-header-nav
    .c-sub-nav_wrap
    .section_adult {
        display: inline-block !important;
        max-width: 100% !important;
    }


    .site-header
    .c-sub-header-nav
    .c-sub-nav_wrap
    .section_adult
    .switch + label {
        max-width: 100%;
    }
}

/*
 * Hold R19 covers until their SFW overlay is ready.
 *
 * visibility:hidden keeps the original image dimensions,
 * allowing JavaScript to measure and size the overlay correctly.
 */
html.ascorbic-overlay-prepaint .ascorbic-adult-cover-image {
    visibility: hidden !important;
}

/*
 * =========================================================
 * ADULT COVER / BANNER OVERLAYS — GUESTS ONLY
 * =========================================================
 *
 * Adult covers keep Madara's native image/anchor DOM.
 * Ascorbic only turns the existing host into a positioning
 * context and does not change its dimensions.
 */

.ascorbic-adult-cover-host,
.ascorbic-adult-banner-target {
    position: relative !important;
}

.ascorbic-adult-banner-target {
    overflow: hidden;
}

.ascorbic-adult-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    visibility: visible;
    transform: translate(-50%, -50%);
    background-image: var(--ascorbic-adult-overlay-image, none);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: none;
}

/*
 * The uploaded image is cropped with background-size: cover
 * inside the target's own aspect ratio, so it never stretches
 * or exceeds the original media width.
 */
html.ascorbic-sfw-active .ascorbic-adult-overlay,
body.ascorbic-sfw-active .ascorbic-adult-overlay {
    opacity:
        var(--ascorbic-adult-overlay-opacity, .5);
}

html.ascorbic-sfw-active .ascorbic-adult-cover-host:hover .ascorbic-adult-overlay,
body.ascorbic-sfw-active .ascorbic-adult-cover-host:hover .ascorbic-adult-overlay,
html.ascorbic-sfw-active .ascorbic-adult-banner-target:hover .ascorbic-adult-overlay,
body.ascorbic-sfw-active .ascorbic-adult-banner-target:hover .ascorbic-adult-overlay {
    opacity: var(--ascorbic-adult-overlay-opacity, .5) !important;
    visibility: visible !important;
}


/*
 * R19 HERO SLIDER OVERLAY
 */
.manga-slider .slider__thumb_item .slider-overlay {
    position: absolute;
}

html.ascorbic-sfw-active
.manga-slider
.slider__thumb_item:has(.ascorbic-adult-cover-image)
.slider-overlay::before,
body.ascorbic-sfw-active
.manga-slider
.slider__thumb_item:has(.ascorbic-adult-cover-image)
.slider-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background-image: var(--ascorbic-adult-overlay-image, none);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    opacity: var(--ascorbic-adult-overlay-opacity, .5);
    border-radius: inherit;
}

/*
 * =========================================================
 * PRESERVE MADARA TITLE BADGES ABOVE ASCORBIC OVERLAYS
 * =========================================================
 *
 * HOT / NEW badges retain all native Madara styling.
 * Ascorbic changes only stacking order so an R19 overlay
 * cannot cover the badge.
 */


.ascorbic-adult-cover-host .manga-title-badges {
    z-index: 10 !important;
}

.manga-slider
.slider__thumb_item
.manga-title-badges {
    z-index: 10 !important;
}