.reels-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.reel-item{
flex:0 0 auto;
width:180px;
aspect-ratio:9/16;
border-radius:12px;
overflow:hidden;
cursor:pointer;
}

.reel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 6px 10px;
    z-index: 10;
    border-radius: 50%;
}

.reel-arrow.left { left: 0; }
.reel-arrow.right { right: 0; }

.reel-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.95);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.reel-modal.active { display: flex; }

.reel-modal iframe {
    width: 360px;
    height: 640px;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
    border: none;
}

.reel-close {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 30px;
    color: white;
    cursor: pointer;
}

.reel-title{
    text-align:center;
    font-size:14px;
    color:#fff;
    margin-top:4px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}


.reels-carousel{
display:flex;
gap:12px;

overflow-x:auto;
overflow-y:hidden;

padding:10px 0;

scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;

touch-action:pan-x;

scrollbar-width:none;
}

.reels-carousel::-webkit-scrollbar{
display:none;
}

.reel-modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,0.95);

justify-content:center;
align-items:center;

z-index:9999;

touch-action:none;
}

.reel-modal.active{
display:flex;
}

.reel-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.95);

    justify-content:center;
    align-items:center;
    flex-direction:column; /* 🔥 αυτό είναι το σημαντικό */

    z-index:9999;
}

.reel-modal iframe{
    width:360px;
    height:640px;
    max-width:90vw;
    max-height:80vh;
    border-radius:12px;
    border:none;
}

/* 🔥 ΤΙΤΛΟΣ ΚΑΤΩ ΑΠΟ ΤΟ VIDEO */
#modalTitle{
    color:#fff;
    text-align:center;
    margin-top:10px;
    font-size:16px;
    max-width:90%;
}

.reel-item{
    width:180px;
    flex:0 0 auto;
    aspect-ratio:9/16;
    border-radius:12px;
    overflow:hidden;
    cursor:pointer;
}

/* 🔥 YouTube video items = διπλάσιο πλάτος */
.reel-item.is-video{
    width:360px;
}

.reel-item{
    width:180px;
    flex:0 0 auto;
    aspect-ratio:9/16;
    border-radius:12px;
    overflow:hidden;
}

/* 📺 Normal YouTube videos (μεγάλα) */
.reel-item.is-video{
    width:360px;
}

/* 🎬 Shorts (κανονικά vertical reels) */
.reel-item.is-short{
    width:180px;
}

.reel-item.is-short{
    aspect-ratio: 9/16;
    transform: scale(1);
}

.reel-item.is-video{
    aspect-ratio: 16/14;
}

.reels-carousel{
    display:flex;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:10px 0;

    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;

    /* 🔥 IMPORTANT FIX */
    flex-wrap:nowrap;
    align-items:flex-start;
}

.reel-item{
    flex:0 0 auto;   /* 🔥 ΚΡΙΣΙΜΟ */
    width:180px;
    max-width:180px;
    aspect-ratio:9/16;
    border-radius:12px;
    overflow:hidden;
}

.reel-item.is-video{
    width:360px;
    max-width:360px;
}

.reel-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}