/**
 * Shared phone → OTP → role → profile → welcome flow.
 * Used standalone (full page, ug-login.php) and inside a modal (ug.php).
 * Expects the host page to already define --primary, --accent, --green,
 * --red, --border, --muted in its own :root — this file only styles the
 * step components, not page chrome, so both hosts keep their own look.
 *
 * Every class here is "auth-"-prefixed on purpose: a host page embedding
 * this component may already have its own generic ".step"/".step-title"/
 * etc. (ug.php's "How It Works" section does), and an unprefixed name
 * silently collides — the host's rule wins the cascade tie and the
 * component renders broken with no error anywhere. Namespacing is the fix.
 */
.auth-step{display:none}
.auth-step.active{display:block}
.auth-step-dots{display:flex;gap:6px;margin-bottom:32px}
.auth-step-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:all .3s}
.auth-step-dot.done{background:var(--green)}
.auth-step-dot.active{width:22px;border-radius:4px;background:var(--primary)}
.auth-step-label{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.7px;text-transform:uppercase;margin-bottom:8px}
.auth-step-title{font-size:26px;font-weight:800;color:var(--primary);margin-bottom:6px}
.auth-step-sub{font-size:14px;color:var(--muted);margin-bottom:28px;line-height:1.6}

/* Phone */
.auth-phone-wrap{display:flex;border:2px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .2s;margin-bottom:8px}
.auth-phone-wrap:focus-within{border-color:var(--primary)}
.auth-phone-prefix{display:flex;align-items:center;gap:8px;padding:14px 16px;background:#F9FAFB;border-right:1.5px solid var(--border);font-size:14px;font-weight:700;color:var(--primary);white-space:nowrap}
.auth-phone-prefix img{width:20px;height:14px;border-radius:2px;object-fit:cover;flex-shrink:0}
.auth-phone-input{flex:1;border:none;outline:none;padding:14px 16px;font-family:inherit;font-size:16px;color:var(--primary);background:#fff}
.auth-phone-hint{font-size:12px;color:var(--muted);margin-bottom:24px}

/* OTP */
.auth-otp-boxes{display:flex;gap:10px;margin-bottom:8px}
.auth-otp-box{flex:1;min-width:0;width:0;height:58px;border:2px solid var(--border);border-radius:12px;text-align:center;font-size:22px;font-weight:800;color:var(--primary);font-family:inherit;outline:none;transition:border-color .2s,transform .1s;background:#fff}
.auth-otp-box:focus{border-color:var(--primary);transform:scale(1.04)}
.auth-otp-box.filled{border-color:var(--green);background:rgba(0,196,140,.04)}
.auth-otp-box.error{border-color:var(--red);animation:auth-shake .3s}
@keyframes auth-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.auth-otp-resend{font-size:13px;color:var(--muted);margin-bottom:24px}
.auth-otp-resend a{color:var(--primary);font-weight:600;cursor:pointer;text-decoration:none}
.auth-otp-resend a.disabled{color:var(--muted);cursor:default;pointer-events:none}
.auth-otp-phone-display{font-size:14px;color:var(--muted);margin-bottom:20px}
.auth-otp-phone-display strong{color:var(--primary)}

/* Role cards */
.auth-role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}
.auth-role-card{border:2px solid var(--border);border-radius:16px;padding:24px 20px;text-align:center;cursor:pointer;transition:all .2s;position:relative}
.auth-role-card:hover{border-color:var(--primary);background:rgba(10,35,66,.03)}
.auth-role-card.selected{border-color:var(--accent);background:rgba(244,168,0,.05)}
.auth-role-card.selected .auth-role-check{display:flex}
.auth-role-check{display:none;position:absolute;top:10px;right:12px;width:20px;height:20px;background:var(--accent);color:var(--primary);border-radius:50%;font-size:10px;font-weight:800;align-items:center;justify-content:center}
.auth-role-icon{font-size:36px;margin-bottom:12px}
.auth-role-name{font-size:16px;font-weight:700;color:var(--primary);margin-bottom:4px}
.auth-role-desc{font-size:12px;color:var(--muted);line-height:1.5}

/* Form */
.auth-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.auth-form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.auth-form-label{font-size:12px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.4px}
.auth-form-control{border:2px solid var(--border);border-radius:10px;padding:12px 14px;font-family:inherit;font-size:14px;color:var(--primary);outline:none;transition:border-color .2s;background:#fff;width:100%}
.auth-form-control:focus{border-color:var(--primary)}
select.auth-form-control{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}

/* Buttons */
.auth-btn-main{width:100%;height:52px;background:var(--primary);color:#fff;border:none;border-radius:12px;font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s;letter-spacing:.2px}
.auth-btn-main:hover{background:#0f3060;transform:translateY(-1px)}
.auth-btn-main:disabled{opacity:.5;cursor:default;transform:none}
.auth-btn-spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:auth-spin .7s linear infinite;display:none}
.auth-btn-main.loading .btn-text{display:none}
.auth-btn-main.loading .auth-btn-spinner{display:block}
@keyframes auth-spin{to{transform:rotate(360deg)}}
.auth-btn-back{background:none;border:none;font-family:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;padding:0;display:flex;align-items:center;gap:6px;margin-bottom:20px;transition:color .2s}
.auth-btn-back:hover{color:var(--primary)}

/* Alerts */
.auth-alert{padding:12px 16px;border-radius:10px;font-size:13px;font-weight:500;margin-bottom:20px;display:none;align-items:center;gap:10px}
.auth-alert.show{display:flex}
.auth-alert-error{background:#FEF2F2;color:#991B1B;border:1px solid #FECACA}
.auth-alert-success{background:#F0FDF4;color:#166534;border:1px solid #BBF7D0}

/* Free lib note */
.auth-free-lib-note{margin-top:20px;padding:14px 16px;background:rgba(0,196,140,.06);border:1px solid rgba(0,196,140,.2);border-radius:10px;font-size:13px;color:var(--muted);line-height:1.6}
.auth-free-lib-note a{color:var(--primary);font-weight:700;text-decoration:none}
.auth-free-lib-note a:hover{color:var(--accent)}

/* Welcome step */
.auth-welcome-anim{text-align:center;padding:20px 0}
.auth-welcome-anim .emoji{font-size:64px;animation:auth-pop .4s ease-out}
@keyframes auth-pop{0%{transform:scale(0)}80%{transform:scale(1.15)}100%{transform:scale(1)}}
.auth-loadbar{height:4px;background:var(--border);border-radius:99px;overflow:hidden;margin-top:24px}
.auth-loadbar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--green));border-radius:99px;animation:auth-fillbar 1.4s ease-in-out forwards}
@keyframes auth-fillbar{0%{width:0}100%{width:100%}}