* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    font-family: Arial, Helvetica, sans-serif;
}


/* Main reels scroll container */

.reels-container {

    width: 100%;
    height: 100vh;

    overflow-y: scroll;

    scroll-snap-type: y mandatory;

    scrollbar-width: none;

    background: #000;
}


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



/* Single video */

.reel {

    position: relative;

    width: 100%;
    height: 100dvh;

    scroll-snap-align: start;

    background: #111;

    overflow: hidden;
}



/* Video */

.reel-video {

    width: 100%;
    height: 100%;

    object-fit: cover;

    background: #000;

}



/* Dark gradient */

.reel-overlay {

    position: absolute;

    inset: 0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.75),
        transparent 45%
    );

}



/* Right side buttons */

.video-sidebar {

    position: absolute;

    right: 18px;

    bottom: 170px;

    display: flex;

    flex-direction: column;

    gap: 25px;

    align-items: center;

}



.action-btn {

    color: white;

    text-align: center;

    cursor: pointer;

    font-size: 25px;

    text-shadow:
    0 2px 8px rgba(0,0,0,.8);

}



.action-btn span {

    display: block;

    font-size: 11px;

    margin-top: 5px;

}



.action-btn i {

    transition: .2s;

}



.action-btn:hover i {

    transform: scale(1.15);

}



.action-btn a {

    color:white;

}





/* Bottom information */


.video-footer {

    position:absolute;

    bottom: 5vh;

    left:20px;

    width:75%;

    color:white;

}

 

.user-info {

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:15px;

}



.avatar {

    width:45px;

    height:45px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid white;

}



.user-info h3 {

    font-size:17px;

    margin-bottom:4px;

}



.user-info small {

    font-size:12px;

    opacity:.9;

}




.caption {

    font-size:14px;

    line-height:1.5;

    margin-bottom:18px;

}





/* Booking button */


.book-btn {


    display:inline-flex;

    align-items:center;

    gap:8px;


    background:#e91e63;

    color:white;

    text-decoration:none;


    padding:12px 22px;


    border-radius:30px;


    font-size:14px;


    font-weight:bold;


    box-shadow:

    0 5px 20px rgba(0,0,0,.4);


    transition:.3s;


}



.book-btn:hover {

    background:#c2185b;

    transform:scale(1.05);

}




/* Desktop */

@media(min-width:768px){


    .reels-container {

        max-width:450px;

        margin:auto;

    }



}




/* Mobile safe area */

@supports(padding:max(0px)) {


.video-footer {

    bottom:

    max(30px, env(safe-area-inset-bottom));

}


}

.floating-heart {

    position:fixed;

    font-size:60px;

    animation:heartAnimation 1s ease forwards;

    pointer-events:none;

    z-index:9999;

}



@keyframes heartAnimation {


    0% {

        transform:scale(0);

        opacity:1;

    }


    50% {

        transform:scale(1.4);

    }


    100% {

        transform:translateY(-120px) scale(1);

        opacity:0;

    }


}

.sound-btn i {

    background: rgba(0,0,0,.45);

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    backdrop-filter: blur(5px);

}

.d-none{
    display: none !important;
}

.video-progress {

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:5px;

    background:rgba(255,255,255,.35);

    cursor:pointer;

}


.progress-bar {

    height:100%;

    width:0%;

    background:white;

    pointer-events:none;

}