/* ================================
   PLAYCREDITS.SHOP - MOBILE OPTIMIZED
   Ultra Premium Mobile Design
   ================================ */

/* Mobile Navbar avec Hamburger */
@media (max-width: 1024px) {
    .navbar .container {
        height: 60px;
    }
    
    .nav-menu {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-elevated);
        backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: var(--space-6);
        gap: var(--space-4);
        transform: translateX(-100%);
        transition: transform 0.3s var(--ease-out);
        overflow-y: auto;
        z-index: 999;
        border-top: 1px solid var(--border-primary);
    }
    
    .nav-menu.active {
        transform: translateX(0);
    }
    
    .nav-link,
    .user-solde {
        width: 100%;
        padding: var(--space-4);
        text-align: left;
        font-size: 1rem;
        border-radius: var(--radius-lg);
        background: var(--bg-secondary);
        border: 1px solid var(--border-primary);
    }
    
    .nav-link.active {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }
    
    .btn.btn-outline,
    .btn.btn-primary {
        width: 100%;
        padding: var(--space-4);
        font-size: 1rem;
        justify-content: center;
        min-height: 48px;
    }
    
    /* Hamburger Button */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: var(--space-2);
        z-index: 1001;
        transition: all 0.3s var(--ease-out);
    }
    
    .hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--text-primary);
        border-radius: 2px;
        transition: all 0.3s var(--ease-out);
    }
    
    .hamburger span:not(:last-child) {
        margin-bottom: 6px;
    }
    
    .hamburger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    
    /* Hero Mobile */
    .hero {
        padding: calc(60px + var(--space-8)) 0 var(--space-12);
    }
    
    .hero-badge {
        font-size: 0.8125rem;
        padding: var(--space-2) var(--space-3);
    }
    
    .hero-title {
        font-size: clamp(2rem, 8vw, 3rem);
        margin-bottom: var(--space-4);
    }
    
    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: var(--space-6);
    }
    
    .hero-cta {
        flex-direction: column;
        gap: var(--space-3);
        margin-bottom: var(--space-8);
    }
    
    .btn-lg {
        width: 100%;
        padding: var(--space-4) var(--space-6);
        font-size: 1rem;
        min-height: 52px;
    }
    
    /* Stats Grid Mobile */
    .hero-stats {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .stat-card {
        padding: var(--space-5);
    }
    
    .stat-value {
        font-size: 2rem;
    }
    
    .stat-label {
        font-size: 0.8125rem;
    }
    
    /* Features Mobile */
    .features {
        padding: var(--space-12) 0;
    }
    
    .section-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
        margin-bottom: var(--space-8);
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .feature-card {
        padding: var(--space-6);
    }
    
    .feature-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
        margin-bottom: var(--space-4);
    }
    
    .feature-card h3 {
        font-size: 1.125rem;
    }
    
    .feature-card p {
        font-size: 0.9375rem;
    }
    
    /* Products Mobile */
    .products-section {
        padding: var(--space-12) 0;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        margin-bottom: var(--space-6);
    }
    
    .section-header .btn {
        width: 100%;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .product-card {
        border-radius: var(--radius-xl);
    }
    
    .product-image {
        height: 180px;
    }
    
    .product-info {
        padding: var(--space-5);
    }
    
    .product-name {
        font-size: 1.125rem;
    }
    
    .product-description {
        font-size: 0.875rem;
        margin-bottom: var(--space-4);
    }
    
    .product-footer {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }
    
    .product-price {
        font-size: 1.5rem;
        text-align: center;
    }
    
    .product-footer .btn {
        width: 100%;
        min-height: 48px;
    }
    
    /* CTA Mobile */
    .cta-section {
        padding: var(--space-12) 0;
    }
    
    .cta-content h2 {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
        margin-bottom: var(--space-3);
    }
    
    .cta-content p {
        font-size: 1rem;
        margin-bottom: var(--space-6);
    }
    
    /* Footer Mobile */
    .footer {
        padding: var(--space-12) 0 var(--space-6);
    }
    
    .footer-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-6);
    }
    
    .footer-brand {
        font-size: 1.125rem;
    }
    
    .footer-links {
        flex-direction: column;
        gap: var(--space-3);
        width: 100%;
    }
    
    .footer-links a {
        padding: var(--space-3);
        background: var(--bg-secondary);
        border-radius: var(--radius-md);
        border: 1px solid var(--border-primary);
    }
    
    .footer-social {
        width: 100%;
        justify-content: center;
        gap: var(--space-4);
    }
    
    .footer-social a {
        width: 48px;
        height: 48px;
    }
    
    .footer-bottom {
        margin-top: var(--space-6);
        font-size: 0.8125rem;
    }
}

/* Dashboard Mobile */
@media (max-width: 1024px) {
    .dashboard {
        padding-top: calc(60px + var(--space-8));
        padding-bottom: var(--space-12);
    }
    
    .dashboard-header {
        margin-bottom: var(--space-8);
    }
    
    .dashboard-greeting {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
        margin-bottom: var(--space-2);
    }
    
    .dashboard-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    
    .stats-container {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        margin-bottom: var(--space-8);
    }
    
    .stat-card-dash {
        padding: var(--space-5);
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }
    
    .stat-value {
        font-size: 2rem;
    }
    
    .stat-label {
        font-size: 0.8125rem;
    }
    
    .stat-trend {
        font-size: 0.8125rem;
        padding: var(--space-1) var(--space-2);
    }
    
    /* Quick Actions Mobile */
    .quick-actions-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
        margin-bottom: var(--space-8);
    }
    
    .action-card {
        padding: var(--space-4);
        min-height: 56px;
    }
    
    .action-card h3 {
        font-size: 1rem;
    }
    
    .action-card p {
        font-size: 0.8125rem;
    }
    
    /* Orders Table Mobile */
    .orders-section {
        margin-top: var(--space-8);
    }
    
    .section-title-dash {
        font-size: 1.5rem;
        margin-bottom: var(--space-4);
    }
    
    .orders-table-container {
        border-radius: var(--radius-lg);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .orders-table {
        min-width: 600px;
    }
    
    .orders-table th,
    .orders-table td {
        padding: var(--space-3);
        font-size: 0.875rem;
    }
    
    .order-id {
        font-size: 0.8125rem;
    }
    
    .order-product {
        font-size: 0.875rem;
    }
    
    .order-price {
        font-size: 1rem;
    }
    
    .order-date {
        font-size: 0.8125rem;
    }
    
    .order-status {
        padding: var(--space-1) var(--space-2);
        font-size: 0.75rem;
    }
}

/* Auth Pages Mobile */
@media (max-width: 1024px) {
    .auth-page {
        padding-top: calc(60px + var(--space-8));
        padding-bottom: var(--space-12);
    }
    
    .auth-container {
        max-width: 100%;
        padding: var(--space-6);
    }
    
    .auth-header h1 {
        font-size: 1.75rem;
    }
    
    .auth-header p {
        font-size: 0.9375rem;
    }
    
    .form-group {
        margin-bottom: var(--space-4);
    }
    
    .form-label {
        font-size: 0.875rem;
        margin-bottom: var(--space-2);
    }
    
    .form-input {
        padding: var(--space-3);
        font-size: 1rem;
        min-height: 48px;
    }
    
    .form-input:focus {
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    }
    
    .btn-auth {
        padding: var(--space-4);
        font-size: 1rem;
        min-height: 52px;
    }
    
    .auth-footer {
        font-size: 0.9375rem;
    }
    
    .password-strength {
        margin-top: var(--space-2);
    }
    
    .strength-bar {
        height: 4px;
    }
    
    .strength-text {
        font-size: 0.8125rem;
    }
}

/* Catalogue Mobile */
@media (max-width: 1024px) {
    .catalogue-page {
        padding-top: calc(60px + var(--space-8));
        padding-bottom: var(--space-12);
    }
    
    .page-header {
        margin-bottom: var(--space-8);
    }
    
    .page-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
        margin-bottom: var(--space-2);
    }
    
    .page-subtitle {
        font-size: 1rem;
    }
    
    /* Filters Mobile */
    .filters-bar {
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-4);
        gap: var(--space-3);
        margin-bottom: var(--space-6);
    }
    
    .search-box {
        width: 100%;
        min-width: auto;
    }
    
    .search-input {
        padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10);
        font-size: 1rem;
        min-height: 48px;
    }
    
    .search-icon {
        font-size: 1.125rem;
    }
    
    .category-filters {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--space-2);
        -webkit-overflow-scrolling: touch;
    }
    
    .category-btn {
        padding: var(--space-2) var(--space-4);
        font-size: 0.875rem;
        white-space: nowrap;
        min-height: 36px;
    }
    
    .products-count {
        padding: var(--space-2) var(--space-3);
        font-size: 0.875rem;
        text-align: center;
    }
}

/* Recharge Mobile */
@media (max-width: 1024px) {
    .recharge-page {
        padding-top: calc(60px + var(--space-8));
        padding-bottom: var(--space-12);
    }
    
    .recharge-container {
        max-width: 100%;
    }
    
    .recharge-methods {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        margin-bottom: var(--space-8);
    }
    
    .method-card {
        padding: var(--space-5);
    }
    
    .method-icon {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }
    
    .method-card h3 {
        font-size: 1.125rem;
    }
    
    .method-card p {
        font-size: 0.875rem;
    }
    
    .audiotel-numbers {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .number-card {
        padding: var(--space-4);
    }
    
    .number-value {
        font-size: 1.25rem;
    }
    
    .number-label {
        font-size: 0.8125rem;
    }
    
    .code-input {
        padding: var(--space-4);
        font-size: 1.125rem;
        min-height: 56px;
    }
}

/* Touch Target Optimization */
@media (max-width: 1024px) {
    /* Minimum 44x44px pour les touch targets */
    a, button, input[type="submit"], input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Éviter le zoom sur focus pour iOS */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important;
    }
    
    /* Améliorer la lisibilité */
    body {
        font-size: 16px;
        line-height: 1.6;
        -webkit-text-size-adjust: 100%;
    }
    
    /* Container mobile */
    .container {
        padding: 0 var(--space-4);
    }
    
    /* Scroll smooth mobile */
    html {
        scroll-padding-top: 60px;
    }
}

/* Très petits écrans (< 375px) */
@media (max-width: 374px) {
    .hero-title {
        font-size: 1.75rem;
    }
    
    .hero-subtitle {
        font-size: 0.9375rem;
    }
    
    .btn-lg {
        padding: var(--space-3) var(--space-4);
        font-size: 0.9375rem;
    }
    
    .stat-value {
        font-size: 1.75rem;
    }
    
    .product-price {
        font-size: 1.25rem;
    }
    
    .container {
        padding: 0 var(--space-3);
    }
}

/* Landscape mode (mobiles en paysage) */
@media (max-width: 1024px) and (orientation: landscape) {
    .nav-menu {
        top: 60px;
        padding: var(--space-4);
        gap: var(--space-2);
    }
    
    .nav-link,
    .user-solde {
        padding: var(--space-3);
    }
    
    .hero {
        padding: calc(60px + var(--space-6)) 0 var(--space-8);
    }
    
    .hero-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Dark mode mobile adjustments */
@media (max-width: 1024px) and (prefers-color-scheme: dark) {
    .nav-menu {
        background: rgba(9, 9, 11, 0.95);
        border-top-color: var(--gray-800);
    }
    
    .nav-link,
    .user-solde {
        background: var(--gray-900);
        border-color: var(--gray-800);
    }
    
    .footer-links a {
        background: var(--gray-900);
        border-color: var(--gray-800);
    }
}

/* Animations désactivées si préférence système */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Safe area pour iPhone X+ */
@supports (padding: max(0px)) {
    .navbar .container,
    .container {
        padding-left: max(var(--space-4), env(safe-area-inset-left));
        padding-right: max(var(--space-4), env(safe-area-inset-right));
    }
    
    .nav-menu {
        padding-left: max(var(--space-6), env(safe-area-inset-left));
        padding-right: max(var(--space-6), env(safe-area-inset-right));
        padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
    }
}