/* ============================================================
   User Registration Plugin — Login + Register Forms
   Vorbild: templates/registration.html (Tailwind-Tokens 1:1 in CSS)

   Plugin-HTML wird vom „User Registration"-Plugin gerendert; wir
   überschreiben mit Body-Prefix + !important gegen Plugin-Defaults.

   Klassen-Konventionen (Plugin):
     .ur-frontend-form              → Container (mit .login bei Login)
     form.user-registration-form    → Form-Wrapper
     .ur-form-row > .ur-form-grid   → Layout-Wrapper
     .user-registration-form-row    → Field-Wrapper (mit data-field="…")
     .input-wrapper                 → Span um <input>
     .user-registration-Input       → <input> selbst
     button.ur-submit-button        → Submit-Button
     .user-registration-register a  → "Register"-Link
   ============================================================ */

/* ── Outer-Section (Kadence-Row, die das Form enthält) ────── */
/* Login-Section:    bg-white,    py-14 lg:py-16
   Register-Section: bg-slate-50, pt-10 pb-14 / lg:pt-12 lg:pb-16
   Match per :has() — kein zusätzliches Klassen-Setup nötig.   */

body .wp-block-kadence-rowlayout:has(.ur-frontend-form.login),
body .alignfull:has(> .kt-row-column-wrap .ur-frontend-form.login),
body .kt-row-column-wrap:has(.ur-frontend-form.login) {
    background: #ffffff !important;
    padding-top: 3.5rem !important;                  /* py-14 */
    padding-bottom: 3.5rem !important;
}
@media (min-width: 1024px) {
    body .wp-block-kadence-rowlayout:has(.ur-frontend-form.login),
    body .alignfull:has(> .kt-row-column-wrap .ur-frontend-form.login),
    body .kt-row-column-wrap:has(.ur-frontend-form.login) {
        padding-top: 4rem !important;                /* lg:py-16 */
        padding-bottom: 4rem !important;
    }
}

body .wp-block-kadence-rowlayout:has(.ur-frontend-form:not(.login)),
body .alignfull:has(> .kt-row-column-wrap .ur-frontend-form:not(.login)),
body .kt-row-column-wrap:has(.ur-frontend-form:not(.login)) {
    background: #f8fafc !important;                  /* slate-50 */
    padding-top: 2.5rem !important;                  /* pt-10 */
    padding-bottom: 3.5rem !important;               /* pb-14 */
}
@media (min-width: 1024px) {
    body .wp-block-kadence-rowlayout:has(.ur-frontend-form:not(.login)),
    body .alignfull:has(> .kt-row-column-wrap .ur-frontend-form:not(.login)),
    body .kt-row-column-wrap:has(.ur-frontend-form:not(.login)) {
        padding-top: 3rem !important;                /* lg:pt-12 */
        padding-bottom: 4rem !important;             /* lg:pb-16 */
    }
}

/* Inner-Container max-w-3xl (Form-Bereich) — die Spalte um den Form */
body .wp-block-kadence-column:has(.ur-frontend-form),
body .kt-inside-inner-col:has(.ur-frontend-form) {
   /*  max-width: 48rem !important;  */                    /* max-w-3xl */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;                   /* px-4 */
    padding-right: 1rem !important;
}
@media (min-width: 640px) {
    body .wp-block-kadence-column:has(.ur-frontend-form),
    body .kt-inside-inner-col:has(.ur-frontend-form) {
        padding-left: 1.5rem !important;             /* sm:px-6 */
        padding-right: 1.5rem !important;
    }
}
@media (min-width: 1024px) {
    body .wp-block-kadence-column:has(.ur-frontend-form),
    body .kt-inside-inner-col:has(.ur-frontend-form) {
        padding-left: 2rem !important;               /* lg:px-8 */
        padding-right: 2rem !important;
    }
}

/* Section-Description-Paragraph zwischen Heading und Form (graue Hilfetext) */
body .kt-inside-inner-col:has(.ur-frontend-form) > p,
body .wp-block-kadence-column:has(.ur-frontend-form) > p {
    color: #6b7280 !important;                       /* text-gray-500 */
    font-size: 0.875rem !important;                  /* text-sm */
    margin: 0 0 2rem !important;                     /* mb-8 */
}


/* ── Container & Form ─────────────────────────────────────── */

body .ur-frontend-form#ur-frontend-form {
    margin: 0 !important;
}

body .ur-frontend-form form.user-registration-form {
    background: rgba(249, 250, 251, 0.5) !important; /* bg-gray-50/50 */
    border: 1px solid #f3f4f6 !important;            /* border-gray-100 */
    border-radius: 1rem !important;                  /* rounded-2xl */
    padding: 1.5rem !important;                      /* p-6 */
    margin: 0 !important;
    box-shadow: none !important;
}
@media (min-width: 768px) {
    body .ur-frontend-form form.user-registration-form {
        padding: 2rem !important;                    /* md:p-8 */
    }
}

/* Register-Form (kein .login auf dem Container) → weiß + shadow */
body .ur-frontend-form:not(.login) form.user-registration-form {
    background: #ffffff !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; /* shadow-sm */
}
@media (min-width: 1024px) {
    body .ur-frontend-form:not(.login) form.user-registration-form {
        padding: 2.5rem !important;                  /* lg:p-10 */
    }
}

/* ── Layout ───────────────────────────────────────────────── */
/* KEIN eigenes Grid — Plugin entscheidet die Spaltigkeit über die
   Form-Builder-Optionen pro Feld (col-Klassen). Wir setzen nur Abstände. */

body .ur-frontend-form .ur-form-row {
    margin: 0 !important;
}

body .ur-frontend-form .ur-form-grid {
    display: block !important;
}

/* Login-Form: Username + Password 2-spaltig nebeneinander ab 640px.
   Andere Elemente (Submit, Remember-Me, Register-Link) volle Breite. */
@media (min-width: 640px) {
    body .ur-frontend-form.login .ur-form-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: 1.25rem !important;
        row-gap: 0 !important;
    }
    body .ur-frontend-form.login .ur-form-grid > [data-field="username"],
    body .ur-frontend-form.login .ur-form-grid > [data-field="password"] {
        grid-column: span 1 !important;
    }
    /* Alles andere im Grid (Submit, Remember-Me-Row, Register-Link, hidden Inputs) volle Breite */
    body .ur-frontend-form.login .ur-form-grid > .form-row,
    body .ur-frontend-form.login .ur-form-grid > .user-registration-register,
    body .ur-frontend-form.login .ur-form-grid > div:not([data-field="username"]):not([data-field="password"]),
    body .ur-frontend-form.login .ur-form-grid > input {
        grid-column: 1 / -1 !important;
    }
}

/* Username-Feld im Register-Form ausblenden (wird per JS auto-generiert).
   Das Plugin braucht das Feld weiterhin im DOM, daher display: none statt remove. */
body .ur-frontend-form [data-field-id="user_login"],
body .ur-frontend-form .field-user_login,
body .ur-frontend-form #user_login_field {
    display: none !important;
}

/* Field-Wrapper: vertikaler Abstand zwischen Feldern (space-y-5) */
body .ur-frontend-form .user-registration-form-row,
body .ur-frontend-form .form-row {
    margin: 0 0 1.25rem !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both;
}
body .ur-frontend-form .ur-form-grid > *:last-child {
    margin-bottom: 0 !important;
}

/* "Register now"-Link in eigene Zeile, klar abgesetzt vom Submit-Button */
body .ur-frontend-form .user-registration-register {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    margin: 1.25rem 0 0 !important;
    padding-top: 1rem !important;
    border-top: 1px solid #f3f4f6 !important;        /* dezente Trennlinie */
}

/* ── Labels ───────────────────────────────────────────────── */

body .ur-frontend-form label {
    display: block !important;
    margin: 0 0 0.5rem !important;                   /* mb-2 */
    font-family: Inter, sans-serif !important;
    font-size: 0.875rem !important;                  /* text-sm */
    font-weight: 600 !important;                     /* font-semibold */
    color: #374151 !important;                       /* text-gray-700 */
    line-height: 1.4 !important;
}

body .ur-frontend-form label .required {
    color: #f87171 !important;                       /* text-red-400 */
    margin-left: 0.125rem;
    font-weight: 400;
}

/* ── Input-Wrapper ─────────────────────────────────────────── */

body .ur-frontend-form .input-wrapper,
body .ur-frontend-form .password-input-group {
    display: block !important;
    width: 100% !important;
    position: relative !important;
}

/* ── Inputs / Selects / Textareas ─────────────────────────── */

body .ur-frontend-form input.user-registration-Input,
body .ur-frontend-form input[type="text"]:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
body .ur-frontend-form input[type="email"],
body .ur-frontend-form input[type="password"],
body .ur-frontend-form input[type="tel"],
body .ur-frontend-form input[type="url"],
body .ur-frontend-form input[type="number"],
body .ur-frontend-form input[type="search"],
body .ur-frontend-form select,
body .ur-frontend-form textarea {
    width: 100% !important;
   /*  padding: 0.75rem 1rem !important;    */             /* px-4 py-3 */
  /*   background: #ffffff !important; */                  /* Login: bg-white */
    border: 1px solid #e5e7eb !important;            /* border-gray-200 */
    border-radius: 0.75rem !important;               /* rounded-xl */
    font-family: Inter, sans-serif !important;
    font-size: 0.875rem !important;                  /* text-sm */
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #1e293b !important;
    box-shadow: none !important;
    transition: all 0.15s ease-in-out !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Register-Form → Inputs auf bg-gray-50 (passend zum weißen Form-BG) */
body .ur-frontend-form:not(.login) input.user-registration-Input,
body .ur-frontend-form:not(.login) input[type="email"],
body .ur-frontend-form:not(.login) input[type="password"],
body .ur-frontend-form:not(.login) input[type="tel"],
body .ur-frontend-form:not(.login) input[type="url"],
body .ur-frontend-form:not(.login) input[type="number"],
body .ur-frontend-form:not(.login) select,
body .ur-frontend-form:not(.login) textarea {
    background: #f9fafb !important;                  /* bg-gray-50 */
}

body .ur-frontend-form input::placeholder,
body .ur-frontend-form textarea::placeholder {
    color: #9ca3af !important;                       /* placeholder-gray-400 */
    opacity: 1;
}

/* Focus-State — cvot-secondary Ring */
body .ur-frontend-form input.user-registration-Input:focus,
body .ur-frontend-form input[type="email"]:focus,
body .ur-frontend-form input[type="password"]:focus,
body .ur-frontend-form input[type="text"]:focus,
body .ur-frontend-form input[type="tel"]:focus,
body .ur-frontend-form input[type="url"]:focus,
body .ur-frontend-form input[type="number"]:focus,
body .ur-frontend-form select:focus,
body .ur-frontend-form textarea:focus {
    outline: 0 !important;
    border-color: #007ebd !important;                /* focus:border-cvot-secondary */
    box-shadow: 0 0 0 2px rgba(0, 126, 189, 0.4) !important; /* ring-cvot-secondary/40 */
}

/* Select — Caret-Icon */
body .ur-frontend-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd' /%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 1.25rem !important;
    padding-right: 2.5rem !important;
}

/* ── Remember Me + Lost Password Row ──────────────────────── */

body .ur-frontend-form .user-registration-before-login-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    margin: 0 !important;
}

body .ur-frontend-form [data-field="remember-me"] label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    cursor: pointer;
}

body .ur-frontend-form [data-field="remember-me"] input[type="checkbox"] {
    width: 1rem !important;
    height: 1rem !important;
    margin: 0 !important;
    accent-color: #007ebd;
}

body .ur-frontend-form .user-registration-LostPassword a,
body .ur-frontend-form a[href*="lost-password"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    color: #007ebd !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}
body .ur-frontend-form .user-registration-LostPassword a:hover,
body .ur-frontend-form a[href*="lost-password"]:hover {
    color: #0e7490 !important;                       /* cyan-700 */
}

/* ── Submit-Button ─────────────────────────────────────────── */

body .ur-frontend-form button.user-registration-Button,
body .ur-frontend-form button.ur-submit-button,
body .ur-frontend-form input[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;              /* px-6 py-3 */
    background: #007ebd !important;                  /* bg-cvot-secondary */
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 0.75rem !important;               /* rounded-xl */
    font-family: Inter, sans-serif !important;
    font-size: 0.875rem !important;                  /* text-sm */
    font-weight: 700 !important;                     /* font-bold */
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;               /* tracking-wide */
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 6px -1px rgba(8, 51, 68, 0.15), 0 2px 4px -2px rgba(8, 51, 68, 0.1) !important;
    transition: all 0.15s ease-in-out !important;
}

body .ur-frontend-form button.user-registration-Button:hover,
body .ur-frontend-form button.ur-submit-button:hover,
body .ur-frontend-form input[type="submit"]:hover {
    background: #0891b2 !important;                  /* hover:bg-cyan-600 */
    color: #ffffff !important;
    transform: translateY(-1px);
}

body .ur-frontend-form button.user-registration-Button:focus,
body .ur-frontend-form button.ur-submit-button:focus,
body .ur-frontend-form input[type="submit"]:focus {
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(0, 126, 189, 0.4) !important;
}

/* ── Register-Link unter Login-Button (Style nur für Anchor) ─── */
/* Block-Layout der .user-registration-register oben in der Layout-Sektion */

body .ur-frontend-form .user-registration-register a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    color: #007ebd !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

body .ur-frontend-form .user-registration-register a:hover {
    color: #0e7490 !important;
}

/* ── Plugin-Notices (Errors / Success) ─────────────────────── */

body .user-registration-error,
body .user-registration-message,
body .user-registration-info {
    margin: 0 0 1rem !important;
    padding: 0.875rem 1.25rem !important;
    border-radius: 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    border: 1px solid transparent !important;
}

body .user-registration-error {
    background: #fef2f2 !important;                  /* red-50 */
    border-color: #fecaca !important;                /* red-200 */
    color: #b91c1c !important;                       /* red-700 */
}

body .user-registration-message,
body .user-registration-info {
    background: #f0f9ff !important;                  /* sky-50 */
    border-color: #bae6fd !important;                /* sky-200 */
    color: #075985 !important;                       /* sky-800 */
}

/* ── Validation: Required-Felder mit Fehler ─────────────────── */

body .ur-frontend-form .user-registration-form-row.user-registration-invalid input,
body .ur-frontend-form .user-registration-form-row.user-registration-invalid select,
body .ur-frontend-form .user-registration-form-row.user-registration-invalid textarea {
    border-color: #f87171 !important;                /* red-400 */
}

body .ur-frontend-form .user-registration-form-row.user-registration-invalid label {
    color: #b91c1c !important;
}

#ur-frontend-form {
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.user-registration.ur-frontend-form  {
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    padding: 2.5rem !important;
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
    --tw-bg-opacity: 1 !important;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
    --tw-border-opacity: 1 !important;
    border-color: rgb(243 244 246 / var(--tw-border-opacity, 1)) !important;
    border-width: 1px !important;
    border-radius: 1rem !important;
    margin-top: 1rem !important;
}

body .ur-frontend-form:not(.login) input.user-registration-Input, body .ur-frontend-form:not(.login) input[type="email"], body .ur-frontend-form:not(.login) input[type="password"], body .ur-frontend-form:not(.login) input[type="tel"], body .ur-frontend-form:not(.login) input[type="url"], body .ur-frontend-form:not(.login) input[type="number"], body .ur-frontend-form:not(.login) input[type="text"], body .ur-frontend-form:not(.login) select, body .ur-frontend-form:not(.login) textarea {
    background: #f9fafb !important;