/* LAYOUT */
.cfi-wrap{
display:flex;
gap:25px;
max-width:1400px;
margin:auto;
}

/* ================= SLIDER (NETFLIX STYLE) ================= */
#cfi-slider{
width:200px;
height:650px;
overflow:hidden;
position:relative;
animation:scroll 25s linear infinite;
}

#cfi-slider::before,
#cfi-slider::after{
content:'';
position:absolute;
width:100%;
height:100px;
z-index:2;
pointer-events:none;
}

#cfi-slider::before{
top:0;
background:linear-gradient(to bottom,#fff,transparent);
}

#cfi-slider::after{
bottom:0;
background:linear-gradient(to top,#fff,transparent);
}

.cfi-card{
position:relative;
margin:15px 0;
transform:scale(.8);
opacity:.4;
transition:.4s;
}

.cfi-card img{
width:100%;
border-radius:12px;
}

/* CENTER FOCUS FEEL */
.cfi-card:hover{
transform:scale(1.05);
opacity:1;
}

/* PLAY BUTTON */
.cfi-play{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:28px;
background:rgba(0,0,0,.6);
color:#fff;
border-radius:50%;
padding:12px 16px;
}

/* RIBBON */
.cfi-ribbon{
position:absolute;
top:10px;
right:-30px;
transform:rotate(45deg);
background:#fff;
color:#6f42c1;
padding:5px 40px;
font-size:10px;
font-weight:bold;
}

/* TYPE COLORS */
.cfi-card.newsletter{
background:linear-gradient(45deg,#6f42c1,#9b6dff);
}

.cfi-card.webinar{
background:#000;
}

.cfi-card.live{
background:#800000;
}

/* AUTO SCROLL */
@keyframes scroll{
0%{transform:translateY(0);}
100%{transform:translateY(-50%);}
}

/* ================= CALENDAR ================= */
#cfi-calendar{
flex:1;
}

/* EVENT COLORS */
.fc-event.newsletter{
background:#6f42c1 !important;
border:none;
}
.fc-event.webinar{
background:#000 !important;
border:none;
}
.fc-event.live{
background:#800000 !important;
border:none;
}

/* ================= POPUP ================= */
#cfi-popup{
position:fixed;
top:0;left:0;
width:100%;height:100%;
background:rgba(0,0,0,.75);
display:none;
justify-content:center;
align-items:center;
z-index:9999;
}

/* CENTER POPUP */
.cfi-popup-card{
background:#fff;
padding:40px;
border-radius:14px;
text-align:center;
width:400px;
}

/* MODAL */
.cfi-modal{
display:flex;
background:#fff;
width:900px;
border-radius:14px;
overflow:hidden;
}

.cfi-modal-img{
width:40%;
background-size:cover;
background-position:center;
}

.cfi-modal-content{
padding:30px;
width:60%;
}

/* INPUT */
.cfi-input{
width:100%;
padding:12px;
margin-top:15px;
border:1px solid #ddd;
border-radius:6px;
}

/* BUTTON */
.cfi-btn{
display:inline-block;
margin-top:15px;
padding:12px 20px;
border-radius:8px;
text-decoration:none;
}

.cfi-btn.primary{
background:#800000;
color:#fff;
}

/* CLOSE */
.cfi-close{
margin-top:15px;
background:#ddd;
border:none;
padding:10px;
cursor:pointer;
}