/*
 * Víkingur 26: the login page (page-innskraning.php), the design's
 * AccountPage logged out (ui_kits/web/UtilPages.jsx): one card with the
 * emailed login link as the primary way in, "eða", then the password form
 * in outline. The page takes the account page's logged-out layout
 * (account.css) and its fields (store-forms.css); this file adds the card
 * and Magic Login Pro's markup (its email form, and the code form it shows
 * after sending), over the plugin's own shortcode stylesheet.
 */

.vik-login__card{display:grid;gap:24px;padding:32px;border:1px solid var(--border-hairline);border-radius:var(--radius-card)}
.vik-login .vik-login__card>*{min-width:0}

/* ── Magic Login: the header line, the email (or code) field, the button ── */
.vik-login #magic-login-shortcode{display:grid;gap:16px;margin:0;padding:0;max-width:none;border:0;background:none;box-shadow:none}
.vik-login .magic-login-form-header{display:grid;gap:10px}
.vik-login .magic-login-form-header:empty{display:none}
.vik-login .magic-login-form-header :is(.message,p){margin:0;font-size:16px;line-height:1.55;color:var(--text-secondary)}
.vik-login :is(#login_error,.magic-login-form-header .error){padding:14px 18px;border:1px solid var(--red-100);border-radius:var(--radius-card);background:var(--red-50);font-size:15px;line-height:1.5;color:var(--ink)}
.vik-login :is(.magic-login-form-header .success,.magic-login-form-header .info){padding:14px 18px;border:1px solid var(--ink);border-radius:var(--radius-card);background:var(--white);font-size:15px;line-height:1.5;color:var(--ink)}
.vik-login :is(form.magic-login-inline-login-form,form[name=magicloginform],#magic-login-shortcode form){display:grid;gap:12px;margin:0;padding:0;border:0;background:none;box-shadow:none}
.vik-login #magic-login-shortcode form p{margin:0}
.vik-login #magic-login-shortcode label{display:block;margin:0 0 -4px;font-family:var(--font-condensed);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.vik-login #magic-login-shortcode :is(input.input,input[type=text],input[type=email]){box-sizing:border-box;width:100%;height:52px;margin:0;padding:0 16px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--white);font-family:var(--font-body);font-size:16px;color:var(--ink);box-shadow:none;outline:none}
.vik-login #magic-login-shortcode :is(input.input,input[type=text],input[type=email]):focus{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.vik-login #magic-login-shortcode :is(input[type=submit],button[type=submit]){display:inline-flex;align-items:center;justify-content:center;width:100%!important;min-height:52px;height:auto;margin:4px 0 0;padding:12px 20px;border:1px solid var(--action-primary);border-radius:var(--radius-pill);background:var(--action-primary);color:#fff;cursor:pointer;font-family:var(--font-condensed);font-weight:700;font-size:16px;line-height:1.1;letter-spacing:.06em;text-transform:uppercase;text-shadow:none;box-shadow:none;white-space:normal;transition:background var(--dur-fast),border-color var(--dur-fast)}
.vik-login #magic-login-shortcode :is(input[type=submit],button[type=submit]):hover{border-color:var(--action-primary-hover);background:var(--action-primary-hover)}
.vik-login #magic-login-shortcode :is(input[type=submit],button[type=submit]):focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.vik-login #magic-login-shortcode .spinner{margin:0}
.vik-login__note{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--text-secondary)}

/* ── "eða" between the two ── */
.vik-login__or{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text-secondary)}
.vik-login__or::before,.vik-login__or::after{content:"";flex:1;height:1px;background:var(--border-hairline)}

/* ── The password form: WooCommerce's, its heading left to the page title ── */
.vik-login .vik-login__password .woocommerce>h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Outline, as the design's "Skrá inn"; store-forms.css makes it red, through
   an :is() list whose most specific entry sets the weight to beat. */
.vik-login .vik-login__password .woocommerce .woocommerce-form-login .woocommerce-form-login__submit.button{border-color:var(--black);background:var(--white);color:var(--ink)}
.vik-login .vik-login__password .woocommerce .woocommerce-form-login .woocommerce-form-login__submit.button:hover{border-color:var(--black);background:var(--gray-50);color:var(--ink)}

/* ── "Innskráning með SMS": WP SMS WooCommerce Pro adds it under the
   password form by script (as on the current page); outline, like the
   password button. Its modal keeps the plugin's own styles. ── */
.vik-login .wpsmswoopro-login-with-sms{display:grid;gap:16px;margin-top:20px}
.vik-login .wpsmswoopro-login-with-sms .or-separator{display:flex;align-items:center;gap:12px;margin:0}
.vik-login .wpsmswoopro-login-with-sms .or-separator .line{flex:1;height:1px;margin:0;background:var(--border-hairline)}
.vik-login .wpsmswoopro-login-with-sms .or-separator p{margin:0;font-size:13px;color:var(--text-secondary);text-transform:lowercase}
/* The plugin sets border:none !important. */
.vik-login .wpsmswoopro-btn.login-with-sms-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin:0;padding:12px 20px;border:1px solid var(--black)!important;border-radius:var(--radius-pill);background:var(--white);color:var(--ink);cursor:pointer;font-family:var(--font-condensed);font-weight:700;font-size:15px;line-height:1.1;letter-spacing:.06em;text-transform:uppercase;box-shadow:none}
.vik-login .wpsmswoopro-btn.login-with-sms-btn:hover{background:var(--gray-50)}

@media (max-width:640px){
	.vik-login__card{padding:20px;margin-left:-4px;margin-right:-4px}
}