wrapping the
) */
.gp-am__form-card .am-element,
.gp-am__form-card div.am-element {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
flex: 1 1 auto;
/* host the absolute-positioned password reveal icon */
position: relative !important;
}
/* Password show/hide eye — amember renders `
`
* as a sibling of the input. Without intervention it ends up on its own
* line below the field. Tuck it inside the right edge of the input. */
.gp-am__form-card .am-element input[type="password"].am-pass-reveal {
padding-right: 48px !important;
}
.gp-am__form-card .am-element .am-switch-reveal {
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 44px !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
cursor: pointer;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--gp-text-dim) !important;
z-index: 2;
}
/* eye glyph — drawn via CSS so we don't depend on amember's sprite */
.gp-am__form-card .am-element .am-switch-reveal::before {
content: "";
display: block;
width: 22px;
height: 14px;
background: transparent;
border: 1.5px solid currentColor;
border-radius: 0 0 22px 22px / 0 0 14px 14px;
border-top: 0;
position: relative;
transform: rotate(180deg);
}
.gp-am__form-card .am-element .am-switch-reveal::after {
content: "";
position: absolute;
width: 7px;
height: 7px;
border: 1.5px solid currentColor;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -55%);
}
.gp-am__form-card .am-element .am-switch-reveal:hover { color: var(--gp-gold) !important; }
.gp-am__form-card .am-element .am-switch-reveal-on::after {
/* strikethrough when password is revealed */
box-shadow: -8px -7px 0 -3px currentColor, 8px 7px 0 -3px currentColor;
}
/* ── 8. Inputs ────────────────────────────────────────────────────── */
.gp-am__form-card input[type="text"],
.gp-am__form-card input[type="email"],
.gp-am__form-card input[type="password"],
.gp-am__form-card input[type="tel"],
.gp-am__form-card input[type="number"],
.gp-am__form-card input[type="url"],
.gp-am__form-card input[type="search"],
.gp-am__form-card select,
.gp-am__form-card textarea {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding: 14px 16px !important;
background: var(--gp-bg) !important;
background-color: var(--gp-bg) !important;
background-image: none !important;
color: var(--gp-text) !important;
border: 1px solid var(--gp-border) !important;
border-radius: 0 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
font-family: var(--gp-font-body) !important;
font-size: 15px !important;
line-height: 1.4 !important;
outline: none !important;
height: auto !important;
min-height: 50px !important;
transition: border-color var(--gp-dur-base) var(--gp-ease-out);
}
.gp-am__form-card input::placeholder,
.gp-am__form-card textarea::placeholder { color: var(--gp-text-muted) !important; }
.gp-am__form-card input:focus,
.gp-am__form-card select:focus,
.gp-am__form-card textarea:focus { border-color: var(--gp-gold) !important; }
/* For the first/last name double-field rows amember renders as two
inputs in one am-element. Lay them side-by-side. */
.gp-am__form-card .am-element input[type="text"] + input[type="text"] {
margin-top: 10px !important;
}
/* Password-strength wrapper — amember wraps `` to host a strength bar. The
* default width collapses to ~200px which makes the field much narrower
* than its siblings. Force full-width + reset inner spacing. */
.gp-am__form-card .am-pass-indicator-wrap {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.gp-am__form-card .am-pass-indicator-wrap input[type="password"] {
width: 100% !important;
}
.gp-am__form-card .am-pass-indicator-bar {
margin-top: 6px !important;
height: 4px !important;
background: var(--gp-border) !important;
border-radius: 0 !important;
overflow: hidden !important;
}
.gp-am__form-card .am-pass-indicator-bar_bar {
height: 100% !important;
background: var(--gp-gold) !important;
transition: width var(--gp-dur-base) var(--gp-ease-out);
}
/* ── 9. Radio + checkbox lists — pricing card pattern ────────────── */
/* Each amember radio renders as `
` -
* style them like selectable pricing cards. Hide the native with no class inside .am-element after the radio list. */
.gp-am__form-card .am-element > div:not([class]),
.gp-am__form-card .am-element > div.empty,
.gp-am__form-card .am-row .am-element > div:not([class]) {
margin: 14px 0 0 !important;
font-family: var(--gp-font-body) !important;
font-size: 11px !important;
line-height: 1.5 !important;
color: var(--gp-text-muted) !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* ── 14. Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
.gp-am__benefit-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.gp-am { padding: 0 var(--gp-page-gutter); }
.gp-am__hero { padding: var(--gp-section-py-xs) 0 var(--gp-space-6); }
.gp-am__login-head { padding: var(--gp-section-py-xs) 0 var(--gp-space-6); }
.gp-am__benefits {
padding: var(--gp-space-6) 0;
margin-bottom: var(--gp-space-7);
}
.gp-am__benefit-list { grid-template-columns: 1fr; gap: var(--gp-space-5); }
.gp-am__form-card {
padding: var(--gp-space-6) var(--gp-space-5);
max-width: 100% !important;
}
}