/* Sign in with OTP on the school sign-in page (auth/partials/sms-sign-in). */

.lp-google:has(+ .lp-otp-btn) { margin-bottom: 10px; }
.lp-otp-btn i { font-size: 16px; color: #0052CC; }

.lp-otp-sent {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 16px; padding: 10px 12px;
    background: #f0f7ff; border: 1px solid #d6e8ff; border-radius: 10px;
    font-size: 13px; color: #1f3b63;
}
.lp-otp-sent i { color: #0052CC; font-size: 15px; }
.lp-otp-sent strong { font-weight: 700; letter-spacing: .02em; }

.lp-otp-code {
    letter-spacing: .5em; font-size: 18px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lp-otp-resend { margin: -8px 0 14px; text-align: center; }
.lp-otp-link {
    background: none; border: 0; padding: 4px 6px;
    font: inherit; font-size: 12.5px; font-weight: 600; color: #0078d4; cursor: pointer;
}
.lp-otp-link:hover:not(:disabled) { text-decoration: underline; }
.lp-otp-link:disabled { color: #9ca3af; cursor: default; }
.lp-otp-wait { margin-left: 4px; font-variant-numeric: tabular-nums; }

.lp-otp-accounts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.lp-otp-account {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 12px 14px; text-align: left;
    background: #fff; border: 1.5px solid #e5e7eb; border-radius: 11px;
    font: inherit; cursor: pointer; transition: border-color .15s, background .15s;
}
.lp-otp-account:hover, .lp-otp-account:focus-visible { border-color: #0078d4; background: #f8faff; outline: none; }
.lp-otp-account-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: #111827; overflow-wrap: anywhere; }
.lp-otp-account-role {
    flex: 0 0 auto; padding: 2px 9px; border-radius: 999px;
    background: #eef2ff; color: #3730a3; font-size: 11.5px; font-weight: 600;
}
.lp-otp-account .bi-chevron-right { color: #9ca3af; }

.lp-otp-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; color: #6b7280; text-decoration: none;
}
.lp-otp-back:hover { color: #0078d4; }