/* ===== MOBILE BUTTON & CARD FIX ===== */
/* Comprehensive mobile layout fixes for buttons and cards */

/* ===== GLOBAL MOBILE TEXT CENTERING ===== */
@media (max-width: 768px) {
    /* Force center all buttons */
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-ghost,
    .btn-large,
    button,
    .cta-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
    
    /* Button text centering */
    .btn-primary span,
    .btn-secondary span,
    .btn-large span,
    .cta-button span,
    button span {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        line-height: 1.4 !important;
    }
    
    /* Card text centering and sizing */
    .glass-card,
    .feature-card,
    .pricing-card,
    .testimonial-card,
    .industry-card,
    .solution-card,
    .card {
        text-align: center !important;
        padding: 24px 20px !important;
    }
    
    /* Card titles */
    .glass-card h3,
    .glass-card h4,
    .feature-card h3,
    .feature-card h4,
    .pricing-card h3,
    .card h3,
    .card h4 {
        text-align: center !important;
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }
    
    /* Card descriptions */
    .glass-card p,
    .feature-card p,
    .pricing-card p,
    .card p {
        text-align: center !important;
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin: 12px auto !important;
        max-width: 90% !important;
    }
    
    /* Card icons - center them */
    .glass-card i,
    .glass-card svg,
    .feature-card i,
    .feature-card svg,
    .card i,
    .card svg {
        display: block !important;
        margin: 0 auto 16px auto !important;
        text-align: center !important;
    }
}

/* ===== SPECIFIC BUTTON FIXES ===== */
@media (max-width: 768px) {
    /* Hero buttons */
    .hero-cta .btn-large,
    .hero-demo-btn,
    .hero .btn-primary {
        width: 100% !important;
        max-width: 320px !important;
        min-height: 56px !important;
        padding: 16px 24px !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
    }
    
    /* CTA buttons */
    .demo-cta .btn-large,
    .cta-section .btn-large,
    #calculateCTA {
        width: 100% !important;
        max-width: 320px !important;
        min-height: 54px !important;
        padding: 14px 24px !important;
        font-size: 0.95rem !important;
    }
    
    /* Pricing buttons */
    .pricing-card .btn-primary,
    .plan-button {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 20px !important;
        font-size: 1rem !important;
        margin: 16px 0 !important;
    }
    
    /* Get Started buttons */
    .get-started-btn,
    .start-trial-btn {
        width: 100% !important;
        max-width: 300px !important;
        padding: 16px 24px !important;
        font-size: 1rem !important;
    }
}

/* ===== CARD LAYOUT FIXES ===== */
@media (max-width: 768px) {
    /* Feature cards grid */
    .features-grid,
    .feature-cards,
    .solutions-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        padding: 0 16px !important;
    }
    
    /* Individual cards */
    .feature-card,
    .solution-card,
    .benefit-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 24px auto !important;
    }
    
    /* Industry cards */
    .industry-card {
        width: 100% !important;
        padding: 24px 20px !important;
        text-align: center !important;
    }
    
    .industry-card h3 {
        font-size: 1.2rem !important;
        text-align: center !important;
        margin: 16px 0 12px 0 !important;
    }
    
    .industry-card p {
        font-size: 0.9rem !important;
        text-align: center !important;
        line-height: 1.5 !important;
    }
    
    /* Pricing cards */
    .pricing-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
        padding: 0 16px !important;
    }
    
    .pricing-card {
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }
    
    /* Testimonial cards */
    .testimonial-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 28px 24px !important;
        text-align: center !important;
    }
    
    .testimonial-card p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        text-align: center !important;
    }
    
    .testimonial-author {
        text-align: center !important;
        margin-top: 20px !important;
    }
}

/* ===== SECTION TITLE FIXES ===== */
@media (max-width: 768px) {
    /* Section headers */
    .section-title,
    .section-header h2,
    h2.section-title {
        font-size: 1.8rem !important;
        text-align: center !important;
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
        padding: 0 20px !important;
    }
    
    .section-subtitle,
    .section-header p {
        font-size: 1rem !important;
        text-align: center !important;
        line-height: 1.5 !important;
        margin: 0 auto 32px auto !important;
        padding: 0 20px !important;
        max-width: 90% !important;
    }
}

/* ===== EXTRA SMALL MOBILE (320px - 480px) ===== */
@media (max-width: 480px) {
    /* Smaller buttons */
    .btn-large,
    .hero-demo-btn,
    .demo-cta .btn-large {
        max-width: 280px !important;
        min-height: 52px !important;
        padding: 14px 20px !important;
        font-size: 0.9rem !important;
    }
    
    .btn-large span {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }
    
    /* Card padding reduction */
    .glass-card,
    .feature-card,
    .pricing-card,
    .card {
        padding: 20px 16px !important;
    }
    
    /* Card titles smaller */
    .glass-card h3,
    .feature-card h3,
    .pricing-card h3,
    .card h3 {
        font-size: 1.1rem !important;
    }
    
    /* Card text smaller */
    .glass-card p,
    .feature-card p,
    .card p {
        font-size: 0.875rem !important;
    }
    
    /* Section titles smaller */
    .section-title,
    .section-header h2 {
        font-size: 1.6rem !important;
        padding: 0 16px !important;
    }
    
    .section-subtitle {
        font-size: 0.9rem !important;
        padding: 0 16px !important;
    }
}

/* ===== LIST ITEMS IN CARDS ===== */
@media (max-width: 768px) {
    /* Feature lists */
    .feature-list,
    .benefits-list,
    .pricing-features {
        text-align: left !important;
        padding-left: 20px !important;
        margin: 16px 0 !important;
    }
    
    .feature-list li,
    .benefits-list li,
    .pricing-features li {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        margin-bottom: 12px !important;
        text-align: left !important;
        padding-left: 8px !important;
    }
    
    /* If lists should be centered */
    .pricing-card .feature-list,
    .plan-features {
        text-align: center !important;
        padding-left: 0 !important;
        list-style: none !important;
    }
    
    .pricing-card .feature-list li,
    .plan-features li {
        text-align: center !important;
        padding-left: 0 !important;
        margin: 10px auto !important;
    }
}

/* ===== ICON SIZING ===== */
@media (max-width: 768px) {
    /* Card icons */
    .feature-icon,
    .solution-icon,
    .industry-icon,
    .card-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 24px !important;
        margin: 0 auto 16px auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* SVG icons */
    .feature-card svg,
    .card svg {
        width: 40px !important;
        height: 40px !important;
        margin: 0 auto 16px auto !important;
    }
}

/* ===== TABLET OPTIMIZATION (481px - 768px) ===== */
@media (min-width: 481px) and (max-width: 768px) {
    /* Slightly larger sizing for tablets */
    .btn-large {
        max-width: 360px !important;
        font-size: 1rem !important;
    }
    
    .section-title {
        font-size: 2rem !important;
    }
    
    .section-subtitle {
        font-size: 1.1rem !important;
    }
    
    /* 2-column grid for feature cards on tablets */
    .features-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }
}

/* ===== LANDSCAPE MODE FIXES ===== */
@media (max-height: 600px) and (orientation: landscape) {
    /* Reduce padding in landscape */
    .glass-card,
    .feature-card,
    .card {
        padding: 16px 20px !important;
    }
    
    .btn-large {
        min-height: 48px !important;
        padding: 12px 20px !important;
    }
    
    .section-title {
        font-size: 1.6rem !important;
        margin-bottom: 12px !important;
    }
}

/* ===== FIX FOR BUTTONS WITH ICONS ===== */
@media (max-width: 768px) {
    /* Button icon alignment */
    .btn-large i,
    .btn-primary i,
    .cta-button i {
        font-size: 1.1rem !important;
        margin-left: 8px !important;
        flex-shrink: 0 !important;
    }
    
    /* Ensure text doesn't break awkwardly with icons */
    .btn-large > *,
    .btn-primary > * {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
}

/* ===== PRICING CARD SPECIFIC FIXES ===== */
@media (max-width: 768px) {
    /* Price display */
    .price-amount {
        font-size: 2.5rem !important;
        text-align: center !important;
        line-height: 1 !important;
    }
    
    .price-period {
        font-size: 0.9rem !important;
        text-align: center !important;
    }
    
    /* Plan name */
    .plan-name {
        font-size: 1.4rem !important;
        text-align: center !important;
        margin-bottom: 16px !important;
    }
    
    /* Plan description */
    .plan-description {
        font-size: 0.95rem !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }
}

/* ===== ENSURE MOBILE CONTAINERS ARE CENTERED ===== */
@media (max-width: 768px) {
    .container {
        padding: 0 16px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Section containers */
    section .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
}