/* V1 auth pages (devdojo/auth: login, register, password, verify, 2FA).
   Restyles the package's own markup inside .dk-auth; the logic is untouched. */

.dk-auth { background: var(--dk-page); min-block-size: 100vh; }
.dk-auth [x-cloak] { display: none !important; }
.dk-auth__page { display: block; }
.dk-auth__main { display: flex; flex-direction: column; align-items: center; gap: var(--dk-4); padding: var(--dk-8) var(--dk-4) var(--dk-12); }
@media (min-width: 640px) { .dk-auth__main { padding-block-start: var(--dk-12); } }
.dk-auth__trust { display: block; max-inline-size: 440px; color: var(--dk-muted); font-size: var(--dk-fs-sm); text-align: center; }
.dk-auth__trust svg { display: inline-block; vertical-align: -3px; margin-inline-end: 6px; color: var(--dk-brand); }

/* The card */
.dk-auth #auth-container-parent { inline-size: 100%; max-inline-size: 440px; margin-inline: auto; }
.dk-auth #auth-container { block-size: auto !important; min-block-size: 0 !important; padding: var(--dk-8) var(--dk-6) !important; border: 1px solid var(--dk-line) !important; border-radius: 22px !important; background: #fff !important; box-shadow: var(--dk-shadow-md) !important; gap: 0; }
@media (max-width: 480px) { .dk-auth #auth-container { padding: var(--dk-6) var(--dk-4) !important; border-radius: 18px !important; } }
.dk-auth #auth-container, .dk-auth #auth-container p, .dk-auth #auth-container span, .dk-auth #auth-container label { color: var(--dk-ink); font-family: var(--dk-font); }

/* Heading: the top bar carries the logo */
.dk-auth #auth-heading-container { margin: 0 0 var(--dk-6) !important; align-items: flex-start !important; text-align: start; }
.dk-auth #auth-heading-container > div:first-child { display: none; }
.dk-auth #auth-heading-title { margin: 0; font-family: var(--dk-font-display); font-size: 26px; line-height: 1.25; font-weight: 700; color: var(--dk-ink); }
.dk-auth #auth-heading-description { margin: var(--dk-2) 0 0; text-align: start; opacity: 1; color: var(--dk-ink-2) !important; font-size: var(--dk-fs-sm); }

/* Fields: package floating labels, our sizes and colours */
.dk-auth form { display: flex; flex-direction: column; gap: var(--dk-4); }
.dk-auth form > * + * { margin-block-start: 0 !important; }
.dk-auth .auth-component-input-container { position: relative; box-shadow: none !important; }
.dk-auth input.auth-component-input { block-size: 52px !important; padding-inline: var(--dk-4) !important; font-size: 16px !important; color: var(--dk-ink) !important; background: #fff !important; border: 1.5px solid var(--dk-line-2) !important; border-radius: 12px !important; box-shadow: none !important; }
.dk-auth input.auth-component-input:focus { border-color: var(--dk-brand) !important; box-shadow: 0 0 0 3px rgba(63, 121, 166, .25) !important; outline: none; }
.dk-auth input.auth-component-input[type="password"], .dk-auth input.auth-component-input[data-bnr-pw] { padding-inline-end: 48px !important; }
.dk-auth .flex.relative.flex-col.justify-center.h-11 { block-size: 56px; }
.dk-auth label.auth-component-input { z-index: 5; color: var(--dk-muted); background: #fff; font-size: 15px; }
.dk-auth label.auth-component-input-label-focused { color: var(--dk-brand-ink) !important; font-weight: 600; }
.dk-auth [data-auth="email-read-only-placeholder"] { min-block-size: 52px; padding-inline: var(--dk-4); background: #fff !important; border: 1.5px solid var(--dk-line-2) !important; border-radius: 12px !important; font-size: 16px; overflow-wrap: anywhere; gap: var(--dk-3); }
.dk-auth [data-auth="edit-email-button"] { color: var(--dk-brand-ink) !important; font-weight: 700; min-block-size: var(--dk-tap); }
.dk-auth .text-red-600, .dk-auth [class*="text-red-"] { color: var(--dk-danger) !important; }

/* Show/hide password */
.dk-auth .dk-auth-eye { position: absolute; inset-inline-end: 4px; inset-block-start: 50%; transform: translateY(-50%); inline-size: 44px; block-size: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--dk-muted); cursor: pointer; z-index: 6; border-radius: 10px; }
.dk-auth .dk-auth-eye:hover { color: var(--dk-brand); }

/* Remember me: the package's custom box, in brand colours */
.dk-auth .custom-checkbox { inline-size: 22px; block-size: 22px; border: 1.5px solid var(--dk-line-2) !important; border-radius: 6px; background: #fff; }
.dk-auth input.peer:checked + label .custom-checkbox { background: var(--dk-brand) !important; border-color: var(--dk-brand) !important; }
.dk-auth input.peer:checked + label .custom-checkbox svg { color: #fff !important; }
.dk-auth input.peer + label { gap: var(--dk-2); min-block-size: var(--dk-tap); cursor: pointer; }
[dir="rtl"] .dk-auth input.peer + label > * + * { margin-inline-start: 0; }
.dk-auth .flex.items-center.h-5 { block-size: auto; }

/* Buttons */
.dk-auth .auth-component-button, .dk-auth [data-auth="submit-button"] { min-block-size: 52px; border-radius: 12px !important; background: var(--dk-orange) !important; color: var(--dk-ink) !important; font-family: var(--dk-font); font-size: 17px !important; font-weight: 700; opacity: 1 !important; box-shadow: none; }
.dk-auth .auth-component-button:hover { background: #EC8A26 !important; }
.dk-auth .auth-component-button:focus-visible { outline: 2px solid var(--dk-focus); outline-offset: 2px; }
.dk-auth .auth-component-button svg.animate-spin { margin-inline: 0 8px; }
.dk-auth #auth-container button:not(.auth-component-button):not(.dk-auth-eye):not([data-auth="edit-email-button"]) { min-block-size: var(--dk-tap); }

/* Links */
.dk-auth #auth-container a { color: var(--dk-brand-ink) !important; opacity: 1 !important; font-weight: 600; text-underline-offset: 3px; }
.dk-auth #auth-container a:hover { color: var(--dk-ink) !important; }
.dk-auth #auth-container .mt-3 { margin-block-start: var(--dk-6) !important; text-align: center !important; }
.dk-auth #auth-container .mt-3 > span { opacity: 1 !important; color: var(--dk-ink-2) !important; }

/* Messages: white with a thin coloured border, no tinted fills */
.dk-auth [role="alert"] { margin-block-end: var(--dk-4) !important; padding: var(--dk-3) var(--dk-4) !important; background: #fff !important; border: 1px solid var(--dk-line-2); border-inline-start: 4px solid var(--dk-brand); border-radius: 12px !important; color: var(--dk-ink) !important; }
.dk-auth [role="alert"].bg-red-100 { border-inline-start-color: var(--dk-danger); }
.dk-auth [role="alert"].bg-green-100 { border-inline-start-color: var(--dk-success); }
.dk-auth [role="alert"].bg-orange-100 { border-inline-start-color: var(--dk-orange); }
.dk-auth .bg-zinc-50 { background: #fff !important; border-color: var(--dk-line-2) !important; border-radius: 12px !important; }

/* "or" separator and social buttons */
.dk-auth #auth-container .uppercase { text-transform: none; color: var(--dk-muted); font-size: var(--dk-fs-sm); }
.dk-auth #auth-container .bg-zinc-300 { background: var(--dk-line) !important; }
.dk-auth #auth-container a[href*="/redirect"] { min-block-size: 52px; border-radius: 12px !important; border: 1.5px solid var(--dk-line-2) !important; background: #fff !important; color: var(--dk-ink) !important; }

/* 2FA / verification code boxes */
.dk-auth .auth-component-code-input, .dk-auth #auth-container input[x-ref^="input"]:not([x-ref="input"]) { inline-size: 52px !important; block-size: 60px !important; font-size: 24px !important; text-align: center; border: 1.5px solid var(--dk-line-2) !important; border-radius: 12px !important; }