/* PHIMAI HEALTH | ผู้พัฒนาระบบ : นายวิษณุ เสาะสาย | ตำแหน่ง : เจ้าพนักงานธุรการ */
/* PHIMAI HEALTH — email OTP step. Scoped to the existing login layout. */
.otp-shell{position:relative;isolation:isolate;overflow:hidden;border:1px solid rgba(16,185,129,.2)!important;box-shadow:0 24px 80px rgba(10,48,53,.12),0 2px 12px rgba(0,0,0,.045)}
.otp-shell:before{content:"";position:absolute;pointer-events:none;z-index:-1;inset:-80px -110px auto auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(60,189,157,.13),transparent 70%)}
.otp-lock-icon{background:linear-gradient(140deg,#e5fff5,#c9f7e8)!important;color:#086853!important;box-shadow:inset 0 0 0 1px rgba(9,110,85,.13)}
.otp-progress{display:flex;align-items:center;gap:.5rem;margin:.25rem 0 1.6rem;color:#406b67;font-size:.78rem}
.otp-progress small{margin-left:.4rem;color:#53736e;font-weight:600}
.otp-progress-dot{display:grid;place-items:center;width:29px;height:29px;flex:0 0 auto;border-radius:50%;background:#edf5f3;color:#547a74;border:1px solid #cfe3de;font-weight:800}
.otp-progress-dot.is-done{background:#0e806a;border-color:#0e806a;color:#fff}
.otp-progress-dot.is-active{background:#d7fbeb;border-color:#0a9a78;color:#076b56;box-shadow:0 0 0 4px rgba(16,185,129,.12)}
.otp-progress-line{width:48px;max-width:13%;height:3px;background:#dbe9e6;border-radius:5px}
.otp-progress-line.is-done{background:#0f9775}
.otp-recipient{display:flex;align-items:center;gap:.9rem;padding:1rem;border:1px solid #d7e9e4;border-radius:18px;background:linear-gradient(120deg,#f3fcf8,#e9f7f5);margin:1.25rem 0 1.4rem;color:#16473f}
.otp-recipient>div{flex:1;min-width:0}
.otp-recipient small{display:block;color:#5d7c75;font-size:.77rem}
.otp-recipient strong{display:block;overflow-wrap:anywhere;font-weight:800;letter-spacing:.01em}
.otp-mail-symbol{font-size:1.45rem;display:grid;place-items:center;width:46px;height:46px;flex:0 0 auto;background:#d4f5e9;color:#0a745c;border-radius:13px}
.otp-secure-pill{font-size:.68rem;color:#087458;background:#daf7e9;padding:.3rem .6rem;border-radius:999px;font-weight:700}
.otp-form .form-label{font-weight:700;color:#234f48}
.otp-code-input{height:68px;border-radius:15px!important;border:1.5px solid #9cc9bd!important;background:#fff!important;color:#173e37!important;font-size:2rem!important;font-variant-numeric:tabular-nums;text-align:center;letter-spacing:.55em;padding-left:.55em!important;font-weight:800;transition:box-shadow .2s ease,border-color .2s ease}
.otp-code-input:focus{outline:0;border-color:#0e9476!important;box-shadow:0 0 0 4px rgba(15,148,118,.13)!important}
.otp-code-input::placeholder{color:#b6cfc9;letter-spacing:.38em}
.otp-help{display:flex;justify-content:space-between;gap:.75rem;margin:.8rem 0 1.4rem;font-size:.82rem;color:#5b746e}
.otp-help [data-otp-countdown]{color:#08745b;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.otp-help [data-otp-countdown].is-expired{color:#bd3a38}
.otp-verify-button{border-radius:14px!important;min-height:48px;font-weight:800;background:linear-gradient(125deg,#087c6d,#139b7e)!important;border:0!important;box-shadow:0 12px 24px rgba(13,121,104,.18);transition:transform .2s ease,filter .2s ease}
.otp-verify-button:hover{transform:translateY(-2px);filter:brightness(1.05)}
.otp-secondary-actions{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.otp-secondary-actions .btn{font-size:.87rem;font-weight:700;text-decoration:none;color:#087b68;padding:.4rem .2rem}
.otp-secondary-actions .btn:disabled{color:#7c9790;opacity:.8}
.otp-note{font-size:.78rem;line-height:1.65;color:#667b77;margin:1rem 0 0;padding-top:1rem;border-top:1px solid #e0ece8}
@media(max-width:575.98px){.otp-shell{border-radius:22px!important}.otp-recipient{padding:.8rem;gap:.6rem}.otp-secure-pill{display:none}.otp-code-input{font-size:1.8rem!important;letter-spacing:.38em;padding-left:.38em!important;height:60px}.otp-progress{margin-bottom:1.1rem}}
@media(prefers-reduced-motion:reduce){.otp-shell *, .otp-shell *:before, .otp-shell *:after{animation-duration:.01ms!important;transition:none!important}}
/* Google Sign-In: responsive, accessible, consistent with PHIMAI HEALTH theme. */
.google-login-divider{display:flex;align-items:center;gap:12px;color:#66788a;font-size:.82rem;margin:1.45rem 0 1rem;text-align:center}
.google-login-divider::before,.google-login-divider::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#cbd9e2)}
.google-login-divider::after{background:linear-gradient(90deg,#cbd9e2,transparent)}
.google-login-button{display:flex;align-items:center;justify-content:center;gap:13px;min-height:52px;padding:.7rem 1rem;border:1px solid #d3dfe7;border-radius:14px;background:#fff;color:#18374b;text-decoration:none!important;font-size:.98rem;font-weight:700;box-shadow:0 5px 18px rgba(14,67,86,.07);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.google-login-button:hover,.google-login-button:focus-visible{color:#0b6070;border-color:#72b2c4;background:#f7fcff;box-shadow:0 10px 24px rgba(14,67,86,.14);transform:translateY(-2px)}
.google-login-button:focus-visible{outline:3px solid #29a1b7;outline-offset:2px}
.google-login-button svg{flex:none}
.google-login-hint{color:#627486;font-size:.79rem;line-height:1.55;text-align:center;margin:.65rem 0 .8rem}
@media(max-width:575.98px){.google-login-button{min-height:50px;font-size:.94rem}}
@media(prefers-reduced-motion:reduce){.google-login-button{transition:none}.google-login-button:hover{transform:none}}