/* ============================================
   MOBILE RESPONSIVE STYLES - POKER THEME
   Premium Dark Theme with Red/Gold Accents
   ============================================ */

/* Mobile First Approach - Base styles are mobile-friendly */

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */
@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    /* Container adjustments */
    .container {
        padding: 0 var(--space-4) !important;
        max-width: 100%;
    }

    /* ============================================
       NAVIGATION - MOBILE
       ============================================ */
    .navbar {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-primary);
    }

    .navbar .container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem var(--space-4);
        min-height: 5rem;
    }

    .nav-brand {
        display: flex;
        align-items: center;
    }

    .nav-brand a,
    .nav-logo-text {
        font-size: 1.125rem;
    }

    .nav-logo {
        height: 64px;
        max-width: 240px;
    }

    /* Hamburger Menu */
    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: var(--text-primary);
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0.5rem;
        margin-left: auto;
    }

    .nav-toggle:hover {
        color: var(--primary);
    }

    /* ============================================
       HERO SECTION - MOBILE
       ============================================ */
    .hero {
        padding: var(--space-8) var(--space-4) !important;
        min-height: auto !important;
        border-radius: 0;
        margin: 0 calc(var(--space-4) * -1);
    }

    .hero-content h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        margin-bottom: var(--space-4);
    }

    .hero-content p {
        font-size: 0.9375rem !important;
        margin-bottom: var(--space-6);
    }

    .hero-badge {
        font-size: 0.6875rem;
        padding: var(--space-1) var(--space-3);
    }

    .hero-buttons {
        flex-direction: column;
        gap: var(--space-3);
        width: 100%;
    }

    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    /* ============================================
       PRODUCT GRID - MOBILE
       ============================================ */
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-3) !important;
    }

    .category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-3) !important;
    }

    .product-card,
    .category-card {
        margin: 0;
        border-radius: var(--radius-lg);
    }

    .product-image-link {
        padding: 6px 6px 0 6px;
    }

    .product-info {
        padding: var(--space-3);
    }

    .product-info h3 {
        font-size: 0.875rem !important;
        line-height: 1.3;
        margin-bottom: var(--space-1);
    }

    .product-description {
        display: none; /* Hide on mobile for cleaner look */
    }

    .product-footer {
        padding-top: var(--space-2);
    }

    .product-price {
        font-size: 1.125rem !important;
    }

    .product-stock {
        font-size: 0.625rem;
        padding: var(--space-1) var(--space-2);
    }

    .product-info .btn {
        padding: var(--space-2) var(--space-3);
        font-size: 0.75rem;
    }

    /* ============================================
       PRODUCT DETAIL - MOBILE
       ============================================ */
    .product-detail {
        grid-template-columns: 1fr !important;
        gap: var(--space-5);
        padding: var(--space-4);
    }

    .product-images {
        margin-bottom: 0;
    }

    .product-placeholder-large {
        aspect-ratio: 1 / 1;
    }

    .breadcrumb {
        font-size: 0.75rem;
        margin-bottom: var(--space-4);
    }

    .product-details h1 {
        font-size: 1.5rem !important;
        margin-bottom: var(--space-3);
    }

    .product-meta {
        gap: var(--space-2);
        margin-bottom: var(--space-4);
    }

    .product-price-box {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }

    .product-price-box .price {
        font-size: 1.75rem !important;
    }

    .quantity-selector {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .quantity-selector input {
        width: 100%;
    }

    /* ============================================
       CART - MOBILE
       ============================================ */
    .cart-container {
        grid-template-columns: 1fr !important;
        gap: var(--space-5) !important;
    }

    .cart-items-wrapper,
    .cart-summary-wrapper {
        border-radius: var(--radius-lg);
    }

    .cart-section-header {
        padding: var(--space-4);
    }

    .cart-section-header h2 {
        font-size: 1.0625rem;
    }

    .cart-item {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .cart-item-image img,
    .product-placeholder-small {
        width: 100% !important;
        height: 180px !important;
        border-radius: var(--radius-md);
        object-fit: cover;
    }

    .cart-item-details h3 {
        font-size: 1rem;
    }

    .cart-item-price {
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .cart-item-quantity {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .quantity-controls {
        padding: var(--space-1);
    }

    .quantity-btn {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    .cart-summary {
        position: static;
    }

    .summary-details {
        padding: var(--space-4);
    }

    .summary-row {
        padding: var(--space-3) 0;
        font-size: 0.9375rem;
    }

    .summary-actions {
        padding: var(--space-4);
    }

    /* ============================================
       CHECKOUT - MOBILE
       ============================================ */
    .checkout-container {
        grid-template-columns: 1fr !important;
        gap: var(--space-5) !important;
    }

    .checkout-section-header,
    .payment-section-header {
        padding: var(--space-4);
    }

    .checkout-item {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-4);
        gap: var(--space-3);
    }

    .checkout-item-image img {
        width: 100% !important;
        height: 150px !important;
        object-fit: cover;
        border-radius: var(--radius-md);
    }

    .checkout-item .item-info,
    .checkout-item .item-price {
        width: 100%;
    }

    .checkout-item .item-price {
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .checkout-total-box {
        padding: var(--space-4);
    }

    .crypto-options {
        grid-template-columns: 1fr !important;
        gap: var(--space-3);
    }

    .crypto-option {
        padding: var(--space-4);
    }

    .payment-selection {
        padding: var(--space-4);
    }

    .voucher-input-wrapper {
        flex-direction: column;
        gap: var(--space-3);
    }

    .voucher-input-wrapper input,
    .voucher-input-wrapper button {
        width: 100%;
    }

    /* ============================================
       PAYMENT PAGE - MOBILE
       ============================================ */
    .payment-page-wrapper {
        padding: var(--space-3);
    }

    .payment-card {
        border-radius: var(--radius-lg);
    }

    .payment-card-header {
        padding: var(--space-6) var(--space-4);
    }

    .payment-card-header h1 {
        font-size: 1.375rem;
    }

    .payment-card-body {
        padding: var(--space-4);
    }

    .payment-details-grid {
        gap: var(--space-3);
    }

    .payment-detail-card {
        padding: var(--space-3);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .payment-detail-card .value {
        font-size: 1.125rem;
    }

    .payment-detail-card .value.highlight {
        font-size: 1.375rem;
    }

    .timer-section {
        padding: var(--space-4);
    }

    .countdown-display {
        font-size: 2rem;
    }

    .qr-section {
        padding: var(--space-4);
    }

    .qr-code-wrapper {
        padding: var(--space-3);
    }

    #qr-code-canvas {
        max-width: 180px;
        height: auto;
    }

    .address-value {
        flex-direction: column;
        gap: var(--space-3);
    }

    .address-value code {
        font-size: 0.75rem;
    }

    .copy-btn {
        width: 100%;
        justify-content: center;
    }

    .instructions-section {
        padding: var(--space-4);
    }

    .instructions-list li {
        font-size: 0.875rem;
    }

    .payment-actions {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    /* ============================================
       ACCOUNT PAGE - MOBILE
       ============================================ */
    .account-container {
        grid-template-columns: 1fr !important;
        gap: var(--space-4);
    }

    .account-sidebar {
        padding: var(--space-4);
    }

    .user-info {
        padding-bottom: var(--space-4);
        margin-bottom: var(--space-4);
    }

    .user-avatar {
        width: 56px;
        height: 56px;
    }

    .account-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }

    .account-nav a {
        padding: var(--space-3);
        font-size: 0.8125rem;
        text-align: center;
        flex-direction: column;
        gap: var(--space-1);
    }

    .account-nav a i {
        width: auto;
    }

    .account-content {
        padding: var(--space-4);
    }

    .account-section-header {
        margin-bottom: var(--space-4);
        padding-bottom: var(--space-3);
    }

    .account-section-header h2 {
        font-size: 1.25rem;
    }

    .order-card {
        padding: var(--space-4);
    }

    .order-header {
        flex-direction: column;
        gap: var(--space-3);
        margin-bottom: var(--space-4);
        padding-bottom: var(--space-4);
    }

    .order-status-badge {
        align-self: flex-start;
    }

    .order-footer {
        flex-direction: column;
        gap: var(--space-3);
        padding-top: var(--space-3);
    }

    .order-actions {
        width: 100%;
        flex-direction: column;
    }

    .order-actions .btn {
        width: 100%;
    }

    /* ============================================
       ADMIN PANEL - MOBILE
       ============================================ */
    .admin-container {
        grid-template-columns: 1fr !important;
        gap: var(--space-4);
    }

    .admin-sidebar {
        padding: var(--space-4);
    }

    .admin-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }

    .admin-nav a {
        padding: var(--space-3);
        text-align: center;
        font-size: 0.8125rem;
        flex-direction: column;
        gap: var(--space-1);
    }

    .admin-nav a i {
        width: auto;
        font-size: 1.25rem;
    }

    .admin-content {
        padding: var(--space-4);
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-3) !important;
    }

    .stat-card {
        padding: var(--space-4) !important;
    }

    .stat-card i {
        font-size: 1.5rem;
        margin-bottom: var(--space-2);
    }

    .stat-card h3 {
        font-size: 1.25rem !important;
    }

    .stat-card p {
        font-size: 0.8125rem;
    }

    /* Admin Tables */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 calc(var(--space-4) * -1);
        padding: 0 var(--space-4);
    }

    .admin-table {
        min-width: 600px;
        font-size: 0.8125rem;
    }

    .admin-table th,
    .admin-table td {
        padding: var(--space-2) var(--space-3) !important;
    }

    .action-buttons {
        flex-direction: column;
        gap: var(--space-1);
    }

    .action-buttons .btn {
        padding: var(--space-1) var(--space-2) !important;
        font-size: 0.6875rem !important;
        width: 100%;
    }

    /* ============================================
       BUTTONS - MOBILE
       ============================================ */
    .btn {
        padding: var(--space-3) var(--space-4);
        font-size: 0.9375rem;
        min-height: 44px; /* Touch-friendly */
    }

    .btn-sm {
        padding: var(--space-2) var(--space-3);
        font-size: 0.8125rem;
        min-height: 36px;
    }

    .btn-lg {
        padding: var(--space-4) var(--space-5);
        font-size: 1rem;
    }

    .btn-block {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* ============================================
       MODALS - MOBILE
       ============================================ */
    .modal-content {
        width: 95% !important;
        max-width: 100% !important;
        margin: var(--space-4);
        max-height: 90vh;
        overflow-y: auto;
    }

    /* ============================================
       ALERTS & FLASH MESSAGES - MOBILE
       ============================================ */
    .flash-messages {
        left: 50%;
        transform: translateX(-50%);
        max-width: none;
        width: calc(100% - var(--space-6));
    }

    .alert {
        padding: var(--space-3) var(--space-4);
        font-size: 0.9375rem;
    }

    /* ============================================
       FOOTER - MOBILE
       ============================================ */
    .footer {
        padding: var(--space-6) 0;
        margin-top: var(--space-8);
    }

    .footer .container {
        flex-direction: column;
        text-align: center;
        gap: var(--space-4);
    }

    .footer p {
        font-size: 0.8125rem;
    }

    .footer-links {
        flex-direction: column;
        gap: var(--space-3);
    }

    /* ============================================
       FORMS - MOBILE
       ============================================ */
    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 16px !important; /* Prevents iOS zoom on input focus */
        padding: var(--space-3);
    }

    .auth-container {
        min-height: auto;
        padding: var(--space-6) var(--space-4);
    }

    .auth-box {
        padding: var(--space-5);
        max-width: 100%;
    }

    .auth-box h2 {
        font-size: 1.5rem;
    }

    /* ============================================
       CONTENT SECTIONS - MOBILE
       ============================================ */
    .content-section-wrapper {
        padding: var(--space-5);
        margin-bottom: var(--space-5);
        border-radius: var(--radius-lg);
    }

    .section-header {
        margin-bottom: var(--space-5);
    }

    .section-header h2 {
        font-size: 1.375rem;
    }

    /* News Section */
    .news-item-content {
        flex-direction: column;
        gap: var(--space-3);
    }

    .news-item-image {
        width: 100%;
        height: 150px;
    }

    .news-item-header {
        flex-direction: column;
        gap: var(--space-2);
    }

    /* ============================================
       UTILITIES - MOBILE
       ============================================ */
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    .text-center-mobile {
        text-align: center !important;
    }
}

/* ============================================
   SMALL MOBILE (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    html {
        font-size: 14px;
    }

    .container {
        padding: 0 var(--space-3) !important;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-2) !important;
    }

    .product-info {
        padding: var(--space-2);
    }

    .product-info h3 {
        font-size: 0.8125rem !important;
    }

    .product-price {
        font-size: 1rem !important;
    }

    .category-grid {
        grid-template-columns: 1fr !important;
    }

    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .account-nav,
    .admin-nav {
        grid-template-columns: 1fr;
    }

    .hero-content h1 {
        font-size: 1.5rem !important;
    }

    .countdown-display {
        font-size: 1.75rem;
    }
}

/* ============================================
   TABLET BREAKPOINT (768px - 1024px)
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 var(--space-6);
    }

    .product-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .checkout-container {
        grid-template-columns: 1fr !important;
    }

    .cart-container {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   LANDSCAPE MODE OPTIMIZATIONS
   ============================================ */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: var(--space-6) var(--space-4) !important;
    }

    .hero-content h1 {
        font-size: 1.5rem !important;
    }

    .modal-content {
        max-height: 85vh;
    }

    .nav-menu {
        padding-top: 4rem;
    }
}

/* ============================================
   TOUCH OPTIMIZATIONS
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn,
    a,
    button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
    }

    /* Remove hover effects on touch devices */
    .product-card:hover,
    .category-card:hover {
        transform: none;
        box-shadow: none;
    }

    .product-card:active,
    .category-card:active {
        transform: scale(0.98);
    }

    .btn:hover {
        transform: none;
    }

    .btn:active {
        transform: scale(0.98);
    }

    /* Improve scrolling on iOS */
    .table-responsive,
    .modal-body,
    .admin-content,
    .nav-menu {
        -webkit-overflow-scrolling: touch;
    }

    /* Disable text selection on interactive elements */
    .btn,
    .nav-menu a,
    .category-nav-item {
        -webkit-user-select: none;
        user-select: none;
    }
}

/* ============================================
   SAFE AREA INSETS (iPhone X+ notch)
   ============================================ */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        .navbar {
            padding-left: max(var(--space-4), env(safe-area-inset-left));
            padding-right: max(var(--space-4), env(safe-area-inset-right));
        }

        .footer {
            padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
        }

        body {
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .navbar,
    .footer,
    .btn,
    .admin-sidebar,
    .account-sidebar,
    .flash-messages,
    .nav-toggle,
    .mobile-bottom-nav {
        display: none !important;
    }

    body {
        background: white;
        color: black;
        padding: 0;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    .product-card,
    .category-card,
    .order-card,
    .stat-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }

    a {
        color: black;
        text-decoration: underline;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* ============================================
   GLOBAL TEXT OVERFLOW PREVENTION
   ============================================ */
@media (max-width: 768px) {
    h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    code, pre, .address-value code {
        overflow-wrap: break-word;
        word-break: break-all;
    }

    .breadcrumb span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 150px;
    }

    /* Order detail navigation */
    .nav-links {
        gap: 0.25rem;
    }

    .nav-links a {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Order detail hero */
    .order-hero-content {
        gap: 1rem;
    }

    .order-hero-left {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .status-badges {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .order-total-hero {
        text-align: center;
    }

    /* Order detail grid */
    .order-grid {
        grid-template-columns: 1fr;
    }

    /* Order stats */
    .order-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .stat-card {
        padding: 0.75rem;
    }

    .stat-card .stat-value {
        font-size: 1rem;
    }

    /* Credential sections */
    .credential-grid {
        grid-template-columns: 1fr;
    }

    .credential-field {
        flex-direction: column;
    }

    .credential-field code {
        font-size: 0.75rem;
        word-break: break-all;
    }

    .credential-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Checkout voucher on mobile */
    .voucher-input-wrapper {
        flex-direction: column;
    }

    .voucher-input-wrapper input,
    .voucher-input-wrapper button {
        width: 100%;
    }

    /* QR code image responsive */
    #qr-code-img {
        width: 180px !important;
        height: 180px !important;
    }
}

/* ============================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .nav-menu.active a {
        animation: none;
        opacity: 1;
    }
}