/* ==========================================================================
   NadPoint Account – Modern Premium Styles
   ========================================================================== */
:root {
    --nadpoint-popup-bg: #ffffff;
    --nadpoint-popup-radius: 24px;
    --nadpoint-popup-shadow: 0 30px 60px rgba(0,0,0,0.15);
    --nadpoint-popup-width: 520px;
    --nadpoint-popup-max-height: 90vh;
    --nadpoint-popup-animation: popFadeIn 0.35s cubic-bezier(0.175,0.885,0.32,1.275);
    --nadpoint-close-box-bg: #f3f4f6;
    --nadpoint-close-icon-color: #555;
    --nadpoint-close-hover-bg: #e0e0e0;
    --nadpoint-close-hover-color: #111;
    --nadpoint-tabs-bg: transparent;
    --nadpoint-tabs-text: #666;
    --nadpoint-tabs-active: #c59b27;
    --nadpoint-tabs-border: #c59b27;
    --nadpoint-field-bg: #fafafa;
    --nadpoint-field-border: #e0e0e0;
    --nadpoint-field-focus-border: #c59b27;
    --nadpoint-field-label: #444;
    --nadpoint-btn-bg-start: #c59b27;
    --nadpoint-btn-bg-end: #d4af37;
    --nadpoint-btn-text: #fff;
    --nadpoint-btn-radius: 12px;
    --nadpoint-btn-shadow: 0 8px 18px rgba(197,155,39,0.25);
    --nadpoint-error-bg: #ffeaea;
    --nadpoint-error-text: #c0392b;
    --nadpoint-success-bg: #eafaf1;
    --nadpoint-success-text: #27ae60;
}

.nadpoint-account-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
    z-index: 100000; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
}
.nadpoint-account-overlay.active { opacity: 1; visibility: visible; }

.nadpoint-account-popup {
    background: var(--nadpoint-popup-bg);
    border-radius: var(--nadpoint-popup-radius);
    box-shadow: var(--nadpoint-popup-shadow);
    width: var(--nadpoint-popup-width); max-width: 92vw;
    max-height: var(--nadpoint-popup-max-height);
    overflow-y: auto; position: relative;
    animation: var(--nadpoint-popup-animation);
}

@keyframes popFadeIn {
    from { opacity: 0; transform: scale(0.95) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Success burst animation */
@keyframes nadpointSuccessBurst {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.05); }
    50%  { transform: scale(0.98); }
    70%  { transform: scale(1.02); }
    100% { transform: scale(1); }
}
.nadpoint-account-popup.nadpoint-success-animation {
    animation: nadpointSuccessBurst 0.5s ease;
}

/* ------- Header bar with tabs + close button ------- */
.nadpoint-popup-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; border-bottom: 1px solid #f0f0f0;
    background: var(--nadpoint-tabs-bg);
}
.nadpoint-tabs {
    display: flex; flex: 1;
}
.nadpoint-tab {
    padding: 18px 16px; font-weight: 600; font-size: 0.95rem;
    color: var(--nadpoint-tabs-text); background: none; border: none;
    border-bottom: 3px solid transparent; cursor: pointer; transition: all 0.2s;
}
.nadpoint-tab:hover { color: var(--nadpoint-tabs-active); }
.nadpoint-tab.active { color: var(--nadpoint-tabs-active); border-bottom-color: var(--nadpoint-tabs-border); }

/* Close button (now a proper box inside header) */
.nadpoint-popup-close {
    display: flex; align-items: center; justify-content: center;
    background: var(--nadpoint-close-box-bg);
    border: 1px solid #e0e0e0; border-radius: 8px;
    width: 36px; height: 36px; cursor: pointer;
    transition: all 0.2s; margin-left: 10px;
}
.nadpoint-popup-close:hover {
    background: var(--nadpoint-close-hover-bg);
    border-color: #ccc;
}
.nadpoint-popup-close span {
    font-size: 1.3rem; color: var(--nadpoint-close-icon-color);
    line-height: 1; transition: color 0.2s;
}
.nadpoint-popup-close:hover span { color: var(--nadpoint-close-hover-color); }

/* Form containers */
.nadpoint-form-container { padding: 30px 35px 35px; display: none; }
.nadpoint-form-container.active { display: block; }
.nadpoint-form-container h3 { margin: 0 0 20px; font-size: 1.4rem; color: #1b3022; font-weight: 700; }

.nadpoint-field { margin-bottom: 20px; }
.nadpoint-field label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--nadpoint-field-label); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.4px; }
.nadpoint-field input, .nadpoint-field textarea {
    width: 100%; padding: 12px 16px; border: 2px solid var(--nadpoint-field-border);
    border-radius: 12px; font-size: 0.95rem; background: var(--nadpoint-field-bg);
    color: #222; transition: all 0.2s; box-sizing: border-box;
}
.nadpoint-field input:focus, .nadpoint-field textarea:focus {
    border-color: var(--nadpoint-field-focus-border); background: #fff; outline: none;
    box-shadow: 0 0 0 4px rgba(197,155,39,0.1);
}

.live-username-status { font-size: 0.75rem; margin-top: 4px; }
.live-username-status.available { color: #27ae60; }
.live-username-status.unavailable { color: #e74c3c; }
.live-username-status.checking { color: #f39c12; }

.nadpoint-btn {
    background: linear-gradient(135deg, var(--nadpoint-btn-bg-start), var(--nadpoint-btn-bg-end));
    color: var(--nadpoint-btn-text); border: none; padding: 14px 24px;
    border-radius: var(--nadpoint-btn-radius); font-weight: 700; font-size: 1rem;
    cursor: pointer; width: 100%; transition: all 0.25s; margin-top: 10px;
    letter-spacing: 0.3px; box-shadow: var(--nadpoint-btn-shadow);
}
.nadpoint-btn:hover { filter: brightness(1.05); transform: translateY(-2px); }
.nadpoint-btn:disabled { background: #ccc; box-shadow: none; cursor: not-allowed; }

.nadpoint-error { background: var(--nadpoint-error-bg); color: var(--nadpoint-error-text); padding: 12px 16px; border-radius: 10px; margin-bottom: 20px; font-size: 0.85rem; }
.nadpoint-success { background: var(--nadpoint-success-bg); color: var(--nadpoint-success-text); padding: 12px 16px; border-radius: 10px; margin-bottom: 20px; font-size: 0.85rem; }

.nadpoint-account-dashboard-link { text-align: center; padding: 10px 0; }
.nadpoint-account-dashboard-link .nadpoint-btn { width: auto; display: inline-block; margin-bottom: 12px; }
.nadpoint-logout-btn { display: inline-block; background: #e74c3c; color: #fff; padding: 12px 24px; border-radius: 12px; text-decoration: none; font-weight: 600; margin-left: 10px; font-size: 0.9rem; }
.nadpoint-logout-btn:hover { background: #c0392b; }

@media (max-width: 600px) {
    .nadpoint-account-popup { width: 100vw; max-width: 100%; border-radius: 24px 24px 0 0; max-height: 100vh; margin-top: auto; }
    .nadpoint-account-overlay { align-items: flex-end; }
}