:root {
--glass: rgba(255,255,255,0.04);
--glass-strong: rgba(255,255,255,0.06);
--accent: #7aa7ff;
--muted: rgba(255,255,255,0.72);
--item-w: clamp(320px, 38vw, 460px);
--item-h: clamp(420px, 52vh, 560px);
--radius: 20px;
--gap: 28px;
--metric-gap: 15px;
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}


#mediaModal {
height: var(--modal-height);
background: var(--modal-bg);
overflow: hidden;
position: fixed;
top: 0;
inset: 0;
width: 100%;
max-width: 40%;
border-radius: 3rem;
z-index: 0;
display: flex;
justify-content: center;
align-items: center;
user-select: none !important;
resize: none !important;
margin: 0 auto;
visibility: hidden;
opacity: 0;;
transition:
opacity 0.4s ease-out,
transform 0.4s ease-out,
visibility 0s linear 0.4s;
}

#mediaModal.visible {
opacity: 1;
pointer-events: auto;
z-index: 9999;
visibility: visible;
transform: translateY(0);
transition:
opacity 0.4s ease-out,
transform 0.4s ease-out,
visibility 0s linear 0s;
}


.modal-content {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}

.modalBody {
width: 100%;
gap: 30px;
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-padding-left: 16px;
scroll-behavior: smooth;
will-change: transform;
padding-left: 16px;
padding-right: 5px;
}


/* Monetized Ribbon */
.monetized-ribbon {
position: absolute;
top: 30px;
left: 12%;
z-index: 20;
padding: 6px 12px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.03em;
color: #0b1220;
background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(240,240,255,0.86));
box-shadow: 0 6px 18px rgba(0,0,0,0.25);
transform: rotate(-6deg);
}

/* Metrics Overlay */
.metrics-overlay {
position: absolute;
z-index: 99999999 !important;
transform: rotate(360deg);
right: 1rem;
bottom: 80px;
display: flex;
flex-direction: column;
gap: var(--metric-gap);
align-items: center;
padding: 8px 12px;
border-radius: 1rem;
background: rgba(12,14,18,0.2);
backdrop-filter: blur(2px) saturate(70%);
box-shadow: 0 6px 24px rgba(0,0,0,0.2);
}

.metric-icon {
display: flex;
align-items: center;
flex-direction: column;
gap: 2px;
color: var(--muted);
font-weight: 600;
font-size: 14px;
line-height: 1;
cursor: pointer;
user-select: none;
}

.metric-icon {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.metric-icon svg {
width: 30px;
height: 30px;
display: block;
opacity: 0.95;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
transition: 
opacity 0.35s ease,
transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
filter 0.35s ease;
transform-origin: center;
}

.metric-icon:hover svg {
transform: scale(1.12) translateX(-5px);
opacity: 1;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}

.metric-icon .count {
color: #fff;
font-weight: 600;
font-size: 13px;
opacity: 0.95;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
transition: opacity 0.3s ease, transform 0.3s ease;
}

.metric-icon:hover .count {
transform: translateX(-2px);
opacity: 1;
}



.modal-close {
position: absolute;
width: 75px;
top: 1rem;
right: 1rem;
border:none !important;
box-shadow: none;
font-size: 2rem;
border: none;
cursor: pointer;
z-index: 10000;
background: none !important;
outline: none !important;
}

.modal-close:hover { color: var(--accent) !important; background: none !important;}
.modal-close svg { pointer-events: none; width: 32px; height: 32px; color: #8b94a6; }


.item-media-container-audio .metrics-overlay{
/*
top:50%;
transform: translateY(-50%);
*/
top:85px;
right:0;
}

.item .media-audio-box{
width: 80%;
max-width: 100%;
left:50%;
top:50%;
transform: translate(-50%, -50%);
position: absolute;
}

.item {
width:300px;
position: relative;
height: 675px;
flex-direction: column;
flex-shrink: 0;
scroll-snap-align: center;

overflow: hidden;
}

.item-pdf{
  width:70%;
}


.item-media-container {
height: 100%;
width: 100%;
margin: 0 auto;
position: relative;
z-index: 0;
}

.item:focus-within,
.item:hover {
transform: translateY(-4px);
box-shadow: 0 12px 50px rgba(0,0,0,0.55);
}

.common-pfd-book h3{
font-size: 0.9rem;
font-weight: bold;
margin-bottom: 0.5rem;
text-align: center;
color: #fffbe6;
font-family: var(--anton);
}

#mediaModal .pdf-author{
font-size: 1.3rem;
margin-top: 1.2rem;
}


.item .video-preview-box{
position: absolute;
top: -2rem;
height:100%;
width:100%;
background: rgba(0, 0, 0, 0.9);
border-radius: 1rem;
}

.item .video-preview-bottom{
bottom:-2rem;
background: none;
box-shadow: none;
border: none;
width: 100%;
padding: 0;
}

.item .video-preview-bottom.change{
bottom: 0;
position: absolute;
z-index: 999999 !important;
}

.item .preview-seek-bar {
width: 100%;
max-width: 100%;
}

.item .preview-seek-bar::-webkit-slider-thumb {
appearance: none;
width: 6px;
height: 6px; 
border: none;
border-radius: 0;
margin-top: 0;
}

.item .preview-seek-bar::-moz-range-thumb {
width: 6px;
height: 6px; 
border: none;
border-radius: 0; 
}


.item video{
padding-bottom: 10%;
height: 100%;
}

.item img,
.item video,
.item .pdf-placeholder,
.item .audio-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
user-select: none;
-webkit-user-drag: none;
border-radius: var(--radius);
}

.item-pdf .common-pdf-content{
width: 89%;
margin: 0 auto 0;
}
.item-pdf .metrics-overlay{
top:50%;
transform: translateY(-50%);
}


.item .medialib-pdf-cover{
position: absolute;
width: 76%;
height: 70% !important;
top:50%;
left:50%;
transform: translate(-50%,-50%);
max-width: 75%;
}


#mediaModal .pdf-author{
font-size: 1.3rem !important;
margin-top: 1.2rem;
}

#mediaModal .medialib-pdf-cover-meta h3{
font-size:1.3rem !important;
}


#mediaModal .medialib-pdf-cover-meta p{
font-size:15px !important ;
}

/* Caption */
.caption {
padding: 14px 16px;
display: flex;
flex-direction: column;
height: auto;
position: absolute;
z-index:500 !important;
bottom: 0;
gap: 8px;
background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0));
width: 85%;
left: 50%;
transform: translateX(-50%);
overflow:hidden; 

}


.caption::-webkit-scrollbar {
display: none;
}


.caption h3 {
margin: 0;
color: #fff;
font-size: 1.06rem;
font-weight: 700;
letter-spacing: -0.01em;
text-shadow: 0 0 6px rgba(0,0,0,0.8);
}

.media-desc-wrap { 
position: relative;
}


.item-audio .media-desc-wrap p {
max-height: calc(1.45rem * 5);
margin: 0 auto 0;
}



.media-desc-wrap p {
max-height: calc(1.45rem * 1.5);
margin: 0;
color: rgba(255,255,255,0.88);
font-size: 0.94rem;
line-height: 1.45;
transition: max-height 220ms ease;
text-shadow: 0 0 6px rgba(0,0,0,0.8);
overflow-x: hidden;
overflow-y: scroll;  
-webkit-overflow-scrolling: touch;
scrollbar-width: none; 
-ms-overflow-style: none; 
}

.media-desc-wrap p::-webkit-scrollbar {
display: none;
}


.media-desc-wrap.expanded p { max-height: 9999px; }

.desc-toggle {
margin-top: 6px;
align-self: flex-start;
background: transparent;
border: none;
color: var(--accent);
font-weight: 600;
font-size: 13px;
cursor: pointer;
padding: 6px 0;
}
.desc-toggle:focus { outline: 2px solid rgba(122,167,255,0.22); border-radius: 6px; }

.metric-icon[data-clickable="true"]:hover { transform: translateY(-2px); }

/* ================= Breakpoints ================= */

/* Large desktop */
@media(max-width:1650px){
#mediaModal{
max-width: 50%;
width: 100%;
}
}


@media (max-width:1450px) {
#mediaModal{
max-width: 67%;
}
.item { min-width: 80%; }
}
@media (min-width: 600px) and (max-width: 1024px) and (max-height: 699px) {
#mediaModal{
max-width: 75%;
}

}

@media (min-width: 600px) and (max-width: 1024px) and (min-height: 700px) {
#mediaModal{
max-width: 75%;
}
}


@media screen and (max-width: 768px) and (max-height: 1024px) {
#mediaModal{
max-width: 100%;
}
}



/* Small phones */
@media(max-width:845px){
.item-media-container,  .item-media-container img {
border: none !important;
}
}
@media(max-width:700px){

.modal-content {
justify-content: flex-start;
align-items:flex-start;
}
.item-media-container {
aspect-ratio: 1/1;
border: none !important;
}
.item { height: 800px; width:100%; scroll-snap-align: left;}
.item-media-container img{
position: absolute !important;
 top:0 !important;
z-index: 100;
height:100%;
width:100% !important;
border: none !important;
}

.modalBody{
padding-left: 0;
padding-right:0;
scroll-padding-left:0;
}

}
@media (max-width:600px) {
.media-desc-wrap p { max-height: calc(1.45rem * 2); }
.metrics-overlay { bottom: 80px; right: 0; }
.item .medialib-pdf-cover{
max-width:88%;
}
}

@media(max-width:485px){
.item-pdf .common-pdf-content {
max-width: 82%;
margin: 0 auto 0;
}

.item-pdf .common-pdf-content p{
  width:88%;
margin: 0 auto 0;
}

.item-audio .feed-cover-title{ 
font-size:2rem !important;
}

.item-pdf .medialib-pdf-cover{
margin-top: -1.5rem;
max-width:100%;
width:88%;
}

.item-pdf .media-desc-wrap{
bottom: 0;
}

.item-pdf .media-desc-wrap p{
max-height: calc(1.45rem * 4);

}
.item-audio .media-desc-wrap p {
max-height: calc(1.45rem * 8);
width:100%;
}
.item .media-audio-box{
width: 100%;
}

.item-media-container-audio .metrics-overlay,
.item-pdf .metrics-overlay{
right:0;
height: 50%;
justify-content: center;
align-items: center;
}

.item .control-btn{
margin-left: 5px;
}
.item .feed-volume-bar{
position:relative;
left:-10px;
}
.item .feed-seek-bar{
position: relative;
left:-1.5rem;
}
}

@media (max-width:435px) {
.media-desc-wrap p { max-height: calc(1.45rem * 2); }
.metrics-overlay { bottom: 80px; right: 0; }
.item .feed-seek-bar{
position: relative;
left:2px;
}
}

@media (max-width:415px) {
.caption{
bottom: 2rem;
}
.item { height: 820px;}
.metrics-overlay { bottom: 140px; right: 0; }

.item-audio .media-desc-wrap p {
max-height: calc(1.45rem * 6);
}

}



/*** galaxy s20 ultra **/
@media (width: 412px) and (height: 915px) {
.item { height: 816px !important;}
.item .video-preview-bottom{
bottom: -1rem;
}
}


/*** nexus-5x **/
@media (width: 412px) and (height: 660px) {
.item {  height: 615px;}
.item .video-preview-bottom{
bottom: -.5rem;
}
}

/*** moto g power **/
@media (width: 412px) and (height: 823px) {
.item { height: 771px !important;}
.item .video-preview-bottom{
bottom: -1rem;
}
}



@media (width: 412px) and (height: 732px) {
.item {height: 685px;}
.item .video-preview-bottom{
bottom: -.5rem;
}
}



@media (max-width: 385px){
.item-media-container-audio .metrics-overlay{
height: 42%;
}

.item { height: 595px;}
.item .video-preview-bottom{
bottom: -1rem;
}

.item .feed-premium-audio-controls{
height: 70px;
width:90%;
left:50%;
transform: translateX(-50%);
gap:0px;
}
}



/* iPhone X*/
@media (max-width:375px) and (height: 812px) {
.item { height: 765px;}
.item .video-preview-bottom{
bottom: -1rem;
}
}


/*pixel 3xl */
@media (max-width:393px) and (height: 786px) {
.item{height: 720px;  margin-bottom: 1rem;}


.item-pdf .media-desc-wrap p{
max-height: calc(1.45rem * 3.5);
}

.metrics-overlay { bottom: 95px; right: 0; }
}

/* iPhone 14 pro max */
@media (max-width:430px) and (height: 932px) {
.item{
margin-bottom: 1rem;
height: 800px;
}

.metrics-overlay { bottom: 95px; right: 0; }
}

/* iPhone 12 pro */
@media (max-width:390px) and (height: 844px) {
.item{
margin-bottom: 1rem;
height: 796px; 
}
.item .video-preview-bottom{
bottom: -1rem;
}
.metrics-overlay { bottom: 95px; right: .4rem; }
}


/*** nexus-5 **/
@media (max-width: 360px) and (height: 567px) {
.item {height: 525px;}
.item .video-preview-bottom{
bottom: -1rem;
}
}


@media (max-width:375px) {
.item-pdf .media-desc-wrap p{
max-height: calc(1.45rem * 2.5);
}
.media-desc-wrap p { max-height: calc(1.45rem * 1.5); }
.item-audio .icon{ 
position:relative; 
top:-2rem;
width:30px; 
height:40px; 
}
.item-audio .media-desc-wrap p {
max-height: calc(1.45rem * 4); 
}


}


/* iPhone 6, 7, 8 */
@media only screen 
and (device-width: 375px) 
and (device-height: 667px) 
and (-webkit-device-pixel-ratio: 2) {
.item { 
height: 625px;
}
}

/* iPhone 6/7/8 Plus */
@media only screen 
and (device-width: 414px) 
and (device-height: 736px) 
and (-webkit-device-pixel-ratio: 3) {
.item { 
height: 688px;
}
}

/*** galaxy s8plus **/
@media (width: 360px) and (height: 740px) {
.item { height: 688px !important;}
.item .video-preview-bottom{
bottom: -1rem;
}
}



/*** galaxy s9plus **/
@media (width: 320px) and (height: 658px) {
.item {  height: 610px !important;}
.item .video-preview-bottom{
bottom: -1rem;
}
}


@media (max-width:320px) {
.item-media-container-audio .metrics-overlay{
top:50px;
}
.item { height: 525px; }

.item-pdf .media-desc-wrap p {
max-height: calc(1.45rem * 1.5);
}

.item-audio .media-desc-wrap p{
max-height: calc(1.45rem * 2.2);
}

.metrics-overlay { right: 0; }
.item .feed-seek-bar{
margin-left: 30px;
max-width: 65px;
}

.item-pdf .metrics-overlay{
height: 52%;
top:48%;
transform: translateY(-48%);
}
}


@media(max-width:270px){
.item-pdf .ribbon{
font-size: .5rem;
left:0;
width: 35px;
}
#mediaModal .modal-close{
left:1rem ;
margin-bottom: 7px;
}
.item-pdf .medialib-pdf-cover{
margin-top: -1rem;
max-width:88%;
max-height: 148px;
}

#mediaModal .pdf-author{
font-size: .7rem !important;
margin-top: 1.7rem;
position: absolute;
top:75%;
}

#mediaModal .medialib-pdf-cover-meta h3{
font-size:1rem !important;
position: absolute;
transform: translateX(1rem);
top:-1rem;
}

#mediaModal .medialib-pdf-cover-meta p{
font-size:15px ;
}

.item-pdf .metrics-overlay{
right: -1rem;
}

.item-pdf .common-pdf-content {
max-width: 90%;
position: relative;
}

.item-pdf .common-pdf-content p{
display: none;
}

.item-pdf .pdf-author{
font-size: 10px ;
position: absolute;
bottom: 0;
}


.item-pdf .pdf-footer{
max-width: 115px;
max-height: 55px;

}

.item .pdf-footer a{
font-size: 11px;
padding: 5px 9px;
}

.item-pdf .media-desc-wrap p{
max-height: calc(1.45rem * 1.2);
}

.item-audio .media-desc-wrap p{
max-height: calc(1.45rem * 1.6);
margin-bottom: .3rem;
}


.item .feed-premium-audio-controls{
height: 85px;
width: 90%;
}
.item .audio-time{
position: relative;
left:10px;
}
.item .control-btn{
margin-left: 5px;
}
.item .feed-volume-bar{
position: absolute;
top:40%;
left:25%;
}
.item .feed-seek-bar{
position: relative;
left:-1.5rem;
max-width: 55px;
}



.item-audio{
top:3rem;
}

.item-audio .caption{
width:88%;
margin: 0 auto 0;
}

.item-audio .icon{ 
position:relative; 
top:-2rem;
width:25px; height:35px; 
}

.item .feed-premium-audio-inner{
height: 165px !important; 
}

.item-audio .feed-cover-title{ 
font-size: 18px !important;
position: relative;
top:2rem;
}
.item-media-container-audio {
min-width: 94%;
}
.item-audio .metrics-overlay{
right:0; 
top:0;
}

.item-pdf .metrics-overlay{
top:10px;
}

.item-pdf .metrics-overlay{
transform: translateY(-15%);
}

.item-media-container-audio .metrics-overlay{
top:0;
transform: translateY(-12%);
}

.item-media-container-audio .metrics-overlay,
.item-pdf .metrics-overlay{
height: 100%;
}
.item .media-audio-box{
width: 100%;
height: 100%;
}

.caption h3{
font-size: 16px; 
text-align: center;
}
.item { width: 100%; min-width: 78%;height: 296px; }
.metrics-overlay { right:0; bottom: 70px; max-width: 65px; }
.metrics-overlay svg{
width:24px;
height: 24px;
}
}