/* Mobile-First Optimizations for Blackjack Calculators */

/* Enhanced Mobile Breakpoints */
:root {
    --mobile-xs: 360px;
    --mobile-sm: 480px;
    --mobile-md: 640px;
    --tablet: 768px;
    --desktop: 1024px;
}

/* Header Mobile Optimizations - Now consistent with elegant top-nav styling */
@media (max-width: 768px) {
    /* Additional mobile adjustments only where needed */
    .header-left {
        flex-direction: column;
        gap: var(--space-1);
        text-align: center;
    }
}

@media (max-width: 480px) {
    .header-left {
        gap: 0;
    }
    
    .auth-buttons .btn {
        font-size: var(--text-xs);
        padding: var(--space-1) var(--space-2);
        min-width: 70px;
    }
}

@media (max-width: 360px) {
    .container {
        padding: 0 var(--space-3);
    }
}

/* Touch-Friendly Form Elements */
@media (max-width: 768px) {
    .form-input,
    .form-control,
    .control-group input,
    .control-group select {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
        padding: var(--space-3) var(--space-4);
    }
    
    .btn {
        min-height: 44px;
        padding: var(--space-3) var(--space-6);
        font-size: var(--text-base);
    }
    
    .btn-small {
        min-height: 36px;
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm);
    }
}

/* Navigation Improvements */
@media (max-width: 768px) {
    .top-nav {
        padding: var(--space-2) 0;
    }
    
    .nav-container {
        flex-direction: column;
        gap: var(--space-2);
        text-align: center;
    }
    
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-3);
    }
    
    .nav-link {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-sm);
    }
    
    .logo {
        flex-direction: row;
        align-items: center;
        gap: var(--space-2);
    }
    
    .logo-subtitle {
        display: none;
    }
}

@media (max-width: 480px) {
    .nav-links {
        gap: var(--space-2);
    }
    
    .nav-link {
        padding: var(--space-1) var(--space-2);
        font-size: var(--text-xs);
    }
    
    .logo-text {
        font-size: var(--text-lg);
    }
    
    .logo-icon {
        font-size: var(--text-xl);
    }
}

/* Modal Mobile Optimizations */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        max-height: 90vh;
        margin: var(--space-4);
    }
    
    .modal-header {
        padding: var(--space-4);
    }
    
    .modal-header h2 {
        font-size: var(--text-lg);
    }
    
    .auth-form {
        padding: var(--space-4);
    }
    
    .profile-content {
        padding: var(--space-4);
    }
    
    .form-actions {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .form-actions .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .modal-content {
        width: 98%;
        margin: var(--space-2);
        border-radius: var(--radius-lg);
    }
    
    .modal-header {
        padding: var(--space-3);
    }
    
    .auth-form,
    .profile-content {
        padding: var(--space-3);
    }
}

/* Simulation Controls Mobile Layout */
@media (max-width: 768px) {
    .sim-controls {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .control-section {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }
    
    .control-row {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .parameters-summary {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }
    
    .summary-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }
    
    .summary-item {
        padding: var(--space-2) var(--space-3);
    }
    
    .sim-actions {
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-4);
        text-align: center;
    }
    
    .sim-actions .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .control-section {
        padding: var(--space-3);
        margin-bottom: var(--space-3);
    }
    
    .section-title {
        font-size: var(--text-base);
    }
    
    .parameters-summary {
        padding: var(--space-3);
    }
    
    .parameters-summary h4 {
        font-size: var(--text-base);
    }
    
    .sim-actions {
        padding: var(--space-3);
        gap: var(--space-2);
    }
}

/* Hero Section Mobile */
@media (max-width: 768px) {
    .hero {
        padding: var(--space-8) 0;
    }
    
    .hero h2 {
        font-size: var(--text-3xl);
        margin-bottom: var(--space-4);
    }
    
    .hero p {
        font-size: var(--text-lg);
        margin-bottom: var(--space-6);
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        margin: var(--space-6) 0;
    }
    
    .feature-item {
        padding: var(--space-4);
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }
    
    .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: var(--space-6) 0;
    }
    
    .hero h2 {
        font-size: var(--text-2xl);
        margin-bottom: var(--space-3);
    }
    
    .hero p {
        font-size: var(--text-base);
        margin-bottom: var(--space-4);
    }
    
    .features-grid {
        gap: var(--space-3);
        margin: var(--space-4) 0;
    }
    
    .feature-item {
        padding: var(--space-3);
    }
    
    .feature-item h3 {
        font-size: var(--text-base);
        margin-bottom: var(--space-2);
    }
    
    .feature-item p {
        font-size: var(--text-sm);
    }
}

/* Pricing Cards Mobile */
@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .pricing-card.featured {
        transform: none;
        order: -1;
    }
    
    .pricing-card.featured:hover {
        transform: translateY(-4px);
    }
    
    .pricing-card {
        padding: var(--space-8);
    }
}

@media (max-width: 480px) {
    .pricing-card {
        padding: var(--space-6);
    }
    
    .price {
        font-size: var(--text-4xl);
    }
    
    .pricing-card h4 {
        font-size: var(--text-xl);
    }
    
    .pricing-card ul {
        margin-bottom: var(--space-6);
    }
    
    .pricing-card li {
        font-size: var(--text-sm);
        padding: var(--space-2) 0;
    }
}

/* Authentication Pages Mobile */
@media (max-width: 768px) {
    .auth-section {
        padding: var(--space-8) 0;
    }
    
    .auth-grid,
    .auth-container {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .auth-card {
        padding: var(--space-6);
    }
    
    .auth-title {
        font-size: var(--text-2xl);
    }
    
    .auth-subtitle {
        font-size: var(--text-base);
    }
    
    .auth-benefits {
        flex-direction: column;
        gap: var(--space-3);
    }
    
    .benefit-item {
        justify-content: center;
        text-align: center;
        padding: var(--space-2);
    }
}

@media (max-width: 480px) {
    .auth-section {
        padding: var(--space-6) 0;
    }
    
    .auth-card {
        padding: var(--space-4);
        margin: var(--space-2);
    }
    
    .auth-title {
        font-size: var(--text-xl);
        margin-bottom: var(--space-3);
    }
    
    .auth-subtitle {
        font-size: var(--text-sm);
        margin-bottom: var(--space-4);
    }
    
    .btn-auth-primary,
    .btn-auth-secondary {
        width: 100%;
        padding: var(--space-3);
        font-size: var(--text-base);
    }
    
    .btn-subtext {
        font-size: var(--text-xs);
    }
}

/* Results Dashboard Mobile */
@media (max-width: 768px) {
    .large-modal {
        max-width: 95vw;
        max-height: 90vh;
        width: 95vw;
    }
    
    .results-controls {
        flex-direction: column;
        gap: var(--space-4);
    }
    
    .search-filter {
        flex-direction: column;
        min-width: 0;
        width: 100%;
    }
    
    .search-filter input,
    .search-filter select {
        width: 100%;
        margin-bottom: var(--space-2);
    }
    
    .results-actions {
        width: 100%;
        justify-content: center;
    }
    
    .result-summary {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .analytics-summary {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .analytics-charts {
        grid-template-columns: 1fr;
    }
    
    .analytics-details {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .large-modal {
        max-width: 98vw;
        width: 98vw;
        margin: var(--space-1);
        max-height: 95vh;
    }
    
    .results-dashboard,
    .analytics-dashboard {
        padding: var(--space-3);
    }
    
    .result-summary,
    .analytics-summary {
        grid-template-columns: 1fr;
    }
    
    .result-card {
        padding: var(--space-3);
    }
    
    .stat-card {
        padding: var(--space-4);
    }
    
    .chart-section,
    .detail-section {
        padding: var(--space-4);
    }
    
    .modal-actions {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .modal-actions .btn {
        width: 100%;
    }
}

/* Table Responsive */
@media (max-width: 768px) {
    .results-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .results-table table {
        min-width: 600px;
    }
    
    .results-table th,
    .results-table td {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
    }
}

/* Strategy and Betting Grids Mobile */
@media (max-width: 768px) {
    .strategy-grid-container,
    .betting-grid-container {
        padding: var(--space-3);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .strategy-grid,
    .betting-grid {
        min-width: 600px;
    }
    
    .grid-cell,
    .betting-cell {
        font-size: var(--text-xs);
        padding: var(--space-1);
        min-height: 32px;
    }
    
    .betting-controls {
        flex-wrap: wrap;
        gap: var(--space-1);
    }
    
    .betting-controls .btn {
        font-size: var(--text-xs);
        padding: var(--space-1) var(--space-2);
    }
}

@media (max-width: 480px) {
    .strategy-section-title {
        font-size: var(--text-xs);
    }
    
    .config-title {
        font-size: var(--text-sm);
    }
    
    .grid-description {
        font-size: var(--text-xs);
    }
}

/* Banner Mobile Adjustments */
@media (max-width: 768px) {
    .banner-header,
    .banner-footer {
        margin: var(--space-4) 0;
    }
    
    .banner-728x90 {
        width: 320px;
        height: 50px;
    }
    
    .banner-468x60 {
        width: 320px;
        height: 50px;
    }
    
    .banner-container {
        padding: var(--space-2);
    }
}

@media (max-width: 480px) {
    .banner-header,
    .banner-footer {
        margin: var(--space-2) 0;
    }
    
    .banner-728x90,
    .banner-468x60 {
        width: 300px;
        height: 50px;
    }
}

/* Prevent zoom on iOS form inputs */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select,
    textarea,
    input[type="text"],
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="url"],
    input[type="search"],
    input[type="tel"],
    input[type="color"] {
        font-size: 16px;
    }
}

/* Improved Touch Targets */
@media (max-width: 768px) {
    .checkbox-label {
        padding: var(--space-2);
        margin: var(--space-1) 0;
    }
    
    .checkmark {
        width: 24px;
        height: 24px;
    }
    
    .dropdown-toggle {
        min-height: 44px;
    }
    
    .dropdown-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: var(--space-3) var(--space-4);
    }
    
    .action-btn {
        min-height: 44px;
        min-width: 44px;
        padding: var(--space-2);
    }
}

/* Loading States Mobile */
@media (max-width: 768px) {
    .loading-state,
    .empty-state {
        padding: var(--space-8) var(--space-4);
    }
    
    .loading-state h2,
    .empty-state h2 {
        font-size: var(--text-xl);
    }
    
    .loading-state p,
    .empty-state p {
        font-size: var(--text-base);
    }
}

/* Trust Indicators Mobile */
@media (max-width: 768px) {
    .trust-indicators {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
        margin-top: var(--space-6);
    }
    
    .trust-item {
        flex-direction: column;
        text-align: center;
        font-size: var(--text-sm);
    }
    
    .trust-icon {
        font-size: var(--text-lg);
        margin-bottom: var(--space-1);
    }
}

@media (max-width: 480px) {
    .trust-indicators {
        grid-template-columns: 1fr;
        gap: var(--space-2);
        margin-top: var(--space-4);
    }
    
    .trust-item {
        font-size: var(--text-xs);
    }
}

/* Blog Article Mobile */
@media (max-width: 768px) {
    .article-content {
        padding: var(--space-6);
    }
    
    .blog-header h1 {
        font-size: var(--text-2xl);
        margin-bottom: var(--space-4);
    }
    
    .calculator-cta {
        padding: var(--space-4);
        margin: var(--space-6) 0;
    }
    
    .calculator-cta h3 {
        font-size: var(--text-lg);
    }
    
    .strategy-tip,
    .highlight {
        padding: var(--space-3);
        margin: var(--space-4) 0;
    }
}

@media (max-width: 480px) {
    .article-content {
        padding: var(--space-4);
        border-radius: var(--radius-lg);
    }
    
    .blog-header h1 {
        font-size: var(--text-xl);
    }
    
    .blog-nav {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    
    .blog-nav a {
        padding: var(--space-1) var(--space-2);
        font-size: var(--text-sm);
    }
    
    .calculator-cta {
        padding: var(--space-3);
        margin: var(--space-4) 0;
    }
    
    .calculator-cta h3 {
        font-size: var(--text-base);
    }
    
    .calculator-cta a {
        padding: var(--space-2) var(--space-4);
        font-size: var(--text-sm);
    }
}