/* ============================
   NyaySar Central (Global)
   CLEAN – keep current view (floating glass strips)
   STRIP SAFETY REFINEMENT (no other change)
   ============================ */

/* ===== Theme palette ===== */
:root{
  --ns-bg: #f7f9fd;
  --ns-header: #0f2f55;
  --ns-footer: #195bb6;
  --ns-accent: #f9a825;
  --ns-white: #ffffff;
  --ns-text: #101828;

  --ns-maxw: 1200px;
  --ns-pad: 16px;

  --ns-radius: 16px;
  --ns-gap-float: 14px;

  /* Header sizing */
  --ns-logo-h: 96px;
  --ns-header-vpad: 6px;
  --ns-header-safe: calc(var(--ns-logo-h) + (var(--ns-header-vpad) * 2));

  /* Footer sizing */
  --ns-footer-h: 54px;
  --ns-footer-gap: 14px;
  --ns-footer-safe: calc(var(--ns-footer-h) + var(--ns-footer-gap) + 14px);

  /* Chat */
  --ns-chat-maxw: 520px;
}

/* Mobile adjustments */
@media (max-width: 720px){
  :root{
    --ns-gap-float: 10px;
    --ns-logo-h: 96px;
    --ns-header-vpad: 6px;
    --ns-header-safe: calc(var(--ns-logo-h) + (var(--ns-header-vpad) * 2));
    --ns-footer-h: 52px;

    /* STRIP SAFETY: keep gap defined for calc */
    --ns-footer-gap: 14px;

    --ns-footer-safe: calc(var(--ns-footer-h) + var(--ns-footer-gap) + 14px);
  }
}

/* ===== Base ===== */
html, body{ height:100%; }
html{ scroll-padding-bottom: var(--ns-footer-safe); }
html, body{ overflow-x: hidden; }

/* STRIP SAFETY: avoid any ancestor clipping fixed strips */
body{
  margin:0;
  background: var(--ns-bg);
  color: var(--ns-text);
  font: 15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial;

  /* IMPORTANT: reserve space for fixed strips */
  padding-top: calc(var(--ns-header-safe) + var(--ns-gap-float));
  padding-bottom: var(--ns-footer-safe);

  /* STRIP SAFETY: ensure fixed layers don't get clipped by body */
  overflow: visible;
  position: relative;
}

.ns-container{
  max-width: var(--ns-maxw);
  margin: 0 auto;
  padding: 0 var(--ns-pad);
}

/* ============================
   FIXED HEADER STRIP (Floating)
   ============================ */
.ns-header{
  position: fixed;
  top: var(--ns-gap-float);
  left: var(--ns-gap-float);
  right: var(--ns-gap-float);

  height: var(--ns-header-safe);

  /* STRIP SAFETY: solid fallback color */
  background: rgba(15,47,85,0.92);
  color:#fff;
  border-radius: var(--ns-radius);

  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 4px 18px rgba(0,0,0,.20);

  /* STRIP SAFETY: never be hidden behind page content */
  z-index: 2147483000;

  overflow: hidden;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .ns-header{
    background: rgba(15,47,85,0.97);
  }
}

.ns-header::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: calc(var(--ns-radius) + 6px);
  background:
    radial-gradient(circle at 12% 18%, rgba(25,91,182,.36), transparent 70%),
    radial-gradient(circle at 88% 82%, rgba(255,255,255,.18), transparent 60%);
  z-index:-1;
}

.ns-header__row{
  height: var(--ns-header-safe);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 0 10px;
  box-sizing: border-box;
}

/* ===== Logo (WORKS for your header.html: .ns-brand__logo) ===== */
.ns-logo,
.ns-brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  gap:10px;
}

/* If header uses <img class="ns-brand__logo"> */
.ns-brand__logo{
  height: var(--ns-logo-h);
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display:block;

  border-radius: 12px;
  background: #fff;
  padding: 4px;
}

/* If some pages still use .ns-logo img */
.ns-logo img{
  height: var(--ns-logo-h);
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display:block;

  border-radius: 12px;
  background: #fff;
  padding: 4px;
}

@media (max-width: 720px){
  .ns-brand__logo,
  .ns-logo img{ max-width: 180px; }
}

/* ===== Navigation ===== */
.ns-nav{ display:block; }

.main-menu{
  display:flex;
  gap:16px;
  list-style:none;
  margin:0;
  padding:0;
}

.main-menu a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:15px;
  transition: color .2s ease;
}

.main-menu a:hover,
.main-menu a.is-active{
  color: var(--ns-accent);
}

/* ===== Mobile nav toggle ===== */
.ns-navtoggle{
  display:none;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.12);
  color:#fff;
  border-radius: 12px;
  height: 40px;
  width: 44px;
  cursor: pointer;
}

@media (max-width: 720px){
  .ns-navtoggle{ display:inline-grid; place-items:center; }

  #mainNav{
    display:none;
    position:absolute;
    top: calc(var(--ns-header-safe) + 8px);
    left:0;
    right:0;
  }

  #mainNav.is-open{ display:block; }

  #mainNav .main-menu{
    background: rgba(15,47,85,0.96);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    padding: 12px;
    display:grid;
    gap:10px;
  }
}

/* ===== Buttons ===== */
.ns-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 14px;
  border-radius:12px;
  border:1px solid transparent;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  background: var(--ns-accent);
  color:#fff;
  transition: transform .06s ease, background .12s ease;
}

.ns-btn:hover{ background:#e18a00; transform:translateY(-1px); }
.ns-btn:active{ transform:translateY(0); }

.ns-btn--ghost{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);
}
.ns-btn--ghost:hover{ background: rgba(255,255,255,.22); }

/* ===== Sections ===== */
.ns-section{ padding:22px var(--ns-pad); }

.ns-section--alt{
  background:linear-gradient(0deg,#fff,#f3f7ff);
  border-block:1px solid #e8eefc;
}

.ns-h2{
  margin:0 0 14px;
  font-size:24px;
  color:#133a73;
}

/* ============================
   FIXED FOOTER STRIP (Floating)
   ============================ */
.ns-footer{
  position: fixed;
  bottom: var(--ns-gap-float);
  left: var(--ns-gap-float);
  right: var(--ns-gap-float);

  min-height: var(--ns-footer-h);

  /* STRIP SAFETY: solid fallback color */
  background: rgba(25,91,182,0.92);
  color:#fff;
  border-radius: var(--ns-radius);

  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 -4px 18px rgba(0,0,0,.20);

  /* STRIP SAFETY: keep below header but above everything else */
  z-index: 2147482000;

  overflow: hidden;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .ns-footer{
    background: rgba(25,91,182,0.97);
  }
}

.ns-footer::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: calc(var(--ns-radius) + 6px);
  background:
    radial-gradient(circle at 82% 84%, rgba(249,168,37,.30), transparent 70%),
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.18), transparent 60%);
  z-index:-1;
}

.ns-footer__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 8px 10px;
  box-sizing:border-box;
  flex-wrap: wrap;
}

.ns-footer__links{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap: wrap;
}

.ns-footer__links a{
  color:#fff;
  font-weight:700;
  text-decoration:none;
  opacity:.95;
}
.ns-footer__links a:hover{ opacity:1; text-decoration:underline; }

/* Footer spacer (optional utility) */
.ns-footer-spacer{ height: var(--ns-footer-safe); }

/* ============================
   Service Cards – Global
   ============================ */
@keyframes ns-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.ns-svc img { animation: ns-rotate 15s linear infinite; will-change: transform; }
.ns-svc:hover img { animation-play-state: paused; }

/* ============================
   CHAT MODAL (Footer v2)
   Uses: #nsChatBtn, #nsChatModal, #nsChatClose
   ============================ */
.ns-chat-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2147483647;
  background: rgba(0,0,0,0.45);
  padding: 16px;
}

/* Open state (keep your current behavior) */
.ns-chat-modal.is-open{
  display: grid;
  place-items: end start;
}

.ns-chat-card{
  width: min(380px, calc(100vw - 32px));
  margin-bottom: calc(var(--ns-footer-h) + var(--ns-gap-float));
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 40px rgba(0,0,0,0.28);
}

.ns-chat-head{
  background: var(--ns-header);
  color: #fff;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ns-chat-title{ display:flex; flex-direction:column; line-height: 1.15; }
.ns-chat-sub{ font-size: 12px; opacity: 0.85; margin-top: 2px; }

.ns-chat-iconbtn{
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.ns-chat-iconbtn:hover{ background: rgba(255,255,255,0.14); }

.ns-chat-form{ padding: 12px; display: grid; gap: 10px; }
.ns-chat-field{ display:grid; gap: 6px; }
.ns-chat-field span{ font-size: 12px; color: #111; font-weight: 700; }

.ns-chat-field input,
.ns-chat-field textarea{
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(16,24,40,0.18);
  border-radius: 12px;
  outline: none;
  font: inherit;
}
.ns-chat-field input:focus,
.ns-chat-field textarea:focus{
  border-color: rgba(15,47,85,0.55);
  box-shadow: 0 0 0 3px rgba(15,47,85,0.12);
}

.ns-chat-status{
  background: rgba(15,47,85,0.06);
  border: 1px solid rgba(15,47,85,0.12);
  color: #111;
  padding: 10px;
  border-radius: 12px;
  font-size: 13px;
}

.ns-chat-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

@media (max-width: 480px){
  .ns-chat-modal.is-open{ place-items: end center; }
  .ns-chat-card{ margin-bottom: calc(var(--ns-footer-h) + 10px); }
}















/* ==================================================
   STRIP COMPAT PATCH (NO OTHER CHANGE)
   Your HTML uses: .ns-strip .ns-strip--top/.ns-strip--bottom
   Existing CSS uses: .ns-header/.ns-footer
   This maps both so strips always show.
   ================================================== */

/* Treat ns-strip as header/footer strips */
.ns-strip.ns-strip--top{
  position: fixed;
  top: var(--ns-gap-float);
  left: var(--ns-gap-float);
  right: var(--ns-gap-float);

  height: var(--ns-header-safe);
  background: rgba(15,47,85,0.92);
  color:#fff;
  border-radius: var(--ns-radius);

  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 4px 18px rgba(0,0,0,.20);

  z-index: 2147483000;
  overflow: hidden;
}

.ns-strip.ns-strip--bottom{
  position: fixed;
  bottom: var(--ns-gap-float);
  left: var(--ns-gap-float);
  right: var(--ns-gap-float);

  min-height: var(--ns-footer-h);
  background: rgba(25,91,182,0.92);
  color:#fff;
  border-radius: var(--ns-radius);

  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 -4px 18px rgba(0,0,0,.20);

  z-index: 2147482000;
  overflow: hidden;
}

/* Same glow effect like header/footer */
.ns-strip.ns-strip--top::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: calc(var(--ns-radius) + 6px);
  background:
    radial-gradient(circle at 12% 18%, rgba(25,91,182,.36), transparent 70%),
    radial-gradient(circle at 88% 82%, rgba(255,255,255,.18), transparent 60%);
  z-index:-1;
}

.ns-strip.ns-strip--bottom::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: calc(var(--ns-radius) + 6px);
  background:
    radial-gradient(circle at 82% 84%, rgba(249,168,37,.30), transparent 70%),
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.18), transparent 60%);
  z-index:-1;
}

/* Inner row matches your HTML: .ns-strip__inner */
.ns-strip__inner{
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 0 10px;
  box-sizing: border-box;
}

/* Links used in header/footer: .ns-link */
.ns-link{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:15px;
  transition: color .2s ease;
}

.ns-link:hover,
.ns-link.is-active{
  color: var(--ns-accent);
}

/* Keep nav inline like your old main-menu */
.ns-nav--header,
.ns-nav--footer{
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap: wrap;
}

/* Auth block alignment */
.ns-auth{
  display:flex;
  gap:10px;
  align-items:center;
}

/* Chat button basic style (only visibility + match theme) */
.ns-chatBtn{
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.14);
  color:#fff;
  border-radius: 12px;
  height: 40px;
  padding: 0 12px;
  font-weight: 800;
  cursor: pointer;
}
.ns-chatBtn:hover{ background: rgba(255,255,255,.22); }

/* Hits area */
.ns-hit{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
}

/* Safety fallback if backdrop-filter unsupported */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .ns-strip.ns-strip--top{ background: rgba(15,47,85,0.97); }
  .ns-strip.ns-strip--bottom{ background: rgba(25,91,182,0.97); }
}




/* === Footer chat button spacing fix (no design change) === */
.ns-strip--bottom .ns-strip__inner{
  padding-top: 10px;   /* was 8px via generic rule */
  padding-bottom: 10px;
}



/* Chat button slight drop to avoid touching footer edge */
.ns-strip--bottom .ns-chatBtn{
  margin-top: 2px;
}





/* ===== Logo visual refinement (ONLY logo, no layout change) ===== */
.ns-brand__logo{
  height: calc(var(--ns-logo-h) - 14px); /* reduce height slightly */
  padding: 6px 10px;                     /* balanced inner space */
  background: #ffffff;
  border-radius: 14px;

  /* Soft lift effect */
  box-shadow:
    0 2px 6px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(0,0,0,0.06);

  align-self: center;                    /* vertical centering */
}

/* Mobile fine-tune */
@media (max-width: 720px){
  .ns-brand__logo{
    height: calc(var(--ns-logo-h) - 18px);
    padding: 5px 8px;
  }
}





/* ===== Logo contrast fix (transparent PNG safe) ===== */
.ns-brand__logo{
  height: calc(var(--ns-logo-h) - 14px);
  padding: 8px 12px;

  /* Key fix */
  background: rgba(255,255,255,0.92);  /* NOT fully solid */
  backdrop-filter: blur(2px);

  border-radius: 16px;

  box-shadow:
    0 3px 8px rgba(0,0,0,0.25),
    inset 0 0 0 1px rgba(0,0,0,0.08);

  align-self: center;
}
@media (max-width: 720px){
  .ns-brand__logo{
    height: calc(var(--ns-logo-h) - 18px);
    padding: 6px 10px;
  }
}



/* Logo visibility boost (only if PNG is transparent) */
.ns-brand__logo{
  background: rgba(255,255,255,0.96);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}


/* ===== HARD LOGO RENDER FIX (Firefox / fixed-header safe) ===== */

/* Force bitmap rendering even if <img> paint fails */
.ns-brand__logo{
  display: block;
  width: auto;
  height: calc(var(--ns-logo-h) - 14px);

  /* FORCE redraw */
  content: url("/logo.png?v=20260112j");

  background: #ffffff;
  padding: 8px 12px;
  border-radius: 16px;

  box-shadow:
    0 4px 10px rgba(0,0,0,0.28),
    inset 0 0 0 1px rgba(0,0,0,0.08);

  image-rendering: auto;
}




/* ============================
   HEADER: compact height + logo without white badge
   (STRICT: no color/theme change)
   ============================ */

/* Make header nearly equal to footer (footer is ~54px) */
:root{
  --ns-logo-h: 44px;          /* compact logo height */
  --ns-header-vpad: 6px;      /* keep slim padding */
  --ns-header-safe: calc(var(--ns-logo-h) + (var(--ns-header-vpad) * 2));
}

/* If you are using ns-strip header (your HTML does) */
.ns-strip.ns-strip--top{
  height: var(--ns-header-safe);
}

/* Keep inner row height correct */
.ns-strip.ns-strip--top .ns-strip__inner{
  padding-top: var(--ns-header-vpad);
  padding-bottom: var(--ns-header-vpad);
}

/* REMOVE badge look: no background, no padding, no white box */
.ns-brand__logo{
  height: var(--ns-logo-h);
  width: auto;
  max-width: 160px;

  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  display: block;
  object-fit: contain;
  align-self: center;
}

/* Optional: keep it crisp on dark strip without changing theme colors */
.ns-brand{
  gap: 10px;
}





/* ============================
   CHAT FORM: clean like other forms (no color changes)
   ============================ */
.ns-chat-form{
  gap: 14px;                 /* balanced spacing */
}

.ns-chat-field{
  margin: 0;
  padding: 0;
  border: 0;
}

.ns-chat-field span{
  display: block;
  margin: 0 0 6px;
}

.ns-chat-field input,
.ns-chat-field textarea{
  box-sizing: border-box;
  display: block;

  border: 1px solid rgba(16,24,40,0.18);
  border-radius: 12px;

  background: #fff;
  outline: none;

  /* avoid “double line” feel */
  box-shadow: none;
}

.ns-chat-field input:focus,
.ns-chat-field textarea:focus{
  border-color: rgba(15,47,85,0.55);
  box-shadow: 0 0 0 3px rgba(15,47,85,0.12);
}





/* ============================
   LOGO EMBED (no layout/color change)
   Works even if <img> fails to paint
   ============================ */

/* Hide the img but keep markup intact */
.ns-brand__logo{
  opacity: 0;
  width: 1px;
  height: 1px;
  padding: 0 !important;
  margin: 0 !important;
  position: absolute;
  pointer-events: none;
}

/* Paint logo on the anchor itself */
.ns-brand{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;

  /* fixed logo slot */
  min-width: 140px;
  height: var(--ns-logo-h);
  padding-left: 150px;          /* reserve space for logo image */
}

/* The embedded logo */
.ns-brand::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  width: 140px;                 /* adjust if needed */
  height: var(--ns-logo-h);

  background-image: url("/logo.png?v=20260112j");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;

  /* subtle visibility, no color change */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.30));
}


/* === FINAL LOGO EMBED FIX === */

/* Ensure brand has real paint box */
.ns-brand{
  height: var(--ns-logo-h);
  line-height: var(--ns-logo-h);
}

/* Force pseudo-element to render */
.ns-brand::before{
  display: block;
}