/**
 * Первый Вагон — Mobile & Telegram Mini App Styles
 * Полная адаптивность для мобильных устройств и TG Mini Apps
 */

/* ========================================
   TELEGRAM MINI APP SPECIFIC
   ======================================== */

/* Safe area insets for notched devices (iPhone X+, etc.) */
:root {
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);

    /* TG Mini App theme variables fallbacks */
    --tg-theme-bg-color: var(--bg-primary);
    --tg-theme-text-color: var(--text-primary);
    --tg-theme-hint-color: var(--text-secondary);
    --tg-theme-link-color: var(--brand-primary);
    --tg-theme-button-color: var(--brand-primary);
    --tg-theme-button-text-color: #ffffff;
    --tg-viewport-height: 100vh;
    --tg-viewport-stable-height: 100vh;
}

/* Telegram Mini App body adjustments */
body.tg-mini-app {
    /* Use TG viewport height for proper sizing */
    min-height: var(--tg-viewport-stable-height, 100vh);
    /* Prevent overscroll/bounce effect */
    overscroll-behavior: none;
    /* Disable text selection for app-like feel */
    -webkit-user-select: none;
    user-select: none;
    /* Smooth scrolling */
    -webkit-overflow-scrolling: touch;
}

/* Allow text selection on specific elements */
body.tg-mini-app .selectable,
body.tg-mini-app p,
body.tg-mini-app h1,
body.tg-mini-app h2,
body.tg-mini-app h3 {
    -webkit-user-select: text;
    user-select: text;
}

/* Hide scrollbar for cleaner look in TG */
body.tg-mini-app::-webkit-scrollbar {
    display: none;
}

body.tg-mini-app {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Adjust header for TG Mini App safe areas */
body.tg-mini-app .header {
    padding-top: calc(var(--spacing-4) + var(--safe-area-top));
}

/* Adjust footer for TG Mini App safe areas */
body.tg-mini-app .footer {
    padding-bottom: calc(var(--spacing-8) + var(--safe-area-bottom));
}

/* Primary CTA buttons in TG should use TG theme */
body.tg-mini-app .btn-primary {
    background-color: var(--tg-theme-button-color, var(--text-primary));
    color: var(--tg-theme-button-text-color, var(--bg-primary));
}

/* ========================================
   TOUCH OPTIMIZATIONS
   ======================================== */

/* Larger touch targets for mobile */
@media (pointer: coarse) {
    .btn {
        min-height: 44px;
        min-width: 44px;
    }

    .nav-link,
    .mobile-nav-link {
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    .faq-question {
        min-height: 56px;
    }

    .calculator-option {
        min-height: 48px;
    }

    .module-tab {
        min-height: 44px;
    }
}

/* Disable hover effects on touch devices */
@media (hover: none) {

    .btn:hover,
    .card:hover,
    .pricing-card:hover,
    .nav-link:hover,
    .faq-question:hover {
        transform: none;
    }

    /* Add active states instead */
    .btn:active {
        opacity: 0.8;
        transform: scale(0.98);
    }

    .card:active,
    .pricing-card:active {
        opacity: 0.95;
    }
}

/* ========================================
   MOBILE (< 768px) - CENTERED DESIGN
   ======================================== */
@media (max-width: 768px) {

    /* ===== MOBILE AURORA BACKGROUND - Make it visible! ===== */
    .ambient-background {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }

    /* Larger, more visible orbs for mobile */
    .orb {
        display: block !important;
        visibility: visible !important;
        opacity: 0.7 !important;
        filter: blur(80px) !important;
    }

    .orb-1 {
        top: -20% !important;
        left: -30% !important;
        width: 150vw !important;
        height: 150vw !important;
        background: radial-gradient(circle, rgba(99, 102, 241, 0.5) 0%, transparent 60%) !important;
    }

    .orb-2 {
        bottom: -20% !important;
        right: -30% !important;
        width: 160vw !important;
        height: 160vw !important;
        background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 60%) !important;
    }

    /* Base adjustments */
    html {
        font-size: 14px;
    }

    .container {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }

    /* Header - hide action buttons on small mobile */
    .header-inner {
        padding: 0 var(--spacing-3);
    }

    .header-actions {
        display: none;
        /* Hide on mobile - they'll be in mobile-nav */
    }

    /* But show notification dropdown in dashboard pages */
    .dashboard-header .header-actions {
        display: flex;
    }

    .dashboard-header .header-actions .header-search {
        display: none;
    }

    /* Mobile notification dropdown positioning */
    .notification-dropdown-wrapper {
        position: static;
    }

    .notification-dropdown {
        position: fixed;
        top: 60px;
        left: var(--spacing-4);
        right: var(--spacing-4);
        width: auto;
    }

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

    .logo-img {
        width: 28px;
        height: 28px;
    }

    /* Hero Section - CENTERED, STACKED VERTICALLY */
    .hero {
        min-height: auto;
        padding: var(--spacing-16) 0 var(--spacing-12);
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-content {
        padding: 0 var(--spacing-4);
        text-align: center;
        width: 100%;
        max-width: 100%;
    }

    .hero-eyebrow {
        padding: var(--spacing-1) var(--spacing-3);
        font-size: var(--text-xs);
        margin-bottom: var(--spacing-6);
    }

    .hero-title {
        font-size: var(--text-2xl);
        margin-bottom: var(--spacing-4);
        text-align: center;
    }

    .hero-description {
        font-size: var(--text-base);
        margin-bottom: var(--spacing-6);
        text-align: center;
    }

    .hero-actions {
        flex-direction: column;
        gap: var(--spacing-3);
        width: 100%;
        align-items: center;
    }

    .hero-actions .btn {
        width: 100%;
        max-width: 280px;
        padding: var(--spacing-3) var(--spacing-5);
    }

    .hero-action-hint {
        margin-top: var(--spacing-4);
        font-size: var(--text-sm);
        justify-content: center;
    }

    /* Dashboard Preview - FULL WIDTH BELOW HERO CONTENT */
    .hero-visual {
        margin-top: var(--spacing-8);
        padding: 0 var(--spacing-4);
        width: 100%;
    }

    .dashboard-preview {
        max-width: 100%;
        padding: var(--spacing-4);
        background: transparent !important;
        border: none !important;
    }

    .hero-visual {
        background: transparent !important;
    }

    .dashboard-preview-header {
        flex-direction: row;
        gap: var(--spacing-2);
    }

    .dashboard-preview-title {
        font-size: var(--text-base);
    }

    .dashboard-trend-card {
        padding: var(--spacing-3);
    }

    .dashboard-trend-title {
        font-size: var(--text-xs);
    }

    .dashboard-stat-value {
        font-size: var(--text-base);
    }

    /* Social Proof / Stats - SINGLE COLUMN */
    .social-proof {
        padding: var(--spacing-10) 0;
    }

    .stats {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--spacing-4);
        align-items: center;
    }

    .stat {
        width: 100%;
        max-width: 280px;
        text-align: center;
        padding: var(--spacing-4);
        background: transparent !important;
        border-radius: var(--radius-lg);
        border: none !important;
    }

    /* Force Transparent Sections and Cards on Mobile - Unified Look */
    section,
    .section,
    .hero,
    .footer,
    .cta-section,
    .social-proof {
        background: transparent !important;
        border: none !important;
    }

    /* Remove backgrounds and borders from all cards for unified design */
    .pain-card,
    .step,
    .pricing-card,
    .pricing-card.featured,
    .testimonial-card,
    .cta-card,
    .calculator-card,
    .trend-card-preview,
    .card {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Remove inner card borders and backgrounds */
    .pricing-card-header,
    .trend-card-header,
    .trend-card-footer,
    .dashboard-preview-header,
    .dashboard-preview-stats,
    .faq-item {
        border: none !important;
        background: transparent !important;
    }

    /* Keep subtle styling for interactive elements */
    .dashboard-trend-card,
    .trend-metric,
    .calculator-option {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    /* Remove featured card glow */
    .pricing-card.featured::before {
        display: none !important;
    }

    .stat-value {
        font-size: var(--text-3xl);
        margin-bottom: var(--spacing-1);
    }

    .stat-label {
        font-size: var(--text-sm);
        color: var(--text-secondary);
    }

    /* Sections */
    .section {
        padding: var(--spacing-12) 0;
    }

    .section-header {
        margin-bottom: var(--spacing-10);
    }

    .section-eyebrow {
        font-size: var(--text-sm);
        margin-bottom: var(--spacing-3);
    }

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

    .section-description {
        font-size: var(--text-base);
    }

    /* Bridge Section */
    .bridge-section {
        padding: var(--spacing-6) 0;
    }

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

    /* Vertical Timeline - Mobile */
    .pain-timeline-vertical {
        margin: var(--spacing-6) auto;
    }

    .timeline-title {
        font-size: var(--text-lg);
        margin-bottom: var(--spacing-6);
    }

    .timeline-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-2);
    }

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

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

    .pain-solution {
        padding: var(--spacing-5);
    }

    /* Case Cards - 1 column on mobile */
    .cases-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
    }

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

    .case-result {
        font-size: var(--text-xl);
    }

    /* Pricing Footnote */
    .pricing-footnote {
        padding: var(--spacing-4);
    }

    /* Solution Section - CENTERED */
    .solution-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--spacing-8);
        align-items: center;
    }

    .solution-content {
        order: 2;
        text-align: center;
        max-width: 100%;
    }

    .solution-content ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .solution-visual {
        order: 1;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* Trend Card Preview */
    .trend-card-preview {
        max-width: 100%;
    }

    .trend-card-body {
        padding: var(--spacing-4);
    }

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

    .trend-card-metrics {
        gap: var(--spacing-2);
    }

    .trend-metric {
        padding: var(--spacing-2);
    }

    .trend-metric-value {
        font-size: var(--text-base);
    }

    .trend-metric-label {
        font-size: 10px;
    }

    /* Steps - CENTERED SINGLE COLUMN */
    .steps {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--spacing-6);
        align-items: center;
    }

    .step {
        width: 100%;
        max-width: 350px;
        padding: var(--spacing-6);
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Background and border removed via unified transparent rule above */
    }

    .step::after {
        display: none;
    }

    .step-number {
        width: 56px;
        height: 56px;
        font-size: var(--text-xl);
        margin: 0 auto var(--spacing-4);
    }

    .step-title {
        font-size: var(--text-lg);
        margin-bottom: var(--spacing-2);
        text-align: center;
    }

    .step-text {
        font-size: var(--text-sm);
        text-align: center;
        color: var(--text-secondary);
    }

    /* Modules Tabs */
    .modules-tabs {
        gap: var(--spacing-2);
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: var(--spacing-2);
        margin-left: calc(-1 * var(--spacing-4));
        margin-right: calc(-1 * var(--spacing-4));
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .modules-tabs::-webkit-scrollbar {
        display: none;
    }

    .module-tab {
        padding: var(--spacing-2) var(--spacing-4);
        font-size: var(--text-xs);
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Calculator */
    .calculator-card {
        padding: var(--spacing-5);
    }

    .calculator-question {
        font-size: var(--text-base);
    }

    .calculator-options {
        grid-template-columns: 1fr;
        gap: var(--spacing-2);
    }

    .calculator-option {
        padding: var(--spacing-3);
        font-size: var(--text-sm);
    }

    .calculator-result-value {
        font-size: var(--text-4xl);
    }

    .calculator-result-label {
        font-size: var(--text-base);
    }

    /* Pricing - CENTERED SINGLE COLUMN */
    .pricing-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--spacing-6);
        align-items: center;
    }

    .pricing-card {
        width: 100%;
        max-width: 380px;
        padding: var(--spacing-6);
        text-align: center;
        /* Background, border, and shadow removed via unified transparent rule above */
    }

    .pricing-card.featured {
        margin: 0;
        /* Glow effect removed via unified rule above */
    }

    .pricing-badge {
        font-size: var(--text-xs);
        padding: var(--spacing-1) var(--spacing-4);
    }

    .pricing-card-header {
        text-align: center;
    }

    .pricing-name {
        font-size: var(--text-xl);
    }

    .pricing-amount {
        font-size: var(--text-4xl);
    }

    .pricing-currency {
        font-size: var(--text-xl);
    }

    .pricing-features {
        text-align: left;
    }

    .pricing-feature {
        padding: var(--spacing-2) 0;
        font-size: var(--text-sm);
    }

    .pricing-cta {
        padding: var(--spacing-4);
        width: 100%;
    }

    /* Testimonials - CENTERED SINGLE COLUMN */
    .testimonials-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--spacing-4);
        align-items: center;
    }

    .testimonial-card {
        width: 100%;
        max-width: 400px;
        padding: var(--spacing-6);
        text-align: center;
        /* Background and border removed via unified transparent rule above */
    }

    .testimonial-quote {
        font-size: var(--text-base);
        margin-bottom: var(--spacing-5);
        text-align: center;
    }

    .testimonial-author {
        flex-direction: column;
        gap: var(--spacing-3);
    }

    .testimonial-author-info {
        text-align: center;
    }

    /* FAQ */
    .faq-question {
        padding: var(--spacing-4) 0;
        font-size: var(--text-base);
    }

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

    .faq-answer-inner {
        padding-bottom: var(--spacing-4);
        font-size: var(--text-sm);
    }

    /* CTA Section - CENTERED */
    .cta-card {
        padding: var(--spacing-8);
        text-align: center;
        /* Background, border, and pseudo-element removed via unified transparent rule above */
    }

    /* Remove CTA card pseudo-element overlay */
    .cta-card::before {
        display: none !important;
    }

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

    .cta-description {
        font-size: var(--text-base);
        margin-bottom: var(--spacing-6);
    }

    .cta-actions {
        flex-direction: column;
        gap: var(--spacing-3);
        width: 100%;
        align-items: center;
    }

    .cta-actions .btn {
        width: 100%;
        max-width: 320px;
    }

    /* Footer - CENTERED */
    .footer {
        padding: var(--spacing-10) 0 var(--spacing-6);
        text-align: center;
    }

    .footer-inner {
        padding: 0 var(--spacing-4);
    }

    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--spacing-8);
        align-items: center;
    }

    .footer-brand {
        text-align: center;
        max-width: 100%;
    }

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

    .footer-brand-description {
        font-size: var(--text-sm);
        text-align: center;
    }

    .footer-column {
        text-align: center;
    }

    .footer-column-title {
        font-size: var(--text-sm);
        margin-bottom: var(--spacing-3);
    }

    .footer-links {
        align-items: center;
    }

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

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

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

    /* Mobile Navigation */
    .mobile-nav {
        display: none;
        /* Hidden by default */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 9999;
        background-color: var(--bg-primary);
        flex-direction: column;
        align-items: center;

        padding: var(--spacing-16) var(--spacing-4);
        padding-top: calc(var(--spacing-16) + var(--safe-area-top));
        padding-bottom: calc(var(--spacing-8) + var(--safe-area-bottom));
    }

    .mobile-nav.active {
        display: flex !important;
        /* Force show when active */
    }

    .mobile-nav-link {
        padding: var(--spacing-3);
        font-size: var(--text-lg);
    }

    .mobile-nav-close {
        top: calc(var(--spacing-4) + var(--safe-area-top));
    }
}

/* ========================================
   LANDSCAPE MOBILE
   ======================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: var(--spacing-16) 0 var(--spacing-8);
    }

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

    .hero-visual {
        display: none;
    }

    .section {
        padding: var(--spacing-10) 0;
    }
}

/* ========================================
   TABLET (768px - 1024px)
   ======================================== */
@media (min-width: 481px) and (max-width: 768px) {

    /* Stats horizontal layout */
    .stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-6);
    }

    .stat {
        text-align: center;
    }

    /* Pain cards 2-column */
    .pain-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Steps 2-column */
    .steps {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Testimonials grid */
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonial-card:last-child {
        grid-column: span 2;
        max-width: 50%;
        margin: 0 auto;
    }
}

/* ========================================
   HIGH DPI / RETINA SCREENS
   ======================================== */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .logo-img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* ========================================
   REDUCED MOTION
   ======================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hero-eyebrow-dot {
        animation: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ========================================
   DARK MODE ENHANCEMENTS FOR OLED
   ======================================== */
@media (prefers-color-scheme: dark) {

    /* True black for OLED screens - already dark theme but optimize */
    :root {
        --bg-primary: #000000;
    }

    /* Restore for non-OLED if needed */
    body:not(.oled-mode) {
        --bg-primary: #0A0A0B;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {

    .header,
    .footer,
    .mobile-nav,
    .mobile-menu-btn,
    .hero-visual,
    .cta-section {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .hero {
        min-height: auto;
        padding: 2rem 0;
    }

    .section {
        padding: 1rem 0;
    }
}

/* ========================================
   UTILITY CLASSES FOR RESPONSIVE
   ======================================== */

/* Hide on mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
.show-mobile {
    display: none !important;
}

@media (max-width: 768px) {
    .show-mobile {
        display: block !important;
    }

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

/* Flex column on mobile */
@media (max-width: 768px) {
    .flex-col-mobile {
        flex-direction: column;
    }
}

/* Full width on mobile */
@media (max-width: 768px) {
    .w-full-mobile {
        width: 100% !important;
    }
}

/* Text center on mobile */
@media (max-width: 768px) {
    .text-center-mobile {
        text-align: center !important;
    }
}