/* ===== iOS-STYLE RESPONSIVE DESIGN ===== */
/* Mobile-first подход */

/* Tablet and Desktop */
@media (min-width: 768px) {
    .container {
        padding: var(--space-3xl);
    }

    .nav-container {
        padding: var(--space-lg) var(--space-3xl);
    }

    .logo {
        font-size: var(--font-size-2xl);
    }

    nav a {
        font-size: var(--font-size-base);
    }

    nav ul {
        gap: var(--space-2xl);
    }

    .card {
        padding: var(--space-3xl);
    }
    
    .modern-player-card {
        max-width: 480px;
        padding: var(--space-3xl);
    }
}

/* Mobile Devices */
@media (max-width: 768px) {
    .container {
        padding: var(--space-lg);
    }

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

    .meditation-subtitle {
        font-size: var(--font-size-sm);
    }

    .track-box {
        padding: var(--space-md);
    }

    .current-track {
        padding: var(--space-sm) var(--space-md);
    }

    .track-title {
        font-size: var(--font-size-sm);
    }

    .track-favorite,
    .track-select {
        width: 32px;
        height: 32px;
    }

    .modal-tab {
        padding: var(--space-sm) var(--space-lg);
        font-size: var(--font-size-xs);
    }

    .ios-notification {
        top: var(--space-lg);
        left: var(--space-lg);
        right: var(--space-lg);
        transform: translateY(-100px);
        max-width: none;
        min-width: auto;
    }

    .ios-notification.show {
        transform: translateY(0);
    }

    .ios-notification.hide {
        transform: translateY(-100px);
    }

    .track-actions {
        gap: var(--space-xs);
    }

    .modal-content {
        width: 95%;
        max-width: 90vw;
        padding: 0;
    }

    .modal-header {
        padding: var(--space-xl);
    }

    .modal-body {
        padding: var(--space-xl);
    }

    .modal-actions {
        padding: var(--space-xl);
        gap: var(--space-sm);
    }

    .modal-actions button {
        padding: var(--space-md) var(--space-xl);
        font-size: var(--font-size-base);
        border-radius: var(--radius-md);
        min-height: 48px;
    }
    
    .welcome-heading {
        font-size: var(--font-size-2xl);
    }
    
    .welcome-text {
        font-size: var(--font-size-base);
    }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
    .container {
        padding: var(--space-md);
    }
    
    .modern-player-card {
        padding: var(--space-lg);
        margin: var(--space-md) auto;
    }

    .control-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }

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

    .combination-item {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-lg);
    }

    .combination-actions {
        justify-content: center;
        gap: var(--space-sm);
    }

    .backgrounds-list {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .modal-actions {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .modal-content {
        border-radius: var(--radius-xl);
    }
    
    .welcome-heading {
        font-size: var(--font-size-xl);
    }
    
    .section-heading {
        font-size: var(--font-size-xl);
    }
    
    .card {
        padding: var(--space-xl);
    }
}

/* Small Tablets */
@media (max-width: 576px) {
    .track-box {
        padding: var(--space-md);
    }

    .current-track {
        padding: var(--space-sm) var(--space-md);
    }

    .track-title {
        font-size: var(--font-size-sm);
    }

    .track-favorite,
    .track-select {
        width: 32px;
        height: 32px;
    }

    .modal-tab {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-size-xs);
    }
    
    .btn {
        width: 100%;
    }
}

/* Landscape Orientation - Mobile */
@media (max-height: 600px) and (orientation: landscape) {
    .modern-player-card {
        margin: var(--space-sm) auto;
        padding: var(--space-lg);
    }
    
    .meditation-header {
        margin-bottom: var(--space-lg);
    }
    
    .player-visualization-modern {
        margin: var(--space-lg) 0;
    }
    
    .modal-content {
        max-height: 95vh;
    }
}

/* Print Styles */
@media print {
    .nav-container,
    .bg-select,
    .bg-options,
    .control-buttons,
    footer {
        display: none !important;
    }
    
    body {
        background: white !important;
    }
    
    .card,
    .modern-player-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}