/* Body Layout */
body#layout {max-width:100%;padding:15px;margin:0 auto}
body#layout .header,body#layout .container,body#layout footer{display:none;visibility:hidden}
/* css */
/* StreamFlix - Modern Responsive CSS   Professional design that works across all devices   Responsive for phones, tablets, and desktop computers*//* ===== RESET & BASE STYLES ===== */* {margin: 0;padding: 0;box-sizing: border-box;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
:root {--primary: #e50914;--primary-hover: #f40612;--secondary: #0071eb;--dark: #141414;--dark-light: #222;--gray: #808080;--light-gray: #e5e5e5;--white: #ffffff;--shadow: 0 4px 12px rgba(0, 0, 0, 0.15);--card-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);--transition: all 0.3s ease;--border-radius: 8px;--border-radius-lg: 12px;}
body {font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;background-color: var(--dark);color: var(--white);line-height: 1.5;overflow-x: hidden;}
/* ===== LAYOUT ===== */
.container {width: 100%;max-width: 1400px;margin: 0 auto;padding: 0 20px;}
.main-content {padding: 30px 0 60px;}
/* ===== HEADER ===== */
.header {background-color: rgba(0, 0, 0, 0.95);position: sticky;top: 0;z-index: 100;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);}
.header-content {display: flex;align-items: center;justify-content: space-between;padding: 16px 0;}
.logo {display: flex;align-items: center;text-decoration: none;color: var(--primary);font-size: 24px;font-weight: 700;letter-spacing: 0.5px;transition: var(--transition);}
.logo:hover {transform: scale(1.05);}
.logo i {margin-right: 8px;font-size: 28px;}
.search-bar {position: relative;width: 100%;max-width: 500px;margin: 0 20px;}
.search-bar i {position: absolute;left: 16px;top: 50%;transform: translateY(-50%);color: var(--gray);}
.search-bar input {width: 100%;padding: 12px 16px 12px 44px;border-radius: 30px;border: 1px solid rgba(255, 255, 255, 0.1);background-color: rgba(255, 255, 255, 0.1);color: var(--white);font-size: 16px;transition: var(--transition);}
.search-bar input:focus {outline: none;background-color: rgba(255, 255, 255, 0.15);border-color: var(--primary);box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.25);}
.search-bar input::placeholder {color: rgba(255, 255, 255, 0.5);}
/* ===== CATEGORIES ===== */
.section-title {display: flex;align-items: center;margin-bottom: 20px;font-size: 24px;font-weight: 600;}
.section-title i {margin-right: 12px;color: var(--primary);}
.categories {display: flex;flex-wrap: nowrap;overflow-x: auto;margin-bottom: 30px;padding-bottom: 10px;-webkit-overflow-scrolling: touch;scrollbar-width: thin;scrollbar-color: var(--primary) rgba(255, 255, 255, 0.1);}
.categories::-webkit-scrollbar {height: 6px;}
.categories::-webkit-scrollbar-track {background: rgba(255, 255, 255, 0.1);border-radius: 10px;}
.categories::-webkit-scrollbar-thumb {background-color: var(--primary);border-radius: 10px;}
.category-btn {background-color: rgba(255, 255, 255, 0.1);color: var(--white);border: none;padding: 10px 20px;margin-right: 12px;border-radius: 30px;font-size: 14px;font-weight: 500;cursor: pointer;white-space: nowrap;transition: var(--transition);}
.category-btn:hover {background-color: rgba(255, 255, 255, 0.2);}
.category-btn.active {background-color: var(--primary);color: var(--white);}
/* ===== VIDEO GRID ===== */
.video-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));gap: 24px;}
.video-card {background-color: var(--dark-light);border-radius: var(--border-radius);overflow: hidden;transition: var(--transition);cursor: pointer;box-shadow: var(--shadow);}
.video-card:hover {transform: translateY(-8px);box-shadow: var(--card-shadow);}
.video-card:hover .play-overlay {opacity: 1;}
.video-thumbnail {position: relative;width: 100%;aspect-ratio: 16/9;overflow: hidden;}
.video-thumbnail img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.5s ease;}
.video-card:hover .video-thumbnail img {transform: scale(1.05);}
.play-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;opacity: 0;transition: var(--transition);}
.play-overlay i {font-size: 30px;color: var(--white);background-color: rgba(229, 9, 20, 0.8);width: 60px;height: 60px;border-radius: 50%;display: flex;align-items: center;justify-content: center;transition: var(--transition);transform: scale(0.8);}
.video-card:hover .play-overlay i {transform: scale(1);}
.video-info {padding: 16px;}
.video-title {font-size: 16px;font-weight: 500;margin-bottom: 8px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;line-height: 1.4;height: 2.8em;}
.video-meta {display: flex;justify-content: space-between;color: var(--gray);font-size: 13px;}
.video-category {color: var(--secondary);font-weight: 500;}
/* ===== LOADING & ERROR STATES ===== */
.loading {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 60px 0;color: var(--light-gray);}
.spinner {width: 50px;height: 50px;border: 4px solid rgba(255, 255, 255, 0.1);border-radius: 50%;border-top-color: var(--primary);animation: spinner 1s linear infinite;margin-bottom: 20px;}
@keyframes spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.error-message {background-color: rgba(229, 9, 20, 0.1);border-left: 4px solid var(--primary);color: var(--white);padding: 16px;margin-bottom: 30px;border-radius: 0 var(--border-radius) var(--border-radius) 0;display: none;}
.no-results {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 60px 0;text-align: center;color: var(--light-gray);}
.no-results i {font-size: 48px;margin-bottom: 20px;color: var(--gray);}
.no-results h3 {font-size: 20px;margin-bottom: 8px;}
.no-results p {color: var(--gray);}
/* ===== PAGINATION ===== */
.pagination {display: flex;justify-content: center;align-items: center;margin-top: 40px;flex-wrap: wrap;}
.pagination-btn {min-width: 40px;height: 40px;margin: 0 4px;display: flex;align-items: center;justify-content: center;border-radius: 50%;border: none;background-color: rgba(255, 255, 255, 0.1);color: var(--white);font-weight: 500;cursor: pointer;transition: var(--transition);}
.pagination-btn:hover {background-color: rgba(255, 255, 255, 0.2);}
.pagination-btn.active {background-color: var(--primary);}
.pagination-ellipsis {color: var(--gray);margin: 0 4px;font-weight: bold;}
/* ===== VIDEO DETAIL ===== */
.video-detail {display: none;animation: fadeIn 0.3s ease;}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.video-detail-header {margin-bottom: 24px;}
.video-detail-title {font-size: 28px;font-weight: 700;margin-bottom: 12px;line-height: 1.3;}
.video-detail-meta {display: flex;flex-wrap: wrap;gap: 16px;color: var(--gray);font-size: 14px;}
.video-detail-meta span {display: flex;align-items: center;}
.video-detail-meta i {margin-right: 6px;}
.video-detail-content {display: grid;grid-template-columns: 1fr;gap: 30px;}
.video-player {position: relative;width: 100%;border-radius: var(--border-radius-lg);overflow: hidden;box-shadow: var(--card-shadow);aspect-ratio: 16/9;cursor: pointer;}
.video-player img {width: 100%;height: 100%;object-fit: cover;}
.video-player .play-overlay {opacity: 1;background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);}
.video-details {background-color: var(--dark-light);border-radius: var(--border-radius-lg);padding: 24px;box-shadow: var(--shadow);}
.video-detail-info {display: flex;flex-direction: column;gap: 20px;}
.info-item {display: flex;flex-direction: column;gap: 8px;}
.info-label {font-weight: 600;color: var(--gray);font-size: 14px;}
.action-buttons {display: flex;gap: 16px;margin: 24px 0;}
.ads-item {margin:0 auto;text-align:center;max-width:100%;overflow:hidden}
.ads-item iframe{max-width:100%}
.btn {display: inline-flex;align-items: center;justify-content: center;padding: 12px 24px;border-radius: 6px;font-weight: 600;cursor: pointer;transition: var(--transition);border: none;font-size: 16px;;overflow:hidden}
.btn i {margin-right: 8px;}
.btn-primary {background-color: var(--primary);color: var(--white);text-decoration: none;}
.btn-primary:hover {background-color: var(--primary-hover);transform: translateY(-2px);}
.btn-secondary {background-color: rgba(255, 255, 255, 0.1);color: var(--white);}
.btn-secondary:hover {background-color: rgba(255, 255, 255, 0.2);transform: translateY(-2px);}
.btn-back {position: absolute;top: 16px;left: 16px;background-color: rgba(0, 0, 0, 0.6);color: var(--white);width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;border: none;cursor: pointer;transition: var(--transition);z-index: 10;padding: 0;}
.btn-back:hover {background-color: var(--primary);}
/* ===== SCROLL TO TOP BUTTON ===== */
.go-top-btn {position: fixed;bottom: 30px;right: 30px;width: 50px;height: 50px;border-radius: 50%;background-color: var(--primary);color: var(--white);border: none;display: flex;align-items: center;justify-content: center;cursor: pointer;opacity: 0;visibility: hidden;transition: var(--transition);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);z-index: 99;}
.go-top-btn.visible {opacity: 1;visibility: visible;}
.go-top-btn:hover {transform: translateY(-5px);background-color: var(--primary-hover);}
/* ===== RESPONSIVE STYLES ===== */
@media (min-width: 768px) {
.video-detail-content {grid-template-columns: 2fr 1fr;}
.section-title {font-size: 28px;}
.video-detail-title {font-size: 32px;}
}
@media (max-width: 767px) {
.header-content {flex-direction: column;gap: 16px;}
.search-bar {width: 100%;margin: 0;}
.section-title {font-size: 22px;}
.action-buttons {flex-direction: column;}
.btn {width: 100%;}
.pagination {gap: 10px;}
.pagination-btn {margin: 0;}
}
@media (max-width: 480px) {
.video-grid {grid-template-columns: 1fr;gap: 20px;}
.video-thumbnail {aspect-ratio: 16/10;}
.video-detail-title {font-size: 24px;}
.go-top-btn {right: 16px;bottom: 16px;width: 40px;height: 40px;}
}
/* ===== ADDITIONAL REFINEMENTS ===== */
/* Smooth page transitions */
.video-grid, .video-detail {transition: opacity 0.3s ease;}
/* Add hover effects to make UI more interactive */
input:focus, button:focus {outline: none;}
/* Improve accessibility */
@media (prefers-reduced-motion: reduce) {
* {transition: none !important;animation: none !important;}
}
/* Dark mode optimization */
@media (prefers-color-scheme: dark) {
:root {--primary: #e50914;--dark: #141414;}
}
/* Better mobile touch targets */
@media (max-width: 767px) {
.category-btn {padding: 12px 24px;}
.pagination-btn {min-width: 44px;height: 44px;}
}
/* Better font rendering on high-DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
body {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
}