/* Body Layout */
body#layout {padding:10px;max-width:100%}
body#layout .navbar,body#layout .container,body#layout footer{display:none;visibility:hidden}
/* Netflix-Style CSS for AVDBAPI Video Site */
:root {--primary-bg: #141414;
--secondary-bg: #181818;
--hover-bg: #232323;
--text-primary: #ffffff;
--text-secondary: #b3b3b3;
--accent-red: #e50914;
--accent-hover: #f40612;
--card-bg: #232323;
--border-color: #333333;
--card-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
--transition-speed: 0.3s;}
body {background-color: var(--primary-bg);color: var(--text-primary);font-family: 'Roboto', Arial, sans-serif;margin: 0;padding: 0;line-height: 1.5;}
/* Navbar Styling */
nav.navbar {background-color: var(--primary-bg);padding: 1rem 0;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);position: sticky;top: 0;z-index: 1000;transition: background-color 0.3s ease;}
nav.navbar.scrolled {background-color: rgba(0, 0, 0, 0.9);}
.navbar-brand {color: var(--accent-red) !important;font-size: 1.5rem;font-weight: bold;transition: transform var(--transition-speed);}
.navbar-brand:hover {transform: scale(1.05);}
.navbar-dark .navbar-nav .nav-link {color: var(--text-secondary);font-weight: 500;transition: color var(--transition-speed);padding: 0.5rem 1rem;margin: 0 0.25rem;border-radius: 4px;}
.navbar-dark .navbar-nav .nav-link:hover,.navbar-dark .navbar-nav .nav-link.active {color: var(--text-primary);background-color: rgba(255, 255, 255, 0.1);}
.navbar-dark .navbar-toggler {border-color: rgba(255, 255, 255, 0.2);}
.search-box {position: relative;width: 140px;max-width: 100%;}
.search-box .form-control {background-color: rgba(255, 255, 255, 0.2);border: none;color: var(--text-primary);padding-right: 40px;transition: background-color var(--transition-speed);border-radius: 4px;}
.search-box .form-control:focus {background-color: rgba(255, 255, 255, 0.3);box-shadow: none;}
.search-box .btn {position: absolute;right: 0;top: 0;border: none;background: transparent;}
.search-box .btn:hover {color: var(--accent-red);}
/* Content Wrapper */
.content-wrapper {padding-top: 20px;padding-bottom: 60px;min-height: calc(100vh - 180px);}
/* Section Titles */
.section-title {color: var(--text-primary);margin-bottom: 1.5rem;font-weight: 600;display: flex;align-items: center;}
.section-title i {color: var(--accent-red);}
/* Video Cards */
.video-card {background-color: var(--card-bg);border-radius: 4px;overflow: hidden;cursor: pointer;position: relative;transition: transform var(--transition-speed), box-shadow var(--transition-speed);box-shadow: var(--card-shadow);height: 100%;display: flex;flex-direction: column;}
.video-card:hover {transform: translateY(-5px) scale(1.02);box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);z-index: 10;}
.video-thumbnail {width: 100%;aspect-ratio: 2/3;object-fit: cover;transition: opacity var(--transition-speed);}
.video-card:hover .video-thumbnail {opacity: 0.7;}
.card-body {padding: 0.875rem;flex-grow: 1;display: flex;flex-direction: column;}
.card-title {margin-bottom: 0.5rem;font-size: 0.9rem;line-height: 1.4;font-weight: 500;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;flex-grow: 1;}
.card-title a {color: var(--text-primary);text-decoration: none !important;}
.card-title a:hover {color: var(--accent-red);}
.badge {background-color: var(--accent-red);font-weight: 500;padding: 0.35em 0.65em;}
/* Video Player Section */
.player-section {background-color: var(--secondary-bg);border-radius: 6px;overflow: hidden;box-shadow: var(--card-shadow);}
.player-container {width: 100%;background-color: black;}
.video-info {padding: 1.5rem;}
.video-info h1 {font-size: 1.5rem;margin-bottom: 0.75rem;font-weight: 600;}
/* Details Card */
.details-card {background-color: var(--card-bg);border-radius: 6px;overflow: hidden;margin-bottom: 1.5rem;box-shadow: var(--card-shadow);border: 1px solid var(--border-color);}
.details-card .card-header {padding: 1rem 1.25rem;background-color: var(--secondary-bg);border-bottom: 1px solid var(--border-color);font-weight: 600;}
.details-card .card-body {padding: 1.25rem;}
.details-card .list-group-item {background-color: var(--card-bg);border-color: var(--border-color);color: var(--text-secondary);padding: 0.75rem 1.25rem;}
.details-card .list-group-item strong {color: var(--text-primary);margin-right: 0.5rem;}
/* Cover Image */
.cover-image {width: 100%;border-radius: 6px;box-shadow: var(--card-shadow);}
/* Download Links */
.btn-outline-primary {color: var(--text-primary);border-color: var(--accent-red);background: transparent;transition: all var(--transition-speed);}
.btn-outline-primary:hover, .btn-outline-primary:focus {background-color: var(--accent-red);border-color: var(--accent-red);color: white;transform: translateY(-2px);}
/* Pagination */
.pagination {margin-top: 2rem;}
.pagination .page-link {color: var(--text-primary);background-color: var(--card-bg);border-color: var(--border-color);margin: 0 3px;border-radius: 4px;transition: all var(--transition-speed);}
.pagination .page-link:hover {background-color: var(--hover-bg);color: var(--text-primary);border-color: var(--border-color);}
.pagination .page-item.active .page-link {background-color: var(--accent-red);border-color: var(--accent-red);}
.pagination .page-item.disabled .page-link {color: var(--text-secondary);background-color: var(--secondary-bg);border-color: var(--border-color);}
/* Footer */
footer {background-color: var(--secondary-bg);padding: 2rem 0;margin-top: 2rem;border-top: 1px solid var(--border-color);}
footer h5 {color: var(--text-primary);margin-bottom: 1rem;}
footer h5 i {color: var(--accent-red);}
/* Alert Styling */
.alert {border-radius: 4px;padding: 1rem 1.25rem;margin-bottom: 1.5rem;border: none;}
.alert-secondary {background-color: var(--secondary-bg);color: var(--text-secondary);border: 1px solid var(--border-color);}
.alert-info {background-color: rgba(13, 202, 240, 0.15);color: #8be0f9;}
.alert-danger {background-color: rgba(229, 9, 20, 0.15);color: #ff6b78;}
.alert-warning {background-color: rgba(255, 193, 7, 0.15);color: #ffd24d;}
/* Play Button Overlay */
.video-card a .position-absolute {background-color: rgba(229, 9, 20, 0.9) !important;color: white;transition: all var(--transition-speed);}
.video-card:hover a .position-absolute {background-color: var(--accent-red) !important;transform: scale(1.1);}
/* Responsive Adjustments */
@media (max-width: 991.98px) {.navbar-collapse {background-color: var(--secondary-bg);padding: 1rem;border-radius: 0 0 8px 8px;margin-top: 0.5rem;box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);}
.search-box {width: 100%;margin: 1rem 0;}
.video-info h1 {font-size: 1.25rem;}
}
@media (max-width: 767.98px) {.col-6 {padding-left: 8px;padding-right: 8px;}
.row {margin-left: -8px;margin-right: -8px;}
.video-card {margin-bottom: 16px;}
.card-body {padding: 0.6rem;}
.card-title {font-size: 0.8rem;}
.section-title {font-size: 1.25rem;}
}
@media (max-width: 575.98px) {.video-info {padding: 1rem;}
.player-section, .details-card {border-radius: 0;}
.content-wrapper {padding-left: 8px;padding-right: 8px;}
.container {padding-left: 12px;padding-right: 12px;}
}
/* Hover Effects */
.navbar-brand i, .section-title i,.details-card .card-header i {transition: transform var(--transition-speed);}
.navbar-brand:hover i, .section-title:hover i,.details-card .card-header:hover i {transform: rotate(10deg);}
/* Custom Scrollbar */
::-webkit-scrollbar {width: 8px;height: 8px;}
::-webkit-scrollbar-track {background: var(--primary-bg);}
::-webkit-scrollbar-thumb {background: var(--border-color);border-radius: 4px;}
::-webkit-scrollbar-thumb:hover {background: var(--accent-red);}
/* Video Hover Animation */
@keyframes pulse {0% {transform: scale(1);}
50% {transform: scale(1.05);}
100% {transform: scale(1);}
}
.video-card:hover .position-absolute i {animation: pulse 1s infinite;}
/* Fade-in animation for page load */
@keyframes fadeIn {from {opacity: 0;transform: translateY(20px);}
to {opacity: 1;transform: translateY(0);}
}
.video-card, .player-section, .details-card {animation: fadeIn 0.5s ease-out forwards;}
 #loading {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: var(--primary-bg);display: flex;justify-content: center;align-items: center;z-index: 9999;}
.spinner {width: 40px;height: 40px;border: 4px solid rgba(255, 255, 255, 0.1);border-radius: 50%;border-top-color: var(--accent-red);animation: spin 1s ease-in-out infinite;}
@keyframes spin {0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}