/* ============================================================
   NadPoint Account Popup v6 — 8 Premium Design Themes
   ============================================================ */

/* ── CSS Variables ──────────────────────────────────────────── */
:root {
    --ndp-primary:       #c59b27;
    --ndp-primary-dark:  #a07820;
    --ndp-primary-light: #fef3c7;
    --ndp-danger:        #ef4444;
    --ndp-success:       #10b981;
    --ndp-info:          #3b82f6;
    --ndp-surface:       #f9fafb;
    --ndp-text:          #1f2937;
    --ndp-muted:         #6b7280;
    --ndp-divider:       #e5e7eb;
    --ndp-radius:        24px;
    --ndp-field-radius:  10px;
    --ndp-btn-radius:    12px;
    --ndp-anim-speed:    350ms;
    --ndp-font:          'Inter', 'Segoe UI', system-ui, sans-serif;
    --ndp-popup-bg:      #ffffff;
    --ndp-overlay-bg:    rgba(0,0,0,0.65);
    --ndp-shadow:        0 40px 100px rgba(0,0,0,0.22);
    --ndp-tab-active:    var(--ndp-primary);
    --ndp-field-bg:      #f9fafb;
    --ndp-field-border:  #d1d5db;
    --ndp-field-focus:   var(--ndp-primary);
    --ndp-btn-start:     #c59b27;
    --ndp-btn-end:       #d4af37;
    --ndp-btn-text:      #ffffff;
    --ndp-label:         #374151;
    --ndp-placeholder:   #9ca3af;
    --ndp-link:          var(--ndp-primary);
    --ndp-error-bg:      #fef2f2;
    --ndp-error-text:    #dc2626;
    --ndp-success-bg:    #f0fdf4;
    --ndp-success-text:  #16a34a;
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes ndpPopFadeIn   { from { opacity:0; transform:scale(.88) translateY(16px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes ndpSlideUp     { from { opacity:0; transform:translateY(48px); } to { opacity:1; transform:translateY(0); } }
@keyframes ndpZoomIn      { from { opacity:0; transform:scale(.72); } to { opacity:1; transform:scale(1); } }
@keyframes ndpFlipIn      { from { opacity:0; transform:perspective(800px) rotateX(-20deg); } to { opacity:1; transform:perspective(800px) rotateX(0); } }
@keyframes ndpBounceIn    { 0%{opacity:0;transform:scale(.5)} 60%{transform:scale(1.06)} 80%{transform:scale(.97)} 100%{opacity:1;transform:scale(1)} }
@keyframes ndpSpin        { to { transform:rotate(360deg); } }
@keyframes ndpShake       { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} }
@keyframes ndpFadeIn      { from{opacity:0} to{opacity:1} }
@keyframes ndpSlideDown   { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
@keyframes ndpStrengthPulse { 0%,100%{transform:scaleX(1)} 50%{transform:scaleX(1.03)} }
@keyframes ndpBadgePop    { 0%{transform:scale(0)} 60%{transform:scale(1.15)} 100%{transform:scale(1)} }
@keyframes ndpGradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes ndpFloatIn     { from{opacity:0;transform:translateY(20px) scale(.95)} to{opacity:1;transform:translateY(0) scale(1)} }

/* ── Overlay ─────────────────────────────────────────────────── */
.ndp-overlay {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    background: var(--ndp-overlay-bg);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
    padding: 16px;
}
.ndp-overlay.ndp-open {
    opacity: 1; pointer-events: all;
}

/* ── Popup Shell ─────────────────────────────────────────────── */
.ndp-popup {
    position: relative;
    width: min(540px, 100%);
    max-height: min(90vh, 820px);
    overflow-y: auto;
    background: var(--ndp-popup-bg);
    border-radius: var(--ndp-radius);
    box-shadow: var(--ndp-shadow);
    font-family: var(--ndp-font);
    font-size: 0.95rem;
    color: var(--ndp-text);
    scrollbar-width: thin;
    scrollbar-color: var(--ndp-divider) transparent;
}
.ndp-popup::-webkit-scrollbar { width: 5px; }
.ndp-popup::-webkit-scrollbar-thumb { background: var(--ndp-divider); border-radius: 3px; }
.ndp-popup-inner { padding: 40px 44px; }
@media (max-width: 480px) { .ndp-popup-inner { padding: 28px 22px; } }

/* Animation helpers */
.ndp-popup.anim-popFadeIn  { animation: ndpPopFadeIn var(--ndp-anim-speed) cubic-bezier(.175,.885,.32,1.275) both; }
.ndp-popup.anim-slideUp    { animation: ndpSlideUp var(--ndp-anim-speed) ease both; }
.ndp-popup.anim-zoomIn     { animation: ndpZoomIn var(--ndp-anim-speed) cubic-bezier(.34,1.56,.64,1) both; }
.ndp-popup.anim-flipIn     { animation: ndpFlipIn var(--ndp-anim-speed) ease both; }
.ndp-popup.anim-bounceIn   { animation: ndpBounceIn var(--ndp-anim-speed) ease both; }

/* ── Close Button ────────────────────────────────────────────── */
.ndp-close-btn {
    position: absolute; top: 16px; right: 16px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
    background: #f3f4f6; color: #6b7280; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s, transform .2s;
}
.ndp-close-btn:hover { background: #e5e7eb; color: #111827; transform: scale(1.12); }

/* ── Greeting ────────────────────────────────────────────────── */
.ndp-greeting { font-size: 1.55rem; font-weight: 700; color: #111827; margin: 0 0 4px; line-height: 1.2; }
.ndp-greeting-sub { font-size: .88rem; color: var(--ndp-muted); margin: 0 0 24px; }

/* ── Tabs ────────────────────────────────────────────────────── */
.ndp-tabs { display: flex; border-bottom: 2px solid var(--ndp-divider); margin-bottom: 26px; gap: 2px; }
.ndp-tab {
    flex: 1; padding: 13px 8px; background: none; border: none; cursor: pointer;
    font-size: .88rem; font-weight: 600; color: var(--ndp-muted);
    border-bottom: 2.5px solid transparent; margin-bottom: -2px;
    transition: color .2s, border-color .2s;
}
.ndp-tab:hover  { color: var(--ndp-text); }
.ndp-tab.active { color: var(--ndp-tab-active); border-bottom-color: var(--ndp-tab-active); }

/* Tab panels */
.ndp-tab-panel { display: none; }
.ndp-tab-panel.active { display: block; animation: ndpFloatIn .28s ease both; }

/* ── Form core ───────────────────────────────────────────────── */
.ndp-form-group { margin-bottom: 16px; }
.ndp-label { display: block; font-size: .82rem; font-weight: 600; color: var(--ndp-label); margin-bottom: 6px; }
.ndp-input-wrap { position: relative; }
.ndp-input {
    width: 100%; box-sizing: border-box;
    padding: 12px 16px; height: 50px;
    border: 1.5px solid var(--ndp-field-border);
    border-radius: var(--ndp-field-radius);
    background: var(--ndp-field-bg); color: var(--ndp-text);
    font-size: .9rem; font-family: inherit;
    transition: border-color .2s, box-shadow .2s, background .2s;
    outline: none;
}
.ndp-input::placeholder { color: var(--ndp-placeholder); }
.ndp-input:focus {
    border-color: var(--ndp-field-focus);
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ndp-field-focus) 15%, transparent);
}
.ndp-input.has-error { border-color: var(--ndp-danger); }
.ndp-input.has-success { border-color: var(--ndp-success); }
.ndp-input-icon {
    position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
    color: var(--ndp-placeholder); font-size: .9rem; pointer-events: none;
}
.ndp-input-icon-left { right: auto; left: 14px; }
.ndp-input.with-icon-left { padding-left: 42px; }
.ndp-input.with-icon-right { padding-right: 42px; }

/* Password toggle */
.ndp-pw-toggle { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 4px; color: var(--ndp-placeholder); }
.ndp-pw-toggle:hover { color: var(--ndp-text); }

/* Field status icons */
.ndp-field-status { position: absolute; top: 50%; right: 42px; transform: translateY(-50%); font-size: .85rem; transition: opacity .2s; }

/* ── Password strength bar ───────────────────────────────────── */
.ndp-strength-bar { height: 4px; border-radius: 4px; background: var(--ndp-divider); margin-top: 6px; overflow: hidden; }
.ndp-strength-fill {
    height: 100%; border-radius: 4px;
    transition: width .35s ease, background .35s;
    animation: ndpStrengthPulse 1.2s ease infinite;
}
.ndp-strength-0  { width: 0%; }
.ndp-strength-1  { width: 20%; background: #ef4444; }
.ndp-strength-2  { width: 40%; background: #f97316; }
.ndp-strength-3  { width: 60%; background: #eab308; }
.ndp-strength-4  { width: 80%; background: #84cc16; }
.ndp-strength-5  { width: 100%; background: #10b981; }
.ndp-strength-label { font-size: .74rem; color: var(--ndp-muted); margin-top: 4px; text-align: right; }

/* ── Submit button ───────────────────────────────────────────── */
.ndp-submit-btn {
    width: 100%; height: 52px; border: none; border-radius: var(--ndp-btn-radius);
    background: linear-gradient(135deg, var(--ndp-btn-start), var(--ndp-btn-end));
    color: var(--ndp-btn-text); font-size: .95rem; font-weight: 700;
    cursor: pointer; margin-top: 8px; position: relative; overflow: hidden;
    transition: transform .2s, box-shadow .2s, filter .2s;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--ndp-btn-start) 45%, transparent);
    letter-spacing: .02em;
}
.ndp-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px color-mix(in srgb, var(--ndp-btn-start) 55%, transparent); }
.ndp-submit-btn:active { transform: translateY(0); }
.ndp-submit-btn.loading { filter: brightness(0.9); cursor: wait; }
.ndp-submit-btn.loading::after {
    content: ''; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: inherit;
}
.ndp-btn-spinner { display: inline-block; width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: ndpSpin .7s linear infinite; vertical-align: middle; margin-right: 8px; }
.ndp-btn-label { vertical-align: middle; }

/* ── Message block ───────────────────────────────────────────── */
.ndp-message {
    padding: 12px 16px; border-radius: 9px; margin: 0 0 14px;
    font-size: .86rem; font-weight: 600; line-height: 1.4;
    animation: ndpSlideDown .25s ease both;
}
.ndp-message[hidden] { display: none; }
.ndp-msg-error   { background: var(--ndp-error-bg); color: var(--ndp-error-text); border: 1px solid color-mix(in srgb, var(--ndp-danger) 30%, transparent); }
.ndp-msg-success { background: var(--ndp-success-bg); color: var(--ndp-success-text); border: 1px solid color-mix(in srgb, var(--ndp-success) 30%, transparent); }

/* ── Social Login ────────────────────────────────────────────── */
.ndp-social-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--ndp-muted); font-size: .82rem; font-weight: 500; }
.ndp-social-divider::before, .ndp-social-divider::after { content: ''; flex: 1; height: 1px; background: var(--ndp-divider); }
.ndp-social-grid { display: grid; gap: 10px; }
.ndp-social-grid.cols-1 { grid-template-columns: 1fr; }
.ndp-social-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.ndp-social-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.ndp-social-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 46px; border-radius: 10px; border: 1.5px solid var(--ndp-divider);
    background: #fff; cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--ndp-text);
    transition: border-color .2s, box-shadow .2s, transform .15s;
}
.ndp-social-btn:hover { border-color: var(--ndp-primary); box-shadow: 0 4px 16px rgba(0,0,0,.07); transform: translateY(-1px); }
.ndp-social-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.ndp-google-btn  { }
.ndp-apple-btn   { background: #000; color: #fff; border-color: #000; }
.ndp-apple-btn:hover { background: #1a1a1a; }
.ndp-whatsapp-btn { border-color: #25d366; }
.ndp-whatsapp-btn:hover { border-color: #128c7e; }

/* ── Role Toggle ─────────────────────────────────────────────── */
.ndp-role-toggle { display: flex; background: var(--ndp-surface); border-radius: 30px; padding: 4px; margin-bottom: 22px; gap: 4px; }
.ndp-role-btn { flex: 1; padding: 9px 12px; border-radius: 30px; border: none; background: none; cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--ndp-muted); transition: background .2s, color .2s; }
.ndp-role-btn.active { background: #fff; color: var(--ndp-primary); box-shadow: 0 2px 8px rgba(0,0,0,.08); }

/* ── Phone Dialer ────────────────────────────────────────────── */
.ndp-phone-wrap { display: flex; gap: 8px; }
.ndp-country-trigger {
    display: flex; align-items: center; gap: 6px; padding: 0 12px;
    height: 50px; border: 1.5px solid var(--ndp-field-border);
    border-radius: var(--ndp-field-radius); background: var(--ndp-field-bg);
    cursor: pointer; white-space: nowrap; font-size: .9rem; color: var(--ndp-text);
    flex-shrink: 0; transition: border-color .2s;
}
.ndp-country-trigger:hover { border-color: var(--ndp-field-focus); }
.ndp-country-flag { width: 22px; font-size: 1.2rem; }
.ndp-country-code { font-weight: 600; font-size: .85rem; }
.ndp-country-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 1000;
    width: min(320px, 90vw); max-height: 320px; overflow-y: auto;
    background: #fff; border: 1.5px solid var(--ndp-divider); border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,.14); padding: 8px;
    animation: ndpSlideDown .2s ease;
}
.ndp-country-search {
    width: 100%; box-sizing: border-box; padding: 9px 12px;
    border: 1.5px solid var(--ndp-divider); border-radius: 8px;
    font-size: .88rem; margin-bottom: 8px; outline: none;
}
.ndp-country-search:focus { border-color: var(--ndp-field-focus); }
.ndp-country-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: .88rem; }
.ndp-country-item:hover { background: var(--ndp-surface); }
.ndp-country-item.preferred { border-bottom: 1px solid var(--ndp-divider); margin-bottom: 4px; padding-bottom: 12px; }
.ndp-country-name { flex: 1; }
.ndp-country-dial { color: var(--ndp-muted); font-size: .82rem; }

/* ── WhatsApp OTP Inline ─────────────────────────────────────── */
.ndp-otp-row { display: flex; gap: 8px; margin-top: 6px; }
.ndp-otp-input {
    flex: 1; height: 50px; text-align: center; letter-spacing: .25em;
    font-size: 1.3rem; font-weight: 700; border: 1.5px solid var(--ndp-divider);
    border-radius: var(--ndp-field-radius); background: var(--ndp-surface); outline: none;
    transition: border-color .2s;
}
.ndp-otp-input:focus { border-color: var(--ndp-field-focus); background: #fff; }
.ndp-otp-send-btn, .ndp-otp-verify-btn {
    height: 50px; padding: 0 18px; border-radius: var(--ndp-field-radius);
    border: none; cursor: pointer; font-weight: 600; font-size: .88rem;
    transition: transform .15s, box-shadow .2s;
}
.ndp-otp-send-btn { background: var(--ndp-surface); color: var(--ndp-text); border: 1.5px solid var(--ndp-divider); }
.ndp-otp-send-btn:hover { background: var(--ndp-divider); }
.ndp-otp-verify-btn { background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; box-shadow: 0 4px 16px rgba(37,211,102,.3); }
.ndp-otp-verify-btn:hover { transform: translateY(-1px); }
.ndp-phone-verified-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: #f0fdf4; color: #16a34a; border-radius: 20px; font-size: .82rem; font-weight: 600; animation: ndpBadgePop .35s cubic-bezier(.175,.885,.32,1.275) both; }

/* ── Forgot / Reset flow ─────────────────────────────────────── */
.ndp-reset-step { display: none; }
.ndp-reset-step.active { display: block; animation: ndpFloatIn .28s ease; }
.ndp-form-actions-row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: .84rem; }
.ndp-form-actions-row a { color: var(--ndp-link); text-decoration: none; font-weight: 500; }
.ndp-form-actions-row a:hover { text-decoration: underline; }
.ndp-back-btn { background: none; border: none; color: var(--ndp-muted); cursor: pointer; font-size: .84rem; display: flex; align-items: center; gap: 4px; padding: 0; }
.ndp-back-btn:hover { color: var(--ndp-text); }

/* ── Legal / Checkbox ────────────────────────────────────────── */
.ndp-checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: .84rem; color: var(--ndp-muted); margin-bottom: 10px; }
.ndp-checkbox-row a { color: var(--ndp-link); text-decoration: underline; }
.ndp-checkbox-custom { width: 18px; height: 18px; min-width: 18px; border: 1.5px solid var(--ndp-divider); border-radius: 5px; background: var(--ndp-surface); cursor: pointer; appearance: none; -webkit-appearance: none; position: relative; }
.ndp-checkbox-custom:checked { background: var(--ndp-primary); border-color: var(--ndp-primary); }
.ndp-checkbox-custom:checked::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .75rem; font-weight: 700; }

/* ── Vendor Badge ────────────────────────────────────────────── */
.ndp-vendor-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
    background: linear-gradient(135deg, var(--ndp-btn-start), var(--ndp-btn-end));
    color: var(--ndp-btn-text); border-radius: 20px; font-size: .78rem;
    font-weight: 700; margin-bottom: 16px; letter-spacing: .04em;
    animation: ndpBadgePop .4s cubic-bezier(.175,.885,.32,1.275) both;
}

/* ── Split layout (Aurora Split & similar) ───────────────────── */
.ndp-overlay.ndp-layout-split .ndp-popup {
    display: grid; grid-template-columns: 280px 1fr;
    max-width: 800px; max-height: 600px; border-radius: var(--ndp-radius); overflow: hidden;
}
.ndp-split-hero {
    background: linear-gradient(160deg, #667eea 0%, #764ba2 100%);
    padding: 40px 30px; display: flex; flex-direction: column; justify-content: center;
    color: #fff;
}
.ndp-split-hero h2 { font-size: 1.6rem; font-weight: 800; margin: 0 0 12px; }
.ndp-split-hero p  { font-size: .9rem; opacity: .85; margin: 0 0 24px; line-height: 1.5; }
.ndp-split-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ndp-split-bullets li { display: flex; align-items: center; gap: 8px; font-size: .87rem; }
.ndp-split-hero-brand { font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: 30px; }

/* ── Sidebar layout ──────────────────────────────────────────── */
.ndp-overlay.ndp-layout-sidebar_right { align-items: stretch; justify-content: flex-end; padding: 0; }
.ndp-overlay.ndp-layout-sidebar_left  { align-items: stretch; justify-content: flex-start; padding: 0; }
.ndp-overlay.ndp-layout-sidebar_right .ndp-popup,
.ndp-overlay.ndp-layout-sidebar_left  .ndp-popup {
    width: min(420px, 100%); max-height: 100vh; height: 100%; border-radius: 0; margin: 0;
}
.ndp-overlay.ndp-layout-sidebar_right .ndp-popup { animation: ndpSidebarRight .35s ease both; }
.ndp-overlay.ndp-layout-sidebar_left  .ndp-popup { animation: ndpSidebarLeft .35s ease both; }
@keyframes ndpSidebarRight { from{transform:translateX(100%)} to{transform:translateX(0)} }
@keyframes ndpSidebarLeft  { from{transform:translateX(-100%)} to{transform:translateX(0)} }

/* Drawer layout */
.ndp-overlay.ndp-layout-drawer { align-items: flex-end; padding: 0; }
.ndp-overlay.ndp-layout-drawer .ndp-popup { width: 100%; max-width: 100%; border-radius: 24px 24px 0 0; animation: ndpSlideUp .35s ease both; max-height: 95vh; }

/* Fullscreen layout */
.ndp-overlay.ndp-layout-fullscreen { padding: 0; }
.ndp-overlay.ndp-layout-fullscreen .ndp-popup { width: 100%; max-width: 100%; height: 100%; max-height: 100vh; border-radius: 0; }

/* ════════════════════════════════════════════════════════════════
   THEME OVERRIDES — 8 Premium Designs
   ════════════════════════════════════════════════════════════════ */

/* ── Theme 1: Luxury Gold (DEFAULT — vars already set above) ─── */
.ndp-design-luxury_gold {}

/* ── Theme 2: Midnight Glass ────────────────────────────────── */
.ndp-design-midnight_glass {
    --ndp-popup-bg:       rgba(14,17,35,0.88);
    --ndp-tab-active:     #818cf8;
    --ndp-field-bg:       rgba(255,255,255,.05);
    --ndp-field-border:   rgba(255,255,255,.1);
    --ndp-field-focus:    #818cf8;
    --ndp-btn-start:      #6366f1;
    --ndp-btn-end:        #818cf8;
    --ndp-text:           #f1f5f9;
    --ndp-label:          #94a3b8;
    --ndp-muted:          #64748b;
    --ndp-placeholder:    rgba(255,255,255,.3);
    --ndp-divider:        rgba(255,255,255,.08);
    --ndp-surface:        rgba(255,255,255,.04);
    --ndp-link:           #818cf8;
    --ndp-shadow:         0 40px 100px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.08);
}
.ndp-design-midnight_glass .ndp-popup { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.ndp-design-midnight_glass .ndp-social-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #e2e8f0; }
.ndp-design-midnight_glass .ndp-role-toggle { background: rgba(255,255,255,.05); }
.ndp-design-midnight_glass .ndp-role-btn.active { background: rgba(255,255,255,.1); }
.ndp-design-midnight_glass .ndp-country-trigger { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.ndp-design-midnight_glass .ndp-country-dropdown { background: #1e2035; }
.ndp-design-midnight_glass .ndp-country-item:hover { background: rgba(255,255,255,.06); }
.ndp-design-midnight_glass .ndp-close-btn { background: rgba(255,255,255,.08); color: #94a3b8; }

/* ── Theme 3: Aurora Split ──────────────────────────────────── */
.ndp-design-aurora_split {
    --ndp-primary:    #667eea;
    --ndp-tab-active: #667eea;
    --ndp-btn-start:  #667eea;
    --ndp-btn-end:    #764ba2;
    --ndp-link:       #667eea;
    --ndp-field-focus:#667eea;
}
.ndp-design-aurora_split .ndp-popup {
    display: grid; grid-template-columns: 260px 1fr; min-height: 520px;
}
.ndp-design-aurora_split .ndp-split-hero { display: flex; }
.ndp-design-aurora_split .ndp-popup-inner { overflow-y: auto; }

/* ── Theme 4: Neon Edge ─────────────────────────────────────── */
.ndp-design-neon_edge {
    --ndp-popup-bg:     #0a0a0a;
    --ndp-text:         #ffffff;
    --ndp-label:        #a0a0a0;
    --ndp-muted:        #666;
    --ndp-placeholder:  #444;
    --ndp-divider:      #1a1a1a;
    --ndp-surface:      #111;
    --ndp-field-bg:     #111;
    --ndp-field-border: #222;
    --ndp-field-focus:  #00ff9d;
    --ndp-tab-active:   #00ff9d;
    --ndp-btn-start:    #00ff9d;
    --ndp-btn-end:      #00c9ff;
    --ndp-btn-text:     #0a0a0a;
    --ndp-link:         #00ff9d;
    --ndp-shadow:       0 40px 100px rgba(0,255,157,.12), 0 0 0 1px #1a1a1a;
    --ndp-font:         'JetBrains Mono','Fira Code','Courier New',monospace;
}
.ndp-design-neon_edge .ndp-input:focus { box-shadow: 0 0 0 2px rgba(0,255,157,.25); }
.ndp-design-neon_edge .ndp-submit-btn { text-transform: uppercase; letter-spacing: .08em; }
.ndp-design-neon_edge .ndp-social-btn { background: #111; border-color: #222; color: #fff; }
.ndp-design-neon_edge .ndp-greeting { color: #00ff9d; font-family: var(--ndp-font); }

/* ── Theme 5: Sakura Soft ───────────────────────────────────── */
.ndp-design-sakura_soft {
    --ndp-popup-bg:     #fff0f6;
    --ndp-radius:       32px;
    --ndp-btn-radius:   30px;
    --ndp-field-radius: 14px;
    --ndp-primary:      #e91e8c;
    --ndp-tab-active:   #e91e8c;
    --ndp-btn-start:    #e91e8c;
    --ndp-btn-end:      #f368b0;
    --ndp-link:         #e91e8c;
    --ndp-field-bg:     rgba(255,255,255,.8);
    --ndp-field-border: #f9c4e0;
    --ndp-field-focus:  #e91e8c;
    --ndp-surface:      rgba(255,255,255,.5);
    --ndp-divider:      #fce4ef;
    --ndp-shadow:       0 30px 80px rgba(233,30,140,.15);
}
.ndp-design-sakura_soft .ndp-popup { background: linear-gradient(160deg, #fff0f6 0%, #f8d7eb 100%); }
.ndp-design-sakura_soft .ndp-social-btn { background: rgba(255,255,255,.8); }
.ndp-design-sakura_soft .ndp-tabs { border-bottom-color: #fce4ef; }

/* ── Theme 6: Forest Dark ───────────────────────────────────── */
.ndp-design-forest_dark {
    --ndp-popup-bg:     #1a2a1e;
    --ndp-text:         #e2f5e8;
    --ndp-label:        #86cfaa;
    --ndp-muted:        #5a8c6a;
    --ndp-divider:      rgba(255,255,255,.08);
    --ndp-surface:      rgba(255,255,255,.04);
    --ndp-field-bg:     rgba(255,255,255,.06);
    --ndp-field-border: rgba(255,255,255,.1);
    --ndp-field-focus:  #4ade80;
    --ndp-primary:      #4ade80;
    --ndp-tab-active:   #4ade80;
    --ndp-btn-start:    #22c55e;
    --ndp-btn-end:      #4ade80;
    --ndp-btn-text:     #14532d;
    --ndp-link:         #4ade80;
    --ndp-placeholder:  rgba(255,255,255,.25);
    --ndp-shadow:       0 40px 100px rgba(0,0,0,.6);
}
.ndp-design-forest_dark .ndp-close-btn { background: rgba(255,255,255,.08); color: #86cfaa; }
.ndp-design-forest_dark .ndp-social-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #e2f5e8; }
.ndp-design-forest_dark .ndp-role-toggle { background: rgba(255,255,255,.05); }
.ndp-design-forest_dark .ndp-role-btn.active { background: rgba(74,222,128,.15); color: #4ade80; }

/* ── Theme 7: Royal Cobalt ──────────────────────────────────── */
.ndp-design-royal_cobalt {
    --ndp-popup-bg:     #f0f4ff;
    --ndp-radius:       16px;
    --ndp-field-radius: 8px;
    --ndp-btn-radius:   8px;
    --ndp-primary:      #1d4ed8;
    --ndp-tab-active:   #1d4ed8;
    --ndp-btn-start:    #1d4ed8;
    --ndp-btn-end:      #3b82f6;
    --ndp-link:         #1d4ed8;
    --ndp-field-bg:     #ffffff;
    --ndp-field-border: #c7d2fe;
    --ndp-field-focus:  #1d4ed8;
    --ndp-surface:      #e0e8ff;
    --ndp-divider:      #c7d2fe;
    --ndp-shadow:       0 30px 80px rgba(29,78,216,.2), 0 0 0 1px #c7d2fe;
}
.ndp-design-royal_cobalt .ndp-submit-btn { border-radius: 8px; text-transform: uppercase; font-size: .85rem; letter-spacing: .06em; }
.ndp-design-royal_cobalt .ndp-tabs { border-bottom-color: #c7d2fe; }
.ndp-design-royal_cobalt .ndp-popup { border: 1px solid #c7d2fe; }

/* ── Theme 8: Sunset Warm ───────────────────────────────────── */
.ndp-design-sunset_warm {
    --ndp-popup-bg:     #fff8f0;
    --ndp-radius:       20px;
    --ndp-field-radius: 12px;
    --ndp-btn-radius:   50px;
    --ndp-primary:      #f97316;
    --ndp-tab-active:   #f97316;
    --ndp-btn-start:    #f97316;
    --ndp-btn-end:      #ef4444;
    --ndp-link:         #f97316;
    --ndp-field-bg:     #ffffff;
    --ndp-field-border: #fed7aa;
    --ndp-field-focus:  #f97316;
    --ndp-surface:      #fff0e0;
    --ndp-divider:      #fed7aa;
    --ndp-shadow:       0 30px 80px rgba(249,115,22,.18);
}
.ndp-design-sunset_warm .ndp-popup { background: linear-gradient(160deg, #fff8f0, #fff0e0); }
.ndp-design-sunset_warm .ndp-tabs { border-bottom-color: #fed7aa; }
.ndp-design-sunset_warm .ndp-social-btn { border-color: #fed7aa; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ndp-design-aurora_split .ndp-popup { grid-template-columns: 1fr; }
    .ndp-design-aurora_split .ndp-split-hero { min-height: 120px; padding: 22px 24px; }
    .ndp-social-grid.cols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .ndp-popup-inner { padding: 24px 18px; }
    .ndp-social-grid.cols-2 { grid-template-columns: 1fr; }
}

/* ── Social auth grid (portal templates) ───────────────────── */
.ndp-social-divider {
    text-align: center; font-size: .8rem; color: var(--ndp-muted, #9ca3af);
    position: relative; margin: 16px 0;
}
.ndp-social-divider::before,.ndp-social-divider::after {
    content: ''; position: absolute; top: 50%; width: 40%;
    height: 1px; background: var(--ndp-divider, #e5e7eb);
}
.ndp-social-divider::before { left: 0; }
.ndp-social-divider::after  { right: 0; }
.ndp-social-grid { display: grid; gap: 10px; margin-bottom: 16px; }
.ndp-social-grid.cols-1 { grid-template-columns: 1fr; }
.ndp-social-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.ndp-social-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.ndp-social-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 46px; border: 1.5px solid var(--ndp-divider, #e5e7eb);
    border-radius: 10px; background: #fff; cursor: pointer; font-size: .88rem;
    font-weight: 600; color: var(--ndp-text, #1f2937); transition: all .2s;
    padding: 0 14px; white-space: nowrap;
}
.ndp-social-btn:hover { border-color: var(--ndp-primary, #c59b27); box-shadow: 0 2px 10px rgba(0,0,0,.08); }

/* ── Password strength bar ──────────────────────────────────── */
.ndp-strength-bar { height: 4px; border-radius: 4px; background: var(--ndp-divider,#e5e7eb); margin: 6px 0 2px; overflow: hidden; }
.ndp-strength-fill { height: 100%; border-radius: 4px; transition: width .3s, background .3s; width: 0; }
.ndp-strength-0 { width: 0; }
.ndp-strength-1 { width: 20%; background: #ef4444; }
.ndp-strength-2 { width: 40%; background: #f97316; }
.ndp-strength-3 { width: 60%; background: #eab308; }
.ndp-strength-4 { width: 80%; background: #22c55e; }
.ndp-strength-5 { width: 100%; background: #10b981; }

/* ── Required asterisk ──────────────────────────────────────── */
.ndp-req { color: #ef4444; }

/* ── Cross-form navigation links (inside portals) ───────────── */
[data-portal-open] { cursor: pointer; color: var(--ndp-primary, #c59b27); font-weight: 600; text-decoration: none; }
[data-portal-open]:hover { text-decoration: underline; }
.ndp-portal-forgot { color: var(--ndp-primary, #c59b27); font-weight: 600; }

/* ── Shake animation (used on error) ────────────────────────── */
@keyframes ndpShake {
    0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
}

/* ── Back buttons in reset flow ─────────────────────────────── */
.ndp-back-btn { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--ndp-muted,#6b7280); cursor: pointer; padding: 0; background: none; border: none; }
.ndp-back-btn:hover { color: var(--ndp-text,#111827); }

/* ── Message blocks in portals ──────────────────────────────── */
.ndp-message { padding: 10px 14px; border-radius: 8px; font-size: .88rem; font-weight: 500; margin-bottom: 12px; }
.ndp-msg-error   { background: #fef2f2; color: #dc2626; border: 1px solid #fee2e2; }
.ndp-msg-success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }

/* ══════════════════════════════════════════════════════════════
   Auth Forms Manager — 8 Layout Classes
   Applied to .ndp-popup via the layout chosen per form.
   ══════════════════════════════════════════════════════════════ */

/* 1. centered_card — DEFAULT: centred floating card, no change needed */
.ndp-layout-centered_card { /* default styles already in .ndp-popup */ }

/* 2. split_panel — hero image pane + form pane side by side */
#nadpoint-account-overlay:has(.ndp-layout-split_panel),
.ndp-popup.ndp-layout-split_panel {
    max-width: 820px; display: grid; grid-template-columns: 280px 1fr;
}
.ndp-popup.ndp-layout-split_panel::before {
    content: ''; display: block;
    background: linear-gradient(155deg, var(--ndp-primary,#c59b27) 0%, color-mix(in srgb,var(--ndp-primary,#c59b27) 60%,#000) 100%);
    border-radius: var(--ndp-radius,24px) 0 0 var(--ndp-radius,24px);
}
@media (max-width: 640px) { .ndp-popup.ndp-layout-split_panel { grid-template-columns: 1fr; }
    .ndp-popup.ndp-layout-split_panel::before { display:none; } }

/* 3. right_drawer — full-height, slides in from right */
#nadpoint-account-overlay:has(.ndp-layout-right_drawer) { justify-content: flex-end; padding: 0; align-items: stretch; background: rgba(0,0,0,.55); }
.ndp-popup.ndp-layout-right_drawer { width: min(460px,100%); max-height: 100%; height: 100%; border-radius: 0; animation: ndpDrawR .35s ease both; }
@keyframes ndpDrawR { from{transform:translateX(100%)} to{transform:translateX(0)} }

/* 4. left_drawer — full-height, slides in from left */
#nadpoint-account-overlay:has(.ndp-layout-left_drawer) { justify-content: flex-start; padding: 0; align-items: stretch; background: rgba(0,0,0,.55); }
.ndp-popup.ndp-layout-left_drawer { width: min(460px,100%); max-height: 100%; height: 100%; border-radius: 0; animation: ndpDrawL .35s ease both; }
@keyframes ndpDrawL { from{transform:translateX(-100%)} to{transform:translateX(0)} }

/* 5. fullscreen — covers the entire viewport */
#nadpoint-account-overlay:has(.ndp-layout-fullscreen) { padding: 0; }
.ndp-popup.ndp-layout-fullscreen { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(255,255,255,.08); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: none; }
.ndp-popup.ndp-layout-fullscreen .ndp-state { width: min(500px,90vw); }

/* 6. bottom_sheet — slides up from the bottom edge */
#nadpoint-account-overlay:has(.ndp-layout-bottom_sheet) { align-items: flex-end; padding: 0; }
.ndp-popup.ndp-layout-bottom_sheet { width: 100%; max-width: 100%; border-radius: 24px 24px 0 0; animation: ndpSheetUp .35s ease both; }
@keyframes ndpSheetUp { from{transform:translateY(100%)} to{transform:translateY(0)} }

/* 7. minimal — no shadow, transparent wrap */
.ndp-popup.ndp-layout-minimal { box-shadow: none; background: rgba(255,255,255,.92); border: 1.5px solid rgba(0,0,0,.06); backdrop-filter: blur(12px); }

/* 8. dark_card — dark background, bright form */
#nadpoint-account-overlay:has(.ndp-layout-dark_card) { background: rgba(0,0,0,.9); }
.ndp-popup.ndp-layout-dark_card { background: #111827; color: #f1f5f9; box-shadow: 0 40px 100px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.06); }
.ndp-popup.ndp-layout-dark_card .ndp-state-title { color: #f1f5f9; }
.ndp-popup.ndp-layout-dark_card .ndp-pf-label  { color: #cbd5e1; }
.ndp-popup.ndp-layout-dark_card .ndp-pf-input  { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #f1f5f9; }
.ndp-popup.ndp-layout-dark_card .ndp-pf-input:focus { border-color: var(--ndp-primary,#c59b27); }
.ndp-popup.ndp-layout-dark_card .ndp-state-sub { color: #94a3b8; }