/* ==========================================================================
   PAYPOINT KIOSK - RESPONSIVE ARCHITECTURE
   ==========================================================================
   Supports Landscape (1920x1080) and Portrait Kiosk (1080x1920) modes,
   along with desktop and tablet demo previews.
   ========================================================================== */

/* ==========================================================================
   PORTRAIT KIOSK MODE (1080 × 1920 & Portrait orientation)
   ========================================================================== */
@media (max-aspect-ratio: 1/1), (orientation: portrait), (max-width: 1080px) {

    /* Header */
    .kiosk-header {
        padding: 0 28px;
        height: 80px;
    }

    .brand-name {
        font-size: 22px;
    }

    .header-center {
        display: none !important; /* Hide header stepper in compact/portrait to save space */
    }

    .header-clock {
        min-width: auto;
    }

    .clock-time {
        font-size: 14px;
    }

    .clock-date {
        display: none;
    }

    .kiosk-status-badge .status-terminal-id {
        display: none;
    }

    /* Screen Content Area */
    .screen-content-wrapper {
        padding: 28px 24px 16px 24px;
        overflow-y: auto;
    }

    .screen-header-block {
        margin-bottom: 24px;
    }

    .screen-title {
        font-size: 30px;
        letter-spacing: -0.3px;
    }

    .screen-subtitle {
        font-size: 16px;
    }

    /* Bottom Navigation Bar */
    .screen-footer-bar {
        height: 88px;
        padding: 0 24px;
    }

    .btn {
        font-size: 17px;
        min-width: 140px;
        padding: 0 24px;
    }

    .btn-primary {
        height: 60px;
    }

    .btn-secondary {
        height: 56px;
    }

    /* 01 Welcome Screen Portrait */
    .welcome-container {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 30px 24px;
        text-align: center;
    }

    .welcome-hero-content {
        align-items: center;
    }

    .welcome-heading {
        font-size: 38px;
    }

    .welcome-subtext {
        font-size: 18px;
        margin-bottom: 28px;
    }

    .welcome-cta-group {
        flex-direction: column;
        gap: 16px;
        width: 100%;
        max-width: 380px;
        margin-bottom: 32px;
    }

    .welcome-cta-group .btn-primary {
        width: 100%;
        height: 66px;
    }

    .welcome-features-row {
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: left;
    }

    .welcome-visual-panel {
        display: none; /* In vertical kiosk, focus on immediate touch CTA */
    }

    /* 02 Service Grid Portrait */
    .service-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .service-card {
        padding: 22px 24px;
        min-height: 100px;
    }

    .service-icon-box {
        width: 52px;
        height: 52px;
    }

    .service-card-title {
        font-size: 20px;
    }

    .service-card-desc {
        font-size: 14px;
    }

    /* 03 Enter Details Portrait */
    .details-form-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .details-form {
        padding: 24px;
    }

    .kiosk-input {
        height: 56px;
        font-size: 18px;
    }

    .kiosk-keypad-panel {
        padding: 20px;
    }

    .keypad-key {
        height: 58px;
        font-size: 22px;
    }

    /* 04 Payment Method Portrait */
    .payment-method-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .payment-methods-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .payment-option-card {
        flex-direction: column;
        padding: 16px 12px;
        text-align: center;
        gap: 10px;
    }

    .pay-option-icon {
        width: 44px;
        height: 44px;
    }

    .pay-option-title {
        font-size: 15px;
    }

    .pay-option-desc {
        display: none;
    }

    .payment-interactive-area {
        padding: 24px 18px;
        min-height: auto;
    }

    .qr-svg-wrapper {
        width: 180px;
        height: 180px;
    }

    .fintech-credit-card {
        max-width: 320px;
        height: 180px;
        padding: 18px 20px;
    }

    .card-visual-number {
        font-size: 18px;
    }

    /* 05 Confirm Screen Portrait */
    .confirm-card {
        padding: 26px 20px;
    }

    .total-amount {
        font-size: 30px;
    }

    .confirm-security-footer {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    /* 06 Processing Screen Portrait */
    .processing-content-box {
        padding: 40px 24px;
        width: 90%;
    }

    .processing-heading {
        font-size: 26px;
    }

    /* 07 Success Screen Portrait */
    .success-card-box {
        padding: 36px 24px;
    }

    .success-heading {
        font-size: 28px;
    }

    .amt-digits {
        font-size: 36px;
    }

    .success-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .success-actions-group {
        flex-direction: column;
        gap: 12px;
    }

    .btn-success-print, .btn-new-payment {
        width: 100%;
        height: 60px;
    }

    /* 08 Receipt Screen Portrait */
    .receipt-screen-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .thermal-receipt {
        max-width: 380px;
    }

    .receipt-body {
        padding: 24px 20px;
    }

    .receipt-actions-panel {
        max-width: 380px;
        margin: 0 auto;
        width: 100%;
    }

    .action-card {
        padding: 24px 20px;
    }

    /* Global Footer Portrait */
    .kiosk-footer {
        padding: 0 20px;
        height: 60px;
        font-size: 11px;
    }

    .footer-center {
        display: none;
    }
}

/* ==========================================================================
   MEDIUM / TABLET SCREENS (e.g., 768px - 1024px)
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .screen-content-wrapper {
        padding: 30px 40px;
    }

    .service-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .details-form-layout {
        grid-template-columns: 1.2fr 1fr;
        gap: 30px;
    }
}

/* ==========================================================================
   ULTRA-WIDE & FULL 1080p LANDSCAPE (>= 1600px)
   ========================================================================== */
@media (min-width: 1600px) {
    .welcome-heading {
        font-size: 60px;
    }

    .screen-title {
        font-size: 42px;
    }

    .service-card {
        padding: 36px 40px;
    }
}