/*
 * NeonPOS brand skin for the landlord (central) side: customer login, sign-up, activation notice,
 * dashboard, plan picker, checkout and payment result. Same palette and fonts as the landing page
 * and the tenant app; loaded after Bootstrap 4.
 *
 * Page kinds:
 *   body.nx-dark   centred card on the dark brand background (login, register, notices, checkout)
 *   body.nx-paper  light page with the dark top bar (dashboard, plan picker)
 */
:root {
    --nx-ink: #0e0f13;
    --nx-paper: #fafaf8;
    --nx-navy: #374f8b;
    --nx-navy-deep: #0f1f5c;
    --nx-navy-soft: #e6ebf6;
    --nx-line: #e7e8ea;
    --nx-gray: #6b7380;
    --nx-yellow: #ffc55a;
    --nx-orange: #fe6c3d;
    --nx-green: #00c796;
    --nx-sky: #38bdf8;
    --nx-font-display: 'Space Grotesk', system-ui, sans-serif;
    --nx-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body.nx-dark,
body.nx-paper {
    font-family: var(--nx-font-body);
    color: var(--nx-ink);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
body.nx-paper { background: var(--nx-paper); }
body.nx-dark {
    position: relative;
    display: flex;
    align-items: center;
    padding: 40px 0;
    overflow-x: hidden;
    background: var(--nx-ink);
}
body.nx-dark::before {
    content: '';
    position: fixed;
    right: -8%;
    top: 6%;
    width: 52%;
    max-width: 620px;
    aspect-ratio: 1210 / 927;
    background: url('../images/landing/logo-stacked-bg.webp') center / contain no-repeat;
    filter: brightness(0) invert(1);
    opacity: 0.05;
    pointer-events: none;
}
body.nx-dark > .container { position: relative; z-index: 1; }

.nx-body h1, .nx-body h2, .nx-body h3, .nx-body h4, .nx-body h5,
body.nx-dark h1, body.nx-dark h2, body.nx-dark h3, body.nx-dark h4, body.nx-dark h5,
body.nx-paper h1, body.nx-paper h2, body.nx-paper h3, body.nx-paper h4, body.nx-paper h5 {
    font-family: var(--nx-font-display);
    letter-spacing: -0.01em;
}
body.nx-dark a, body.nx-paper a { color: var(--nx-navy); }
body.nx-dark a:hover, body.nx-paper a:hover { color: var(--nx-navy-deep); }
body.nx-dark a:focus-visible, body.nx-paper a:focus-visible,
body.nx-dark button:focus-visible, body.nx-paper button:focus-visible,
body.nx-dark .form-control:focus-visible, body.nx-paper .form-control:focus-visible {
    outline: 3px solid var(--nx-yellow);
    outline-offset: 2px;
}

/* ---------- Card ---------- */
.nx-card {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    padding: 44px 40px 36px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}
.nx-card-wide { max-width: 560px; }
.nx-card-center { text-align: center; }
.nx-brand { text-align: center; margin-bottom: 26px; }
.nx-brand img { height: 44px; width: auto; max-width: 100%; }
.nx-card h2.nx-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 6px; }
.nx-card .nx-lead { color: var(--nx-gray); margin-bottom: 24px; }
.nx-icon {
    display: flex; align-items: center; justify-content: center;
    width: 76px; height: 76px; margin: 0 auto 22px;
    border-radius: 50%; font-size: 2rem;
    background: var(--nx-navy-soft); color: var(--nx-navy);
}
.nx-icon-success { background: #d9f7ee; color: #00a67c; }
.nx-icon-warning { background: #fff3d9; color: #d98f00; }
.nx-icon-danger { background: #ffe9e1; color: var(--nx-orange); }

.nx-plan-tag {
    display: inline-block; padding: 5px 14px; border-radius: 999px;
    background: var(--nx-navy-soft); color: var(--nx-navy);
    font-family: var(--nx-font-display); font-size: 0.8rem; font-weight: 600;
}

/* ---------- Forms ---------- */
body.nx-dark label, body.nx-paper label { font-weight: 600; color: var(--nx-ink); margin-bottom: 6px; font-size: 0.9rem; }
body.nx-dark .form-control, body.nx-paper .form-control {
    height: auto; padding: 11px 14px; border-radius: 10px;
    border: 1px solid var(--nx-line); background: #fff; color: var(--nx-ink);
    font-family: var(--nx-font-body);
}
body.nx-dark .form-control:focus, body.nx-paper .form-control:focus {
    border-color: var(--nx-navy);
    box-shadow: 0 0 0 3px rgba(55, 79, 139, 0.15);
}
body.nx-dark .form-control::placeholder { color: #a3a9b4; }
body.nx-dark .input-group-text {
    background: var(--nx-paper); border: 1px solid var(--nx-line);
    border-radius: 0 10px 10px 0; color: var(--nx-gray); font-weight: 600;
}
body.nx-dark .domain-input { border-radius: 10px 0 0 10px !important; }
body.nx-dark .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--nx-navy); border-color: var(--nx-navy); }

/* ---------- Buttons ---------- */
body.nx-dark .btn, body.nx-paper .btn { font-family: var(--nx-font-display); font-weight: 600; border-radius: 10px; }
body.nx-dark .btn-primary, body.nx-paper .btn-primary {
    background-color: var(--nx-navy); border-color: var(--nx-navy); color: #fff;
    padding: 11px 18px; transition: background-color .15s, transform .15s, box-shadow .15s;
}
body.nx-dark .btn-primary:hover, body.nx-paper .btn-primary:hover {
    background-color: var(--nx-navy-deep); border-color: var(--nx-navy-deep); color: #fff;
    transform: translateY(-1px); box-shadow: 0 10px 22px rgba(55, 79, 139, 0.3);
}
body.nx-dark .btn-primary:disabled, body.nx-paper .btn-primary:disabled { opacity: .6; transform: none; box-shadow: none; }
body.nx-dark .btn-outline-primary, body.nx-paper .btn-outline-primary { color: var(--nx-navy); border-color: var(--nx-navy); background: transparent; }
body.nx-dark .btn-outline-primary:hover, body.nx-paper .btn-outline-primary:hover { background: var(--nx-navy); color: #fff; }
body.nx-dark .btn-outline-dark, body.nx-paper .btn-outline-dark { color: var(--nx-ink); border-color: var(--nx-ink); }
body.nx-dark .btn-outline-dark:hover, body.nx-paper .btn-outline-dark:hover { background: var(--nx-ink); color: #fff; }
body.nx-dark .btn-link, body.nx-paper .btn-link { color: var(--nx-gray); }
/* The one action per screen that should catch the eye (pay, open the store): brand yellow. */
.btn-nx-accent, body.nx-dark .btn-nx-accent, body.nx-paper .btn-nx-accent {
    background: var(--nx-yellow); border-color: var(--nx-yellow); color: var(--nx-ink);
}
.btn-nx-accent:hover, body.nx-dark .btn-nx-accent:hover, body.nx-paper .btn-nx-accent:hover {
    background: #f5b640; border-color: #f5b640; color: var(--nx-ink); box-shadow: 0 10px 22px rgba(255, 197, 90, 0.35);
}

/* ---------- Alerts ---------- */
body.nx-dark .alert, body.nx-paper .alert { border: 0; border-radius: 12px; }
body.nx-dark .alert-danger, body.nx-paper .alert-danger { background: #ffe9e1; color: #9a2f10; }
body.nx-dark .alert-success, body.nx-paper .alert-success { background: #d9f7ee; color: #00634a; }
body.nx-dark .alert-warning, body.nx-paper .alert-warning { background: #fff3d9; color: #8a5a00; }
body.nx-dark .alert-info, body.nx-paper .alert-info { background: var(--nx-navy-soft); color: var(--nx-navy-deep); }
body.nx-dark .alert-light, body.nx-paper .alert-light { background: var(--nx-paper); color: var(--nx-ink); border: 1px solid var(--nx-line); }

/* ---------- Dashboard pages ---------- */
.nx-nav { background: var(--nx-ink); position: sticky; top: 0; z-index: 20; padding: 14px 24px; }
.nx-nav .nx-nav-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.nx-nav img { height: 32px; width: auto; filter: brightness(0) invert(1); }
.nx-nav .btn-link, .nx-nav a, .nx-nav .dropdown-toggle { color: #fff !important; font-weight: 600; }
.nx-nav .dropdown-toggle::after { margin-left: 8px; }
.nx-nav .dropdown-menu { border: 0; border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .25); margin-top: 12px; }
.nx-nav .dropdown-menu a { color: var(--nx-ink) !important; }

.nx-content { max-width: 1100px; margin: 0 auto; padding: 36px 24px 56px; }
.nx-page-title { font-size: 1.75rem; font-weight: 700; margin: 0; }

.nx-store {
    background: #fff; border: 1px solid var(--nx-line); border-radius: 14px;
    padding: 22px 24px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(14, 15, 19, .04);
}
.nx-store h5 { font-size: 1.1rem; font-weight: 600; margin: 0 0 2px; }
.nx-store .nx-meta-label { color: var(--nx-gray); font-size: 0.75rem; font-weight: 600; margin-bottom: 4px; }
.nx-store .nx-meta-value { font-weight: 600; font-size: 0.9rem; }
.nx-store .nx-url { color: var(--nx-gray); font-size: 0.85rem; word-break: break-all; }
.nx-store .nx-actions .btn { margin: 2px 0 2px 6px; }

.nx-chip {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    font-family: var(--nx-font-display); font-size: 0.75rem; font-weight: 600;
    background: var(--nx-navy-soft); color: var(--nx-navy);
}
.nx-status { display: inline-block; padding: 4px 12px; border-radius: 999px; font-family: var(--nx-font-display); font-size: 0.75rem; font-weight: 600; }
.nx-status-active { background: #d9f7ee; color: #00805f; }
.nx-status-pending { background: #fff3d9; color: #a86d00; }
.nx-status-expired { background: #ffe9e1; color: #b5380f; }

.nx-panel { background: #fff; border: 1px solid var(--nx-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(14, 15, 19, .04); overflow: hidden; }
.nx-panel-head { padding: 18px 24px; border-bottom: 1px solid var(--nx-line); }
.nx-panel-head h5 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.nx-panel .table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--nx-gray); border-top: 0; font-weight: 600; }
.nx-panel .table td { vertical-align: middle; }
.nx-panel .badge { font-family: var(--nx-font-display); }
.nx-panel .badge-success { background: #d9f7ee; color: #00805f; }
.nx-panel .badge-warning { background: #fff3d9; color: #a86d00; }
.nx-panel .badge-danger { background: #ffe9e1; color: #b5380f; }
.nx-empty { padding: 48px 24px; text-align: center; }

/* ---------- Plan picker ---------- */
.nx-plan {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid var(--nx-line); border-radius: 16px;
    padding: 30px 26px; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.nx-plan:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(14, 15, 19, .1); border-color: var(--nx-navy); }
.nx-plan-featured { background: var(--nx-ink); color: #fff; border-color: var(--nx-ink); }
.nx-plan-featured:hover { border-color: var(--nx-yellow); }
.nx-plan-featured .nx-plan-note, .nx-plan-featured .nx-plan-per { color: rgba(255, 255, 255, .65); }
.nx-plan-badge {
    align-self: flex-start; margin-bottom: 10px; padding: 3px 12px; border-radius: 999px;
    background: var(--nx-yellow); color: var(--nx-ink); font-family: var(--nx-font-display); font-size: .7rem; font-weight: 700; letter-spacing: .03em;
}
.nx-plan h5 { font-size: 1.1rem; font-weight: 600; margin: 0 0 6px; }
.nx-plan-price { font-family: var(--nx-font-display); font-size: 2.1rem; font-weight: 700; line-height: 1.1; }
.nx-plan-per { font-size: .9rem; font-weight: 500; color: var(--nx-gray); }
.nx-plan-note { color: var(--nx-gray); font-size: .85rem; margin: 8px 0 18px; }
.nx-plan ul { list-style: none; padding: 0; margin: 0 0 22px; flex-grow: 1; }
.nx-plan li { margin-bottom: 10px; font-size: .92rem; }
.nx-plan li i { color: var(--nx-green); margin-right: 8px; }
.nx-plan .btn { width: 100%; }

/* ---------- Checkout ---------- */
.nx-detail { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--nx-line); }
.nx-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; font-family: var(--nx-font-display); font-size: 1.3rem; font-weight: 700; }
.nx-total span:last-child { color: var(--nx-navy); }
.nx-section-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--nx-gray); margin: 24px 0 12px; }
.payment-method-item {
    display: flex; align-items: center; cursor: pointer; margin-bottom: 10px; padding: 12px 14px;
    border: 1px solid var(--nx-line); border-radius: 12px; transition: border-color .15s, background .15s, box-shadow .15s;
}
.payment-method-item:hover { border-color: var(--nx-navy); background: var(--nx-paper); }
.payment-method-item input { display: none; }
.payment-method-item.active { border-color: var(--nx-navy); background: var(--nx-navy-soft); box-shadow: 0 0 0 1px var(--nx-navy); }
.payment-method-item img { height: 28px; margin-right: 14px; }

@media (max-width: 575.98px) {
    .nx-card { padding: 32px 22px 28px; }
    .nx-nav { padding: 12px 16px; }
    .nx-content { padding: 24px 16px 40px; }
    .nx-store .nx-actions { margin-top: 14px; text-align: left !important; }
    .nx-store .nx-actions .btn { margin: 4px 6px 0 0; }
}