/* ===================================================================== * ezPeps My Account - MOBILE (<=768px) drill-in redesign * --------------------------------------------------------------------- * Loaded on all account pages, but every visual rule is gated behind * @media (max-width:768px). The only base-level rules hide the two NEW * mobile-only elements (.ezp-macct-m, .ezp-macct-back) on desktop, so * desktop (>768px) is byte-for-byte the standard dashboard styled by * ezpeps-myaccount-dashboard.php. Nothing here touches >768px layout. * * Mobile rules are scoped with the .ezp-macct body classes so they * out-specify the existing desktop skin (which loads later in ). * ===================================================================== */ /* --- Base (all viewports): keep new mobile elements out of desktop. --- */ .ezp-macct-m { display: none; } .ezp-macct-back{ display: none; } @media (max-width: 768px) { body.woocommerce-account.page-id-9.ezp-macct { --ezpm-teal: #268A8E; --ezpm-deep: #0E5067; --ezpm-navy: #3C3B6E; --ezpm-teal-50:#E9F3F3; --ezpm-teal-100:#CFE6E7; --ezpm-ink: #12303A; --ezpm-ink-2: #33484F; --ezpm-sub: #62747C; --ezpm-line: #E3E9EB; --ezpm-bg: #F4F7F8; --ezpm-paper: #FFFFFF; --ezpm-radius: 14px; } /* ---- Neutralize the desktop skin's 260px+1fr card grid. ---- */ body.woocommerce-account.page-id-9.ezp-macct .wp-block-post-content > .woocommerce { display: block !important; grid-template-columns: none !important; gap: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; max-width: 100% !important; width: 100% !important; overflow: visible !important; } body.woocommerce-account.page-id-9.ezp-macct .wp-block-post-content > .woocommerce::before { display: none !important; } /* ---- Hide the buried full nav list (menu) on mobile. ---- */ body.woocommerce-account.page-id-9.ezp-macct .woocommerce-MyAccount-navigation { display: none !important; } /* ---- Content pane: full width, no clipping at any width. ---- */ body.woocommerce-account.page-id-9.ezp-macct .woocommerce-MyAccount-content { width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important; padding: 14px 14px 40px !important; box-sizing: border-box !important; overflow-x: hidden !important; background: var(--ezpm-bg) !important; } body.woocommerce-account.page-id-9.ezp-macct .woocommerce-MyAccount-content, body.woocommerce-account.page-id-9.ezp-macct .woocommerce-MyAccount-content * { box-sizing: border-box !important; } body.woocommerce-account.page-id-9.ezp-macct .woocommerce-MyAccount-content img, body.woocommerce-account.page-id-9.ezp-macct .woocommerce-MyAccount-content video, body.woocommerce-account.page-id-9.ezp-macct .woocommerce-MyAccount-content table, body.woocommerce-account.page-id-9.ezp-macct .woocommerce-MyAccount-content pre, body.woocommerce-account.page-id-9.ezp-macct .woocommerce-MyAccount-content iframe { max-width: 100% !important; } /* ================= ENDPOINT SUB-PAGES ================= */ /* "< Account" back link (endpoint pages only). */ body.woocommerce-account.page-id-9.ezp-macct-endpoint .ezp-macct-back { display: inline-flex !important; align-items: center; gap: 4px; margin: 14px 14px 0; padding: 8px 12px 8px 8px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; font-weight: 600; color: var(--ezpm-deep); text-decoration: none; background: var(--ezpm-paper); border: 1px solid var(--ezpm-line); border-radius: 999px; line-height: 1; } body.woocommerce-account.page-id-9.ezp-macct-endpoint .ezp-macct-back svg { flex: 0 0 auto; } /* ================= DASHBOARD ROOT ================= */ /* Hide the standard (desktop) dashboard content, show the mobile app. */ body.woocommerce-account.page-id-9.ezp-macct-root .woocommerce-MyAccount-content > p, body.woocommerce-account.page-id-9.ezp-macct-root .ezp-macct-dhooks { display: none !important; } body.woocommerce-account.page-id-9.ezp-macct-root .ezp-macct-m { display: block !important; } /* ---- Mobile app shell ---- */ body.ezp-macct .ezp-macct-m { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--ezpm-ink); -webkit-font-smoothing: antialiased; } body.ezp-macct .ezp-macct-m a { text-decoration: none; } /* Greeting row */ body.ezp-macct .ezp-macct-hi { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 2px 16px; } body.ezp-macct .ezp-macct-hi-hello { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ezpm-ink); } body.ezp-macct .ezp-macct-hi-out { font-size: 13px; font-weight: 600; color: var(--ezpm-sub); white-space: nowrap; } /* ---- Wallet strip: two cards side by side ---- */ body.ezp-macct .ezp-macct-wallet { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } body.ezp-macct .ezp-macct-wcard { display: flex; flex-direction: column; gap: 3px; padding: 16px 14px; border-radius: var(--ezpm-radius); color: #fff; min-width: 0; position: relative; overflow: hidden; } body.ezp-macct .ezp-macct-wcard--credit { background: linear-gradient(150deg, #268A8E 0%, #0E5067 100%); } body.ezp-macct .ezp-macct-wcard--points { background: linear-gradient(150deg, #3C3B6E 0%, #0E5067 100%); } body.ezp-macct .ezp-macct-wlabel { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; opacity: 0.86; } body.ezp-macct .ezp-macct-wval { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; word-break: break-word; } body.ezp-macct .ezp-macct-wval .woocommerce-Price-currencySymbol { font-weight: 700; } body.ezp-macct .ezp-macct-wsub { font-size: 12px; font-weight: 500; opacity: 0.82; } /* ---- Most recent order card ---- */ body.ezp-macct .ezp-macct-order { display: block; background: var(--ezpm-paper); border: 1px solid var(--ezpm-line); border-radius: var(--ezpm-radius); padding: 14px 16px; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(18,48,58,0.04); } body.ezp-macct .ezp-macct-order-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } body.ezp-macct .ezp-macct-order-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ezpm-sub); } body.ezp-macct .ezp-macct-pill { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 9px; border-radius: 999px; background: var(--ezpm-teal-50); color: var(--ezpm-deep); white-space: nowrap; } body.ezp-macct .ezp-macct-pill--processing { background:#E9F3F3; color:#0E5067; } body.ezp-macct .ezp-macct-pill--completed { background:#E4F3EC; color:#1B6B47; } body.ezp-macct .ezp-macct-pill--on-hold { background:#FBF0DC; color:#8A5A12; } body.ezp-macct .ezp-macct-pill--pending { background:#FBF0DC; color:#8A5A12; } body.ezp-macct .ezp-macct-pill--cancelled, body.ezp-macct .ezp-macct-pill--failed { background:#FBE7E2; color:#8C2E15; } body.ezp-macct .ezp-macct-pill--refunded { background:#EDEEF4; color:#3C3B6E; } body.ezp-macct .ezp-macct-order-mid { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; } body.ezp-macct .ezp-macct-order-no { font-size: 18px; font-weight: 700; color: var(--ezpm-ink); } body.ezp-macct .ezp-macct-order-dt { font-size: 13px; color: var(--ezpm-sub); } body.ezp-macct .ezp-macct-order-bot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--ezpm-line); padding-top: 10px; } body.ezp-macct .ezp-macct-order-meta { font-size: 13px; color: var(--ezpm-ink-2); } body.ezp-macct .ezp-macct-order-view { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--ezpm-teal); white-space: nowrap; } body.ezp-macct .ezp-macct-order-view .ezp-macct-chev { width:16px; height:16px; } /* ---- Grouped tappable rows ---- */ body.ezp-macct .ezp-macct-group { margin-bottom: 18px; } body.ezp-macct .ezp-macct-group-hd { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ezpm-sub); margin: 0 4px 8px; } body.ezp-macct .ezp-macct-list { background: var(--ezpm-paper); border: 1px solid var(--ezpm-line); border-radius: var(--ezpm-radius); overflow: hidden; } body.ezp-macct .ezp-macct-row { display: flex; align-items: center; gap: 13px; padding: 14px 14px; border-bottom: 1px solid var(--ezpm-line); color: var(--ezpm-ink); min-height: 56px; } body.ezp-macct .ezp-macct-list .ezp-macct-row:last-child { border-bottom: none; } body.ezp-macct .ezp-macct-row:active { background: var(--ezpm-teal-50); } body.ezp-macct .ezp-macct-row-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ezpm-teal-50); color: var(--ezpm-deep); } body.ezp-macct .ezp-macct-row-tx { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; } body.ezp-macct .ezp-macct-row-lb { font-size: 15px; font-weight: 600; color: var(--ezpm-ink); line-height: 1.25; } body.ezp-macct .ezp-macct-row-sb { font-size: 12.5px; color: var(--ezpm-sub); line-height: 1.2; } body.ezp-macct .ezp-macct-row-vl { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--ezpm-deep); white-space: nowrap; } body.ezp-macct .ezp-macct-chev { flex: 0 0 auto; color: #B7C4C8; } /* ===================================================== * ezPoints redeem app (Ant Design, #lpfw_my_points_app) * Sub-tabs -> horizontally scrollable segmented control. * Redeem form -> inputs stack vertically, full-width button. * ===================================================== */ body.woocommerce-account.page-id-9.ezp-macct #lpfw_my_points_app { width: 100% !important; max-width: 100% !important; overflow-x: hidden; } /* Tab bar: allow horizontal scroll, no clipping, pill segmented look. */ body.woocommerce-account.page-id-9.ezp-macct #lpfw_my_points_app .ant-tabs-nav { margin-bottom: 16px !important; } body.woocommerce-account.page-id-9.ezp-macct #lpfw_my_points_app .ant-tabs-nav-wrap { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; } body.woocommerce-account.page-id-9.ezp-macct #lpfw_my_points_app .ant-tabs-nav-list { flex-wrap: nowrap !important; gap: 6px; padding: 4px; background: var(--ezpm-teal-50); border-radius: 999px; } body.woocommerce-account.page-id-9.ezp-macct #lpfw_my_points_app .ant-tabs-tab { flex: 0 0 auto !important; margin: 0 !important; padding: 8px 16px !important; border-radius: 999px !important; font-weight: 600 !important; white-space: nowrap !important; } body.woocommerce-account.page-id-9.ezp-macct #lpfw_my_points_app .ant-tabs-tab.ant-tabs-tab-active { background: var(--ezpm-teal) !important; } body.woocommerce-account.page-id-9.ezp-macct #lpfw_my_points_app .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn { color: #fff !important; text-shadow: none !important; } body.woocommerce-account.page-id-9.ezp-macct #lpfw_my_points_app .ant-tabs-tab .ant-tabs-tab-btn { color: var(--ezpm-deep) !important; } /* Hide antd's sliding ink bar (we use pill backgrounds instead). */ body.woocommerce-account.page-id-9.ezp-macct #lpfw_my_points_app .ant-tabs-ink-bar { display: none !important; } body.woocommerce-account.page-id-9.ezp-macct #lpfw_my_points_app .ant-tabs-nav::before { border-bottom: none !important; } /* Redeem form: stack columns vertically (points, then $), full width. */ body.woocommerce-account.page-id-9.ezp-macct #lpfw_my_points_app .ant-row { flex-direction: column !important; row-gap: 12px !important; margin-left: 0 !important; margin-right: 0 !important; } body.woocommerce-account.page-id-9.ezp-macct #lpfw_my_points_app .ant-col { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } body.woocommerce-account.page-id-9.ezp-macct #lpfw_my_points_app .ant-input, body.woocommerce-account.page-id-9.ezp-macct #lpfw_my_points_app .ant-input-affix-wrapper, body.woocommerce-account.page-id-9.ezp-macct #lpfw_my_points_app .ant-input-number, body.woocommerce-account.page-id-9.ezp-macct #lpfw_my_points_app .ant-input-number-group-wrapper, body.woocommerce-account.page-id-9.ezp-macct #lpfw_my_points_app .ant-select { width: 100% !important; max-width: 100% !important; min-height: 46px; } body.woocommerce-account.page-id-9.ezp-macct #lpfw_my_points_app .ant-btn-primary { width: 100% !important; min-height: 48px; background: var(--ezpm-teal) !important; border-color: var(--ezpm-teal) !important; font-weight: 700 !important; border-radius: 10px !important; } body.woocommerce-account.page-id-9.ezp-macct #lpfw_my_points_app .ant-btn-primary:active { background: var(--ezpm-deep) !important; border-color: var(--ezpm-deep) !important; } /* "View store credits" link on the store-credit endpoint: own line. */ body.woocommerce-account.page-id-9.ezp-macct .woocommerce-MyAccount-content .acfw-store-credit-view, body.woocommerce-account.page-id-9.ezp-macct .woocommerce-MyAccount-content a.acfw-view-store-credits { display: block !important; width: 100% !important; margin-top: 10px !important; text-align: center; } /* Tighten the empty band above the mobile dashboard: collapse TT4's main margin, the (hidden) page-title wrapper, and the post-content top margin so the dashboard starts cleanly with a small top gap. */ body.woocommerce-account.page-id-9.ezp-macct main.wp-block-group { margin-top: 0 !important; } body.woocommerce-account.page-id-9.ezp-macct main > .wp-block-group.is-layout-constrained:first-child { display: none !important; } body.woocommerce-account.page-id-9.ezp-macct .entry-content.wp-block-post-content { margin-top: 0 !important; } body.woocommerce-account.page-id-9.ezp-macct .woocommerce-MyAccount-content { padding-top: 10px !important; } }