/* ═══════════════════════════════════════════════════════════════════════
   Lyra AUTH BLOCKS — frontend styles
   Loaded by class-lyra-bt-admin.php's enqueue path on any page that contains
   one of the auth-block ids, plus by class-lyra-bt-auth-2fa.php whenever the
   2FA enforcement banner is rendered.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Outer wrapper / alignment ───────────────────────────────────────── */
.lyra-bt-auth-block { display: block; }
.lyra-bt-auth-block--align-left   > .lyra-bt-auth-form { margin-left: 0; margin-right: auto; }
.lyra-bt-auth-block--align-right  > .lyra-bt-auth-form { margin-left: auto; margin-right: 0; }
.lyra-bt-auth-block--align-center > .lyra-bt-auth-form { margin-left: auto; margin-right: auto; }

/* ── Form box ────────────────────────────────────────────────────────── */
.lyra-bt-auth-form {
    box-sizing: border-box;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    padding: 20px;
    background: #fff;
    position: relative;
}
.lyra-bt-auth-form--submitting { opacity: 0.65; pointer-events: none; }

.lyra-bt-auth-form__title { margin: 0 0 12px; }
.lyra-bt-auth-form__intro { margin: 0 0 16px; color: #555; font-size: 14px; }
.lyra-bt-auth-form__loggedin-msg,
.lyra-bt-auth-form__disabled-msg {
    margin: 0;
    padding: 12px 16px;
    background: #f5f5f5;
    border-left: 3px solid #2271b1;
    border-radius: 0 4px 4px 0;
}

/* ── Fields ──────────────────────────────────────────────────────────── */
.lyra-bt-auth-form__field { margin-bottom: 12px; }
.lyra-bt-auth-form__label {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
    font-weight: 500;
}
.lyra-bt-auth-form__input,
.lyra-bt-auth-form__textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    font-family: inherit;
}
.lyra-bt-auth-form__textarea { min-height: 88px; resize: vertical; }
.lyra-bt-auth-form__input:focus,
.lyra-bt-auth-form__textarea:focus {
    outline: 2px solid rgba(0, 102, 204, 0.35);
    outline-offset: 1px;
}

.lyra-bt-auth-form__field--error .lyra-bt-auth-form__input,
.lyra-bt-auth-form__field--error .lyra-bt-auth-form__textarea {
    border-color: #d63638;
}
.lyra-bt-auth-form__field-error {
    margin: 4px 0 0;
    color: #d63638;
    font-size: 13px;
}

.lyra-bt-auth-form__checkbox-label {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}
.lyra-bt-auth-form__checkbox-label input { margin-top: 3px; }

/* ── Submit ──────────────────────────────────────────────────────────── */
.lyra-bt-auth-form__submit-row { margin-top: 12px; }
.lyra-bt-auth-form__submit {
    display: inline-block;
    padding: 10px 18px;
    background: #2271b1;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.lyra-bt-auth-form__submit:hover,
.lyra-bt-auth-form__submit:focus { background: #135e96; }
.lyra-bt-auth-form__submit:disabled { opacity: 0.6; cursor: progress; }

/* ── Helper rows / links ─────────────────────────────────────────────── */
.lyra-bt-auth-form__helper-row {
    margin-top: 12px;
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.lyra-bt-auth-form__helper-link { text-decoration: underline; }

/* ── Status messages ─────────────────────────────────────────────────── */
.lyra-bt-auth-form__status {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
}
.lyra-bt-auth-form__status[hidden] { display: none !important; }
.lyra-bt-auth-form__status--error {
    background: #fcebec;
    color: #8a1f25;
    border-left: 3px solid #d63638;
}
.lyra-bt-auth-form__status--success {
    background: #ecf7ed;
    color: #1a4f24;
    border-left: 3px solid #46b450;
}
.lyra-bt-auth-form__success-msg,
.lyra-bt-auth-form__error-msg {
    margin: 0;
    padding: 12px 16px;
    border-radius: 4px;
}
.lyra-bt-auth-form__success-msg {
    background: #ecf7ed;
    color: #1a4f24;
    border-left: 3px solid #46b450;
}
.lyra-bt-auth-form__error-msg {
    background: #fcebec;
    color: #8a1f25;
    border-left: 3px solid #d63638;
}

/* ── Strength meter ─────────────────────────────────────────────────── */
.lyra-bt-auth-form__strength {
    margin: 4px 0 12px;
    font-size: 12px;
    color: #555;
    height: 16px;
}
.lyra-bt-auth-form__strength[data-level="1"] { color: #b32d2e; }
.lyra-bt-auth-form__strength[data-level="2"] { color: #ce8500; }
.lyra-bt-auth-form__strength[data-level="3"] { color: #006627; }
.lyra-bt-auth-form__strength[data-level="4"] { color: #004a1c; font-weight: 600; }
.lyra-bt-auth-form__strength[data-level="5"] { color: #003015; font-weight: 700; }

/* ── Avatar field ────────────────────────────────────────────────────── */
.lyra-bt-auth-form__avatar-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.lyra-bt-auth-form__avatar-preview img,
.lyra-bt-auth-form__avatar-current {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    background: #f0f0f0;
    border: 1px solid #ddd;
}
.lyra-bt-auth-form__avatar-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}
.lyra-bt-auth-form__avatar-remove {
    background: none;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 13px;
    cursor: pointer;
    color: #b32d2e;
}
.lyra-bt-auth-form__avatar-remove:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Conditional content block ───────────────────────────────────────── */
.lyra-bt-cc { display: block; }
.lyra-bt-cc--align-left   .lyra-bt-cc-inner { margin-left: 0; margin-right: auto; }
.lyra-bt-cc--align-right  .lyra-bt-cc-inner { margin-left: auto; margin-right: 0; }
.lyra-bt-cc--align-center .lyra-bt-cc-inner { margin-left: auto; margin-right: auto; }
.lyra-bt-cc-inner {
    box-sizing: border-box;
    padding: 16px 18px;
    border-radius: 6px;
}
.lyra-bt-cc-inner--login-prompt {
    text-align: center;
    background: #f7f8fa;
    padding: 28px 20px;
}
.lyra-bt-cc-msg { margin: 0 0 12px; }
.lyra-bt-cc-btn {
    display: inline-block;
    padding: 10px 18px;
    background: #2271b1;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.lyra-bt-cc-btn:hover,
.lyra-bt-cc-btn:focus { background: #135e96; color: #fff; }

/* ── Social-login wrapper ─────────────────────────────────────────────── */
.lyra-bt-sl { display: block; }
.lyra-bt-sl--align-left   { text-align: left;   }
.lyra-bt-sl--align-center { text-align: center; }
.lyra-bt-sl--align-right  { text-align: right;  }
.lyra-bt-sl-heading { margin: 0 0 12px; }
.lyra-bt-sl-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
.lyra-bt-sl-buttons--vertical   { flex-direction: column; }
.lyra-bt-sl-buttons--horizontal { flex-direction: row; flex-wrap: wrap; }
/* miniOrange's shortcode generates assorted markup; these targets are
   defensive: they style their links/buttons consistently regardless of
   exact wrapper class names. */
.lyra-bt-sl-buttons a,
.lyra-bt-sl-buttons button {
    flex: 1 1 auto;
    text-align: center;
    box-sizing: border-box;
}
.lyra-bt-sl-buttons--icon_only a span,
.lyra-bt-sl-buttons--icon_only button span {
    display: none !important;
}
/* Brand vs monochrome mode — when monochrome, force a neutral grayscale on
   miniOrange's brand-colored icons to align with site styling. */
.lyra-bt-sl-buttons--mono img {
    filter: grayscale(100%) brightness(0.6);
    transition: filter 0.15s ease;
}
.lyra-bt-sl-buttons--mono a:hover img,
.lyra-bt-sl-buttons--mono button:hover img {
    filter: grayscale(0);
}
.lyra-bt-sl-buttons--missing { padding: 14px; background: #f5f5f5; border-radius: 4px; }
.lyra-bt-sl-msg { margin: 0; }
.lyra-bt-sl-admin-hint { margin: 8px 0 0; font-size: 13px; color: #666; }

/* ── 2FA enrollment block ─────────────────────────────────────────────── */
.lyra-bt-2fa { display: block; }
.lyra-bt-2fa--align-left   .lyra-bt-2fa-inner { margin-left: 0; margin-right: auto; }
.lyra-bt-2fa--align-right  .lyra-bt-2fa-inner { margin-left: auto; margin-right: 0; }
.lyra-bt-2fa--align-center .lyra-bt-2fa-inner { margin-left: auto; margin-right: auto; }
.lyra-bt-2fa-inner {
    box-sizing: border-box;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    padding: 20px;
    background: #fff;
}
.lyra-bt-2fa-inner.lyra-bt-2fa--enrolled    { border-left: 4px solid #46b450; }
.lyra-bt-2fa-inner.lyra-bt-2fa--required    { border-left: 4px solid #d63638; }
.lyra-bt-2fa-inner.lyra-bt-2fa--not-enrolled { border-left: 4px solid #ce8500; }
.lyra-bt-2fa-message { margin: 0 0 12px; }
.lyra-bt-2fa-actions { margin: 0; }
.lyra-bt-2fa-btn {
    display: inline-block;
    padding: 10px 18px;
    background: #2271b1;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
}
.lyra-bt-2fa-btn:hover,
.lyra-bt-2fa-btn:focus { background: #135e96; color: #fff; }
.lyra-bt-2fa-admin-hint { margin: 8px 0 0; font-size: 13px; color: #666; }

/* ── 2FA enforcement banner (frontend) ────────────────────────────────── */
.lyra-bt-2fa-banner.lyra-bt-2fa-banner--frontend {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: #fff7e6;
    border-top: 2px solid #ce8500;
    padding: 12px 16px;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
}
.lyra-bt-2fa-banner__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.lyra-bt-2fa-banner__msg { flex: 1 1 auto; font-size: 14px; }
.lyra-bt-2fa-banner__action {
    background: #d63638;
    color: #fff !important;
    padding: 8px 14px;
    border-radius: 4px;
    text-decoration: none;
}
.lyra-bt-2fa-banner__action:hover,
.lyra-bt-2fa-banner__action:focus { background: #b32d2e; }
.lyra-bt-2fa-banner__dismiss {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    padding: 4px 8px;
}
.lyra-bt-2fa-banner__dismiss:hover { color: #000; }