/* ============================================================
   NadPoint Account Portals v1 — 15 Layout Themes
   Frontend CSS for all 4 portals rendered by portal-shell.php
   ============================================================ */

/* ── Portal overlay shell ───────────────────────────────────── */
.ndp-portal-overlay {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    background: var(--ndp-overlay, rgba(0,0,0,0.65));
    backdrop-filter: blur(var(--ndp-overlay-blur, 8px));
    -webkit-backdrop-filter: blur(var(--ndp-overlay-blur, 8px));
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease; padding: 16px;
}
.ndp-portal-overlay.ndp-portal-open { opacity: 1; pointer-events: all; }
.ndp-portal-close {
    position: absolute; top: 16px; right: 16px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(0,0,0,.12); color: currentColor; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, transform .2s;
}
.ndp-portal-close:hover { background: rgba(0,0,0,.22); transform: scale(1.1); }

/* ── Portal card (shared base) ──────────────────────────────── */
.ndp-portal-card {
    position: relative; width: min(var(--ndp-portal-width, 500px), 100%);
    max-height: 92vh; overflow-y: auto;
    background: var(--ndp-popup-bg, #fff);
    border-radius: var(--ndp-radius, 20px);
    box-shadow: var(--ndp-shadow, 0 32px 80px rgba(0,0,0,.2));
    font-family: var(--ndp-font, 'Inter',sans-serif);
    color: var(--ndp-text, #1f2937);
    animation: var(--ndp-portal-anim, ndpPortalFadeIn) .38s cubic-bezier(.175,.885,.32,1.275) both;
    scrollbar-width: thin; scrollbar-color: #e5e7eb transparent;
}
.ndp-portal-card::-webkit-scrollbar { width: 5px; }
.ndp-portal-card::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }

@keyframes ndpPortalFadeIn  { from{opacity:0;transform:scale(.88) translateY(16px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes ndpPortalSlideUp { from{opacity:0;transform:translateY(48px)} to{opacity:1;transform:translateY(0)} }
@keyframes ndpPortalZoomIn  { from{opacity:0;transform:scale(.72)} to{opacity:1;transform:scale(1)} }
@keyframes ndpPortalBounce  { 0%{opacity:0;transform:scale(.5)} 60%{transform:scale(1.06)} 100%{opacity:1;transform:scale(1)} }
@keyframes ndpPortalFlip    { from{opacity:0;transform:perspective(800px) rotateX(-18deg)} to{opacity:1;transform:none} }

.ndp-portal-body { padding: 40px 44px; }
@media (max-width: 480px) { .ndp-portal-body { padding: 24px 18px; } }

/* ── Portal heading block ───────────────────────────────────── */
.ndp-portal-logo  { width: 48px; height: 48px; object-fit: contain; margin-bottom: 12px; }
.ndp-portal-title { font-size: 1.55rem; font-weight: 800; color: var(--ndp-heading-color, #111827); margin: 0 0 4px; line-height: 1.2; }
.ndp-portal-sub   { font-size: .88rem; color: var(--ndp-muted, #6b7280); margin: 0 0 24px; }

/* ── Switch links ────────────────────────────────────────────── */
.ndp-portal-switch { text-align: center; margin-top: 18px; font-size: .85rem; color: var(--ndp-muted, #6b7280); }
.ndp-portal-switch a { color: var(--ndp-primary, #c59b27); font-weight: 600; text-decoration: none; }
.ndp-portal-switch a:hover { text-decoration: underline; }

/* ── Field base (shared) ─────────────────────────────────────── */
.ndp-pf-group { margin-bottom: 16px; }
.ndp-pf-label { display: block; font-size: .82rem; font-weight: 600; color: var(--ndp-label, #374151); margin-bottom: 6px; }
.ndp-pf-input-wrap { position: relative; }
.ndp-pf-input {
    width: 100%; box-sizing: border-box; padding: 12px 16px; height: 50px;
    border: 1.5px solid var(--ndp-field-border, #d1d5db);
    border-radius: var(--ndp-field-radius, 10px);
    background: var(--ndp-field-bg, #f9fafb); color: var(--ndp-text, #1f2937);
    font-size: .9rem; font-family: inherit; outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.ndp-pf-input::placeholder { color: var(--ndp-placeholder, #9ca3af); }
.ndp-pf-input:focus { border-color: var(--ndp-primary, #c59b27); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ndp-primary) 15%, transparent); }
.ndp-pf-input.error { border-color: #ef4444; }
.ndp-pf-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ndp-muted, #9ca3af); font-size: .9rem; pointer-events: none; }
.ndp-pf-input.has-icon { padding-left: 40px; }
textarea.ndp-pf-input { height: auto; min-height: 90px; resize: vertical; padding-top: 12px; }
.ndp-pf-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--ndp-muted, #9ca3af); padding: 4px; }
.ndp-pf-eye:hover { color: var(--ndp-text, #1f2937); }
/* File upload */
.ndp-pf-file-label { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 2px dashed var(--ndp-field-border, #d1d5db); border-radius: var(--ndp-field-radius, 10px); cursor: pointer; transition: border-color .2s; background: var(--ndp-surface, #f9fafb); }
.ndp-pf-file-label:hover { border-color: var(--ndp-primary, #c59b27); }
.ndp-pf-file-input { position: absolute; opacity: 0; width: 0; height: 0; }
.ndp-pf-file-preview { max-height: 80px; border-radius: 6px; margin-top: 6px; }

/* ── Checkmark success animation ─────────────────────────────── */
.ndp-check-anim { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ndp-success, #10b981); margin: 0 auto 12px; animation: ndpCheckPop .4s cubic-bezier(.175,.885,.32,1.275) both; }
@keyframes ndpCheckPop { 0%{transform:scale(0) rotate(-20deg)} 70%{transform:scale(1.15) rotate(5deg)} 100%{transform:scale(1) rotate(0)} }
.ndp-check-anim svg { color: #fff; animation: ndpCheckDraw .3s ease .1s both; }
@keyframes ndpCheckDraw { from{stroke-dashoffset:24} to{stroke-dashoffset:0} }

/* ── Portal submit button ────────────────────────────────────── */
.ndp-portal-btn {
    width: 100%; height: 52px; border: none; border-radius: var(--ndp-btn-radius, 12px);
    background: linear-gradient(135deg, var(--ndp-btn-start, var(--ndp-primary, #c59b27)), var(--ndp-btn-end, color-mix(in srgb, var(--ndp-primary, #c59b27) 80%, white)));
    color: var(--ndp-btn-text, #fff); font-size: .95rem; font-weight: 700;
    cursor: pointer; margin-top: 8px; letter-spacing: .02em;
    transition: transform .2s, box-shadow .2s; position: relative; overflow: hidden;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--ndp-primary, #c59b27) 35%, transparent);
}
.ndp-portal-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px color-mix(in srgb, var(--ndp-primary, #c59b27) 50%, transparent); }
.ndp-portal-btn.loading { opacity: .8; cursor: wait; }
.ndp-portal-btn .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; }
@keyframes ndpSpin { to { transform: rotate(360deg); } }

/* ── Wizard Stepper ──────────────────────────────────────────── */
.ndp-wizard-progress { display: flex; gap: 0; margin-bottom: 28px; }
.ndp-wizard-step-node {
    flex: 1; text-align: center; position: relative;
}
.ndp-wizard-step-node::before {
    content: ''; position: absolute; top: 16px; left: -50%; right: 50%;
    height: 2px; background: var(--ndp-divider, #e5e7eb); z-index: 0;
}
.ndp-wizard-step-node:first-child::before { display: none; }
.ndp-wizard-step-dot {
    width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid var(--ndp-divider, #e5e7eb);
    background: #fff; color: var(--ndp-muted, #9ca3af); font-size: .82rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; z-index: 1; transition: all .3s;
}
.ndp-wizard-step-node.active .ndp-wizard-step-dot  { border-color: var(--ndp-primary, #c59b27); color: var(--ndp-primary, #c59b27); background: color-mix(in srgb, var(--ndp-primary, #c59b27) 10%, white); }
.ndp-wizard-step-node.done  .ndp-wizard-step-dot  { border-color: var(--ndp-success, #10b981); background: var(--ndp-success, #10b981); color: #fff; }
.ndp-wizard-step-label { display: block; font-size: .72rem; margin-top: 5px; color: var(--ndp-muted, #9ca3af); }
.ndp-wizard-step-node.active .ndp-wizard-step-label { color: var(--ndp-primary, #c59b27); font-weight: 600; }
.ndp-wizard-panel { display: none; }
.ndp-wizard-panel.active { display: block; animation: ndpPortalFadeIn .3s ease both; }
.ndp-wizard-nav { display: flex; gap: 10px; margin-top: 20px; }
.ndp-wizard-back { flex: 0 0 auto; padding: 12px 20px; border-radius: var(--ndp-btn-radius,12px); border: 1.5px solid var(--ndp-divider,#e5e7eb); background: #fff; color: var(--ndp-muted,#6b7280); cursor: pointer; font-weight: 600; transition: all .2s; }
.ndp-wizard-back:hover { border-color: var(--ndp-primary,#c59b27); color: var(--ndp-primary,#c59b27); }
.ndp-wizard-next { flex: 1; }

/* ── Geolocation map step ────────────────────────────────────── */
#ndp-vendor-map { height: 280px; border-radius: 12px; margin-bottom: 12px; z-index: 1; overflow: hidden; border: 1.5px solid var(--ndp-divider, #e5e7eb); }
.ndp-geo-detect-btn { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; border: 1.5px solid var(--ndp-primary, #c59b27); background: color-mix(in srgb, var(--ndp-primary, #c59b27) 8%, white); color: var(--ndp-primary, #c59b27); font-weight: 600; cursor: pointer; font-size: .88rem; transition: all .2s; width: 100%; justify-content: center; margin-bottom: 10px; }
.ndp-geo-detect-btn:hover { background: color-mix(in srgb, var(--ndp-primary, #c59b27) 15%, white); }

/* ════════════════════════════════════════════════════════════════
   15 LAYOUT THEMES
   ════════════════════════════════════════════════════════════════ */

/* 1. sleek_modal — DEFAULT — vars already above */
.ndp-layout-sleek_modal .ndp-portal-card { }

/* 2. split_hero */
.ndp-layout-split_hero .ndp-portal-overlay { align-items: stretch; padding: 0; }
.ndp-layout-split_hero .ndp-portal-card { display: grid; grid-template-columns: 280px 1fr; max-width: 820px; max-height: 100vh; width: 100%; border-radius: 0; margin: auto; border-radius: 16px; }
.ndp-layout-split_hero .ndp-portal-hero { background: linear-gradient(160deg, var(--ndp-primary,#c59b27) 0%, color-mix(in srgb, var(--ndp-primary,#c59b27) 70%, #000) 100%); padding: 40px 28px; display: flex; flex-direction: column; justify-content: center; color: #fff; border-radius: 16px 0 0 16px; }
.ndp-layout-split_hero .ndp-portal-hero h2 { font-size: 1.7rem; font-weight: 800; margin: 0 0 12px; }
.ndp-layout-split_hero .ndp-portal-hero p  { opacity: .85; line-height: 1.6; margin: 0; }
.ndp-layout-split_hero .ndp-portal-body { overflow-y: auto; }
@media (max-width: 700px) { .ndp-layout-split_hero .ndp-portal-card { grid-template-columns: 1fr; } .ndp-layout-split_hero .ndp-portal-hero { display: none; } }

/* 3. side_drawer_right */
.ndp-layout-side_drawer_right .ndp-portal-overlay { justify-content: flex-end; padding: 0; align-items: stretch; }
.ndp-layout-side_drawer_right .ndp-portal-card { width: min(460px,100%); max-height: 100%; height: 100%; border-radius: 0; animation: ndpDrawRight .35s ease both; }
@keyframes ndpDrawRight { from{transform:translateX(100%)} to{transform:translateX(0)} }

/* 4. side_drawer_left */
.ndp-layout-side_drawer_left .ndp-portal-overlay { justify-content: flex-start; padding: 0; align-items: stretch; }
.ndp-layout-side_drawer_left .ndp-portal-card { width: min(460px,100%); max-height: 100%; height: 100%; border-radius: 0; animation: ndpDrawLeft .35s ease both; }
@keyframes ndpDrawLeft { from{transform:translateX(-100%)} to{transform:translateX(0)} }

/* 5. fullscreen_glass */
.ndp-layout-fullscreen_glass .ndp-portal-overlay { padding: 0; }
.ndp-layout-fullscreen_glass .ndp-portal-card { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; background: rgba(255,255,255,.08); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); display: flex; flex-direction: column; justify-content: center; align-items: center; }
.ndp-layout-fullscreen_glass .ndp-portal-body { width: min(540px,90vw); }
.ndp-layout-fullscreen_glass .ndp-pf-input { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #fff; }
.ndp-layout-fullscreen_glass .ndp-pf-input::placeholder { color: rgba(255,255,255,.5); }
.ndp-layout-fullscreen_glass .ndp-portal-title,.ndp-layout-fullscreen_glass .ndp-pf-label { color: #fff; }

/* 6. bottom_sheet */
.ndp-layout-bottom_sheet .ndp-portal-overlay { align-items: flex-end; padding: 0; }
.ndp-layout-bottom_sheet .ndp-portal-card { width: 100%; max-width: 100%; border-radius: 24px 24px 0 0; animation: ndpSheetUp .35s ease both; max-height: 92vh; }
@keyframes ndpSheetUp { from{transform:translateY(100%)} to{transform:translateY(0)} }

/* 7. card_stack */
.ndp-layout-card_stack .ndp-portal-card::before,.ndp-layout-card_stack .ndp-portal-card::after { content:''; position:absolute; border-radius:inherit; background:var(--ndp-popup-bg,#fff); box-shadow:var(--ndp-shadow); z-index:-1; }
.ndp-layout-card_stack .ndp-portal-card::before { inset:-10px 10px; opacity:.6; transform:rotate(1.5deg); }
.ndp-layout-card_stack .ndp-portal-card::after  { inset:-18px 18px; opacity:.3; transform:rotate(-2deg); }

/* 8. magazine_split */
.ndp-layout-magazine_split .ndp-portal-card { display: grid; grid-template-columns: 1fr 1fr; max-width: 760px; }
.ndp-layout-magazine_split .ndp-portal-mag-left { background: var(--ndp-primary,#c59b27); padding: 48px 36px; display: flex; flex-direction: column; justify-content: center; }
.ndp-layout-magazine_split .ndp-portal-mag-left h2 { font-size: 2.4rem; font-weight: 900; color: #fff; line-height: 1.1; margin: 0 0 16px; }
.ndp-layout-magazine_split .ndp-portal-mag-left p  { color: rgba(255,255,255,.8); line-height: 1.6; }

/* 9. minimal_float */
.ndp-layout-minimal_float .ndp-portal-card { box-shadow: none; background: transparent; }
.ndp-layout-minimal_float .ndp-portal-body { background: rgba(255,255,255,.95); border-radius: 16px; padding: 32px; backdrop-filter: blur(8px); }
.ndp-layout-minimal_float .ndp-portal-title { font-size: 1.1rem; }

/* 10. dark_cinema */
.ndp-layout-dark_cinema .ndp-portal-overlay { background: rgba(0,0,0,.92); }
.ndp-layout-dark_cinema .ndp-portal-card { background: #0f0f0f; color: #f1f5f9; box-shadow: 0 40px 100px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.06); }
.ndp-layout-dark_cinema .ndp-portal-title,.ndp-layout-dark_cinema .ndp-pf-label { color: #f1f5f9; }
.ndp-layout-dark_cinema .ndp-pf-input { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); color: #f1f5f9; }
.ndp-layout-dark_cinema .ndp-pf-input:focus { border-color: var(--ndp-primary,#c59b27); }

/* 11. gradient_wave */
.ndp-layout-gradient_wave .ndp-portal-overlay { background: linear-gradient(135deg,#667eea,#764ba2,#f093fb,#f5576c); background-size: 400% 400%; animation: ndpGradWave 8s ease infinite; }
@keyframes ndpGradWave { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.ndp-layout-gradient_wave .ndp-portal-card { background: rgba(255,255,255,.95); }

/* 12. frosted_card */
.ndp-layout-frosted_card .ndp-portal-card { background: rgba(255,255,255,.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.5); }

/* 13. corporate_clean */
.ndp-layout-corporate_clean .ndp-portal-card { border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,.12); }
.ndp-layout-corporate_clean .ndp-portal-title { font-size: 1.2rem; font-weight: 700; border-bottom: 2px solid var(--ndp-primary,#c59b27); padding-bottom: 10px; margin-bottom: 20px; }
.ndp-layout-corporate_clean .ndp-pf-input { border-radius: 4px; }
.ndp-layout-corporate_clean .ndp-portal-btn { border-radius: 4px; text-transform: uppercase; letter-spacing: .06em; }

/* 14. neon_tunnel */
.ndp-layout-neon_tunnel .ndp-portal-overlay { background: #050505; }
.ndp-layout-neon_tunnel .ndp-portal-card { background: #0a0a0a; border: 1px solid var(--ndp-primary,#c59b27); box-shadow: 0 0 40px color-mix(in srgb, var(--ndp-primary,#c59b27) 25%, transparent), inset 0 0 60px rgba(0,0,0,.5); }
.ndp-layout-neon_tunnel .ndp-portal-title,.ndp-layout-neon_tunnel .ndp-pf-label { color: var(--ndp-primary,#c59b27); }
.ndp-layout-neon_tunnel .ndp-pf-input { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: #fff; font-family: 'Fira Code','Courier New',monospace; }
.ndp-layout-neon_tunnel .ndp-pf-input:focus { border-color: var(--ndp-primary,#c59b27); box-shadow: 0 0 12px color-mix(in srgb, var(--ndp-primary,#c59b27) 35%, transparent); }

/* 15. wizard_stepper — uses the .ndp-wizard-* classes above */
.ndp-layout-wizard_stepper .ndp-portal-card { max-width: 580px; }

/* ── Toast notification system ───────────────────────────────── */
.ndp-toast-stack { position: fixed; top: 20px; right: 20px; z-index: 999999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.ndp-toast {
    pointer-events: all; min-width: 300px; max-width: 420px; padding: 14px 18px;
    border-radius: 12px; background: #fff; color: #111827;
    box-shadow: 0 8px 32px rgba(0,0,0,.16); display: flex; align-items: flex-start; gap: 12px;
    animation: ndpToastIn .35s cubic-bezier(.175,.885,.32,1.275) both;
    border-left: 4px solid var(--ndp-primary, #c59b27);
    font-size: .9rem;
}
.ndp-toast.leaving { animation: ndpToastOut .3s ease forwards; }
.ndp-toast-icon { font-size: 1.3rem; flex-shrink: 0; }
.ndp-toast-body strong { display: block; font-weight: 700; margin-bottom: 2px; }
.ndp-toast-body span  { color: #6b7280; font-size: .83rem; }
.ndp-toast-close { margin-left: auto; background: none; border: none; cursor: pointer; color: #9ca3af; padding: 0; font-size: 1rem; flex-shrink: 0; }
.ndp-toast.ndp-toast-success { border-left-color: #10b981; }
.ndp-toast.ndp-toast-error   { border-left-color: #ef4444; }
.ndp-toast.ndp-toast-info    { border-left-color: #3b82f6; }
@keyframes ndpToastIn  { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes ndpToastOut { to{opacity:0;transform:translateX(40px)} }

/* ── OTP digit boxes ─────────────────────────────────────────── */
.ndp-otp-boxes { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
.ndp-otp-box { width: 48px; height: 56px; text-align: center; font-size: 1.5rem; font-weight: 700; border: 2px solid var(--ndp-field-border,#d1d5db); border-radius: 10px; background: var(--ndp-field-bg,#f9fafb); outline: none; transition: border-color .2s; }
.ndp-otp-box:focus { border-color: var(--ndp-primary,#c59b27); background: #fff; }
.ndp-otp-box.filled { border-color: var(--ndp-primary,#c59b27); }

/* ── Google OAuth supplementary form ─────────────────────────── */
.ndp-google-supp-panel { display: none; }
.ndp-google-supp-panel.active { display: block; animation: ndpPortalFadeIn .3s ease both; }
.ndp-google-avatar-hint { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #f0fdf4; border-radius: 10px; margin-bottom: 20px; }
.ndp-google-avatar-hint img { width: 40px; height: 40px; border-radius: 50%; }
.ndp-google-avatar-hint p { margin: 0; font-size: .88rem; color: #374151; }