/*
Theme Name: NXRENT Owner
Theme URI: https://nxrent.com
Author: TO @ NXRENT
Author URI: https://nxrent.com
Description: NXRENT owner portal theme — premium dark.
Version: 2.2.0
License: GPLv2 or later
Text Domain: nxxrent-clean
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800;9..40,900&display=swap');

:root {
  color-scheme: dark;
  --nx-bg:        #0d0d0d;
  --nx-surface:   #111111;
  --nx-surface2:  #161616;
  --nx-border:    rgba(255,255,255,0.07);
  --nx-border2:   rgba(255,255,255,0.11);
  --nx-text:      #f0f0f0;
  --nx-text2:     rgba(240,240,240,0.58);
  --nx-text3:     rgba(240,240,240,0.35);
  --nx-violet:    #6b5ce7;
  --nx-violet2:   #8b7cf8;
  --nx-green:     #22d98a;
  --nx-font:      'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --nx-radius:    10px;
  --nx-radius-lg: 14px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: var(--nx-font);
  background: var(--nx-bg);
  color: var(--nx-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.6;
}

/* App shell gets pure black, no theme decoration */
body.nxrent-app {
  background: #0d0d0d !important;
  overflow-x: hidden;
}
body.nxrent-app * {
  /* Prevent theme from adding any wrappers with padding */
}

/* ── Layout ──────────────────────────────────────────────────── */
.nx-container { max-width: 1140px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 768px) { .nx-container { padding: 0 18px; } }

/* ── Typography ──────────────────────────────────────────────── */
.nx-display {
  margin: 12px 0 10px;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.03;
  letter-spacing: -0.04em;
  font-weight: 900;
  color: var(--nx-text);
}
.nx-h1  { font-size: clamp(28px, 3.5vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.07; }
.nx-h2  { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.nx-lead { max-width: 600px; color: var(--nx-text2); font-size: 15.5px; line-height: 1.65; }
.nx-muted { color: var(--nx-text2); }
.nx-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--nx-text3);
}
.nx-kicker-logo {
  width: 20px; height: 20px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 900; color: #fff; font-size: 9px; letter-spacing: -0.02em;
  background: var(--nx-violet);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.nx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 18px; border-radius: var(--nx-radius);
  font-family: var(--nx-font); font-weight: 700; font-size: 13.5px;
  text-decoration: none; cursor: pointer; border: 0;
  transition: filter 0.12s ease, transform 0.10s ease;
  white-space: nowrap; letter-spacing: -0.01em;
}
.nx-btn:active { transform: translateY(1px); }
.nx-btn-primary { background: var(--nx-violet); color: #fff; }
.nx-btn-primary:hover { filter: brightness(1.13); }
.nx-btn-ghost { background: transparent; border: 1px solid var(--nx-border2); color: var(--nx-text); }
.nx-btn-ghost:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.18); }
.nx-block { display: block; text-align: center; width: 100%; }

/* ── Cards ───────────────────────────────────────────────────── */
.nx-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg);
  padding: 20px;
}
.nx-soft { background: rgba(255,255,255,0.025); }

/* ── Badges ──────────────────────────────────────────────────── */
.nx-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 99px;
  border: 1px solid var(--nx-border2);
  color: var(--nx-text2); font-size: 12px; font-weight: 500;
}
.nx-badge::before { content: '✓'; color: var(--nx-green); font-size: 10px; font-weight: 800; }

/* ── Site header ─────────────────────────────────────────────── */
.nx-header {
  border-bottom: 1px solid var(--nx-border);
  background: rgba(13,13,13,0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  position: sticky; top: 0; z-index: 100;
}
.nx-header-inner {
  display: flex; align-items: center; justify-content: space-between; height: 56px;
}
.nx-brand {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--nx-text);
  font-weight: 800; font-size: 14px; letter-spacing: 0.01em;
}
.nx-mark {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--nx-violet);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 11px; color: #fff; letter-spacing: -0.03em;
}
.nx-nav { display: flex; align-items: center; gap: 2px; }
.nx-nav a, .nx-nav-list li a {
  list-style: none; padding: 7px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--nx-text2);
  text-decoration: none; transition: color 0.12s, background 0.12s;
}
.nx-nav a:hover, .nx-nav-list li a:hover { color: var(--nx-text); background: rgba(255,255,255,0.055); }
.nx-nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.nx-actions { display: flex; align-items: center; gap: 8px; }

/* ── Site footer ─────────────────────────────────────────────── */
.nx-footer { border-top: 1px solid var(--nx-border); padding: 24px 0; margin-top: 56px; }
.nx-footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.nx-footer p { margin: 0; font-size: 12.5px; color: var(--nx-text3); }
.nx-footer a { color: var(--nx-text3); text-decoration: none; }
.nx-footer a:hover { color: var(--nx-text2); }

/* ── Login split ─────────────────────────────────────────────── */
.nx-split { display: grid; grid-template-columns: 1.1fr 0.9fr; min-height: 100vh; }
@media (max-width: 900px) { .nx-split { grid-template-columns: 1fr; min-height: auto; } }

.nx-split-left {
  position: relative; overflow: hidden;
  padding: clamp(40px,6vw,70px) clamp(28px,5vw,60px);
  display: flex; align-items: center;
  background:
    radial-gradient(ellipse 900px 600px at 5% 10%, rgba(107,92,231,0.32), transparent 62%),
    radial-gradient(ellipse 600px 500px at 90% 85%, rgba(34,217,138,0.09), transparent 58%),
    var(--nx-bg);
  color: var(--nx-text);
}
.nx-split-left::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 56px 56px;
}
.nx-split-left-inner { position: relative; max-width: 600px; }
.nx-bullets { margin-top: 18px; display: grid; gap: 7px; }
.nx-bullet { color: var(--nx-text2); font-size: 13.5px; line-height: 1.5; }
.nx-bullet::before { content: '→ '; color: var(--nx-violet2); font-weight: 700; }
.nx-cta { display: flex; gap: 10px; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.nx-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 18px; }

/* Login right panel */
.nx-split-right {
  padding: clamp(40px,6vw,70px) clamp(28px,5vw,60px);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.018);
  border-left: 1px solid var(--nx-border);
}
@media (max-width: 900px) { .nx-split-right { border-left: none; border-top: 1px solid var(--nx-border); } }

.nx-login-card {
  width: min(400px, 100%);
  background: var(--nx-surface);
  border: 1px solid var(--nx-border2);
  border-radius: var(--nx-radius-lg);
  padding: 28px 26px 24px;
  box-shadow: 0 28px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
}
.nx-login-title { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.nx-login-sub { font-size: 13px; color: var(--nx-text3); margin-top: 5px; }

/* Login form inputs */
#nxrent-loginform { margin-top: 18px; }
#nxrent-loginform label {
  display: block; color: var(--nx-text3);
  font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  margin: 13px 0 5px;
}
#nxrent-loginform input[type="text"],
#nxrent-loginform input[type="password"] {
  width: 100%;
  background: var(--nx-surface2); border: 1px solid var(--nx-border2);
  color: var(--nx-text); border-radius: var(--nx-radius); padding: 10px 12px;
  font-family: var(--nx-font); font-size: 14px; outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
#nxrent-loginform input[type="text"]:focus,
#nxrent-loginform input[type="password"]:focus {
  border-color: var(--nx-violet);
  box-shadow: 0 0 0 3px rgba(107,92,231,0.15);
}
#nxrent-loginform .login-remember { margin-top: 11px; color: var(--nx-text2); font-size: 13px; }
#nxrent-loginform .login-remember input { accent-color: var(--nx-violet); }
#nxrent-loginform .login-submit { margin-top: 14px; }
#nxrent-loginform input[type="submit"] {
  width: 100%; border: 0; border-radius: var(--nx-radius); padding: 11px 14px;
  font-family: var(--nx-font); font-weight: 700; font-size: 13.5px; cursor: pointer;
  background: var(--nx-violet); color: #fff; letter-spacing: -0.01em;
  transition: filter 0.12s;
}
#nxrent-loginform input[type="submit"]:hover { filter: brightness(1.13); }

.nx-login-links { margin-top: 13px; font-size: 12.5px; }
.nx-login-links a { color: var(--nx-text3); text-decoration: none; }
.nx-login-links a:hover { color: var(--nx-text2); text-decoration: underline; text-underline-offset: 3px; }

/* ── Pricing ─────────────────────────────────────────────────── */
.nx-grid3 { display: grid; gap: 14px; }
.nx-pricing { grid-template-columns: repeat(3, minmax(0,1fr)); align-items: start; }
@media (max-width: 820px) { .nx-pricing { grid-template-columns: 1fr; } }

.nx-plan { position: relative; display: flex; flex-direction: column; transition: border-color 0.14s; }
.nx-plan:hover { border-color: var(--nx-border2); }
.nx-plan-top { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--nx-border); }
.nx-plan-featured {
  border-color: rgba(107,92,231,0.32) !important;
  background: rgba(107,92,231,0.055);
  box-shadow: 0 0 0 1px rgba(107,92,231,0.16), 0 18px 48px rgba(107,92,231,0.07);
}
.nx-plan-badge {
  display: inline-block; margin-bottom: 10px;
  padding: 3px 9px; border-radius: 99px;
  background: rgba(107,92,231,0.16); border: 1px solid rgba(107,92,231,0.30);
  color: var(--nx-violet2); font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
}
.nx-price { font-size: 36px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin: 5px 0 4px; }
.nx-price span { font-size: 15px; font-weight: 500; color: var(--nx-text2); letter-spacing: 0; }

.nx-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.nx-list li { font-size: 13px; color: var(--nx-text2); padding-left: 18px; position: relative; line-height: 1.45; }
.nx-list li::before { content: '✓'; position: absolute; left: 0; color: var(--nx-green); font-size: 11px; font-weight: 700; top: 1px; }
.nx-list li strong { color: var(--nx-text); font-weight: 600; }
.nx-plan .nx-btn { margin-top: auto; }

/* ── Sections ────────────────────────────────────────────────── */
.nx-section { padding: 60px 0; }
.nx-section-sm { padding: 36px 0; }
.nx-divider { border: none; border-top: 1px solid var(--nx-border); margin: 0; }
.nx-main { min-height: calc(100vh - 56px); }

/* ── Portal / app shell — hide ALL theme chrome ──────────────── */
body.nxrent-portal .nx-header,
body.nxrent-app    .nx-header,
body.nxrent-portal .nx-footer,
body.nxrent-app    .nx-footer,
body.nxrent-app    .nx-main,
body.nxrent-app    header,
body.nxrent-app    footer,
body.nxrent-app    .site-header,
body.nxrent-app    .site-footer,
body.nxrent-app    #wpadminbar { display: none !important; }

/* Reset page padding/margin on app shell */
body.nxrent-app,
body.nxrent-app #page,
body.nxrent-app #content,
body.nxrent-app .site,
body.nxrent-app .site-content {
  padding: 0 !important;
  margin: 0 !important;
  background: #0d0d0d !important;
}

/* ── Suspended / error banner ────────────────────────────────── */
.nx-status-banner {
  padding: 14px 20px;
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.22);
  border-radius: var(--nx-radius);
  color: #f87171;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  margin: 24px auto;
  max-width: 560px;
}


/* ── 404 ─────────────────────────────────────────────────────── */

.nx-404-hero{
  min-height:calc(100vh - 150px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 0 36px;
}
.nx-404-frame{
  position:relative;
  overflow:hidden;
  width:min(100%,1080px);
  min-height:540px;
  border-radius:34px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.10),transparent 24%),
    radial-gradient(circle at 82% 20%,rgba(255,255,255,.08),transparent 22%),
    linear-gradient(180deg,rgba(10,16,38,.28),rgba(8,10,18,.45)),
    radial-gradient(circle at 50% 22%,rgba(152,168,255,.35),rgba(111,125,214,.22) 26%,rgba(60,75,132,.18) 40%,rgba(14,18,34,.94) 74%),
    linear-gradient(135deg,#42476b 0%,#9397b5 50%,#c0c1d7 100%);
  box-shadow:0 24px 80px rgba(0,0,0,.34);
}
.nx-404-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(7,10,20,.18) 0%,rgba(7,10,20,.34) 100%);
}
.nx-404-content{
  position:relative;
  z-index:1;
  max-width:640px;
  padding:56px 56px 64px;
}
.nx-404-kicker{
  margin:0 0 18px;
  color:rgba(255,255,255,.92);
  font-size:13px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.nx-404-number{
  margin:0 0 6px;
  font-size:clamp(112px,18vw,210px);
  line-height:.85;
  font-weight:900;
  letter-spacing:-.08em;
  color:rgba(255,255,255,.74);
  text-shadow:0 6px 22px rgba(0,0,0,.10);
}
.nx-404-heading{
  margin:0 0 10px;
  font-size:clamp(34px,4.2vw,60px);
  line-height:.96;
  letter-spacing:-.04em;
}
.nx-404-copy{
  max-width:560px;
  margin:0 0 26px;
  color:rgba(255,255,255,.84);
  font-size:18px;
  line-height:1.55;
}
.nx-404-actions{display:flex;gap:12px;flex-wrap:wrap}
.nx-404-frame .nx-btn-primary{box-shadow:0 10px 24px rgba(107,92,231,.26)}
.nx-404-frame .nx-btn-ghost{background:rgba(7,10,20,.15);border-color:rgba(255,255,255,.18)}
.nx-404-frame .nx-btn-ghost:hover{background:rgba(7,10,20,.26)}
@media (max-width:768px){
  .nx-404-hero{padding:18px 0 20px;min-height:calc(100vh - 120px)}
  .nx-404-frame{min-height:440px;border-radius:24px}
  .nx-404-content{padding:34px 26px 38px}
  .nx-404-copy{font-size:16px}
}