/**
 * THE LOGIN / REGISTER DIALOG.
 *
 * THE PALETTE IS NOT DECORATIVE, IT IS THE STANDING INSTRUCTION:
 *   #000000  the page behind the overlay, and the overlay's own backdrop
 *   #101010  EVERY dropdown, submenu, flyout and floating panel -- this dialog is a floating panel
 *   #2e2e34  borders, 1px
 *   #161616  a hovered row, one step off the panel
 *   #ffffff / #f2f2f4  text
 *
 * `background-color: #111111 !important` is set on the controls because a FROZEN sheet in this
 * theme already declares that on `input[type=text]`, `select`, `textarea` with `!important`. A rule
 * that is present and loses reads exactly like a rule that was never written (10.93), so this one
 * reproduces the winning selector and answers it with the same importance rather than raising
 * specificity against it, which cannot work.
 */

.musiveo-login-modal-open {
	overflow: hidden;
}

.musiveo-login-modal {
	position: fixed;
	inset: 0;
	z-index: 100100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

/*
 * THE SAME DIALOG, IN A PAGE.
 *
 * [musiveo_login_form] prints this element into the page instead of letting the
 * script build one on first use, so that a login page and the popup are the same node
 * rather than two implementations of one form. That element therefore carries
 * --inline, and this is the only thing that modifier changes:
 *
 *   - it is in normal flow, not position: fixed over the page;
 *   - it is visible, not display: none waiting for is-open;
 *   - it centres its own content rather than being centred by a fixed box;
 *   - the wrapper takes the page's width, capped so a wide viewport does not stretch
 *     a login form across it.
 *
 * Everything inside -- the dialog, the tabs, the fields, the buttons, the states -- is
 * the shared stylesheet and is deliberately NOT restated here. One surface, one set of
 * rules; only the outer box differs.
 *
 * .musiveo-login-form-inline is the shortcode's own wrapper, so the centering and the
 * width cap apply to the page slot and not to a dialog the script happens to append to
 * the body.
 */
.musiveo-login-modal--inline {
	position: static;
	inset: auto;
	display: block;
	padding: 0;
	pointer-events: none;
}

.musiveo-login-modal--inline .musiveo-login-modal__dialog {
	pointer-events: auto;
}

.musiveo-login-modal--inline .musiveo-login-modal__backdrop,
.musiveo-login-modal--inline .musiveo-login-modal__close {
	display: none;
}

.musiveo-login-form-inline {
	display: flex;
	justify-content: center;
	width: 100%;
	max-width: 56rem;
	margin: 0 auto;
}

/* The page form is a page element: it must not be reachable while it is hidden. */
.musiveo-login-modal--inline[aria-hidden="true"] {
	display: none;
}

.musiveo-login-modal.is-open {
	display: flex;
}

.musiveo-login-modal__backdrop {
	position: absolute;
	inset: 0;
	background: #000000;
	opacity: 0.7;
}

.musiveo-login-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 50rem;
	max-height: 90vh;
	overflow-y: auto;
	padding: 1.5rem;
	background: #101010;
	border: 1px solid #2e2e34;
	border-radius: 8px;
	color: #f2f2f4;

	/*
	 * THE DIALOG'S DEPTH.
	 *
	 * A modal that is the same darkness as the page behind it has no edge, and an edge is what tells
	 * a visitor where the surface begins. Two things supply it: the 1px border in #2e2e34, which is
	 * one step off #101010, and this shadow, which puts the panel ABOVE the content rather than
	 * merely on top of it. A dialog is a layer, and a layer is told by light, not by colour alone.
	 */
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* A SLIGHTLY TALLER DIALOG AND A TIGHTER TYPE SCALE READ AS "AN APP" RATHER THAN "A FORM". */
.musiveo-login-modal__dialog {
	padding: 2rem 1.75rem 1.5rem;
}

.musiveo-login-modal__dialog p {
	line-height: 1.5;
}

/* ----------------------------------------------------------------------- *
 * HOVER AND FOCUS STATES, WHICH ARE WHAT SEPARATE A CONTROL FROM A DECAL
 * ----------------------------------------------------------------------- */

.musiveo-login-modal__row input:hover {
	border-color: #3f3f48;
}

.musiveo-login-modal__row input:focus-visible {
	border-color: #ffffff;
}

.musiveo-login-modal__link:focus-visible,
.musiveo-login-modal__close:focus-visible,
.musiveo-login-modal__tab:focus-visible,
.musiveo-login-modal__submit:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/*
 * THE CLOSER IS QUIET AT REST AND OBVIOUS ON HOVER.
 *
 * `opacity` rather than a colour change, so it costs one property and cannot collide with a rule
 * that sets the button's background (10.93: a shorthand in the winner resets every longhand it
 * names, and `background` is the shorthand the theme uses on buttons).
 */
.musiveo-login-modal__close {
	opacity: 0.6;
	transition: opacity 0.12s ease-out;
}

.musiveo-login-modal__close:hover,
.musiveo-login-modal__close:focus-visible {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.musiveo-login-modal *,
	.musiveo-login-modal *::before,
	.musiveo-login-modal *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/*
 * A 1px border is not decoration here. #101010 on #000000 is a one-step difference and reads as
 * nothing at all without an edge (10.149).
 */

.musiveo-login-modal__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: #f2f2f4;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.musiveo-login-modal__close:hover,
.musiveo-login-modal__close:focus {
	background: #161616;
}

.musiveo-login-modal__title {
	margin: 0 0 1rem;
	font-size: 1.25rem;
	color: #ffffff;
}

/* THE TABS */

.musiveo-login-modal__tabs {
	display: flex;
	gap: 0.25rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid #2e2e34;
}

.musiveo-login-modal__tab {
	flex: 1 1 0;
	padding: 0.5rem 0.75rem;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: #f2f2f4;
	font: inherit;
	cursor: pointer;
}

/*
 * The accent is the only place a tint is allowed, and it is a BORDER rather than a fill -- a filled
 * active tab turns the control into a blue surface, which is exactly what the palette forbids.
 */
.musiveo-login-modal__tab.is-active {
	border-bottom-color: #ffffff;
	color: #ffffff;
}

/* THE FORMS */

.musiveo-login-modal__row {
	margin: 0 0 0.875rem;
}

.musiveo-login-modal__row label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.875rem;
}

.musiveo-login-modal__row input {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0.5rem 0.625rem;
	background-color: #000000 !important;
	border: 1px solid #2e2e34;
	border-radius: 4px;
	color: #ffffff;
	font: inherit;
}

.musiveo-login-modal__row input:focus {
	outline: 2px solid #ffffff;
	outline-offset: 1px;
}

.musiveo-login-modal__actions {
	margin: 1.25rem 0 0;
}

/*
 * THE SUBMIT BUTTON, AND WHY THE SELECTOR LOOKS REDUNDANT.
 *
 * MEASURED: the frozen theme carries
 *
 *     button[type="submit"] {
 *         background: conic-gradient(from 258deg, #7c06de, #6545b4, ...) border-box !important;
 *         min-width: 10rem !important;
 *     }
 *
 * which is a BARE ELEMENT+ATTRIBUTE selector at (0,1,1) **carrying !important**. A plain
 * `.musiveo-login-modal__submit` rule is (0,1,0) with no importance, so it lost on every property
 * and the dialog's submit rendered as a purple gradient. That is 10.93 in its pure form: a computed
 * style carrying only the declarations that LOST is a ONE-DECLARATION-LOSING story, not a selector
 * you picked wrong.
 *
 * **THE FIX IS TO REPRODUCE THE WINNING SELECTOR AND ANSWER IT WITH THE SAME IMPORTANCE.** Raising
 * specificity WITHOUT `!important` cannot work, and importance without out-specifying (0,1,1)
 * cannot either. Both halves are required, which is why the selector here repeats `button[type=...]`
 * that the class alone already covers.
 *
 * It is also the palette: an `!important` purple gradient on a dialog submit is exactly the
 * blue/violet surface the standing instruction rules out.
 */
button[type="submit"].musiveo-login-modal__submit {
	width: 100%;
	min-width: 0 !important;
	padding: 0.625rem 1rem;
	border: 0 !important;
	border-radius: 4px;
	/* A SHORTHAND, deliberately: the winner sets `background`, so only a shorthand can answer it. */
	background: #ffffff !important;
	background-image: none !important;
	color: #000000 !important;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.musiveo-login-modal__submit:hover,
.musiveo-login-modal__submit:focus {
	background: #e6e6e6 !important;
	background-image: none !important;
	color: #000000 !important;
}

/*
 * THE UA RESET.
 *
 * These are `<button>`s, not `<a href="#">`, deliberately (10.132): a fragment href is a promise
 * about navigation cancelled only by a script running one file away, so a deferred script, a JS
 * error, or a PJAX-swapped header turns a close button into a URL change. The cost of the button
 * is that the browser's own button styling has to be taken away by hand -- this is that cost, paid
 * once, rather than a bug that only appears when something fails to load.
 */

.musiveo-login-modal button {
	-webkit-appearance: none;
	appearance: none;
}

/* ----------------------------------------------------------------------- *
 * REMEMBER ME + LOST PASSWORD, ON ONE ROW
 * ----------------------------------------------------------------------- */

.musiveo-login-modal__inline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/*
 * A CHECKBOX WITH A LABEL, not a bare box. The frozen theme styles `input[type=text]` and
 * `input[type=email]` with `!important` but not checkboxes, so this is the reset that keeps the box
 * and its label on one line instead of on two.
 */
.musiveo-login-modal__check {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-size: 0.9rem;
	color: #f2f2f4;
	cursor: pointer;
}

.musiveo-login-modal__check input {
	width: auto;
	min-width: 0;
	margin: 0;
	/* Dark grey check icon instead of white, so it reads on the panel without screaming. */
	accent-color: #888888;
}

/*
 * OVERRIDE THE THEME'S CUSTOM CHECKBOX STYLES.
 *
 * The theme uses ppearance: none and a ::before pseudo-element with a
 * hardcoded white checkmark (#fff). That completely bypasses ccent-color.
 * We restore the native appearance for our checkbox so accent-color works,
 * and also provide a fallback for the theme's custom styling.
 */
.musiveo-login-modal .musiveo-login-modal__check input[type="checkbox"] {
	-webkit-appearance: auto;
	-moz-appearance: auto;
	appearance: auto;
	width: 1.125rem;
	height: 1.125rem;
	min-width: 1.125rem;
	margin-inline-end: 0.5rem;
	vertical-align: middle;
	border: 2px solid var(--text-secondary-color, #888);
	border-radius: 2px;
	background-color: transparent;
}

/* Force the checkmark to be dark grey in both native and custom rendering. */
.musiveo-login-modal .musiveo-login-modal__check input[type="checkbox"]:checked {
	background-color: #888888;
	border-color: #888888;
}

.musiveo-login-modal .musiveo-login-modal__check input[type="checkbox"]:checked::before {
	border-left-color: #888888 !important;
	border-bottom-color: #888888 !important;
	background-color: #888888 !important;
}

/* A LINK. Underlined on hover so it reads as a link, quiet at rest so it does not compete with the
   submit -- the vendor's own form uses `text-primary` for these, which on this theme resolves to the
   blue that the palette forbids on a surface. */

.musiveo-login-modal__link {
	padding: 0;
	border: 0;
	background: transparent;
	color: #ffffff;
	font: inherit;
	font-size: 0.9rem;
	text-decoration: none;
	cursor: pointer;
}

.musiveo-login-modal__link:hover,
.musiveo-login-modal__link:focus {
	text-decoration: underline;
}

a.musiveo-login-modal__link {
	color: #ffffff;
}

/* ----------------------------------------------------------------------- *
 * THE MESSAGES
 * ----------------------------------------------------------------------- */

/*
 * `.form-message` is the VENDOR'S class, kept because musiveo-login.js:438 reads
 * `form.querySelector('.form-message')` and prints its own errors into it. Having both classes on
 * one element means this dialog's messages and that file's toasts land in the same place.
 */
.musiveo-login-modal__message:empty {
	display: none;
}

.musiveo-login-modal__message {
	margin: 0 0 0.75rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid #2e2e34;
	border-radius: 4px;
	background: #161616;
	color: #f2f2f4;
	font-size: 0.9rem;
}

.musiveo-login-modal__message.is-error {
	border-color: #d63b3b;
	color: #ffffff;
}

.musiveo-login-modal__message.is-success {
	border-color: #2e2e34;
}

/*
 * THE ACTIVATION NOTICE, above the tabs, because it is about the ACCOUNT and not about the form
 * currently on screen -- putting it inside a form made it disappear the moment the tab changed.
 */
.musiveo-login-modal__notice {
	margin: 0 0 1rem;
	padding: 0.625rem 0.75rem;
	border: 1px solid #2e2e34;
	border-radius: 4px;
	background: #161616;
	color: #ffffff;
	font-size: 0.9rem;
}

.musiveo-login-modal__notice.is-success {
	border-color: #2f7d32;
}

.musiveo-login-modal__notice.is-error {
	border-color: #d63b3b;
}

/* ----------------------------------------------------------------------- *
 * TERMS, AND THE TAB SWITCH LINKS
 * ----------------------------------------------------------------------- */

.musiveo-login-modal__terms {
	margin: 0 0 0.75rem;
	color: #f2f2f4;
	font-size: 0.85rem;
}

.musiveo-login-modal__terms a {
	color: #ffffff;
}

.musiveo-login-modal__switch {
	margin: 0.875rem 0 0;
	color: #f2f2f4;
	font-size: 0.9rem;
	text-align: center;
}

/*
 * THE GOOGLE SLOT AND ITS "or" RULE.
 *
 * `.musiveo-separator` and `.musiveo-google-container` are the plugin's own classes, because
 * `musiveo-login.js:114` renders into the container and its stylesheet draws the rule. The styles
 * here are only the spacing the dialog needs around them.
 */
.musiveo-login-modal .musiveo-google-container {
	display: block;
	width: 100%;
	margin: 0 0 0.75rem;
}

/*
 * THE TURNSTILE WIDGET CONTAINER.
 *
 * The widget is a cross-origin iframe; its internals (background, border, checkbox)
 * are Cloudflare's. What we CAN do is make the parent blend:
 *   - match the dialog panel background (#101010)
 *   - remove any margin/padding that creates a visible box
 *   - `data-theme="dark"` on the container already tells Cloudflare to use dark mode
 */
.musiveo-login-modal .cf-turnstile.musiveo-turnstile {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0 0 0.75rem;
}

/* The Turnstile widget is an iframe. Ensure it renders as a horizontal
   rectangle (compact size) and blends with the dark panel. */
.musiveo-login-modal .cf-turnstile.musiveo-turnstile iframe {
	background: transparent !important;
	border: none !important;
	max-width: 100%;

}

/* Compact variant if we ever switch to data-size="compact". */
.musiveo-login-modal .cf-turnstile.musiveo-turnstile[data-size="compact"] {
	margin: 0 0 0.5rem;
}

.musiveo-login-modal .musiveo-separator {
	position: relative;
	margin: 1rem 0;
	text-align: center;
	color: #f2f2f4;
	font-size: 0.85rem;
}

.musiveo-login-modal .musiveo-separator::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: #2e2e34;
}

.musiveo-login-modal .musiveo-separator span {
	position: relative;
	padding: 0 0.625rem;
	background: #101010;
}

@media (prefers-reduced-motion: no-preference) {
	.musiveo-login-modal.is-open .musiveo-login-modal__dialog {
		animation: musiveo-login-modal-in 0.15s ease-out;
	}
}

@keyframes musiveo-login-modal-in {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}
}

/*
 * THE NOTE UNDER A FIELD, and the three-segment bar above it.
 *
 * The tick and the cross are TEXT characters in the note's own content, not a background
 * image and not a border colour, so the verdict survives print, forced-colours mode and a
 * stylesheet that fails to load. Colour reinforces; it never carries the meaning alone.
 */
.musiveo-login-modal__note {
	margin: .35rem 0 0;
	font-size: .8125rem;
	line-height: 1.4;
	min-height: 1.15em;
	color: #f2f2f4;
}
.musiveo-login-modal__note.is-ok {
	color: #4ade80;
}
.musiveo-login-modal__note.is-bad {
	color: #fca5a5;
}

.musiveo-login-modal__meter {
	display: flex;
	gap: 4px;
	margin: .4rem 0 0;
}
.musiveo-login-modal__meter i {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: #2e2e34;
}
.musiveo-login-modal__meter[data-level="1"] i:first-child,
.musiveo-login-modal__meter[data-level="2"] i:nth-child(-n+2) {
	background: #f59e0b;
}
.musiveo-login-modal__meter[data-level="3"] i {
	background: #4ade80;
}

/* The note and the bar are inserted after their field, so they need the row's spacing. */
.musiveo-login-modal__row + .musiveo-login-modal__note {
	margin-top: -.15rem;
}

/* Inline forms fill the page slot without a dialog scroll trap. */
.musiveo-login-modal--inline { width: 100%; min-width: 0; }
.musiveo-login-modal--inline .musiveo-login-modal__dialog { max-height: none; overflow: visible; }

.musiveo-login-modal__form { container-type: inline-size; }
@container (max-width: 299px) {
 .musiveo-login-modal .cf-turnstile.musiveo-turnstile { zoom: .8; }
}
@container (max-width: 249px) {
 .musiveo-login-modal .cf-turnstile.musiveo-turnstile { zoom: .75; }
}

.musiveo-login-modal__form .musiveo-login-modal__row input:is([type="text"], [type="email"], [type="password"]) {
 width: 100% !important;
 max-width: none !important;
 box-sizing: border-box;
}

/* Account controls share a centered, bounded reading column. */
.musiveo-login-modal__form { max-width: 28rem; margin-inline: auto; width: 100%; }
.musiveo-login-modal__title { text-align: center; }
.musiveo-login-modal__tabs { max-width: 28rem; margin-inline: auto; padding: .3rem; border: 1px solid #292929; border-radius: .9rem; background: #080808; }
.musiveo-login-modal .musiveo-login-modal__tab { border: 0; border-radius: .65rem; color: #aaa; }
.musiveo-login-modal .musiveo-login-modal__tab.is-active { background: #292929; color: #fff; }
.musiveo-login-modal__row input { min-height: 46px; border-radius: .75rem; }
.musiveo-login-modal__help { color: #aaa; font-size: .9rem; line-height: 1.55; margin-bottom: 1.25rem; }
.musiveo-login-modal .musiveo-login-modal__check input[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 20px; width: 20px !important; height: 20px !important; min-height: 20px !important; max-height: 20px; min-width: 20px; padding: 0; border: 1px solid #777; border-radius: 5px; background: #fff !important; margin: 0; }
.musiveo-login-modal .musiveo-login-modal__check input[type="checkbox"]::before { content: none !important; }
.musiveo-login-modal .musiveo-login-modal__check input[type="checkbox"]:checked { border-color: #fff; }
.musiveo-login-modal .musiveo-login-modal__check input[type="checkbox"]:checked::after { content: ""; position: absolute; inset: 3px 6px 5px 5px; border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.musiveo-login-modal .cf-turnstile.musiveo-turnstile { display: flex; justify-content: center; }
button[type="submit"].musiveo-login-modal__submit { min-height: 46px; border-radius: .75rem; }