/**
 * Register account step: same identifier UX as login (domain hints, static label, pill input).
 * Loaded after login-page.css on page-register only.
 */

body.page-register .register-account-step__form.login-form {
    --login-identifier-row-height: 48px;
}

/* Dual-Label E-Mail / Telefon — klickbar wie Login (forms.css: kein Checkbox-Flex auf label) */
body.page-register .register-account-step__form.login-form .wizard-form-group.login-identifier-group > label.login-identifier-dual-label {
    display: block !important;
    min-height: 0;
    min-width: 0 !important;
    padding: 0;
    margin: 0 0 var(--login-label-gap, 6px) 0;
    line-height: 1.3;
    cursor: default !important;
    user-select: none;
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
    gap: 0 !important;
    align-items: stretch !important;
}

body.page-register .register-account-step__form .login-identifier-dual-label__row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    min-height: 0;
}

body.page-register .register-account-step__form .login-identifier-dual-label__lead {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
    line-height: 1.3;
    font-size: 14px;
}

body.page-register .register-account-step__form .login-identifier-dual-label__switcher {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    flex: 0 1 auto;
    min-width: 0;
    white-space: normal;
    gap: 0.28em;
}

body.page-register .register-account-step__form .login-identifier-dual-label__lead .login-identifier-label-meta {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 5px;
    margin: 0;
    flex: 0 0 auto;
}

body.page-register .register-account-step__form .login-identifier-dual-label__sep {
    font-weight: 500;
    color: #6b7280;
    pointer-events: none;
    line-height: inherit;
    font-size: inherit;
    flex-shrink: 0;
    white-space: nowrap;
    margin: 0 0.28em;
}

body.page-register .register-account-step__form .login-identifier-dual-label__part {
    flex-shrink: 0;
    cursor: pointer !important;
    pointer-events: auto !important;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
    font-weight: 600;
    color: #4b5563;
    line-height: inherit;
    font-size: inherit;
}

body.page-register .register-account-step__form .login-identifier-dual-label__part:hover,
body.page-register .register-account-step__form .login-identifier-dual-label__part:focus {
    outline: none;
    color: #4f46e5;
    text-decoration-color: rgba(79, 70, 229, 0.45);
}

body.page-register .register-account-step__form .login-identifier-dual-label__part--active {
    color: #1a1a1a;
    text-decoration-color: rgba(17, 24, 39, 0.35);
}

body.page-register .register-account-step__form .login-identifier-dual-label__switcher .login-identifier-dual-label__part[role="button"],
body.page-register .register-account-step__form .login-identifier-dual-label__switcher .login-identifier-dual-label__part[role="button"]:hover,
body.page-register .register-account-step__form .login-identifier-dual-label__switcher .login-identifier-dual-label__part[role="button"]:focus {
    min-height: 0 !important;
    min-width: 0 !important;
    height: auto !important;
}

body.page-register .register-account-step__form .login-identifier-dual-label .required-asterisk {
    color: #dc2626;
    font-weight: 500;
    pointer-events: none;
}

body.dark-mode.page-register .register-account-step__form .login-identifier-dual-label {
    color: #f3f4f6;
}

body.dark-mode.page-register .register-account-step__form .login-identifier-dual-label__sep {
    color: #9ca3af;
}

body.dark-mode.page-register .register-account-step__form .login-identifier-dual-label__part {
    color: #9ca3af;
}

body.dark-mode.page-register .register-account-step__form .login-identifier-dual-label__part--active {
    color: #f9fafb;
}

/* Domain hint chips: beat wizard underline/button defaults (spacing from login-page.css) */
body.page-register .register-account-step__form .login-email-domain-hints__choice {
    margin: 0;
    padding: 0;
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1a1a1a;
    letter-spacing: -0.01em;
    cursor: pointer;
    text-decoration: none;
    line-height: inherit;
    border-radius: 0;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
    width: auto;
    min-height: 0;
}

body.page-register .register-account-step__form .login-email-domain-hints__choice:hover,
body.page-register .register-account-step__form .login-email-domain-hints__choice:focus-visible {
    color: #1a1a1a;
    background: transparent !important;
    text-decoration: underline;
    text-decoration-color: #9ca3af;
    text-underline-offset: 2px;
    outline: none;
    box-shadow: none;
}

body.dark-mode.page-register .register-account-step__form .login-email-domain-hints__choice {
    color: #e5e7eb;
}

body.dark-mode.page-register .register-account-step__form .login-email-domain-hints__choice:hover,
body.dark-mode.page-register .register-account-step__form .login-email-domain-hints__choice:focus-visible {
    color: #f9fafb;
    text-decoration-color: rgba(255, 255, 255, 0.45);
}

/* Domain-Hinweise: Abstand unter der E-Mail-Pille wie auf der Login-Seite */
body.page-register .register-account-step__form .login-identifier-group .login-email-domain-hints.is-visible {
    margin-top: var(--login-label-gap, 6px) !important;
    margin-bottom: var(--login-label-gap, 6px) !important;
}

body.page-register .register-account-step__form .login-identifier-group .login-email-domain-hints.is-hidden {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.page-register .register-account-step__form #register-identifier-field-reveal.login-field-reveal--identifier.is-visible {
    margin-bottom: 0 !important;
}

body.page-register .register-account-step__form .login-identifier-group .login-identifier-input-row {
    display: flex;
    align-items: center;
    gap: 0;
}

body.page-register .register-account-step__form .login-identifier-field-with-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

body.page-register .register-account-step__form .login-identifier-field-with-actions .login-identifier-input-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

body.page-register .register-account-step__form .login-identifier-group .login-identifier-input-wrap {
    position: relative;
    flex: 1 1 auto;
    transition: max-width 220ms ease;
    max-width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, auto);
    align-items: stretch;
}

/* E-Mail und Telefon teilen eine Zelle — nie untereinander stapeln */
body.page-register .register-account-step__form .login-identifier-email-slot,
body.page-register .register-account-step__form .login-identifier-phone-slot {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

/* Modus-Fallback zusätzlich zu [hidden] */
body.page-register .register-account-step__form .login-identifier-input-wrap:not(.login-identifier-input-wrap--phone-mode) .login-identifier-phone-slot {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow: hidden !important;
    max-height: 0 !important;
}

body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode .login-identifier-email-slot {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    overflow: hidden !important;
    max-height: 0 !important;
}

body.page-register .register-account-step__form .login-identifier-group .login-identifier-input-row .input-field {
    flex: 1 1 auto;
    transition: none;
    padding-right: 40px;
    min-height: var(--login-identifier-row-height, 48px);
    box-sizing: border-box;
}

body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode .login-identifier-phone-container.phone-input-container {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    position: relative;
    border-radius: 0 9999px 9999px 9999px;
    border: 1.5px solid #e9ecef;
    background: #fff;
    min-height: var(--login-identifier-row-height, 48px);
    max-height: var(--login-identifier-row-height, 48px);
    box-sizing: border-box;
    outline: none;
    overflow: visible;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode .login-identifier-phone-container .phone-input-inner {
    align-items: center;
}

body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode .login-identifier-phone-container .phone-country-btn {
    align-self: center;
}

body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode .login-identifier-phone-container .phone-number-input.input-field {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none;
    min-height: 0;
    height: auto;
    align-self: center;
    line-height: 1.25;
    padding: 0 40px 0 8px;
    border-radius: 0;
    background: transparent !important;
}

body.page-register .register-account-step__form .login-identifier-email-slot[hidden],
body.page-register .register-account-step__form .login-identifier-phone-slot[hidden] {
    display: none !important;
}

body.page-register .register-account-step__form .login-identifier-email-slot:not([hidden]),
body.page-register .register-account-step__form .login-identifier-phone-slot:not([hidden]) {
    flex: 1 1 auto;
    min-width: 0;
}

body.page-register .register-account-step__form .login-identifier-group .login-identifier-input-row .login-identifier-email-slot .input-field {
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    border-radius: 0 9999px 9999px 9999px;
}

body.page-register .register-account-step__form .login-identifier-input-wrap:not(.login-identifier-input-wrap--phone-mode):not(:has(.input-field.valid)) .login-identifier-email-slot .input-field:focus {
    outline: none;
    border: none !important;
    box-shadow: none !important;
}

body.page-register .register-account-step__form .login-identifier-input-wrap:not(.login-identifier-input-wrap--phone-mode):not(:has(.input-field.valid)):focus-within {
    outline: none;
    border-color: #1a1a1a;
    box-shadow:
        0 0 0 3px rgba(26, 26, 26, 0.1),
        0 2px 10px rgba(26, 26, 26, 0.08);
}

/* Ungültig: rote Outline (E-Mail im Identifier-Feld) — Farben aus register-page.css */
body.page-register .register-account-step__form .login-identifier-input-wrap:not(.login-identifier-input-wrap--phone-mode):has(.input-field.invalid) {
    border-color: var(--register-invalid-border-color, #ef4444) !important;
    box-shadow: var(--register-invalid-outline) !important;
}

body.page-register .register-account-step__form .login-identifier-group .login-identifier-input-row .login-identifier-email-slot .input-field.invalid,
body.page-register .register-account-step__form .login-identifier-input-wrap:not(.login-identifier-input-wrap--phone-mode):has(.input-field.invalid) .login-identifier-email-slot .input-field {
    border: none !important;
    box-shadow: none !important;
}

/* Gültig / Prüfung: Ring nur in register-page.css (Variablen), inneres Input bleibt ohne eigenen Schatten */

body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode .login-identifier-phone-container:focus-within {
    outline: none;
    border-color: #1a1a1a;
    box-shadow:
        0 0 0 3px rgba(26, 26, 26, 0.1),
        0 2px 10px rgba(26, 26, 26, 0.08) !important;
}

/* Ungültig: rote Outline (Telefon-Pille) */
body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode .login-identifier-phone-container.invalid,
body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode .login-identifier-phone-container:has(.phone-number-input.invalid) {
    border-color: var(--register-invalid-border-color, #ef4444) !important;
    box-shadow: var(--register-invalid-outline) !important;
}

body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode .login-identifier-phone-container.invalid:focus-within,
body.page-register .register-account-step__form .login-identifier-input-wrap--phone-mode .login-identifier-phone-container:has(.phone-number-input.invalid):focus-within {
    border-color: var(--register-invalid-border-color, #ef4444) !important;
    box-shadow: var(--register-invalid-outline) !important;
}

/* Gültig / Prüfung Telefon: register-page.css */

/* Dark mode: Farben aus register-page.css (#registerForm Variablen) */
body.page-register .register-account-step__form .login-clear-btn {
    border: 0;
    outline: none;
    background: transparent;
    box-shadow: none;
    color: #64748b;
    width: var(--password-field-clear-size, 32px);
    height: var(--password-field-clear-size, 32px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    flex: 0 0 var(--password-field-clear-size, 32px);
}

body.page-register .register-account-step__form .login-identifier-input-wrap {
    --password-field-action-inset: 8px;
    --password-field-clear-size: 32px;
}

body.page-register .register-account-step__form .login-clear-btn--identifier {
    position: absolute;
    right: var(--password-field-action-inset, 8px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

body.page-register .register-account-step__form .login-clear-btn--password {
    position: absolute;
    right: var(--password-field-action-inset, 8px);
    top: 50%;
    transform: translateY(-50%);
    width: var(--password-field-clear-size, 32px);
    height: var(--password-field-clear-size, 32px);
    flex: 0 0 var(--password-field-clear-size, 32px);
    z-index: 3;
}

body.page-register .register-account-step__form .login-field-reveal {
    transform-origin: top;
}

body.page-register .register-account-step__form .login-field-reveal--margin-bottom {
    transition: max-height 220ms ease, opacity 180ms ease, transform 220ms ease, margin-bottom 220ms ease;
}

body.page-register .register-account-step__form .login-field-reveal.is-hidden {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    margin-top: 0;
    margin-bottom: 0;
}

body.page-register .register-account-step__form .login-field-reveal.is-visible {
    overflow: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

body.page-register .register-account-step__form .login-field-reveal--password.is-visible {
    /* Wie register-step-reveal + Login (#login-password-field-wrap): Label, Input, Meter, Validierung */
    max-height: 560px;
}

body.page-register .register-account-step__form > .wizard-form-group:not(.remember-me-row) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-bottom: 0;
    flex-shrink: 0;
}

body.page-register .register-account-step__form > .wizard-form-group:not(.remember-me-row) .validation-message {
    margin-top: 6px;
}

/* Label→Input: Rhythmus kommt aus login-page.css (login + register gemeinsam) */