/* Passkey UI — spoločné pre admin (Filament) aj maklérsku zónu.
 *
 * POZOR na dve rôzne tmavé prostredia:
 *   .dark       – prepínač Filamentu v administrácii
 *   .zona-tmava – maklérska zóna, ktorá je tmavá VŽDY (layouts/guest, dizajn systém v1.0)
 * Zóna triedu `.dark` nenastavuje, takže tmavé varianty musia pokrývať obe.
 * Bez toho sa tlačidlo „Prihlásiť sa passkeyom" vykreslilo tmavosivé (#1f2937)
 * na tmavomodrej karte a bolo prakticky neviditeľné. */

.rk-passkey-divider {
    display: flex; align-items: center; gap: 0.75rem;
    margin: 1.5rem 0 1rem;
    color: #6b7280; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.rk-passkey-divider::before, .rk-passkey-divider::after {
    content: ''; flex: 1; height: 1px; background: rgba(0, 0, 0, 0.1);
}
.dark .rk-passkey-divider::before, .dark .rk-passkey-divider::after,
.zona-tmava .rk-passkey-divider::before, .zona-tmava .rk-passkey-divider::after {
    background: rgba(255, 255, 255, 0.12);
}
.zona-tmava .rk-passkey-divider { color: #AEB9CE; }

.rk-passkey-button {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; padding: 0.6rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.625rem;
    background: transparent; color: #1f2937;
    font-size: 0.875rem; font-weight: 600; cursor: pointer;
    transition: background-color .15s ease;
}
.rk-passkey-button:hover:not(:disabled) { background: rgba(0, 0, 0, 0.04); }
.rk-passkey-button:disabled { opacity: 0.6; cursor: progress; }
.dark .rk-passkey-button,
.zona-tmava .rk-passkey-button { border-color: rgba(255, 255, 255, 0.18); color: #fafaf9; }
.dark .rk-passkey-button:hover:not(:disabled),
.zona-tmava .rk-passkey-button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); }
.rk-passkey-button svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

.rk-passkey-error { margin-top: 0.625rem; font-size: 0.8125rem; color: #b91c1c; text-align: center; }
/* Na tmavom má #b91c1c kontrast pod 3:1 – dizajn systém predpisuje #EF6060. */
.dark .rk-passkey-error, .zona-tmava .rk-passkey-error { color: #EF6060; }
.rk-passkey-empty { font-size: 0.8425rem; color: #6b7280; margin: 0; }
.dark .rk-passkey-empty, .zona-tmava .rk-passkey-empty { color: #AEB9CE; }
.rk-passkey-note-top { margin-top: 0.875rem; }

.rk-passkey-list { display: flex; flex-direction: column; gap: 0.5rem; }
.rk-passkey-item {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0.625rem;
}
.dark .rk-passkey-item,
.zona-tmava .rk-passkey-item { border-color: rgba(255, 255, 255, 0.12); }
.rk-passkey-item strong { display: block; font-size: 0.875rem; }
.rk-passkey-item span { display: block; font-size: 0.75rem; color: #9ca3af; }

.rk-passkey-add { display: flex; gap: 0.5rem; margin-top: 0.875rem; align-items: stretch; }
.rk-passkey-add > :first-child { flex: 1; }

[x-cloak] { display: none !important; }