/* ===================================
   PREMIUM MOBILE OPTIMIZATION STYLES
   For Weekend Wealth OS Workshop
   Black & Gold Premium Theme
   =================================== */

/* Base Mobile Styles (max-width: 768px) */
@media (max-width: 768px) {
    
    /* === TYPOGRAPHY === */
    .headline {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        padding: 0 15px !important;
    }
    
    .subheadline {
        font-size: 1rem !important;
        padding: 0 15px !important;
        line-height: 1.4 !important;
    }
    
    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.3rem !important; }
    
    .section-title {
        font-size: 1.8rem !important;
        padding: 0 10px !important;
        margin-bottom: 30px !important;
    }
    
    .pain-title { font-size: 1.5rem !important; }
    .promise-headline { font-size: 1.8rem !important; }
    .cta-headline { font-size: 2rem !important; }
    .stack-title { font-size: 1.8rem !important; }
    
    /* === LAYOUT & SPACING === */
    body { overflow-x: hidden !important; }
    
    .container {
        padding: 0 15px !important;
        max-width: 100% !important;
    }
    
    section {
        padding: 40px 0 !important;
    }
    
    /* === PREMIUM URGENT BANNER === */
    .urgent-banner {
        font-size: 0.75rem !important;
        padding: 12px 8px !important;
        text-align: center !important;
        letter-spacing: 0.5px !important;
        animation: goldShimmer 3s ease-in-out infinite !important;
    }
    
    .spots-left {
        display: block !important;
        margin-top: 5px !important;
        margin-left: 0 !important;
    }
    
    /* === PREMIUM HERO SECTION === */
    .hero {
        margin-top: 60px !important;
        padding: 50px 0 30px !important;
        background: radial-gradient(ellipse at top, rgba(255, 215, 0, 0.05) 0%, transparent 60%) !important;
    }
    
    /* Premium typography adjustments */
    .hero .headline {
        font-family: 'Playfair Display', serif !important;
        letter-spacing: -0.3px !important;
        background: linear-gradient(180deg, #FFFFFF 0%, #E8E8E8 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }
    
    .warning-badge {
        font-size: 0.7rem !important;
        padding: 10px 20px !important;
        margin-bottom: 25px !important;
        letter-spacing: 1px !important;
        animation: subtleFloat 4s ease-in-out infinite !important;
        backdrop-filter: blur(5px) !important;
    }
    
    .hero-stats {
        gap: 15px !important;
        flex-direction: column !important;
    }
    
    .stat {
        padding: 15px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border-radius: 10px !important;
        width: 100% !important;
    }
    
    .stat-number { font-size: 2rem !important; }
    .stat-label { font-size: 0.85rem !important; }
    
    /* === PAIN POINTS === */
    .pain-list {
        padding: 0 10px !important;
    }
    
    .pain-item {
        padding: 15px !important;
        font-size: 0.95rem !important;
        margin-bottom: 15px !important;
    }
    
    .pain-emoji {
        font-size: 1.2rem !important;
        margin-right: 10px !important;
    }
    
    /* === PREMIUM BIG PROMISE === */
    .big-promise {
        padding: 60px 0 !important;
        border-top: 1px solid rgba(255, 215, 0, 0.2) !important;
        border-bottom: 1px solid rgba(255, 215, 0, 0.2) !important;
    }
    
    .promise-headline {
        font-family: 'Playfair Display', serif !important;
        animation: goldShimmer 4s ease-in-out infinite !important;
    }
    
    .promise-text {
        font-size: 1.1rem !important;
        padding: 0 15px !important;
        font-weight: 300 !important;
        letter-spacing: 0.2px !important;
    }
    
    /* === SIDHANT BIO === */
    section div[style*="grid-template-columns: 1fr 2fr"] {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center !important;
    }
    
    /* === PROOF SECTION === */
    .proof-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    .proof-card {
        padding: 20px 10px !important;
    }
    
    .proof-number { font-size: 2rem !important; }
    .proof-label { font-size: 0.8rem !important; }
    
    /* === STORY SECTION === */
    .story-box {
        padding: 25px 15px !important;
        margin: 0 !important;
    }
    
    .story-text { font-size: 1rem !important; }
    .story-highlight {
        padding: 15px !important;
        font-size: 1rem !important;
        margin: 20px 0 !important;
    }
    
    /* === VALUE STACK === */
    .value-item {
        flex-direction: column !important;
        padding: 20px 15px !important;
        text-align: left !important;
    }
    
    .value-content {
        margin-bottom: 15px !important;
    }
    
    .value-name { font-size: 1.1rem !important; }
    .value-description { font-size: 0.9rem !important; }
    .value-benefit { font-size: 0.9rem !important; }
    
    .value-price {
        margin-top: 15px !important;
        text-align: left !important;
        min-width: auto !important;
    }
    
    .actual-value { font-size: 1.2rem !important; }
    .included { font-size: 1rem !important; }
    
    .total-value {
        padding: 20px !important;
        font-size: 1.1rem !important;
    }
    
    .total-amount { font-size: 2rem !important; }
    
    /* === PRICING SECTION === */
    div[style*="grid-template-columns: repeat(auto-fit, minmax(350px"] {
        grid-template-columns: 1fr !important;
    }
    
    div[style*="transform: scale(1.05)"] {
        transform: scale(1) !important;
        margin-top: 20px !important;
    }
    
    /* === TESTIMONIALS === */
    .testimonials-grid,
    .transform-grid {
        grid-template-columns: 1fr !important;
    }
    
    .testimonial-card {
        padding: 20px !important;
        margin-bottom: 20px !important;
    }
    
    .testimonial-text { font-size: 1rem !important; }
    .author-image {
        width: 50px !important;
        height: 50px !important;
    }
    
    /* === GUARANTEE === */
    .guarantee-box {
        padding: 30px 20px !important;
        margin: 0 10px !important;
    }
    
    .guarantee-title { font-size: 1.8rem !important; }
    .guarantee-text { font-size: 1rem !important; }
    .guarantee-badge { font-size: 3rem !important; }
    
    /* === SCARCITY/COUNTDOWN === */
    .scarcity-box {
        padding: 25px 15px !important;
    }
    
    .scarcity-title { font-size: 1.5rem !important; }
    
    .countdown-big {
        gap: 10px !important;
        flex-wrap: wrap !important;
    }
    
    .time-block {
        min-width: 75px !important;
        padding: 15px 10px !important;
    }
    
    .time-number { font-size: 2rem !important; }
    .time-unit { font-size: 0.8rem !important; }
    
    /* === FAQ === */
    .faq-item { margin-bottom: 15px !important; }
    
    .faq-question {
        padding: 18px 15px !important;
        font-size: 1rem !important;
    }
    
    .faq-icon { font-size: 1.2rem !important; }
    
    .faq-answer {
        padding: 0 15px !important;
    }
    
    .faq-answer.active {
        padding: 15px !important;
        max-height: 1000px !important;
    }
    
    .faq-answer p { font-size: 0.95rem !important; }
    
    /* === FINAL CTA === */
    .final-cta { padding: 60px 0 !important; }
    
    .price-box { margin: 30px 0 !important; }
    .old-price { font-size: 1.5rem !important; }
    .new-price { font-size: 2.5rem !important; }
    .savings { font-size: 0.9rem !important; }
    
    .cta-button-final {
        padding: 20px 35px !important;
        font-size: 1rem !important;
        width: 90% !important;
        margin: 25px auto !important;
        display: block !important;
        letter-spacing: 1.5px !important;
        font-weight: 600 !important;
        box-shadow: 
            0 4px 15px rgba(255, 215, 0, 0.3),
            0 8px 30px rgba(0, 0, 0, 0.2) !important;
    }
    
    .urgency-text { font-size: 1rem !important; }
    .payment-options { gap: 15px !important; }
    .payment-icon { font-size: 1.5rem !important; }
    
    /* === PS SECTION === */
    .ps-box {
        padding: 20px 15px !important;
        margin: 0 !important;
    }
    
    .ps-text { font-size: 0.95rem !important; }
    
    /* === STICKY CTA === */
    .sticky-cta {
        padding: 10px !important;
    }
    
    .sticky-button {
        padding: 14px 25px !important;
        font-size: 0.9rem !important;
        letter-spacing: 1.5px !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 215, 0, 0.4) !important;
    }
    
    /* === MODAL MOBILE === */
    .modal-content {
        margin: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        border: none !important;
    }
    
    .modal-header {
        position: sticky !important;
        top: 0 !important;
        background: linear-gradient(135deg, #1a0f2a 0%, #0a0a0a 100%) !important;
        z-index: 100 !important;
        padding: 20px !important;
    }
    
    .modal-body {
        padding: 20px !important;
        padding-bottom: 100px !important;
    }
    
    .close {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        right: 10px !important;
        top: 10px !important;
        font-size: 30px !important;
    }
    
    #submitBtn {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        padding: 20px !important;
        font-size: 1.1rem !important;
        z-index: 1000 !important;
        width: 100% !important;
    }
    
    /* Prevent iOS zoom on form inputs */
    input, select, textarea {
        font-size: 16px !important;
    }
    
    /* Form adjustments */
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* === EXTRA SMALL DEVICES (max-width: 375px) === */
@media (max-width: 375px) {
    .headline { font-size: 1.3rem !important; }
    .subheadline { font-size: 0.9rem !important; }
    
    .proof-grid {
        grid-template-columns: 1fr !important;
    }
    
    .time-block {
        min-width: 65px !important;
        padding: 12px 8px !important;
    }
    
    .time-number { font-size: 1.6rem !important; }
    
    .cta-button-final {
        font-size: 1rem !important;
        padding: 16px 20px !important;
    }
}

/* === LANDSCAPE MODE === */
@media (max-height: 500px) and (orientation: landscape) {
    .hero { padding: 20px 0 !important; }
    section { padding: 30px 0 !important; }
    .modal-content { height: 100vh !important; }
    .sticky-cta { display: none !important; }
}

/* === TOUCH DEVICE OPTIMIZATIONS === */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .cta-button-final,
    .sticky-button,
    button,
    a {
        min-height: 48px !important;
        touch-action: manipulation;
    }
    
    /* Remove hover effects on touch */
    .pain-item:hover,
    .transform-card:hover,
    .value-item:hover,
    .proof-card:hover,
    .feature-card:hover,
    .testimonial-card:hover,
    .faq-question:hover {
        transform: none !important;
        background: inherit !important;
    }
    
    /* Better scrolling */
    * {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Disable text selection on UI elements */
    .urgent-banner,
    .hero-badge,
    .warning-badge,
    .cta-button-final,
    .sticky-button {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
}

/* === PREMIUM MOBILE OPTIMIZATIONS === */
@media (max-width: 768px) {
    /* Premium animations optimized for mobile */
    @keyframes goldShimmer {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }
    
    @keyframes subtleFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-3px); }
    }
    
    /* Premium gradients and effects */
    body::before {
        background-image: 
            radial-gradient(circle at 20% 50%, rgba(255, 215, 0, 0.02) 0%, transparent 50%) !important;
    }
    
    /* Optimize premium cards */
    .proof-card::before,
    .pain-item::before,
    .cta-button-final::before {
        display: none !important; /* Disable complex hover animations on mobile */
    }
    
    /* Simplified shadows for performance */
    .proof-card,
    .pain-item,
    .value-item {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
    }
    
    /* Premium font adjustments */
    .highlight-gold::after {
        animation: none !important; /* Disable underline animation on mobile */
        transform: scaleX(1) !important;
        height: 1px !important;
    }
}

/* === PERFORMANCE OPTIMIZATIONS === */
@media (max-width: 768px) {
    /* Reduce animations on mobile for better performance */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    
    /* Optimize images and gradients */
    .hero-section,
    .big-promise,
    .final-cta {
        background-attachment: scroll !important;
    }
}

/* === ACCESSIBILITY === */
@media (max-width: 768px) {
    /* Better focus indicators */
    *:focus {
        outline: 3px solid #FFD700 !important;
        outline-offset: 2px !important;
    }
    
    /* Skip to content link */
    .skip-to-content {
        position: absolute;
        left: -9999px;
        z-index: 9999;
    }
    
    .skip-to-content:focus {
        position: fixed;
        top: 0;
        left: 0;
        background: #FFD700;
        color: #000;
        padding: 15px;
        text-decoration: none;
        font-weight: bold;
    }
}