/**
 * IPTV Pro - Main Stylesheet
 * Combined from all templates with MOBILE COMPATIBILITY
 * 
 * @package IPTV_Pro
 * @version 1.2.0 - CLEANED
 */

/* ============================================
   CSS VARIABLES & COLORS
   ============================================ */
:root {
    --iptv-green: #7fa409;
    --iptv-green-dark: #6b8507;
    --iptv-green-light: #9bb50b;
}

/* ============================================
   GLOBAL STYLES
   ============================================ */
body {
    overflow-x: hidden;
}

/* ============================================
   HEADER / NAVIGATION STYLES
   ============================================ */
.nav-link {
    position: relative;
    transition: all 0.3s ease;
}

.nav-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.dropdown-toggle::after {
    content: ' ▼';
    font-size: 0.8rem;
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.dropdown:hover .dropdown-toggle::after {
    transform: rotate(180deg);
}

/* Mobile menu animations */
.mobile-menu {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.mobile-dropdown.active {
    max-height: 500px;
}

/* Mobile toggle icon switching */
.mobile-toggle .hamburger-icon,
.mobile-toggle .close-icon {
    transition: all 0.3s ease;
}

.mobile-toggle.active .hamburger-icon {
    display: none;
}

.mobile-toggle.active .close-icon {
    display: inline !important;
}

/* Prevent body scroll when mobile menu is open */
body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* ============================================
   FOOTER STYLES
   ============================================ */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(127, 164, 9, 0.15);
}

.social-icon {
    transition: all 0.3s ease;
}

.social-icon:hover {
    background-color: #7fa409;
}

.gradient-text {
    background: linear-gradient(135deg, #7fa409 0%, #9bb50b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-link {
    position: relative;
    transition: color 0.3s ease;
}

.footer-link::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: #7fa409;
    transition: width 0.3s ease;
}

.footer-link:hover::after {
    width: 100%;
}

.newsletter-input:focus,
.newsletter-input-lg:focus {
    box-shadow: 0 0 0 3px rgba(127, 164, 9, 0.1);
    border-color: #7fa409;
}

.bg-pattern {
    background-image: radial-gradient(
            circle at 20% 80%,
            rgba(127, 164, 9, 0.05) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 80% 20%,
            rgba(127, 164, 9, 0.05) 0%,
            transparent 50%
        );
}

/* ============================================
   HOMEPAGE / LANDING PAGE STYLES
   ============================================ */
.hero-bg {
    background-image: 
        linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.9) 100%), 
        url('https://cdn.jsdelivr.net/gh/ChaosAfterParty/email_models@main/iptv/assets/bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ============================================
   MARQUEE STYLES (using <marquee> tag)
   ============================================ */
.hero-logo-white {
    filter: brightness(0) invert(1);
}

.hero-logo-white:hover {
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(127, 164, 9, 0.5));
}

/* Pause marquee on hover */
marquee:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

/* ============================================
   PRICING & TABS
   ============================================ */
.pricing-tab { 
    color: #6b7280; 
}

.pricing-tab.active { 
    background-color: #7fa409; 
    color: white; 
}

.tab-content { 
    display: none; 
}

.tab-content.active { 
    display: block; 
}

/* ============================================
   FAQ SECTION
   ============================================ */
.faq-question {
    border: none !important;
    border-bottom: none !important;
    outline: none !important;
}

.faq-question:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.faq-item.active .faq-question {
    border-bottom: none !important;
    border: none !important;
    margin-bottom: 0;
    padding-bottom: 1rem;
}

.faq-answer {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.faq-item.active .faq-answer {
    padding-top: 0;
    margin-top: 0;
}

.faq-item.active .faq-icon { 
    transform: rotate(45deg); 
}

/* ============================================
   FEATURE & PRICE CARDS
   ============================================ */
.feature-card { 
    transition: all 0.3s ease; 
}

.feature-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 20px 40px rgba(127, 164, 9, 0.1); 
}

.price-card { 
    transition: all 0.3s ease; 
}

.price-card:hover { 
    transform: translateY(-5px); 
    border-color: #7fa409; 
}

.price-card.popular { 
    border: 2px solid #7fa409; 
    transform: scale(1.05); 
}

/* ============================================
   REVIEWS CAROUSEL
   ============================================ */
.scrollbar-hide { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

.scrollbar-hide::-webkit-scrollbar { 
    display: none; 
}

#reviewsCarousel { 
    scroll-snap-type: x mandatory; 
    -webkit-overflow-scrolling: touch; 
}

#reviewsCarousel::-webkit-scrollbar { 
    display: none; 
}

.carousel-nav-btn {
    transition: background-color 0.3s ease, opacity 0.3s ease;
    position: absolute;
    z-index: 30;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.carousel-nav-btn:hover {
    background-color: #7fa409;
    opacity: 1;
}

.carousel-nav-btn:active {
    opacity: 0.8;
    background-color: #6b8507;
}

@media (max-width: 640px) {
    .carousel-nav-btn {
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
}

/* ============================================
   ABOUT PAGE STYLES
   ============================================ */
.timeline-item {
    transition: all 0.3s ease;
}

.timeline-item:hover {
    transform: scale(1.02);
}

.value-card {
    transition: all 0.3s ease;
}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(127, 164, 9, 0.1);
}

/* ============================================
   SHARED ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* ============================================
   IPTV GREEN COLOR UTILITIES
   ============================================ */
.bg-iptv-green {
    background-color: #7fa409;
}

.bg-iptv-green:hover,
.bg-iptv-green-dark:hover {
    background-color: #6b8507;
}

.text-iptv-green {
    color: #7fa409;
}

.focus\:ring-iptv-green\/20:focus {
    --tw-ring-color: rgba(127, 164, 9, 0.2);
}

.focus\:border-iptv-green:focus {
    border-color: #7fa409;
}

.hover\:border-iptv-green:hover {
    border-color: #7fa409;
}

.hover\:bg-iptv-green\/10:hover {
    background-color: rgba(127, 164, 9, 0.1);
}

.group:hover .group-hover\:bg-iptv-green\/20 {
    background-color: rgba(127, 164, 9, 0.2);
}

.group:hover .group-hover\:text-iptv-green {
    color: #7fa409;
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */
@media (max-width: 768px) {
    html {
        scroll-behavior: smooth;
    }
    
    * {
        -webkit-tap-highlight-color: transparent;
    }
}

@media (min-width: 768px) {
    .hover-lift:hover {
        transform: translateY(-4px);
    }
}


/* ============================================
   ABOUT PAGE HOVER ANIMATIONS
   ============================================ */

/* Premium Streaming card */
.premium-streaming-card {
    transition: all 0.3s ease;
}

.premium-streaming-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(127, 164, 9, 0.15);
}

/* Achievement cards */
.achievement-card {
    transition: all 0.3s ease;
}

.achievement-card:hover {
    transform: translateY(-5px) scale(1.05);
}

/* ============================================
   CONTACT PAGE STYLES
   ============================================ */

/* Contact cards - hover effect and flex layout */
.contact-card {
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(127, 164, 9, 0.1);
}

/* Form input focus state */
.form-input:focus {
    box-shadow: 0 0 0 3px rgba(127, 164, 9, 0.1);
    border-color: #7fa409;
}

/* Card content flex layout - keeps button at bottom */
.card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-content .button-container {
    margin-top: auto;
}
/* ============================================
   INSTALLATION GUIDE PAGE STYLES
   ============================================ */

/* Device Cards */
.device-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 2px solid transparent;
}

.device-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(127, 164, 9, 0.15);
    border-color: rgba(127, 164, 9, 0.2);
}

.device-card.active {
    border-color: #7fa409;
    background: linear-gradient(135deg, #7fa409 0%, #6b8507 100%);
    color: white;
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(127, 164, 9, 0.25);
}

.device-card.active .device-icon {
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.device-card.active .material-icons {
    color: white;
}

.device-card.active h3,
.device-card.active p {
    color: white;
}

/* Content Sections */
.content-section {
    display: none;
    animation: fadeInContent 0.5s ease-in-out;
}

.content-section.active {
    display: block;
}

@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Step Cards */
.step-card {
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.step-card:hover {
    transform: scale(1.02);
    border-color: #7fa409;
    box-shadow: 0 10px 25px -5px rgba(127, 164, 9, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .device-card {
        padding: 1rem;
    }
    
    .device-card:hover,
    .device-card.active {
        transform: translateY(-4px);
    }
}

/* Focus States */
.device-card:focus,
.device-card:focus-visible {
    outline: 2px solid #7fa409;
    outline-offset: 2px;
}