/* assets/css/style_feed.css */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Urbanist', sans-serif; }

body {
    background-color: #000;
    color: #fff;
    overflow: hidden; /* Sirf video container scroll karega */
}

/* --- Main Container (The Scroll Magic) --- */
.app-container {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory; /* Ye video ko rokta hai */
    position: relative;
    scrollbar-width: none; /* Firefox scrollbar hide */
}
.app-container::-webkit-scrollbar { display: none; } /* Chrome scrollbar hide */

/* --- Single Video Wrapper --- */
.video-wrapper {
    width: 100%;
    height: 100vh; /* Pura mobile view */
    scroll-snap-align: start;
    position: relative;
    background: #111;
    display: flex;
    justify-content: center;
    align-items: center;
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Video screen bhar degi */
    cursor: pointer;
}

/* --- Top Header (Following | For You) --- */
.top-bar {
    position: fixed;
    top: 20px;
    width: 100%;
    z-index: 10;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.top-bar span {
    font-size: 16px;
    color: rgba(255,255,255,0.6);
    margin: 0 10px;
    font-weight: 700;
    cursor: pointer;
}
.top-bar span.active {
    color: #fff;
    border-bottom: 2px solid #fff;
    padding-bottom: 3px;
}

/* --- Right Side Actions (Like, Share, etc) --- */
.actions {
    position: absolute;
    right: 10px;
    bottom: 100px; /* Navbar se oper */
    display: flex;
    flex-direction: column;
    gap: 25px;
    z-index: 10;
    align-items: center;
}
.action-btn { text-align: center; cursor: pointer; }
.action-btn i { 
    font-size: 30px; 
    color: white; 
    drop-shadow: 0 2px 5px rgba(0,0,0,0.4); 
    transition: 0.2s; 
}
.action-btn span { 
    display: block; 
    font-size: 12px; 
    margin-top: 5px; 
    font-weight: 600; 
}
.action-btn:active { transform: scale(0.8); }

/* Profile Pic on Right */
.profile-action img {
    width: 45px; height: 45px; border-radius: 50%;
    border: 1px solid #fff; object-fit: cover;
}
.profile-action { position: relative; margin-bottom: 10px; }
.profile-action i {
    position: absolute; bottom: -5px; left: 14px;
    font-size: 16px; color: #D500F9; background: white; border-radius: 50%;
}

/* --- Bottom Video Info --- */
.video-info {
    position: absolute;
    bottom: 80px;
    left: 15px;
    width: 75%;
    z-index: 10;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
.username { 
    font-weight: 700; font-size: 17px; 
    margin-bottom: 8px; display: block; 
    color: #fff; text-decoration: none; 
}
.description { 
    font-size: 14px; color: #eee; line-height: 1.4; 
}

/* --- Animation --- */
.fa-heart.liked { color: #ff2d55; animation: pop 0.3s ease; }
@keyframes pop { 0% {transform: scale(1);} 50% {transform: scale(1.3);} 100% {transform: scale(1);} }