/* =============================================================================
   Login-/Registrier-Oberflaeche im HookahX-Stil (shisha-anzeigen.de/login/)
   Werte 1:1 aus der Live-Messung von hookahx.de uebernommen:
     Feld   radius 10px, Rahmen #dcdfe5, Hoehe ~52px
     Fokus  Gold #eab11a + weicher Ring rgba(234,177,26,.18)
     Status gruen #1f9d55 / rot #d64545
   Alles unter body.sa-login-ui, damit nichts ausserhalb der Seite betroffen ist.
   !important ist noetig: Elementor/JetBlocks setzen ihre Werte mit hoher
   Spezifitaet (ID-Selektoren aus dem Kit).
   ============================================================================= */

body.sa-login-ui {
	--sa-gold: #eab11a;
	--sa-line: #dcdfe5;
	--sa-ok: #1f9d55;
	--sa-bad: #d64545;
	--sa-ink: #1a1d27;
	--sa-muted: #5d6478;
}

/* ---------- Eingabefelder (Login + Registrierung + Passwort-Reset) ---------- */
body.sa-login-ui .elementor-login input.elementor-field-textual,
body.sa-login-ui form.jet-register input.jet-register__input[type="text"],
body.sa-login-ui form.jet-register input.jet-register__input[type="email"],
body.sa-login-ui form.jet-register input.jet-register__input[type="password"] {
	/* WICHTIG: Die Registrierfelder sind ab Werk `inline-block` OHNE Breite und
	   schrumpfen dadurch auf ihre Inhaltsbreite — am Desktop unauffaellig, auf dem
	   Handy waren sie 210px statt 282px wie im Login. Deshalb hier explizit. */
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 52px !important;
	padding: 0 16px !important;
	border: 1px solid var(--sa-line) !important;
	border-radius: 10px !important;
	background: #fff !important;
	font-size: 15px !important;
	color: var(--sa-ink) !important;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box !important;
}

body.sa-login-ui .elementor-login input.elementor-field-textual::placeholder,
body.sa-login-ui form.jet-register input.jet-register__input::placeholder {
	color: #9aa0ab !important;
	opacity: 1;
}

body.sa-login-ui .elementor-login input.elementor-field-textual:focus,
body.sa-login-ui form.jet-register input.jet-register__input:focus {
	border-color: var(--sa-gold) !important;
	box-shadow: 0 0 0 3px rgba(234, 177, 26, .18) !important;
	outline: 0 !important;
}

/* Zustaende — mindestens so spezifisch wie die Basisregel, sonst gewinnt deren
   border-Kurzschreibweise und es wird nie gruen/rot. */
body.sa-login-ui form.jet-register input.jet-register__input.sa-ok { border-color: var(--sa-ok) !important; }
body.sa-login-ui form.jet-register input.jet-register__input.sa-ok:focus {
	border-color: var(--sa-ok) !important;
	box-shadow: 0 0 0 3px rgba(31, 157, 85, .16) !important;
}
body.sa-login-ui form.jet-register input.jet-register__input.sa-bad { border-color: var(--sa-bad) !important; }
body.sa-login-ui form.jet-register input.jet-register__input.sa-bad:focus {
	border-color: var(--sa-bad) !important;
	box-shadow: 0 0 0 3px rgba(214, 69, 69, .16) !important;
}

/* ---------- Breite an das Login angleichen ----------
   GEMESSEN: Beide Widget-Container haben 60px Seitenabstand — das Login reduziert
   sie unter 768px aber auf 24px, die Registrierung nicht. Ergebnis auf dem Handy:
   Login 330-48=282px, Registrierung 330-120=210px.
   NICHT per `width:100%` erschlagen — das haette die Abstaende ausgehebelt und die
   Registrierung waere ueberall 120px zu BREIT geworden. Stattdessen nur den
   Seitenabstand angleichen; Formular und Wrapper fuellen dann ihren Container. */
body.sa-login-ui .elementor-jet-register,
body.sa-login-ui form.jet-register {
	width: 100% !important;
	max-width: 100% !important;
}

@media (max-width: 767px) {
	body.sa-login-ui .elementor-widget-jet-register > .elementor-widget-container {
		margin-left: 24px !important;
		margin-right: 24px !important;
	}
}

/* ---------- Zeilenabstaende ---------- */
body.sa-login-ui form.jet-register p.jet-register__row,
body.sa-login-ui form.jet-register div.jet-register__row {
	margin: 0 0 18px !important;
	padding: 0 !important;
	width: 100% !important;
}
/* Alle Felder arbeiten mit Platzhaltern; die Beschriftungen im Markup sind leer.
   Einzige Ausnahme war „Bestaetige Dein Passwort" — die stand als einzige ueber
   dem Feld und wirkte wie ein Fehler. Der Platzhalter sagt dasselbe. */
body.sa-login-ui form.jet-register p.jet-register__row > label.jet-register__label {
	display: none !important;
}

/* Passwortfeld-Wrapper: das Auge sitzt rechts im Feld */
body.sa-login-ui form.jet-register .jet-register__wrapper {
	position: relative !important;
	display: block !important;
	width: 100% !important;
}
body.sa-login-ui form.jet-register .jet-register__wrapper input { padding-right: 48px !important; }
body.sa-login-ui form.jet-register .password-visibility__icon {
	position: absolute !important;
	right: 16px !important;
	top: 50% !important;
	transform: translateY(-50%);
	width: 18px !important;
	height: 18px !important;
	fill: #9aa0ab;
	cursor: pointer;
}

/* ---------- Passwort: Staerke-Balken (3 Segmente) ---------- */
body.sa-login-ui .sa-strength {
	display: flex;
	gap: 5px;
	margin: 10px 0 0;
}
body.sa-login-ui .sa-strength span {
	height: 4px;
	flex: 1 1 0;
	border-radius: 99px;
	background: #e5e7eb;
	transition: background .25s ease;
}
body.sa-login-ui .sa-strength.s1 span:nth-child(1)    { background: var(--sa-bad); }
body.sa-login-ui .sa-strength.s2 span:nth-child(-n+2) { background: var(--sa-gold); }
body.sa-login-ui .sa-strength.s3 span                 { background: var(--sa-ok); }

/* ---------- Passwort: Anforderungs-Checkliste ---------- */
body.sa-login-ui ul.sa-pwreq {
	list-style: none !important;
	margin: 11px 0 0 !important;
	padding: 0 !important;
	display: grid;
	gap: 6px;
}
body.sa-login-ui ul.sa-pwreq li {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 12.5px;
	line-height: 1.4;
	color: #8a909c;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: color .15s ease;
}
body.sa-login-ui ul.sa-pwreq li::before {
	content: "";
	width: 15px; height: 15px;
	flex: none;
	border-radius: 50%;
	border: 1.5px solid #d3d7de;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 9px 9px;
	transition: background-color .15s ease, border-color .15s ease;
}
body.sa-login-ui ul.sa-pwreq li.done { color: #1f7a44; }
body.sa-login-ui ul.sa-pwreq li.done::before {
	border-color: var(--sa-ok);
	background-color: var(--sa-ok);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-8'/%3E%3C/svg%3E");
}

/* Hinweis „Passwoerter stimmen nicht ueberein" */
body.sa-login-ui .sa-pwmatch {
	margin: 8px 0 0;
	font-size: 12.5px;
	color: var(--sa-bad);
	display: none;
}
body.sa-login-ui .sa-pwmatch.show { display: block; }

/* ---------- AGB-Zeile: war gequetscht (Text lief eng um die Checkbox) ---------- */
body.sa-login-ui form.jet-register .jet-privacy-policy {
	display: flex !important;
	flex-wrap: nowrap !important;   /* sonst rutscht der Text unter das Kaestchen */
	align-items: flex-start !important;
	gap: 10px !important;
	margin: 4px 0 20px !important;
}
body.sa-login-ui form.jet-register .jet-privacy-policy input[type="checkbox"] {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	margin: 1px 0 0 !important;
	flex: 0 0 18px !important;
	accent-color: var(--sa-gold);
}
/* Die Beschriftung hier MUSS sichtbar bleiben (Pflichtangabe) — die
   Ausblend-Regel weiter oben gilt nur fuer p.jet-register__row. */
body.sa-login-ui form.jet-register .jet-privacy-policy label.jet-register__label {
	display: block !important;
	flex: 1 1 auto !important;
	/* padding MUSS zurueckgesetzt werden: das Theme vererbt hier padding-top:30px,
	   dadurch stand der Text 30px unter dem Kaestchen, obwohl beide Boxen buendig
	   beginnen (gemessen: Kaestchen y=794, Label y=793). */
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--sa-muted) !important;
	text-align: left !important;
}

/* ---------- Buttons ---------- */
body.sa-login-ui form.jet-register button.jet-register__submit,
body.sa-login-ui .elementor-login button.elementor-button {
	height: 52px !important;
	border-radius: 10px !important;
	background: var(--sa-gold) !important;
	color: #1a1d27 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: .2px;
	border: 0 !important;
	width: 100% !important;
	transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.sa-login-ui form.jet-register button.jet-register__submit:hover,
body.sa-login-ui .elementor-login button.elementor-button:hover {
	background: #f2bb33 !important;
	box-shadow: 0 8px 22px rgba(234, 177, 26, .36) !important;
	transform: translateY(-1px);
}
/* „anmelden" war kleingeschrieben — optisch angleichen ohne Textaenderung */
body.sa-login-ui .elementor-login button.elementor-button .elementor-button-text {
	text-transform: capitalize;
}

/* ---------- Fehlermeldung (JetBlocks/Login) ---------- */
body.sa-login-ui .jet-register__message,
body.sa-login-ui .sa-login-error {
	margin: 0 0 16px !important;
	padding: 11px 14px !important;
	border-radius: 10px !important;
	background: rgba(214, 69, 69, .08) !important;
	border: 1px solid rgba(214, 69, 69, .28) !important;
	color: #a12a2a !important;
	font-size: 13.5px !important;
	line-height: 1.5 !important;
}

/* ---------- „Passwort vergessen" ---------- */
body.sa-login-ui .elementor-login .elementor-lost-password a,
body.sa-login-ui .elementor-login a.elementor-lost-password {
	font-size: 13.5px !important;
	color: var(--sa-muted) !important;
	text-decoration: none !important;
	border-bottom: 1px solid #d8dbe0;
	padding-bottom: 1px;
}
body.sa-login-ui .elementor-login .elementor-lost-password a:hover {
	color: var(--sa-ink) !important;
	border-color: var(--sa-gold);
}

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
	body.sa-login-ui .elementor-login input.elementor-field-textual,
	body.sa-login-ui form.jet-register input.jet-register__input,
	body.sa-login-ui form.jet-register button.jet-register__submit,
	body.sa-login-ui .elementor-login button.elementor-button {
		height: 48px !important;
	}
}