/* ============================================
   MOBILE REFINEMENTS - Enhanced Mobile UX/UI
   ============================================ */

/* ===========================================
   1. FLUID TYPOGRAPHY SYSTEM
   =========================================== */

/* Base typography with fluid scaling */
html {
    font-size: 16px;
}

/* Fluid heading sizes - scale down aggressively on mobile */
h1, .text-5xl, .text-6xl {
    font-size: clamp(1.75rem, 5vw + 1rem, 3.75rem) !important;
    line-height: 1.2 !important;
    margin-bottom: clamp(1rem, 3vw, 2rem) !important;
}

h2, .text-4xl {
    font-size: clamp(1.5rem, 4vw + 0.5rem, 3rem) !important;
    line-height: 1.3 !important;
    margin-bottom: clamp(0.75rem, 2.5vw, 1.5rem) !important;
}

h3, .text-3xl {
    font-size: clamp(1.25rem, 3vw + 0.25rem, 2.25rem) !important;
    line-height: 1.4 !important;
    margin-bottom: clamp(0.5rem, 2vw, 1.25rem) !important;
}

h4, .text-2xl {
    font-size: clamp(1.125rem, 2.5vw, 1.875rem) !important;
    line-height: 1.4 !important;
}

h5, .text-xl {
    font-size: clamp(1rem, 2vw, 1.5rem) !important;
    line-height: 1.5 !important;
}

h6, .text-lg {
    font-size: clamp(0.9375rem, 1.5vw, 1.25rem) !important;
    line-height: 1.5 !important;
}

/* Body text optimization */
p, .text-base {
    font-size: clamp(0.875rem, 1.5vw, 1rem) !important;
    line-height: 1.7 !important;
}

.text-sm {
    font-size: clamp(0.8125rem, 1.25vw, 0.875rem) !important;
}

/* Hero section text optimization */
@media (max-width: 768px) {
    .hero h1,
    .hero .text-6xl,
    .hero .text-5xl {
        font-size: clamp(1.5rem, 7vw, 2.5rem) !important;
        letter-spacing: -0.02em !important;
    }

    .hero p,
    .hero .text-lg,
    .hero .text-xl {
        font-size: clamp(0.9375rem, 2.5vw, 1.125rem) !important;
        line-height: 1.6 !important;
    }
}

/* ===========================================
   2. OPTIMIZED CARD SPACING FOR MOBILE
   =========================================== */

@media (max-width: 768px) {
    /* Reduce card padding significantly */
    .service-card,
    .portfolio-item,
    .testimonial-card,
    .product-card,
    .faq-item,
    .card,
    [class*="card"] {
        padding: 0.75rem !important;
    }

    /* Card content spacing */
    .service-card > *,
    .portfolio-item > *,
    .card > * {
        margin-bottom: 0.5rem !important;
    }

    .service-card > *:last-child,
    .portfolio-item > *:last-child,
    .card > *:last-child {
        margin-bottom: 0 !important;
    }

    /* Icons in cards - reduce size */
    .service-card .icon,
    .service-card svg,
    .card .icon {
        width: 2rem !important;
        height: 2rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Card titles */
    .service-card h3,
    .portfolio-item h3,
    .card h3 {
        font-size: 1.125rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Card descriptions */
    .service-card p,
    .portfolio-item p,
    .card p {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }
}

/* Small phones - even tighter */
@media (max-width: 375px) {
    .service-card,
    .portfolio-item,
    .testimonial-card,
    .product-card,
    .card {
        padding: 0.625rem !important;
    }
}

/* ===========================================
   3. PROPER IMAGE ASPECT RATIOS
   =========================================== */

@media (max-width: 768px) {
    /* Portfolio images */
    .portfolio-item img,
    .portfolio-image {
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
        width: 100% !important;
    }

    /* Blog/article images */
    .blog-card img,
    .article-image {
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
    }

    /* Team member images */
    .team-member img,
    .team-image {
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        height: auto !important;
    }

    /* Product images */
    .product-card img,
    .product-image {
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
        height: auto !important;
    }

    /* Service card images */
    .service-card img {
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
        height: auto !important;
    }

    /* Testimonial avatars */
    .testimonial-card img,
    .avatar {
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        width: 3rem !important;
        height: 3rem !important;
        border-radius: 50% !important;
    }
}

/* ===========================================
   4. ENHANCED BUTTON SPACING & TOUCH TARGETS
   =========================================== */

@media (max-width: 768px) {
    /* Ensure all buttons meet 48x48px minimum */
    button,
    .btn,
    .btn-primary,
    .btn-outline,
    a.button,
    input[type="submit"],
    input[type="button"] {
        min-height: 48px !important;
        min-width: 48px !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 0.9375rem !important;
    }

    /* Button groups - increase gap */
    .button-group,
    .flex.gap-4,
    .grid.gap-4 {
        gap: 1rem !important;
    }

    /* Button rows - prevent accidental taps */
    .flex-wrap button,
    .flex-wrap .btn {
        margin: 0.5rem !important;
    }

    /* Icon buttons */
    .icon-button,
    button.icon-only,
    .mobile-menu-toggle {
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 0.75rem !important;
    }

    /* Portfolio filter buttons */
    .portfolio-filters button,
    .filter-btn {
        padding: 0.625rem 1.25rem !important;
        margin: 0.375rem !important;
        min-height: 44px !important;
    }

    /* CTA buttons - make prominent */
    .cta-button,
    .btn-primary {
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
        min-height: 52px !important;
    }

    /* Social media icons */
    .social-links a,
    .social-icon {
        width: 48px !important;
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ===========================================
   5. NAVIGATION PERFORMANCE OPTIMIZATION
   =========================================== */

@media (max-width: 768px) {
    /* Reduce backdrop blur for performance */
    .mobile-menu,
    .mobile-nav {
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        background: rgba(17, 17, 27, 0.95) !important;
    }

    /* Lighter overlay */
    .mobile-menu-overlay {
        background: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
    }

    /* Optimize navbar scroll behavior */
    .navbar {
        will-change: transform !important;
        transition: transform 0.3s ease !important;
    }

    /* Smooth menu animations */
    .mobile-menu {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Menu items stagger - lighter animation */
    .mobile-menu a {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Low-end device detection */
@media (max-width: 768px) and (max-resolution: 1dppx) {
    .mobile-menu,
    .mobile-menu-overlay,
    .modal,
    .popup {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ===========================================
   6. FORM KEYBOARD BEHAVIOR IMPROVEMENTS
   =========================================== */

@media (max-width: 768px) {
    /* Better input focus states */
    input:focus,
    textarea:focus,
    select:focus {
        transform: scale(1.02) !important;
        transition: transform 0.2s ease !important;
        z-index: 10 !important;
        position: relative !important;
    }

    /* Prevent zoom on input focus */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Form field spacing */
    .form-group,
    .input-group {
        margin-bottom: 1.25rem !important;
    }

    /* Labels - better spacing */
    label {
        margin-bottom: 0.5rem !important;
        display: block !important;
        font-size: 0.9375rem !important;
    }

    /* Input fields - better touch targets */
    input,
    textarea,
    select {
        min-height: 48px !important;
        padding: 0.875rem 1rem !important;
    }

    /* Textarea specific */
    textarea {
        min-height: 120px !important;
        resize: vertical !important;
    }

    /* Form buttons */
    form button[type="submit"] {
        width: 100% !important;
        margin-top: 1rem !important;
    }
}

/* iOS-specific keyboard fixes */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        /* Fix for iOS viewport height with keyboard */
        input:focus,
        textarea:focus {
            position: fixed !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: calc(100% - 2rem) !important;
            left: 1rem !important;
            z-index: 9999 !important;
        }

        /* Reset after blur */
        input,
        textarea {
            position: relative !important;
            transform: none !important;
            top: auto !important;
            left: auto !important;
            width: 100% !important;
        }
    }
}

/* ===========================================
   7. ADMIN PANEL MOBILE OPTIMIZATION
   =========================================== */

@media (max-width: 768px) {
    /* Admin panel - full screen on mobile */
    .admin-panel {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        padding: 1rem !important;
    }

    /* Admin tabs - stack vertically */
    .admin-tabs,
    .tab-list {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .admin-tabs button,
    .tab-button {
        padding: 0.75rem 1rem !important;
        width: 100% !important;
        text-align: left !important;
        justify-content: flex-start !important;
    }

    /* Admin content */
    .admin-content {
        padding: 1rem 0 !important;
    }

    /* Admin forms */
    .admin-panel form {
        padding: 0 !important;
    }

    .admin-panel input,
    .admin-panel textarea,
    .admin-panel select {
        width: 100% !important;
    }

    /* Admin table - scroll horizontally */
    .admin-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .admin-panel table {
        min-width: 600px !important;
        font-size: 0.875rem !important;
    }

    /* Admin header */
    .admin-panel-header {
        padding: 1rem !important;
        margin: -1rem -1rem 1rem -1rem !important;
    }
}

/* ===========================================
   8. TIMELINE MOBILE OPTIMIZATION
   =========================================== */

@media (max-width: 768px) {
    /* Timeline container */
    .timeline {
        padding-left: 2rem !important;
        position: relative !important;
    }

    /* Timeline line */
    .timeline::before {
        left: 0.75rem !important;
        width: 2px !important;
    }

    /* Timeline items */
    .timeline-item {
        padding-left: 1.5rem !important;
        margin-bottom: 1.5rem !important;
        position: relative !important;
    }

    /* Timeline dots */
    .timeline-item::before,
    .timeline-dot {
        left: 0.5rem !important;
        width: 0.75rem !important;
        height: 0.75rem !important;
        transform: translateX(-50%) !important;
    }

    /* Timeline content */
    .timeline-content {
        padding: 0.75rem !important;
        margin-left: 0 !important;
    }

    /* Timeline titles */
    .timeline-item h3,
    .timeline-title {
        font-size: 1rem !important;
        margin-bottom: 0.25rem !important;
    }

    /* Timeline dates */
    .timeline-date {
        font-size: 0.8125rem !important;
        margin-bottom: 0.5rem !important;
    }
}

/* ===========================================
   9. FAQ MOBILE OPTIMIZATION
   =========================================== */

@media (max-width: 768px) {
    /* FAQ items */
    .faq-item {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* FAQ question */
    .faq-question {
        padding: 0.75rem !important;
        font-size: 0.9375rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* FAQ icon - smoother animation */
    .faq-icon {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        flex-shrink: 0 !important;
        margin-left: 0.5rem !important;
    }

    .faq-item.active .faq-icon {
        transform: rotate(180deg) !important;
    }

    /* FAQ answer */
    .faq-answer {
        padding: 0.75rem !important;
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .faq-item.active .faq-answer {
        max-height: 500px !important;
    }
}

/* ===========================================
   10. PRICING CALCULATOR MOBILE OPTIMIZATION
   =========================================== */

@media (max-width: 768px) {
    /* Calculator container */
    .pricing-calculator,
    #pricingCalculator {
        padding: 1rem !important;
    }

    /* Calculator options - stack on mobile */
    .calc-options {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .calc-option {
        width: 100% !important;
        padding: 0.875rem !important;
        text-align: left !important;
    }

    /* Calculator result */
    .calc-result {
        padding: 1rem !important;
        margin-top: 1rem !important;
    }

    .calc-result .price {
        font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
    }

    /* Calculator breakdown */
    .calc-breakdown {
        font-size: 0.875rem !important;
    }

    .calc-breakdown-item {
        padding: 0.5rem 0 !important;
    }
}

/* ===========================================
   11. MODAL MOBILE OPTIMIZATION
   =========================================== */

@media (max-width: 768px) {
    /* Modal content - full screen on small devices */
    .modal-content,
    .popup-content {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        padding: 1rem !important;
        border-radius: 12px !important;
    }

    /* Modal header */
    .modal-header {
        padding: 1rem !important;
        margin: -1rem -1rem 1rem -1rem !important;
        position: sticky !important;
        top: 0 !important;
        background: var(--glass-bg) !important;
        z-index: 10 !important;
    }

    /* Modal body */
    .modal-body {
        padding: 0 !important;
    }

    /* Modal footer */
    .modal-footer {
        padding: 1rem !important;
        margin: 1rem -1rem -1rem -1rem !important;
        position: sticky !important;
        bottom: 0 !important;
        background: var(--glass-bg) !important;
    }

    /* Close button - larger on mobile */
    .modal-close,
    .close-modal,
    .popup-close {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.5rem !important;
    }
}

/* ===========================================
   12. SECTION SPACING OPTIMIZATION
   =========================================== */

@media (max-width: 768px) {
    /* Section padding */
    section,
    .section {
        padding: 3rem 1rem !important;
    }

    /* Section titles */
    section h2,
    .section-title {
        margin-bottom: 1.5rem !important;
    }

    /* Section descriptions */
    section p,
    .section-description {
        margin-bottom: 1.5rem !important;
    }

    /* Container max-width */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Extra small phones */
@media (max-width: 375px) {
    section,
    .section {
        padding: 2rem 0.75rem !important;
    }

    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ===========================================
   13. STATS SECTION OPTIMIZATION
   =========================================== */

@media (max-width: 768px) {
    /* Stats grid - 2 columns on mobile */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    /* Stat items */
    .stat-item {
        padding: 1rem !important;
        text-align: center !important;
    }

    /* Stat numbers */
    .stat-number,
    .stat-value {
        font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 0.25rem !important;
    }

    /* Stat labels */
    .stat-label,
    .stat-description {
        font-size: 0.8125rem !important;
        line-height: 1.4 !important;
    }
}

/* ===========================================
   14. TESTIMONIALS OPTIMIZATION
   =========================================== */

@media (max-width: 768px) {
    /* Testimonial cards - single column */
    .testimonials-grid {
        grid-template-columns: 1fr !important;
    }

    /* Testimonial card */
    .testimonial-card {
        padding: 1rem !important;
    }

    /* Testimonial text */
    .testimonial-text {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
    }

    /* Testimonial author */
    .testimonial-author {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
    }

    .testimonial-author img {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    .testimonial-author-info h4 {
        font-size: 0.9375rem !important;
        margin-bottom: 0.125rem !important;
    }

    .testimonial-author-info p {
        font-size: 0.8125rem !important;
    }
}

/* ===========================================
   15. FOOTER OPTIMIZATION
   =========================================== */

@media (max-width: 768px) {
    /* Footer - stack on mobile */
    .footer {
        padding: 2rem 1rem !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Footer columns */
    .footer-column {
        text-align: center !important;
    }

    .footer-column h3 {
        font-size: 1.125rem !important;
        margin-bottom: 0.75rem !important;
    }

    .footer-column ul {
        padding: 0 !important;
    }

    .footer-column li {
        margin-bottom: 0.5rem !important;
    }

    .footer-column a {
        font-size: 0.9375rem !important;
    }

    /* Footer bottom */
    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1rem !important;
        padding-top: 2rem !important;
    }

    /* Social links */
    .footer .social-links {
        justify-content: center !important;
    }
}

/* ===========================================
   16. HERO SECTION MOBILE OPTIMIZATION
   =========================================== */

@media (max-width: 768px) {
    /* Hero section */
    .hero {
        min-height: calc(100vh - 60px) !important;
        padding: 2rem 1rem !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Hero content */
    .hero-content {
        text-align: center !important;
    }

    /* Hero buttons */
    .hero .button-group {
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
    }

    .hero button,
    .hero .btn {
        width: 100% !important;
    }

    /* Hero image */
    .hero-image {
        margin-top: 2rem !important;
        max-width: 100% !important;
    }
}

/* ===========================================
   17. PERFORMANCE OPTIMIZATIONS
   =========================================== */

/* Reduce animations on low-end devices */
@media (max-width: 768px) and (max-resolution: 1dppx) {
    * {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }

    /* Disable complex animations */
    .animate-fadeIn,
    .animate-slideIn,
    .animate-bounce {
        animation: none !important;
    }
}

/* Optimize transforms for better performance */
@media (max-width: 768px) {
    .service-card,
    .portfolio-item,
    .testimonial-card,
    button,
    .btn {
        will-change: transform !important;
        transform: translateZ(0) !important;
    }
}

/* ===========================================
   18. ACCESSIBILITY IMPROVEMENTS
   =========================================== */

@media (max-width: 768px) {
    /* Better focus indicators on mobile */
    *:focus-visible {
        outline: 3px solid var(--color-accent) !important;
        outline-offset: 3px !important;
    }

    /* Skip to content link */
    .skip-to-content {
        position: absolute !important;
        top: 60px !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(-100%) !important;
        padding: 1rem 2rem !important;
        background: var(--color-accent) !important;
        color: var(--color-dark) !important;
        z-index: 10000 !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
    }

    .skip-to-content:focus {
        transform: translateX(-50%) translateY(0) !important;
    }
}

/* ===========================================
   19. COLOR CONTRAST IMPROVEMENTS
   =========================================== */

@media (max-width: 768px) {
    /* Improve glass-morphism contrast on OLED */
    .glass-bg,
    [class*="glass"] {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    [data-theme="light"] .glass-bg,
    [data-theme="light"] [class*="glass"] {
        background: rgba(0, 0, 0, 0.04) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
    }

    /* Text on glass surfaces */
    .glass-bg p,
    .glass-bg span,
    [class*="glass"] p {
        color: rgba(255, 255, 255, 0.95) !important;
    }

    [data-theme="light"] .glass-bg p,
    [data-theme="light"] [class*="glass"] p {
        color: rgba(0, 0, 0, 0.85) !important;
    }
}

/* ===========================================
   20. LOADING STATES OPTIMIZATION
   =========================================== */

@media (max-width: 768px) {
    /* Loading spinner - smaller on mobile */
    .loading::after {
        width: 16px !important;
        height: 16px !important;
        margin: -8px 0 0 -8px !important;
        border-width: 2px !important;
    }

    /* Skeleton screens */
    .skeleton {
        animation-duration: 1.2s !important;
    }

    /* Page transitions - lighter */
    .page-transition {
        animation-duration: 0.2s !important;
    }
}