/* =========================================================
   PHONEORIGIN RESPONSIVE V1
   Mobile + Tablet + Desktop
   Loaded AFTER phoneorigin-premium.css
   ========================================================= */


/* =========================================================
   GLOBAL SAFETY
   ========================================================= */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: clip;
}

body {
    overflow-x: clip;
}

.po-main {
    width: 100%;
}

.po-main img,
.po-main svg,
.po-main video,
.po-main canvas {
    max-width: 100%;
    height: auto;
}

.po-main input,
.po-main select,
.po-main textarea,
.po-main button {
    max-width: 100%;
}

.po-mono,
.po-order-number,
.po-result-content {
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* =========================================================
   TABLE SAFETY
   Page itself never horizontally scrolls.
   Wide tables may scroll inside their own container.
   ========================================================= */

.po-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}

.po-table-wrap table {
    width: 100%;
}


/* =========================================================
   MODAL SAFETY
   ========================================================= */

.po-modal-overlay {
    padding: 20px;

    overflow-y: auto;

    overscroll-behavior: contain;
}

.po-modal {
    width: min(100%, 680px);
    max-width: 100%;

    max-height: calc(100dvh - 40px);

    overflow-y: auto;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;
}

@supports not (height: 100dvh) {

    .po-modal {
        max-height: calc(100vh - 40px);
    }

}

.po-modal-form,
.po-modal-content {
    min-width: 0;
}

.po-modal input,
.po-modal select,
.po-modal textarea {
    width: 100%;
}


/* =========================================================
   NAV GENERAL
   ========================================================= */

.po-nav-links form {
    margin: 0;
}

.po-nav-toggle {
    cursor: pointer;
    flex: 0 0 auto;
}


/* =========================================================
   LARGE TABLET / SMALL DESKTOP
   1100px and below
   ========================================================= */

@media (max-width: 1100px) {

    .po-container {
        width: calc(100% - 32px);
    }

    .po-nav-inner {
        width: calc(100% - 32px);
        gap: 18px;
    }


    /* HOME */

    .po-home-hero {
        grid-template-columns:
            minmax(0, 1.35fr)
            minmax(280px, .75fr);

        gap: 20px;
    }

    .po-home-hero h1 {
        font-size:
            clamp(36px, 5.3vw, 52px);
    }


    /* PRODUCTS */

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


    /* ACCOUNT */

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


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


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


    /* ORDER DETAIL */

    .po-order-detail-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   TABLET / MOBILE NAV
   860px and below
   ========================================================= */

@media (max-width: 860px) {

    .po-nav-inner {
        min-height: 66px;
    }

    .po-nav-toggle {
        display: block;
    }


    .po-nav-links {
        position: absolute;

        top: calc(100% + 1px);
        left: 16px;
        right: 16px;

        display: none;

        flex-direction: column;
        align-items: stretch;

        gap: 4px;

        padding: 12px;

        max-height:
            calc(100dvh - 90px);

        overflow-y: auto;

        border:
            1px solid var(--po-border);

        border-radius: 15px;

        background:
            rgba(17,18,23,.98);

        box-shadow:
            0 22px 55px
            rgba(0,0,0,.42);

        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
    }


    .po-nav-links.open {
        display: flex;
    }


    .po-nav-links > a {
        width: 100%;

        min-height: 46px;

        display: flex;
        align-items: center;

        padding: 11px 13px;
    }


    .po-nav-links > a.active {
        box-shadow:
            inset 3px 0 0
            var(--po-accent-light);
    }


    .po-nav-links form {
        width: 100%;
    }


    .po-logout {
        width: 100%;
        min-height: 46px;

        text-align: left;
    }


    /* HOME HERO */

    .po-home-hero {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .po-home-hero-content {
        padding-bottom: 20px;
    }

    .po-home-account-mini {
        width: 100%;
    }


    /* DASHBOARD */

    .po-account-summary {
        grid-template-columns: 1fr;
    }


    /* ORDER DETAILS */

    .po-order-detail-grid {
        grid-template-columns: 1fr;
    }


    /* WIDE TABLES */

    .po-table-wrap table {
        min-width: 660px;
    }

}


/* =========================================================
   PHONE / PORTRAIT TABLET
   767px and below
   ========================================================= */

@media (max-width: 767px) {

    /* SAFE MOBILE GUTTERS */

    .po-container {
        width: 100%;

        padding-left:
            max(
                16px,
                env(safe-area-inset-left)
            );

        padding-right:
            max(
                16px,
                env(safe-area-inset-right)
            );
    }


    .po-nav-inner {
        width: 100%;

        padding-left:
            max(
                16px,
                env(safe-area-inset-left)
            );

        padding-right:
            max(
                16px,
                env(safe-area-inset-right)
            );
    }


    .po-main {
        min-height:
            calc(100dvh - 66px);

        padding-bottom:
            max(
                48px,
                env(safe-area-inset-bottom)
            );
    }


    /* TYPOGRAPHY */

    .po-home-hero {
        margin-top: 30px;
    }

    .po-home-hero-content {
        padding-top: 15px;
    }

    .po-home-hero h1 {
        margin-top: 8px;

        font-size:
            clamp(31px, 8.7vw, 42px);

        line-height: 1.08;

        letter-spacing: -1.5px;
    }


    .po-home-hero-content > p {
        font-size: 15px;
        line-height: 1.65;
    }


    .po-section-heading h2 {
        font-size: 25px;
        line-height: 1.2;
    }


    .po-page-header h1 {
        font-size:
            clamp(27px, 7.5vw, 36px);
    }


    /* CARDS */

    .po-premium-card {
        padding: 20px;

        border-radius: 16px;
    }


    .po-home-account-mini {
        padding: 22px;

        border-radius: 17px;
    }


    /* HERO BUTTONS */

    .po-hero-actions {
        display: grid;
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .po-hero-actions .po-btn,
    .po-hero-actions .po-btn-secondary {
        width: 100%;
    }


    /* PRODUCTS */

    .po-services-section {
        margin-top: 42px;
    }


    .po-category {
        margin-top: 30px;
    }


    .po-product-grid {
        grid-template-columns: 1fr;
    }


    .po-product-card {
        min-width: 0;
    }


    .po-product-action {
        width: 100%;
    }


    /* PAGE HEADERS */

    .po-page-header,
    .po-orders-page-header,
    .po-order-detail-header {
        align-items: flex-start;
        flex-direction: column;

        gap: 16px;
    }


    .po-orders-page-header > .po-btn,
    .po-page-header > .po-btn {
        width: 100%;
    }


    /* DASHBOARD */

    .po-account-summary,
    .po-profile-grid,
    .po-security-grid {
        grid-template-columns: 1fr;
    }


    .po-security-card .po-btn,
    .po-security-card .po-btn-secondary {
        width: 100%;
    }


    .po-profile-section {
        min-width: 0;
    }


    /* ORDERS */

    .po-order-card {
        width: 100%;

        align-items: flex-start;
        flex-direction: column;
    }


    .po-order-main {
        width: 100%;
        min-width: 0;
    }


    .po-order-id-row {
        width: 100%;

        flex-wrap: wrap;

        row-gap: 8px;
    }


    .po-order-meta {
        width: 100%;
    }


    .po-order-price {
        width: 100%;

        text-align: left;

        padding-top: 14px;

        border-top:
            1px solid var(--po-border);
    }


    /* ORDER FILTERS */

    .po-order-tabs {
        width: 100%;

        overflow-x: auto;

        -webkit-overflow-scrolling:
            touch;

        scrollbar-width: none;
    }


    .po-order-tabs::-webkit-scrollbar {
        display: none;
    }


    .po-order-tabs a {
        flex: 1 0 auto;

        justify-content: center;

        white-space: nowrap;
    }


    .po-orders-toolbar {
        align-items: flex-start;
        flex-direction: column;

        gap: 12px;
    }


    .po-orders-per-page {
        width: 100%;

        justify-content:
            space-between;
    }


    /* ORDER RESULT */

    .po-result-success-heading,
    .po-result-processing,
    .po-result-refunded {
        min-width: 0;
    }


    .po-result-content {
        padding: 16px;

        font-size: 12px;

        overflow-x: auto;
    }


    /* DETAIL LIST */

    .po-detail-list strong {
        overflow-wrap: anywhere;
    }


    /* FORMS
       16px avoids unwanted iOS input zoom
    */

    .po-main input,
    .po-main select,
    .po-main textarea {
        font-size: 16px;
    }


    .po-btn,
    .po-btn-secondary,
    .po-logout {
        min-height: 46px;
    }


    /* MODALS */

    .po-modal-overlay {
        padding:
            max(
                10px,
                env(safe-area-inset-top)
            )
            max(
                10px,
                env(safe-area-inset-right)
            )
            max(
                10px,
                env(safe-area-inset-bottom)
            )
            max(
                10px,
                env(safe-area-inset-left)
            );
    }


    .po-modal {
        width: 100%;

        max-height:
            calc(100dvh - 20px);

        border-radius: 16px;
    }


    .po-modal-actions {
        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;
    }


    .po-modal-actions .po-btn,
    .po-modal-actions .po-btn-secondary {
        width: 100%;
    }


    /* TABLE */

    .po-table-wrap {
        border-radius: 12px;
    }


    .po-table-wrap table {
        min-width: 620px;
    }

}


/* =========================================================
   SMALL PHONES
   480px and below
   ========================================================= */

@media (max-width: 480px) {

    .po-container {
        padding-left:
            max(
                13px,
                env(safe-area-inset-left)
            );

        padding-right:
            max(
                13px,
                env(safe-area-inset-right)
            );
    }


    .po-nav-inner {
        padding-left:
            max(
                13px,
                env(safe-area-inset-left)
            );

        padding-right:
            max(
                13px,
                env(safe-area-inset-right)
            );
    }


    .po-nav-links {
        left: 10px;
        right: 10px;
    }


    .po-logo {
        font-size: 21px;
    }


    .po-home-hero {
        margin-top: 23px;
    }


    .po-home-hero h1 {
        font-size:
            clamp(29px, 9vw, 36px);

        letter-spacing: -1.1px;
    }


    .po-premium-card {
        padding: 17px;
    }


    .po-home-account-mini {
        padding: 19px;
    }


    .po-mini-tier {
        font-size: 24px;
    }


    .po-mini-row {
        align-items: flex-start;
    }


    .po-order-tabs {
        gap: 4px;

        padding: 4px;
    }


    .po-order-tabs a {
        padding: 8px 10px;
    }


    .po-status-pill {
        max-width: 100%;
    }


    .po-result-success-heading,
    .po-result-processing,
    .po-result-refunded {
        gap: 11px;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .po-logo {
        font-size: 19px;
    }


    .po-nav-toggle {
        width: 42px;
        height: 42px;
    }


    .po-home-hero h1 {
        font-size: 28px;
    }


    .po-section-heading h2 {
        font-size: 23px;
    }


    .po-premium-card {
        padding: 15px;
    }

}


/* =========================================================
   DESKTOP / LARGE SCREEN REFINEMENT
   ========================================================= */

@media (min-width: 1400px) {

    .po-container {
        width:
            min(
                1180px,
                calc(100% - 64px)
            );
    }


    .po-nav-inner {
        width:
            min(
                1340px,
                calc(100% - 64px)
            );
    }

}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

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

    .po-btn,
    .po-btn-secondary,
    .po-nav-links > a,
    .po-logout,
    .po-nav-toggle {
        min-height: 44px;
    }

}


/* =========================================================
   REDUCED MOTION / ACCESSIBILITY
   ========================================================= */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

}