/* ===================================================================
   COMPONENTS/MEDIA.CSS
   Responsive Media, Effects, and Interactive Elements
   =================================================================== */
/* ===== 4. RESPONSIVE MEDIA ===== */

/* ----- 4.1 Responsive Video Wrapper ----- */
.responsive-video-wrapper {
    /* Layout */
    position: relative;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    
    /* Visual */
    background-color: #000;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.responsive-video-wrapper iframe,
.responsive-video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ----- 4.2 Responsive Images ----- */
.responsive-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* ----- 4.3 Media Type Specific Styling ----- */
.youtube-video .responsive-video-wrapper {
    border: 2px solid rgba(255, 0, 0, 0.3);
}

.self-hosted-video .responsive-video-wrapper {
    border: 2px solid rgba(0, 161, 242, 0.3);
}

.image {
    display: inline-block;
    max-width: 100%;
    margin: 10px auto;
}

/* ----- 4.4 Toggle Content ----- */
.toggle-content .media-container {
    margin-top: 15px;
    margin-bottom: 15px;
}


/* ===== 107. PRODUCT VIEWER ===== */

/* ----- 107.1 Responsive Adjustments ----- */
@media (max-width: 1199px) {
    .cd-product-viewer-wrapper>div {
        width: 100%;
    }
}

/* ----- 107.2 Product Viewer Base ----- */
.cd-product-viewer-wrapper .product-viewer {
    position: relative;
    z-index: 1;
    display: inline-block;
    overflow: hidden;
}

/* ===== 116. PARTICLE EFFECTS ===== */

/* ----- 116.1 Particle Wrapper ----- */
.particles-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.particles-wrapper div {
    height: 100%;
}

/* ----- 116.2 Base Particle ----- */
.particle {
    position: absolute;
}

/* ----- 116.3 Dot Pattern ----- */
.particle.particle-dots {
    -webkit-mask-image: url(../img/particle-dot.svg);
    mask-image: url(../img/particle-dot.svg);
    z-index: 0;
    -webkit-mask-size: 18px;
    mask-size: 18px;
}

/* ----- 116.4 Line Pattern ----- */
.particle.particle-repeating-lines {
    background: repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0) 0.8px, #0088cc 1.6px, #0088cc 3px, rgba(255, 255, 255, 0) 3.8px, rgba(255, 255, 255, 0) 10px);
}

/* ----- 116.5 Light Variant ----- */
.particle.particle-repeating-lines.bg-light {
    background: repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0) 0.8px, #FFF 1.6px, #FFF 3px, rgba(255, 255, 255, 0) 3.8px, rgba(255, 255, 255, 0) 10px);
}

/* ----- 116.6 Dark Variant ----- */
.particle.particle-repeating-lines.bg-dark {
    background: repeating-linear-gradient(-55deg, rgba(255, 255, 255, 0) 0.8px, #212529 1.6px, #212529 3px, rgba(255, 255, 255, 0) 3.8px, rgba(255, 255, 255, 0) 10px);
}

/* ----- 116.7 SVG Patterns ----- */
.patterns svg {
    position: absolute;
}

/* ===== 117. PROGRESS INDICATORS ===== */

/* ----- 117.1 Reading Progress Bar ----- */
.progress-reading {
    z-index: 99999;
    height: 8px;
}

/* ===== 118. CONTENT SWITCHER ===== */

/* ----- 118.1 Wrapper ----- */
.content-switcher-wrapper {
    position: relative;
}

/* ----- 118.2 Base Styles ----- */
.content-switcher {
    transition: all 0.2s ease-in-out;
    opacity: 0;
    top: 0;
}

/* ----- 118.3 Active State ----- */
.content-switcher.active {
    position: absolute;
    opacity: 1;
}

/* ----- 118.4 Initialized State ----- */
.content-switcher.initialized {
    position: absolute;
}

/* ===== 119. POPUP MODALS ===== */

/* ----- 119.1 Base Popup ----- */
.popup-inline-content,
.mfp-content .ajax-container {
    background: none repeat scroll 0 0 #FFF;
    margin: 40px auto;
    max-width: 1170px;
    padding: 20px 30px;
    position: relative;
    text-align: left;
    display: none;
}

/* ----- 119.2 AJAX Container ----- */
.mfp-content .ajax-container {
    display: block;
}

/* ----- 119.3 Inline Content ----- */
.mfp-wrap .popup-inline-content {
    display: block;
}