/**
* ASA Magic Link — front-end form styles. Intentionally light so it inherits the
* theme's look; only structural spacing + the full-switch hiding of native forms.
*
* ---------------------------------------------------------------------------------
* THEME DEVELOPERS — how to restyle / adapt to your theme
* ---------------------------------------------------------------------------------
* The magic-link request form renders through standard hooks, so it appears on any
* WooCommerce theme automatically:
* - WooCommerce My Account : action `woocommerce_before_customer_login_form`
* - anywhere : the `[asa_magic_login]` shortcode
* - wp-login.php : filter `login_message` (opt-in)
* Full-switch (replace-passwords) mode hides the theme's native login/register form
* with the `.asa-ml-full-switch` class (see the rule near the bottom).
*
* Key classes to target from your theme's stylesheet:
* .asa-ml__section wrapper .asa-ml__input the email
* .asa-ml__heading the title .asa-ml__button the submit button
* .asa-ml__intro lead text .asa-ml__notice status / error message
* .asa-ml__remember "keep me in" .asa-ml--replacement / --checkout context wrappers
*
* To change the MARKUP (not just styles), copy any file from the plugin's
* `templates/` folder into `yourtheme/asa-magic-link/.php` — it is loaded
* instead of the bundled one (see includes/class-view.php).
*
* For a THEME-SPECIFIC integration that injects into the theme's own login form
* (header dropdowns, multi-column layouts, etc.), use includes/class-woodmart.php as
* a reference pattern: detect the theme, hook `woocommerce_login_form_start`, and
* hide the native rows. Filters `asa_ml_*` (TTL, rate limits, redirect, roles) let
* you tune behaviour without touching the plugin.
* ---------------------------------------------------------------------------------
*/
.asa-ml__section {
margin: 1em 0 0;
}
.asa-ml__heading {
margin: 0 0 .35em;
font-size: 1.05em;
}
.asa-ml__intro {
margin: 0 0 .9em;
opacity: .85;
}
.asa-ml__row {
margin: 0 0 .85em;
}
.asa-ml__label {
display: block;
margin: 0 0 .3em;
font-weight: 600;
}
.asa-ml__input {
width: 100%;
}
.asa-ml__remember {
display: inline-flex;
align-items: center;
gap: .5em;
font-size: .95em;
}
.asa-ml__remember input {
margin: 0;
}
.asa-ml__button {
cursor: pointer;
}
.asa-ml__link-button {
background: none;
border: 0;
padding: 0 .25em;
margin-left: .75em;
color: inherit;
text-decoration: underline;
cursor: pointer;
opacity: .8;
}
.asa-ml__notice {
margin: 0 0 1em;
padding: .7em .9em;
border-radius: 4px;
}
.asa-ml__notice--error {
background: #fdeceb;
border: 1px solid #f3cdc9;
color: #8a2b23;
}
.asa-ml__notice--info {
background: #eef5ff;
border: 1px solid #cfe0f5;
color: #24476b;
}
.asa-ml--replacement,
.asa-ml--checkout {
margin: 0 0 1.5em;
}
/**
* Full switch: hide the native WooCommerce password login + registration forms.
* This is defence-in-depth for presentation only — password auth is DENIED
* server-side in class-full-switch.php regardless of CSS.
*/
/* Non-WoodMart: hide the whole native form (our replacement renders above it). Under
WoodMart we instead inject INTO the form and hide only its native rows, so exclude
it here (see assets/css/asa-ml-woodmart.css). */
.asa-ml-full-switch:not(.asa-ml-woodmart) form.woocommerce-form-login,
.asa-ml-full-switch:not(.asa-ml-woodmart) form.woocommerce-form-register {
display: none !important;
}