/**
* PS Tactical Membership — Shared Stylesheet
*
* Covers three UI areas:
* 1. Checkout notices (existing-account guard, registration required)
* 2. Points redemption box on the checkout page
* 3. Membership summary panel on My Account dashboard
*
* Design principles:
* - !important is avoided in general; specificity is managed via class nesting.
* The exceptions are deliberate: the guest-gate security-boundary hide/show
* rules (section 1b) must beat Flatsome/WooCommerce theme CSS to keep the
* order form hidden, and a few WooCommerce link-colour overrides force #fff
* on branded buttons. These are intentional and documented inline.
* - Colour variables use CSS custom properties so themes can override them.
* - Fully responsive; no fixed pixel widths.
* - RTL-agnostic (Thai is LTR, but we use logical properties where feasible).
*
* Text domain: ps-tactical-membership
* Minimum browser support: any browser shipped with WP 6.x target audience.
*/
/* ============================================================================
CSS Custom Properties (theme override tokens)
============================================================================ */
:root {
/* Brand colours — override in child-theme or Customizer additional CSS */
--pstm-primary: #1a3a5c; /* dark navy, PS Tactical brand */
--pstm-primary-light: #2a5080;
--pstm-accent: #e8a020; /* amber/gold accent */
--pstm-success: #2e7d32;
--pstm-error: #c62828;
--pstm-warning-bg: #fff8e1;
--pstm-warning-border: #f9a825;
--pstm-info-bg: #e3f2fd;
--pstm-info-border: #1976d2;
--pstm-surface: #f5f7fa;
--pstm-border: #d0d7de;
--pstm-text: #1a1a2e;
--pstm-text-muted: #6b7280;
--pstm-radius: 6px;
--pstm-radius-lg: 10px;
--pstm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--pstm-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
/* ============================================================================
1. CHECKOUT NOTICES
Rendered by PSTM_Checkout for the existing-account guard and the mandatory-
registration message. These appear near the billing email field.
============================================================================ */
/* Container injected by pstm-checkout.js below the email field */
.pstm-notice {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 10px 0 14px;
padding: 12px 16px;
border-radius: var(--pstm-radius);
font-size: 0.9em;
line-height: 1.5;
}
/* ── Existing-account / login prompt ───────────────────────────────────────── */
.pstm-notice--existing-account {
background: var(--pstm-warning-bg);
border: 1px solid var(--pstm-warning-border);
color: var(--pstm-text);
}
.pstm-notice--existing-account::before {
content: "⚠";
flex-shrink: 0;
font-size: 1.1em;
color: var(--pstm-warning-border);
}
/* Login link inside the notice */
.pstm-notice__login-link {
display: inline-block;
margin-top: 6px;
padding: 5px 14px;
border-radius: var(--pstm-radius);
background: var(--pstm-primary);
color: #fff !important; /* override WooCommerce link colour */
font-size: 0.88em;
font-weight: 600;
text-decoration: none;
transition: background 0.18s ease;
}
.pstm-notice__login-link:hover,
.pstm-notice__login-link:focus {
background: var(--pstm-primary-light);
color: #fff !important;
}
/* ── Registration required (server-side woocommerce error, styled via class) ── */
.woocommerce-error li[data-code="pstm_existing_account"],
.woocommerce-error li[data-code="pstm_registration_required"] {
/* WooCommerce natively wraps these in .woocommerce-error > ul > li;
we just ensure our codes are visually distinct. */
font-weight: 500;
}
/* ── Generic info notice (used by JS for neutral feedback) ─────────────────── */
.pstm-notice--info {
background: var(--pstm-info-bg);
border: 1px solid var(--pstm-info-border);
color: var(--pstm-text);
}
/* ── Error / blocking notice ───────────────────────────────────────────────── */
.pstm-notice--error {
background: #ffebee;
border: 1px solid var(--pstm-error);
color: var(--pstm-error);
}
/* Spinner shown during AJAX email check */
.pstm-notice--loading {
background: var(--pstm-surface);
border: 1px solid var(--pstm-border);
color: var(--pstm-text-muted);
font-style: italic;
}
/* ============================================================================
1b. CHECKOUT LOGIN / REGISTER GATE
Rendered by PSTM_Checkout::render_auth_gate() on woocommerce_before_checkout_form
for not-logged-in guests when registration is required. When the gate is
active, carries .pstm-guest-gate (added via the body_class filter) so
the real order form is hidden until the shopper logs in or registers.
============================================================================ */
/* When the guest gate is active, hide the actual order form entirely so the
shopper cannot bypass it, while keeping our gate (and WooCommerce notices)
fully visible. !important is used deliberately here: Flatsome and WooCommerce
set their own display rules on these containers, and the gate is a hard
security boundary on a live store — it must win regardless of theme CSS. */
body.pstm-guest-gate form.woocommerce-checkout,
body.pstm-guest-gate form.checkout,
body.pstm-guest-gate #customer_details,
body.pstm-guest-gate #order_review,
body.pstm-guest-gate #order_review_heading,
body.pstm-guest-gate .woocommerce-checkout-review-order,
body.pstm-guest-gate .woocommerce-checkout-payment {
display: none !important;
}
/* WooCommerce prints its OWN "Returning customer? Click here to login" and
"Have a coupon?" toggles on woocommerce_before_checkout_form, OUTSIDE the