/* Humbel Audio – Konto: Popup und «Mein Profil». Farben kommen vom Theme, mit Ersatzwerten. */

.ha-modal,
.ha-profil,
.ha-kaufen {
	--ha-text: var(--wp--preset--color--contrast, #111113);
	--ha-text-2: var(--wp--preset--color--contrast-2, #4a4a4f);
	--ha-text-3: var(--wp--preset--color--contrast-3, #6e6e73);
	--ha-grund: var(--wp--preset--color--base, #fff);
	--ha-flaeche: var(--wp--preset--color--base-2, #f4f4f3);
	--ha-linie: var(--wp--preset--color--line, #e3e3e1);
	--ha-ok: #17673b;
	--ha-ok-grund: #e7f4ec;
	--ha-fehler: #a4231b;
	--ha-fehler-grund: #fcebe9;
	box-sizing: border-box;
}

.ha-modal *,
.ha-modal *::before,
.ha-modal *::after,
.ha-profil *,
.ha-profil *::before,
.ha-profil *::after,
.ha-kaufen * {
	box-sizing: inherit;
}

/* ---------- Popup ---------- */

html.ha-modal-offen {
	overflow: hidden;
}

.ha-modal {
	width: min(27rem, calc(100vw - 1.5rem));
	max-width: none;
	max-height: calc(100dvh - 1.5rem);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: var(--ha-grund);
	color: var(--ha-text);
	box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.35), 0 0 0 1px rgb(0 0 0 / 0.06);
	overflow: auto;
	overscroll-behavior: contain;
}

.ha-modal::backdrop {
	background: rgb(17 17 19 / 0.45);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

@media (prefers-reduced-motion: no-preference) {
	.ha-modal[open] {
		animation: ha-modal-ein 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.ha-modal[open]::backdrop {
		animation: ha-blende-ein 0.28s ease;
	}
}

@keyframes ha-modal-ein {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
}

@keyframes ha-blende-ein {
	from {
		opacity: 0;
	}
}

.ha-modal__panel {
	position: relative;
	padding: 2.25rem 1.75rem 1.75rem;
}

@media (max-width: 420px) {
	.ha-modal__panel {
		padding: 2rem 1.25rem 1.25rem;
	}
}

.ha-modal__schliessen {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ha-text-2);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ha-modal__schliessen:hover {
	background: var(--ha-flaeche);
	color: var(--ha-text);
}

.ha-modal__kopf {
	margin-bottom: 1.4rem;
	text-align: center;
}

.ha-modal__logo {
	display: block;
	width: 3.25rem;
	height: auto;
	margin: 0 auto 0.85rem;
}

.ha-modal__titel {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.ha-modal__text {
	margin: 0.45rem auto 0;
	max-width: 22rem;
	color: var(--ha-text-2);
	font-size: 0.9375rem;
	line-height: 1.45;
}

.ha-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	margin-bottom: 1.4rem;
	padding: 4px;
	border-radius: 999px;
	background: var(--ha-flaeche);
}

.ha-tabs[hidden] {
	display: none;
}

.ha-tabs [role="tab"] {
	padding: 0.55rem 0.75rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--ha-text-2);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ha-tabs [role="tab"][aria-selected="true"] {
	background: var(--ha-grund);
	color: var(--ha-text);
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
}

.ha-form {
	display: grid;
	gap: 1rem;
}

.ha-form[hidden] {
	display: none;
}

.ha-form p {
	margin: 0;
}

.ha-feld {
	display: grid;
	gap: 0.35rem;
	min-width: 0;
}

.ha-feld label {
	color: var(--ha-text);
	font-size: 0.8125rem;
	font-weight: 600;
}

.ha-feld input {
	width: 100%;
	margin: 0;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--ha-linie);
	border-radius: 10px;
	background: var(--ha-grund);
	color: var(--ha-text);
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ha-feld input:focus {
	border-color: var(--ha-text);
	outline: none;
	box-shadow: 0 0 0 3px rgb(17 17 19 / 0.08);
}

.ha-feld-paar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

@media (max-width: 420px) {
	.ha-feld-paar {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}

.ha-passwort {
	position: relative;
}

.ha-passwort input {
	padding-right: 2.9rem;
}

.ha-passwort__zeigen {
	position: absolute;
	top: 50%;
	right: 0.3rem;
	display: grid;
	place-items: center;
	width: 2.3rem;
	height: 2.3rem;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--ha-text-3);
	cursor: pointer;
	transform: translateY(-50%);
}

.ha-passwort__zeigen:hover,
.ha-passwort__zeigen[aria-pressed="true"] {
	color: var(--ha-text);
}

.ha-hinweis {
	color: var(--ha-text-3);
	font-size: 0.8125rem;
}

.ha-zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	font-size: 0.875rem;
}

.ha-haken {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--ha-text-2);
	cursor: pointer;
}

.ha-haken input {
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--ha-text);
}

.ha-textlink {
	padding: 0;
	border: 0;
	background: none;
	color: var(--ha-text);
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.ha-textlink:hover {
	text-decoration: none;
}

.ha-textlink:disabled {
	opacity: 0.6;
	cursor: progress;
}

.ha-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.85rem 1.25rem;
	border: 1px solid var(--ha-text);
	border-radius: 999px;
	background: var(--ha-text);
	color: var(--ha-grund);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.ha-knopf:hover,
.ha-knopf:focus-visible {
	color: var(--ha-grund);
	opacity: 0.86;
}

.ha-knopf:active {
	transform: translateY(1px);
}

.ha-knopf:disabled {
	opacity: 0.6;
	cursor: progress;
}

.ha-knopf.is-busy::after {
	content: "";
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: ha-drehen 0.7s linear infinite;
}

@keyframes ha-drehen {
	to {
		transform: rotate(360deg);
	}
}

.ha-knopf--klein {
	width: auto;
	padding: 0.6rem 1.15rem;
	font-size: 0.875rem;
}

.ha-wechsel {
	color: var(--ha-text-2);
	font-size: 0.875rem;
	text-align: center;
}

.ha-klein {
	color: var(--ha-text-3);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.ha-klein a {
	color: inherit;
}

.ha-geschlossen {
	padding: 1rem 1.1rem;
	border-radius: 12px;
	background: var(--ha-flaeche);
	color: var(--ha-text-2);
	font-size: 0.9375rem;
}

.ha-meldung {
	padding: 0.7rem 0.85rem;
	border-radius: 10px;
	font-size: 0.875rem;
	line-height: 1.45;
}

.ha-meldung[hidden] {
	display: none;
}

.ha-meldung--fehler {
	background: var(--ha-fehler-grund);
	color: var(--ha-fehler);
}

.ha-meldung--ok {
	background: var(--ha-ok-grund);
	color: var(--ha-ok);
}

.ha-honig {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ha-modal :focus-visible,
.ha-profil :focus-visible {
	outline: 2px solid var(--ha-text);
	outline-offset: 2px;
}

/* ---------- Kundenbereich «Mein Profil» ---------- */

.ha-profil {
	display: grid;
	gap: clamp(2.5rem, 6vw, 4rem);
	color: var(--ha-text);
}

.ha-profil p {
	margin: 0;
}

.ha-profil__konto {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--ha-linie);
}

.ha-profil__gruss {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.ha-profil__angemeldet {
	margin-top: 0.2rem !important;
	color: var(--ha-text-2);
	font-size: 0.9375rem;
}

.ha-profil__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	font-size: 0.9375rem;
}

.ha-profil__meldung {
	flex-basis: 100%;
}

.ha-profil__titel {
	margin: 0 0 1rem;
	color: var(--ha-text-3);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ha-liste {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ha-linie);
	list-style: none;
}

.ha-eintrag {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.85rem 2rem;
	margin: 0;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--ha-linie);
}

.ha-eintrag__text {
	flex: 1 1 16rem;
	min-width: 0;
}

.ha-eintrag__titel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.0625rem;
	font-weight: 600;
}

.ha-eintrag__meta {
	margin-top: 0.2rem !important;
	color: var(--ha-text-2);
	font-size: 0.875rem;
}

.ha-eintrag__hinweis {
	margin-top: 0.35rem !important;
	color: var(--ha-text-3);
	font-size: 0.875rem;
}

.ha-eintrag__folgt {
	color: var(--ha-text-3);
	font-size: 0.875rem;
}

.ha-leer {
	padding: 1.4rem 1.5rem;
	border: 1px dashed var(--ha-linie);
	border-radius: 14px;
	color: var(--ha-text-2);
	font-size: 0.9375rem;
}

.ha-status {
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ha-status--aktiv {
	background: var(--ha-ok-grund);
	color: var(--ha-ok);
}

.ha-status--abgelaufen {
	background: var(--ha-flaeche);
	color: var(--ha-text-3);
}

.ha-status--gesperrt {
	background: var(--ha-fehler-grund);
	color: var(--ha-fehler);
}

.ha-schluessel {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	max-width: 100%;
	padding: 0.3rem 0.3rem 0.3rem 0.9rem;
	border: 1px solid var(--ha-linie);
	border-radius: 999px;
	background: var(--ha-flaeche);
}

.ha-schluessel__wert {
	overflow: hidden;
	padding: 0;
	background: none;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ha-schluessel__kopieren {
	flex: none;
	padding: 0.35rem 0.85rem;
	border: 0;
	border-radius: 999px;
	background: var(--ha-grund);
	color: var(--ha-text);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 500;
	cursor: pointer;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.1);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ha-schluessel__kopieren.is-kopiert {
	background: var(--ha-text);
	color: var(--ha-grund);
}

/* ---------- Kaufen ---------- */

/* Preis und Knopf beim Produkt (Shortcode [humbel_kaufen]) */
.ha-kaufen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: 1.75rem;
	padding: 1.1rem 1.1rem 1.1rem 1.4rem;
	border: 1px solid var(--ha-linie);
	border-radius: 18px;
	background: var(--ha-grund);
	color: var(--ha-text);
}

.ha-kaufen p {
	margin: 0;
}

.ha-kaufen__angebot {
	flex: 1 1 12rem;
	min-width: 0;
}

.ha-kaufen__preis {
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.ha-kaufen__text {
	margin-top: 0.2rem !important;
	color: var(--ha-text-2);
	font-size: 0.875rem;
	line-height: 1.45;
}

.ha-kaufen .ha-knopf {
	flex: none;
	text-decoration: none;
}

@media (max-width: 480px) {
	.ha-kaufen .ha-knopf {
		width: 100%;
	}
}

.ha-kaufen-hinweis {
	padding: 0.8rem 1rem;
	border: 1px dashed var(--wp--preset--color--accent, #9a6a00);
	border-radius: 12px;
	color: var(--wp--preset--color--contrast-2, #4a4a4f);
	font-size: 0.875rem;
}

/* Bestätigung in «Mein Profil» */
.ha-kauf {
	display: grid;
	gap: 1rem;
	max-width: 36rem;
}

.ha-kauf .ha-profil__titel {
	margin-bottom: 0;
}

.ha-kauf__karte {
	display: grid;
	gap: 1.1rem;
	padding: 1.5rem;
	border: 1px solid var(--ha-linie);
	border-radius: 18px;
	background: var(--ha-grund);
	box-shadow: 0 18px 40px -28px rgb(0 0 0 / 0.35);
}

.ha-kauf__zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--ha-linie);
}

.ha-kauf__produkt {
	font-size: 1.125rem;
	font-weight: 600;
}

.ha-kauf__angebot {
	margin-top: 0.2rem !important;
	color: var(--ha-text-2);
	font-size: 0.875rem;
}

.ha-kauf__preis {
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.ha-kauf__hinweis {
	padding: 0.7rem 0.85rem;
	border-radius: 10px;
	background: var(--ha-flaeche);
	color: var(--ha-text-2);
	font-size: 0.875rem;
}

.ha-kauf__agb {
	align-items: flex-start;
	font-size: 0.9375rem;
}

.ha-kauf__agb input {
	margin-top: 0.2rem;
}

.ha-kauf__agb a {
	color: var(--ha-text);
}

.ha-kauf__zurueck {
	font-size: 0.875rem;
}

.ha-profil__kaufmeldung {
	margin: 0;
	font-size: 0.9375rem;
}

/* Lizenzliste: neu gekauft, Quittung, Geräte, Kaufliste */
.ha-eintrag--neu {
	margin: 0 -1rem;
	padding-right: 1rem;
	padding-left: 1rem;
	border-radius: 14px;
	background: var(--ha-flaeche);
	/* Leicht grün getönt, im hellen wie im dunklen Farbschema lesbar */
	background: color-mix(in srgb, var(--ha-ok) 16%, transparent);
}

.ha-eintrag__meta a {
	color: inherit;
	text-underline-offset: 0.2em;
}

.ha-profil__fussnote {
	margin-top: 0.9rem !important;
}

.ha-eintrag__kauf {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.ha-eintrag__preis {
	font-weight: 600;
	white-space: nowrap;
}