/**
 * DW EasyAuth – frontend auth forms (login, register, lost password, profile).
 * Left 50% background / right 50% form; on mobile it collapses to a single
 * column with a centered card.
 *
 * @package DW_EasyAuth
 */

:root {
	--dw-auth-bg: none;
	--dw-auth-card-bg: #fff;
	--dw-auth-card-shadow: 0 10px 40px rgba(15, 23, 42, 0.10);
	/* Values below come from the DASOMWEB button spec sheet. Renaming them
	   would break operator overrides, so the token names stay and only the
	   defaults change. */
	--dw-auth-radius: 16px;
	--dw-auth-field-radius: 8px;
	--dw-auth-border: #e5e7eb;
	--dw-auth-border-strong: #d3d7de;
	--dw-auth-input-border: 1px solid var(--dw-auth-border);
	--dw-auth-input-bg: #fff;
	--dw-auth-input-bg-focus: #fff;
	--dw-auth-quiet-bg: #f7f8fa;
	--dw-auth-surface: #f7f8fa;
	--dw-auth-text: #16181d;
	--dw-auth-muted: #61697a;
	--dw-auth-btn-bg: #2b7fff;
	--dw-auth-btn-hover: #1466d6;
	--dw-auth-btn-color: #fff;
	--dw-auth-focus: rgba(43, 127, 255, 0.28);
	--dw-auth-danger: #dc2626;
	--dw-auth-gap: 0.9rem;
	--dw-auth-control-h: 2.5rem;
	--dw-auth-btn-radius: 6px;
	--dw-auth-pill-radius: 6px;
	--dw-auth-font: inherit;
}

/* Type scale is set on the card so the plugin's forms read consistently even
   inside a theme with unusual base typography. */
.dw-easyauth-card {
	font-family: var(--dw-auth-font, inherit);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* Every element the plugin renders measures border-box. Themes vary on
   whether they set this globally, and a card at width:100% with padding
   overflows its container without it — which is what put a horizontal
   scrollbar inside the dialog. Scoped to our own markup. */
.dw-easyauth-wrap,
.dw-easyauth-wrap *,
.dw-easyauth-wrap *::before,
.dw-easyauth-wrap *::after,
.dw-ea-modal,
.dw-ea-modal *,
.dw-ea-nav,
.dw-ea-nav * {
	box-sizing: border-box;
}

.dw-easyauth-wrap {
	display: flex;
	min-height: 100vh;
	width: 100%;
	margin: 0;
	padding: 0;
}

.dw-easyauth-split {
	box-sizing: border-box;
	flex: 1;
	min-width: 0;
	min-height: 100%;
}

.dw-easyauth-split--bg {
	background-image: var(--dw-auth-bg, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 100%;
}

.dw-easyauth-split--form {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: transparent;
}

.dw-easyauth-card {
	background: var(--dw-auth-card-bg, #fff);
	box-shadow: var(--dw-auth-card-shadow, 0 10px 40px rgba(15, 23, 42, 0.10));
	border-radius: var(--dw-auth-radius, 16px);
	padding: 1.75rem;
	width: 100%;
	max-width: 400px;
	color: var(--dw-auth-text, #16181d);
}

/* The register form carries the most fields, so it gets room to pair them. */
.dw-easyauth-register-wrap .dw-easyauth-card,
.dw-easyauth-profile-wrap .dw-easyauth-card {
	max-width: 560px;
}

.dw-easyauth-logo img {
	max-width: 180px;
	height: auto;
	display: inline-block;
}

.dw-easyauth-title {
	margin: 0 0 1.1rem;
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-align: left;
	color: var(--dw-auth-text, #16181d);
}

.dw-easyauth-logo {
	text-align: left;
	margin-bottom: 0.9rem;
}

/* Log in / Register, the two states of the same card, sitting where the
   title otherwise sits. They are links, so the pair works without script;
   inside a dialog they swap the form instead of navigating. */
.dw-easyauth-tabs {
	display: flex;
	gap: 24px;
	margin: 0 0 1.1rem;
	border-bottom: 1px solid var(--dw-auth-border, #e5e7eb);
}

.dw-easyauth-tabs .dw-easyauth-tab,
.dw-easyauth-tabs .dw-easyauth-tab:visited {
	display: inline-block;
	padding: 0 0 10px;
	margin-bottom: -1px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	box-shadow: none;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-decoration: none;
	color: var(--dw-auth-muted, #61697a);
}

.dw-easyauth-tabs .dw-easyauth-tab:hover,
.dw-easyauth-tabs .dw-easyauth-tab:focus {
	color: var(--dw-auth-text, #16181d);
	text-decoration: none;
}

.dw-easyauth-tabs .dw-easyauth-tab.is-current {
	color: var(--dw-auth-text, #16181d);
	border-bottom-color: var(--dw-auth-text, #16181d);
	cursor: default;
}

/* Account type — three tabs the register form splits into (Individual /
   Business / Broker-Agent). A segmented radio group: works as plain radios
   without script; the script swaps the visible field slice. */
.dw-ea-acct {
	display: flex;
	margin: 0;
	padding: 0;
	border: 1px solid var(--dw-auth-border, #e5e7eb);
	border-radius: var(--dw-auth-field-radius, 8px);
	background: var(--dw-auth-surface, #f7f8fa);
	overflow: hidden;
}

.dw-ea-acct-opt {
	flex: 1 1 0;
	min-width: 0;
	display: block;
	cursor: pointer;
}

.dw-ea-acct-opt input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	clip: rect(0 0 0 0);
	overflow: hidden;
}

.dw-ea-acct-opt span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	padding: 0 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	color: var(--dw-auth-muted, #61697a);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dw-ea-acct-opt + .dw-ea-acct-opt span {
	border-left: 1px solid var(--dw-auth-border, #e5e7eb);
}

.dw-ea-acct-opt input:checked + span {
	background: var(--dw-auth-card-bg, #fff);
	color: var(--dw-auth-text, #16181d);
	font-weight: 700;
	box-shadow: inset 0 -2px 0 var(--dw-auth-btn-bg, #2b7fff);
}

.dw-ea-acct-opt input:focus-visible + span {
	box-shadow: inset 0 0 0 2px var(--dw-auth-focus, rgba(43, 127, 255, 0.28)), inset 0 -2px 0 var(--dw-auth-btn-bg, #2b7fff);
}

/* The slice the script hides for the other account types. */
.dw-easyauth-form .dw-ea-aud[hidden] {
	display: none;
}

/* Remember me on the left, the way out on the right. */
.dw-easyauth-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.dw-easyauth-row > .dw-easyauth-field,
.dw-easyauth-row > .dw-easyauth-link {
	margin: 0;
	text-align: left;
}

/* Two-column grid; each field claims one or both columns via its width class. */
.dw-easyauth-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--dw-auth-gap, 0.9rem);
	align-items: start;
	font-size: 0.95rem;
}

.dw-easyauth-form > * {
	grid-column: 1 / -1;
	min-width: 0;
}

.dw-easyauth-form .dw-easyauth-field--half {
	grid-column: span 1;
}

.dw-easyauth-form .dw-easyauth-field {
	margin: 0;
}

/* --------------------------------------------------------------------------
 * Control: label above the field
 *
 * The markup prints the input first and the label after it, so the label can
 * be positioned relative to the input. column-reverse puts the label back on
 * top in the reading order the design wants, without the label having to
 * float over the field.
 * ------------------------------------------------------------------------ */

.dw-easyauth-control {
	position: relative;
	display: flex;
	flex-direction: column-reverse;
	gap: 0.3rem;
}

.dw-easyauth-form .dw-easyauth-label {
	display: block;
	margin: 0;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--dw-auth-text, #16181d);
}

/* A page brings real markup, and its own tags carry the line breaks. The
   pre-wrap above exists for wording typed into a textarea, where newlines are
   all there is; left on, it would render every break in that markup twice. */
.dw-easyauth-terms-content.is-from-page {
	white-space: normal;
}

.dw-easyauth-terms-content.is-from-page p,
.dw-easyauth-terms-content.is-from-page ul,
.dw-easyauth-terms-content.is-from-page ol {
	margin: 0 0 0.75em;
}

.dw-easyauth-terms-content.is-from-page li {
	margin-bottom: 0.25em;
}

.dw-easyauth-terms-content.is-from-page h1,
.dw-easyauth-terms-content.is-from-page h2,
.dw-easyauth-terms-content.is-from-page h3,
.dw-easyauth-terms-content.is-from-page h4,
.dw-easyauth-terms-content.is-from-page h5,
.dw-easyauth-terms-content.is-from-page h6 {
	margin: 1.1em 0 0.4em;
	font-size: 1em;
	font-weight: 600;
	color: var(--dw-auth-text, #16181d);
	line-height: 1.35;
}

.dw-easyauth-terms-content.is-from-page > :first-child {
	margin-top: 0;
}

.dw-easyauth-terms-content.is-from-page > :last-child {
	margin-bottom: 0;
}

.dw-easyauth-terms-content.is-from-page img {
	max-width: 100%;
	height: auto;
}

/* The line that says where this text actually lives. Quiet — it is a
   reference, not a second action competing with the consent box. */
.dw-easyauth-terms-source {
	margin: 1em 0 0;
	font-size: 0.8125rem;
}

.dw-easyauth-terms-source a {
	color: var(--dw-auth-btn-bg, #2b7fff);
}

.dw-easyauth-required {
	color: var(--dw-auth-danger, #dc2626);
	font-weight: 600;
	margin-left: 0.1rem;
}

/* Password reveal — a 44px touch target inside the field. */
.dw-easyauth-reveal {
	position: absolute;
	bottom: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: var(--dw-auth-control-h, 2.5rem);
	padding: 0;
	border: 0;
	border-radius: var(--dw-auth-field-radius, 8px);
	background: none;
	color: var(--dw-auth-muted, #61697a);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.dw-easyauth-reveal:hover {
	color: var(--dw-auth-text, #16181d);
}

.dw-easyauth-reveal:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--dw-auth-focus, rgba(43, 127, 255, 0.28));
}

.dw-easyauth-reveal[hidden],
.dw-easyauth-reveal svg[hidden] {
	display: none;
}

/* Keep typed characters clear of the reveal button. */
.dw-easyauth-field--password input {
	padding-right: 2.5rem;
}

.dw-easyauth-reveal svg {
	width: 16px;
	height: 16px;
}

/* Inline validation, in place of the platform's own bubble. */
.dw-easyauth-field.has-error input,
.dw-easyauth-field.has-error select,
.dw-easyauth-field.has-error textarea {
	border-color: var(--dw-auth-danger, #dc2626);
}

.dw-easyauth-field.has-error input:focus,
.dw-easyauth-field.has-error select:focus,
.dw-easyauth-field.has-error textarea:focus {
	box-shadow: 0 0 0 3px rgba(179, 45, 46, 0.14);
}

.dw-easyauth-field.has-error .dw-easyauth-label {
	color: var(--dw-auth-danger, #dc2626);
}

.dw-easyauth-help {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--dw-auth-muted, #61697a);
}

.dw-easyauth-field.has-error .dw-easyauth-help {
	display: none;
}

.dw-easyauth-error-msg {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.82rem;
	line-height: 1.4;
	color: var(--dw-auth-danger, #dc2626);
}

/* Group labels (radio, checkbox) stay above their control. */
.dw-easyauth-grouplabel {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--dw-auth-text, #16181d);
}

.dw-easyauth-form input[type="text"],
.dw-easyauth-form input[type="email"],
.dw-easyauth-form input[type="password"],
.dw-easyauth-form input[type="url"],
.dw-easyauth-form input[type="number"],
.dw-easyauth-form input[type="tel"],
.dw-easyauth-form input[type="date"],
.dw-easyauth-form select {
	width: 100%;
	height: var(--dw-auth-control-h, 2.5rem);
	padding: 0 0.7rem;
	border: var(--dw-auth-input-border, 1px solid var(--dw-auth-border, #e5e7eb));
	border-radius: var(--dw-auth-field-radius, 8px);
	background: var(--dw-auth-input-bg, #fff);
	color: inherit;
	font-family: inherit;
	font-size: 0.94rem;
	line-height: 1.3;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

/* 16px below the breakpoint so tapping a field does not zoom the page on
   iOS; tighter above it, where that behaviour does not apply. */
@media (max-width: 600px) {
	.dw-easyauth-form input,
	.dw-easyauth-form select,
	.dw-easyauth-form textarea {
		font-size: 16px;
	}
}


.dw-easyauth-form input:hover:not(:disabled),
.dw-easyauth-form select:hover:not(:disabled),
.dw-easyauth-form textarea:hover:not(:disabled) {
	background: color-mix(in srgb, var(--dw-auth-input-bg, #fff) 60%, #fff);
}

.dw-easyauth-form input:focus,
.dw-easyauth-form select:focus,
.dw-easyauth-form textarea:focus {
	outline: none;
	background: var(--dw-auth-input-bg-focus, #fff);
	border-color: var(--dw-auth-btn-bg, #2b7fff);
	box-shadow: 0 0 0 3px var(--dw-auth-focus, rgba(43, 127, 255, 0.28));
}

.dw-easyauth-form input::placeholder,
.dw-easyauth-form textarea::placeholder {
	color: #9aa3ad;
}

/* Keep the native dropdown affordance after appearance:none. */
.dw-easyauth-form select {
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 1rem center, right 0.75rem center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2rem;
}

/* ---------------------------------------------------------------------------
 * Terms: collapsed block + read-to-the-end dialog
 * ------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
 * Agreements
 *
 * One row each: a box to tick, a marker saying whether it is required, and
 * the name of the thing — which is the control that opens the text. The
 * sentence being agreed to is stated once, under the group, instead of
 * repeated beside every box.
 * ------------------------------------------------------------------------ */

/* No box, no buttons. A small heading names the agreement, then a checkbox
   and a plain sentence, with the link to read it sitting inside that
   sentence — the way an agreement reads on a real sign-up form. */
.dw-easyauth-termsgroup {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.dw-easyauth-terms {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.dw-easyauth-terms-heading {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--dw-auth-text, #16181d);
}

.dw-easyauth-terms-row {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--dw-auth-text, #16181d);
	cursor: pointer;
}

.dw-easyauth-terms-row input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	min-width: 16px;
	margin: 0.14rem 0 0;
	accent-color: var(--dw-auth-btn-bg, #2b7fff);
	cursor: pointer;
}

.dw-easyauth-terms-row input[type="checkbox"]:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.dw-easyauth-terms-sentence {
	min-width: 0;
}

/* The link to read the text is part of the sentence, not a control beside it.
 *
 * It is a <button> for keyboard and screen-reader reasons, which means both
 * the plugin's own button rules and the theme's will reach for it. Neither
 * should: every property that would make it look like a button is stated
 * here, at a specificity that wins, and the element is excluded from the
 * button-system selector lists entirely. */
.dw-easyauth-terms .dw-ea-terms-open,
.dw-easyauth-terms-sentence .dw-ea-terms-open,
.dw-ea-modal .dw-easyauth-terms .dw-ea-terms-open {
	appearance: none;
	-webkit-appearance: none;
	display: inline;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0 0 0 0.25rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-image: none;
	box-shadow: none;
	text-shadow: none;
	font: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-transform: none;
	color: var(--dw-auth-btn-bg, #2b7fff);
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	vertical-align: baseline;
}

.dw-easyauth-terms .dw-ea-terms-open:hover,
.dw-ea-modal .dw-easyauth-terms .dw-ea-terms-open:hover {
	background: none;
	border: 0;
	box-shadow: none;
	color: color-mix(in srgb, var(--dw-auth-btn-bg, #2b7fff) 78%, #000);
	text-decoration: underline;
}

.dw-easyauth-terms .dw-ea-terms-open:focus-visible {
	outline: 2px solid var(--dw-auth-btn-bg, #2b7fff);
	outline-offset: 2px;
	box-shadow: none;
}

.dw-ea-terms-status {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.78rem;
	color: var(--dw-auth-muted, #61697a);
}

.dw-ea-terms-status--warn {
	color: var(--dw-auth-danger, #dc2626);
}

.dw-easyauth-terms.dw-ea-terms-agreed .dw-ea-terms-status {
	color: #1a7f37;
}

/* JS collapses the inline copy; it stays visible when the script never runs. */
.dw-easyauth-terms.dw-ea-terms-collapsed .dw-easyauth-terms-content {
	display: none;
}

.dw-ea-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.55);
}

.dw-ea-modal-overlay[hidden] {
	display: none;
}

body.dw-ea-modal-open {
	overflow: hidden;
}

.dw-ea-modal {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 640px;
	/* dvh follows the browser chrome as it collapses; vh does not, and on a
	   phone that difference is the whole toolbar. */
	max-height: min(80vh, 640px);
	max-height: min(80dvh, 640px);
	background: #fff;
	color: #1e1e1e;
	border-radius: 8px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

.dw-ea-modal-head,
.dw-ea-modal-foot {
	flex: 0 0 auto;
	padding: 1rem 1.25rem;
}

.dw-ea-modal-head {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	border-bottom: 1px solid #e0e0e0;
}

.dw-ea-modal-title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.4;
	flex: 1 1 auto;
}

.dw-ea-modal-x {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	font-size: 1.6rem;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	color: inherit;
}

/* Reading progress. A touch device hides its scrollbar until the finger
   moves, so a dialog that will not let you agree before the end gave no sign
   of how much end there was. This rail is that sign. */
.dw-ea-modal-progress {
	flex: 0 0 auto;
	height: 3px;
	background: var(--dw-auth-border, #e5e7eb);
}

.dw-ea-modal-progress-bar {
	display: block;
	width: 0;
	height: 100%;
	background: var(--dw-auth-btn-bg, #2b7fff);
	transition: width 0.1s linear;
}

.dw-ea-modal-progress.is-done .dw-ea-modal-progress-bar {
	background: #16a34a;
}

/* A fade at the foot of the text, so "there is more below" is visible even
   when the scrollbar is not. It goes once the reader reaches the end. */
.dw-ea-modal.has-more .dw-ea-modal-body::after {
	content: "";
	position: absolute;
	left: 0;
	/* Stops short of the scrollbar's gutter, so the bar is never behind it. */
	right: 1.75rem;
	bottom: 0;
	height: 40px;
	pointer-events: none;
	background: linear-gradient(rgba(255, 255, 255, 0), #fff);
}

.dw-ea-modal-body {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow-y: auto;
	/* Long content scrolls down, never sideways. A stray wide child should
	   be clipped rather than shifting the whole dialog. */
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	padding: 1.25rem;
	line-height: 1.65;
	overscroll-behavior: contain;
	/* The drawn scrollbar below replaces the native one — it looks the same on
	   every device, where the native bar is an overlay that hides itself the
	   moment a finger stops moving. */
	padding-right: 1.75rem;
	scrollbar-width: none;
}

.dw-ea-modal-body::-webkit-scrollbar {
	width: 0;
	height: 0;
}

/* An agreement can be read straight off its own page, so the dialog has to
   cope with real article markup — headings, lists, the lot. Left to the
   theme, an h2 from a policy page arrives at display size and swamps a
   dialog it was never written for. */
.dw-ea-modal-body > :first-child {
	margin-top: 0;
}

.dw-ea-modal-body > :last-child {
	margin-bottom: 0;
}

.dw-ea-modal-body p,
.dw-ea-modal-body ul,
.dw-ea-modal-body ol {
	margin: 0 0 1em;
}

.dw-ea-modal-body li {
	margin-bottom: 0.35em;
}

.dw-ea-modal-body h1,
.dw-ea-modal-body h2,
.dw-ea-modal-body h3,
.dw-ea-modal-body h4,
.dw-ea-modal-body h5,
.dw-ea-modal-body h6 {
	margin: 1.5em 0 0.5em;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--dw-auth-text, #16181d);
}

.dw-ea-modal-body img {
	max-width: 100%;
	height: auto;
}

.dw-ea-modal-body table {
	width: 100%;
	border-collapse: collapse;
}

/* Drawn scrollbar. Positioned against the dialog and sized by script, because
   its height has to match the body between the header and the footer. */
.dw-ea-modal-scroll {
	position: absolute;
	right: 6px;
	width: 8px;
	border-radius: 8px;
	background: var(--dw-auth-surface, #f7f8fa);
	z-index: 2;
}

.dw-ea-modal-scroll[hidden] {
	display: none;
}

.dw-ea-modal-scroll-thumb {
	display: block;
	width: 100%;
	border-radius: 8px;
	background: var(--dw-auth-border-strong, #d3d7de);
	cursor: grab;
	touch-action: none;
}

.dw-ea-modal-scroll-thumb:hover,
.dw-ea-modal-scroll.is-dragging .dw-ea-modal-scroll-thumb {
	background: var(--dw-auth-muted, #61697a);
}

.dw-ea-modal-scroll.is-dragging .dw-ea-modal-scroll-thumb {
	cursor: grabbing;
}

/* Wide enough to hit with a thumb on a touch screen. */
@media (pointer: coarse) {
	.dw-ea-modal-scroll {
		width: 10px;
		right: 5px;
	}
}

.dw-ea-modal-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	border-top: 1px solid #e0e0e0;
	background: #fafafa;
}

.dw-ea-modal-hint {
	margin: 0;
	font-size: 0.9rem;
	opacity: 0.8;
	flex: 1 1 12rem;
}

.dw-ea-modal-agree {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	border-radius: 4px;
	padding: 0.6rem 1.4rem;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	background: var(--dw-auth-btn-bg, #2b7fff);
	cursor: pointer;
}

.dw-ea-modal-agree:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

@media (max-width: 480px) {
	.dw-ea-modal-overlay {
		padding: 0.5rem;
	}

	/* Give the text every row available: the dialog is nearly the whole
	   screen, and the chrome around it is as thin as it can be. */
	.dw-ea-modal {
		max-height: 94vh;
		max-height: 94dvh;
	}

	.dw-ea-modal-head {
		padding: 0.75rem 1rem;
	}

	.dw-ea-modal-body {
		padding: 1rem;
	}

	.dw-ea-modal-foot {
		flex-direction: column;
		align-items: stretch;
		gap: 0.6rem;
		padding: 0.75rem 1rem;
	}

	/* flex-basis is a width in a row and a HEIGHT once the footer stacks —
	   the 12rem written for the desktop row became a 192px tall empty box
	   sitting between the hint and the button. */
	.dw-ea-modal-foot .dw-ea-modal-hint {
		flex: 0 0 auto;
		text-align: center;
	}

	.dw-ea-modal-agree {
		width: 100%;
		min-height: 48px;
	}
}

.dw-easyauth-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.dw-easyauth-radio-group .dw-easyauth-radio {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: 0;
	font-weight: normal;
}

.dw-easyauth-radio-group input[type="radio"] {
	width: auto;
	min-width: 18px;
	height: 18px;
	margin: 0;
}

.dw-easyauth-field--checkbox .dw-easyauth-checkbox input[type="checkbox"] {
	width: auto;
	min-width: 20px;
	height: 20px;
	margin: 0;
}

.dw-easyauth-form textarea {
	width: 100%;
	min-height: 84px;
	padding: 0.5rem 0.7rem;
	border: var(--dw-auth-input-border, 1px solid var(--dw-auth-border, #e5e7eb));
	border-radius: var(--dw-auth-field-radius, 8px);
	background: var(--dw-auth-input-bg, #fff);
	color: inherit;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.55;
	box-sizing: border-box;
	resize: vertical;
	display: block;
	transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

/* A textarea's label anchors to the top rather than centring on the box. */
.dw-easyauth-field--checkbox label {
	display: inline;
	font-weight: normal;
	vertical-align: middle;
}

.dw-easyauth-field--checkbox input {
	width: auto;
	min-width: 20px;
	height: 20px;
	margin-right: 0.35rem;
	vertical-align: middle;
}

/* Terms of service agreement blocks */
.dw-easyauth-field--checkbox .dw-easyauth-checkbox input[type="checkbox"] {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	min-width: 24px;
	margin: 0;
	accent-color: var(--dw-auth-btn-bg, #2b7fff);
	cursor: pointer;
}

.dw-easyauth-field--checkbox .dw-easyauth-checkbox {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.dw-easyauth-radio-group .dw-easyauth-radio {
	min-height: 44px;
	padding: 0.2rem 0;
}

.dw-easyauth-radio-group input[type="radio"] {
	width: 22px;
	height: 22px;
	min-width: 22px;
	accent-color: var(--dw-auth-btn-bg, #2b7fff);
}

.dw-easyauth-terms-content {
	font-size: 0.875rem;
	line-height: 1.5;
	color: #50575e;
	white-space: pre-wrap;
	max-height: 180px;
	overflow-y: auto;
	margin-bottom: 0.75rem;
	padding-right: 0.25rem;
}

.dw-easyauth-required {
	color: var(--dw-auth-danger, #dc2626);
	font-weight: 700;
	margin-left: 0.15rem;
}

.dw-easyauth-submit {
	margin: 0.45rem 0 0;
}

.dw-easyauth-logo {
	text-align: left;
}

/* Links under the card read as quiet supporting text, not competing actions. */
.dw-easyauth-link {
	font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
 * Section headings and read-only values (profile form)
 * ------------------------------------------------------------------------ */

.dw-easyauth-section {
	margin: 0.6rem 0 -0.35rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dw-auth-muted, #61697a);
}

.dw-easyauth-section:first-of-type {
	margin-top: 0;
}

.dw-easyauth-hint {
	margin: -0.5rem 0 0;
	font-size: 0.875rem;
	color: var(--dw-auth-muted, #61697a);
}

.dw-easyauth-static {
	display: block;
	padding: 0.68rem 0.85rem;
	border: 1px dashed var(--dw-auth-border, #e5e7eb);
	border-radius: var(--dw-auth-field-radius, 8px);
	background: #f8fafc;
	color: var(--dw-auth-muted, #61697a);
	font-size: 16px;
	line-height: 1.4;
	word-break: break-all;
}

/* --------------------------------------------------------------------------
 * Buttons — DASOMWEB spec sheet
 *
 *   primary    filled, for the one action a screen is asking for
 *   secondary  outlined, a real alternative beside it
 *
 * Both share metrics: 40px tall, 15px/700, 8px radius, 0 20px padding, and
 * no vertical padding so the label centres regardless of theme line-height.
 * ------------------------------------------------------------------------ */

.dw-easyauth-btn,
.dw-ea-modal-agree,
.dw-ea-auth-trigger--button,
.dw-ea-nav--button .dw-ea-nav-link,
.dw-ea-nav--block .dw-ea-nav-link,
.dw-ea-nav--menu .dw-ea-nav-link,
.dw-drawer-auth .dw-ea-nav--text .dw-ea-nav-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 40px;
	min-height: 40px;
	padding: 0 20px;
	border-radius: var(--dw-auth-field-radius, 8px);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.dw-easyauth-btn svg,
.dw-ea-modal-agree svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

/* Primary */
.dw-easyauth-btn,
.dw-ea-modal-agree,
.dw-ea-auth-trigger--button,
.dw-ea-nav--button .dw-ea-nav-link--register,
.dw-ea-nav--block .dw-ea-nav-link--register,
.dw-ea-nav--block .dw-ea-nav-link--profile,
.dw-ea-nav--menu .dw-ea-nav-link--login,
.dw-ea-nav--menu .dw-ea-nav-link--profile,
.dw-drawer-auth .dw-ea-nav--text .dw-ea-nav-link--register,
.dw-drawer-auth .dw-ea-nav--text .dw-ea-nav-link--profile {
	border: 1px solid var(--dw-auth-btn-bg, #2b7fff);
	background: var(--dw-auth-btn-bg, #2b7fff);
	color: var(--dw-auth-btn-color, #fff);
}

.dw-easyauth-btn:hover,
.dw-ea-modal-agree:not(:disabled):hover,
.dw-ea-auth-trigger--button:hover,
.dw-ea-nav--button .dw-ea-nav-link--register:hover,
.dw-ea-nav--block .dw-ea-nav-link--register:hover,
.dw-ea-nav--block .dw-ea-nav-link--profile:hover,
.dw-ea-nav--menu .dw-ea-nav-link--login:hover,
.dw-ea-nav--menu .dw-ea-nav-link--profile:hover,
.dw-drawer-auth .dw-ea-nav--text .dw-ea-nav-link--register:hover,
.dw-drawer-auth .dw-ea-nav--text .dw-ea-nav-link--profile:hover {
	background: var(--dw-auth-btn-hover, #1466d6);
	border-color: var(--dw-auth-btn-hover, #1466d6);
	color: var(--dw-auth-btn-color, #fff);
}

/* Secondary — a neutral outline that takes the accent on hover. */
.dw-ea-nav--button .dw-ea-nav-link--login,
.dw-ea-nav--block .dw-ea-nav-link--login,
.dw-drawer-auth .dw-ea-nav--text .dw-ea-nav-link--login {
	border: 1px solid var(--dw-auth-border, #e5e7eb);
	background: var(--dw-auth-card-bg, #fff);
	color: var(--dw-auth-text, #16181d);
}

.dw-ea-nav--button .dw-ea-nav-link--login:hover,
.dw-ea-nav--block .dw-ea-nav-link--login:hover,
.dw-drawer-auth .dw-ea-nav--text .dw-ea-nav-link--login:hover {
	border-color: var(--dw-auth-btn-bg, #2b7fff);
	color: var(--dw-auth-btn-bg, #2b7fff);
	background: var(--dw-auth-card-bg, #fff);
}

.dw-easyauth-btn:focus-visible,
.dw-ea-modal-agree:focus-visible,
.dw-ea-auth-trigger--button:focus-visible,
.dw-ea-nav--button .dw-ea-nav-link:focus-visible,
.dw-ea-nav--block .dw-ea-nav-link:focus-visible,
.dw-ea-nav--menu .dw-ea-nav-link:focus-visible,
.dw-drawer-auth .dw-ea-nav--text .dw-ea-nav-link:focus-visible,
.dw-ea-nav .dw-ea-nav-user:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--dw-auth-focus, rgba(43, 127, 255, 0.28));
}

/* Submitting. The reference gives this state a spinner, a slight fade and a
   progress cursor — and it doubles as the guard against a second submit while
   the first is still in flight. */
.dw-easyauth-btn.is-loading {
	opacity: 0.85;
	cursor: progress;
}

.dw-easyauth-btn.is-loading svg {
	display: none;
}

.dw-easyauth-btn .dw-easyauth-spinner {
	display: none;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #fff;
	border-radius: 100px;
	animation: dw-easyauth-spin 0.7s linear infinite;
}

.dw-easyauth-btn.is-loading .dw-easyauth-spinner {
	display: inline-block;
}

@keyframes dw-easyauth-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dw-easyauth-btn .dw-easyauth-spinner {
		animation-duration: 2.4s;
	}
}

.dw-ea-modal-agree:disabled {
	border-color: var(--dw-auth-border, #e5e7eb);
	background: var(--dw-auth-surface, #f7f8fa);
	color: var(--dw-auth-muted, #61697a);
	cursor: not-allowed;
	opacity: 1;
}

/* A form's own action is full width and taller — it is the whole point of
   the screen it sits on. */
.dw-easyauth-btn {
	width: 100%;
	height: 52px;
	min-height: 52px;
	margin-top: 0.35rem;
	font-size: 16px;
}

/* The shared button system is declared before anything that refines it.
   It was below the nav for a long time, and because a variant selector
   carries the same weight as the shared one, the base was overriding the
   very sizes the variants existed to set. Order is the whole fix. */

/* --------------------------------------------------------------------------
 * [dw_auth_nav] — header auth navigation
 *
 * Lives in the site's own header, so it inherits the theme's font and only
 * sets what it must. Text style for desktop, button style for a mobile bar.
 * ------------------------------------------------------------------------ */

.dw-ea-nav {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	font-size: 0.95rem;
	line-height: 1;
	vertical-align: middle;
}

/* WordPress's autop pass turns newlines into <br /> when the shortcode sits
   inside a paragraph block. The markup now ships with no newlines for exactly
   that reason, but a cached page may still carry a converted copy — and a br
   has no business anywhere in the nav either way. */
.dw-ea-nav br,
.dw-ea-nav-panel br {
	display: none;
}

.dw-ea-nav-link,
.dw-ea-nav-user {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	margin: 0;
	font: inherit;
	line-height: 1;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* A text separator still rides its own line box, so the default divider is
   drawn rather than typed — a 1px rule centres exactly, whatever the font. */
.dw-ea-nav-sep {
	display: inline-flex;
	align-items: center;
	align-self: center;
	line-height: 1;
	opacity: 0.4;
	user-select: none;
}

.dw-ea-nav-sep--rule {
	width: 1px;
	height: 12px;
	padding: 0;
	background: var(--dw-auth-border, #e5e7eb);
	opacity: 1;
}

/* No divider before the auth controls — the operator removed it (2026-08-07):
   in a real header it lands hard against the theme's last menu item and reads
   as clutter, not as separation. The gap alone does the separating. */
.dw-ea-nav--button {
	gap: 10px;
}

/* Text style, per the reference's utility bar: both links weighted, sign-in in
   the text colour and sign-up in the accent, a 1px rule between them. Colour
   carries the hierarchy here — there is no filled button in this variant. */
.dw-ea-nav--text .dw-ea-nav-link {
	min-height: 34px;
	padding: 0 0.25rem;
	background: none;
	border: 0;
	font-size: 15px;
	font-weight: 700;
}

@media (pointer: coarse) {
	.dw-ea-nav--text .dw-ea-nav-link {
		min-height: 44px;
	}
}

.dw-ea-nav--text .dw-ea-nav-link--login {
	color: var(--dw-auth-text, #16181d);
}

.dw-ea-nav--text .dw-ea-nav-link--login:hover {
	color: var(--dw-auth-btn-bg, #2b7fff);
	text-decoration: none;
}

.dw-ea-nav--text .dw-ea-nav-link--register {
	color: var(--dw-auth-btn-bg, #2b7fff);
}

.dw-ea-nav--text .dw-ea-nav-link--register:hover {
	color: var(--dw-auth-btn-hover, #1466d6);
	text-decoration: none;
}

/* Button style is the chosen desktop header (1c): both actions at the shared
   40px metrics, drawn by the button system further down. On a coarse pointer
   they grow to the 44px touch size. */
.dw-ea-nav--button .dw-ea-nav-sep {
	display: none;
}

@media (pointer: coarse) {
	.dw-ea-nav--button .dw-ea-nav-link {
		height: 44px;
		min-height: 44px;
	}
}

/* Block style — the pair at the top of an opened hamburger panel, which is
   where the reference puts sign in and sign up on mobile whichever header
   placement the site uses. Full width, split evenly, at the touch size. */
.dw-ea-nav--block {
	display: flex;
	width: 100%;
	gap: 10px;
}

.dw-ea-nav--block::before,
.dw-ea-nav--block .dw-ea-nav-sep {
	display: none;
}

.dw-ea-nav--block .dw-ea-nav-link {
	flex: 1 1 0;
	min-width: 0;
	height: 48px;
	min-height: 48px;
	padding: 0 20px;
	font-size: 15px;
}

/* Menu style — the chosen hamburger-panel treatment (2b full width): one
   52px Log in across the panel, the register line under it. */
.dw-ea-nav--menu {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	gap: 12px;
}

.dw-ea-nav--menu::before,
.dw-ea-nav--menu .dw-ea-nav-sep {
	display: none;
}

.dw-ea-nav--menu .dw-ea-nav-link {
	width: 100%;
	height: 52px;
	min-height: 52px;
	padding: 0 20px;
	font-size: 16px;
}

/* "Don't have an account? Register" — the sentence that carries the second
   action, exactly as it does under the login card. */
.dw-ea-nav-prompt {
	width: 100%;
	text-align: center;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--dw-auth-muted, #61697a);
}

.dw-ea-nav-prompt a {
	color: var(--dw-auth-btn-bg, #2b7fff);
	font-weight: 700;
	text-decoration: none;
}

.dw-ea-nav-prompt a:hover {
	color: var(--dw-auth-btn-hover, #1466d6);
	text-decoration: underline;
}

/* Signed in inside a menu panel, the account lays flat: who is signed in,
   a full-width Profile, and Log out last in the danger colour — the account
   dropdown unfolded, since a dropdown inside an open panel is a menu inside
   a menu. */
.dw-ea-nav--block.is-signed-in {
	flex-direction: column;
	align-items: stretch;
}

.dw-ea-nav--block.is-signed-in .dw-ea-nav-link {
	flex: 0 0 auto;
	width: 100%;
}

.dw-ea-nav-account {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: left;
}

.dw-ea-nav-account .dw-ea-nav-avatar {
	width: 36px;
	height: 36px;
	font-size: 14px;
}

.dw-ea-nav-account-name {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--dw-auth-text, #16181d);
}

.dw-ea-nav-account-mail {
	display: block;
	font-size: 12px;
	line-height: 1.35;
	color: var(--dw-auth-muted, #61697a);
}

.dw-ea-nav-logout {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 44px;
	margin-top: 2px;
	border-top: 1px solid var(--dw-auth-border, #e5e7eb);
	font-size: 14px;
	font-weight: 600;
	color: var(--dw-auth-danger, #dc2626);
	text-decoration: none;
}

.dw-ea-nav-logout:hover {
	color: var(--dw-auth-danger, #dc2626);
	text-decoration: underline;
}

/* Signed in — the name chip (2c ②): a 28px accent avatar and the visible
   user name in an outlined pill on the page ground. The border takes the
   accent on hover and while the dropdown is open. */
.dw-ea-nav .dw-ea-nav-user {
	gap: 8px;
	height: 40px;
	padding: 0 12px 0 6px;
	border: 1px solid var(--dw-auth-border, #e5e7eb);
	border-radius: 100px;
	background: var(--dw-auth-card-bg, #fff);
	color: var(--dw-auth-text, #16181d);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	white-space: nowrap;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dw-ea-nav .dw-ea-nav-user:hover,
.dw-ea-nav.is-open .dw-ea-nav-user {
	border-color: var(--dw-auth-btn-bg, #2b7fff);
	text-decoration: none;
}

/* A long display name must not blow the chip open. */
.dw-ea-nav-name {
	max-width: 12rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dw-ea-nav-caret {
	flex: 0 0 auto;
	color: var(--dw-auth-muted, #61697a);
	transition: transform 0.14s ease;
}

.dw-ea-nav.is-open .dw-ea-nav-caret {
	transform: rotate(180deg);
}

/* The signed-in panel. */
/* Fixed, not absolute: an absolutely positioned panel is clipped by any
   ancestor with overflow hidden — a sticky header, a toolbar, a slider
   wrapper — and no z-index can escape that. Fixed takes it out of the
   ancestor's clip; the script sets top/left from the trigger's rect and
   keeps them in step on scroll and resize. */
.dw-ea-nav-panel {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100002;
	display: flex;
	flex-direction: column;
	width: 260px;
	padding: 0;
	border: 1px solid var(--dw-auth-border, #e5e7eb);
	border-radius: 12px;
	background: var(--dw-auth-card-bg, #fff);
	box-shadow: 0 12px 32px rgba(22, 24, 29, 0.12);
	overflow: hidden;
	text-align: left;
}

.dw-ea-nav-panel[hidden] {
	display: none;
}

.dw-ea-nav-panel-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--dw-auth-border, #e5e7eb);
}

.dw-ea-nav-panel-name {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--dw-auth-text, #16181d);
	line-height: 1.35;
}

.dw-ea-nav-panel-mail {
	display: block;
	font-size: 12px;
	color: var(--dw-auth-muted, #61697a);
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dw-ea-nav-panel-list {
	display: flex;
	flex-direction: column;
	padding: 6px;
}

.dw-ea-nav-item {
	display: block;
	padding: 10px 12px;
	border-radius: var(--dw-auth-field-radius, 8px);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--dw-auth-text, #16181d);
	text-decoration: none;
	white-space: nowrap;
}

.dw-ea-nav-item:hover {
	background: var(--dw-auth-surface, #f7f8fa);
	color: var(--dw-auth-text, #16181d);
	text-decoration: none;
}

/* Log out sits last, behind a divider, in the danger colour. */
.dw-ea-nav-item--logout {
	color: var(--dw-auth-danger, #dc2626);
	margin: 0 6px 6px;
	padding: 10px 12px;
}

.dw-ea-nav-item--logout:hover {
	background: var(--dw-auth-surface, #f7f8fa);
	color: var(--dw-auth-danger, #dc2626);
}

.dw-ea-nav-panel-foot {
	border-top: 1px solid var(--dw-auth-border, #e5e7eb);
	padding-top: 6px;
}

/* The avatar carries the first letter of the name on the accent. */
.dw-ea-nav-avatar {
	flex: 0 0 auto;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 100px;
	background: var(--dw-auth-btn-bg, #2b7fff);
	color: var(--dw-auth-btn-color, #fff);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
}

.dw-ea-nav-panel-head .dw-ea-nav-avatar {
	width: 36px;
	height: 36px;
	font-size: 14px;
}

 * [dw_auth_modal] launcher + dialog-hosted forms
 * ------------------------------------------------------------------------ */

.dw-ea-auth-launcher {
	display: inline-block;
}

.dw-ea-auth-trigger {
	font: inherit;
	cursor: pointer;
}

.dw-ea-auth-trigger--button {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	border-radius: var(--dw-auth-field-radius, 8px);
	padding: 0.62rem 1.25rem;
	font-weight: 600;
	color: var(--dw-auth-btn-color, #fff);
	background: var(--dw-auth-btn-bg, #2b7fff);
}

.dw-ea-auth-trigger--button:hover {
	filter: brightness(0.94);
}

.dw-ea-auth-trigger--link {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	padding: 0;
	color: var(--dw-auth-btn-bg, #2b7fff);
	text-decoration: underline;
}

/* Inside a dialog the form drops the full-screen split layout. */
.dw-easyauth-wrap--modal {
	display: block;
	width: 100%;
	min-height: 0;
	/* Sits inside someone else's container — a dialog, a page-builder modal,
	   a narrow column — so it contributes no outer spacing of its own. */
	margin: 0;
	padding: 0;
	background: none;
}

.dw-easyauth-wrap--modal > *:first-child {
	margin-top: 0;
}

.dw-easyauth-wrap--modal > *:last-child {
	margin-bottom: 0;
}

/* The page layout stretches the columns to the viewport; inside a dialog
   they must collapse to their content or the body scrolls vertically for
   no reason. */
.dw-easyauth-wrap--modal .dw-easyauth-split {
	min-height: 0;
}

.dw-easyauth-wrap--modal .dw-easyauth-split--form {
	display: block;
	padding: 0;
	min-height: 0;
}

.dw-easyauth-wrap--modal .dw-easyauth-card {
	width: 100%;
	max-width: none;
	box-shadow: none;
	border-radius: 0;
	padding: 1.5rem;
}

/* Room for the close button, which now sits over the card. */
.dw-easyauth-wrap--modal .dw-easyauth-title {
	padding-right: 2.25rem;
}

.dw-easyauth-wrap--modal .dw-easyauth-logo {
	margin-bottom: 1rem;
}

.dw-easyauth-wrap--modal .dw-easyauth-home {
	display: none;
}

/* The form brings its own heading, so the dialog's header band is dead
   space — a padded row holding an empty title. Lift the close button out
   of the flow and let the card start at the top. */
.dw-ea-modal--auth {
	position: relative;
}

.dw-ea-modal--auth .dw-ea-modal-head {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	padding: 0.35rem;
	min-height: 0;
	border-bottom: 0;
	background: none;
}

.dw-ea-modal--auth .dw-ea-modal-title {
	display: none;
}

.dw-ea-modal--auth .dw-ea-modal-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	font-size: 1.35rem;
	color: var(--dw-auth-muted, #61697a);
}

.dw-ea-modal--auth .dw-ea-modal-x:hover {
	background: #f2f5f8;
	color: var(--dw-auth-text, #16181d);
}

.dw-ea-modal--auth .dw-ea-modal-body {
	padding: 0;
}

.dw-ea-modal-overlay--auth .dw-ea-modal {
	max-width: 600px;
	/* The register form is tall; give it the height rather than making the
	   visitor scroll a short window. */
	max-height: min(90vh, 780px);
}

/* On a phone the dialog is the screen, so it uses the room it has. */
@media (max-width: 600px) {
	.dw-ea-modal-overlay--auth {
		padding: 0.5rem;
	}

	.dw-ea-modal-overlay--auth .dw-ea-modal {
		max-height: calc(100vh - 1rem);
		max-height: calc(100dvh - 1rem);
	}

	.dw-easyauth-wrap--modal .dw-easyauth-card {
		padding: 1.15rem 1.15rem 1.4rem;
	}
}

/* --------------------------------------------------------------------------
 * Link colour, pinned against the theme
 *
 * These controls are anchors, and a theme's own `a:visited` rule carries a
 * pseudo-class — one more point of specificity than a plain two-class
 * selector — so it repaints a button the visitor has already been through.
 * A filled Register that someone has clicked once comes back with the theme's
 * visited colour on it instead of white, which reads as a broken button.
 * Restating every link state at three classes settles it.
 * ------------------------------------------------------------------------ */

.dw-ea-nav .dw-ea-nav-link--register:link,
.dw-ea-nav .dw-ea-nav-link--register:visited,
.dw-ea-nav .dw-ea-nav-link--profile:link,
.dw-ea-nav .dw-ea-nav-link--profile:visited,
.dw-ea-nav--menu .dw-ea-nav-link--login:link,
.dw-ea-nav--menu .dw-ea-nav-link--login:visited {
	color: var(--dw-auth-btn-color, #fff);
}

/* Except in the text variant, where nothing is filled and the accent is the
   whole hierarchy. */
.dw-ea-nav--text .dw-ea-nav-link--register:link,
.dw-ea-nav--text .dw-ea-nav-link--register:visited {
	color: var(--dw-auth-btn-bg, #2b7fff);
}

.dw-ea-nav--button .dw-ea-nav-link--login:link,
.dw-ea-nav--button .dw-ea-nav-link--login:visited,
.dw-ea-nav--block .dw-ea-nav-link--login:link,
.dw-ea-nav--block .dw-ea-nav-link--login:visited {
	color: var(--dw-auth-text, #16181d);
}

.dw-ea-nav--text .dw-ea-nav-link--login:link,
.dw-ea-nav--text .dw-ea-nav-link--login:visited {
	color: var(--dw-auth-text, #16181d);
}

.dw-ea-nav .dw-ea-nav-item:link,
.dw-ea-nav .dw-ea-nav-item:visited {
	color: var(--dw-auth-text, #16181d);
}

.dw-ea-nav .dw-ea-nav-item--logout:link,
.dw-ea-nav .dw-ea-nav-item--logout:visited,
.dw-ea-nav .dw-ea-nav-logout:link,
.dw-ea-nav .dw-ea-nav-logout:visited {
	color: var(--dw-auth-danger, #dc2626);
}

/* --------------------------------------------------------------------------
 * Phone width
 *
 * The full-width treatment used to depend on the theme putting the shortcode
 * inside its own .dw-drawer-auth container. Themes move these slots around and
 * rename them, and when the container is not the expected one the pair stays
 * at its desktop size in the middle of a menu panel. Width is the thing that
 * actually decides this, so width is what it keys off; the desktop header
 * strip opts back out for the themes that still show it.
 * ------------------------------------------------------------------------ */

@media (max-width: 782px) {
	.dw-ea-nav--button {
		display: flex;
		width: 100%;
		gap: 10px;
	}

	.dw-ea-nav--button::before,
	.dw-ea-nav--button .dw-ea-nav-sep {
		display: none;
	}

	.dw-ea-nav--button .dw-ea-nav-link {
		flex: 1 1 0;
		min-width: 0;
		height: 48px;
		min-height: 48px;
		padding: 0 20px;
		font-size: 15px;
	}

	.dw-ea-nav--button.is-signed-in .dw-ea-nav-user {
		flex: 1 1 auto;
		justify-content: flex-start;
		height: 48px;
	}

	.dw-ea-nav--button.is-signed-in .dw-ea-nav-name {
		max-width: none;
		margin-right: auto;
	}

	/* A header strip is still a row, whatever the width. */
	.dw-header-auth .dw-ea-nav--button {
		width: auto;
	}

	.dw-header-auth .dw-ea-nav--button .dw-ea-nav-link {
		flex: 0 0 auto;
		height: 44px;
		min-height: 44px;
	}
}

/* --------------------------------------------------------------------------
 * Label colour inside an open drawer
 *
 * A theme that repaints every link in its open drawer to the body colour is
 * doing the right thing for its own menu — a transparent header's white
 * links would vanish on the panel's light ground. dwwp does that at
 * `header.wp-block-group.dw-nav-open … .dw-nav-list a`, four classes and two
 * elements, which outranks a plain two-class button rule and turns a filled
 * button's white label dark.
 *
 * The agreement with that theme puts the button's appearance on this side of
 * the line, so the colour is restated here at the same weight the placement
 * rules already use. Scoped to the slot's own classes, so it says nothing
 * about the theme's menu links.
 * ------------------------------------------------------------------------ */

.dw-nav-drawer-item .dw-drawer-auth .dw-ea-nav .dw-ea-nav-link--register:link,
.dw-nav-drawer-item .dw-drawer-auth .dw-ea-nav .dw-ea-nav-link--register:visited,
.dw-nav-drawer-item .dw-drawer-auth .dw-ea-nav .dw-ea-nav-link--profile:link,
.dw-nav-drawer-item .dw-drawer-auth .dw-ea-nav .dw-ea-nav-link--profile:visited,
.dw-nav-drawer-item .dw-drawer-auth .dw-ea-nav--menu .dw-ea-nav-link--login:link,
.dw-nav-drawer-item .dw-drawer-auth .dw-ea-nav--menu .dw-ea-nav-link--login:visited {
	color: var(--dw-auth-btn-color, #fff);
}

.dw-nav-drawer-item .dw-drawer-auth .dw-ea-nav--block .dw-ea-nav-link--login:link,
.dw-nav-drawer-item .dw-drawer-auth .dw-ea-nav--block .dw-ea-nav-link--login:visited,
.dw-nav-drawer-item .dw-drawer-auth .dw-ea-nav--button .dw-ea-nav-link--login:link,
.dw-nav-drawer-item .dw-drawer-auth .dw-ea-nav--button .dw-ea-nav-link--login:visited {
	color: var(--dw-auth-text, #16181d);
}

.dw-nav-drawer-item .dw-drawer-auth .dw-ea-nav .dw-ea-nav-logout:link,
.dw-nav-drawer-item .dw-drawer-auth .dw-ea-nav .dw-ea-nav-logout:visited,
.dw-nav-drawer-item .dw-drawer-auth .dw-ea-nav .dw-ea-nav-item--logout:link,
.dw-nav-drawer-item .dw-drawer-auth .dw-ea-nav .dw-ea-nav-item--logout:visited {
	color: var(--dw-auth-danger, #dc2626);
}

.dw-nav-drawer-item .dw-drawer-auth .dw-ea-nav .dw-ea-nav-account-name,
.dw-nav-drawer-item .dw-drawer-auth .dw-ea-nav .dw-ea-nav-item:link,
.dw-nav-drawer-item .dw-drawer-auth .dw-ea-nav .dw-ea-nav-item:visited {
	color: var(--dw-auth-text, #16181d);
}

/* --------------------------------------------------------------------------
 * The side-by-side pair, held against a stacking drawer
 *
 * A theme that owns a drawer slot usually wants a stack, so it sets its
 * container to a column and forces `width: 100%` on every link inside —
 * dwwp does exactly that, at `.dw-nav-drawer-item .dw-drawer-auth a`. A pair
 * that is meant to sit side by side has to say so more loudly than that, and
 * has to undo the width as well: in a row, `flex-basis: 0` normally settles
 * the sizing, but only while nothing else claims the main axis.
 *
 * Four classes clears the theme's two-classes-and-an-element, and the wrapper
 * paragraph autop leaves behind is stretched so the row has a full width to
 * divide.
 * ------------------------------------------------------------------------ */

.dw-drawer-auth p,
.dw-drawer-slot p {
	width: 100%;
	margin: 0;
}

.dw-nav-drawer-item .dw-drawer-auth .dw-ea-nav--block,
.dw-nav-drawer-item .dw-drawer-slot .dw-ea-nav--block,
.dw-drawer-auth .dw-ea-nav--block,
.dw-drawer-slot .dw-ea-nav--block {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100%;
	gap: 10px;
}

.dw-nav-drawer-item .dw-drawer-auth .dw-ea-nav--block .dw-ea-nav-link,
.dw-nav-drawer-item .dw-drawer-slot .dw-ea-nav--block .dw-ea-nav-link,
.dw-drawer-auth .dw-ea-nav--block .dw-ea-nav-link,
.dw-drawer-slot .dw-ea-nav--block .dw-ea-nav-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-width: 0;
	/* The theme's width is the thing being undone; without this the two
	   claims fight and the pair collapses to its text. */
	width: auto;
	height: 48px;
	min-height: 48px;
	padding: 0 20px;
	font-size: 15px;
}

/* Signed in, the account still stacks — a name, an address and two actions
   are a column whatever the signed-out pair does. */
.dw-nav-drawer-item .dw-drawer-auth .dw-ea-nav--block.is-signed-in,
.dw-drawer-auth .dw-ea-nav--block.is-signed-in,
.dw-drawer-slot .dw-ea-nav--block.is-signed-in {
	flex-direction: column;
}

.dw-nav-drawer-item .dw-drawer-auth .dw-ea-nav--block.is-signed-in .dw-ea-nav-link,
.dw-drawer-auth .dw-ea-nav--block.is-signed-in .dw-ea-nav-link,
.dw-drawer-slot .dw-ea-nav--block.is-signed-in .dw-ea-nav-link {
	flex: 0 0 auto;
	width: 100%;
}

/* --------------------------------------------------------------------------
 * Slot context — DW Builder / dwwp theme
 *
 * The theme owns two containers and fills each with this shortcode:
 *
 *   .dw-header-auth   desktop header strip — inline, auto width
 *   .dw-drawer-auth   mobile hamburger drawer — full width
 *
 * A shortcode is rendered server-side and cannot tell which container it
 * landed in, so the style attribute is the author's promise about placement
 * — and copying the desktop snippet into the drawer is the easy mistake.
 * These rules let the slot decide the layout instead, so a wrong style
 * attribute degrades to something usable rather than to a broken row.
 *
 * The variants already suited to a slot are left alone: block and menu keep
 * their own metrics in a drawer, and only the two that would break there are
 * rescued. The theme also forces width:100% and centring on links inside the
 * drawer; a flex-basis of 0 outranks that width on the main axis, so the two
 * coexist without a specificity fight.
 * ------------------------------------------------------------------------ */

.dw-drawer-auth .dw-ea-nav--button,
.dw-drawer-auth .dw-ea-nav--text {
	display: flex;
	width: 100%;
	gap: 10px;
}

.dw-drawer-auth .dw-ea-nav--button::before,
.dw-drawer-auth .dw-ea-nav--text::before,
.dw-drawer-auth .dw-ea-nav .dw-ea-nav-sep {
	display: none;
}

.dw-drawer-auth .dw-ea-nav--button .dw-ea-nav-link,
.dw-drawer-auth .dw-ea-nav--text .dw-ea-nav-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-width: 0;
	height: 48px;
	min-height: 48px;
	padding: 0 20px;
	font-size: 15px;
}

/* Signed in, the account chip takes the full row. Its panel is fixed and
   positioned by script, so it still escapes the drawer's own clipping. */
.dw-drawer-auth .dw-ea-nav--button .dw-ea-nav-user,
.dw-drawer-auth .dw-ea-nav--text .dw-ea-nav-user {
	flex: 1 1 auto;
	justify-content: flex-start;
	height: 48px;
	border-radius: var(--dw-auth-field-radius, 8px);
}

.dw-drawer-auth .dw-ea-nav-name {
	max-width: none;
	margin-right: auto;
}

/* The header strip is the mirror case: a full-width variant dropped there
   must not stretch the header or stack. */
.dw-header-auth .dw-ea-nav {
	width: auto;
}

.dw-header-auth .dw-ea-nav--block,
.dw-header-auth .dw-ea-nav--menu {
	flex-direction: row;
	align-items: center;
	width: auto;
}

.dw-header-auth .dw-ea-nav--block .dw-ea-nav-link,
.dw-header-auth .dw-ea-nav--menu .dw-ea-nav-link {
	flex: 0 0 auto;
	width: auto;
	height: 40px;
	min-height: 40px;
	padding: 0 20px;
	font-size: 15px;
}

.dw-header-auth .dw-ea-nav-prompt {
	width: auto;
	margin-left: 4px;
	font-size: 13px;
}

/* --------------------------------------------------------------------------
 * Pin the primary button, box and text, in every context
 *
 * A dialog is appended to <body>, outside whatever wrapper the theme styles
 * its content through, so a rule like `.entry-content button` reaches the
 * form on the page but not the same form in the dialog — and the two drift
 * apart. These selectors carry enough specificity to win in both places, and
 * restate the type as well as the box so a theme cannot leave the shape ours
 * and the label theirs.
 * ------------------------------------------------------------------------ */

.dw-easyauth-wrap .dw-easyauth-form .dw-easyauth-btn,
.dw-ea-modal .dw-easyauth-form .dw-easyauth-btn,
.dw-ea-modal-body .dw-easyauth-form .dw-easyauth-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	height: 52px;
	min-height: 52px;
	margin: 0.35rem 0 0;
	padding: 0 20px;
	border: 1px solid var(--dw-auth-btn-bg, #2b7fff);
	border-radius: var(--dw-auth-field-radius, 8px);
	background: var(--dw-auth-btn-bg, #2b7fff);
	background-image: none;
	color: var(--dw-auth-btn-color, #fff);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
}

.dw-easyauth-wrap .dw-easyauth-form .dw-easyauth-btn:hover,
.dw-ea-modal .dw-easyauth-form .dw-easyauth-btn:hover,
.dw-ea-modal-body .dw-easyauth-form .dw-easyauth-btn:hover {
	background: var(--dw-auth-btn-hover, #1466d6);
	border-color: var(--dw-auth-btn-hover, #1466d6);
	color: var(--dw-auth-btn-color, #fff);
}

/* The label sits in its own span; keep it from inheriting theme type. */
.dw-easyauth-btn > span {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

/* Links below the card are real actions, not footnotes: centred, weighted,
   and sized like the secondary buttons in the references. */
.dw-easyauth-link {
	margin: 0;
	text-align: center;
	font-size: 0.92rem;
	font-weight: 600;
}

.dw-easyauth-link a {
	color: var(--dw-auth-btn-bg, #2b7fff);
	text-decoration: none;
}

.dw-easyauth-link a:hover {
	text-decoration: underline;
}

/* The sentence that closes a card: quiet question, accented answer. Placed
   after .dw-easyauth-link so it wins on the shared properties. */
.dw-easyauth-prompt {
	margin-top: 1.1rem;
	color: var(--dw-auth-muted, #61697a);
	font-weight: 400;
}

.dw-easyauth-prompt a {
	font-weight: 700;
}

.dw-easyauth-home {
	margin-top: 1.1rem;
	font-size: 0.85rem;
	font-weight: 400;
}

.dw-easyauth-home a {
	color: var(--dw-auth-muted, #61697a);
}

.dw-easyauth-btn:hover {
	opacity: 0.95;
}

.dw-easyauth-error {
	color: #d63638;
	background: #fcf0f1;
	padding: 0.5rem 0.75rem;
	border-radius: 4px;
	margin-bottom: 1rem;
}

.dw-easyauth-message {
	margin-bottom: 1rem;
}

.dw-easyauth-message-card {
	text-align: center;
	margin-top: 0.5rem;
}

.dw-easyauth-success {
	color: #00a32a;
	background: #edfaef;
	padding: 0.5rem 0.75rem;
	border-radius: 4px;
}

.dw-easyauth-link {
	margin-top: 1rem;
	text-align: center;
	font-size: 0.95em;
}

.dw-easyauth-link a {
	color: #2271b1;
	text-decoration: none;
}


.dw-easyauth-home {
	margin-top: 1.25rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	text-align: right;
	font-size: 0.8125rem;
}

.dw-easyauth-home a {
	text-decoration: none;
}

.dw-easyauth-home a:hover {
	text-decoration: underline;
}

/* Tablet: single column */
@media (max-width: 1024px) {
	.dw-easyauth-wrap {
		flex-direction: column;
		position: relative;
	}

	.dw-easyauth-split--bg {
		position: absolute;
		inset: 0;
		z-index: 0;
		min-height: 40%;
	}

	.dw-easyauth-split--form {
		position: relative;
		z-index: 1;
		padding: 1.5rem 1.25rem;
		flex: 1;
	}

	.dw-easyauth-card {
		max-width: 460px;
		padding: 2rem 1.75rem;
	}
}

/* Mobile */
@media (max-width: 782px) {
	.dw-easyauth-wrap {
		min-height: 100vh;
		min-height: 100dvh;
	}

	.dw-easyauth-split--form {
		padding: 1rem;
		padding-left: max(1rem, env(safe-area-inset-left));
		padding-right: max(1rem, env(safe-area-inset-right));
		padding-bottom: max(1rem, env(safe-area-inset-bottom));
	}

	.dw-easyauth-card {
		max-width: 100%;
		padding: 1.5rem 1.25rem;
	}

	.dw-easyauth-title {
		font-size: 1.25rem;
		margin-bottom: 1rem;
	}

	.dw-easyauth-link a {
		display: inline-block;
		min-height: 44px;
		line-height: 44px;
		padding: 0 0.5rem;
	}
}

@media (max-width: 480px) {
	.dw-easyauth-split--form {
		padding: 0.75rem;
	}

	.dw-easyauth-card {
		padding: 1.25rem 1rem;
	}
}

/* Paired fields stack once there is no room for two readable columns. */
@media (max-width: 600px) {
	.dw-easyauth-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.dw-easyauth-form .dw-easyauth-field--half {
		grid-column: 1 / -1;
	}
}