/**
* EnableU PMPro Customizations – Checkout styling.
*
* Uses the theme CSS custom properties when available
* (var(--primary), var(--accent), var(--card), var(--border) ...) and
* falls back to the EnableU brand colors:
* - Primary navy: #2e5b9a
* - Accent green: #2bb673
* - Foreground: #0f1f3a
* - Surface: #ffffff
*/
.pmpro_checkout {
--enableu-primary: var(--primary, #2e5b9a);
--enableu-accent: var(--accent, #2bb673);
--enableu-foreground: var(--foreground, #0f1f3a);
--enableu-muted-foreground: var(--muted-foreground, #4b5d7a);
--enableu-card: var(--card, #ffffff);
--enableu-border: var(--border, #d8dee9);
--enableu-surface-hover: rgba(46, 91, 154, 0.04);
--enableu-focus-bg: rgba(43, 182, 115, 0.06);
--enableu-focus-ring: rgba(46, 91, 154, 0.18);
}
/* -----------------------------------------------------------------
* Layout: hide elements we removed.
* ----------------------------------------------------------------- */
#pmpro_form_field-username,
.pmpro_form_field-username,
.enableu-hidden-field {
display: none !important;
}
#pmpro_form_fieldset-more-information,
.pmpro_form_fieldset-more-information {
display: none !important;
}
.pmpro_form_field-bconfirmemail {
display: none !important;
}
/* -----------------------------------------------------------------
* Card sections (Account Info, Membership Info, etc.).
* ----------------------------------------------------------------- */
.pmpro_checkout .pmpro_card {
border: 1px solid var(--enableu-border);
border-radius: 12px;
background: var(--enableu-card);
box-shadow: 0 4px 16px rgba(15, 31, 58, 0.04);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.pmpro_checkout .pmpro_card:hover {
box-shadow: 0 6px 22px rgba(15, 31, 58, 0.08);
}
.pmpro_checkout .pmpro_card_content {
padding: 1.5rem 1.75rem;
}
.pmpro_checkout .pmpro_card_actions {
background: var(--enableu-surface-hover);
border-top: 1px solid var(--enableu-border);
padding: 0.875rem 1.75rem;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
.pmpro_checkout .pmpro_card_actions a {
color: var(--enableu-primary);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.15s ease;
}
.pmpro_checkout .pmpro_card_actions a:hover,
.pmpro_checkout .pmpro_card_actions a:focus {
border-bottom-color: var(--enableu-accent);
}
/* -----------------------------------------------------------------
* Section headings.
* ----------------------------------------------------------------- */
.pmpro_checkout .pmpro_form_legend {
margin-bottom: 1.25rem;
}
.pmpro_checkout .pmpro_form_heading {
color: var(--enableu-foreground);
font-weight: 700;
letter-spacing: -0.01em;
position: relative;
padding-bottom: 0.5rem;
}
.pmpro_checkout .pmpro_form_heading::after {
content: "";
display: block;
width: 36px;
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg, var(--enableu-primary), var(--enableu-accent));
margin-top: 0.5rem;
}
/* -----------------------------------------------------------------
* Labels.
* ----------------------------------------------------------------- */
.pmpro_checkout .pmpro_form_label {
display: block;
font-weight: 600;
color: var(--enableu-foreground);
margin-bottom: 0.4rem;
font-size: 0.9rem;
}
.pmpro_checkout .pmpro_asterisk abbr,
.pmpro_checkout .pmpro_asterisk {
color: var(--enableu-accent);
text-decoration: none;
border: none;
}
/* -----------------------------------------------------------------
* Inputs (text, email, password, number, ...).
* ----------------------------------------------------------------- */
.pmpro_checkout input[type="text"],
.pmpro_checkout input[type="email"],
.pmpro_checkout input[type="password"],
.pmpro_checkout input[type="number"],
.pmpro_checkout input[type="tel"],
.pmpro_checkout input[type="url"],
.pmpro_checkout select,
.pmpro_checkout textarea,
.pmpro_checkout .pmpro_form_input {
width: 100%;
padding: 0.7rem 0.9rem;
font-size: 0.95rem;
line-height: 1.4;
color: var(--enableu-foreground);
background-color: var(--enableu-card);
border: 1.5px solid var(--enableu-border);
border-radius: 8px;
box-shadow: none;
transition:
border-color 0.15s ease,
background-color 0.15s ease,
box-shadow 0.15s ease;
-webkit-appearance: none;
appearance: none;
}
.pmpro_checkout input[type="text"]:hover,
.pmpro_checkout input[type="email"]:hover,
.pmpro_checkout input[type="password"]:hover,
.pmpro_checkout input[type="number"]:hover,
.pmpro_checkout input[type="tel"]:hover,
.pmpro_checkout input[type="url"]:hover,
.pmpro_checkout select:hover,
.pmpro_checkout textarea:hover,
.pmpro_checkout .pmpro_form_input:hover {
border-color: color-mix(in srgb, var(--enableu-primary) 60%, var(--enableu-border));
}
.pmpro_checkout input[type="text"]:focus,
.pmpro_checkout input[type="email"]:focus,
.pmpro_checkout input[type="password"]:focus,
.pmpro_checkout input[type="number"]:focus,
.pmpro_checkout input[type="tel"]:focus,
.pmpro_checkout input[type="url"]:focus,
.pmpro_checkout select:focus,
.pmpro_checkout textarea:focus,
.pmpro_checkout .pmpro_form_input:focus {
outline: none;
border-color: var(--enableu-primary);
background-color: var(--enableu-focus-bg);
box-shadow: 0 0 0 4px var(--enableu-focus-ring);
}
.pmpro_checkout input::placeholder,
.pmpro_checkout textarea::placeholder {
color: var(--enableu-muted-foreground);
opacity: 0.7;
}
/* Auto-fill: match brand palette so Chrome/Safari don't show their default
* yellow tint after autofill. */
.pmpro_checkout input:-webkit-autofill,
.pmpro_checkout input:-webkit-autofill:hover,
.pmpro_checkout input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--enableu-foreground);
-webkit-box-shadow: 0 0 0 1000px var(--enableu-card) inset;
box-shadow: 0 0 0 1000px var(--enableu-card) inset;
transition: background-color 5000s ease-in-out 0s;
}
/* Validation error highlighting on inputs PMPro flags. */
.pmpro_checkout .pmpro_form_input.pmpro_error,
.pmpro_checkout input.pmpro_error,
.pmpro_checkout .pmpro_form_field.pmpro_error input {
border-color: #d64545;
background-color: rgba(214, 69, 69, 0.04);
}
.pmpro_checkout .pmpro_form_input.pmpro_error:focus,
.pmpro_checkout input.pmpro_error:focus {
box-shadow: 0 0 0 4px rgba(214, 69, 69, 0.18);
}
/* -----------------------------------------------------------------
* Field spacing.
* ----------------------------------------------------------------- */
.pmpro_checkout .pmpro_form_field {
margin-bottom: 1.1rem;
}
.pmpro_checkout .pmpro_cols-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
@media (max-width: 540px) {
.pmpro_checkout .pmpro_cols-2 {
grid-template-columns: 1fr;
gap: 0;
}
}
.enableu-pmpro-name-fields {
margin-bottom: 0.25rem;
}
/* -----------------------------------------------------------------
* Password show/hide toggle button.
* ----------------------------------------------------------------- */
.pmpro_checkout .pmpro_form_field-password {
position: relative;
}
.pmpro_checkout .pmpro_form_field-password-toggle {
position: absolute;
right: 0;
top: 0;
}
.pmpro_checkout .pmpro_btn-password-toggle {
background: transparent;
border: none;
color: var(--enableu-primary);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0;
}
.pmpro_checkout .pmpro_btn-password-toggle:hover,
.pmpro_checkout .pmpro_btn-password-toggle:focus {
color: var(--enableu-accent);
outline: none;
}
.pmpro_checkout .pmpro_btn-password-toggle svg {
stroke: currentColor;
}
/* -----------------------------------------------------------------
* Submit button.
* ----------------------------------------------------------------- */
.pmpro_checkout input[type="submit"],
.pmpro_checkout button[type="submit"],
.pmpro_checkout .pmpro_btn-submit-checkout {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 1.75rem;
font-size: 1rem;
font-weight: 600;
color: #ffffff;
background: linear-gradient(90deg, var(--enableu-primary) 0%, var(--enableu-accent) 100%);
background-size: 200% 100%;
background-position: 0% 50%;
border: none;
border-radius: 999px;
cursor: pointer;
box-shadow: 0 6px 18px rgba(43, 182, 115, 0.25);
transition:
background-position 0.4s ease,
transform 0.15s ease,
box-shadow 0.2s ease;
letter-spacing: 0.01em;
}
.pmpro_checkout input[type="submit"]:hover,
.pmpro_checkout button[type="submit"]:hover,
.pmpro_checkout .pmpro_btn-submit-checkout:hover {
background-position: 100% 50%;
box-shadow: 0 10px 24px rgba(46, 91, 154, 0.28);
transform: translateY(-1px);
}
.pmpro_checkout input[type="submit"]:focus,
.pmpro_checkout button[type="submit"]:focus,
.pmpro_checkout .pmpro_btn-submit-checkout:focus {
outline: none;
box-shadow:
0 0 0 4px var(--enableu-focus-ring),
0 6px 18px rgba(43, 182, 115, 0.25);
}
.pmpro_checkout input[type="submit"]:active,
.pmpro_checkout button[type="submit"]:active,
.pmpro_checkout .pmpro_btn-submit-checkout:active {
transform: translateY(0);
}
/* -----------------------------------------------------------------
* Membership / pricing summary text.
* ----------------------------------------------------------------- */
.pmpro_checkout #pmpro_level_cost strong,
.pmpro_checkout #pmpro_level_name {
color: var(--enableu-primary);
}
/* -----------------------------------------------------------------
* Inline messages (errors & notices).
* ----------------------------------------------------------------- */
.pmpro_checkout .pmpro_message {
border-radius: 8px;
padding: 0.85rem 1rem;
margin-bottom: 1.25rem;
font-size: 0.95rem;
border: 1px solid transparent;
}
.pmpro_checkout .pmpro_message.pmpro_error {
background-color: rgba(214, 69, 69, 0.08);
border-color: rgba(214, 69, 69, 0.25);
color: #8a2727;
}
.pmpro_checkout .pmpro_message.pmpro_success {
background-color: rgba(43, 182, 115, 0.08);
border-color: rgba(43, 182, 115, 0.3);
color: #1c7547;
}
/* -----------------------------------------------------------------
* Page heading: "Membership Checkout".
* ----------------------------------------------------------------- */
.entry-title,
.pmpro_checkout > h1,
.pmpro_checkout > h2 {
color: var(--enableu-foreground);
}
/* ============================================================
* Branded checkout shell.
*
* The rules below restyle the *surrounding chrome* of the PMPro
* checkout page when it is rendered inside templates/template-checkout.php
* (theme). They mirror the stage.enableu.com/signup split-screen design.
*
* Every rule is scoped under `body.enableu-checkout-body` or
* `.enableu-checkout` so they cannot leak into other PMPro pages
* (account / billing / invoice / cancel) which use the default theme
* page template and do NOT receive these wrapper classes.
*
* The form-field rules above (.pmpro_checkout *) keep working as-is
* because PMPro still emits those classes inside the form regardless
* of the surrounding template.
* ============================================================ */
/* ----- 0) Body reset on the checkout body ----- */
body.enableu-checkout-body {
margin: 0;
padding: 0;
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #eff6ff 100%);
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: #111827;
min-height: 100vh;
}
body.enableu-checkout-body #wpadminbar {
display: none !important;
}
body.enableu-checkout-body html {
margin-top: 0 !important;
}
/* ----- 1) Shell layout ----- */
.enableu-checkout {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: #111827;
}
.enableu-checkout.enableu-checkout--shell {
min-height: 100vh;
width: 100%;
display: block;
}
.enableu-checkout__grid {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
.enableu-checkout__grid {
grid-template-columns: 1fr 1fr;
}
}
/* ----- 2) Brand pane (left side, desktop only) ----- */
.enableu-checkout__aside {
display: none;
}
@media (min-width: 1024px) {
.enableu-checkout__aside {
position: relative;
display: block;
overflow: hidden;
}
}
.enableu-checkout__aside-bg {
position: absolute;
inset: 0;
background-image: linear-gradient(to bottom right, #dbeafe 0%, #ffffff 50%, #ecfdf5 100%);
}
.enableu-checkout__aside-blob {
position: absolute;
border-radius: 9999px;
filter: blur(64px);
}
.enableu-checkout__aside-blob--top {
top: -6rem;
left: -6rem;
height: 24rem;
width: 24rem;
background-color: rgba(191, 219, 254, 0.4);
}
.enableu-checkout__aside-blob--bottom {
bottom: -6rem;
right: -6rem;
height: 28rem;
width: 28rem;
background-color: rgba(167, 243, 208, 0.4);
}
.enableu-checkout__aside-veil {
position: absolute;
inset: 0;
background-color: rgba(255, 255, 255, 0.35);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.enableu-checkout__aside-inner {
position: relative;
z-index: 10;
display: flex;
height: 100%;
min-height: 100vh;
align-items: center;
justify-content: center;
padding: 2rem;
}
.enableu-checkout__aside-content {
width: 100%;
max-width: 36rem;
}
/* Persona-tile row (decorative). */
.enableu-checkout__personas {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin: 0 0 1.5rem 0;
}
.enableu-checkout__persona-cell {
flex: 1 1 0;
display: flex;
justify-content: center;
}
.enableu-checkout__personas--mobile {
overflow-x: auto;
margin-bottom: 1rem;
}
.enableu-checkout__personas--mobile .enableu-checkout__persona-cell {
flex-shrink: 0;
}
/* Brand card (sits inside the brand pane). */
.enableu-checkout__brand-card {
border-radius: 1.5rem;
background-color: rgba(255, 255, 255, 0.85);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
padding: 2.5rem 2rem;
}
.enableu-checkout__brand-card--compact {
padding: 1.75rem 1.5rem;
border-radius: 1.5rem;
}
.enableu-checkout__brand-row {
display: inline-flex;
align-items: center;
gap: 0.75rem;
margin: 0 0 1rem 0;
}
.enableu-checkout__brand-row--compact {
margin-bottom: 0.75rem;
}
.enableu-checkout__brand-mark {
height: 3rem;
width: 3rem;
border-radius: 0.75rem;
background-color: #2563eb;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-weight: 700;
font-size: 1.125rem;
letter-spacing: 0.025em;
}
.enableu-checkout__brand-mark--sm {
height: 2.5rem;
width: 2.5rem;
border-radius: 0.5rem;
font-size: 0.875rem;
}
.enableu-checkout__brand-name {
font-size: 1.5rem;
font-weight: 600;
color: #1f2937;
}
a.enableu-checkout__brand-name {
text-decoration: none;
color: inherit;
cursor: pointer;
}
a.enableu-checkout__brand-name:hover,
a.enableu-checkout__brand-name:focus {
text-decoration: none;
color: inherit;
}
.enableu-checkout__brand-name--sm {
font-size: 1.125rem;
}
.enableu-checkout__headline {
font-size: 1.875rem;
line-height: 1.2;
font-weight: 800;
color: #111827;
margin: 0;
}
@media (min-width: 768px) {
.enableu-checkout__headline {
font-size: 2.25rem;
}
}
.enableu-checkout__headline--sm {
font-size: 1.25rem;
margin-top: 0;
}
.enableu-checkout__accent {
color: #2563eb;
}
.enableu-checkout__lede {
margin: 0.75rem 0 0 0;
font-size: 1rem;
color: #374151;
line-height: 1.5;
}
@media (min-width: 768px) {
.enableu-checkout__lede {
font-size: 1.125rem;
}
}
.enableu-checkout__bullets {
margin: 1.5rem 0 0 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: 1fr;
gap: 0.5rem;
font-size: 0.875rem;
color: #1f2937;
}
@media (min-width: 768px) {
.enableu-checkout__bullets {
font-size: 1rem;
}
}
.enableu-checkout__bullets li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.enableu-checkout__bullet-dot {
margin-top: 0.5rem;
display: inline-block;
height: 0.375rem;
width: 0.375rem;
border-radius: 9999px;
background-color: #2563eb;
flex-shrink: 0;
}
.enableu-checkout__aside-cta {
margin: 1.5rem 0 0 0;
}
.enableu-checkout__aside-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.625rem 1.25rem;
border: 1px solid #e5e7eb;
border-radius: 0.75rem;
background-color: #ffffff;
color: #111827;
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.enableu-checkout__aside-link:hover,
.enableu-checkout__aside-link:focus {
background-color: #f9fafb;
border-color: #d1d5db;
text-decoration: none;
}
/* ----- 3) Right pane (form) layout ----- */
.enableu-checkout__main {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 2.5rem 1.5rem;
}
@media (min-width: 1024px) {
.enableu-checkout__main {
justify-content: center;
padding: 3rem 1.5rem;
}
}
.enableu-checkout__main-inner {
width: 100%;
max-width: 32rem;
}
.enableu-checkout__heading {
margin-bottom: 1.5rem;
}
.enableu-checkout__title {
font-size: 1.5rem;
font-weight: 700;
color: #111827;
margin: 0;
letter-spacing: -0.01em;
}
.enableu-checkout__subtitle {
margin: 0.5rem 0 0 0;
font-size: 0.875rem;
color: #4b5563;
}
/* Mobile-only compact brand block (shown above the form on small screens). */
.enableu-checkout__mobile-brand {
width: 100%;
max-width: 32rem;
margin-bottom: 1.5rem;
}
@media (min-width: 1024px) {
.enableu-checkout__mobile-brand {
display: none;
}
}
/* ----- 4) Form card (wraps PMPro's pages/checkout.php output) ----- */
.enableu-checkout__card {
border-radius: 1rem;
border: 1px solid #e5e7eb;
background-color: #ffffff;
padding: 1.25rem;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
@media (min-width: 640px) {
.enableu-checkout__card {
padding: 1.5rem;
}
}
/* ----- 5) PMPro card chrome reset inside the branded shell -----
* PMPro wraps the Membership Information / Account Information sections in
* .pmpro_card with their own borders, shadows and padding. Since we already
* provide a single outer .enableu-checkout__card, flatten the nested cards
* into simple stacked sections so we don't get a "card inside a card" look.
*/
.enableu-checkout__card .pmpro {
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
max-width: none !important;
}
.enableu-checkout__card .pmpro_card {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 0 1.5rem 0 !important;
}
.enableu-checkout__card .pmpro_card:last-child {
margin-bottom: 0 !important;
}
.enableu-checkout__card .pmpro_card:hover {
box-shadow: none !important;
}
.enableu-checkout__card .pmpro_card_content {
padding: 0 !important;
background: transparent !important;
}
/* Drop the gradient underline accent on section headings inside the shell -
* the surrounding card already provides clear visual separation. */
.enableu-checkout__card .pmpro_form_heading::after {
display: none !important;
}
.enableu-checkout__card .pmpro_form_heading {
font-size: 1rem;
font-weight: 600;
color: #111827;
padding-bottom: 0;
margin-bottom: 0.75rem;
}
.enableu-checkout__card .pmpro_form_legend {
margin-bottom: 0.75rem;
}
/* Card actions row ("Already have an account? Log in here") */
.enableu-checkout__card .pmpro_card_actions {
background: transparent !important;
border: 0 !important;
padding: 0.75rem 0 0 0 !important;
margin: 0 !important;
font-size: 0.875rem;
color: #4b5563;
}
.enableu-checkout__card .pmpro_card_actions a {
color: #2563eb !important;
font-weight: 500;
border-bottom: 0;
text-decoration: none;
}
.enableu-checkout__card .pmpro_card_actions a:hover,
.enableu-checkout__card .pmpro_card_actions a:focus {
text-decoration: underline;
border-bottom: 0;
}
/* Match the signup mockup input look (12px radius, slightly tighter padding). */
.enableu-checkout__card input[type="text"],
.enableu-checkout__card input[type="email"],
.enableu-checkout__card input[type="password"],
.enableu-checkout__card input[type="number"],
.enableu-checkout__card input[type="tel"],
.enableu-checkout__card input[type="url"],
.enableu-checkout__card select,
.enableu-checkout__card textarea,
.enableu-checkout__card .pmpro_form_input {
border: 1px solid #d1d5db !important;
border-radius: 0.75rem !important;
background-color: #ffffff !important;
padding: 0.625rem 0.75rem !important;
font-size: 0.875rem !important;
color: #111827 !important;
box-shadow: none !important;
min-height: 2.5rem !important;
height: auto !important;
box-sizing: border-box !important;
}
.enableu-checkout__card input[type="text"]:focus,
.enableu-checkout__card input[type="email"]:focus,
.enableu-checkout__card input[type="password"]:focus,
.enableu-checkout__card .pmpro_form_input:focus {
border-color: #3b82f6 !important;
background-color: #ffffff !important;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) !important;
outline: none !important;
}
.enableu-checkout__card .pmpro_form_label {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
margin-bottom: 0.5rem;
}
.enableu-checkout__card .pmpro_asterisk {
color: #dc2626;
}
.enableu-checkout__card .pmpro_asterisk abbr {
color: #dc2626;
border: 0;
}
/* ----- 6) Submit button (signup-mockup blue pill) ----- */
.enableu-checkout__card input[type="submit"],
.enableu-checkout__card button[type="submit"],
.enableu-checkout__card .pmpro_btn-submit-checkout {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 100% !important;
margin: 0.5rem 0 0 0 !important;
padding: 0.75rem 1rem !important;
font-size: 0.875rem !important;
font-weight: 600 !important;
color: #ffffff !important;
background: #2563eb !important;
background-image: none !important;
border: 0 !important;
border-radius: 0.75rem !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
cursor: pointer !important;
transition: background-color 0.15s ease, opacity 0.15s ease !important;
letter-spacing: normal !important;
text-shadow: none !important;
height: auto !important;
line-height: 1.4 !important;
transform: none !important;
}
.enableu-checkout__card input[type="submit"]:hover,
.enableu-checkout__card button[type="submit"]:hover,
.enableu-checkout__card .pmpro_btn-submit-checkout:hover {
background: #1d4ed8 !important;
background-image: none !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
transform: none !important;
}
.enableu-checkout__card input[type="submit"]:focus,
.enableu-checkout__card button[type="submit"]:focus,
.enableu-checkout__card .pmpro_btn-submit-checkout:focus {
outline: none !important;
background: #1d4ed8 !important;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5) !important;
}
/* PMPro renders the submit button inside #pmpro_submit_span which by
* default sits inside a form footer with extra margin. Tighten it so the
* button hugs the form. */
.enableu-checkout__card #pmpro_submit_span,
.enableu-checkout__card .pmpro_submit {
margin: 0 !important;
padding: 0 !important;
display: block;
width: 100%;
}
/* ----- 7) Field-row layout overrides inside the branded shell -----
* PMPro's variation_1.css ships a scoped rule
* .pmpro .pmpro_form_field { display: flex; flex-direction: column; }
* .pmpro .pmpro_cols-2 { display: flex; flex-wrap: wrap; gap: ...; }
* .pmpro .pmpro_cols-2 > * { width: calc(50% - gap/2); }
* The last selector targets *children* (specificity 0,1,1 with descendant
* combinator) and beats our same-specificity `.pmpro_checkout .pmpro_cols-2`
* grid override on its own. Inside our shell we want:
* - any standalone .pmpro_form_field row to be full width (so Email, the
* hidden Username sibling, etc. don't shrink to 50%);
* - .pmpro_cols-2 to render as a clean 2-up grid (or single column on
* narrow viewports) with each child filling its own grid cell;
* - children to get `min-width: 0` so the absolutely-positioned icon
* wrappers we inject can't blow out the column.
* `!important` is used because PMPro's variation rules are also unscoped
* (live under `.pmpro`) and we explicitly want our shell rules to win.
*/
.enableu-checkout__card .pmpro_form_field {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
.enableu-checkout__card .pmpro_cols-2 {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 1rem !important;
width: 100% !important;
}
.enableu-checkout__card .pmpro_cols-2 > .pmpro_form_field,
.enableu-checkout__card .pmpro_cols-2 > * {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: initial !important;
}
@media (max-width: 540px) {
.enableu-checkout__card .pmpro_cols-2 {
grid-template-columns: minmax(0, 1fr) !important;
gap: 0 !important;
}
}
/* Decorated input wrappers (added by the template script). Must be a
* full-width block so the input fills its row and the absolutely-positioned
* leading icon / toggle button sit against the input edges - not against
* a shrink-to-fit inline span. */
.enableu-checkout__field {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
/* When the wrapper carries a leading icon or trailing toggle, reserve the
* matching padding on the input itself so typed text never sits under the
* icon. These class-based rules replace the previous inline `style.paddingX`
* injection from JS, which lost specificity to the `.enableu-checkout__card
* input[type=...] { padding: ... !important }` rule (the inline style had
* no `!important`, the CSS rule did). */
.enableu-checkout__card .enableu-checkout__field--has-leading > input {
padding-left: 2.5rem !important;
}
.enableu-checkout__card .enableu-checkout__field--has-toggle > input {
padding-right: 2.5rem !important;
}
.enableu-checkout__icon {
position: absolute;
display: inline-flex;
}
.enableu-checkout__icon--leading {
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
pointer-events: none;
}
.enableu-checkout__toggle {
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: 0;
padding: 0.375rem;
margin: 0;
color: #6b7280;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.375rem;
box-shadow: none;
width: auto;
height: auto;
line-height: 1;
}
/* Slightly larger eye icon so it reads well at the right edge of the
* password input. Overrides the `h-4 w-4` Tailwind classes the helper
* adds to the inline SVG. */
.enableu-checkout__toggle svg {
width: 1.25rem !important;
height: 1.25rem !important;
display: block;
}
.enableu-checkout__toggle:hover {
color: #111827;
background: transparent;
}
.enableu-checkout__toggle:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
/* Hide PMPro's built-in "Show Password" toggle (rendered as a sibling
* of the password label by `pmpro_password_toggle`). It pushed the
* Confirm Password column down and looked redundant next to our own
* eye icon inside the input. The branded shell already provides the
* Lucide eye toggle on every password field, so we suppress PMPro's
* one here. Server-side behaviour is unaffected. */
.enableu-checkout__card .pmpro_form_field-password-toggle,
.enableu-checkout__card .pmpro_btn-password-toggle {
display: none !important;
}
/* PMPro's variation_1.css turns the Password field into a 2-column CSS grid
* `grid-template-columns: 1fr auto;`
* `grid-template-areas: "label toggle" "input input";`
* whenever it has a `.pmpro_form_field-password-toggle` child - which it
* always does inside `#pmpro_user_fields`, even with the toggle hidden via
* `display: none` (the `:has()` selector still matches because the element
* is still in the DOM).
*
* Our template wraps the password in a custom for icon
* positioning, so the input stops being a direct grid item. The wrapper
* span auto-places into the narrow `auto` column, squeezing the Password
* input to ~20ch while the sibling Confirm Password input (no toggle child,
* no grid layout) stays full width. The result is a visibly mis-aligned
* Password / Confirm Password row.
*
* Force the password field back to a normal block layout inside the shell
* so both columns of the parent `.pmpro_cols-2` grid render identically.
* Selector includes `#pmpro_user_fields` to match PMPro's specificity
* (1 ID, 2 classes) plus `.enableu-checkout__card` to scope to the shell. */
.enableu-checkout__card #pmpro_user_fields .pmpro_form_field-password,
.enableu-checkout__card #pmpro_user_fields .pmpro_form_field-password:has(.pmpro_form_field-password-toggle) {
display: block !important;
grid-template-columns: none !important;
grid-template-areas: none !important;
align-items: stretch !important;
}
/* ----- 8) Inline messages inside the shell ----- */
.enableu-checkout__card .pmpro_message {
margin: 0 0 1rem 0;
padding: 0.75rem;
font-size: 0.875rem;
border-radius: 0.5rem;
border: 0;
}
.enableu-checkout__card .pmpro_message.pmpro_error {
color: #b91c1c;
background-color: #fef2f2;
}
.enableu-checkout__card .pmpro_message.pmpro_success {
color: #047857;
background-color: #ecfdf5;
}
/* ----- 9) Legal / sign-in lines below the form ----- */
.enableu-checkout__legal,
.enableu-checkout__signin {
margin: 1rem 0 0 0;
text-align: center;
font-size: 0.875rem;
color: #4b5563;
}
.enableu-checkout__legal a,
.enableu-checkout__signin a {
color: #2563eb;
font-weight: 500;
text-decoration: none;
}
.enableu-checkout__legal a:hover,
.enableu-checkout__signin a:hover {
text-decoration: underline;
}
/* ----- 10) Terms & Conditions agreement checkbox -----
* Rendered via the `pmpro_checkout_before_submit_button` action by
* `enableu_pmpro_cust_render_terms_checkbox()`. The matching JS in
* assets/js/checkout.js gates the Submit button while server-side
* `pmpro_registration_checks` enforces the rule on POST. Hide PMPro's
* own "Already have an account? Log in here" row inside the branded
* shell - the same link is rendered below the form card by the
* template's `.enableu-checkout__signin` paragraph.
* ------------------------------------------------------------------ */
body.enableu-checkout-body .enableu-checkout__card .pmpro_card_actions {
display: none !important;
}
.enableu-checkout__card .enableu-pmpro-terms {
margin: 0.75rem 0 1rem;
font-size: 0.875rem;
color: #4b5563;
}
.enableu-checkout__card .enableu-pmpro-terms__label {
display: flex;
gap: 0.5rem;
align-items: flex-start;
line-height: 1.45;
cursor: pointer;
}
.enableu-checkout__card .enableu-pmpro-terms input[type="checkbox"] {
margin: 0.2rem 0 0 0;
width: 1rem;
height: 1rem;
min-height: 0 !important;
flex: 0 0 auto;
accent-color: #2563eb;
cursor: pointer;
}
.enableu-checkout__card .enableu-pmpro-terms a {
color: #2563eb;
font-weight: 500;
text-decoration: none;
}
.enableu-checkout__card .enableu-pmpro-terms a:hover,
.enableu-checkout__card .enableu-pmpro-terms a:focus {
text-decoration: underline;
}
.enableu-checkout__card .pmpro_btn-submit-checkout[disabled],
.enableu-checkout__card input[type="submit"][disabled] {
opacity: 0.55;
cursor: not-allowed !important;
background: #93c5fd !important;
box-shadow: none !important;
}
/* ----- 11) Logout button (replaces Submit when user is already logged in)
*
* Rendered by `enableu_pmpro_cust_render_logout_button()` as an tag
* carrying the same `.pmpro_btn-submit-checkout` class as PMPro's native
* submit input, so the existing block-button rules above already handle
* the bulk of the styling. We just neutralize anchor defaults
* (underline, theme link color) and ensure the wrapper span behaves like
* the original `#pmpro_submit_span` flex container.
* ------------------------------------------------------------------ */
.enableu-checkout__card .enableu-pmpro-logout-span {
margin: 0 !important;
padding: 0 !important;
display: block;
width: 100%;
}
.enableu-checkout__card a.enableu-pmpro-logout-btn,
.enableu-checkout__card a.enableu-pmpro-logout-btn:visited {
color: #ffffff !important;
text-decoration: none !important;
text-align: center;
}
.enableu-checkout__card a.enableu-pmpro-logout-btn:hover,
.enableu-checkout__card a.enableu-pmpro-logout-btn:focus {
color: #ffffff !important;
text-decoration: none !important;
}