#rtShade {
    --rtShade-padding: 20px;
}

#rtShade {
    display: none;
    opacity: 0;
    transition: opacity .25s ease-out;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    min-width: 320px;
    padding: var(--rtShade-padding);
    background-color: #80808080;
    z-index: 10000;
    background-image: url(/images/ui/pattern_8x8_dark_transparent.png);
    backdrop-filter: blur(20px);
    align-content: center;
    box-sizing: border-box;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    container-type: inline-size;
}

#rtShade.show {
    opacity: 1;
}

/* close button */
#rtShade > div.close {
    cursor: pointer;
    background-image: url(/images/ui/rtVideo.close.svg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: fixed;
    aspect-ratio: 1 / 1;
    width: 48px;
    top: 0px;
    right: 0;
    float: right;
    margin: 5px;
	z-index: 999999;
}

#rtShadeInner {
    overflow: auto;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    text-align: center;
}

#rtShadeInner > * {
    text-align: left;
}

div#rtShadeInner > div.main:first-child {
    box-shadow: none;
	border: none;
	margin-top: 0;
	margin-bottom: 0;
}

#rtShadeInner.pseudoiframe {
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    background-color: #ffffff;
    max-width: 960px;
    margin: auto;
    border-radius: 5px;
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.5), 0px 0px 1.5px rgba(0, 0, 0, 0.5);
}

#rtShadeInner > iframe{
    width: 100%;
    height: calc(100dvh - 40px);
    border: none;
    padding: 0;
    margin: 0;
}

#rtShadeInner:has(> iframe) {
    overflow: clip;
}

#rtShadeInner {
    .ppCart {
        display: none;
    }
    
    div.box.main.ppDiv {
        box-shadow: none;
        border: 0;
        margin: 0;
    }
    
}

@media only screen and (max-width: 360px) {
    #rtShade {
        --rtShade-padding: 5px;
    }
    #rtShadeInner {
        max-height: calc(100vh - 10px);
        max-height: calc(100dvh - 10px);
        container-type: inline-size;
    }
}

img.rtShade-popup-img {
    max-width: calc(100vw - 45px);
    max-height: calc(100vh - 45px);
    object-fit: contain;
}

/* carousel */

div.rtShade-carousel {
    display: grid;
    grid-template-columns: 20px auto 20px;
    gap: 5px;
    container-type: inline-size;

    margin: 20px -15px 20px -15px;
	
	img {
		user-select: none;
		pointer-events: none;
	}
    
    div.inner {
        container-type: inline-size;
        overflow: clip;
    }
    
    div.rev,
    div.fwd {
        aspect-ratio: 1/2;
        position: relative;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% auto;
        cursor: pointer;
    }
    
    div.rev.disabled,
    div.fwd.disabled {
        opacity: 0.25;
        cursor: default;
    }

    div.rev {
        background-image: url(/images/ui/rtVideo.rev.svg);
    }

    div.fwd {
        background-image: url(/images/ui/rtVideo.fwd.svg);
    }
    
    div.scroll {
    
        --rtShade-carousel-slide-width: 20cqi;
		
		touch-action: none;
		cursor: grab; 
        
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: var(--rtShade-carousel-slide-width);
        gap: 0px;

        overflow-x: hidden;
        
        div.slide {
            padding: 0 10px 0 10px;
            cursor: pointer;
        }
        
        img {
            object-fit: contain;
            width: 100%;
            box-shadow: 0px 0px 1.5px rgba(0, 0, 0, 0.5);
			margin: 1px;
            background: #d0d0d0;
        }
    }

	div.scroll:active {
		cursor: grabbing;
	}
	
}

@media only screen and (max-width: 1329px) {
    div.rtShade-carousel div.scroll div.slide {
        padding: 0 5px 0 5px;
    }
}

@media only screen and (max-width: 959px) {
    div.rtShade-carousel div.scroll {
        --rtShade-carousel-slide-width: 20cqi;
    }
}

@media only screen and (max-width: 799px) {
    div.rtShade-carousel div.scroll {
        --rtShade-carousel-slide-width: 25cqi;
    }
    
    div.rtShade-carousel div.scroll div.slide {
        padding: 0 5px 0 5px;
        cursor: pointer;
    }
}

@media only screen and (max-width: 619px) {
    div.rtShade-carousel div.scroll {
        --rtShade-carousel-slide-width: 33.3333cqi;
    }
}

@media only screen and (max-width: 480px) {
    
    div.rtShade-carousel {
        grid-template-columns: 16px auto 16px;
        gap: 5px;
    }
    
    div.rtShade-carousel div.scroll {
        --rtShade-carousel-slide-width: 50cqi;
    }
    
}