/*
 * Copyright (c) 2026 PayNnet. All rights reserved.
 * Unauthorized copying, modification, or distribution of this file is strictly prohibited.
 * This software is proprietary and confidential.
 */

/* =========================================
   MOBILE OPTIMIZATION (COMPREHENSIVE)
   ========================================= */

@media (max-width: 991px) {
    /* Tablet & Small Desktop Adjustments */
    .hero-section { height: auto; padding: 140px 0 80px; text-align: center; }
    .hero-text-col { padding-left: 0; text-align: center; }
    .hero-category { padding-left: 0; }
    .hero-category::before { display: none; }
    
    .hero-title { font-size: 48px; margin-bottom: 20px; }
    .hero-desc { font-size: 16px; margin-bottom: 40px; }
    
    .hero-stats {
        flex-direction: row; flex-wrap: wrap; justify-content: center;
        width: 100%; max-width: 90%; margin: 0 auto 40px; 
        gap: 20px; padding: 25px;
        border-radius: 20px; box-sizing: border-box;
    }
    .stat-divider { display: none; }
    .stat-item { text-align: center; flex: 1 1 100%; min-width: auto; }
    
    .hero-actions { justify-content: center; }
    
    /* Center Visuals */
    .hero-image-col { margin-top: 60px; display: flex; justify-content: center; }
    
    /* Feature Grid */
    .feature-grid-small { grid-template-columns: 1fr; gap: 20px; }
    
    /* Target Grid */
    .target-grid { grid-template-columns: 1fr 1fr; }
    
    /* Modal Sizing */
    .compare-modal-content { padding: 30px 20px; width: 90%; margin: 20px auto; }

    /* Payment Sim - Tablet/Mobile Fix overlap */
    .payment-sim-box { height: 450px; margin-bottom: 40px; transform: scale(0.8); transform-origin: top center; }
    .sim-scene { width: 100%; display: flex; justify-content: center; position: relative; }
    
    /* Device Separation Strategy: Diagonal Layout */
    .sim-device.phone {
        top: 0; left: 50%; margin-left: -110px; /* Center Phone horizontally */
        transform: rotateX(5deg) rotateY(-10deg) scale(0.9);
        z-index: 1;
    }
    .sim-device.terminal {
        bottom: 20px; left: 50%; margin-left: 20px; /* Move Terminal Right and Down */
        transform: rotateX(10deg) rotateY(10deg) scale(0.8); /* Scale down terminal more */
        z-index: 2;
    }
    .sim-card {
        bottom: 60px; left: 50%; margin-left: -140px; /* Move Card Left */
        z-index: 3;
    }
}

/* Mobile Break Utility */
.m-br { display: none; }

@media (max-width: 768px) {
    .m-br { display: block; }
    
    /* Global Spacing Reduction */
    .section-padding { padding: 60px 0; }
    .section-header h2 { font-size: 28px; line-height: 1.3; }
    .section-header p { font-size: 15px; padding: 0 10px; word-break: keep-all; }
    
    /* Hero Adjustments */
    .hero-title { font-size: 36px; padding: 0 10px; }
    
    /* Solution Section Stacking - Fix for "Not optimized" */
    .sol-container { 
        flex-direction: column; gap: 40px; margin-bottom: 40px; 
        align-items: center; /* Center items */
        padding: 0 20px; /* Add horizontal padding as requested */
    }
    .change-arrow { 
        transform: rotate(90deg); margin: 0; height: 40px;
    }
    @keyframes slideArrow {
        0%, 100% { transform: rotate(90deg) translateY(0); }
        50% { transform: rotate(90deg) translateY(5px); }
    }
    .sol-card { width: 100%; max-width: 450px; padding: 30px 25px; } /* Constrain max-width */
    .sol-card h3 { font-size: 22px; margin-top: 10px; margin-bottom: 20px; }
    
    /* Promise Banner */
    .promise-grid { flex-direction: column; align-items: center; gap: 30px;}
    .promise-item { text-align: center; flex-direction: column; align-items: center; width: 100%; }
    .promise-banner { padding: 30px 20px; }

    /* VS Comparison Stacking */
    .premium-vs-container { flex-direction: column; gap: 40px; margin-top: 30px; }
    .vs-card.paynnet { transform: scale(1); }
    .vs-badge-center { top: 48.5%; width: 50px; height: 50px; font-size: 14px; } 

    /* Contact Section */
    .contact-card .row { display: flex; flex-direction: column; }
    .contact-info-box { border-radius: 20px 20px 0 0; padding: 30px; text-align: center; }
    .contact-details { align-items: center; }
    .contact-form-box { border-radius: 0 0 20px 20px; padding: 30px; }

    /* Review Card Resize */
    .review-card { width: 260px; padding: 15px; }
    .rc-head { gap: 10px; margin-bottom: 10px; }
    .rc-avatar { width: 36px; height: 36px; font-size: 14px; }
    .rc-name { font-size: 13px; }
    .rc-biz { font-size: 10px; }
    .rc-body { font-size: 13px; height: 40px; -webkit-line-clamp: 2; line-clamp: 2; }
    .section-header h2 .inline-logo { height: 1.0em; }
}

@media (max-width: 480px) {
    /* Small Mobile Specifics */
    .hero-title { font-size: 32px; }
    
    /* Stats Stacking */
    .hero-stats { flex-direction: column; gap: 20px; padding: 25px; width: 100%; border-radius: 15px;}
    .stat-item { flex: auto; width: 100%; }
    
    /* Buttons Full Width */
    .hero-actions { flex-direction: column; width: 100%; gap: 10px; }
    .btn-premium-solid, .btn-premium-link { width: 100%; justify-content: center; padding: 15px 20px; }
    
    .compare-modal-content { padding: 15px; max-width: 92%; }
    .modal-header h3 { font-size: 17px; }
    .modal-header p { font-size: 12px; margin-bottom: 10px; }
    .calc-input-group { padding: 8px; margin-bottom: 10px; border-radius: 12px; }
    .calc-input-group label { font-size: 11px; margin-bottom: 5px; }
    .calc-input-group input { font-size: 16px; width: 60px; }
    .calc-input-group .unit { font-size: 12px; }
    .graph-container { height: 120px; margin: 5px 0; gap: 15px;}
    .bar-wrapper { height: 75px; width: 40px; }
    .save-amount { font-size: 18px; }
    .res-label, .res-benefit-text { font-size: 10px; }
    .res-unit { font-size: 13px; }
    .btn-modal-cta { padding: 8px 20px; font-size: 13px; width: 100%; justify-content: center; }
    .modal-actions { margin-top: 10px; justify-content: center; }

    /* Mobile Tooltip Repositioning */
    .hero-cta-wrap .floating-bubble {
        bottom: auto;
        top: calc(100% + 15px);
        animation: bubble-float-reverse 3s ease-in-out infinite;
    }
    .hero-cta-wrap .floating-bubble::after {
        top: auto;
        bottom: 100%;
        border-top-color: transparent !important;
        border-bottom-color: var(--secondary-color) !important;
    }

    @keyframes bubble-float-reverse {
        0%, 100% { transform: translateX(-50%) translateY(0); }
        50% { transform: translateX(-50%) translateY(8px); }
    }
}