/**
 * Mobile Responsiveness Optimizations
 * Comprehensive fixes for mobile-first UI/UX
 */

/* ============================================
   BASE MOBILE OPTIMIZATIONS
   ============================================ */

/* Enable touch optimization */
html {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
}

/* ============================================
   TYPOGRAPHY MOBILE - Proportional sizing
   ============================================ */
@media (max-width: 768px) {
    :root {
        /* Slightly smaller base text for better mobile fit */
        --text-base: 0.9375rem;
        /* 15px */
        --text-lg: 1rem;
        --text-xl: 1.125rem;
        --text-2xl: 1.375rem;
        --text-3xl: 1.75rem;
        --text-4xl: 2rem;
        --text-5xl: 2.5rem;
    }

    /* Ensure headers don't overflow */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        word-break: break-word;
        hyphens: auto;
    }
}

@media (max-width: 375px) {
    :root {
        --text-base: 0.875rem;
        /* 14px */
        --text-3xl: 1.5rem;
        --text-4xl: 1.75rem;
        --text-5xl: 2rem;
    }
}

/* ============================================
   CONTAINER - Proper padding
   ============================================ */
@media (max-width: 768px) {
    .container {
        padding-inline: var(--space-4);
    }
}

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

/* ============================================
   HEADER - Fixed alignment
   ============================================ */
@media (max-width: 768px) {
    .header .container {
        padding-inline: var(--space-4);
    }

    .logo {
        font-size: var(--text-base);
        gap: var(--space-2);
    }

    .logo-icon {
        width: 36px;
        height: 36px;
        font-size: var(--text-lg);
    }

    .logo span:not(.logo-icon) {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 375px) {
    .logo span:not(.logo-icon) {
        max-width: 110px;
    }
}

/* ============================================
   HERO SECTION - Mobile spacing
   ============================================ */
@media (max-width: 768px) {
    .hero {
        min-height: calc(100vh - var(--header-height));
        min-height: calc(100svh - var(--header-height));
        padding-top: calc(var(--header-height) + var(--space-4));
        padding-inline: var(--space-4);
        padding-bottom: var(--space-8);
    }

    .hero-content {
        width: 100%;
    }

    .hero-badge {
        font-size: var(--text-xs);
        padding: var(--space-1) var(--space-3);
        margin-bottom: var(--space-4);
    }

    .hero-title {
        font-size: clamp(1.5rem, 7vw, 2.25rem);
        margin-bottom: var(--space-3);
        line-height: 1.3;
    }

    .hero-title br {
        display: none;
    }

    .hero-subtitle {
        font-size: var(--text-sm);
        margin-bottom: var(--space-6);
        padding-inline: var(--space-2);
    }

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

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

/* ============================================
   BUTTONS - Touch-friendly sizing (min 44px)
   ============================================ */
@media (max-width: 768px) {
    .btn {
        min-height: 44px;
        padding: var(--space-3) var(--space-5);
        font-size: var(--text-sm);
    }

    .btn-sm {
        min-height: 40px;
        padding: var(--space-2) var(--space-4);
    }

    .btn-lg {
        min-height: 52px;
        padding: var(--space-4) var(--space-6);
        font-size: var(--text-base);
    }
}

/* ============================================
   CARDS & SERVICE GRID - Mobile layout
   ============================================ */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

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

    .service-card .card-icon {
        width: 64px;
        height: 64px;
        font-size: var(--text-3xl);
    }

    .card-title {
        font-size: var(--text-lg);
    }

    .card-description {
        font-size: var(--text-sm);
        line-height: 1.6;
    }
}

/* ============================================
   FORMS - Mobile optimization
   ============================================ */
@media (max-width: 768px) {
    .form-group {
        margin-bottom: var(--space-4);
    }

    .form-input,
    .form-textarea,
    .form-select {
        min-height: 48px;
        padding: var(--space-3) var(--space-4);
        font-size: 16px;
        /* Prevent iOS zoom on focus */
    }

    .form-textarea {
        min-height: 100px;
    }

    .form-label {
        font-size: var(--text-sm);
        margin-bottom: var(--space-2);
    }
}

/* ============================================
   CONSULTATION PAGE - Mobile layout
   ============================================ */
@media (max-width: 768px) {
    .page-content {
        padding-top: calc(var(--header-height) + var(--space-6));
        padding-bottom: var(--space-10);
    }

    .page-header {
        margin-bottom: var(--space-6);
    }

    .page-title {
        font-size: var(--text-2xl);
    }

    .page-description {
        font-size: var(--text-sm);
    }

    .consultation-card {
        padding: var(--space-5);
        border-radius: var(--radius-xl);
    }

    .consultation-form {
        max-width: 100%;
    }
}

/* ============================================
   HEXAGRAM DISPLAY - Mobile stacking
   ============================================ */
@media (max-width: 768px) {
    .hexagram-container {
        flex-direction: column;
        gap: var(--space-4);
        align-items: center;
    }

    .hexagram {
        width: 100%;
        max-width: 280px;
    }

    .hexagram-lines {
        padding: var(--space-3);
    }

    .hexagram-line {
        min-width: 80px;
        height: 10px;
    }

    .hexagram-name {
        font-size: var(--text-base);
    }

    .hexagram-chinese {
        font-size: var(--text-xl);
    }

    /* Hide arrow on mobile, show vertical indicator */
    .hexagram-container>div[style*="→"],
    .hexagram-container .hexagram-arrow {
        display: none;
    }
}

/* ============================================
   RESULT CONTAINER - Mobile spacing
   ============================================ */
@media (max-width: 768px) {
    .result-container {
        padding: var(--space-4);
        margin-top: var(--space-6);
        border-radius: var(--radius-lg);
    }

    .result-header {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .result-title {
        font-size: var(--text-lg);
    }

    .result-content {
        font-size: var(--text-sm);
        line-height: 1.7;
    }

    .result-content h3,
    .result-content h4 {
        font-size: var(--text-base);
        margin-top: var(--space-4);
    }

    .result-content ul,
    .result-content ol {
        padding-left: var(--space-4);
    }
}

/* ============================================
   NUMEROLOGY CHART - Mobile grid
   ============================================ */
@media (max-width: 768px) {
    .numerology-chart {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .numerology-item {
        padding: var(--space-3);
    }

    .numerology-number {
        font-size: 2rem;
    }

    .numerology-label {
        font-size: var(--text-xs);
    }
}

@media (max-width: 375px) {
    .numerology-chart {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }
}

/* ============================================
   MODALS - Full-screen on mobile
   ============================================ */
@media (max-width: 768px) {
    .modal {
        width: 100%;
        max-width: calc(100vw - var(--space-8));
        max-height: 85vh;
        padding: var(--space-5);
        border-radius: var(--radius-xl);
    }

    .modal-header {
        padding-bottom: var(--space-3);
        margin-bottom: var(--space-3);
    }

    .modal-title {
        font-size: var(--text-lg);
    }

    .modal-footer {
        flex-direction: column-reverse;
        gap: var(--space-2);
    }

    .modal-footer .btn {
        width: 100%;
    }
}

/* ============================================
   PAYMENT MODAL - Mobile optimization
   ============================================ */
@media (max-width: 768px) {
    .payment-modal {
        width: calc(100% - var(--space-6));
        max-height: 90vh;
        padding: var(--space-4);
    }

    .payment-qr img {
        max-width: 200px;
    }

    .payment-info {
        font-size: var(--text-sm);
    }
}

/* ============================================
   CTA SECTION - Mobile layout
   ============================================ */
@media (max-width: 768px) {
    .cta-section {
        padding-block: var(--space-10);
    }

    .cta-box {
        padding: var(--space-6);
        margin-inline: var(--space-2);
        border-radius: var(--radius-xl);
    }

    .cta-title {
        font-size: var(--text-xl);
    }

    .cta-description {
        font-size: var(--text-sm);
    }

    .btn-cta {
        width: 100%;
        padding: var(--space-4) var(--space-6);
        font-size: var(--text-base);
    }
}

/* ============================================
   FOOTER - Mobile stacking
   ============================================ */
@media (max-width: 768px) {
    .footer {
        padding-block: var(--space-8);
    }

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

    .footer-brand {
        justify-content: center;
    }

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

    .footer-copyright {
        margin-top: var(--space-2);
    }
}

/* ============================================
   BADGES - Mobile sizing
   ============================================ */
@media (max-width: 768px) {
    .badge {
        font-size: 11px;
        padding: 4px 10px;
    }
}

/* ============================================
   SHARE BUTTONS - Mobile layout
   ============================================ */
@media (max-width: 768px) {
    .share-buttons {
        flex-direction: column;
        gap: var(--space-2);
    }

    .btn-share {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
}

/* ============================================
   TABLES - Horizontal scroll
   ============================================ */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 500px;
    }
}

/* ============================================
   ALERTS - Mobile layout
   ============================================ */
@media (max-width: 768px) {
    .alert {
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-3);
    }

    .alert-icon {
        margin-bottom: var(--space-1);
    }
}

/* ============================================
   TOOLTIPS - Mobile adjustments
   ============================================ */
@media (max-width: 768px) {
    [data-tooltip]::after {
        font-size: var(--text-xs);
        max-width: 200px;
        white-space: normal;
    }
}

/* ============================================
   LOADING STATES - Center on mobile
   ============================================ */
@media (max-width: 768px) {
    .loading-overlay {
        padding: var(--space-4);
    }

    .loading-text {
        font-size: var(--text-sm);
    }
}

/* ============================================
   SECTION SPACING - Mobile specific
   ============================================ */
@media (max-width: 768px) {
    .services {
        padding-block: var(--space-12);
    }

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

    .section-title {
        font-size: var(--text-2xl);
    }

    .section-subtitle {
        font-size: var(--text-sm);
        padding-inline: var(--space-2);
    }
}

/* ============================================
   FIX: Trigram display alignment
   ============================================ */
@media (max-width: 768px) {
    .trigram-info {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: var(--text-xs);
        padding: 2px 6px;
    }

    .hexagram-info-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2);
    }
}

/* ============================================
   HISTORY PAGE - Mobile cards
   ============================================ */
@media (max-width: 768px) {
    .history-item {
        padding: var(--space-4);
    }

    .history-item-header {
        flex-direction: column;
        gap: var(--space-2);
        align-items: flex-start;
    }

    .history-item-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .history-item-actions .btn {
        flex: 1;
        min-width: 100px;
    }
}

/* ============================================
   SAFE AREA - For notched devices
   ============================================ */
@supports (padding: max(0px)) {
    .header {
        padding-top: max(0px, env(safe-area-inset-top));
    }

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

    @media (max-width: 768px) {
        .page-content {
            padding-left: max(var(--space-4), env(safe-area-inset-left));
            padding-right: max(var(--space-4), env(safe-area-inset-right));
        }
    }
}

/* ============================================
   LANDSCAPE MOBILE FIXES
   ============================================ */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding-block: var(--space-8);
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .hero-actions .btn {
        width: auto;
        flex: 1;
        min-width: 150px;
    }
}

/* ============================================
   ACCESSIBILITY - Touch spacing
   ============================================ */
@media (max-width: 768px) {

    /* Ensure minimum 8px gap between touch targets */
    .nav-link+.nav-link {
        margin-top: var(--space-1);
    }

    button:not(:last-child),
    .btn:not(:last-child) {
        margin-bottom: var(--space-2);
    }

    /* Make sure links in paragraphs are tappable */
    p a,
    .result-content a {
        display: inline-block;
        padding: 2px 0;
    }
}

/* ============================================
   SCROLLBAR - Hide on mobile for cleaner UI
   ============================================ */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.15);
    }
}

/* ============================================
   HISTORY PAGE - Enhanced mobile
   ============================================ */
@media (max-width: 768px) {
    .history-card {
        padding: var(--space-4);
        margin-bottom: var(--space-3);
    }

    .history-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .history-card-title {
        font-size: var(--text-sm);
    }

    .history-card-date {
        font-size: var(--text-xs);
    }

    .history-card-content {
        font-size: var(--text-sm);
        line-height: 1.6;
    }

    .history-card-actions {
        flex-wrap: wrap;
        gap: var(--space-2);
        margin-top: var(--space-3);
    }

    .history-card-actions .btn {
        flex: 1;
        min-width: 80px;
        font-size: var(--text-xs);
        padding: var(--space-2) var(--space-3);
    }

    /* Empty state */
    .history-empty {
        padding: var(--space-8) var(--space-4);
        text-align: center;
    }

    .history-empty-icon {
        font-size: 3rem;
        margin-bottom: var(--space-4);
    }

    .history-empty-text {
        font-size: var(--text-sm);
    }
}

/* ============================================
   FOOTER CONTACT - Mobile stacking
   ============================================ */
@media (max-width: 768px) {
    .footer-contact {
        flex-direction: column;
        gap: var(--space-2);
        align-items: center;
    }

    .footer-link {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--text-sm);
        padding: var(--space-2) var(--space-4);
        background: var(--glass-bg);
        border-radius: var(--radius-md);
        min-height: 44px;
    }

    .footer-links {
        width: 100%;
    }

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

/* ============================================
   PAGE SUBTITLE - Mobile text
   ============================================ */
@media (max-width: 768px) {
    .page-subtitle {
        font-size: var(--text-sm);
        line-height: 1.6;
    }

    .page-subtitle br {
        display: none;
    }
}

/* ============================================
   COIN TOSS ANIMATION - Mobile sizing
   ============================================ */
@media (max-width: 768px) {
    .coin-container {
        transform: scale(0.8);
    }

    .coin-instruction {
        font-size: var(--text-sm);
        padding: var(--space-3);
    }
}

/* ============================================
   AI RESULT STREAMING - Mobile
   ============================================ */
@media (max-width: 768px) {
    .ai-response {
        font-size: var(--text-sm);
        line-height: 1.7;
    }

    .ai-response h2 {
        font-size: var(--text-base);
    }

    .ai-response h3 {
        font-size: var(--text-sm);
    }
}

/* ============================================
   PRICE DISPLAY - Mobile
   ============================================ */
@media (max-width: 768px) {
    .price-display {
        font-size: var(--text-lg);
    }

    .price-original {
        font-size: var(--text-sm);
    }

    .price-discount {
        font-size: var(--text-xs);
        padding: 2px 6px;
    }
}

/* ============================================
   PRINT STYLES - Optimize for mobile print
   ============================================ */
@media print {

    .header,
    .nav-mobile-toggle,
    .footer,
    .btn-share,
    .modal-backdrop {
        display: none !important;
    }

    .page-content {
        padding-top: 0;
    }

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