/*
Theme Name: Facelook Pro
Author: Ezycab Developer
Description: Full-screen Social App with Hooks, Reels, and Thappad React.
Version: 2.0
*/
:root {
    --bg: #05070a;
    --card: #121826;
    --gold: #ffcc00;
    --hook-green: #00ff88;
    --red: #ff4d4d;
    --text: #ffffff;
}
body, html { 
    margin: 0; padding: 0; background: var(--bg); color: var(--text);
    font-family: 'Poppins', sans-serif; overflow-x: hidden;
}
#wpadminbar, header, footer { display: none !important; }

/* Status Tray Animation */
.status-tray {
    position: fixed; right: -80px; top: 100px; width: 80px;
    background: var(--card); border-radius: 20px 0 0 20px;
    transition: 0.5s; z-index: 1001; padding: 10px; border: 1px solid var(--gold);
}
.status-tray.open { right: 0; }
.tray-handle {
    position: absolute; left: -30px; top: 50%; transform: translateY(-50%);
    background: var(--gold); color: #000; padding: 10px 5px; border-radius: 5px 0 0 5px;
}

/* Hooks Reels Style */
.hook-reels-container {
    height: 400px; overflow-y: scroll; scroll-snap-type: y mandatory;
    scrollbar-width: none; border-bottom: 2px solid #222;
}
.hook-card {
    height: 400px; scroll-snap-align: start; position: relative;
    background-size: cover; background-position: center;
}
.hook-overlay {
    position: absolute; bottom: 0; width: 100%; padding: 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
}
.hook-actions { display: flex; gap: 10px; margin-top: 10px; }
.btn-action { border: none; padding: 8px 12px; border-radius: 5px; font-weight: bold; }

/* Thappad/Chappal React */
.react-bar { display: flex; gap: 15px; padding: 10px; border-top: 1px solid #333; }
.react-item { font-size: 20px; cursor: pointer; }

/* Bottom Nav */
.bottom-nav {
    position: fixed; bottom: 0; width: 100%; background: #000;
    display: flex; justify-content: space-around; padding: 12px 0;
    border-top: 1px solid #333; z-index: 1000;
}