/* ASICSMINOR Mobile Responsive CSS */
/* This file handles mobile responsiveness for all pages */

/* Base Mobile Styles */
@media (max-width: 900px) {
    /* Container padding */
    .container {
        padding: 0 15px;
    }
    
    /* Navigation */
    .navbar .container {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }
    
    .nav-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    
    .nav-brand h1 {
        font-size: 20px;
    }
    
    /* Hero Section */
    .hero {
        padding: 40px 0;
    }
    
    .hero-title {
        font-size: 28px;
    }
    
    .hero-subtitle {
        font-size: 16px;
    }
    
    .hero-highlights {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .highlight-item {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    /* Calculator Section */
    .calculator-section {
        padding: 40px 0;
    }
    
    .calculator-box {
        padding: 20px;
    }
    
    /* VIP Levels Section */
    .levels-section {
        padding: 40px 0;
    }
    
    .levels-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    /* Payment Proofs Section */
    .proofs-section {
        padding: 40px 0;
    }
    
    .proofs-carousel {
        padding: 15px 0;
        gap: 15px;
    }
    
    .proof-item img {
        width: 250px;
        height: 180px;
    }
    
    /* Account Assurance Section */
    .assurance-section {
        padding: 40px 0;
    }
    
    .assurance-box {
        padding: 20px;
    }
    
    /* Support Section */
    .support-section {
        padding: 40px 0;
    }
    
    .support-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .btn-large {
        width: 100%;
        padding: 12px 20px;
    }
    
    /* Footer */
    .footer {
        padding: 20px 0;
    }
    
    /* Dashboard Grid */
    .dashboard-grid,
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }
    
    /* Stats Grid */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    
    /* Cards */
    .card {
        padding: 20px;
        margin-bottom: 15px;
    }
    
    /* Forms */
    .form-group {
        margin-bottom: 15px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* Prevent iOS zoom */
        padding: 12px;
    }
    
    /* Tables */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table {
        font-size: 12px;
    }
    
    .table th,
    .table td {
        padding: 10px 8px;
        white-space: nowrap;
    }
    
    /* Buttons */
    .btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .btn-block {
        width: 100%;
    }
    
    /* Auth Pages */
    .auth-container {
        padding: 15px;
    }
    
    .auth-box {
        padding: 25px;
    }
    
    .auth-header h1 {
        font-size: 24px;
    }
}

@media (max-width: 600px) {
    /* Hero Section */
    .hero-title {
        font-size: 24px;
    }
    
    .hero-subtitle {
        font-size: 14px;
    }
    
    /* Calculator */
    .calculator-result {
        padding: 15px;
    }
    
    .result-item {
        flex-direction: column;
        gap: 5px;
        padding: 10px 0;
    }
    
    /* Stats Grid */
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    /* Tables */
    .table {
        font-size: 11px;
    }
    
    .table th,
    .table td {
        padding: 8px 5px;
    }
    
    /* Admin Panel */
    .admin-navbar .container {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }
    
    .admin-menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    
    .admin-link {
        font-size: 12px;
        padding: 8px 12px;
    }
    
    .admin-stats-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .admin-stat-card {
        padding: 15px;
    }
    
    .quick-actions {
        flex-direction: column;
    }
    
    /* Tabs */
    .tabs {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .tab {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    /* Action Buttons */
    .action-buttons {
        flex-direction: column;
    }
    
    /* Payment Fields */
    .payment-fields {
        padding: 15px;
    }
    
    /* Proofs Grid */
    .proofs-grid {
        grid-template-columns: 1fr;
    }
    
    .proof-item img {
        width: 100%;
        height: auto;
        max-height: 250px;
    }
}

@media (max-width: 480px) {
    /* Container */
    .container {
        padding: 0 10px;
    }
    
    /* Navigation */
    .navbar {
        padding: 10px 0;
    }
    
    .nav-brand h1 {
        font-size: 18px;
    }
    
    .nav-menu {
        gap: 8px;
    }
    
    .nav-link,
    .btn {
        font-size: 12px;
        padding: 8px 12px;
    }
    
    /* Hero */
    .hero {
        padding: 30px 0;
    }
    
    .hero-title {
        font-size: 20px;
    }
    
    .hero-subtitle {
        font-size: 13px;
    }
    
    .highlight-item {
        padding: 10px 15px;
    }
    
    .highlight-icon {
        font-size: 18px;
    }
    
    .highlight-text {
        font-size: 12px;
    }
    
    /* Calculator */
    .calculator-box {
        padding: 15px;
    }
    
    /* VIP Levels */
    .level-card {
        padding: 15px;
    }
    
    .level-rate {
        font-size: 20px;
    }
    
    /* Dashboard */
    .balance {
        font-size: 28px;
    }
    
    /* Tables */
    .table th,
    .table td {
        padding: 6px 4px;
        font-size: 10px;
    }
    
    /* Admin */
    .admin-brand h1 {
        font-size: 16px;
    }
    
    .admin-stat-value {
        font-size: 20px;
    }
    
    /* Forms */
    .form-group label {
        font-size: 12px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 10px;
        font-size: 16px;
    }
    
    /* Buttons */
    .btn {
        padding: 10px 15px;
        font-size: 13px;
    }
    
    /* Auth */
    .auth-box {
        padding: 20px;
    }
    
    .auth-header h1 {
        font-size: 20px;
    }
    
    /* Support */
    .support-box {
        padding: 15px;
    }
    
    .support-actions {
        flex-direction: column;
    }
    
    .support-actions a {
        width: 100%;
        text-align: center;
    }
}

/* Prevent horizontal overflow on all pages */
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Ensure images don't overflow */
img {
    max-width: 100%;
    height: auto;
}

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

/* Touch-friendly targets */
@media (max-width: 768px) {
    .btn,
    .nav-link,
    .admin-link,
    .tab,
    input[type="submit"],
    input[type="button"],
    button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Hide elements on very small screens if needed */
@media (max-width: 360px) {
    .hero-highlights {
        font-size: 11px;
    }
    
    .level-card {
        padding: 12px;
    }
    
    .admin-stat-card {
        padding: 12px;
    }
}