/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.odsf-scroll-locked {
    overflow: hidden !important;
}

 /* Slider show in the reviews display */
.odsf-slider-wrapper {
    position: relative;
    overflow: hidden;
    transition: height 0.35s ease;
}
.odsf-slider {
    display: flex;
    align-items: flex-start;
    transition: transform 0.4s ease;
}
.odsf-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: rgba(200,200,200,0.7);
    border: 1px solid #000;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
}
.odsf-arrow svg {
    width: 30px;
    height: 30px;
}
.odsf-arrow.prev {
    left: 0;
}
.odsf-arrow.next {
    right: 0;
}
.odsf-slide-wrapper {
    display: flex;
    flex-direction: column;
}
.odsf-slide-wrapper {
    min-width: 0;
    border: 1px solid #c1c1c1;
    border-radius: 16px;
}
.odsf-slide,
.odsf-slide-wrapper {
    min-width: 0;
}
.odsf-slide {
    flex: 0 0 25%;
    max-width: 25%;
    box-sizing: border-box;
    min-width: 0;
    padding: 0 20px;
}
.odsf-slide img {
    width:100%;
}
.odsf-header-wrapper {
    display:flex;
    align-items:center;
    gap:8px;
    padding: 10px;
}
.odsf-header-wrapper .odsf-avatar {
    width:30px;
    height:30px;
    border-radius:50%;
}
.odsf-author-time {
    line-height: normal;
}
.odsf-author {
    font-weight:bold;
}
.odsf-time {
    display: block;
    font-size:0.85em;
    color:#555;
}
.odsf-icon {
    margin-left:auto;
}
.odsf-media-wrapper{
	position:relative;
	width:100%;
	aspect-ratio: 1 / 1;
	overflow:hidden;
	background:#000;
}
.odsf-media-wrapper:hover .odsf-play-button{
	transform:translate(-50%, -50%) scale(1.1);
}
.odsf-media-wrapper img{
	width:100%;
	display:block;
}
.odsf-play-button{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:60px;
	height:60px;
	pointer-events:none;
}
.odsf-play-button svg{
	width:100%;
	height:100%;
}
.odsf-caption, .odsf-likes {
    padding: 10px;
}
.odsf-caption a {
    overflow-wrap: break-word;
}
.odsf-likes{
	display:flex;
	gap:12px;
	align-items:center;
	font-size:14px;
}
.odsf-likes span{
	display:flex;
	align-items:center;
	gap:5px;
}
.odsf-likes svg{
	width:16px;
	height:16px;
}
.odsf-like svg{ 
    color:#ffc402; 
}
.odsf-comments svg{ 
    color:#666; 
}
/* Read More */
.odsf-caption-text{
	height:250px;
	overflow:hidden;
	position:relative;
	transition:max-height .35s ease;
}
.odsf-caption-text p {
    font-size: 18px;
}
.odsf-read-more{
	display:inline-block;
	margin-top:8px;
	color:#1877f2;
	cursor:pointer;
	font-weight:500;
	font-size:14px;
}
.odsf-caption-text::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:40px;
	background:linear-gradient(to bottom, rgba(255,255,255,0), #EBEBEB);
	pointer-events:none;
	opacity:1;
	transition:opacity .25s ease;
}
.odsf-caption-text.expanded::after{
	opacity:0;
}
@media (max-width: 1024px) {
    .odsf-slider {
        align-items: flex-start;
    }
    .odsf-slide {
        flex: 0 0 50%;
        min-width: 50%;
    }
}
@media (max-width: 768px) {
     .odsf-slider {
        align-items: flex-start;
    }
    .odsf-slide {
        flex: 0 0 100%;
        min-width: 100%;
    }
}

/* POPUP */
.odsf-popup{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.8);
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:99999;
	padding:250px 40px;
	box-sizing:border-box;
    opacity:0;
	visibility:hidden;
	transition:opacity .35s ease, visibility .35s ease;
}
.odsf-popup.open{
    opacity:1;
	visibility:visible;
}
.odsf-popup-content{
	position:relative;
	background:#fff;
	max-width:1000px;
	width:100%;
	max-height:90vh;
	display:flex;
	flex-direction:column;
	border-radius:10px;
	overflow:hidden;
}
.odsf-popup-close{
	position:absolute;
	top:0;
	right:10px;
	font-size:28px;
	background:none;
	border:none;
	color:#000;
	cursor:pointer;
	z-index:20;
}
body .odsf-header a {
	text-decoration: none;
}
.odsf-header a:hover .odsf-header-wrapper {
    background-color: rgba(0,0,0,0.15);
    border-radius: 16px 16px 0 0;
}
.odsf-popup-body{
	display:flex;
	height:100%;
	min-height:500px;
    max-height:calc(100vh - 500px);
}
.odsf-popup-media{
	width:65%;
	background:#000;
	display:flex;
	align-items:center;
	justify-content:center;
}
.odsf-media-wrapper::after{
	content:"";
	position:absolute;
	inset:0;
	background:rgba(0,0,0,0.5);
	opacity:0;
	transition:opacity .3s ease;
	pointer-events:none;
}
.odsf-media-wrapper:hover::after{
	opacity:1;
}
.odsf-popup-media img,
.odsf-popup-media video{
	max-width:100%;
	max-height:90vh;
    height: 100%;
	object-fit:contain;
}
.odsf-popup-caption{
	width:35%;
	padding:20px;
	overflow-y:auto;
    max-height:100%;
}
.odsf-popup-caption p{
	font-size:14px;
	line-height:1.5;
	margin-bottom:12px;
}
@media (max-width:768px){
    .odsf-popup{
		padding:20px;
	}
	.odsf-popup-body{
		flex-direction:column;
		max-height:90vh;
        gap: 20px;
	}
    .odsf-popup-media {
        width: 100%;
    }
    .odsf-popup-media img,
    .odsf-popup-media video{
        max-height:42vh;
        max-width: 400px;   
        width: 100%;
    }
	.odsf-popup-caption{
		width:100%;
		max-height:40vh;
	}
    .odsf-popup-close {
        margin: 5px;
        position: relative;
        float: right;
    }
}