/* =====================================================
   IGAS Payment App - Responsive Styles
   ===================================================== */

/* ===== MOBILE (Default) ===== */
@media screen and (max-width: 767px) {
    .header {
        padding: var(--space-3);
    }

    .header-title {
        font-size: var(--font-size-base);
    }

    .main-content {
        padding: var(--space-3);
    }

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

    .log-amount {
        font-size: var(--font-size-xl);
    }

    .log-qr {
        max-width: 220px;
    }

    .btn {
        padding: var(--space-3) var(--space-4);
    }

    .modal {
        width: 95%;
        margin: var(--space-3);
    }

    .toast-container {
        left: var(--space-3);
        right: var(--space-3);
    }

    .toast {
        min-width: auto;
        width: 100%;
    }
}

/* ===== TABLET ===== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .app-container {
        max-width: 768px;
        margin: 0 auto;
    }

    .log-qr {
        max-width: 260px;
    }

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

/* ===== DESKTOP ===== */
@media screen and (min-width: 1024px) {
    .app-container {
        max-width: 480px;
        margin: 0 auto;
        box-shadow: var(--shadow-lg);
        min-height: 100vh;
    }

    body {
        background: linear-gradient(135deg, #0a0f1a 0%, #1a2332 100%);
    }

    .log-qr {
        max-width: 300px;
    }
}

/* ===== LANDSCAPE MODE ===== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .log-card {
        padding: var(--space-3);
    }

    .log-qr-container {
        padding: var(--space-2);
        margin: var(--space-2) 0;
    }

    .log-qr {
        max-width: 150px;
    }

    .carousel-indicators {
        padding: var(--space-2) 0;
    }
}

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

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

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

/* ===== DARK MODE (already default, but explicit) ===== */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}