/**
 * CWS-Suite My Account auth — Jasmin Maziva.
 *
 * Companion to account-auth.php. Everything is scoped under .auth-root[class],
 * the root the plugin emits around the whole logged-out surface — which is also
 * what buys the specificity to beat both the Elementor kit and the plugin's own
 * skin.
 *
 * The [class] is a specificity bump, not a filter: it matches the same element
 * and adds (0,1,0). It is there because Elementor enqueues a widget's
 * stylesheet when the widget renders, which puts cws-myaccount.css AFTER a
 * theme stylesheet in the document — and several of the plugin's auth rules are
 * written at exactly the same specificity as ours would otherwise be, so every
 * tie would go to the plugin. With the bump, load order stops mattering. Same
 * reasoning as checkout-page.css and cart-page.css.
 *
 * WHAT IS BEING RESTYLED
 * ----------------------
 * Most of this page is markup the PLUGIN emits, through the parts
 * account-auth.php calls: the two forms and every input in them, the alert
 * boxes, the tab strip, the password toggle and strength meter, the forgot and
 * reset panes. Hand-rolling any of it would cost the sign-in — so this file
 * restyles rather than replaces.
 *
 * The first block repaints the plugin's own --acc-* tokens rather than chasing
 * each of its rules with a more specific one. That is what converts its
 * 12px-radius, indigo-accent skin into this design's squared, blue-green one in
 * a single move, and it also reaches rules this file never names.
 *
 * Radius is 0 throughout — the squared brand look is the point of the design,
 * not an oversight. Same as loop-card.css, filters-panel.css and
 * checkout-page.css.
 *
 * Manrope is what the design uses. Loading a web font is the theme's call, so
 * nothing here sets font-family and the surface inherits the theme's.
 *
 * ON !important
 * -------------
 * There is exactly one !important block in this file, at the very bottom, and
 * it is annotated. The house rule is specificity, not !important — but the
 * plugin pins its .acc-btn palette WITH !important, so specificity alone cannot
 * reach it. The two buttons this design owns dodge that class entirely (see
 * jm_auth_submit() in account-auth.php); the block at the bottom exists only
 * for the two plugin-owned panes that still use it.
 */

/* ─────────────────────────────────────────────────────────────────────────
   The plugin's tokens, repainted. See the header for what the [class] does.
   ───────────────────────────────────────────────────────────────────────── */
.auth-root[class] {
	--acc-bg:            #eef2f4;
	--acc-surface:       #ffffff;
	--acc-surface-alt:   #f7fafb;
	--acc-border:        #e2e9ec;
	--acc-border-strong: #cbd8dd;

	--acc-text:          #16333f;
	--acc-text-2:        #5c727b;
	--acc-text-3:        #7c8d95;
	--acc-text-muted:    #b6c3c9;

	--acc-accent:        #0b7da9;
	--acc-accent-soft:   #0b7da91f;
	--acc-accent-mid:    #0b7da933;
	--acc-accent-fg:     #ffffff;

	--acc-success:       #6f9e34;
	--acc-success-soft:  #f1f7ea;
	--acc-danger:        #c0392b;
	--acc-danger-soft:   #fdeceb;

	--acc-radius:        0;
	--acc-radius-sm:     0;
	--acc-radius-lg:     0;
}

/* This design's own values. Named apart from --acc-* so it stays obvious which
   ones the plugin also reads. */
.auth-root[class] {
	--jm-ink:      #16333f;
	--jm-body:     #5c727b;
	--jm-ink-3:    #7c8d95;
	--jm-muted:    #9bacb4;
	--jm-muted-2:  #b6c3c9;

	--jm-accent:   #0b7da9;
	--jm-accent-d: #096a90;
	--jm-cyan:     #0b9ed2;

	--jm-green:    #7cb342;
	--jm-green-h:  #6aa236;

	--jm-line:     #e2e9ec;
	--jm-line-2:   #eef2f4;

	--jm-panel:    #f7fafb;
	--jm-aside:    #16333f;
	--jm-aside-h:  #0f2732;
	--jm-aside-tx: #dbe7ec;
	--jm-aside-sb: #a9c0ca;
	--jm-aside-ft: #7f99a4;
}

/* .acc-root sets `* { box-sizing: border-box }` for the logged-in surface;
   .auth-root never got the same line, and this design's fixed-height inputs and
   padded cards depend on it. */
.auth-root[class],
.auth-root[class] *,
.auth-root[class] *::before,
.auth-root[class] *::after {
	box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────────────
   Shell
   ───────────────────────────────────────────────────────────────────────── */
/* No page chrome of its own. The plugin paints --acc-bg across the root and pads
   it 32px, which double-frames the card once the widget is dropped into an
   Elementor section that already has its own background and spacing. Both are
   dropped here so the card sits flush in whatever container it is placed in —
   set the surround on the section, not on the widget.

   The plugin's flex centring on .auth-root is left alone; it is what keeps the
   shell centred once it stops filling the container. */
.auth-root[class] {
	background: transparent;
	padding: 0;
}

.auth-root[class] .auth-shell {
	max-width: 1000px;
	grid-template-columns: 420px 1fr;
	border: 1px solid var(--jm-line);
	border-radius: 0;
	background: #fff;
}

/* .acc-card-shadowed is the widget's default card style. */
.auth-root[class].acc-card-shadowed .auth-shell {
	box-shadow: 0 30px 70px -34px rgba(18, 48, 60, .38);
}
.auth-root[class].acc-card-flat .auth-shell {
	border-color: transparent;
	box-shadow: none;
}

/* The widget's centered layout keeps working: re-asserted here because the
   base rules above now outrank the plugin's own .is-centered pair. */
.auth-root[class].is-centered .auth-shell {
	grid-template-columns: 1fr;
	max-width: 520px;
}
.auth-root[class].is-centered .auth-aside {
	display: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   Aside — the dark panel
   ───────────────────────────────────────────────────────────────────────── */
.auth-root[class] .auth-aside {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 38px 36px 36px;
	background: var(--jm-aside);
	border-right: 0;
	color: #fff;
}
/* The plugin paints two radial accent washes over the aside; the design's panel
   is flat. */
.auth-root[class] .auth-aside::after {
	content: none;
}

/* inline-flex, not block: with no site logo the brand text sits beside the
   glyph, and behind a logo the text is taken out of flow so the gap collapses
   to nothing on its own.

   No plate — the logo sits straight on the dark panel, so both the fallback
   glyph and the fallback brand text below are light rather than ink. */
.auth-root[class] .auth-brand {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	padding: 0;
}
.auth-root[class] .auth-brand-mark {
	display: block;
	width: auto;
	height: auto;
	border-radius: 0;
	background: transparent;
	color: #fff;
}
.auth-root[class] .auth-brand-mark img,
.auth-root[class] .auth-brand-mark svg {
	display: block;
	height: 30px;
	width: auto;
	max-width: 220px;
}
.auth-root[class] .auth-brand-mark a {
	display: block;
	line-height: 0;
}
.auth-root[class] .auth-brand-name {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.2px;
	color: #fff;
}
/* Behind a site logo the brand text stays in the DOM — it is what the Style
   tab's control targets and the accessible name when the logo has no alt — but
   it must not print twice. */
.auth-root[class] .jm-auth__brand.has-logo .auth-brand-name {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.auth-root[class] .auth-aside-body {
	display: block;
	margin-top: 44px;
}

.auth-root[class] .auth-aside-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--jm-green);
}
.auth-root[class] .jm-auth__dash {
	display: inline-block;
	width: 18px;
	height: 2px;
	background: var(--jm-green);
	flex: 0 0 auto;
}

.auth-root[class] .auth-aside-title {
	margin: 14px 0 0;
	font-size: 27px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -.7px;
	color: #fff;
	text-wrap: pretty;
}

.auth-root[class] .auth-aside-sub {
	margin: 14px 0 0;
	max-width: none;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--jm-aside-sb);
	text-wrap: pretty;
}

/* The 1px gap over a translucent background is what draws the hairlines between
   perks — no borders to collapse at the ends. */
.auth-root[class] .auth-perks {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-top: 30px;
	background: rgba(255, 255, 255, .1);
}
.auth-root[class] .auth-perk {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 15px 2px;
	background: var(--jm-aside);
	font-size: 13.5px;
}
.auth-root[class] .auth-perk-i {
	width: auto;
	height: auto;
	margin-top: 1px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--jm-cyan);
	flex: 0 0 auto;
}
.auth-root[class] .auth-perk-i svg {
	display: block;
	width: 19px;
	height: 19px;
}
.auth-root[class] .jm-auth__perk-t {
	font-size: 13.5px;
	line-height: 1.5;
	font-weight: 700;
	color: var(--jm-aside-tx);
	text-wrap: pretty;
}
/* Perk text is free text from the widget's repeater, and at least one row is
   stored with a lower-case opening letter. Each row reads as a sentence here, so
   the opening letter is capitalised on render.
   ::first-letter works because a flex item is blockified — .auth-perk is the
   flex container. It takes a single character, which is the right behaviour for
   Croatian digraphs too: "ljestvica" capitalises to "Ljestvica", not "LJestvica".
   This is a display guard, not a fix — the stored string is still lower-case and
   still shows that way in the Elementor field. Correct it there as well. */
.auth-root[class] .jm-auth__perk-t::first-letter {
	text-transform: uppercase;
}

.auth-root[class] .jm-auth__support {
	margin-top: auto;
	padding-top: 34px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--jm-aside-ft);
}
.auth-root[class] .jm-auth__support a {
	color: #fff;
	text-decoration: none;
}
.auth-root[class] .jm-auth__support a:hover {
	text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────
   Main column
   ───────────────────────────────────────────────────────────────────────── */
.auth-root[class] .auth-main {
	padding: 32px 40px 36px;
}

/* ── Tab strip ───────────────────────────────────────────────────────────── */
.auth-root[class] .auth-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	padding: 0;
	margin: 0;
	border: 1.5px solid var(--jm-line);
	border-radius: 0;
	background: #fff;
	/* The panes carry no top margin of their own — spacing lives here, so a
	   surface with no tab strip (registration closed, or a live reset link)
	   opens flush against the top of the card. */
	margin-bottom: 26px;
}
.auth-root[class] .auth-tab {
	height: 46px;
	min-height: 0;
	padding: 0 10px;
	border: 0;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .2px;
	color: var(--jm-body);
	transition: background .15s ease, color .15s ease;
}
.auth-root[class] .auth-tab:hover {
	color: var(--jm-ink);
}
.auth-root[class] .auth-tab.is-active {
	background: var(--jm-ink);
	color: #fff;
	box-shadow: none;
	font-weight: 600;
}

/* ── Panes ───────────────────────────────────────────────────────────────── */
/* .auth-pane keeps the plugin's `display:none` / `.is-active { display:flex }`
   pair — that is the whole of the tab switching. Only its contents change. */
.auth-root[class] .auth-head {
	margin-bottom: 0;
}
.auth-root[class] .auth-head-title {
	margin: 0;
	font-size: 23px;
	font-weight: 600;
	letter-spacing: -.5px;
	color: var(--jm-ink);
}
.auth-root[class] .auth-head-sub {
	margin: 8px 0 22px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--jm-ink-3);
	text-wrap: pretty;
}

/* ── Alert boxes ─────────────────────────────────────────────────────────── */
.auth-root[class] .acc-alert {
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	margin-bottom: 18px;
	border-radius: 0;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 700;
}
.auth-root[class] .acc-alert-success {
	background: var(--acc-success-soft);
	color: var(--acc-success);
	border: 1px solid rgba(124, 179, 66, .3);
}
.auth-root[class] .acc-alert-error {
	background: var(--acc-danger-soft);
	color: var(--acc-danger);
	border: 1px solid rgba(192, 57, 43, .22);
}

/* ── Fields ──────────────────────────────────────────────────────────────── */
.auth-root[class] .auth-form {
	gap: 16px;
}
/* The plugin spaces a field's parts with a flex gap; this design spaces them
   with margins on the label, the hint and the meter, so the gap goes to 0.
   (0,3,0) — enough to beat the plugin's own `.auth-form .acc-field` at 0,2,0. */
.auth-root[class] .acc-field {
	gap: 0;
}

.auth-root[class] .acc-field-lbl {
	display: block;
	margin-bottom: 6px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--jm-body);
}
.auth-root[class] .acc-req {
	color: #c0392b;
}

.auth-root[class] .acc-input {
	width: 100%;
	height: 46px;
	padding: 0 12px;
	border: 1.5px solid var(--jm-line);
	border-radius: 0;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--jm-ink);
	box-shadow: none;
	transition: border-color .15s ease;
}
.auth-root[class] .acc-input:hover {
	border-color: var(--acc-border-strong);
}
.auth-root[class] .acc-input:focus {
	outline: 0;
	border-color: var(--jm-accent);
	box-shadow: none;
}
.auth-root[class] .acc-input::placeholder {
	color: var(--jm-muted-2);
	font-weight: 600;
}
.auth-root[class] textarea.acc-input {
	height: auto;
	padding: 12px;
	line-height: 1.5;
}
.auth-root[class] .acc-field.has-error .acc-input {
	border-color: var(--acc-danger);
	box-shadow: none;
}

/* Selects the widget renders for admin-configured option fields. */
.auth-root[class] .acc-select-wrap {
	position: relative;
}
.auth-root[class] select.acc-input {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	cursor: pointer;
}
.auth-root[class] .acc-select-chev {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	color: var(--jm-ink-3);
	pointer-events: none;
}

/* ── Password toggle + strength meter ────────────────────────────────────── */
/* The toggle sits inside the input, so the input has to give it room. */
.auth-root[class] .acc-pw-wrap .acc-input {
	padding-right: 44px;
}
.auth-root[class] .acc-pw-tog {
	position: absolute;
	right: 4px;
	top: 4px;
	bottom: 4px;
	/* The plugin centres it with top:50% + translateY(-50%); this design pins it
	   to the field's inset edges instead, so the transform has to go or the
	   button rides 50% of its own height too high. */
	transform: none;
	width: 36px;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.auth-root[class] .acc-pw-tog:hover {
	background: transparent;
}
.auth-root[class] .acc-pw-tog svg {
	width: 17px;
	height: 17px;
	stroke-width: 2;
}

.auth-root[class] .acc-pw-meter {
	margin-top: 8px;
}
.auth-root[class] .acc-pw-bar {
	height: 4px;
	border-radius: 0;
	background: var(--jm-line-2);
}
.auth-root[class] .acc-pw-lbl {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--jm-ink-3);
}

/* ── Hints and inline errors ─────────────────────────────────────────────── */
.auth-root[class] .acc-field-hint {
	display: block;
	margin-top: 6px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--jm-muted);
}
.auth-root[class] .acc-field-err {
	margin-top: 6px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--acc-danger);
}

/* ── Sign-in row: remember + forgot ──────────────────────────────────────── */
/* The plugin hides the real checkbox and paints .auth-check-box, so state comes
   from the input's :checked sibling selector. Kept — only the skin changes. */
.auth-root[class] .auth-check {
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--jm-ink);
}
.auth-root[class] .auth-check-box {
	width: 18px;
	height: 18px;
	border-radius: 0;
	border: 2px solid var(--acc-border-strong);
	background: #fff;
	transition: background .12s ease, border-color .12s ease;
}
.auth-root[class] .auth-check:hover .auth-check-box {
	border-color: #9fb0b8;
}
.auth-root[class] .auth-check input:checked + .auth-check-box {
	background: var(--jm-green);
	border-color: var(--jm-green);
}
.auth-root[class] .auth-check input:focus-visible + .auth-check-box {
	box-shadow: 0 0 0 3px var(--acc-accent-soft);
}
.auth-root[class] .auth-check-box svg {
	width: 11px;
	height: 11px;
	stroke-width: 3;
}
.auth-root[class] .auth-check a {
	color: var(--jm-accent);
	font-weight: 600;
	text-decoration: none;
}
.auth-root[class] .auth-check a:hover {
	color: var(--jm-accent-d);
	text-decoration: underline;
}

.auth-root[class] .auth-link {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--jm-accent);
	background: transparent;
}
.auth-root[class] .auth-link:hover {
	color: var(--jm-accent-d);
	text-decoration: underline;
}

/* ── Tip osobe ───────────────────────────────────────────────────────────── */
.auth-root[class] .jm-auth__ptype {
	margin-bottom: 2px;
}
.auth-root[class] .jm-auth__ptype-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.auth-root[class] .jm-auth__ptype-card {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 14px;
	border: 1.5px solid var(--jm-line);
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.auth-root[class] .jm-auth__ptype-card:hover {
	border-color: var(--acc-border-strong);
}
/* :has() is what lets the whole card react to the radio inside it. Where it is
   unsupported the card stays neutral and the dot alone shows the selection —
   the state is never lost, only its emphasis. */
.auth-root[class] .jm-auth__ptype-card:has(.jm-auth__radio:checked) {
	border-color: var(--jm-green);
	background: var(--jm-panel);
}
.auth-root[class] .jm-auth__ptype-card:has(.jm-auth__radio:focus-visible) {
	border-color: var(--jm-accent);
}

.auth-root[class] .jm-auth__radio {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	border: 2px solid var(--acc-border-strong);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	transition: border-color .12s ease;
}
.auth-root[class] .jm-auth__radio:checked {
	border-color: var(--jm-green);
	background: radial-gradient(var(--jm-green) 0 44%, transparent 46%);
}

.auth-root[class] .jm-auth__ptype-lbl {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--jm-ink);
}
.auth-root[class] .jm-auth__ptype-note {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--jm-ink-3);
}

/* ── Consents ────────────────────────────────────────────────────────────── */
.auth-root[class] .jm-auth__consents {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 2px;
}
.auth-root[class] .jm-auth__consents .auth-check {
	align-items: flex-start;
	gap: 11px;
	font-size: 13px;
	line-height: 1.5;
}
.auth-root[class] .jm-auth__consents .auth-check-box {
	margin-top: 1px;
}

/* ── Submit ──────────────────────────────────────────────────────────────── */
/* A plain <button>, so Elementor's kit rule (.elementor-kit-N button, 0,1,1)
   would otherwise repaint it in the site's brand colour. .auth-root[class]
   .jm-auth__submit is (0,3,0) and wins without !important, and the Style tab's
   own {{WRAPPER}} .auth-root .auth-submit (0,3,0, declared later) still gets to
   override it. */
.auth-root[class] .jm-auth__submit {
	appearance: none;
	width: 100%;
	height: 54px;
	/* .auth-form is a 16px-gap flex column, so 4 here is the design's 20. */
	margin-top: 4px;
	padding: 0 20px;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .3px;
	text-transform: none;
	color: #fff;
	box-shadow: none;
	transition: background .16s ease;
}
.auth-root[class] .jm-auth__submit svg {
	display: block;
}
.auth-root[class] .jm-auth__submit[disabled] {
	opacity: .6;
	cursor: default;
}

.auth-root[class] .jm-auth__submit--login {
	background: var(--jm-ink);
}
.auth-root[class] .jm-auth__submit--login:hover {
	background: var(--jm-aside-h);
}

.auth-root[class] .jm-auth__submit--register {
	background: var(--jm-green);
}
.auth-root[class] .jm-auth__submit--register:hover {
	background: var(--jm-green-h);
}

/* ── Pane switch footer ──────────────────────────────────────────────────── */
.auth-root[class] .jm-auth__swap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--jm-line-2);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--jm-ink-3);
}
.auth-root[class] .jm-auth__swap-btn {
	padding: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--jm-accent);
	cursor: pointer;
}
.auth-root[class] .jm-auth__swap-btn:hover {
	color: var(--jm-accent-d);
	text-decoration: none;
}

/* ── Forgot / reset panes ────────────────────────────────────────────────── */
/* Plugin-owned markup, so they inherit the field and alert skin above. These
   two only fix what their own rules hard-code. */
.auth-root[class] .auth-divider {
	margin: 18px 0 0;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--jm-muted);
}
.auth-root[class] .auth-divider::before,
.auth-root[class] .auth-divider::after {
	background: var(--jm-line-2);
}
.auth-root[class] .auth-switch {
	margin-top: 18px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--jm-ink-3);
}
.auth-root[class] .auth-switch .auth-link {
	font-size: 13.5px;
}
.auth-root[class] .auth-reset-notices ul {
	border-radius: 0;
	font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────────
   Responsive

   The desktop rules above are (0,3,0)+, so the plugin's own breakpoint rules
   ((0,1,0)–(0,2,0)) can no longer reach them at any width. Everything the
   plugin's media queries used to do is therefore restated here, including the
   widget's "Show aside on mobile" switch.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
	.auth-root[class] .auth-shell {
		max-width: 720px;
		grid-template-columns: 1fr;
	}
	.auth-root[class] .auth-aside {
		padding: 28px 28px 26px;
	}
	.auth-root[class] .auth-aside-body {
		margin-top: 26px;
	}
	.auth-root[class] .auth-aside-title {
		font-size: 23px;
	}
	.auth-root[class] .auth-perks {
		margin-top: 22px;
	}
	.auth-root[class] .jm-auth__support {
		margin-top: 26px;
		padding-top: 22px;
		border-top: 1px solid rgba(255, 255, 255, .1);
	}
	.auth-root[class] .auth-main {
		padding: 28px 28px 32px;
	}
}

@media (max-width: 600px) {
	.auth-root[class] .auth-shell {
		max-width: none;
		border: 0;
	}
	.auth-root[class].acc-card-shadowed .auth-shell {
		box-shadow: none;
	}

	/* The widget's "Show aside on mobile" switch adds .hide-aside-mobile to the
	   root. (0,4,0) so it still beats the aside's own display above. */
	.auth-root[class].hide-aside-mobile .auth-aside {
		display: none;
	}

	.auth-root[class] .auth-aside {
		padding: 24px 20px;
	}
	.auth-root[class] .auth-aside-sub,
	.auth-root[class] .auth-perks {
		display: none;
	}
	.auth-root[class] .auth-aside-title {
		font-size: 20px;
	}
	.auth-root[class] .jm-auth__support {
		margin-top: 22px;
		padding-top: 18px;
	}

	.auth-root[class] .auth-main {
		padding: 24px 20px 32px;
	}
	.auth-root[class] .auth-head-title {
		font-size: 20px;
	}
	.auth-root[class] .jm-auth__ptype-grid {
		grid-template-columns: 1fr;
	}
	.auth-root[class] .auth-tab {
		font-size: 13px;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
   The one !important block, and why.

   The forgot-password and reset-password panes are plugin-owned — their submit
   buttons come from cws_account_part('submit') and carry .acc-btn.acc-btn-md,
   whose radius, padding, min-height, font-size and font-weight cws-myaccount.css
   pins with !important (see its ".acc-root .acc-btn, .auth-root .acc-btn" block).
   No amount of specificity reaches a pinned declaration, so squaring these two
   off needs the same weapon.

   Scoped to .auth-submit so it can only ever touch those two buttons: this
   design's own sign-in and create-account buttons are plain <button> elements
   with no .acc-btn class at all, and are styled above without !important.

   The second rule is the same story on the show/hide password eye: the plugin
   pins `color: #07070C !important` on .acc-pw-tog, which is near-black where
   this design wants the muted grey it uses for every other in-field glyph. The
   icon strokes with currentColor, so the colour is the whole of it.

   Do not extend this pattern to anything else in this file.
   ───────────────────────────────────────────────────────────────────────── */
.auth-root[class] .acc-btn.auth-submit {
	height: 54px !important;
	min-height: 54px !important;
	padding: 0 20px !important;
	border-radius: 0 !important;
	border-width: 0 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: .3px !important;
	background: var(--jm-ink) !important;
	color: #fff !important;
	/* .auth-form is a 16px-gap flex column, so 4 here is the design's 20. */
	margin-top: 4px;
	gap: 10px;
}
.auth-root[class] .acc-btn.auth-submit:hover {
	background: var(--jm-aside-h) !important;
}

.auth-root[class] .acc-pw-tog {
	color: var(--jm-ink-3) !important;
}
.auth-root[class] .acc-pw-tog:hover {
	color: var(--jm-ink) !important;
}