/* ═══════════════════════════════════════════════════════════
   NS theme — legacy page bridge.

   The pages that still render their original pre-theme view (about, faq,
   forum, notes, gallery, market updates, reviews, the policy pages, the
   login modal…) now sit inside the new chrome. Their markup was written for
   the old Bootstrap skin, so without this file they read as a different site
   pasted under the new header.

   Rather than rewrite ~25 views and risk their order / payment / forum logic,
   this restyles the EXISTING class names — the same approach ns-account.css
   already takes for the customer account area. Nothing here changes markup or
   behaviour; every rule is presentational and scoped to body.ns-theme.

   Load order matters: this file comes AFTER ns-theme.css and ns-account.css,
   and its `body.ns-theme` prefix outranks their `.ns-theme` one, so it is the
   last word on any selector the two share.

   NEVER style a bare `.btn` here — that is the theme's own primitive. Legacy
   Bootstrap buttons are matched with `.btn:not([class*="btn--"])` instead.
   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   1. PAGE HEADER

   Every inner page opens with `<div class="bread"><h3>Title</h3></div>`.
   custom.css painted that as a 180px navy photo banner with the title
   absolutely centred in white. Two problems under the new theme: it looks
   nothing like the rest of the site, and because the theme's header is fixed
   and transparent until it sticks, its dark navy links landed on that dark
   banner and became invisible.

   So the banner is dismantled here — background image, the ::after navy
   overlay, the fixed height and the absolute centring all go — and rebuilt as
   the theme's page header: a light band, a shell-width Playfair title, a gold
   rule and a hairline.
   ─────────────────────────────────────────────── */
body.ns-theme .bread{
  position:relative;
  width:100%;
  height:auto;
  min-height:0;
  overflow:visible;
  z-index:auto;
  margin:0;
  padding:clamp(104px,8.5vw,126px) 0 0;
  text-align:left;
  background:linear-gradient(180deg,#EFF4F7 0%,var(--paper) 78%);
  background-size:auto;
  background-repeat:no-repeat;
}
/* the navy overlay becomes the hairline that closes the header */
body.ns-theme .bread::after{
  content:"";
  position:static;
  display:block;
  width:var(--shell);
  height:1px;
  margin:22px auto 0;
  opacity:1;
  z-index:auto;
  background:var(--line);
}
body.ns-theme .bread h3{
  position:static;
  transform:none;
  width:var(--shell);
  margin:0 auto;
  padding:0;
  font-family:var(--display);
  font-size:clamp(28px,3.6vw,44px);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.016em;
  text-transform:none;
  color:var(--text);
}
body.ns-theme .bread h3::after{
  content:"";
  display:block;
  width:52px;
  height:3px;
  margin-top:13px;
  border-radius:100px;
  background:var(--gold-fill);
}
/* market-details wraps the title in <abbr> for the tooltip */
body.ns-theme .bread abbr{text-decoration:none;color:inherit}
body.ns-theme .bread.limit_text h3{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* the wrapper the banner used to need */
body.ns-theme .image_breadcumb{
  background:none !important;
  min-height:0;
  padding:0;
  margin:0;
}

/* The account area supplies its own header band (ns-account.css §1), so the
   .bread inside it must stay a plain shell-width block — no second band, no
   second hairline. */
body.ns-theme .prfoile_inner_header .bread{
  width:var(--shell);
  margin:0 auto;
  padding:0 0 26px;
  background:none;
  border-bottom:1px solid var(--line);
}
body.ns-theme .prfoile_inner_header .bread::after{display:none}
body.ns-theme .prfoile_inner_header .bread h3{width:auto;margin:0}


/* ───────────────────────────────────────────────
   2. BUTTONS

   The legacy skin had one button: a flat #ff585c rectangle. Every variant
   below is remapped onto the theme's pill primitives — coral for the action
   that costs something, wire for everything else.
   ─────────────────────────────────────────────── */
body.ns-theme .btn:not([class*="btn--"]),
body.ns-theme .modal__form_btn,
body.ns-theme .view_all_button,
body.ns-theme .wishlistbtn,
body.ns-theme .profileeditbtn,
body.ns-theme .primary_button,
body.ns-theme .secondary_button,
body.ns-theme .np-btn,
body.ns-theme .np-btn-ghost,
body.ns-theme .post_topic_wrapper > a,
body.ns-theme .otp_channel_btn,
body.ns-theme .inner_post_buttons ul li a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  height:auto;
  min-height:0;
  padding:13px 26px;
  border:1px solid transparent;
  border-radius:100px;
  font-family:var(--body);
  font-size:14.5px !important;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.01em;
  text-align:center;
  text-transform:none;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),
             background .3s,color .3s,border-color .3s;
}

/* --- primary: the one bold spend --- */
body.ns-theme .btn-primary,
body.ns-theme .btn-danger,
body.ns-theme .btn-dark,
body.ns-theme .modal__form_btn,
body.ns-theme .view_all_button,
body.ns-theme .profileeditbtn,
body.ns-theme .primary_button,
body.ns-theme .np-btn,
body.ns-theme .post_topic_wrapper > a{
  background:var(--coral) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 12px 30px -14px rgba(194,69,31,.8) !important;
}
body.ns-theme .btn-primary:hover,
body.ns-theme .btn-danger:hover,
body.ns-theme .btn-dark:hover,
body.ns-theme .modal__form_btn:hover,
body.ns-theme .view_all_button:hover,
body.ns-theme .profileeditbtn:hover,
body.ns-theme .primary_button:hover,
body.ns-theme .np-btn:hover,
body.ns-theme .post_topic_wrapper > a:hover{
  background:#B03C1B !important;
  color:#fff !important;
  transform:translateY(-3px);
  box-shadow:0 22px 44px -16px rgba(194,69,31,.9) !important;
}

/* --- secondary: outlined, sits quietly next to the primary --- */
body.ns-theme .btn:not([class*="btn--"]):not(.btn-primary):not(.btn-danger):not(.btn-dark),
body.ns-theme .btn-secondary,
body.ns-theme .btn-info,
body.ns-theme .btn-light,
body.ns-theme .wishlistbtn,
body.ns-theme .secondary_button,
body.ns-theme .np-btn-ghost,
body.ns-theme .otp_channel_btn,
body.ns-theme .inner_post_buttons ul li a{
  background:rgba(255,255,255,.78) !important;
  color:var(--text) !important;
  border-color:var(--line-2) !important;
  box-shadow:var(--sh-sm) !important;
}
body.ns-theme .btn:not([class*="btn--"]):not(.btn-primary):not(.btn-danger):not(.btn-dark):hover,
body.ns-theme .btn-secondary:hover,
body.ns-theme .btn-info:hover,
body.ns-theme .btn-light:hover,
body.ns-theme .wishlistbtn:hover,
body.ns-theme .secondary_button:hover,
body.ns-theme .np-btn-ghost:hover,
body.ns-theme .otp_channel_btn:hover,
body.ns-theme .inner_post_buttons ul li a:hover{
  background:#fff !important;
  color:var(--blue-2) !important;
  border-color:var(--blue-2) !important;
  transform:translateY(-3px);
  box-shadow:var(--sh-md) !important;
}
/* the OTP channel picker marks its choice with .active */
body.ns-theme .otp_channel_btn.active{
  background:var(--blue-2) !important;
  color:#fff !important;
  border-color:var(--blue-2) !important;
}

/* --- modifiers kept working --- */
body.ns-theme .btn-block,
body.ns-theme .modal__form_btn{width:100%;display:flex}
body.ns-theme .btn-sm{padding:9px 18px;font-size:13px !important}
body.ns-theme .btn-link{
  background:none !important;border-color:transparent !important;box-shadow:none !important;
  color:var(--blue-2) !important;padding:6px 4px;
}
body.ns-theme .btn-link:hover{transform:none;text-decoration:underline}
body.ns-theme .btn:disabled,
body.ns-theme .btn.disabled,
body.ns-theme .primary_button:disabled{opacity:.55;transform:none !important;cursor:not-allowed}

/* a couple of legacy buttons carry their own sizing that must survive */
body.ns-theme .wishlistbtn{width:auto;float:none;margin:10px 10px 10px 0}
body.ns-theme .inner_post_buttons ul li a{padding:9px 16px;font-size:13px !important}
body.ns-theme .sub_post_flex a{
  background:none !important;border:0 !important;box-shadow:none !important;
  color:var(--blue-2) !important;font-weight:600;
}
/* .post_topic_wrapper's <p> is a fake disabled button, not a real control */
body.ns-theme .post_topic_wrapper > p{
  display:inline-flex;align-items:center;justify-content:center;
  width:auto;padding:12px 26px;margin:10px auto 0;
  border-radius:100px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.78);color:var(--muted);
  box-shadow:var(--sh-sm);
  font-size:14px;font-weight:600;letter-spacing:.01em;text-transform:none;
}
/* the small icon button inside search boxes stays an icon */
body.ns-theme .small_button{
  background:none !important;border:0 !important;box-shadow:none !important;
  padding:0;border-radius:0;
}


/* ───────────────────────────────────────────────
   2b. THE ID-SELECTOR BUTTONS

   custom.css paints roughly a dozen buttons #ff585c through ID selectors.
   An ID beats any class, so `.btn--gold` on the nav CTA and `.nsc b` on the
   cart badge were both losing to it — which is why the header's Login button
   was the old red instead of the theme's gold. `body.ns-theme #id` carries an
   ID of its own plus two more, so it wins cleanly.
   ─────────────────────────────────────────────── */

/* the header CTA is marked up as `btn btn--gold`; give it that appearance back */
body.ns-theme #sign_up{
  padding:15px 28px;
  border-radius:100px;
  background:var(--gold-fill);
  color:#241A05;
  box-shadow:0 12px 30px -14px rgba(168,123,34,.85);
}
body.ns-theme #sign_up:hover{color:#241A05}
/* the cart badge belongs to .nsc b (ns-app.css) */
body.ns-theme .nsc #cart_count{
  top:-3px;right:-3px;left:auto;
  min-width:19px;width:auto;height:19px;padding:0 5px;
  border-radius:100px;
  background:var(--coral);
  border:2px solid var(--paper);
  color:#fff;
  font-family:var(--label);font-size:10px;font-weight:700;line-height:1;
}
/* the logged-in menu is .nsu now; drop the old float/offset on its wrapper */
body.ns-theme #after_login_surname{
  float:none;display:block;margin:0;padding-top:0;
}

/* --- primary actions --- */
/* `#add_to_cart` / `#buy_now` are shared with the THEMED product and book
   pages, where ns-product.css styles them as `.ns-pd__btn` (buy = gold, cart =
   outlined). This bridge only exists for the pre-theme views, so both IDs are
   matched with `:not(.ns-pd__btn)` — without it the higher specificity here
   swapped the designed pair round. */
body.ns-theme .select_product,
body.ns-theme #place_order,
body.ns-theme #add_to_cart:not(.ns-pd__btn),
body.ns-theme #buy,
body.ns-theme #replybtn,
body.ns-theme #reportabuse_sbt,
body.ns-theme #forgot,
body.ns-theme #resetpass,
body.ns-theme .contact_sumbit,
body.ns-theme .modal_form button,
body.ns-theme .earn_more,
body.ns-theme .pen_download_link,
body.ns-theme .start_d a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:auto;
  height:auto;
  padding:13px 26px;
  border:1px solid transparent !important;
  border-radius:100px;
  background:var(--coral) !important;
  color:#fff !important;
  box-shadow:0 12px 30px -14px rgba(194,69,31,.8) !important;
  font-family:var(--body);
  font-size:14.5px !important;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.01em;
  text-align:center;
  text-transform:none;
  text-decoration:none;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .3s;
}
body.ns-theme .select_product:hover,
body.ns-theme #place_order:hover,
body.ns-theme #add_to_cart:not(.ns-pd__btn):hover,
body.ns-theme #buy:hover,
body.ns-theme #replybtn:hover,
body.ns-theme #reportabuse_sbt:hover,
body.ns-theme #forgot:hover,
body.ns-theme #resetpass:hover,
body.ns-theme .contact_sumbit:hover,
body.ns-theme .modal_form button:hover,
body.ns-theme .earn_more:hover,
body.ns-theme .pen_download_link:hover,
body.ns-theme .start_d a:hover{
  background:#B03C1B !important;
  color:#fff !important;
  transform:translateY(-3px);
  box-shadow:0 22px 44px -16px rgba(194,69,31,.9) !important;
}
body.ns-theme #add_to_cart:not(.ns-pd__btn) a,
body.ns-theme #buy a,
body.ns-theme #place_order a{color:#fff !important;text-transform:none}
body.ns-theme #add_to_cart span::before,
body.ns-theme #sign_up span::before{margin-right:8px;margin-left:0}
/* these two sat inside a floated/absolute layout that the pill no longer needs */
body.ns-theme .select_product,
body.ns-theme #place_order{float:none;margin-left:auto}
body.ns-theme .contact_sumbit{position:static;transform:none;left:auto;bottom:auto;margin-top:8px}

/* --- the outlined "buy now" twin --- */
body.ns-theme #buy_now:not(.ns-pd__btn){
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 26px;
  border:1px solid var(--line-2) !important;
  border-radius:100px;
  background:rgba(255,255,255,.78) !important;
  color:var(--text) !important;
  box-shadow:var(--sh-sm);
  font-size:14.5px;font-weight:600;text-transform:none;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),
             background .3s,color .3s,border-color .3s;
}
body.ns-theme #buy_now:not(.ns-pd__btn) a{color:inherit !important}
body.ns-theme #buy_now:not(.ns-pd__btn):hover{
  background:#fff !important;color:var(--blue-2) !important;
  border-color:var(--blue-2) !important;transform:translateY(-3px);box-shadow:var(--sh-md);
}

/* --- legacy owl-carousel arrows become the theme's round button --- */
body.ns-theme .owl-prev,
body.ns-theme .owl-next{
  display:grid !important;
  place-items:center;
  width:44px !important;
  height:44px !important;
  border-radius:50% !important;
  border:1px solid var(--line-2) !important;
  background:rgba(255,255,255,.85) !important;
  color:var(--text) !important;
  font-size:22px !important;
  box-shadow:var(--sh-sm);
  transition:.35s var(--ease);
}
body.ns-theme .owl-prev:hover,
body.ns-theme .owl-next:hover{
  background:var(--gold-fill) !important;
  color:#241A05 !important;
  border-color:transparent !important;
  transform:scale(1.08);
  box-shadow:var(--sh-md);
}

/* --- checked states pick up the theme's blue instead of the old red --- */
body.ns-theme .checkbox-success input[type="checkbox"]:checked + label::before,
body.ns-theme .custom_check input:checked ~ .checkmark{
  background:var(--blue-2);border-color:var(--blue-2);
}


/* ───────────────────────────────────────────────
   3. SECTIONS AND BANDS
   Legacy sections were tuned for a static header and a white page. Give them
   the theme's ground, rhythm and hairlines.
   ─────────────────────────────────────────────── */
body.ns-theme .about_Sec,
body.ns-theme .video_gallery_sec,
body.ns-theme .ns_gallery,
body.ns-theme .course_sec,
body.ns-theme .counter_sec,
body.ns-theme .benifts,
body.ns-theme .bg_gray{
  position:relative;
  padding:clamp(34px,4vw,58px) 0;
  margin:0;
  min-height:0;
  background:var(--paper);
  background-image:none;
  box-shadow:none;
  overflow:visible;
}
body.ns-theme .bg_gray,
body.ns-theme .benifts{background:var(--paper-3)}
/* market / updates / video listings wrap their table in `#bg_white`, an ID
   selector that outranks the class rule above and paints a hard white slab */
body.ns-theme #bg_white{background:var(--paper);overflow:visible}

/* other legacy slabs that painted their own #f9f9f9 / #fff ground inside a
   themed page — the cards on top of them carry the surface now */
body.ns-theme .cart,
body.ns-theme .pd_C,
body.ns-theme .bg_white_inner{background:none}
body.ns-theme .cart{width:var(--shell);padding:0;margin-inline:auto}
body.ns-theme .about_Sec + .bg_gray,
body.ns-theme .bg_gray + .about_Sec,
body.ns-theme .benifts,
body.ns-theme .counter_sec{border-top:1px solid var(--line)}

/* ns-account.css widened .container to the shell and stripped its 15px
   padding, but Bootstrap's `.row{margin:0 -15px}` was left in place — so every
   row hung 15px past the shell on both sides while its columns' own 15px
   padding pulled the copy back in. Restoring the padding and widening the box
   by the same 30px puts the CONTENT box back on the shell, which is the
   alignment Bootstrap assumes. min(...,100%) keeps it from overflowing on
   phones, where 95vw + 30px is wider than the screen. */
body.ns-theme .container,
body.ns-theme .container-fluid{
  width:min(calc(var(--shell) + 30px),100%);
  max-width:none;
  margin-inline:auto;
  padding-left:15px;
  padding-right:15px;
}

/* legacy grids sat inside .container / .container-fluid, already widened to
   the shell by ns-account.css — just give the rows breathing room */
body.ns-theme .about_Sec .row{align-items:center;row-gap:clamp(20px,3vw,40px)}
body.ns-theme .about_Sec .row + .row{margin-top:clamp(28px,4vw,56px)}


/* ───────────────────────────────────────────────
   4. HEADINGS
   The old skin shouted: 900-weight uppercase navy with a red bar under it.
   The theme speaks in Playfair with a gold rule.
   ─────────────────────────────────────────────── */
body.ns-theme .about_Sec h4,
body.ns-theme .text_center_sec h3,
body.ns-theme .big_sec_heading h4,
body.ns-theme .heading_center h3,
body.ns-theme .market_desc h5,
body.ns-theme .forum_posts_listings h5{
  font-family:var(--display);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.016em;
  text-transform:none;
  color:var(--text);
}
body.ns-theme .about_Sec h4{
  font-size:clamp(24px,2.7vw,34px);
  margin:0 0 14px;
  text-align:left;
}
body.ns-theme .text_center_sec,
body.ns-theme .big_sec_heading,
body.ns-theme .heading_center{
  display:flex;flex-direction:column;align-items:center;
  padding:0;margin:0 0 clamp(24px,3vw,40px);
  text-align:center;
}
/* the red bar under the old centred headings */
body.ns-theme .text_center_sec::after{
  content:"";
  position:static;
  display:block;
  width:56px;height:3px;
  margin:14px auto 0;
  transform:none;
  border-radius:100px;
  background:var(--gold-fill);
  box-shadow:none;
}
body.ns-theme .text_center_sec h3,
body.ns-theme .big_sec_heading h4,
body.ns-theme .heading_center h3{
  font-size:clamp(24px,3vw,38px);
  margin:0;
  padding:0;
  overflow:visible;
}
body.ns-theme .big_sec_heading h4::after{
  content:"";display:block;width:56px;height:3px;margin:14px auto 0;
  border-radius:100px;background:var(--gold-fill);
}
/* "THE NUMBERS SAY IT ALL" — the kicker above the stat band */
body.ns-theme .heading_center p{
  font-family:var(--label);
  font-size:11.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--blue-2);
  margin:0 0 9px;
}
body.ns-theme .heading_center h3{color:var(--text);margin-bottom:0}

body.ns-theme .about_Sec p,
body.ns-theme .market_desc p{
  font-size:16px;
  line-height:1.72;
  letter-spacing:.002em;
  color:var(--muted);
  margin-top:12px;
}
body.ns-theme .about_Sec img{
  width:100%;
  margin:0;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  box-shadow:var(--sh-md);
}

/* The policy pages (privacy, terms, fee return, data deletion) drop their
   whole text straight into `.about_Sec > .container` with no row/column, so
   at shell width the lines ran ~200 characters. Only those pages match this
   selector — /about keeps its copy inside `.row > .col-md-6`. */
body.ns-theme .about_Sec > .container > h1,
body.ns-theme .about_Sec > .container > h2,
body.ns-theme .about_Sec > .container > h3,
body.ns-theme .about_Sec > .container > h4,
body.ns-theme .about_Sec > .container > h5,
body.ns-theme .about_Sec > .container > h6,
body.ns-theme .about_Sec > .container > p,
body.ns-theme .about_Sec > .container > ul,
body.ns-theme .about_Sec > .container > ol,
body.ns-theme .about_Sec > .container > div:not(.row){
  max-width:78ch;
}
body.ns-theme .about_Sec > .container > h1,
body.ns-theme .about_Sec > .container > h2,
body.ns-theme .about_Sec > .container > h3,
body.ns-theme .about_Sec > .container > h4{
  margin:clamp(26px,3vw,40px) 0 12px;
  font-size:clamp(19px,1.9vw,25px);
  text-transform:none;
  line-height:1.2;
}
body.ns-theme .about_Sec > .container > *:first-child{margin-top:0}
body.ns-theme .about_Sec > .container > p{margin:0 0 14px}
body.ns-theme .about_Sec > .container > ul,
body.ns-theme .about_Sec > .container > ol{margin:0 0 16px;padding-left:20px}
body.ns-theme .about_Sec > .container > ul > li{list-style:disc}
body.ns-theme .about_Sec > .container > ol > li{list-style:decimal}
body.ns-theme .about_Sec > .container li{
  margin-bottom:7px;font-size:15.5px;line-height:1.7;color:var(--muted);
}
body.ns-theme .about_Sec > .container a{color:var(--blue-2)}


/* ───────────────────────────────────────────────
   5. ABOUT — the three-step strip, the benefits panel, the counters
   ─────────────────────────────────────────────── */
body.ns-theme .new_Step_Sec{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
  width:var(--shell);
  margin:0 auto;
  padding:0;
}
body.ns-theme .step{
  text-align:left;
  padding:26px 26px 24px;
  border-radius:var(--r-md);
  background:linear-gradient(150deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);
  box-shadow:var(--sh-sm);
  transition:transform .55s var(--ease),border-color .45s,box-shadow .55s var(--ease);
}
body.ns-theme .step:hover{
  transform:translateY(-6px);
  border-color:rgba(217,180,92,.5);
  box-shadow:var(--sh-md);
}
body.ns-theme .step img{width:auto;max-width:52px;margin:0 0 16px}
body.ns-theme .step h3{
  font-family:var(--display);font-size:20px;font-weight:600;
  letter-spacing:-.015em;color:var(--text);margin:0 0 8px;
}
body.ns-theme .step p{font-size:14.5px;line-height:1.7;color:var(--muted);letter-spacing:0}

/* the big white benefits panel */
body.ns-theme .bg_big{
  width:var(--shell);
  margin:0 auto;
  padding:clamp(26px,3vw,44px);
  border-radius:var(--r-lg);
  background:linear-gradient(165deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);
  box-shadow:var(--sh-md);
}
body.ns-theme .bg_grid_big{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(18px,2.4vw,38px);
  align-items:center;
  padding:0;
}
body.ns-theme .bg_benefit{padding:0;display:block}
body.ns-theme .bg_benefit img{
  width:100%;border-radius:var(--r-md);
}
body.ns-theme .benfit_grid{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:18px;
  align-items:start;
  padding:18px;
  border-radius:var(--r-sm);
  transition:background .35s;
}
body.ns-theme .benfit_grid + .benfit_grid{border-top:1px solid var(--line)}
body.ns-theme .benfit_grid:hover{background:rgba(27,75,150,.05)}
body.ns-theme .benifit_inner img{
  width:44px !important;
  margin:0;
  padding:9px;
  border-radius:13px;
  background:rgba(217,180,92,.13);
  border:1px solid rgba(217,180,92,.3);
}
body.ns-theme .benifit_inner h4{
  font-family:var(--display);font-size:19px;font-weight:600;
  letter-spacing:-.014em;text-transform:none;color:var(--text);margin:0 0 6px;
}
body.ns-theme .benifit_inner p{
  font-size:14.5px;line-height:1.7;letter-spacing:0;color:var(--muted);
  height:auto;              /* the old skin clamped every card to 3 lines */
  -webkit-line-clamp:none;
  display:block;
}
body.ns-theme .benifit_inner b{color:var(--blue-2);font-weight:600}

/* the counter strip — rebuilt as the theme's stat band */
body.ns-theme .counter_sec{
  background:linear-gradient(90deg,rgba(44,99,181,.13),rgba(217,180,92,.24) 52%,rgba(194,69,31,.09));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow:none;
}
body.ns-theme .counter_sec .row{margin:0}
body.ns-theme .container_grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  width:100%;
  padding:0;
  text-align:left;
  color:var(--text);
}
body.ns-theme .container_inner{
  position:relative;
  display:flex;flex-direction:column;gap:6px;
  padding:6px 0 6px 24px;
  border:0;
}
body.ns-theme .container_inner::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line-2);
}
/* the old icons were white PNGs drawn for the dark photo band — on the light
   stat band they read as smudges, and the theme's own .stat carries no icon */
body.ns-theme .container_inner img{display:none}
body.ns-theme .container_inner h4{
  font-family:var(--display);
  font-size:clamp(30px,3.6vw,48px);
  font-weight:600;
  letter-spacing:-.035em;
  margin:0;
  font-variant-numeric:tabular-nums;
  background:var(--accent-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
body.ns-theme .container_inner p{
  font-family:var(--label);
  font-size:10.5px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;
  text-align:left;
  color:var(--muted);
  margin:0;
}


/* ───────────────────────────────────────────────
   6. FAQ ACCORDION  (about + faq)
   main.js toggles .active_faq on .faq_para and .rotate_icon on the chevron —
   both hooks are preserved.
   ─────────────────────────────────────────────── */
/* on faq.php this sits straight inside a .row, with no column to supply the
   15px gutter — hence calc(100% - 30px) rather than a plain 100% */
body.ns-theme .faq_sec{
  width:min(920px,calc(100% - 30px));
  margin:0 auto;
  display:grid;
  gap:12px;
}
body.ns-theme .faq_grid{
  padding:0;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:linear-gradient(150deg,var(--surface),var(--surface-2));
  box-shadow:var(--sh-sm);
  overflow:hidden;
  transition:border-color .4s,box-shadow .4s var(--ease);
}
body.ns-theme .faq_grid:hover{border-color:rgba(217,180,92,.5);box-shadow:var(--sh-md)}
body.ns-theme .faq_heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:19px 24px;
  cursor:pointer;
}
body.ns-theme .faq_heading h3{
  font-family:var(--display);
  font-size:clamp(16px,1.5vw,19px);
  font-weight:600;
  letter-spacing:-.012em;
  text-transform:none;
  color:var(--text);
  margin:0;
}
body.ns-theme .faq_heading span{
  display:grid;place-items:center;
  width:30px;height:30px;flex:none;
  border-radius:50%;
  background:rgba(27,75,150,.08);
  color:var(--blue-2);
  font-size:11px;
  transition:transform .45s var(--ease),background .3s;
}
body.ns-theme .faq_heading:hover span{background:rgba(27,75,150,.15)}
/* flaticon.css gives every glyph `font-size:20px; margin-left:20px`, which
   pushed the chevron out of its circle */
body.ns-theme .faq_heading span::before{font-size:12px;margin-left:0;line-height:1}
/* main.js adds .rotate_icon — the old rule also shoved it 50px left */
body.ns-theme .faq_heading span.rotate_icon{
  left:auto;position:static;
  transform:rotate(180deg);
  background:var(--gold-fill);
  color:#241A05;
}
body.ns-theme .faq_para{
  width:auto;
  height:0;
  padding:0 24px;
  opacity:0;
  visibility:hidden;
  transition:opacity .4s var(--ease),padding .4s var(--ease);
}
body.ns-theme .faq_para.active_faq{
  height:auto;
  padding:0 24px 20px;
  opacity:1;
  visibility:visible;
}
body.ns-theme .faq_para p{
  font-size:15px;line-height:1.72;letter-spacing:.002em;color:var(--muted);margin:0;
}
body.ns-theme .more_link p{
  margin-top:clamp(24px,3vw,40px);
  text-align:center;
  font-size:15px;
  color:var(--muted);
}
body.ns-theme .more_link p a{
  color:var(--blue-2);
  font-weight:600;
  border-bottom:1px solid rgba(27,75,150,.35);
}
body.ns-theme .more_link p a:hover{border-bottom-color:var(--blue-2)}


/* ───────────────────────────────────────────────
   7. FORUM
   ─────────────────────────────────────────────── */
body.ns-theme .forum_wrapper{
  width:var(--shell);
  margin:clamp(24px,3vw,40px) auto;
}
body.ns-theme .post_topic_wrapper{
  width:var(--shell);
  margin:clamp(24px,3vw,38px) auto 0;
  padding:clamp(26px,3vw,40px) 24px;
  border-radius:var(--r-lg);
  background:linear-gradient(165deg,var(--surface),var(--surface-2));
  background-image:none;
  border:1px solid var(--line);
  box-shadow:var(--sh-sm);
}
body.ns-theme .post_topic_wrapper h4{
  font-family:var(--display);
  font-size:clamp(21px,2.3vw,30px);
  font-weight:600;
  letter-spacing:-.016em;
  color:var(--text);
  margin:0 0 16px !important;
}
body.ns-theme .forum_posts_listings{
  padding:0;
  border-radius:var(--r-md);
  background:linear-gradient(165deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);
  box-shadow:var(--sh-sm);
  overflow:hidden;
}
body.ns-theme .forum_posts_listings h5{
  height:auto;
  margin:0 !important;
  padding:15px 20px;
  background:rgba(27,75,150,.06);
  border-bottom:1px solid var(--line);
  font-size:15px;
  letter-spacing:-.01em;
}
body.ns-theme .forum_posts_listings ul{padding:6px 8px}
body.ns-theme .forum_posts_listings ul li{
  height:auto;
  min-height:46px;
  padding:9px 12px;
  gap:10px;
  border-bottom:1px solid var(--line);
  border-radius:10px;
  transition:background .25s;
}
body.ns-theme .forum_posts_listings ul li:last-child{border-bottom:0}
body.ns-theme .forum_posts_listings ul li:hover{background:rgba(27,75,150,.06)}
body.ns-theme a.forum_heading,
body.ns-theme .forum_heading,
body.ns-theme .forumposttitle{
  font-family:var(--body) !important;
  font-size:15px;
  font-weight:600;
  letter-spacing:0;
  color:var(--text);
  transition:color .25s;
}
body.ns-theme a.forum_heading:hover,
body.ns-theme .forumposttitle:hover{color:var(--blue-2)}
body.ns-theme .forum_wrapper a.circulars,
body.ns-theme .no_of_posts,
body.ns-theme .font-grey a,
body.ns-theme .font-grey abbr,
body.ns-theme .timeago{
  font-family:var(--body) !important;
  font-size:12.5px;
  letter-spacing:0;
  color:var(--faint);
}
body.ns-theme .font-grey a{color:var(--blue-2)}
body.ns-theme .forum_icon{
  width:34px;height:34px;flex:none;
  display:grid;place-items:center;
  margin-right:14px;
  border-radius:10px;
  background:rgba(217,180,92,.14);
  border:1px solid rgba(217,180,92,.3);
  color:var(--gold-3);
}
/* the view hard-codes a 32px #d8d8d8 folder glyph inline, which overflows the
   box and is nearly invisible on the light card — inline styles need !important */
body.ns-theme .forum_icon span{font-size:16px !important;line-height:1}
body.ns-theme .forum_icon i{color:var(--gold-3) !important;font-size:16px}
body.ns-theme .forum_badge{
  background:var(--blue-2);
  border-radius:100px;
  padding:4px 10px;
  font-family:var(--label);
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
}
body.ns-theme .forum_badge a,
body.ns-theme .forum_badge a:hover{color:#fff}
body.ns-theme .img-circle,
body.ns-theme .rounded-circle,
body.ns-theme .post_profile_img{
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--surface-2);
}
body.ns-theme .forum_post_header{
  padding:18px 20px;
  border-radius:var(--r-md) var(--r-md) 0 0;
  background:rgba(27,75,150,.06);
  border-bottom:1px solid var(--line);
}
body.ns-theme .forum_post_content{
  padding:20px;
  font-size:15.5px;
  line-height:1.72;
  color:var(--muted);
}
body.ns-theme .forum_post_content a{color:var(--blue-2)}
body.ns-theme .post-bg{
  border-radius:var(--r-md);
  background:linear-gradient(165deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);
  box-shadow:var(--sh-sm);
  margin-bottom:18px;
  overflow:hidden;
}
/* `blockquote.quote`, not `.quote`. This styles the block the forum's "Quote"
   button drops into the reply editor — but `.quote` is also the home page's
   testimonial <figure>, and this rule carries an extra class over
   `.ns-theme .quote` in ns-theme.css, so it was winning there too and every
   testimonial on the home page rendered as a cream forum quote: gold left
   bar, square right corners, muted 14.5px text. Both forum views emit a real
   <blockquote>, so the element selector separates them exactly. */
body.ns-theme blockquote.quote{
  padding:14px 18px;
  border-left:3px solid var(--gold-2);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--cream);
  color:var(--muted);
  font-size:14.5px;
}
body.ns-theme .share_box a{
  display:inline-grid;place-items:center;
  width:36px;height:36px;margin:0 5px 5px 0;
  border-radius:50%;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.8);
  color:var(--blue-2);
  transition:.3s var(--ease);
}
body.ns-theme .share_box a:hover{
  background:var(--blue-2);color:#fff;border-color:transparent;transform:translateY(-2px);
}
body.ns-theme .list-group-item{
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  padding:13px 16px;
}
body.ns-theme .list-group-item:last-child{border-bottom:0}
body.ns-theme .list-group{
  border-radius:var(--r-md);
  background:linear-gradient(165deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);
  box-shadow:var(--sh-sm);
  overflow:hidden;
}
body.ns-theme .media{align-items:center}
body.ns-theme .media-left{padding-right:12px}


/* ───────────────────────────────────────────────
   8. GALLERIES, NOTES CARDS, MARKET UPDATES
   ─────────────────────────────────────────────── */
body.ns-theme .ns_gallery_wrap,
body.ns-theme .final_notes_wrapper,
body.ns-theme .ns_gallery_flex{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(14px,1.6vw,22px);
  width:100%;
}
body.ns-theme .ns_gallery_inner{
  width:auto;
  margin:0;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
body.ns-theme .ns_gallery_inner:hover{
  transform:translateY(-6px);
  border-color:rgba(217,180,92,.5);
  box-shadow:var(--sh-md);
}
body.ns-theme .ns_gallery_inner img,
body.ns-theme .ns_gallery_inner a img{
  width:100%;
  border:0;
  border-radius:0;
  box-shadow:none;
}
/* ---------- the notes cards (/final and /inter) ----------
   Four identical white cards read as a list; giving each one its own accent
   makes the set look considered. The colours are the theme's own supporting
   family — sapphire, brass, teal, terracotta — the same four bands
   top-scorer.php colours its cards by, so nothing new enters the palette.

   The tint stays faint: a corner wash and a 10% ground, with the colour said
   properly only on the top edge, the title and the hover glow. Anything
   stronger would look like a children's site rather than a premium one.

   Position drives the colour (:nth-child), so no markup changes and the
   cycle keeps working however many notes the admin adds. */
body.ns-theme .final_notes_card{
  --a:#F0D68C;          /* light end of the accent */
  --b:#A8801F;          /* deep end: edge, title and glow */
  position:relative;
  width:auto;
  height:auto;
  min-height:132px;
  margin:0;
  border-radius:var(--r-md);
  overflow:hidden;
  /* Plain first, tinted second: an engine without color-mix() drops the whole
     second declaration, and a card with no background at all would look
     broken rather than merely untinted. Same reason for the border below. */
  background:linear-gradient(158deg,var(--surface),var(--surface-2));
  background:
    radial-gradient(130% 112% at 100% 0%,
      color-mix(in srgb,var(--a) 40%,transparent) 0%, transparent 58%),
    linear-gradient(158deg, #fff 0%, color-mix(in srgb,var(--b) 9%,var(--surface-2)) 100%);
  border:1px solid var(--line);
  border-color:color-mix(in srgb,var(--b) 20%,var(--line));
  box-shadow:var(--sh-sm);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
/* the metal edge across the top */
body.ns-theme .final_notes_card::after{
  content:"";
  position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--a),var(--b));
}
body.ns-theme .final_notes_card:hover{
  transform:translateY(-6px);
  border-color:rgba(217,180,92,.5);
  border-color:color-mix(in srgb,var(--b) 46%,transparent);
  box-shadow:var(--sh-md);
  box-shadow:0 24px 48px -24px color-mix(in srgb,var(--b) 62%,transparent),var(--sh-md);
}
body.ns-theme .final_notes_card a{
  height:100%;
  min-height:132px;
  padding:20px;
  border:0;
  text-align:center;
  font-family:var(--display);
  font-size:18.5px;
  font-weight:700;
  line-height:1.28;
  letter-spacing:-.008em;
  /* Weighted towards the ink rather than the accent: at 58% accent the brass
     and teal titles sat near 3:1 on their own tint, which is under AA for
     type this size. Measured after the change - see the commit. */
  color:var(--ink-900);
  color:color-mix(in srgb,var(--b) 30%,var(--ink-900));
}
body.ns-theme .final_notes_card h4{
  margin:0;
  font:inherit;
  color:inherit;
  position:relative;   /* above the watermark */
  /* File names arrive as one long underscored word
     ("2_Forex_questions_M19_to_J211.pdf"), which has no break opportunity and
     spilled out of both sides of the centred card. */
  overflow-wrap:anywhere;
  word-break:break-word;
}
/* the NS watermark behind the title */
body.ns-theme .final_notes_card img{opacity:.04}

/* the cycle */
body.ns-theme .final_notes_card:nth-child(4n+1){--a:#6FA8F0;--b:#1B4B96}   /* sapphire */
body.ns-theme .final_notes_card:nth-child(4n+2){--a:#F0D68C;--b:#A8801F}   /* brass    */
body.ns-theme .final_notes_card:nth-child(4n+3){--a:#7FD8A8;--b:#0F6E75}   /* teal     */
body.ns-theme .final_notes_card:nth-child(4n+4){--a:#F0A48C;--b:#C2451F}   /* terracotta */

/* ---------- one file inside a folder (/final/<id>, /inter/<id>) ----------
   Same card as the folder listing, plus an icon that says what the row does.
   `type` is only 'file' or 'link' in the database, but the links are a mix of
   YouTube, Google Drive and Telegram, so the view picks the icon from the URL
   and these three modifiers only carry the colour. */
body.ns-theme .nf-card a{
  flex-direction:column;
  justify-content:center;
  gap:10px;
  padding:22px 18px;
}
body.ns-theme .nf-ico{
  display:grid;place-items:center;
  width:40px;height:40px;
  border-radius:50%;
  background:color-mix(in srgb,var(--b) 13%,#fff);
  border:1px solid color-mix(in srgb,var(--b) 26%,transparent);
  color:var(--b);
  position:relative;
  transition:transform .45s var(--ease),background .3s;
}
body.ns-theme .nf-ico svg{width:21px;height:21px}
body.ns-theme .nf-card:hover .nf-ico{
  transform:scale(1.09);
  background:color-mix(in srgb,var(--b) 22%,#fff);
}
body.ns-theme .nf-card h4{
  font-size:16px;
  line-height:1.35;
  /* three lines keeps a very long file name from making one card twice the
     height of its neighbours */
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
body.ns-theme .nf-act{
  position:relative;
  font-family:var(--label);
  font-size:10px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  color:color-mix(in srgb,var(--b) 52%,var(--ink-900));
  opacity:.9;
}

/* not signed in: the card still says what it holds, but stays shut */
body.ns-theme .nf-card.is-locked{--a:#B9C4D0;--b:#5A6B80}
body.ns-theme .nf-card.is-locked h4{color:var(--muted)}

body.ns-theme .nf-gate{
  display:flex;align-items:center;gap:10px;
  margin:0 0 clamp(16px,2vw,24px);
  padding:13px 18px;
  border-radius:var(--r-sm);
  background:rgba(217,180,92,.11);
  border:1px solid rgba(217,180,92,.34);
  color:var(--text);
  font-size:14.5px;
}
body.ns-theme .nf-gate svg{width:19px;height:19px;flex:none;color:var(--gold-3)}
body.ns-theme .nf-gate a{color:var(--blue-2);font-weight:600;text-decoration:underline}
body.ns-theme .nf-none{
  padding:48px 0;text-align:center;color:var(--muted);font-size:16px;
}

/* /final wraps its cards in .final_notes_wrapper, but /inter drops them
   straight into a Bootstrap .row — give that the same grid so both pages
   lay the cards out identically. */
body.ns-theme .row:has(> .final_notes_card){
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(14px,1.6vw,22px);
  margin:0;
}

body.ns-theme .featured_img{
  height:clamp(220px,30vw,400px);
  margin:0 auto clamp(26px,3vw,44px);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  box-shadow:var(--sh-md);
}
body.ns-theme .market_desc h5{
  font-size:clamp(20px,2.2vw,28px);
  line-height:1.18;
  margin:0 0 14px !important;
}
body.ns-theme .updateimage{
  width:min(560px,100%);
  height:auto;
  margin:20px auto;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  box-shadow:var(--sh-sm);
}

/* free-video / interest-rate video grid */
body.ns-theme .vide_Sec{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(16px,2vw,28px);
  width:100%;
  margin:0;
}
body.ns-theme .video_inner{
  padding:0;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
body.ns-theme .video_inner:hover{
  transform:translateY(-6px);
  border-color:rgba(217,180,92,.5);
  box-shadow:var(--sh-md);
}
body.ns-theme .video_inner > p,
body.ns-theme .video_inner > h5,
body.ns-theme .video_inner > h6{
  padding:14px 16px 16px;
  margin:0;
  font-size:14.5px;
  line-height:1.55;
  color:var(--text);
  font-weight:600;
}
body.ns-theme .video_inner button.play_button,
body.ns-theme .video_inner button{
  top:50%;
  width:52px;height:52px;
  background:var(--gold-fill);
  color:#241A05;
  box-shadow:0 12px 30px -12px rgba(168,123,34,.9);
  transition:transform .4s var(--ease);
}
body.ns-theme .video_inner button:hover{transform:translate(-50%,-50%) scale(1.09)}


/* ───────────────────────────────────────────────
   9. TABLES
   ─────────────────────────────────────────────── */
body.ns-theme .table{
  width:100%;
  margin:0;
  border-collapse:separate;
  border-spacing:0;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  font-size:14.5px;
}
body.ns-theme .table thead,
body.ns-theme .forum_wrapper table thead{
  background:rgba(27,75,150,.06) !important;
}
body.ns-theme .table thead th{
  padding:13px 16px;
  border:0;
  border-bottom:1px solid var(--line);
  font-family:var(--label);
  font-size:11px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--blue-2);
  vertical-align:middle;
}
body.ns-theme .table td{
  padding:13px 16px;
  border:0;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  vertical-align:middle;
}
body.ns-theme .table tbody tr:last-child td{border-bottom:0}
body.ns-theme .table tbody tr{transition:background .25s}
body.ns-theme .table tbody tr:hover{background:rgba(27,75,150,.045)}
body.ns-theme .table a{color:var(--blue-2)}

/* DataTables chrome (forum, market, notes lists). The wrapper groups the
   "Show N entries" / search row with the table, so it becomes the card and the
   table inside it drops its own surface rather than stacking two. */
body.ns-theme .dataTables_wrapper{
  width:100%;
  padding:18px 20px;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:linear-gradient(165deg,var(--surface),var(--surface-2));
  box-shadow:var(--sh-sm);
}
body.ns-theme .dataTables_wrapper .table{
  border:0;border-radius:0;background:none;box-shadow:none;
}
body.ns-theme .dataTables_wrapper .dataTables_paginate{margin-top:12px}
body.ns-theme .dataTables_wrapper .dataTables_length,
body.ns-theme .dataTables_wrapper .dataTables_filter,
body.ns-theme .dataTables_wrapper .dataTables_info{
  font-size:13.5px;
  color:var(--muted);
  margin-bottom:12px;
}
body.ns-theme .dataTables_wrapper .dataTables_filter input,
body.ns-theme .dataTables_wrapper .dataTables_length select{
  margin-left:8px;
  padding:8px 12px;
  border-radius:100px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.8);
  color:var(--text);
  font-size:13.5px;
  outline:0;
}
body.ns-theme .dataTables_wrapper .dataTables_filter input:focus,
body.ns-theme .dataTables_wrapper .dataTables_length select:focus{
  border-color:var(--blue-2);
  box-shadow:0 0 0 3px rgba(27,75,150,.13);
}
body.ns-theme .dataTables_wrapper .dataTables_paginate .paginate_button{
  padding:7px 13px !important;
  margin:0 2px;
  border-radius:100px !important;
  border:1px solid var(--line-2) !important;
  background:rgba(255,255,255,.8) !important;
  color:var(--text) !important;
  font-size:13px;
}
body.ns-theme .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.ns-theme .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:var(--blue-2) !important;
  border-color:var(--blue-2) !important;
  color:#fff !important;
}
body.ns-theme .pagination{gap:6px;flex-wrap:wrap}
body.ns-theme .pagination .page-link{
  border-radius:100px;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.8);
  color:var(--text);
  font-size:13.5px;
  padding:8px 14px;
}
body.ns-theme .pagination .active .page-link{
  background:var(--blue-2);border-color:var(--blue-2);color:#fff;
}


/* ───────────────────────────────────────────────
   10. FORMS
   Covers the forum's post editor, the contact-style inputs on the legacy
   pages and the login / signup modal.
   ─────────────────────────────────────────────── */
/* The login / register / forgot modals use a floating-label pattern
   (`.contact_inner_form_detail` wraps a `.floating-input` with an absolutely
   positioned <label> that myLoginChange() animates). Restyling those inputs or
   labels drops the label on top of the placeholder, so they are excluded from
   every form rule below and keep their own presentation. */
body.ns-theme .form-control,
body.ns-theme .modal :not(.contact_inner_form_detail) > input[type="text"],
body.ns-theme .modal :not(.contact_inner_form_detail) > input[type="email"],
body.ns-theme .modal :not(.contact_inner_form_detail) > input[type="tel"],
body.ns-theme .modal :not(.contact_inner_form_detail) > input[type="password"],
body.ns-theme .modal :not(.contact_inner_form_detail) > input[type="number"],
body.ns-theme .modal select,
body.ns-theme .modal textarea{
  width:100%;
  height:auto;
  padding:12px 16px;
  border-radius:var(--r-sm);
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.85);
  color:var(--text);
  font-family:var(--body);
  font-size:14.5px;
  line-height:1.5;
  box-shadow:none;
  transition:border-color .3s,box-shadow .3s,background .3s;
}
body.ns-theme .form-control:focus,
body.ns-theme .modal :not(.contact_inner_form_detail) > input:focus,
body.ns-theme .modal select:focus,
body.ns-theme .modal textarea:focus{
  outline:0;
  background:#fff;
  border-color:var(--blue-2);
  box-shadow:0 0 0 3px rgba(27,75,150,.13);
}
body.ns-theme .form-control::placeholder{color:var(--faint)}
body.ns-theme .form-group{margin-bottom:16px}
body.ns-theme .form-group label,
body.ns-theme .modal .form-group > label{
  display:block;
  margin-bottom:7px;
  font-family:var(--label);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--blue-2);
}
/* summernote (create-post) */
body.ns-theme .note-editor.note-frame{
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  overflow:hidden;
  box-shadow:none;
}
body.ns-theme .note-toolbar{background:rgba(27,75,150,.05);border-bottom:1px solid var(--line)}


/* ───────────────────────────────────────────────
   11. MEMBER PROFILE (forum) + FEEDBACK
   ─────────────────────────────────────────────── */
body.ns-theme .member_profile_panel,
body.ns-theme .profile__contact-info,
body.ns-theme .profile__comments,
body.ns-theme .feed_design{
  border-radius:var(--r-md);
  background:linear-gradient(165deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);
  box-shadow:var(--sh-sm);
  padding:20px;
}
body.ns-theme .profile__avatar{
  border-radius:50%;
  border:2px solid var(--surface);
  box-shadow:var(--sh-md);
}
body.ns-theme .profile__contact-info-heading{
  font-family:var(--label);
  font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue-2);
}
body.ns-theme .profile-comments__item{
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
body.ns-theme .profile-comments__item:last-child{border-bottom:0}
body.ns-theme .member_since{font-size:12.5px;color:var(--faint)}
/* --- the feedback wall --- */
/* the legacy row centred its columns, so cards in the same line started at
   three different heights; stretch them and let the card fill its column */
body.ns-theme .feedback .row{align-items:stretch}
body.ns-theme .feedback .col-md-4{display:flex;margin-bottom:24px}
body.ns-theme .feedback .item,
body.ns-theme .bg_feed{width:100%;display:flex}
body.ns-theme .bg_feed{
  margin:0;
  background:none;
  z-index:auto;
}
body.ns-theme .feed_design{
  position:relative;   /* the accent bar and the quote mark anchor here, not
                          on .bg_feed, where they floated above the card */
  display:flex;
  flex-direction:column;
  width:100%;
  height:auto;
  padding:0;
  overflow:visible;
  border-radius:var(--r-md);
  background:linear-gradient(165deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);
  box-shadow:var(--sh-sm);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
body.ns-theme .feedback .item:hover .feed_design{
  transform:translateY(-6px);
  border-color:rgba(217,180,92,.5);
  box-shadow:var(--sh-md);
}
/* the 4px accent bar across the top of each card */
body.ns-theme .feed_design::after{
  width:38%;
  height:3px;
  border-radius:0 100px 100px 0;
  background:var(--gold-fill);
}
body.ns-theme .pd_C{
  position:relative;
  flex:1 1 auto;        /* pushes the name strip to the bottom of every card */
  padding:30px 24px 4px;
  min-height:0;
  background:none;
}
/* Testimonial bodies are admin-pasted rich text, so one is a <p>, the next an
   <h6> full of inline font/colour styles. Normalise whatever tag arrives —
   !important because those inline styles outrank a plain rule. */
body.ns-theme .pd_C > :is(p,div,h1,h2,h3,h4,h5,h6,ul,ol,span):not(.star):not(.expand-bar),
body.ns-theme .pd_C > :is(p,div,h1,h2,h3,h4,h5,h6,ul,ol,span):not(.star):not(.expand-bar) *{
  font-family:var(--body) !important;
  font-size:15px !important;
  font-weight:400 !important;
  line-height:1.72 !important;
  letter-spacing:.002em !important;
  color:var(--muted) !important;
  text-transform:none !important;
  background:none !important;
}
/* custom.css clamped only `<p>` bodies, and with a fixed `height:200px` — so an
   <h6> testimonial was never clipped (its "Show More" did nothing) and a short
   one was padded out to 200px of empty card. max-height on every body tag
   clamps what is long and leaves what is short alone; .show_more is the class
   main.js already toggles. */
body.ns-theme .pd_C > :is(p,div,h1,h2,h3,h4,h5,h6,ul,ol):not(.star):not(.expand-bar){
  height:auto;
  max-height:200px;
  overflow:hidden;
  margin:0 0 10px;
}
body.ns-theme .pd_C.show_more > :is(p,div,h1,h2,h3,h4,h5,h6,ul,ol):not(.star):not(.expand-bar){
  max-height:none;
}
/* the decorative quote PNG is scarlet; neutralise it rather than shout */
body.ns-theme .pd_C img.feedback_page_arrow{
  top:-22px;
  width:56px !important;
  filter:grayscale(1);
  opacity:.2;
}
body.ns-theme .bg_feed p{
  font-family:var(--body);
  font-size:15px;
  font-weight:400;
  line-height:1.72;
  letter-spacing:.002em;
  color:var(--muted);
}
body.ns-theme .star{margin-bottom:4px}
body.ns-theme .feedback .fa-star{color:var(--line-2)}
body.ns-theme .feedback .checked{color:var(--gold-2) !important}
body.ns-theme .expand-bar{
  color:var(--blue-2) !important;
  font-size:13.5px;
  font-weight:600;
}
/* the name strip was a solid red band */
body.ns-theme .img_Sec_feed{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 20px;
  background:rgba(27,75,150,.06);
  border-top:1px solid var(--line);
  border-radius:0 0 var(--r-md) var(--r-md);
}
body.ns-theme .img_Sec_feed .ll{flex:none}
body.ns-theme .img_Sec_feed img{
  width:38px;height:38px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--line);
  background:var(--surface);
}
body.ns-theme .bg_feed h3{
  margin:0;
  font-family:var(--display);
  font-size:16px;
  font-weight:600;
  letter-spacing:-.01em;
  text-align:left;
  color:var(--text);
}


/* ───────────────────────────────────────────────
   12. ODDS AND ENDS
   ─────────────────────────────────────────────── */
body.ns-theme .badge{
  border-radius:100px;
  padding:4px 10px;
  font-family:var(--label);
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
}
/* the legacy back-to-top arrow, restyled as the theme's round button */
body.ns-theme .BackToTop{
  display:grid;place-items:center;
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);
  box-shadow:var(--sh-sm);
  transition:.35s var(--ease);
}
body.ns-theme .BackToTop:hover{
  background:var(--gold-fill);
  border-color:transparent;
  transform:translateY(-3px);
  box-shadow:var(--sh-md);
}
body.ns-theme .BackToTop__icon path{fill:var(--blue-3)}
body.ns-theme .BackToTop:hover .BackToTop__icon path{fill:#241A05}

/* the reviews page embeds a third-party widget — just give it room */
body.ns-theme .video_gallery_sec > .container > div[class^="elfsight-app"]{
  margin-top:8px;
}

/* legacy modals keep Bootstrap's own colours (ns-app.css), but the shell,
   the close button and the video popup can still follow the theme */
body.ns-theme .modal-content{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);
  overflow:hidden;
}
body.ns-theme .modal-header{
  border-bottom:1px solid var(--line);
  padding:16px 22px;
}
body.ns-theme .modal-title{
  font-family:var(--display);
  font-size:20px;
  font-weight:600;
  letter-spacing:-.014em;
}
body.ns-theme .modal-body{padding:22px}
/* #custom_close_icon is an ID rule in custom.css, so it needs an ID to beat it */
body.ns-theme .modal .close,
body.ns-theme .modal #custom_close_icon{
  width:34px;height:34px;
  border-radius:50%;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.8);
  opacity:1;
  font-size:20px;
  line-height:1;
  transition:.3s var(--ease);
}
body.ns-theme .modal .close:hover,
body.ns-theme .modal #custom_close_icon:hover{
  background:var(--coral);border-color:transparent;color:#fff;opacity:1;
}
body.ns-theme .modal .close span,
body.ns-theme .modal #custom_close_icon span{
  position:static;top:auto;opacity:1;line-height:1;color:var(--text);
}
body.ns-theme .modal .close:hover span,
body.ns-theme .modal #custom_close_icon:hover span{color:#fff}


/* ───────────────────────────────────────────────
   13. RESPONSIVE
   ─────────────────────────────────────────────── */
@media (max-width:1024px){
  body.ns-theme .bg_grid_big{grid-template-columns:minmax(0,1fr)}
  body.ns-theme .bg_benefit img{max-width:420px;margin:0 auto}
  body.ns-theme .container_grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
}
@media (max-width:820px){
  body.ns-theme .new_Step_Sec{grid-template-columns:minmax(0,1fr)}
  body.ns-theme .about_Sec .row{row-gap:22px}
}
@media (max-width:640px){
  body.ns-theme .bread{padding-top:clamp(88px,22vw,104px)}
  body.ns-theme .bread h3{font-size:clamp(24px,7vw,30px)}
  body.ns-theme .container_grid{grid-template-columns:minmax(0,1fr)}
  body.ns-theme .faq_heading{padding:15px 17px}
  body.ns-theme .faq_para,
  body.ns-theme .faq_para.active_faq{padding-left:17px;padding-right:17px}
  body.ns-theme .btn:not([class*="btn--"]),
  body.ns-theme .modal__form_btn,
  body.ns-theme .primary_button,
  body.ns-theme .secondary_button{padding:12px 20px;font-size:14px !important}
  /* Mirrors .ns-theme .nav__actions .btn in ns-theme.css, which the ID beats.
     Restoring the gold pill makes this button ~22px wider than the text-only
     one custom.css left on mobile, and the header row (logo + cart + CTA +
     burger) had no slack: at 360px the burger fell off the right edge, where
     body{overflow-x:hidden} hid it and the drawer became unreachable. So the
     pill is compact here and the two header gaps give back the rest.
     Measured at 360px: burger right edge 360 of 360. */
  body.ns-theme #sign_up{padding:8px 12px;font-size:12px}
  body.ns-theme .nav__inner{gap:12px}
  body.ns-theme .nav__actions{gap:8px}
  /* legacy tables scroll rather than squash */
  body.ns-theme .table{display:block;overflow-x:auto;white-space:nowrap}
}