/* =========================================================
   PHONEORIGIN MOBILE UX V2
   Customer portal mobile typography + density system
   Desktop intentionally untouched
   ========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       GLOBAL MOBILE TYPOGRAPHY
       ===================================================== */

    html,
    body {
        font-size: 15px;
    }

    .po-main {
        line-height: 1.5;
    }

    /*
     * Never use microscopic text as the default mobile
     * treatment. Small metadata may still be smaller below.
     */

    .po-main p {
        font-size: 14px;
        line-height: 1.55;
    }

    .po-main label {
        font-size: 13px;
        line-height: 1.4;
    }

    .po-muted {
        font-size: 13px;
        line-height: 1.5;
    }

    .po-eyebrow {
        font-size: 10px !important;
        line-height: 1.2;
        letter-spacing: 1.15px !important;
    }

    .po-text-link {
        font-size: 13px !important;
    }


    /* =====================================================
       IOS FORM READABILITY
       16px also prevents Safari focus zoom
       ===================================================== */

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

    html body .po-main input::placeholder,
    html body .po-main textarea::placeholder {
        font-size: 16px !important;
    }


    /* =====================================================
       BUTTONS / TOUCH TARGETS
       ===================================================== */

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

        padding:
            10px
            15px !important;

        font-size: 14px !important;

        line-height: 1.2;
    }

    .po-nav-links > a {
        font-size: 14px;
    }


    /* =====================================================
       PAGE HEADERS
       ===================================================== */

    .po-page-header {
        margin-top: 25px !important;
        margin-bottom: 18px !important;

        gap: 11px !important;
    }

    .po-page-header h1 {
        font-size: 29px !important;
        line-height: 1.12 !important;
        letter-spacing: -.8px !important;
    }

    .po-page-header p {
        margin-top: 4px;

        font-size: 14px !important;
        line-height: 1.5;
    }

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


    /* =====================================================
       GENERIC CARDS
       Bigger type, LESS padding.
       ===================================================== */

    .po-premium-card {
        padding: 16px !important;

        border-radius: 14px !important;
    }


    /* =====================================================
       HOME HERO
       ===================================================== */

    .po-home-hero {
        margin-top: 22px !important;

        gap: 12px !important;
    }

    .po-home-hero-content {
        padding:
            8px
            0
            5px !important;
    }

    .po-home-hero h1 {
        margin:
            7px
            0
            10px !important;

        font-size: 32px !important;

        line-height: 1.08 !important;

        letter-spacing: -1px !important;
    }

    .po-home-hero-content > p {
        font-size: 15px !important;

        line-height: 1.58 !important;
    }

    .po-hero-actions {
        margin-top: 17px !important;

        gap: 8px !important;
    }


    /* =====================================================
       HOME ACCOUNT SUMMARY
       Convert huge vertical box into compact 2-column card.
       ===================================================== */

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

        display: grid !important;

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr) !important;

        grid-template-areas:
            "account wallet"
            "tier wallet"
            "discount wallet"
            "profile profile";

        column-gap: 14px !important;
        row-gap: 3px !important;

        align-items: center !important;

        padding: 14px !important;

        border-radius: 14px !important;
    }

    .po-home-account-mini > .po-eyebrow {
        grid-area: account;
    }

    .po-home-account-mini .po-mini-tier {
        grid-area: tier;

        margin: 2px 0 0 !important;

        font-size: 18px !important;

        line-height: 1.2 !important;

        letter-spacing: -.3px;
    }

    .po-home-account-mini .po-mini-discount {
        grid-area: discount;

        margin: 1px 0 0 !important;

        font-size: 11px !important;

        line-height: 1.35 !important;
    }

    .po-home-account-mini .po-mini-divider {
        display: none !important;
    }

    .po-home-account-mini .po-mini-row {
        grid-area: wallet;

        min-width: 0;

        height: 100%;

        display: flex !important;
        flex-direction: column !important;

        justify-content: center !important;
        align-items: flex-start !important;

        gap: 4px !important;

        margin: 0 !important;

        padding-left: 14px;

        border-left:
            1px solid
            rgba(255,255,255,.09);
    }

    .po-home-account-mini .po-mini-row span {
        font-size: 10px !important;

        font-weight: 700;

        text-transform: uppercase;

        letter-spacing: .55px;
    }

    .po-home-account-mini .po-mini-row strong {
        font-size: 19px !important;

        line-height: 1.15;
    }

    .po-home-account-mini > .po-text-link {
        grid-area: profile;

        margin-top: 9px;

        padding-top: 10px;

        border-top:
            1px solid
            rgba(255,255,255,.075);
    }


    /* =====================================================
       HOME SERVICE DIRECTORY
       ===================================================== */

    .po-services-section {
        margin-top: 30px !important;
    }

    .po-category {
        margin-top: 22px !important;
    }

    .po-category-heading h3 {
        font-size: 20px !important;
    }

    .po-category-heading p {
        font-size: 13px !important;
    }

    .po-product-grid {
        gap: 10px !important;
    }

    .po-product-card {
        padding: 15px !important;
    }

    .po-product-category {
        font-size: 10px !important;
    }

    .po-product-card h3 {
        font-size: 16px !important;
        line-height: 1.35 !important;
    }

    .po-product-description {
        font-size: 13px !important;

        line-height: 1.5 !important;
    }

    .po-old-price,
    .po-price-label {
        font-size: 11px !important;
    }

    .po-product-price {
        font-size: 21px !important;
    }

    .po-discount-badge {
        font-size: 10px !important;
    }


    /* =====================================================
       PROFILE / ACCOUNT DASHBOARD
       ===================================================== */

    .po-account-summary {
        gap: 10px !important;
    }

    .po-wallet-card,
    .po-tier-card {
        padding: 16px !important;
    }

    .po-wallet-balance {
        margin:
            6px
            0
            4px !important;

        font-size: 30px !important;

        letter-spacing: -1px !important;
    }

    .po-wallet-card p {
        font-size: 13px !important;
    }

    .po-tier-heading {
        gap: 9px !important;
    }

    .po-tier-name {
        font-size: 21px !important;

        line-height: 1.2 !important;
    }

    .po-tier-discount {
        font-size: 12px !important;
    }

    .po-tier-spend,
    .po-tier-next,
    .po-highest-tier,
    .po-admin-status {
        font-size: 12px !important;
    }

    .po-profile-section {
        margin-top: 24px !important;
    }

    .po-profile-grid {
        gap: 8px !important;
    }

    .po-profile-item {
        padding: 12px !important;
    }

    .po-profile-item span {
        font-size: 11px !important;
    }

    .po-profile-item strong {
        font-size: 14px !important;
    }

    .po-security-grid {
        gap: 10px !important;
    }

    .po-security-card {
        padding: 15px !important;
    }

    .po-security-card h3 {
        font-size: 16px !important;
    }

    .po-security-card p {
        font-size: 13px !important;
    }


    /* =====================================================
       ORDERS
       ===================================================== */

    .po-order-tabs a {
        min-height: 42px !important;

        padding:
            8px
            11px !important;

        font-size: 13px !important;
    }

    .po-order-tabs strong {
        min-width: 22px !important;
        height: 22px !important;

        font-size: 10px !important;
    }

    .po-orders-result-info,
    .po-orders-per-page {
        font-size: 12px !important;
    }

    .po-order-card {
        gap: 11px !important;

        padding: 14px !important;
    }

    .po-order-number {
        font-size: 14px !important;
    }

    .po-order-main h3 {
        font-size: 16px !important;

        line-height: 1.35 !important;
    }

    .po-order-meta {
        gap: 8px !important;

        font-size: 12px !important;
    }

    .po-order-meta span {
        font-size: 12px !important;
    }

    .po-order-meta strong {
        font-size: 13px !important;
    }

    .po-status-pill {
        padding:
            5px
            8px !important;

        font-size: 10px !important;
    }

    .po-order-price span {
        font-size: 11px !important;
    }

    .po-order-price strong {
        font-size: 18px !important;
    }

    .po-order-price small {
        font-size: 11px !important;
    }


    /* =====================================================
       ORDER DETAIL / RESULTS
       ===================================================== */

    .po-order-detail-header h1 {
        font-size: 27px !important;
    }

    .po-order-large-status {
        font-size: 11px !important;
    }

    .po-detail-list span {
        font-size: 12px !important;
    }

    .po-detail-list strong {
        font-size: 14px !important;
    }

    .po-pricing-breakdown span {
        font-size: 12px !important;
    }

    .po-pricing-breakdown strong {
        font-size: 14px !important;
    }

    .po-pricing-breakdown .total {
        font-size: 15px !important;
    }

    .po-pricing-breakdown .total strong {
        font-size: 19px !important;
    }

    .po-result-content {
        padding: 13px !important;

        font-size: 13px !important;

        line-height: 1.5 !important;
    }


    /* =====================================================
       SERVICE / CHECKOUT
       ===================================================== */

    .po-service-header h1 {
        font-size: 28px !important;

        line-height: 1.15 !important;
    }

    .po-service-header p,
    .po-service-description {
        font-size: 14px !important;

        line-height: 1.55 !important;
    }

    .po-service-form label {
        font-size: 13px !important;
    }

    .po-checkout-wallet span {
        font-size: 11px !important;
    }

    .po-checkout-wallet strong {
        font-size: 15px !important;
    }

    .po-checkout-promo-message {
        font-size: 11px !important;
    }


    /* =====================================================
       SHOP
       High specificity so this remains readable even though
       the Shop currently has its own scoped styles.
       ===================================================== */

    html body .po-main .po-shop-header p {
        font-size: 13px !important;
    }

    html body .po-main .po-shop-category-heading p {
        font-size: 12px !important;
    }

    html body .po-main .po-shop-card-title-row strong {
        font-size: 14px !important;
    }

    html body .po-main .po-shop-card-description {
        font-size: 12px !important;

        line-height: 1.45 !important;
    }

    html body .po-main .po-shop-card-meta span {
        font-size: 9px !important;
    }

    html body .po-main .po-shop-view-service {
        font-size: 11px !important;
    }

    html body .po-main .po-shop-eta,
    html body .po-main .po-shop-discount {
        font-size: 8px !important;
    }

    html body .po-main #poShopResultCount {
        font-size: 11px !important;
    }


    /* =====================================================
       TABLE / GENERAL METADATA
       ===================================================== */

    .po-table-wrap {
        font-size: 13px;
    }

    .po-table-wrap th {
        font-size: 11px;
    }

    .po-table-wrap td {
        font-size: 13px;
    }

}


/* =========================================================
   SMALL PHONES
   Keep readable. Reduce spacing, not typography.
   ========================================================= */

@media (max-width: 390px) {

    .po-premium-card {
        padding: 14px !important;
    }

    .po-home-account-mini {
        padding: 13px !important;
    }

    .po-home-hero h1 {
        font-size: 29px !important;
    }

    .po-page-header h1 {
        font-size: 27px !important;
    }

}