/* =====================================================================
   UnlockNexa theme layer — loaded AFTER the Hyper theme CSS.
   Brand colours live in the variables below; change them here.
   ===================================================================== */
:root {
    --nx-ink: #0e1b2c;        /* hero, footer, public navbar */
    --nx-ink-2: #172a40;      /* raised surfaces on ink */
    --nx-line: #263b55;       /* hairlines on ink */
    --nx-teal: #0f9d8a;       /* primary actions */
    --nx-teal-hi: #3fd1bc;    /* primary on dark backgrounds */
    --nx-amber: #f2a93b;      /* "completed / unlocked" signal only */
    --nx-paper: #f4f7f8;      /* light page background */
    --nx-text: #1d2a39;
    --nx-muted: #5f6f81;
    --nx-font: "Archivo", Nunito, system-ui, sans-serif;
    --nx-mono: "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

body, .btn, .form-control, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--nx-font);
}
h1, h2, h3, .h1, .h2, .h3 { letter-spacing: -0.015em; }

:focus-visible { outline: 2px solid var(--nx-teal-hi); outline-offset: 2px; }

/* ---------- Public site (frontend layout) ---------- */
body.nx-public { background: var(--nx-paper); color: var(--nx-muted); }
body.nx-public h1, body.nx-public h2, body.nx-public h3,
body.nx-public h4, body.nx-public h5 { color: var(--nx-text); }
body.nx-public .bg-light { background-color: #e9eff1 !important; }
body.nx-public .card { border: 1px solid #dde5e9; box-shadow: none; }
body.nx-public .text-primary { color: var(--nx-teal) !important; }

.navbar-page, .nx-public .navbar { background-color: var(--nx-ink); }
.nx-public .navbar .nav-link { color: rgba(255, 255, 255, .72) !important; font-weight: 600; }
.nx-public .navbar .nav-link:hover,
.nx-public .navbar .nav-link:focus { color: #fff !important; }
.nx-public .navbar .nav-link.nx-cta {
    color: var(--nx-ink) !important;
    background: var(--nx-teal-hi);
    border-radius: 6px;
    padding-left: 14px !important;
    padding-right: 14px !important;
}
.nx-public .navbar .nav-link.nx-cta:hover { background: #fff; }

/* Hero: flat ink, no skewed gradient */
.hero-section { background: var(--nx-ink); padding: 72px 0 96px; }
.hero-section:after { display: none; }
.hero-section .hero-title {
    font-size: 2.6rem;
    line-height: 1.12;
    font-weight: 700 !important;
    color: #fff;
    max-width: 18ch;
}
.hero-section .text-white-50 { color: rgba(226, 236, 244, .7) !important; max-width: 56ch; }
.hero-kicker { color: var(--nx-teal-hi); font-weight: 600; font-size: .95rem; }
.hero-section .btn-outline-light { border-color: rgba(255, 255, 255, .35); }

/* Order ticket — the one memorable element on the landing page */
.nx-ticket {
    text-align: left;
    background: var(--nx-ink-2);
    border: 1px solid var(--nx-line);
    border-radius: 14px;
    padding: 22px 24px;
    color: #c9d6e2;
    max-width: 420px;
    margin-left: auto;
    animation: nx-ticket-in .6s ease-out both;
}
.nx-ticket-head {
    display: flex;
    justify-content: space-between;
    font-size: .85rem;
    color: #8ea3b8;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--nx-line);
}
.nx-ticket-service { color: #fff; font-weight: 600; font-size: 1.05rem; margin: 16px 0 10px; }
.nx-ticket-imei { display: flex; align-items: baseline; gap: 12px; }
.nx-ticket-label { font-size: .8rem; color: #8ea3b8; }
.nx-imei {
    font-family: var(--nx-mono);
    font-size: 1.45rem;
    letter-spacing: .04em;
    color: #fff;
}
.nx-steps {
    list-style: none;
    padding: 0;
    margin: 20px 0 18px;
    display: flex;
    gap: 6px;
}
.nx-steps li {
    flex: 1;
    font-size: .78rem;
    color: #8ea3b8;
    padding-top: 10px;
    border-top: 3px solid var(--nx-line);
}
.nx-steps li.done { border-top-color: var(--nx-teal); color: #c9d6e2; }
.nx-steps li.current {
    border-top-color: var(--nx-amber);
    color: var(--nx-amber);
    font-weight: 600;
    animation: nx-step-fill .5s .7s ease-out both;
}
.nx-ticket-result {
    background: rgba(242, 169, 59, .1);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: .88rem;
    color: #f6d39d;
}
.nx-ticket-result .mdi { color: var(--nx-amber); margin-right: 4px; }
@keyframes nx-ticket-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes nx-step-fill { from { border-top-color: var(--nx-line); color: #8ea3b8; } }
@media (prefers-reduced-motion: reduce) {
    .nx-ticket, .nx-steps li.current { animation: none; }
}
@media (max-width: 767.98px) {
    .hero-section { padding: 40px 0 56px; }
    .hero-section .hero-title { font-size: 1.95rem; }
    .nx-ticket { margin: 24px 0 0; max-width: none; }
    .nx-imei { font-size: 1.2rem; }
}

/* Inner public pages */
.page-header { background: var(--nx-ink); padding: 56px 0 48px; }
.page-header h1 { color: #fff !important; font-weight: 700; margin: 6px 0 10px; }
.page-header .eyebrow { color: var(--nx-teal-hi); font-weight: 600; }
.page-header .lead-muted { color: rgba(226, 236, 244, .7); margin: 0; }
.info-card .info-row {
    display: flex;
    flex-wrap: wrap;
    padding: 14px 0;
    border-bottom: 1px solid #e3eaee;
}
.info-card .info-row:last-child { border-bottom: 0; }
.info-card .info-label { flex: 0 0 34%; font-weight: 600; color: var(--nx-text); padding-right: 12px; }
.info-card .info-value { flex: 1 1 60%; min-width: 200px; word-break: break-word; }
.contact-tile {
    display: flex;
    gap: 14px;
    align-items: center;
    background: #fff;
    border: 1px solid #dde5e9;
    border-radius: 10px;
    padding: 18px 20px;
    color: var(--nx-text);
}
.contact-tile:hover { border-color: var(--nx-teal); color: var(--nx-text); text-decoration: none; }
.contact-tile .mdi { font-size: 28px; color: var(--nx-teal); }
.contact-tile-label { font-size: .82rem; color: var(--nx-muted); }
.contact-tile-value { font-weight: 600; word-break: break-all; }

/* Footer */
.nx-public footer.bg-dark { background-color: var(--nx-ink) !important; border-top: 1px solid var(--nx-line); }
.nx-public footer .text-white-50 { color: rgba(226, 236, 244, .62) !important; }
.nx-public footer a.text-white-50:hover { color: #fff !important; }

/* ---------- Auth pages ---------- */
body.authentication-bg {
    background: var(--nx-ink) !important;
}
.authentication-bg .card { border: 1px solid var(--nx-line); }
.authentication-bg .card-header.bg-primary,
.authentication-bg .card-header.pt-4 { background: var(--nx-ink-2) !important; border-bottom: 1px solid var(--nx-line); }

/* ---------- Dashboards (user + admin, dark mode) ---------- */
.navbar-custom, .topnav-navbar-dark, .topnav-navbar { background-color: var(--nx-ink) !important; }
.left-side-menu { background: var(--nx-ink) !important; }
.side-nav .side-nav-link:hover, .side-nav .side-nav-link:focus,
.side-nav .menuitem-active > a { color: var(--nx-teal-hi) !important; }
.badge-primary { background-color: var(--nx-teal); }
.nx-imei-inline { font-family: var(--nx-mono); }

/* Hero buttons: one consistent size */
.hero-section .btn { padding: .6rem 1.15rem; font-weight: 600; font-size: .95rem; }

/* Auth split screen: replace stock photo with brand ink */
.auth-fluid { background: var(--nx-ink) url(../images/unlocknexa-mark.svg) no-repeat right -120px bottom -120px; background-size: 560px; }
.auth-fluid:before { content: ""; position: absolute; inset: 0; background: rgba(14, 27, 44, .95); }
.auth-fluid .auth-fluid-form-box { z-index: 2; }
.auth-fluid-form-box h4 { color: var(--nx-text); font-weight: 700; }
.footer-alt { color: rgba(226, 236, 244, .55); }