/* ============================================================
   Developer Auth Suite — Auth Pages CSS
   Deep Blue #0A2540 | Accent #635BFF | Font: Inter
   All bugs fixed:
   - Icons locked to 18x18, left-padded, no overlap
   - Spinner HIDDEN until .das-btn-loading applied
   - No underlines on links
   ============================================================ */

/* Reset */
.das-auth-wrapper *, .das-auth-wrapper *::before, .das-auth-wrapper *::after {
    box-sizing: border-box; margin: 0; padding: 0;
}

.das-auth-wrapper {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    background: #f6f9fc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    line-height: 1.5;
    color: #0A2540;
}

/* Hide WP theme chrome on auth pages */
.das-auth-page .entry-header,
.das-auth-page .page-header,
.das-auth-page .entry-title { display: none !important; }
.das-auth-page .entry-content,
.das-auth-page .page-content { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }

/* ── Layout ── */
.das-auth-container {
    display: flex;
    width: 100%;
    max-width: 940px;
    min-height: 560px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 0 0 1px rgba(10,37,64,.05), 0 4px 6px rgba(10,37,64,.04), 0 16px 40px rgba(10,37,64,.09);
    overflow: hidden;
}

.das-auth-card {
    flex: 1;
    padding: 44px 44px 40px;
    display: flex;
    flex-direction: column;
    max-width: 480px;
    overflow-y: auto;
}

/* ── Right Decorative Panel ── */
.das-auth-decor {
    flex: 1;
    min-width: 300px;
    background: linear-gradient(150deg, #0A2540 0%, #1b3d62 60%, #0d2e4d 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.das-decor-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.das-auth-decor-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.das-decor-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(99,91,255,.18) 1px, transparent 0);
    background-size: 30px 30px;
}

.das-auth-decor:not(.das-decor-has-image)::before {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(99,91,255,.18) 0%, transparent 70%);
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    animation: das-glow 7s ease-in-out infinite;
}

@keyframes das-glow {
    0%,100% { opacity:.5; transform:translate(-50%,-50%) scale(1); }
    50%      { opacity:1;  transform:translate(-50%,-50%) scale(1.15); }
}

/* ── Header ── */
.das-auth-header { text-align: center; margin-bottom: 28px; }

.das-auth-logo {
    height: 42px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.das-auth-brand {
    font-size: 17px;
    font-weight: 700;
    color: #0A2540;
    letter-spacing: -.3px;
    margin-bottom: 20px;
}

.das-auth-title {
    font-size: 24px;
    font-weight: 700;
    color: #0A2540;
    letter-spacing: -.5px;
    margin-bottom: 6px;
    line-height: 1.2;
}

.das-auth-subtitle {
    font-size: 14px;
    color: #425466;
}

/* ── Steps ── */
.das-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    gap: 0;
}

.das-step { display: flex; align-items: center; gap: 7px; }

.das-step-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #e3e8ee;
    display: flex; align-items: center; justify-content: center;
    transition: background .25s ease;
    flex-shrink: 0;
}

.das-step-dot span {
    font-size: 12px;
    font-weight: 600;
    color: #8898aa;
    line-height: 1;
}

.das-step-active .das-step-dot { background: #635BFF; }
.das-step-active .das-step-dot span { color: #fff; }
.das-step-active .das-step-label { color: #0A2540; font-weight: 600; }

.das-step-label { font-size: 13px; color: #8898aa; font-weight: 500; }

.das-step-line {
    width: 36px; height: 2px;
    background: #e3e8ee;
    margin: 0 6px;
    border-radius: 1px;
    flex-shrink: 0;
}

/* ── Alert ── */
.das-auth-alert {
    padding: 11px 14px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 18px;
    line-height: 1.4;
    border: 1px solid transparent;
}

.das-alert-error   { background:#fef2f2; color:#c0392b; border-color:#fecaca; }
.das-alert-success { background:#ecfdf5; color:#15803d; border-color:#bbf7d0; }
.das-alert-info    { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }

/* ── Form ── */
.das-auth-form { flex: 1; }

.das-form-group { margin-bottom: 18px; }

.das-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #0A2540;
    margin-bottom: 6px;
    letter-spacing: .01em;
}

.das-required { color: #e74c3c; margin-left: 2px; }

.das-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.das-label-row .das-form-label { margin-bottom: 0; }

/* ── Input Wrap & Icons ──
   Icon is 18×18, absolutely positioned at left:14px, vertically centered.
   Input gets padding-left:42px so text never touches the icon.
*/
.das-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

/* Every SVG inside .das-input-wrap that is .das-input-icon */
.das-input-wrap .das-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    max-width: 18px;
    min-height: 18px;
    max-height: 18px;
    color: #9ca3af;
    pointer-events: none;
    z-index: 2;
    display: block;
    flex-shrink: 0;
}

.das-form-input {
    width: 100%;
    height: 46px;
    /* 42px left pad = 14px margin + 18px icon + 10px gap */
    padding: 0 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14.5px;
    font-family: inherit;
    color: #0A2540;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Input without icon (no .das-input-wrap) */
.das-form-input:not(.das-input-wrap .das-form-input) {
    padding-left: 14px;
}

/* When inside input-wrap but no icon is present */
.das-input-wrap:not(:has(.das-input-icon)) .das-form-input {
    padding-left: 14px;
}

.das-form-input::placeholder { color: #a0aec0; }

/* Password inputs need right padding for the eye toggle */
.das-input-wrap:has(.das-toggle-password) .das-form-input {
    padding-right: 44px;
}

.das-form-input:hover  { border-color: #c7d2dc; }
.das-form-input:focus  { border-color: #635BFF; box-shadow: 0 0 0 3px rgba(99,91,255,.13); }

/* Change icon color when focused */
.das-input-wrap:focus-within .das-input-icon { color: #635BFF; }

/* ── Password Toggle ── */
.das-toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #9ca3af;
    z-index: 2;
    display: flex;
    align-items: center;
    line-height: 1;
}
.das-toggle-password:hover { color: #0A2540; }
.das-eye-icon { width: 18px; height: 18px; display: block; }

/* ── Password Strength ── */
.das-password-strength { margin-top: 7px; display: none; align-items: center; gap: 8px; }
.das-password-strength.das-pwd-visible { display: flex; }
.das-pwd-bar { flex: 1; height: 3px; background: #e3e8ee; border-radius: 2px; overflow: hidden; }
.das-pwd-bar-fill { height: 100%; width: 0; border-radius: 2px; transition: all .3s ease; }
.das-pwd-text { font-size: 11px; font-weight: 600; min-width: 52px; }

/* ── Checkbox ── */
.das-form-check { margin-bottom: 20px !important; }

.das-checkbox-wrap {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
    font-size: 13.5px;
    color: #425466;
    line-height: 1.45;
    user-select: none;
}

.das-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }

.das-checkbox-custom {
    width: 18px; height: 18px; min-width: 18px;
    border: 1.5px solid #d1d5db;
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    transition: all .18s ease;
    margin-top: 1px;
    background: #fff;
}

.das-checkbox:checked + .das-checkbox-custom {
    background: #635BFF;
    border-color: #635BFF;
}
.das-checkbox:checked + .das-checkbox-custom::after {
    content: '';
    width: 5px; height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -1px;
}

/* ── Buttons ──
   .das-btn-spinner is HIDDEN by default (display:none).
   Only .das-btn-loading makes it appear.
*/
.das-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 22px;
    height: 46px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all .18s ease;
    text-decoration: none !important;
    white-space: nowrap;
    outline: none;
    position: relative;
    letter-spacing: -.01em;
}

.das-btn-primary { background: #635BFF; color: #fff; }
.das-btn-primary:hover { background: #5449e6; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(99,91,255,.32); }
.das-btn-primary:active { transform: none; box-shadow: none; }

.das-btn-ghost { background: transparent; color: #425466; border: 1.5px solid #e2e8f0; }
.das-btn-ghost:hover { background: #f8fafc; border-color: #c7d2dc; }

.das-btn-full { width: 100%; }

/* SPINNER — hidden by default, shown only when .das-btn-loading is added by JS */
/* CSS-only spinner — no SVG animation, works reliably with display:none */
.das-btn-spinner {
    width: 20px;
    height: 20px;
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -10px;
    margin-top: -10px;
    border: 2.5px solid rgba(255,255,255,0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    pointer-events: none;
    /* Animation defined but NOT running — only runs when visible */
    animation: das-spin 0.7s linear infinite;
    animation-play-state: paused;
}

.das-btn.das-btn-loading .das-btn-spinner {
    display: block !important;
    animation-play-state: running !important;
}
.das-btn.das-btn-loading .das-btn-text,
.das-btn.das-btn-loading .das-btn-arrow  { opacity: 0; }
.das-btn.das-btn-loading { pointer-events: none; opacity: .82; }

.das-btn-arrow { width: 17px; height: 17px; transition: transform .18s ease; }
.das-btn:hover .das-btn-arrow { transform: translateX(3px); }

/* ── Links ── */
.das-form-link, .das-form-link:hover, .das-form-link:visited {
    font-size: 13px;
    font-weight: 500;
    color: #425466;
    text-decoration: none !important;
    transition: color .15s ease;
}
.das-form-link:hover { color: #0A2540; }
.das-form-link-accent, .das-form-link-accent:visited { color: #635BFF; }
.das-form-link-accent:hover { color: #5449e6; }

/* ── Footer ── */
.das-auth-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}
.das-auth-footer p { font-size: 14px; color: #425466; }
.das-auth-footer a { text-decoration: none !important; }

/* ── OTP Inputs ── */
.das-otp-info { text-align: center; margin-bottom: 24px; }

.das-otp-icon-wrap {
    width: 54px; height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg,#eff6ff,#ede9fe);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
}
.das-otp-icon-wrap svg { width: 26px; height: 26px; color: #635BFF; }

.das-otp-text { font-size: 14.5px; color: #425466; line-height: 1.55; }
.das-otp-text strong { color: #0A2540; font-weight: 600; }

.das-otp-inputs {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 18px;
}

.das-otp-digit {
    width: 52px; height: 58px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    font-family: 'Inter', monospace;
    color: #0A2540;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    outline: none;
    transition: all .18s ease;
    background: #fff;
    caret-color: #635BFF;
}
.das-otp-digit:hover { border-color: #c7d2dc; }
.das-otp-digit:focus { border-color: #635BFF; box-shadow: 0 0 0 3px rgba(99,91,255,.13); }
.das-otp-digit.das-otp-filled { border-color: #635BFF; background: #faf8ff; }

.das-otp-resend { text-align: center; margin-bottom: 20px; font-size: 13.5px; color: #8898aa; }
.das-otp-resend button {
    background: none; border: none; font-family: inherit; font-size: 13.5px;
    cursor: pointer; color: #635BFF; padding: 0; text-decoration: none;
}
.das-otp-resend button:hover { color: #5449e6; }

/* ── Success ── */
.das-success-wrap { text-align: center; padding: 28px 0; }
.das-success-icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: #ecfdf5;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    animation: das-pop .4s ease;
}
.das-success-icon svg { width: 32px; height: 32px; color: #16a34a; }
@keyframes das-pop { 0%{transform:scale(.5);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
.das-success-wrap h2 { font-size: 22px; font-weight: 700; color: #0A2540; margin-bottom: 7px; letter-spacing:-.3px; }
.das-success-wrap p  { font-size: 14.5px; color: #425466; }

/* ── Form Steps ── */
.das-form-step { display: none; }
.das-form-step-active { display: block; animation: das-fade .28s ease; }
@keyframes das-fade { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:none} }

/* ── Responsive ── */
@media (max-width: 760px) {
    .das-auth-wrapper { padding: 0; align-items: stretch; background: #fff; }
    .das-auth-container { flex-direction: column; border-radius: 0; box-shadow: none; min-height: 100vh; }
    .das-auth-decor { display: none; }
    .das-auth-card { padding: 32px 20px; max-width: 100%; }
    .das-auth-title { font-size: 21px; }
    .das-step-label { display: none; }
    .das-step-line { width: 28px; }
    .das-otp-digit { width: 46px; height: 52px; font-size: 20px; }
    .das-otp-inputs { gap: 8px; }
}
@media (max-width: 380px) {
    .das-auth-card { padding: 24px 14px; }
    .das-otp-digit { width: 40px; height: 46px; font-size: 18px; }
    .das-otp-inputs { gap: 6px; }
}

@keyframes das-spin { to { transform: rotate(360deg); } }


/* ── Auth Decor SVG Animations ── */
.das-decor-svg {
    width: 100%;
    height: 100%;
    max-width: 440px;
    display: block;
    position: relative;
    z-index: 1;
}

.das-svg-glow {
    animation: das-svg-pulse 6s ease-in-out infinite;
}
@keyframes das-svg-pulse {
    0%,100% { opacity:.5; transform-origin:240px 300px; transform:scale(1); }
    50%      { opacity:1;  transform:scale(1.12); }
}

.das-orbit-1 { animation: das-rotate-cw  18s linear infinite; transform-origin: 240px 300px; }
.das-orbit-2 { animation: das-rotate-ccw 12s linear infinite; transform-origin: 240px 300px; }
.das-orbit-3 { animation: das-rotate-cw  8s  linear infinite; transform-origin: 240px 300px; }

@keyframes das-rotate-cw  { to { transform: rotate(360deg);  } }
@keyframes das-rotate-ccw { to { transform: rotate(-360deg); } }

/* Floating particles */
.das-p1 { animation: das-float1 5s ease-in-out infinite; }
.das-p2 { animation: das-float2 6s ease-in-out infinite 1s; }
.das-p3 { animation: das-float1 7s ease-in-out infinite 2s; }
.das-p4 { animation: das-float2 5.5s ease-in-out infinite 0.5s; }
.das-p5 { animation: das-float1 6.5s ease-in-out infinite 1.5s; }
.das-p6 { animation: das-float2 5s ease-in-out infinite 3s; }
.das-p7 { animation: das-float1 8s ease-in-out infinite 0.8s; }
.das-p8 { animation: das-float2 7s ease-in-out infinite 2.2s; }

@keyframes das-float1 {
    0%,100% { transform: translateY(0)   opacity:.5; }
    50%      { transform: translateY(-12px); opacity:1; }
}
@keyframes das-float2 {
    0%,100% { transform: translateY(0)   opacity:.4; }
    50%      { transform: translateY(10px); opacity:.9; }
}

/* Center icon breathe */
.das-center-icon { animation: das-breathe 4s ease-in-out infinite; transform-origin: 240px 290px; }
@keyframes das-breathe {
    0%,100% { transform: scale(1);    opacity:.9; }
    50%      { transform: scale(1.06); opacity:1;  }
}

/* Checkmark draw */
.das-check { stroke-dasharray: 24; stroke-dashoffset: 24; animation: das-draw 1.2s ease-out 0.6s forwards; }
@keyframes das-draw { to { stroke-dashoffset: 0; } }

/* Badges float in */
.das-badge-1 { animation: das-badge-in 0.8s ease-out 0.3s both; }
.das-badge-2 { animation: das-badge-in 0.8s ease-out 0.6s both; }
.das-badge-3 { animation: das-badge-in 0.8s ease-out 0.9s both; }
@keyframes das-badge-in {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0);    }
}