*/
.claryss-radio-group {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.claryss-radio {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
cursor: pointer;
user-select: none;
}
.claryss-radio__input {
appearance: none;
-webkit-appearance: none;
width: 24px;
height: 24px;
margin: 0;
border: 0;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 24px 24px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
}
.claryss-radio__input:checked {
background-image: url("data:image/svg+xml;utf8,");
}
.claryss-radio__input:focus-visible {
outline: 2px solid var(--primary-400);
outline-offset: 2px;
border-radius: 50%;
}
.claryss-radio__label {
font-size: 14px;
line-height: 22px;
font-weight: 700;
color: var(--action-dark);
}
.claryss-radio:has(.claryss-radio__input:checked) .claryss-radio__label {
color: var(--primary-400);
}
/* Reusable checkbox component (light backgrounds).
Markup:
*/
.claryss-checkbox {
display: inline-flex;
align-items: flex-start;
gap: 6px;
cursor: pointer;
user-select: none;
}
/* inline-flex overrides the [hidden] default, so hide explicitly (used by the
JS-toggled credit-card consent checkbox). */
.claryss-checkbox[hidden] {
display: none;
}
.claryss-checkbox__input {
appearance: none;
-webkit-appearance: none;
position: relative;
top: 1px;
flex-shrink: 0;
width: 20px;
height: 20px;
margin: 0;
padding: 0;
border: 0;
background: transparent center / contain no-repeat;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
}
.claryss-checkbox:hover .claryss-checkbox__input:not(:checked) {
background-image: url("data:image/svg+xml;utf8,");
}
.claryss-checkbox:hover:not(:has(.claryss-checkbox__input:checked)) .claryss-checkbox__label {
color: var(--primary-500);
}
.claryss-checkbox__input:checked {
background-image: url("data:image/svg+xml;utf8,");
}
.claryss-checkbox__input:focus-visible {
outline: 2px solid var(--primary-500);
outline-offset: 2px;
}
.claryss-checkbox__label {
font-size: 14px;
line-height: 22px;
color: var(--secondary-700);
}
.claryss-checkbox__label a {
color: var(--primary-500);
text-decoration: none;
}
.claryss-checkbox__label a:hover,
.claryss-checkbox__label a:focus-visible {
text-decoration: underline;
}
/* Mobile (<=767px): hide the WP admin bar and undo its layout compensation.
- #wpadminbar: hide the bar itself.
- :root margin-top: WP core injects `html { margin-top: 46px !important }`
inline in , after our stylesheet, so a plain `html` rule can't win
on source order. `:root` has higher specificity than `html`, so this
beats it even with !important.
- body.admin-bar #page: the bar height is no longer reserved, so drop the
calc() that subtracted --wp-admin--admin-bar--height. */
@media (max-width: 767px) {
#wpadminbar {
display: none;
}
:root {
margin-top: 0 !important;
}
body.admin-bar #page {
min-height: 100vh;
}
}
/* ---------------------------------------------------------------------------
Password field with a show/hide eye button — claryss_password_field() in
inc/helpers.php, enhanced by assets/js/password-toggle.js.
Lives here, in the sitewide stylesheet, because the component is used on both
My Account and the Sign in page; account.css would only cover the first.
Geometry matches the existing decorative field icons (the name fields in
account.css): 20px icon, 15px from the right, 45px of right padding — so an
icon you can actually click sits exactly where the others do.
--------------------------------------------------------------------------- */
.claryss-password-field {
position: relative;
}
/* The class is repeated on purpose. Every surface that hosts this field already
pads its own inputs — `.woocommerce-account input.input-text` and
`.woocommerce-EditAccountForm input.input-text` in account.css, `.sign-in__input`
in the sign-in block — and those load after this file, so at equal specificity
they would win the tie and let the text run under the icon. Doubling the class
outweighs them all regardless of load order, without borrowing a class from
any of those surfaces that this component shouldn't depend on. */
.claryss-password-field input.claryss-password-field__input.claryss-password-field__input {
padding-right: 45px;
}
.claryss-password-field__toggle {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: 0;
background: none;
/* The SVGs use currentColor, so the icon follows this. */
color: var(--gray-300);
cursor: pointer;
line-height: 0;
}
.claryss-password-field__toggle:hover {
color: var(--surface-page);
}
.claryss-password-field__toggle svg {
display: block;
width: 20px;
height: 20px;
}
/* "Subscribers only" lock label (inc/post-access.php) — on article cards and on
a locked article, only for a visitor who cannot read it. */
.claryss-subscribers-badge {
display: inline-flex;
align-items: center;
gap: 5px;
align-self: flex-start;
padding: 3px 8px;
border-radius: 6px;
background-color: var(--surface-action);
color: var(--primary-400);
font-size: 12px;
line-height: 16px;
font-weight: 700;
letter-spacing: 0.3px;
white-space: nowrap;
}
.claryss-subscribers-badge svg {
flex-shrink: 0;
}