/* ═══════════════════════════════════════════════════════════
   NS theme — customer account area.

   These pages (profile, orders, refer, wallet, wishlist, notes requests,
   cart, checkout) carry order and payment logic in their markup, so this
   file restyles the EXISTING class names rather than rewriting the views.
   Every selector is scoped to body.ns-theme: that beats profile-premium.css's
   `.np-premium .x` on specificity, which matters because the views link that
   stylesheet themselves and it therefore loads after this one.
   ═══════════════════════════════════════════════════════════ */

/* ---------- 1. page header ---------- */
body.ns-theme .prfoile_inner_header{
  position:relative;padding:118px 0 0;
  background:linear-gradient(180deg,#F0F4F7 0%,var(--paper) 62%);
}
body.ns-theme .prfoile_inner_header .bread{
  width:var(--shell);margin:0 auto;padding:0 0 26px;border-bottom:1px solid var(--line);
}
body.ns-theme .prfoile_inner_header .bread h3{
  font-family:var(--display);font-size:clamp(30px,3.8vw,46px);font-weight:600;
  letter-spacing:-.016em;color:var(--text);margin:0;
}
body.ns-theme .prfoile_inner_header .bread h3::after{
  content:"";display:block;width:56px;height:3px;margin-top:14px;border-radius:100px;
  background:var(--gold-fill);
}

/* ---------- 2. layout ---------- */
body.ns-theme .profile__content_box{width:var(--shell);margin-inline:auto;padding:34px 0 clamp(48px,6vw,84px)}
body.ns-theme .profile__box_wrap{
  display:grid;grid-template-columns:262px minmax(0,1fr);gap:26px;align-items:start;
  float:none;width:auto;
}
body.ns-theme .left__panel_sidebar,
body.ns-theme .left__panel_right_sidebar{width:auto;float:none;padding:0;margin:0}

/* ---------- 3. sidebar ---------- */
body.ns-theme .left_panel_content{
  position:sticky;top:96px;padding:16px;border-radius:20px;
  background:linear-gradient(165deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);box-shadow:var(--sh-sm);
}
body.ns-theme .left_panel_content > ul{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
body.ns-theme .left_panel_content > ul > li{margin:0;padding:0;border:0;list-style:none}
body.ns-theme .left_panel_content > ul > li > a{
  display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;
  font-size:14px;font-weight:500;color:var(--muted);
  transition:background .25s,color .25s,transform .3s var(--ease);
}
body.ns-theme .left_panel_content > ul > li > a i{
  width:18px;flex:none;text-align:center;font-size:14px;color:var(--blue-2);transition:color .25s;
}
body.ns-theme .left_panel_content > ul > li > a:hover{
  background:rgba(27,75,150,.07);color:var(--text);transform:translateX(3px);
}
body.ns-theme .left_panel_content > ul > li:last-child > a{
  margin-top:6px;padding-top:15px;border-top:1px solid var(--line);
  border-radius:0 0 12px 12px;color:var(--coral);font-weight:600;
}
body.ns-theme .left_panel_content > ul > li:last-child > a i{color:var(--coral)}
body.ns-theme #bg_green_with_price{
  margin-left:auto;padding:4px 10px;border-radius:100px;
  background:rgba(14,143,92,.13);color:#0A6A44;
  font-family:var(--label);font-weight:700;font-size:10.5px;letter-spacing:.04em;
}
/* the small "My Account / <page>" strip above the sidebar */
body.ns-theme .make_block{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
body.ns-theme .account_sidebar_mini_nav{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
body.ns-theme .account_sidebar_mini_nav li{
  font-family:var(--label);font-weight:600;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);list-style:none;
}
body.ns-theme .account_sidebar_mini_nav .main_page{color:var(--blue-2)}
body.ns-theme .account_sidebar_mini_nav .sub_page{color:var(--text)}

/* ---------- 4. content surfaces ---------- */
body.ns-theme .bg_white_inner,
body.ns-theme .profile_shadow,
body.ns-theme .right_box_panel_wrap,
body.ns-theme .reffer_sec{
  padding:24px;border-radius:20px;
  background:linear-gradient(165deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);box-shadow:var(--sh-sm);
}
body.ns-theme .right_box_panel_wrap .bg_white_inner,
body.ns-theme .bg_white_inner .profile_shadow{
  border:0;box-shadow:none;background:none;padding:0;
}

/* ---------- 5. tables ---------- */
body.ns-theme .responsive-table{overflow-x:auto;border-radius:14px;border:1px solid var(--line)}
body.ns-theme .scrollmobile p{
  margin:0 0 10px;font-family:var(--label);font-weight:600;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
}
body.ns-theme table.table{width:100%;margin:0;border-collapse:separate;border-spacing:0;font-size:13.5px}
body.ns-theme table.table thead th{
  padding:13px 16px;background:rgba(27,75,150,.06);border:0;
  border-bottom:1px solid var(--line);
  font-family:var(--label);font-weight:700;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;white-space:nowrap;
  color:var(--blue-2) !important;   /* profile-premium.css forces #fff here */
}
body.ns-theme table.table tbody td{
  padding:14px 16px;border:0;border-bottom:1px solid var(--line);
  color:var(--muted);vertical-align:middle;
}
body.ns-theme table.table tbody tr:last-child td{border-bottom:0}
body.ns-theme table.table tbody tr{transition:background .25s}
body.ns-theme table.table tbody tr:hover{background:rgba(27,75,150,.035)}
body.ns-theme table.table tbody td b,
body.ns-theme table.table tbody td strong{color:var(--text)}
body.ns-theme table.table td:last-child,
body.ns-theme table.table th:last-child{text-align:right}

/* status words that appear in these tables */
body.ns-theme .badge,
body.ns-theme .label{
  display:inline-block;padding:5px 11px;border-radius:100px;
  font-family:var(--label);font-weight:700;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;
}
body.ns-theme .badge-success,body.ns-theme .label-success{background:rgba(11,106,68,.13);color:#0A6A44}
body.ns-theme .badge-danger,body.ns-theme .label-danger{background:rgba(194,69,31,.12);color:#9E3312}
body.ns-theme .badge-warning,body.ns-theme .label-warning{background:rgba(168,128,31,.15);color:var(--gold-3)}
body.ns-theme .badge-info,body.ns-theme .label-info{background:rgba(27,75,150,.11);color:var(--blue-2)}

/* ---------- 6. forms ---------- */
body.ns-theme .view_inner_form{margin-bottom:16px}
body.ns-theme .view_inner_form label,
body.ns-theme .profile_grid label,
body.ns-theme .form-group > label{
  display:block;margin-bottom:7px;
  font-family:var(--label);font-weight:600;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
}
body.ns-theme .form-control,
body.ns-theme .floating-input,
body.ns-theme input[type="text"],
body.ns-theme input[type="email"],
body.ns-theme input[type="tel"],
body.ns-theme input[type="number"],
body.ns-theme input[type="password"],
body.ns-theme select.form-control,
body.ns-theme select.floating-input,
body.ns-theme textarea.form-control{
  width:100%;height:auto;padding:12px 15px;border-radius:12px;
  border:1px solid var(--line-2);background:#fff;color:var(--text);
  font-family:var(--body);font-size:14px;box-shadow:none;
  transition:border-color .3s,box-shadow .3s;
}
body.ns-theme .form-control:focus,
body.ns-theme .floating-input:focus{
  outline:none;border-color:var(--blue-2);box-shadow:0 0 0 3px rgba(27,75,150,.12);
}
body.ns-theme .form-control::placeholder,
body.ns-theme .floating-input::placeholder{color:var(--faint)}
body.ns-theme .profile_grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}

/* Bootstrap buttons inside the account area — the theme's own .btn is a
   different component, so target Bootstrap's variants explicitly. */
body.ns-theme .btn-primary,
body.ns-theme .btn-success,
body.ns-theme input[type="submit"].btn,
body.ns-theme button[type="submit"].btn{
  padding:12px 24px;border-radius:100px;border:0;
  background:var(--gold-fill);color:#241A05;
  font-family:var(--body);font-weight:600;font-size:14px;letter-spacing:.01em;
  box-shadow:0 10px 26px -14px rgba(168,123,34,.8);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
body.ns-theme .btn-primary:hover,
body.ns-theme .btn-success:hover,
body.ns-theme input[type="submit"].btn:hover,
body.ns-theme button[type="submit"].btn:hover{
  transform:translateY(-2px);box-shadow:0 16px 34px -16px rgba(168,123,34,.9);
  background:var(--gold-fill);color:#241A05;
}
body.ns-theme .btn-secondary,body.ns-theme .btn-default,body.ns-theme .btn-light{
  padding:12px 24px;border-radius:100px;border:1px solid var(--line-2);
  background:#fff;color:var(--text);font-weight:600;font-size:14px;box-shadow:var(--sh-sm);
}
body.ns-theme .btn-danger{
  padding:12px 24px;border-radius:100px;border:0;
  background:var(--coral);color:#fff;font-weight:600;font-size:14px;
}
body.ns-theme .btn-sm{padding:8px 16px;font-size:12.5px}

/* ---------- 7. refer & earn ---------- */
body.ns-theme .reffer_sec h4,body.ns-theme .reffer_sec h3{
  font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.014em;color:var(--text);
}
body.ns-theme .share_refer{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
body.ns-theme .share_r a,body.ns-theme .share_r > *{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-2);background:#fff;color:var(--blue-2);
  box-shadow:var(--sh-sm);transition:.35s var(--ease);
}
body.ns-theme .share_r a:hover{background:var(--gold-fill);color:#241A05;border-color:transparent;transform:translateY(-3px)}

/* ---------- 8. empty states + pagination ---------- */
body.ns-theme .np-empty-state{
  padding:48px 24px;text-align:center;border-radius:16px;
  border:1px dashed var(--line-2);color:var(--faint);
}
body.ns-theme .np-empty-state h4,body.ns-theme .np-empty-state b{
  display:block;font-family:var(--display);font-size:20px;color:var(--text);margin-bottom:6px;
}
body.ns-theme .pagination{display:flex;gap:6px;flex-wrap:wrap;margin-top:22px;padding:0;list-style:none}
body.ns-theme .pagination a,body.ns-theme .pagination strong,body.ns-theme .pagination span{
  display:grid;place-items:center;min-width:38px;height:38px;padding:0 12px;border-radius:11px;
  border:1px solid var(--line-2);background:#fff;color:var(--muted);
  font-size:13.5px;font-weight:600;transition:.28s var(--ease);
}
body.ns-theme .pagination a:hover{border-color:var(--blue-2);color:var(--blue-2)}
body.ns-theme .pagination strong{background:var(--blue-2);border-color:var(--blue-2);color:#fff}

/* ---------- 9. profile hero (already has a np- pass) ---------- */
body.ns-theme .np-hero{
  padding:22px;border-radius:18px;margin-bottom:18px;
  background:linear-gradient(118deg,var(--cream) 0%,rgba(217,180,92,.34) 52%,rgba(44,99,181,.13) 100%);
  border:1px solid rgba(168,128,31,.24);
}
body.ns-theme .np-hero-meta h2,body.ns-theme .np-hero-meta h3{
  font-family:var(--display);font-weight:600;letter-spacing:-.014em;color:var(--text);
}
body.ns-theme .np-hero-mail{font-family:var(--label);font-size:13px;color:var(--muted)}
body.ns-theme .np-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
body.ns-theme .np-chips > *{
  padding:5px 12px;border-radius:100px;background:rgba(255,255,255,.7);
  border:1px solid var(--line);color:var(--muted);
  font-family:var(--label);font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
}
body.ns-theme .np-avatar-wrap img{border-radius:50%;border:3px solid #fff;box-shadow:var(--sh-md)}

/* ---------- 10. tabs ---------- */
body.ns-theme .nav-tabs{border-bottom:1px solid var(--line);gap:4px;margin-bottom:20px}
body.ns-theme .nav-tabs .nav-link{
  border:0;border-radius:11px 11px 0 0;padding:11px 18px;
  font-family:var(--label);font-weight:600;font-size:13px;color:var(--muted);
}
body.ns-theme .nav-tabs .nav-link.active{
  background:rgba(27,75,150,.07);color:var(--blue-2);
  box-shadow:inset 0 -2px 0 var(--blue-2);
}

/* ---------- 11. responsive ---------- */
@media (max-width:900px){
  body.ns-theme .profile__box_wrap{grid-template-columns:minmax(0,1fr);gap:18px}
  body.ns-theme .left_panel_content{position:static}
  body.ns-theme .left_panel_content > ul{
    flex-direction:row;flex-wrap:wrap;gap:6px;
  }
  body.ns-theme .left_panel_content > ul > li > a{padding:9px 13px;font-size:13px}
  body.ns-theme .left_panel_content > ul > li:last-child > a{
    margin-top:0;padding-top:9px;border-top:0;border-radius:12px;
  }
  body.ns-theme .profile_grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  body.ns-theme .prfoile_inner_header{padding-top:96px}
  body.ns-theme table.table{font-size:12.5px}
  body.ns-theme table.table thead th,body.ns-theme table.table tbody td{padding:11px 12px}
}


/* ═══════════════════════════════════════════════════════════
   12. LEGACY CONTENT

   Pages that still use their original view (forum, about, notes, reviews,
   cart, checkout…) now render inside the new chrome. These rules give that
   markup the new type, ground and surfaces so it does not look stranded.
   Structural only — nothing here changes behaviour.
   ═══════════════════════════════════════════════════════════ */

/* the breadcrumb strip most inner pages open with */
body.ns-theme .bread{
  width:var(--shell);margin:0 auto;padding:118px 0 26px;
}
body.ns-theme .bread h3{
  font-family:var(--display);font-size:clamp(28px,3.6vw,44px);font-weight:600;
  letter-spacing:-.016em;color:var(--text);margin:0;
}
body.ns-theme .bread h3::after{
  content:"";display:block;width:52px;height:3px;margin-top:13px;border-radius:100px;
  background:var(--gold-fill);
}
/* the account header already handles its own bread */
body.ns-theme .prfoile_inner_header .bread{padding-top:0}
/* an image breadcrumb banner reads better as plain type here */
body.ns-theme .image_breadcumb{background:none !important;min-height:0;padding:0}

/* generic containers */
body.ns-theme .container,
body.ns-theme .container-fluid{width:var(--shell);max-width:none;margin-inline:auto;padding-left:0;padding-right:0}

/* legacy white panels */
body.ns-theme .white_bg,
body.ns-theme .bg_white,
body.ns-theme .inner_page_content,
body.ns-theme .video_listing .listing{
  background:linear-gradient(165deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-sm);
}

/* legacy headings and copy inherit the new scale */
body.ns-theme h1,body.ns-theme h2,body.ns-theme h3,body.ns-theme h4,body.ns-theme h5{color:var(--text)}
body.ns-theme p,body.ns-theme li,body.ns-theme td{color:var(--muted)}
body.ns-theme a{color:inherit}
body.ns-theme .inner_page_content a,
body.ns-theme .forum_content a{color:var(--blue-2)}

/* legacy section spacing was tuned for the old header height */
/* Legacy views were built for the old header height, so their bare <section>
   needs its top padding dropped. The theme's own sections must be exempt —
   without these :not()s this rule flattened every band on the home page and
   the sections ran into one another. */
body.ns-theme section:not(.phero):not(.pagesec):not(.prfoile_inner_header):not(.section):not(.hero):not(.stats):not(.toppers):not(.says):not(.benefits):not(.offerings){padding-top:0}

/* keep legacy carousels and gallery items from inheriting card borders twice */
body.ns-theme .owl-carousel .item{background:none;border:0;box-shadow:none}

/* forum / faq accordions */
body.ns-theme .card-header{background:rgba(27,75,150,.05);border-bottom:1px solid var(--line)}
body.ns-theme .card{border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-sm);background:var(--surface)}

/* alerts */
body.ns-theme .alert{border-radius:12px;border:1px solid var(--line);font-size:14px}
body.ns-theme .alert-danger{background:rgba(194,69,31,.09);border-color:rgba(194,69,31,.28);color:#9E3312}
body.ns-theme .alert-success{background:rgba(11,106,68,.10);border-color:rgba(11,106,68,.28);color:#0A6A44}