/* ========================================================================== * Member Points System — shared front-end stylesheet. * * All colours, radii, spacing, and fonts are driven by CSS variables that * the plugin emits in based on the admin's Appearance settings * (see class-mps-appearance.php). This file should never hardcode colours * that are meant to be theme-aware; always reference var(--mps-…). * ==========================================================================*/ /* ---- Scope + resets --------------------------------------------------- */ .mps-scope { font-family: var(--mps-font); color: var(--mps-ink); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .mps-scope *, .mps-scope *::before, .mps-scope *::after { box-sizing: border-box; } /* ------------------------------------------------------------------------- * List reset — MPS frontend never uses browser-default bulleted lists. * Themes frequently override plain `padding: 0; margin: 0` with higher * specificity selectors (e.g. `article ul`, `.woocommerce ul`), which * re-injects browser-default `padding-left: 40px` and visually indents * MPS lists ~40px away from their card's left edge — making cards look * left-lopsided. Force-reset at scope level with !important so every * MPS list (`.mps-history-list`, `.mps-coupons-owned`, `.mps-coupon-terms`, * etc.) starts flush against its container. * ------------------------------------------------------------------------- */ .mps-scope ul, .mps-scope ol { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; text-indent: 0 !important; } .mps-scope ul > li, .mps-scope ol > li { padding-left: 0 !important; margin-left: 0 !important; } .mps-scope a { color: var(--mps-primary); text-decoration: none; transition: color .15s ease, opacity .15s ease; } .mps-scope a:hover { color: var(--mps-primary-hover); } /* ---- Page container --------------------------------------------------- */ .mps-page { background: transparent; padding: var(--mps-space-3) 0 var(--mps-space-5); max-width: 900px; margin: 0 auto; } /* ---- Heading type scale ----------------------------------------------- */ .mps-page h1, .mps-page h2, .mps-page h3 { color: var(--mps-ink); margin: 0 0 var(--mps-space-3); font-weight: 600; letter-spacing: -0.015em; } .mps-page h1 { font-size: 28px; line-height: 1.2; font-weight: 700; } .mps-page h2 { font-size: 20px; line-height: 1.3; } .mps-page h3 { font-size: 17px; line-height: 1.4; } .mps-page p { margin: 0 0 var(--mps-space-3); color: var(--mps-ink); } .mps-muted { color: var(--mps-ink-muted); font-size: 14px; } .mps-subtle { color: var(--mps-ink-subtle); font-size: 13px; } /* ========================================================================== * Hero — variants driven by [data-mps-hero] * ==========================================================================*/ .mps-hero { border-radius: var(--mps-radius); padding: var(--mps-space-5) var(--mps-space-6); margin-bottom: var(--mps-space-4); } .mps-hero-inner { max-width: 640px; } .mps-hero-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mps-ink-muted); margin-bottom: 6px; font-weight: 600; } .mps-hero-title { font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--mps-space-2); color: var(--mps-ink); } .mps-hero-sub { font-size: 14px; line-height: 1.55; color: var(--mps-ink-muted); } .mps-hero-sub strong { color: var(--mps-ink); font-weight: 600; } /* Hero "call-to-action" links — small inline links inside hero-sub (e.g. "管理會籍 →") use accent colour so they stand out against the muted sub copy and hint at interactivity. */ .mps-hero-sub a { color: var(--mps-accent); text-decoration: none; font-weight: 500; } .mps-hero-sub a:hover { color: var(--mps-accent-hover); text-decoration: underline; text-underline-offset: 2px; } /* Hero label badge — small uppercase "會員積分" caption above the title. Subtle accent tint gives the hero a colour anchor without overpowering the title. */ .mps-hero-label { color: var(--mps-accent); } /* Minimal — no box, just text. Tight bottom spacing so content starts immediately after the title block. */ .mps-scope[data-mps-hero="minimal"] .mps-hero { background: transparent; padding: 16px 0 20px; border-bottom: 1px solid var(--mps-border); border-radius: 0; margin-bottom: 20px; } /* Soft — subtle tinted card */ .mps-scope[data-mps-hero="soft"] .mps-hero { background: var(--mps-surface-2); border: 1px solid var(--mps-border); } /* Solid — primary colour fill */ .mps-scope[data-mps-hero="solid"] .mps-hero { background: var(--mps-primary); color: var(--mps-primary-ink); } .mps-scope[data-mps-hero="solid"] .mps-hero-label, .mps-scope[data-mps-hero="solid"] .mps-hero-title, .mps-scope[data-mps-hero="solid"] .mps-hero-sub, .mps-scope[data-mps-hero="solid"] .mps-hero-sub strong { color: var(--mps-primary-ink); } .mps-scope[data-mps-hero="solid"] .mps-hero-label { opacity: .75; } .mps-scope[data-mps-hero="solid"] .mps-hero-sub { opacity: .9; } /* Gradient — primary → accent */ .mps-scope[data-mps-hero="gradient"] .mps-hero { background: linear-gradient(135deg, var(--mps-primary) 0%, var(--mps-accent) 100%); color: var(--mps-primary-ink); } .mps-scope[data-mps-hero="gradient"] .mps-hero-label, .mps-scope[data-mps-hero="gradient"] .mps-hero-title, .mps-scope[data-mps-hero="gradient"] .mps-hero-sub, .mps-scope[data-mps-hero="gradient"] .mps-hero-sub strong { color: var(--mps-primary-ink); } .mps-scope[data-mps-hero="gradient"] .mps-hero-label { opacity: .8; } .mps-scope[data-mps-hero="gradient"] .mps-hero-sub { opacity: .92; } /* ========================================================================== * Cards * ==========================================================================*/ .mps-card { background: var(--mps-surface); border: 1px solid var(--mps-border); border-radius: var(--mps-radius); padding: 20px 24px; margin-bottom: 20px; box-shadow: var(--mps-shadow-sm); } .mps-card-title { font-size: 16px; font-weight: 600; margin: 0 0 16px; color: var(--mps-ink); letter-spacing: -0.005em; } /* Uniform vertical rhythm inside cards: children are separated by a single spacing token, last child has no bottom margin. Note: the title already has a larger built-in margin-bottom for clearer sectioning, so we skip margin-top on the first sibling after it. */ .mps-card > * + * { margin-top: 14px; } .mps-card > .mps-card-title + * { margin-top: 0; } .mps-card > * { margin-bottom: 0; } .mps-card > p { margin-top: 0; } .mps-card > p + p, .mps-card > p + .mps-notice, .mps-card > p + form, .mps-card > .mps-notice + p, .mps-card > .mps-notice + form { margin-top: 14px; } .mps-card > form { margin: 0; } /* ========================================================================== * Stat blocks (balance, lifetime points) * ==========================================================================*/ .mps-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .mps-stat { padding: 18px 20px; background: var(--mps-surface-2); border: 1px solid var(--mps-border); border-radius: var(--mps-radius); } .mps-stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mps-ink-muted); margin-bottom: 6px; font-weight: 600; } .mps-stat-value { font-size: 28px; font-weight: 700; color: var(--mps-ink); line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .mps-stat-unit { font-size: 13px; color: var(--mps-ink-muted); font-weight: 500; margin-left: 4px; } /* ========================================================================== * Buttons * ==========================================================================*/ .mps-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mps-space-2); padding: 11px 22px; font-size: 14px; font-weight: 500; line-height: 1.2; border-radius: var(--mps-radius-sm); border: 1px solid transparent; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease, transform .05s ease; font-family: inherit; letter-spacing: -0.003em; text-decoration: none; } .mps-btn:active { transform: translateY(1px); } /* Primary is set by class-mps-appearance inline selectors ([data-mps-btn]) */ .mps-btn-primary:hover { background: var(--mps-primary-hover); border-color: var(--mps-primary-hover); color: var(--mps-primary-ink); } .mps-scope[data-mps-btn="outline"] .mps-btn-primary:hover { background: color-mix(in srgb, var(--mps-primary) 8%, transparent); } .mps-scope[data-mps-btn="subtle"] .mps-btn-primary:hover { background: color-mix(in srgb, var(--mps-primary) 18%, transparent); } .mps-btn-secondary { background: var(--mps-surface); color: var(--mps-ink); border: 1px solid var(--mps-border-strong); } .mps-btn-secondary:hover { background: var(--mps-surface-2); } .mps-btn-disabled, .mps-btn[disabled] { background: var(--mps-surface-3); color: var(--mps-ink-subtle); border-color: var(--mps-border); cursor: not-allowed; } .mps-btn-disabled:hover, .mps-btn[disabled]:hover { background: var(--mps-surface-3); color: var(--mps-ink-subtle); transform: none; } /* ========================================================================== * Badge / chip (tiers, status) * ==========================================================================*/ .mps-badge { display: inline-flex; align-items: center; padding: 4px 11px; font-size: 12px; font-weight: 600; border-radius: 999px; line-height: 1.5; letter-spacing: 0.01em; background: var(--mps-surface-2); color: var(--mps-ink); border: 1px solid var(--mps-border); } .mps-badge-primary { background: var(--mps-primary); color: var(--mps-primary-ink); border-color: transparent; } .mps-badge-accent { background: var(--mps-accent); color: var(--mps-accent-ink); border-color: transparent; } /* ========================================================================== * Forms * ==========================================================================*/ .mps-scope input[type="text"], .mps-scope input[type="email"], .mps-scope input[type="number"], .mps-scope input[type="date"], .mps-scope input[type="url"], .mps-scope select, .mps-scope textarea { background: var(--mps-surface); color: var(--mps-ink); border: 1px solid var(--mps-border-strong); border-radius: var(--mps-radius-sm); padding: 10px 14px; font-size: 15px; font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease; width: 100%; max-width: 420px; } .mps-scope input[type="text"]:focus, .mps-scope input[type="email"]:focus, .mps-scope input[type="number"]:focus, .mps-scope input[type="date"]:focus, .mps-scope input[type="url"]:focus, .mps-scope select:focus, .mps-scope textarea:focus { outline: 0; border-color: var(--mps-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mps-primary) 20%, transparent); } /* ========================================================================== * Notices / alerts * ==========================================================================*/ .mps-notice { padding: var(--mps-space-3) var(--mps-space-4); background: var(--mps-surface-2); border: 1px solid var(--mps-border); border-radius: var(--mps-radius-sm); color: var(--mps-ink-muted); font-size: 14px; line-height: 1.6; } .mps-notice-success { background: color-mix(in srgb, var(--mps-success) 12%, transparent); border-color: color-mix(in srgb, var(--mps-success) 35%, transparent); color: var(--mps-success); } .mps-notice-warning { background: color-mix(in srgb, var(--mps-warning) 12%, transparent); border-color: color-mix(in srgb, var(--mps-warning) 35%, transparent); color: var(--mps-warning); } /* ========================================================================== * Points history list * ==========================================================================*/ .mps-history-list { list-style: none !important; padding: 0 !important; margin: 0 !important; text-indent: 0 !important; } .mps-history-list > li { padding-left: 0 !important; margin-left: 0 !important; list-style: none !important; } .mps-history-item { display: grid; /* Two-row layout so the date sits as a small caption *above* the note+amount row, instead of wasting ~90px of left gutter on a narrow card. Caption row spans full width; content row is a 2-column split (note flex / amount auto-right). Before: `[ date-column 84px | note 1fr | amount auto ]` made the note feel deeply indented vs. the amount hugging the right edge — unbalanced (~140px left gap vs ~20px right). After: `[ date (full width, small) ] [ note 1fr | amount auto ]` keeps the same info density but uses the full card width on both sides. */ grid-template-columns: 1fr auto; grid-template-areas: "date date" "note delta"; gap: 2px 12px; padding: var(--mps-space-3) 0; border-bottom: 1px solid var(--mps-border); align-items: start; } .mps-history-date { grid-area: date; font-size: 12px; color: var(--mps-ink-muted); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .mps-history-note { grid-area: note; font-size: 14px; color: var(--mps-ink); line-height: 1.5; } .mps-history-delta { grid-area: delta; font-size: 15px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; } .mps-history-item:last-child { border-bottom: none; } .mps-history-delta.pos { color: var(--mps-success); } .mps-history-delta.neg { color: var(--mps-danger); } .mps-history-delta.zero { color: var(--mps-ink-subtle); } /* ========================================================================== * Points Shop — product grid * ==========================================================================*/ .mps-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--mps-space-4); } .mps-shop-card { background: var(--mps-surface); border: 1px solid var(--mps-border); border-radius: var(--mps-radius); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; display: flex; flex-direction: column; } .mps-shop-card:hover { transform: translateY(-2px); box-shadow: var(--mps-shadow-md); border-color: var(--mps-border-strong); } .mps-shop-card.is-locked { opacity: 0.62; } .mps-shop-card.is-locked:hover { transform: none; box-shadow: var(--mps-shadow-sm); } .mps-shop-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--mps-surface-3); display: flex; align-items: center; justify-content: center; } .mps-shop-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .mps-shop-body { padding: var(--mps-space-4); display: flex; flex-direction: column; gap: var(--mps-space-2); flex: 1; } .mps-shop-name { font-size: 15px; font-weight: 600; color: var(--mps-ink); margin: 0; line-height: 1.4; } .mps-shop-cost { font-size: 22px; font-weight: 700; color: var(--mps-ink); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 4px; } .mps-shop-cost-unit { font-size: 12px; color: var(--mps-ink-muted); font-weight: 500; } .mps-shop-form { margin-top: auto; } .mps-shop-form .mps-btn { width: 100%; } /* ========================================================================== * Tier cards * ==========================================================================*/ .mps-tiers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--mps-space-4); } .mps-tier-card { background: var(--mps-surface); border: 1px solid var(--mps-border); border-radius: var(--mps-radius); padding: var(--mps-space-4) var(--mps-space-4) var(--mps-space-4); position: relative; transition: border-color .15s ease, box-shadow .15s ease; } .mps-tier-card.is-current { border-color: var(--mps-primary); box-shadow: 0 0 0 1px var(--mps-primary); } .mps-tier-card-tag { position: absolute; top: var(--mps-space-3); right: var(--mps-space-3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 9px; background: var(--mps-primary); color: var(--mps-primary-ink); border-radius: 999px; font-weight: 700; } .mps-tier-card-name { font-size: 20px; font-weight: 700; margin: 0 0 var(--mps-space-3); color: var(--mps-ink); letter-spacing: -0.015em; } .mps-tier-card-multiplier { display: inline-block; padding: 3px 10px; background: var(--mps-surface-2); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--mps-ink); margin-bottom: 8px; } /* Progress bar — used for auto-tier progress */ .mps-progress { width: 100%; height: 6px; background: var(--mps-surface-3); border-radius: 999px; overflow: hidden; margin: 4px 0 6px; } .mps-progress-bar { height: 100%; border-radius: inherit; transition: width .4s ease; min-width: 2px; } .mps-progress-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--mps-ink-muted); font-variant-numeric: tabular-nums; flex-wrap: wrap; } .mps-progress-meta .mps-progress-hint { font-style: italic; } .mps-tier-card-cost { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; } .mps-tier-card-cost-num { font-size: 24px; font-weight: 700; color: var(--mps-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; } .mps-tier-card-cost-unit { font-size: 13px; color: var(--mps-ink-muted); font-weight: 500; } .mps-tier-card-body { font-size: 14px; color: var(--mps-ink-muted); line-height: 1.5; margin: 0 0 8px; } .mps-tier-card .mps-btn { margin-top: var(--mps-space-3); width: 100%; } .mps-tier-card form { margin: 0; } /* ========================================================================== * Coupon catalog (/my-coupons) * ==========================================================================*/ /* ========================================================= Coupon catalog grid — minimalist "passbook" card. Design direction: Apple-style dark — flat surfaces, no gradients or decorative perforations, hairline dividers, typography-driven hierarchy, single accent colour. Every rule is scoped under .mps-scope (which wraps every MPS front-end template via _scope.php) so WP/WC theme styles on h3 / p / ul can't override our resets. ========================================================= */ .mps-scope .mps-coupon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; } .mps-scope .mps-coupon-card { background: var(--mps-surface); border: 1px solid var(--mps-border); border-radius: var(--mps-radius); display: flex; flex-direction: column; transition: border-color .18s ease, transform .18s ease; overflow: hidden; } .mps-scope .mps-coupon-card:hover { border-color: var(--mps-border-strong); } .mps-scope .mps-coupon-card.is-locked { opacity: 0.55; } /* Head: amount (left) + type label (right), baseline aligned */ .mps-scope .mps-coupon-head { padding: 20px 22px 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .mps-scope .mps-coupon-amount { font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--mps-ink); } .mps-scope .mps-coupon-type { font-size: 12px; font-weight: 500; color: var(--mps-ink-muted); letter-spacing: 0.015em; white-space: nowrap; } /* Hairline divider — replaces the decorative ticket perforation */ .mps-scope .mps-coupon-rule { height: 1px; background: var(--mps-border); margin: 0 22px; } /* Body: title, desc, terms — tight spacing, managed by direct margins (not flex gap) so we have exact control. Tag+class selectors under .mps-scope give (0,0,3,1) specificity, enough to beat almost any theme's h3/p/ul rules. */ .mps-scope .mps-coupon-body { padding: 16px 22px 4px; flex: 1; } .mps-scope h3.mps-coupon-title { font-size: 16px; font-weight: 600; color: var(--mps-ink); margin: 0 0 4px; padding: 0; line-height: 1.3; letter-spacing: -0.01em; } .mps-scope p.mps-coupon-desc { font-size: 13px; color: var(--mps-ink-muted); line-height: 1.5; margin: 0 0 14px; padding: 0; } .mps-scope ul.mps-coupon-terms { list-style: none; margin: 0 0 14px; padding: 0; display: block; font-size: 12.5px; color: var(--mps-ink-muted); } .mps-scope ul.mps-coupon-terms li { display: flex; align-items: baseline; gap: 8px; line-height: 1.55; padding: 2px 0; margin: 0; } .mps-scope ul.mps-coupon-terms li::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--mps-ink-subtle); flex-shrink: 0; transform: translateY(-3px); } /* Footer: cost row + CTA */ .mps-scope .mps-coupon-foot { padding: 14px 22px 18px; } .mps-scope .mps-coupon-cost-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; font-size: 13px; } .mps-scope .mps-coupon-cost-label { color: var(--mps-ink-muted); font-weight: 500; } .mps-scope .mps-coupon-cost-value { font-weight: 600; color: var(--mps-ink); } .mps-scope .mps-coupon-cost-value em { font-style: normal; font-size: 17px; font-weight: 700; letter-spacing: -0.012em; font-variant-numeric: tabular-nums; margin-right: 3px; } .mps-scope .mps-coupon-card.is-locked .mps-coupon-cost-value em { color: var(--mps-primary); } .mps-scope .mps-coupon-form { margin: 0; } .mps-scope .mps-coupon-form .mps-btn { width: 100%; font-weight: 600; } /* Owned coupons list — one flex row per coupon. Code + amount sit naturally on the left; expiry label pushes to the right via margin-left:auto. flex-wrap kicks in on narrow mobile so expiry drops to a new line rather than squishing everything. Previous version used `justify-content: space-between` with a wrapping
, which created giant visual gaps between the code/amount cluster and the expiry on anything wider than ~380px. */ .mps-coupons-owned { list-style: none; margin: 0; padding: 0; } .mps-coupons-owned li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--mps-border); flex-wrap: wrap; } .mps-coupons-owned li:last-child { border-bottom: none; } .mps-coupons-owned code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--mps-ink); background: var(--mps-surface-2); padding: 4px 10px; border-radius: var(--mps-radius-sm); flex-shrink: 0; } .mps-coupons-owned-amt { font-weight: 700; /* Use --mps-ink (body text) instead of --mps-primary so the amount stays readable in both light and dark themes. Default `primary` is #1f1f1f (near-black) which collides with the dark-theme surface (#1a1a1d), producing black-on-black text. --mps-ink is always sized for contrast against the current surface. */ color: var(--mps-ink); font-variant-numeric: tabular-nums; font-size: 14px; flex-shrink: 0; } .mps-coupons-owned-exp { margin-left: auto; font-size: 12.5px; color: var(--mps-ink-subtle); font-variant-numeric: tabular-nums; flex-shrink: 0; } /* ========================================================================== * Referral social share buttons * ==========================================================================*/ .mps-share-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; } .mps-share-label { font-size: 12px; color: var(--mps-ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; } .mps-share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; color: #fff; transition: opacity .15s ease, transform .05s ease; } .mps-share-btn:hover { opacity: .88; color: #fff; } .mps-share-btn:active { transform: translateY(1px); } .mps-share-wa { background: #25D366; } .mps-share-line { background: #06C755; } .mps-share-fb { background: #1877F2; } .mps-share-tg { background: #229ED9; } .mps-share-btn svg { flex-shrink: 0; } @media (max-width: 480px) { .mps-share-btn span { display: none; } .mps-share-btn { padding: 9px 11px; } .mps-share-btn svg { width: 20px; height: 20px; } } /* ========================================================================== * Earn preview badge (product/cart/checkout) * ==========================================================================*/ .mps-earn-preview { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; background: color-mix(in srgb, var(--mps-success) 13%, transparent); color: var(--mps-success); border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.4; } .mps-earn-preview-inline { display: inline-flex; align-items: center; gap: 4px; color: var(--mps-ink-muted); font-size: 13px; margin-top: 4px; } .mps-earn-preview-inline .mps-earn-amount { color: var(--mps-success); font-weight: 600; } .mps-earn-preview-cart-row { padding: var(--mps-space-3) var(--mps-space-4); background: var(--mps-surface-2); border: 1px solid var(--mps-border); border-radius: var(--mps-radius-sm); margin: var(--mps-space-3) 0; font-size: 14px; color: var(--mps-ink); display: flex; justify-content: space-between; align-items: center; gap: var(--mps-space-2); } .mps-earn-preview-cart-row .mps-earn-amount { color: var(--mps-success); font-weight: 700; font-variant-numeric: tabular-nums; } /* Earn-preview checkout — integrated into #order_review totals table */ .woocommerce-checkout-review-order-table tr.mps-earn-checkout-row th, .woocommerce-checkout-review-order-table tr.mps-earn-checkout-row td { padding-top: 12px; padding-bottom: 12px; border-top: 1px dashed rgba(127,127,127,.3); vertical-align: middle; } .woocommerce-checkout-review-order-table tr.mps-earn-checkout-row th { font-weight: 500; opacity: .85; } .woocommerce-checkout-review-order-table tr.mps-earn-checkout-row .mps-earn-checkout-icon { opacity: .65; margin-right: 4px; } .woocommerce-checkout-review-order-table tr.mps-earn-checkout-row .mps-earn-checkout-amount { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* Earn-preview standalone banner — used when the hook can't fire (Elementor Pro checkout, custom themes). */ .mps-earn-checkout-banner { display: flex; align-items: center; gap: var(--mps-space-3); padding: var(--mps-space-3) var(--mps-space-4); margin: 0 0 var(--mps-space-4); background: var(--mps-surface-2); border: 1px solid var(--mps-border); border-radius: var(--mps-radius-sm); color: var(--mps-ink); font-size: 14px; line-height: 1.4; } .mps-earn-checkout-banner .mps-earn-checkout-icon { flex-shrink: 0; font-size: 14px; color: var(--mps-ink-muted); line-height: 1; } .mps-earn-checkout-banner .mps-earn-checkout-text { flex: 1; color: var(--mps-ink-muted); } .mps-earn-checkout-banner .mps-earn-checkout-amount { color: var(--mps-ink); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } @media (max-width: 520px) { .mps-earn-checkout-banner { gap: var(--mps-space-2); padding: var(--mps-space-2) var(--mps-space-3); } .mps-earn-checkout-banner .mps-earn-checkout-text { font-size: 13px; } } /* ========================================================================== * Redemption success banner (my-shop) * ==========================================================================*/ .mps-redeem-banner { display: flex; gap: var(--mps-space-4); background: color-mix(in srgb, var(--mps-success) 10%, transparent); border: 1px solid color-mix(in srgb, var(--mps-success) 30%, transparent); border-radius: var(--mps-radius); padding: var(--mps-space-4) var(--mps-space-5); margin-bottom: var(--mps-space-4); align-items: flex-start; } .mps-redeem-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 999px; background: var(--mps-success); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; } .mps-redeem-body { flex: 1; min-width: 0; } .mps-redeem-title { font-size: 17px; font-weight: 700; color: var(--mps-ink); margin-bottom: 4px; } .mps-redeem-meta { font-size: 14px; color: var(--mps-ink-muted); margin-bottom: var(--mps-space-2); line-height: 1.6; } .mps-redeem-code-row { display: flex; gap: var(--mps-space-2); flex-wrap: wrap; align-items: center; margin-bottom: 6px; } .mps-redeem-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 18px; font-weight: 700; color: var(--mps-ink); background: var(--mps-surface); padding: 7px 14px; border-radius: var(--mps-radius-sm); letter-spacing: 0.06em; border: 1.5px dashed color-mix(in srgb, var(--mps-success) 40%, transparent); word-break: break-all; } .mps-redeem-hint { font-size: 12px; color: var(--mps-ink-muted); } /* ========================================================================== * Mobile * ==========================================================================*/ @media (max-width: 640px) { .mps-page { padding: var(--mps-space-3) var(--mps-space-3); } .mps-card { padding: var(--mps-space-4); } .mps-hero { padding: var(--mps-space-5) var(--mps-space-4); } .mps-hero-title { font-size: 24px; } .mps-stat-row { grid-template-columns: 1fr; gap: var(--mps-space-3); } .mps-shop-grid { grid-template-columns: 1fr 1fr; gap: var(--mps-space-3); } .mps-tiers-grid { grid-template-columns: 1fr; } /* History list: the base .mps-history-item rule above already uses a 2-row grid (date caption row, then note+amount row) that's symmetric on all viewport widths. No override needed. Just shrink the note/amount font a touch on narrow screens. */ .mps-history-note { font-size: 13px; } .mps-history-delta { font-size: 14px; } } @media (max-width: 400px) { .mps-shop-grid { grid-template-columns: 1fr; } }