/* ==========================================================
   SimplPay Aurora Glass AI
   PATCH-SIMPLPAY-022G-01K

   File:
   /opt/simplpay/static/css/010-responsive.css
   ========================================================== */


/* ==========================================================
   Large Desktop
   ========================================================== */

@media (min-width: 1440px) {

    :root {
        --sp-page-max-width: 1280px;
        --sp-content-max-width: 760px;
        --sp-page-gutter: 32px;
    }

    .sp-page-shell {
        padding-top:
            calc(
                var(--sp-safe-top)
                +
                var(--sp-space-6)
            );
    }

    .sp-dashboard-grid {
        gap:
            var(--sp-space-4);
    }

    .sp-action-grid {
        gap:
            var(--sp-space-4);
    }

    .sp-summary-grid {
        gap:
            var(--sp-space-4);
    }

}


/* ==========================================================
   Desktop
   ========================================================== */

@media (min-width: 1024px) {

    .sp-page-shell {
        padding-left:
            max(
                28px,
                var(--sp-safe-left)
            );

        padding-right:
            max(
                28px,
                var(--sp-safe-right)
            );
    }

    .sp-dashboard-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );
    }

    .sp-action-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );
    }

    .sp-summary-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );
    }

    .sp-modal-surface {
        width:
            min(
                100%,
                560px
            );
    }

}


/* ==========================================================
   Tablet
   ========================================================== */

@media (
    min-width: 768px
)
and (
    max-width: 1023px
) {

    :root {
        --sp-page-gutter: 22px;
    }

    .sp-dashboard-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }

    .sp-action-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }

    .sp-summary-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }

    .sp-grid-4 {
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }

}


/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 767px) {

    :root {
        --sp-page-gutter: 16px;
        --sp-bottom-nav-height: 74px;
        --sp-header-height: 64px;
    }

    .sp-page-shell {
        padding:
            calc(
                var(--sp-safe-top)
                +
                var(--sp-space-3)
            )
            max(
                16px,
                var(--sp-safe-right)
            )
            calc(
                var(--sp-bottom-nav-height)
                +
                var(--sp-safe-bottom)
                +
                var(--sp-space-7)
            )
            max(
                16px,
                var(--sp-safe-left)
            );
    }

    .sp-main-header {
        gap:
            var(--sp-space-3);
    }

    .sp-main-title {
        font-size:
            clamp(
                24px,
                7vw,
                30px
            );
    }

    .sp-dashboard-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

    .sp-action-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

    .sp-summary-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

    .sp-card,
    .sp-panel {
        border-radius:
            var(--sp-radius-xl);
    }

    .sp-modal-surface {
        width:
            min(
                100%,
                520px
            );

        max-height:
            88dvh;

        padding:
            var(--sp-space-5);
    }

    .sp-sheet {
        left:
            max(
                12px,
                var(--sp-safe-left)
            );

        right:
            max(
                12px,
                var(--sp-safe-right)
            );

        bottom:
            max(
                12px,
                var(--sp-safe-bottom)
            );

        padding:
            var(--sp-space-4);
    }

    .sp-navbar {
        min-height:
            70px;

        border-radius:
            24px;
    }

    .sp-nav-item {
        min-width:
            52px;

        min-height:
            50px;
    }

}


/* ==========================================================
   Small Mobile
   ========================================================== */

@media (max-width: 430px) {

    :root {
        --sp-page-gutter: 14px;
    }

    .sp-page-shell {
        padding-left:
            max(
                14px,
                var(--sp-safe-left)
            );

        padding-right:
            max(
                14px,
                var(--sp-safe-right)
            );
    }

    .sp-dashboard-grid,
    .sp-action-grid,
    .sp-summary-grid,
    .sp-grid-2,
    .sp-grid-3,
    .sp-grid-4 {
        grid-template-columns:
            1fr;
    }

    .sp-main-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .sp-main-header-right {
        width:
            100%;

        justify-content:
            flex-end;
    }

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

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

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

    .sp-action-card {
        min-height:
            96px;
    }

    .sp-form-row {
        grid-template-columns:
            1fr;
    }

    .sp-actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .sp-actions > * {
        width:
            100%;
    }

    .sp-modal-footer {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .sp-modal-footer > * {
        width:
            100%;
    }

    .sp-modal-surface {
        padding:
            var(--sp-space-4);

        border-radius:
            var(--sp-radius-xl);
    }

    .sp-sheet {
        border-radius:
            var(--sp-radius-xl);
    }

    .sp-navbar {
        padding:
            6px;

        gap:
            2px;
    }

    .sp-nav-item {
        min-width:
            48px;

        padding:
            6px;
    }

    .sp-nav-label {
        max-width:
            58px;
    }

}


/* ==========================================================
   Extra Small Mobile
   ========================================================== */

@media (max-width: 360px) {

    .sp-page-shell {
        padding-left:
            max(
                12px,
                var(--sp-safe-left)
            );

        padding-right:
            max(
                12px,
                var(--sp-safe-right)
            );
    }

    .sp-main-title {
        font-size:
            23px;
    }

    .sp-brand-title {
        font-size:
            17px;
    }

    .sp-brand-mark {
        width:
            40px;

        height:
            40px;
    }

    .sp-button {
        padding-left:
            var(--sp-space-4);

        padding-right:
            var(--sp-space-4);
    }

    .sp-navbar {
        border-radius:
            20px;
    }

}


/* ==========================================================
   Landscape Mobile
   ========================================================== */

@media (
    orientation: landscape
)
and (
    max-height: 520px
) {

    :root {
        --sp-bottom-nav-height: 64px;
    }

    .sp-page-shell {
        padding-top:
            calc(
                var(--sp-safe-top)
                +
                var(--sp-space-2)
            );
    }

    .sp-main-header {
        min-height:
            auto;

        margin-bottom:
            var(--sp-space-3);
    }

    .sp-section {
        margin-top:
            var(--sp-space-4);
    }

    .sp-modal-surface {
        max-height:
            94dvh;
    }

    .sp-sheet {
        max-height:
            90dvh;

        overflow-y:
            auto;
    }

}


/* ==========================================================
   Foldable / Narrow Split Screen
   ========================================================== */

@media (
    max-width: 520px
)
and (
    min-height: 700px
) {

    .sp-horizontal-scroll {
        margin-right:
            calc(
                -1 *
                var(--sp-page-gutter)
            );
    }

}


/* ==========================================================
   Touch Devices
   ========================================================== */

@media (hover: none)
and (pointer: coarse) {

    .sp-card:hover,
    .sp-action-card:hover,
    .sp-app-tile:hover,
    .sp-icon-button:hover,
    .sp-button:hover,
    .sp-hover-lift:hover {
        transform:
            none;
    }

    .sp-card:active,
    .sp-action-card:active,
    .sp-app-tile:active,
    .sp-button:active,
    .sp-icon-button:active {
        transform:
            scale(
                var(--sp-active-scale)
            );
    }

    .sp-button,
    .sp-icon-button,
    .sp-nav-item,
    .sp-app-tile {
        min-height:
            44px;
    }

}


/* ==========================================================
   Mouse / Precision Pointer
   ========================================================== */

@media (hover: hover)
and (pointer: fine) {

    .sp-card,
    .sp-action-card,
    .sp-app-tile,
    .sp-button,
    .sp-icon-button {
        cursor:
            pointer;
    }

}


/* ==========================================================
   High DPI
   ========================================================== */

@media (
    min-resolution: 2dppx
) {

    .sp-card,
    .sp-panel,
    .sp-navbar,
    .sp-modal-surface,
    .sp-sheet {
        border-width:
            .5px;
    }

}


/* ==========================================================
   PWA Standalone
   ========================================================== */

@media (
    display-mode: standalone
) {

    body {
        overscroll-behavior-y:
            none;
    }

    .sp-page-shell {
        padding-bottom:
            calc(
                var(--sp-bottom-nav-height)
                +
                var(--sp-safe-bottom)
                +
                var(--sp-space-8)
            );
    }

}


/* ==========================================================
   Fullscreen PWA
   ========================================================== */

@media (
    display-mode: fullscreen
) {

    .sp-page-shell {
        padding-top:
            calc(
                var(--sp-safe-top)
                +
                var(--sp-space-3)
            );
    }

}


/* ==========================================================
   Reduced Transparency
   ========================================================== */

@media (
    prefers-reduced-transparency: reduce
) {

    .sp-card,
    .sp-panel,
    .sp-navbar,
    .sp-modal-surface,
    .sp-sheet,
    .sp-input,
    .sp-button {
        backdrop-filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;
    }

}


/* ==========================================================
   Reduced Motion
   ========================================================== */

@media (
    prefers-reduced-motion: reduce
) {

    html {
        scroll-behavior:
            auto;
    }

    .sp-horizontal-scroll {
        scroll-snap-type:
            none;
    }

}


/* ==========================================================
   High Contrast
   ========================================================== */

@media (
    prefers-contrast: more
) {

    .sp-card,
    .sp-panel,
    .sp-navbar,
    .sp-modal-surface,
    .sp-sheet,
    .sp-input,
    .sp-select,
    .sp-button {
        border-width:
            2px;
    }

}


/* ==========================================================
   Print
   ========================================================== */

@media print {

    .sp-navbar,
    .sp-fixed-bottom,
    .sp-icon-button,
    .sp-sheet,
    .sp-overlay,
    .sp-toast,
    .sp-aurora,
    .sp-aurora-noise,
    .sp-aurora-vignette {
        display:
            none !important;
    }

    .sp-page-shell {
        width:
            100%;

        max-width:
            none;

        padding:
            0;
    }

    .sp-card,
    .sp-panel,
    .sp-modal-surface {
        background:
            #ffffff !important;

        border:
            1px solid
            #dddddd !important;

        box-shadow:
            none !important;

        backdrop-filter:
            none !important;

        -webkit-backdrop-filter:
            none !important;
    }

}