/* ===============================
   NJS Frontend Theme Switcher + Responsive Fixes
   Loaded last to override theme rules.
================================== */

/* --- Theme variables (defaults) --- */
:root{
  --njs-bg: #071a3a;
  --njs-surface: rgba(255,255,255,.06);
  --njs-surface-2: rgba(255,255,255,.09);
  --njs-text: #ffffff;
  --njs-muted: rgba(255,255,255,.78);
  --njs-accent: #4aa3ff;
  --njs-accent-2: #7c5cff;
  --njs-border: rgba(255,255,255,.12);
  --njs-radius: 18px;
  --njs-shadow: 0 10px 30px rgba(0,0,0,.22);
  --njs-font-scale: 1;
}

/* --- 10 presets --- */
:root[data-njs-theme="t1"]{ /* Blue Pro */
  --njs-bg:#071a3a; --njs-surface:rgba(255,255,255,.06); --njs-text:#fff; --njs-muted:rgba(255,255,255,.78);
  --njs-accent:#4aa3ff; --njs-border:rgba(255,255,255,.12);
}
:root[data-njs-theme="t2"]{ /* Dark Neon */
  --njs-bg:#07070a; --njs-surface:rgba(255,255,255,.07); --njs-text:#fff; --njs-muted:rgba(255,255,255,.74);
  --njs-accent:#9b5cff; --njs-accent-2:#00d4ff; --njs-border:rgba(255,255,255,.14);
}
:root[data-njs-theme="t3"]{ /* Light Clean */
  --njs-bg:#f7f9ff; --njs-surface:#ffffff; --njs-surface-2:#f1f4ff; --njs-text:#0b1220; --njs-muted:rgba(11,18,32,.70);
  --njs-accent:#2563eb; --njs-border:rgba(11,18,32,.10);
}
:root[data-njs-theme="t4"]{ /* Midnight */
  --njs-bg:#050d1c; --njs-surface:rgba(255,255,255,.05); --njs-text:#eaf2ff; --njs-muted:rgba(234,242,255,.72);
  --njs-accent:#22c55e; --njs-border:rgba(255,255,255,.10);
}
:root[data-njs-theme="t5"]{ /* Elegant Indigo */
  --njs-bg:#0b1022; --njs-surface:rgba(255,255,255,.06); --njs-text:#fff; --njs-muted:rgba(255,255,255,.76);
  --njs-accent:#6366f1; --njs-border:rgba(255,255,255,.12);
}
:root[data-njs-theme="t6"]{ /* Glass */
  --njs-bg:#06162f; --njs-surface:rgba(255,255,255,.10); --njs-surface-2:rgba(255,255,255,.14);
  --njs-text:#fff; --njs-muted:rgba(255,255,255,.78);
  --njs-accent:#38bdf8; --njs-border:rgba(255,255,255,.18);
}
:root[data-njs-theme="t7"]{ /* Warm */
  --njs-bg:#120b0b; --njs-surface:rgba(255,255,255,.06); --njs-text:#fff; --njs-muted:rgba(255,255,255,.76);
  --njs-accent:#fb923c; --njs-border:rgba(255,255,255,.12);
}
:root[data-njs-theme="t8"]{ /* Corporate */
  --njs-bg:#07121f; --njs-surface:rgba(255,255,255,.06); --njs-text:#fff; --njs-muted:rgba(255,255,255,.74);
  --njs-accent:#0ea5e9; --njs-border:rgba(255,255,255,.12); --njs-radius:14px;
}
:root[data-njs-theme="t9"]{ /* Minimal Dark */
  --njs-bg:#0b0f16; --njs-surface:rgba(255,255,255,.05); --njs-text:#fff; --njs-muted:rgba(255,255,255,.72);
  --njs-accent:#a3e635; --njs-border:rgba(255,255,255,.10); --njs-radius:12px;
}
:root[data-njs-theme="t10"]{ /* High Contrast */
  --njs-bg:#000; --njs-surface:#0f0f0f; --njs-text:#fff; --njs-muted:rgba(255,255,255,.80);
  --njs-accent:#fff; --njs-border:rgba(255,255,255,.22);
}

/* --- Global responsive/text fixes --- */

/* --- Fix: if reveal animation fails on some mobile browsers, never hide content --- */
@media (max-width: 1024px){
  .njs-reveal{ opacity: 1 !important; transform: none !important; }
  .njs-reveal.is-visible{ opacity: 1 !important; transform: none !important; }
}

html, body { overflow-x: hidden; }
body { background: var(--njs-bg); color: var(--njs-text); }
p, li, span, a, label, input, textarea { color: inherit; }
p { line-height: 1.55; }

/* Force text to be visible on mobile even if theme accidentally hides blocks */
@media (max-width: 820px){
  .content, .content * { visibility: visible !important; }
  .content p, .content li, .content span { display: block; }
}

/* Prevent clipping due to fixed heights */
@media (max-width: 820px){
  .hero-pro, .hero-pro-grid, .hero-pro-lead,
  .packages, .package, .package-card, .package-box,
  .service-card, .card, .box, .content {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Improve readability on mobile/tablet */
@media (max-width: 820px){
  h1 { font-size: 34px !important; line-height: 1.10 !important; }
  h2 { font-size: 24px !important; line-height: 1.15 !important; }
  h3 { font-size: 18px !important; line-height: 1.20 !important; }
  p, li { font-size: 16px !important; }
  .btn, button, .button, a.btn { padding: 12px 14px !important; }
}

/* --- Theme panel --- */
.njs-theme-panel{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 99999;
  width: 290px;
  max-width: calc(100vw - 28px);
  background: rgba(10, 12, 18, .72);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  color: #fff;
  font-family: inherit;
}
.njs-theme-panel *{ box-sizing: border-box; }
.njs-theme-panel .njs-tp-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px;
  gap: 10px;
  background: rgba(255,255,255,.06);
}
.njs-theme-panel .njs-tp-title{ font-weight: 800; font-size: 13px; letter-spacing:.2px; }
.njs-theme-panel .njs-tp-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width: 34px; height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  cursor:pointer;
}
.njs-theme-panel .njs-tp-body{ padding: 10px 12px 12px; display:block; }
.njs-theme-panel.is-collapsed .njs-tp-body{ display:none; }
.njs-theme-panel .njs-tp-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.njs-theme-panel .njs-tp-btn{
  display:flex; align-items:center; justify-content:center;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  text-decoration:none;
  user-select:none;
}
.njs-theme-panel .njs-tp-btn:hover{ transform: translateY(-1px); }
.njs-theme-panel .njs-tp-btn.is-active{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.12);
}
.njs-theme-panel .njs-tp-foot{
  margin-top:10px;
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px;
  font-size: 12px;
  opacity: .9;
}
.njs-theme-panel .njs-tp-reset{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color:#fff;
  padding: 8px 10px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 800;
}
@media (max-width: 520px){
  .njs-theme-panel{ width: 270px; right: 10px; bottom: 10px; }
  .njs-theme-panel .njs-tp-grid{ grid-template-columns: 1fr; }
}