/* Styles extracted from resources/views/videos/swipe.blade.php */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: #000;
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

#video-container { width: 100%; height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; -ms-overflow-style: none; }
#video-container::-webkit-scrollbar { display: none; }

.video-item { position: relative; width: 100%; height: 100vh; scroll-snap-align: start; scroll-snap-stop: always; background: #000; display: flex; align-items: center; justify-content: center; }
.video-wrapper { position: relative; width: 100%; height: 100%; }
.video-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

.video-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%); color: white; z-index: 10; pointer-events: none; }
.video-title { font-size: 18px; font-weight: bold; margin-bottom: 8px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.video-title-2 { font-size: 14px; margin-bottom: 12px; opacity: 0.9; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); }
.video-meta { display: flex; align-items: center; gap: 15px; font-size: 13px; margin-bottom: 10px; }
.video-views { display: flex; align-items: center; gap: 5px; }
.hashtags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hashtag { background: rgba(255, 255, 255, 0.2); padding: 4px 10px; border-radius: 12px; font-size: 12px; pointer-events: auto; cursor: pointer; transition: background 0.2s; }
.hashtag:hover { background: rgba(255, 255, 255, 0.3); }

.action-buttons { position: absolute; right: 20px; bottom: 100px; display: flex; flex-direction: column; gap: 20px; z-index: 10; transition: opacity 0.3s ease; opacity: 1; }
.action-btn { width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); border: 2px solid rgba(255, 255, 255, 0.5); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; backdrop-filter: blur(10px); }
.action-btn:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.1); }
.action-btn svg { width: 24px; height: 24px; }

.loading { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.2); color: white; padding: 10px 20px; border-radius: 20px; font-size: 14px; z-index: 100; backdrop-filter: blur(10px); }

.header { position: fixed; top: 0; left: 0; right: 0; padding: 15px 20px; background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 70%, transparent 100%); color: white; z-index: 100; display: flex; justify-content: space-between; align-items: center; transition: opacity 0.3s ease, transform 0.3s ease; opacity: 1; transform: translateY(0); }
.header.hidden { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.header.visible { opacity: 1; transform: translateY(0); pointer-events: auto; background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 70%, transparent 100%); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.header-title { font-size: 18px; font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.back-btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); border: 2px solid rgba(255, 255, 255, 0.3); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(10px); transition: all 0.3s ease; box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.back-btn:hover, .back-btn:active { background: rgba(255, 255, 255, 0.4); transform: scale(1.1); box-shadow: 0 6px 12px rgba(0,0,0,0.4); }

.spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.no-more-videos { text-align: center; padding: 40px 20px; color: white; font-size: 16px; }

.tap-hint { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.7); color: white; padding: 12px 24px; border-radius: 25px; font-size: 14px; z-index: 90; backdrop-filter: blur(10px); animation: fadeInOut 3s ease-in-out; pointer-events: none; display: flex; align-items: center; gap: 8px; }
@keyframes fadeInOut { 0% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 768px) {
    .video-title { font-size: 16px; }
    .video-title-2 { font-size: 13px; }
    .action-buttons { right: 15px; bottom: 80px; }
    .action-btn { width: 45px; height: 45px; }
}