/* Desktop CSS - LiveNow Cyprus Website */
/* This file contains desktop-specific styles (768px and above) */
/* Mobile CSS remains in mobile.css and should not be modified */

/* Desktop screens (768px and above) */
@media (min-width: 768px) {
    .container {
        max-width: 600px;
        margin: 0 auto;
        padding: 0 var(--space-8);
    }
    
    .hero-content {
        padding: var(--space-24) var(--space-8);
    }
    
    .hero-title {
        font-size: var(--font-size-5xl);
        line-height: 1.1;
    }
    
    .hero-subtitle {
        font-size: var(--font-size-xl);
        margin-bottom: var(--space-8);
    }
    
    .section {
        padding: var(--space-20) 0;
    }
    
    .section-title {
        font-size: var(--font-size-4xl);
        margin-bottom: var(--space-12);
    }
    
    .section-subtitle {
        font-size: var(--font-size-lg);
        max-width: 800px;
        margin: 0 auto var(--space-16) auto;
    }
    
    /* Dual Showcase Section Background */
    .dual-showcase {
        position: relative;
        overflow: hidden;
    }
    
    .dual-showcase::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('attached_assets/2151049492_1751103106240.jpg');
        background-size: cover;
        background-position: center;
        filter: blur(10px);
        opacity: 0.35;
        z-index: -2;
    }
    
    .dual-showcase::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0, 204, 204, 0.35) 0%, rgba(0, 139, 139, 0.35) 100%);
        z-index: -1;
    }
    
    /* Annual Travel Pass Section Background */
    .showcase-option.travel {
        position: relative;
        overflow: hidden;
    }
    
    .showcase-option.travel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('attached_assets/2151049492_1751103106240.jpg');
        background-size: cover;
        background-position: center;
        filter: blur(10px);
        opacity: 0.35;
        z-index: -2;
    }
    
    .showcase-option.travel::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0, 204, 204, 0.35) 0%, rgba(0, 139, 139, 0.35) 100%);
        z-index: -1;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-12);
    }
    
    .steps-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-8);
    }
    
    .showcase-options {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8);
        max-width: 600px;
    }
    
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-8);
    }
    
    .success-stories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8);
    }
    
    .cta-buttons {
        flex-direction: row;
        justify-content: center;
        gap: var(--space-6);
    }
    
    .footer-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }
    
    /* Desktop Promotional Bar Optimization */
    .promotional-bar {
        padding: var(--space-4) var(--space-8);
    }
    
    .promo-content {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--space-6);
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .promo-logo {
        margin-bottom: 0;
    }
    
    .promo-btn {
        min-height: 56px;
        padding: var(--space-4) var(--space-8);
        font-size: var(--font-size-lg);
        white-space: nowrap;
        animation: none !important;
    }
    
    /* Desktop Footer Optimization */
    .footer {
        padding-bottom: var(--space-24);
    }
    
    .footer-content {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .footer-logo {
        margin-bottom: var(--space-6);
    }
    
    .social-links {
        gap: var(--space-4);
    }
    
    .footer-links {
        gap: var(--space-8);
    }
    
    /* Typography Scaling */
    .hero-title {
        font-size: clamp(3rem, 5vw, 4rem);
        line-height: 1.1;
    }
    
    .section-title {
        font-size: clamp(2.5rem, 4vw, 3.5rem);
    }
    
    .feature-card h3 {
        font-size: var(--font-size-2xl);
    }
    
    .testimonial-content {
        font-size: var(--font-size-lg);
    }
    
    .success-stories-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .steps-container {
        max-width: 600px;
        margin: 0 auto;
    }
    
    .about-livenow .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        max-width: 900px;
        margin: 0 auto;
    }
    
    .about-image {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: var(--space-8);
    }
    
    .about-livenow .section-header {
        margin-bottom: var(--space-12);
    }
    
    .about-content {
        margin-bottom: var(--space-12);
    }
    
    .about-text {
        text-align: center;
    }
    
    .section-content {
        max-width: 600px;
        margin: 0 auto var(--space-8) auto;
    }
    
    .about-image img {
        max-width: 400px;
        height: auto;
        border-radius: var(--radius-lg);
    }
    
    .about-stats {
        display: flex;
        gap: var(--space-8);
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .stat-item {
        text-align: center;
        min-width: 120px;
    }


 
    .benefit-item {
        text-align: center;
        min-width: 120px;
        max-width: 600px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
    }
    
    .travel-benefits {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-8);
    }
    
    .stats-grid {
        max-width: 800px;
        margin: 0 auto;
    }
    
    .premium-section .section-title {
        font-size: var(--font-size-4xl);
    }

    /* Footer Desktop Styling */
    .footer {
        padding: var(--space-16) 0 140px 0;
    }
    
    .footer-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-12);
        max-width: 600px;
        margin: 0 auto;
        text-align: center;
    }
    
    .footer-logo {
        order: 1;
        margin-bottom: var(--space-4);
    }
    
    .footer-logo img {
        height: 80px;
        width: auto;
    }
    
    .footer-legal {
        order: 2;
        margin-bottom: var(--space-4);
    }
    
    .footer-social {
        order: 3;
        margin-bottom: var(--space-4);
    }
    
    .social-links {
        display: flex;
        gap: var(--space-6);
        justify-content: center;
    }
    
    .social-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background: rgba(0, 204, 204, 0.1);
        border-radius: 50%;
        transition: all 0.3s ease;
    }
    
    .social-link:hover {
        background: var(--primary);
        color: white;
        transform: translateY(-2px);
    }
    
    .footer-links {
        display: flex;
        gap: var(--space-8);
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .footer-link {
        color: var(--text-muted);
        text-decoration: none;
        font-size: 0.9rem;
        transition: color 0.3s ease;
    }
    
    .footer-link:hover {
        color: var(--primary);
    }
    
    .footer-copyright {
        order: 4;
        color: var(--text-muted);
        font-size: 0.85rem;
        border-top: 1px solid rgba(0, 204, 204, 0.1);
        padding-top: var(--space-6);
        width: 100%;
    }
    
    /* Promotional Bar Desktop Adjustments */
    .promo-logo-img {
        height: 40px !important;
        width: auto !important;
        object-fit: contain !important;
        max-width: none !important;
        aspect-ratio: auto !important;
    }
    
    .promo-logo {
        flex-shrink: 0;
    }
    
    /* Showcase Benefits Desktop Alignment */
    .showcase-benefits {
        text-align: center;
    }
    
    .showcase-benefits h4 {
        text-align: center;
    }
    
    .showcase-benefits ul {
        display: inline-block;
        text-align: left;
    }
    
    /* Testimonials Container Desktop Auto Width */
    .testimonials-container {
        max-width: none;
        width: auto;
        padding: 0 var(--space-8);
    }
}