/* Live TV Streaming Platform - Custom Styles */

/* Glass Morphism Effects */
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
}

.glass-nav {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Navigation Links */
.nav-link {
    @apply text-gray-300 hover:text-white transition-colors duration-200 font-medium;
}

/* Buttons */
.btn-primary {
    @apply bg-gradient-to-r from-primary to-emerald-600 hover:from-emerald-600 hover:to-primary text-white font-semibold px-6 py-2.5 rounded-lg transition-all duration-300 shadow-lg shadow-primary/30 hover:shadow-primary/50 hover:scale-105;
}

.btn-secondary {
    @apply bg-white/10 hover:bg-white/20 text-white font-semibold px-6 py-2.5 rounded-lg transition-all duration-300 border border-white/20;
}

/* Input Fields */
.input-field {
    @apply w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition;
}

/* Modal Styles - CENTERED */
.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
}

.modal.active {
    display: flex !important;
}

.modal-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.modal-content {
    position: relative !important;
    z-index: 10 !important;
    animation: modal-in 0.3s ease-out;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-modal-in {
    animation: modal-in 0.3s ease-out;
}

/* Error & Success Messages */
.error-message {
    @apply bg-red-500/20 border border-red-500/50 text-red-300 px-4 py-3 rounded-lg text-sm;
}

.success-message {
    @apply bg-green-500/20 border border-green-500/50 text-green-300 px-4 py-3 rounded-lg text-sm;
}

/* Dooplay-Style Slider */
.slider-container {
    @apply relative overflow-hidden rounded-2xl;
    height: 500px;
}

@media (max-width: 768px) {
    .slider-container {
        height: 300px;
    }
}

.slider-slide {
    @apply absolute inset-0 opacity-0 transition-opacity duration-700 ease-in-out;
}

.slider-slide.active {
    @apply opacity-100;
}

.slider-slide img {
    @apply w-full h-full object-cover;
}

.slider-overlay {
    @apply absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent;
}

.slider-content {
    @apply absolute bottom-0 left-0 right-0 p-8 md:p-12;
}

.slider-dots {
    @apply absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2 z-10;
}

.slider-dot {
    @apply w-2 h-2 rounded-full bg-white/30 cursor-pointer transition-all duration-300 hover:bg-white/50;
}

.slider-dot.active {
    @apply w-8 bg-primary;
}

.slider-arrow {
    @apply absolute top-1/2 transform -translate-y-1/2 w-12 h-12 bg-black/50 hover:bg-black/70 backdrop-blur-sm rounded-full flex items-center justify-center text-white cursor-pointer transition-all duration-300 z-10 border border-white/20;
}

.slider-arrow:hover {
    @apply scale-110 border-primary;
}

.slider-arrow-left {
    @apply left-4;
}

.slider-arrow-right {
    @apply right-4;
}

/* Channel Cards */
.channel-card {
    @apply glass-card hover:bg-white/10 transition-all duration-300 cursor-pointer group overflow-hidden;
}

.channel-card:hover {
    @apply transform scale-105 shadow-2xl shadow-primary/20;
}

.channel-logo {
    @apply w-full aspect-square object-cover rounded-lg mb-4 group-hover:scale-110 transition-transform duration-300;
}

.premium-badge {
    @apply absolute top-2 right-2 bg-gradient-to-r from-yellow-500 to-orange-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg;
}

.live-badge {
    @apply absolute top-2 left-2 bg-red-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg animate-pulse;
}

/* Player Container */
.player-container {
    @apply relative w-full bg-black rounded-2xl overflow-hidden;
    aspect-ratio: 16/9;
}

.player-overlay {
    @apply absolute inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm cursor-pointer transition-opacity duration-300;
}

.player-overlay:hover {
    @apply bg-black/30;
}

.play-button {
    @apply w-20 h-20 bg-primary rounded-full flex items-center justify-center text-white text-3xl shadow-2xl shadow-primary/50 transition-transform duration-300 hover:scale-110;
}

/* Loading Spinner */
.spinner {
    @apply inline-block w-6 h-6 border-4 border-white/30 border-t-primary rounded-full animate-spin;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
    background: rgba(16, 185, 129, 0.5);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(16, 185, 129, 0.7);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-left {
    animation: slideInLeft 0.6s ease-out;
}

/* Category Pills */
.category-pill {
    @apply px-4 py-2 rounded-full bg-white/5 hover:bg-primary/20 border border-white/10 hover:border-primary transition-all duration-300 cursor-pointer text-sm font-medium;
}

.category-pill.active {
    @apply bg-primary border-primary;
}

/* Responsive Utilities */
@media (max-width: 640px) {
    .glass-card {
        padding: 1rem;
    }

    .slider-content {
        padding: 1.5rem;
    }
}