/* --- Video Swiper Modal Portrait 1.1.0 --- */

/* 1. Section & Swiper Core */
.lvd-video-swiper-modal-portrait {position: relative; }
.lvd-video-swiper-modal-portrait .lvd-section-title {
    color: var(--lvd-color-black); 
    margin-bottom: 16px;
}
.lvd-video-swiper-modal-portrait .swiper {
    position: relative; 
    height: 100%; 
    padding: 0 8px;
}
.lvd-video-swiper-modal-portrait .swiper-wrapper {
    z-index: 2; 
    position: relative; 
    margin: 0 auto; 
    display: flex;
    align-items: stretch; /* Ensures equal card heights */
}
.lvd-video-swiper-modal-portrait-body {
    position: relative;
}

/* 2. Card Base */
.lvd-video-swiper-modal-portrait .lvd-card {
    position: relative; 
    height: auto; 
    border-radius: var(--lvd-rounded); 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
    background-color: #000; 
    overflow: hidden; 
    transform: translateZ(0); /* Hardware acceleration */
    backface-visibility: hidden; 
}

/* 3. Image Wrapper & Sizing */
.lvd-video-swiper-modal-portrait .lvd-card-image-wrapper {
    position: relative; 
    width: 100%; 
    flex-shrink: 0;
}
.lvd-video-swiper-modal-portrait .lvd-img {
    width: 100%;
}
.lvd-video-swiper-modal-portrait .lvd-img img {
    width: 100%; 
    height: 100%; 
    aspect-ratio: 3 / 4; /* Force portrait ratio */
    object-fit: cover; 
    object-position: center; 
    display: block;
}

/* 4. Play Button Overrides */
.lvd-video-swiper-modal-portrait .lvd-play-button {
    top: auto;
    left: 16px; 
    bottom: 16px; 
    transform: translateZ(0); 
    background: #79f222; 
    border-color: #79f222;
    box-shadow: 0 4px 16px rgba(121, 242, 34, 0.4); 
}
.lvd-video-swiper-modal-portrait .lvd-icon-play {
    background-color: var(--lvd-color-black-pure); 
}
.lvd-video-swiper-modal-portrait .lvd-video-cta {
    display: none; /* Hide default CTA, using custom content area below */
}

/* 5. Card Content Area */
.lvd-video-swiper-modal-portrait .lvd-card-content {
    padding: 24px 16px; 
    flex-grow: 1; /* Pushes content to fill remaining vertical space */
    display: flex;
    align-items: flex-start; 
    background-color: #000; 
    color: #fff; 
}
.lvd-video-swiper-modal-portrait .lvd-card-title {
    margin: 0;
    font-size: var(--lvd-text-body); 
    line-height: 1.4;
    font-weight: 400; 
}

/* 6. Navigation (Arrows) */
.lvd-video-swiper-modal-portrait .swiper-button-next {
    z-index: 4; 
    position: absolute; 
    right: 10px !important; 
    top: calc(50% - 50px); 
    width: 50px !important; 
    height: 50px !important; 
    border-radius: 25px; 
    background: var(--lvd-color-black); 
    color: var(--lvd-color-white) !important; 
    text-align: center !important; 
    vertical-align: middle; 
    box-shadow: var(--lvd-shadow-100);
}
.lvd-video-swiper-modal-portrait .swiper-button-next:hover {
    background: var(--lvd-color-gray-500);
}
.lvd-video-swiper-modal-portrait .swiper-button-next:after {
    font-size: 24px !important;  
    font-family: 'icomoon' !important; 
    content: "\e94e"; 
    line-height: 50px; 
    margin-right: -4px;
}
.lvd-video-swiper-modal-portrait .swiper-button-prev {
    transform: rotate(180deg); 
    z-index: 4; 
    position: absolute; 
    left: 10px !important; 
    top: calc(50% - 50px); 
    width: 50px !important; 
    height: 50px !important; 
    border-radius: 25px; 
    background: var(--lvd-color-black); 
    color: var(--lvd-color-white) !important;  
    text-align: center !important; 
    vertical-align: middle; 
    box-shadow: var(--lvd-shadow-100);
}
.lvd-video-swiper-modal-portrait .swiper-button-prev:hover {
    background: var(--lvd-color-gray-500);
}
.lvd-video-swiper-modal-portrait .swiper-button-prev:after {
    font-size: 24px !important;  
    font-family: 'icomoon' !important; 
    content: "\e94e"; 
    line-height: 50px; 
    margin-right: -4px; 
}
.lvd-video-swiper-modal-portrait .swiper-button-disabled {
    display: none;
}

/* 7. Pagination (Bullets) */
.lvd-video-swiper-modal-portrait .swiper-pagination {
    text-align: center; 
    padding-top: 24px;
}
.lvd-video-swiper-modal-portrait .swiper-pagination-bullet {
    width: 8px; 
    height: 8px; 
    margin: 0 4px 4px 4px; 
    display: inline-block; 
    border-radius: 50%; 
    background: var(--lvd-color-gray-300);
}
.lvd-video-swiper-modal-portrait .swiper-pagination-bullet-active {
    background: var(--lvd-color-black) !important;
}
.lvd-video-swiper-modal-portrait.lvd-style-dark .swiper-pagination-bullet {
    background: var(--lvd-color-gray-200);
}
.lvd-video-swiper-modal-portrait.lvd-style-dark .swiper-pagination-bullet-active {
    background: var(--lvd-color-white);
}

/* --- Media Queries --- */

/* Mobile (Bm) */
@media (max-width: 767px) {
    .lvd-video-swiper-modal-portrait .swiper {
        padding: 0 8px;
    }
    .lvd-video-swiper-modal-portrait .lvd-container {
        padding-left: 0; 
        padding-right: 0; 
    }
    .lvd-video-swiper-modal-portrait .swiper-wrapper {
        padding-bottom: 16px;
    }
    .lvd-video-swiper-modal-portrait .swiper-button-next,
    .lvd-video-swiper-modal-portrait .swiper-button-prev,
    .lvd-video-swiper-modal-portrait .swiper-pagination {
        display: none; /* Hide UI controls on small screens */
    }
    .lvd-video-swiper-modal-portrait .lvd-button-group {
        margin-top: 8px;
    }
}

/* Tablet (Bt) */
@media (min-width: 768px) and (max-width: 1023px) {
    .lvd-video-swiper-modal-portrait .lvd-container {
        padding-left: 0; 
        padding-right: 0; 
    }
    .lvd-video-swiper-modal-portrait .swiper-button-next,
    .lvd-video-swiper-modal-portrait .swiper-button-prev,
    .lvd-video-swiper-modal-portrait .swiper-pagination {
        display: none; 
    }
}

/* Big Desktop */
@media (min-width: 1899px) {
    .lvd-video-swiper-modal-portrait .lvd-container {
        max-width: 1800px; 
        margin: 0 auto; 
    }
}