/**
 * Account area — port of the reference design system to the theme's My Account
 * screens (nonprofit/css/style.css).
 *
 * Everything is scoped to `body.npf-account`, added by NPF_Account.
 *
 * HOW THIS IS ORGANISED
 * ---------------------
 * The ten account pages are all built from the same handful of Semantic UI
 * primitives, so each primitive is defined ONCE here and every page inherits
 * it. That is what keeps the pages consistent with each other — there is a
 * single definition of a panel, a title, a table row, a button and a field in
 * the whole account area, and it is the same one the dashboard and checkout
 * already use.
 *
 *   .ui.segment           -> .panel      (white, 1px primary, r7, shadow-panel)
 *   h1.ui.header          -> page title
 *   .ui.secondary.menu    -> tab strip
 *   table / .ui.table     -> data table
 *   .ui.button            -> .btn family
 *   .ui.form field/input  -> .form-label / .form-input
 *   .wpj-stats-segment    -> stat cards
 *
 * The `!important`s are not preference: Semantic UI ships its own opinionated
 * rules for every one of these primitives, the theme layers `front.min.css` on
 * top, and the Kirki customizer emits inline styles after both.
 */

body.npf-account {
  /* ---- Design tokens, copied from the reference :root ---- */
  --npf-primary: #4f84c3;
  --npf-primary-dark: #3e6ea6;
  --npf-primary-soft: #e1eeff;
  --npf-primary-light: #6ac9fc;
  --npf-ink: #020b18;
  --npf-text: #4c5563;
  --npf-text-soft: #616e84;
  --npf-muted: #8a94a3;
  --npf-line: #e3e3e3;
  --npf-line-soft: #eef1f6;
  --npf-auth-bed: #f9fbff;
  --npf-navy: #133660;

  --npf-g100: #e4e7e9;
  --npf-g200: #c9cfd2;
  --npf-g300: #d5d7da;
  --npf-g400: #929fa5;
  --npf-g500: #77878f;
  --npf-g600: #5f6c72;
  --npf-g900: #191c1f;

  --npf-success: #22a35a;
  --npf-danger: #e05656;
  --npf-star: #f5b301;

  --npf-radius-panel: 7px;
  --npf-radius-btn: 8px;
  --npf-radius-field: 8px;
  --npf-shadow-panel: 0 4px 33.7px rgba(0, 0, 0, 0.01);
  --npf-shadow-card: 0 2px 8px rgba(19, 24, 36, 0.05);

  --npf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --npf-t: 0.28s var(--npf-ease);

  --npf-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --npf-font-head: "Roboto", "Inter", system-ui, sans-serif;
  --npf-font-ui: "Public Sans", "Inter", system-ui, sans-serif;
}

/* ---------- Page bed ----------
   The reference puts account screens on a flat #f9fbff bed with 100px of air
   (`.dash`). The theme paints its wrapper white and hugs the header. */

/* The bed goes on the wrappers that span the viewport, not on
   `.wpj-page-content` — that is the theme's ~1170px centred column, so painting
   it there produced a band with two hard edges instead of a page background. */
body.npf-account,
body.npf-account .pusher {
  background: var(--npf-auth-bed) !important;
}

body.npf-account .wpj-page-content {
  background: transparent !important;
  padding-block: 56px 96px !important;
  font-family: var(--npf-font-body);
  color: var(--npf-text);
}

body.npf-account .wpj-page-content > .ui.hidden.divider { display: none !important; }

/* ---------- Page title ----------
   .panel__title / dash headings: Roboto 400, large, ink. */

body.npf-account h1.ui.header,
body.npf-account .wpj-page-content > h1,
body.npf-account .heading-title {
  font-family: var(--npf-font-head) !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  line-height: 26px !important;
  letter-spacing: -0.4px;
  color: var(--npf-ink) !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

/* Every account heading carries its own icon — a cart on Shopping, a card on
   Payments, and so on. Those are part of the page, not decoration to strip, so
   they stay; only their colour and alignment are brought onto the palette. */
body.npf-account h1.ui.header {
  display: flex !important;
  align-items: center;
  gap: 12px;
}

/* The theme draws these as Semantic's solid glyphs, which read heavy and dark
   next to the light stroke icons in the header. The glyph is suppressed
   (`font-size: 0`) and the same box is repainted with a stroke icon through a
   mask, so it takes the primary colour and matches the header set.
   `--npf-head-icon` is chosen per page below. */
body.npf-account h1.ui.header > i.icon {
  display: inline-block !important;
  flex: none;
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  opacity: 1;
  background-color: var(--npf-primary);
  -webkit-mask: var(--npf-head-icon) center / 25px 25px no-repeat;
  mask: var(--npf-head-icon) center / 25px 25px no-repeat;
}

body.npf-account h1.ui.header > i.icon::before { content: "" !important; }

/* Default, and one per account screen. Falls back to the document icon when a
   page is not listed, so a new screen never renders a blank box. */
body.npf-account {
  --npf-head-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E");
}

/* My Services — megaphone */
body.npf-account.page-id-14 { --npf-head-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 15-6v14L3 13z'/%3E%3Cpath d='M18 8.5a3.5 3.5 0 0 1 0 7'/%3E%3Cpath d='M6.5 13.5V18a1.5 1.5 0 0 0 3 0v-3.6'/%3E%3C/svg%3E"); }

/* Shopping — cart */
body.npf-account.page-id-20 { --npf-head-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2.5 3h2.2l2.4 11.4a1.5 1.5 0 0 0 1.5 1.2h8.9a1.5 1.5 0 0 0 1.5-1.2L21 7H6'/%3E%3C/svg%3E"); }

/* Sales — trending chart */
body.npf-account.page-id-22 { --npf-head-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 7-7'/%3E%3Cpath d='M15 8h5v5'/%3E%3C/svg%3E"); }

/* Payments — card */
body.npf-account.page-id-19 { --npf-head-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M2.5 10h19'/%3E%3C/svg%3E"); }

/* Private Messages — envelope */
body.npf-account.page-id-23 { --npf-head-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E"); }

/* Settings — gear */
body.npf-account.page-id-18 { --npf-head-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M19.1 14.5a1.6 1.6 0 0 0 .4 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1v.2a2 2 0 1 1-4 0v-.1a1.6 1.6 0 0 0-1.1-1.5 1.6 1.6 0 0 0-1.7.4l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .4-1.8 1.6 1.6 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.6 1.6 0 0 0 4.6 8.4a1.6 1.6 0 0 0-.4-1.7l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.4h.1a1.6 1.6 0 0 0 1-1.5V2.7a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.4l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.4 1.8v.1a1.6 1.6 0 0 0 1.5 1h.2a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z'/%3E%3C/svg%3E"); }

/* Reviews / Feedback — star */
body.npf-account.page-id-24 { --npf-head-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.5 2.7 5.5 6 .9-4.3 4.2 1 6-5.4-2.8-5.4 2.8 1-6L3.3 9.9l6-.9z'/%3E%3C/svg%3E"); }

/* My Needs — clipboard */
body.npf-account.page-id-15 { --npf-head-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='3' width='8' height='4' rx='1'/%3E%3Cpath d='M16 5h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E"); }

/* Notifications — bell */
body.npf-account.page-id-21 { --npf-head-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8.5a6 6 0 1 0-12 0c0 6-2.5 7.5-2.5 7.5h17S18 14.5 18 8.5'/%3E%3Cpath d='M13.7 19.5a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E"); }

/* My Favorites — heart */
body.npf-account.page-id-16 { --npf-head-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.3S3.8 15.2 3.8 9.9A4.4 4.4 0 0 1 12 7.6a4.4 4.4 0 0 1 8.2 2.3c0 5.3-8.2 10.4-8.2 10.4z'/%3E%3C/svg%3E"); }

/* Public profile — user */
body.npf-account.page-id-12 { --npf-head-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.8'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); }

/* Section headings inside a panel keep their glyph, just on the palette. */
body.npf-account .ui.segment h2 > i.icon,
body.npf-account .ui.segment h3 > i.icon {
  color: var(--npf-primary) !important;
  opacity: 1;
}

/* `:not(.npf-reviews__title)` — the reviews section (npf-reviews.css) is shared
   with the service page and brings its own type scale. It is printed inside the
   public profile, which is one of these screens, and without the exclusion this
   rule would restyle its heading there and nowhere else. */
body.npf-account h2:not(.ui.header):not(.npf-reviews__title) {
  font-family: var(--npf-font-head);
  font-weight: 400;
  font-size: 22px;
  line-height: 30px;
  color: var(--npf-ink);
}

/* ---------- Panel ----------
   The single most important mapping: every `.ui.segment` becomes the
   reference's `.panel`. Semantic's own segment is a 1px #d4d4d5 box with a
   0.28571429rem radius and its own shadow, so all three are replaced. */

body.npf-account .ui.segment,
body.npf-account .ui.segments,
body.npf-account .ui.tab.segment,
body.npf-account .ui.basic.segment {
  background: #fff !important;
  border: 1px solid var(--npf-line-soft) !important;
  border-radius: var(--npf-radius-panel) !important;
  box-shadow: var(--npf-shadow-panel) !important;
  padding: 24px 24px !important;
  margin: 0 0 20px !important;
  color: var(--npf-text);
}

/* The one panel that cannot take the flat 24px top: the public profile's
   sidebar card.

   The theme hangs the avatar out of the top of that card — the photo is
   absolutely positioned at `top: -100px` and is 150px tall, so 50px of it sits
   *inside* the card — and it reserves the room with `padding: 65px 0 20px` on
   the segment. The panel rule above is !important and replaces the shorthand
   whole, so that reservation went with it and the name printed underneath the
   photo. It is worst on a profile with no tagline, where the name is the first
   line in the card and has nothing above it to absorb the collision.

   74px = the 50px the photo occupies plus a 24px gap, the same step the panel
   uses everywhere else. One value covers every breakpoint: below 767px the
   theme shrinks the photo to 120px and lifts it to `top: -70px`, which reaches
   exactly the same 50px in.

   Only the top is restated — the 24px sides and bottom are the panel's, and
   the rest of the card is laid out against them. */
body.npf-account .profile-sidebar .ui.segment.user-info-wrapper {
  padding-top: 74px !important;
}

/* Nested segments are sections inside a panel, not panels of their own —
   otherwise every screen turns into a stack of boxes inside boxes. */
body.npf-account .ui.segment .ui.segment,
body.npf-account .ui.segments .ui.segment {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  background: transparent !important;
}

body.npf-account .ui.segment > :last-child { margin-bottom: 0 !important; }

/* A segment with nothing in it is scaffolding, not a panel.
   Deliberately `:empty` only. Testing the chart wrapper for a `<canvas>` was a
   mistake: the earnings chart is drawn only after the toggle is clicked, so the
   test hid the wrapper permanently and the report could never appear. The
   theme already keeps that wrapper hidden until it has something to show. */
body.npf-account .ui.segment:empty,
body.npf-account .wrapper-graph-dropdown:empty {
  display: none !important;
}

/* Once the theme reveals the chart, it is a panel like any other but must keep
   its own height — a chart cannot render inside a collapsed box. */
body.npf-account .ui.segment.chart-wrapper {
  padding: 22px 20px !important;
  overflow: visible !important;
}

/* A segment whose only content is the page heading is a title, not a panel.
   Stripping the frame puts the heading back on the page bed, where the
   reference design has it. */
body.npf-account .ui.segment:has(> h1.ui.header:only-child),
body.npf-account .ui.segment:has(> .heading-title:only-child) {
  padding: 0 !important;
  margin-bottom: 24px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.npf-account .ui.segment:has(> h1.ui.header:only-child) h1.ui.header {
  margin-bottom: 0 !important;
}

body.npf-account .ui.divider {
  margin: 22px 0 !important;
  border-top-color: var(--npf-line-soft) !important;
  border-bottom: 0 !important;
}

body.npf-account .ui.hidden.divider { margin: 14px 0 !important; }

/* ---------- Stats strip ----------
   `.wpj-stats-segment` is a row of figure/label pairs (earnings, orders,
   ratings). The design renders those as separate cards, not one divided bar. */

/* `.ui.segment.wpj-stats-segment`, not `.wpj-stats-segment`: the panel rule
   above is a three-class selector and would otherwise out-specify this reset,
   leaving the cards inside a second frame. */
body.npf-account .ui.segment.wpj-stats-segment {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.npf-account .wpj-stats-segment .user-account-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body.npf-account .wpj-stats-segment .user-account-list > .item {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 22px 24px !important;
  background: #fff;
  border: 1px solid var(--npf-line-soft) !important;
  border-radius: var(--npf-radius-panel);
  box-shadow: var(--npf-shadow-panel);
  text-align: left;
  transition: border-color var(--npf-t), box-shadow var(--npf-t), transform var(--npf-t);
}

/* Border only on hover — a stat card is not clickable, so a shadow and a lift
   promised an interaction that is not there. */
body.npf-account .wpj-stats-segment .user-account-list > .item:hover {
  border-color: var(--npf-primary) !important;
}

/* Semantic draws separators between horizontal list items. */
body.npf-account .wpj-stats-segment .user-account-list > .item::before,
body.npf-account .wpj-stats-segment .user-account-list > .item::after {
  display: none !important;
}

/* The figure scales with the card instead of sitting at a fixed size: these
   read "0" today but "255,677.00 USD" once there is real money in the account,
   and a fixed 28px overflowed the card at that length. clamp() lets it shrink,
   and the wrap rules stop a long value pushing the card wider than its grid
   track. */
body.npf-account .wpj-stats-segment .user-account-table-value-mobile,
body.npf-account .wpj-stats-segment .header {
  font-family: var(--npf-font-head) !important;
  font-weight: 500 !important;
  font-size: clamp(17px, 1.55vw, 22px) !important;
  line-height: 28px !important;
  color: var(--npf-ink) !important;
  margin: 0 0 4px !important;
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: none;
}

body.npf-account .wpj-stats-segment .user-account-table-label-mobile {
  font-family: var(--npf-font-ui);
  font-size: 14px;
  line-height: 20px;
  color: var(--npf-g600);
  text-transform: none;
}

/* The earnings-chart toggle ships as a bare navy block with a sprite chevron.
   Restyled as a quiet ghost button so it stops reading as a stray artefact. */
body.npf-account .wrapper-graph-dropdown {
  display: flex;
  justify-content: flex-end;
  margin: -8px 0 20px !important;
}

/* The chevron on this control is a sprite carried as the element's own
   background-image, so the background cannot be repainted without erasing the
   icon. Only the box is restyled. */
body.npf-account .wrapper-graph-dropdown > * {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 44px;
  min-height: 38px;
  border: 0 !important;
  border-radius: var(--npf-radius-btn) !important;
  cursor: pointer;
  opacity: 0.9;
  transition: opacity var(--npf-t), transform var(--npf-t);
}

body.npf-account .wrapper-graph-dropdown > *:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* ---------- Tab strip ----------
   Same treatment the checkout already gives `.ui.secondary.menu`, so the two
   areas match: a quiet 500-weight row with an underlined active item. */

/* Built on the design system's `.chip` (nonprofit/css/style.css): a pill that
   lifts and takes the primary colour on hover. The old design used bordered
   boxes with a filled active state, so this keeps that segmented, clickable
   read — each tab still looks like a control — while matching the reference's
   rounded, soft styling. A flat underline was quieter than either. */

body.npf-account .ui.secondary.menu {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
}

body.npf-account .ui.secondary.menu .item {
  position: relative;
  margin: 0 !important;
  padding: 9px 18px !important;
  border: 1px solid var(--npf-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  font-family: var(--npf-font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  white-space: nowrap;
  color: var(--npf-ink) !important;
  cursor: pointer;
  transition: color var(--npf-t), border-color var(--npf-t), background var(--npf-t),
    transform var(--npf-t), box-shadow var(--npf-t);
}

body.npf-account .ui.secondary.menu .item::before,
body.npf-account .ui.secondary.menu .item::after { display: none !important; }

body.npf-account .ui.secondary.menu .item:hover {
  border-color: var(--npf-primary) !important;
  color: var(--npf-primary) !important;
  transform: translateY(-2px);
  box-shadow: var(--npf-shadow-card);
}

body.npf-account .ui.secondary.menu .item:active { transform: translateY(0); }

body.npf-account .ui.secondary.menu .item.active {
  background: var(--npf-primary) !important;
  border-color: var(--npf-primary) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(79, 132, 195, 0.28);
}

body.npf-account .ui.secondary.menu .item.active:hover {
  background: var(--npf-primary-dark) !important;
  border-color: var(--npf-primary-dark) !important;
  color: #fff !important;
}

body.npf-account .ui.secondary.menu .item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(63, 109, 179, 0.3);
}

/* The theme renders the tab strip twice inside `.js-tab-to-dropdown`: once as
   `.ui.secondary.menu`, and again as a generated `<select>` so a phone can use
   a dropdown instead of a scrolling row. Both were showing, which is where the
   duplicate "Active (0)" control came from.

   Only the generated control is hidden. `.js-tab-to-dropdown` is the WRAPPER
   around both — hiding that removes the tabs as well. */
body.npf-account .js-tab-to-dropdown > .ui.dropdown,
body.npf-account .js-tab-to-dropdown > .ui.selection.dropdown,
body.npf-account .js-tab-to-dropdown > select {
  display: none !important;
}

/* The wrapper is a layout shim, not a panel. */
body.npf-account .ui.segment.js-tab-to-dropdown {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Tab panels are the content of the page, not another framed box. */
body.npf-account .ui.tab.segment {
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 !important;
}

/* ---------- Tables ----------
   Order, sales and payment history. Semantic's table is a bordered grid; the
   design uses a headerless-looking list with hairline row rules. */

body.npf-account table,
body.npf-account .ui.table {
  width: 100% !important;
  border: 0 !important;
  border-collapse: collapse !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: var(--npf-font-ui);
  font-size: 14px;
  line-height: 20px;
  color: var(--npf-text);
  margin: 0 !important;
}

body.npf-account table thead th,
body.npf-account .ui.table thead th {
  padding: 0 14px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--npf-line-soft) !important;
  background: transparent !important;
  font-family: var(--npf-font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  color: var(--npf-g500) !important;
  text-align: left;
  white-space: nowrap;
}

body.npf-account table tbody td,
body.npf-account .ui.table tbody td {
  padding: 16px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--npf-line-soft) !important;
  background: transparent !important;
  color: var(--npf-ink);
  vertical-align: middle;
}

body.npf-account table tbody tr:last-child td,
body.npf-account .ui.table tbody tr:last-child td { border-bottom: 0 !important; }

body.npf-account table tbody tr,
body.npf-account .ui.table tbody tr { transition: background var(--npf-t); }

body.npf-account table tbody tr:hover,
body.npf-account .ui.table tbody tr:hover { background: var(--npf-auth-bed) !important; }

/* Wide tables scroll inside their panel rather than widening the page. */
body.npf-account .table-responsive,
body.npf-account .ui.segment > table,
body.npf-account .ui.segment > .ui.table { display: block; overflow-x: auto; }

/* ---------- Buttons ----------

   Scoped to `.wpj-page-content`, which is the page's own content wrapper — the
   site header and footer sit outside it.

   Without that, `body.npf-account .ui.button { color: #fff !important }` also
   claimed the header's logged-out buttons, because those are `.ui.button` too:
   Login came out white on a white bar and vanished, and Sign Up picked up the
   `.ui.secondary.button` ghost treatment instead of the filled blue. It showed
   on any public page carrying this body class — /user/<name>/ is one — and only
   when logged out, which is why it went unnoticed on the account screens
   themselves. The account skin has no business styling the site chrome. */

body.npf-account .wpj-page-content .ui.button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px !important;
  font-family: var(--npf-font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 20px !important;
  text-transform: none !important;
  border: 0 !important;
  border-radius: var(--npf-radius-btn) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background var(--npf-t), color var(--npf-t), border-color var(--npf-t);
}

body.npf-account .wpj-page-content .ui.button,
body.npf-account .wpj-page-content .ui.primary.button {
  color: #fff !important;
  background: var(--npf-primary) !important;
}

body.npf-account .wpj-page-content .ui.button:hover,
body.npf-account .wpj-page-content .ui.primary.button:hover { background: var(--npf-primary-dark) !important; }

/* Secondary / basic buttons read as the design's .btn--ghost. */
body.npf-account .wpj-page-content .ui.basic.button,
body.npf-account .wpj-page-content .ui.secondary.button {
  color: var(--npf-ink) !important;
  background: #fff !important;
  border: 1.5px solid var(--npf-line) !important;
}

body.npf-account .wpj-page-content .ui.basic.button:hover,
body.npf-account .wpj-page-content .ui.secondary.button:hover {
  border-color: var(--npf-primary) !important;
  color: var(--npf-primary) !important;
  background: #fff !important;
}

/* The page's own primary action — "Post New" on My Services — ships as
   `.ui.basic.primary.button`, so the ghost rule above caught it and drew the
   main call to action as an outline with a heavy dark border. It is filled,
   like `.btn` in the reference. */
body.npf-account .my-account-post-btn,
body.npf-account .ui.basic.primary.button.my-account-post-btn {
  color: #fff !important;
  background: var(--npf-primary) !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.npf-account .my-account-post-btn:hover {
  background: var(--npf-primary-dark) !important;
  color: #fff !important;
  border: 0 !important;
}

/* The "…" overflow control beside it is an icon button: square, ghost, quiet. */
body.npf-account .my-account-post-btn + .ui.button,
body.npf-account .my-account-post-btn ~ .ui.basic.button {
  min-width: 44px;
  padding: 0 14px !important;
  color: var(--npf-g600) !important;
  border: 1.5px solid var(--npf-line) !important;
  background: #fff !important;
}

body.npf-account .my-account-post-btn + .ui.button:hover,
body.npf-account .my-account-post-btn ~ .ui.basic.button:hover {
  border-color: var(--npf-primary) !important;
  color: var(--npf-primary) !important;
}

body.npf-account .ui.negative.button,
body.npf-account .ui.red.button { background: var(--npf-danger) !important; }
body.npf-account .ui.negative.button:hover,
body.npf-account .ui.red.button:hover { background: #c94a4a !important; }

body.npf-account .ui.positive.button,
body.npf-account .ui.green.button { background: var(--npf-success) !important; }
body.npf-account .ui.positive.button:hover,
body.npf-account .ui.green.button:hover { background: #1c8c4c !important; }

body.npf-account .wpj-page-content .ui.button i.icon { margin: 0 !important; opacity: 1; }

/* ---------- Forms ----------
   Same field spec as the checkout so the two areas are indistinguishable:
   44px box, 8px radius, Public Sans 14/20, primary focus ring. */

body.npf-account .ui.form .field,
body.npf-account .field { margin-bottom: 18px !important; }

body.npf-account .ui.form label,
body.npf-account .field > label {
  display: block;
  font-family: var(--npf-font-body) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 20px !important;
  color: var(--npf-ink) !important;
  margin: 0 0 8px !important;
  text-transform: none !important;
}

body.npf-account input[type="text"],
body.npf-account input[type="email"],
body.npf-account input[type="tel"],
body.npf-account input[type="url"],
body.npf-account input[type="number"],
body.npf-account input[type="password"],
body.npf-account input[type="search"],
body.npf-account select,
body.npf-account textarea,
body.npf-account .ui.selection.dropdown {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px !important;
  border: 1px solid var(--npf-g100) !important;
  border-radius: var(--npf-radius-field) !important;
  background: #fff !important;
  font-family: var(--npf-font-ui) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--npf-ink) !important;
  box-shadow: none !important;
  transition: border-color var(--npf-t), box-shadow var(--npf-t);
}

body.npf-account textarea { min-height: 120px; resize: vertical; }

body.npf-account input::placeholder,
body.npf-account textarea::placeholder { color: var(--npf-g500) !important; }

body.npf-account input:hover,
body.npf-account select:hover,
body.npf-account textarea:hover,
body.npf-account .ui.selection.dropdown:hover { border-color: var(--npf-primary) !important; }

body.npf-account input:focus,
body.npf-account select:focus,
body.npf-account textarea:focus,
body.npf-account .ui.selection.dropdown.active {
  outline: none !important;
  border-color: var(--npf-primary) !important;
  box-shadow: 0 0 0 3px rgba(63, 109, 179, 0.14) !important;
}

body.npf-account .ui.selection.dropdown {
  display: flex !important;
  align-items: center;
}

body.npf-account .ui.selection.dropdown > i.dropdown.icon {
  top: 50% !important;
  right: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-50%);
  color: var(--npf-g600) !important;
}

body.npf-account .ui.dropdown .menu > .item {
  font-family: var(--npf-font-body) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  padding: 10px 14px !important;
}

body.npf-account .ui.dropdown .menu > .item:hover {
  background: var(--npf-primary-soft) !important;
  color: var(--npf-primary-dark) !important;
}

body.npf-account input[type="checkbox"],
body.npf-account input[type="radio"] { accent-color: var(--npf-primary); }

/* ---------- Status labels ----------
   Order states (completed / pending / cancelled) as quiet pills rather than
   Semantic's saturated blocks. */

body.npf-account .ui.label {
  display: inline-flex !important;
  align-items: center;
  padding: 5px 11px !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--npf-font-ui) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  line-height: 16px !important;
  letter-spacing: 0.2px;
  text-transform: none !important;
  background: var(--npf-line-soft) !important;
  color: var(--npf-g600) !important;
}

body.npf-account .ui.green.label,
body.npf-account .ui.positive.label { background: #e6f6ed !important; color: #17794a !important; }
body.npf-account .ui.red.label,
body.npf-account .ui.negative.label { background: #fdecec !important; color: #b93b3b !important; }
body.npf-account .ui.yellow.label,
body.npf-account .ui.orange.label { background: #fff4e0 !important; color: #a76a12 !important; }
body.npf-account .ui.blue.label,
body.npf-account .ui.teal.label { background: var(--npf-primary-soft) !important; color: var(--npf-primary-dark) !important; }

/* ---------- Links, avatars, pagination ---------- */

body.npf-account .wpj-page-content a:not(.ui.button):not(.item) {
  color: var(--npf-primary);
  transition: color var(--npf-t);
}

body.npf-account .wpj-page-content a:not(.ui.button):not(.item):hover {
  color: var(--npf-primary-dark);
}

body.npf-account .round-avatar,
body.npf-account .avatar,
body.npf-account img.ui.avatar { border-radius: 50% !important; object-fit: cover; }

body.npf-account .ui.pagination.menu {
  display: inline-flex !important;
  gap: 6px;
  margin-top: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

body.npf-account .ui.pagination.menu .item {
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid var(--npf-line-soft) !important;
  border-radius: var(--npf-radius-btn) !important;
  font-family: var(--npf-font-ui) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--npf-g600) !important;
  background: #fff !important;
  transition: border-color var(--npf-t), color var(--npf-t), background var(--npf-t);
}

body.npf-account .ui.pagination.menu .item::before { display: none !important; }

body.npf-account .ui.pagination.menu .item:hover {
  border-color: var(--npf-primary) !important;
  color: var(--npf-primary) !important;
}

body.npf-account .ui.pagination.menu .item.active {
  background: var(--npf-primary) !important;
  border-color: var(--npf-primary) !important;
  color: #fff !important;
}

/* ---------- Empty states ---------- */

body.npf-account .ui.message,
body.npf-account .no-results {
  padding: 22px 24px !important;
  border: 1px dashed var(--npf-g200) !important;
  border-radius: var(--npf-radius-panel) !important;
  background: #fff !important;
  box-shadow: none !important;
  font-family: var(--npf-font-ui);
  font-size: 15px;
  line-height: 22px;
  color: var(--npf-g600) !important;
  text-align: center;
}

body.npf-account .ui.info.message { border-style: solid !important; border-color: var(--npf-primary-soft) !important; background: #f6faff !important; }
body.npf-account .ui.negative.message { border-style: solid !important; border-color: #f3cfcf !important; background: #fdf3f3 !important; color: #a33 !important; }
body.npf-account .ui.positive.message { border-style: solid !important; border-color: #cfead9 !important; background: #f2fbf6 !important; color: #17794a !important; }

/* ============================================================
   MODALS (Vacation Mode, confirmations)
   Semantic detaches these to <body> on show, so they leave `.wpj-page-content`
   — but the body class stays, which is what keeps them in scope here.
   ============================================================ */

body.npf-account .ui.modal {
  border-radius: 14px !important;
  border: 0 !important;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(19, 24, 36, 0.24) !important;
  font-family: var(--npf-font-body);
}

/* The theme centres a big grey glyph above the title. The design puts the
   title on a single left-aligned row with a rule under it. */
body.npf-account .ui.modal > .header,
body.npf-account .ui.modal > .ui.icon.header {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 18px 56px 18px 24px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--npf-line-soft) !important;
  background: #fff !important;
  font-family: var(--npf-font-head) !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  line-height: 28px !important;
  color: var(--npf-ink) !important;
  text-align: left !important;
}

body.npf-account .ui.modal > .header > i.icon,
body.npf-account .ui.modal > .ui.icon.header > i.icon {
  display: inline-block !important;
  flex: none;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  color: var(--npf-primary) !important;
  opacity: 1 !important;
}

body.npf-account .ui.modal > .content {
  padding: 24px !important;
  background: #fff !important;
}

body.npf-account .ui.modal > .content .field { margin-bottom: 18px !important; }
body.npf-account .ui.modal > .content .field:last-child { margin-bottom: 0 !important; }

/* Close control, top-right inside the card rather than floating above it. */
body.npf-account .ui.modal > i.close.icon,
body.npf-account .ui.modal > .close {
  top: 18px !important;
  right: 16px !important;
  left: auto !important;
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--npf-g600) !important;
  opacity: 1 !important;
  border-radius: 8px;
  text-shadow: none !important;
  transition: background var(--npf-t), color var(--npf-t);
}

body.npf-account .ui.modal > i.close.icon:hover,
body.npf-account .ui.modal > .close:hover {
  background: var(--npf-primary-soft) !important;
  color: var(--npf-primary) !important;
}

/* Footer: primary action first, cancel as a ghost — not two saturated blocks. */
body.npf-account .ui.modal > .actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--npf-line-soft) !important;
  background: #fff !important;
}

body.npf-account .ui.modal > .actions .ui.button {
  min-height: 46px;
  margin: 0 !important;
  padding: 0 22px !important;
  font-size: 15px !important;
}

/* Every affirmative variant has to appear in this :not() chain, not just the
   ones the primary rule lists. Each :not() adds its argument's specificity, so
   the chain outranks the primary rule below — miss one class there and the
   confirm button silently renders as a ghost. */
body.npf-account .ui.modal > .actions .ui.button.cancel,
body.npf-account .ui.modal > .actions .ui.negative.button,
body.npf-account .ui.modal > .actions .ui.button:not(.positive):not(.ok):not(.primary):not(.green):not(.approve) {
  color: var(--npf-ink) !important;
  background: #fff !important;
  border: 1.5px solid var(--npf-line) !important;
}

body.npf-account .ui.modal > .actions .ui.button.cancel:hover,
body.npf-account .ui.modal > .actions .ui.button:not(.positive):not(.ok):not(.primary):not(.green):not(.approve):hover {
  border-color: var(--npf-primary) !important;
  color: var(--npf-primary) !important;
}

body.npf-account .ui.modal > .actions .ui.positive.button,
body.npf-account .ui.modal > .actions .ui.ok.button,
body.npf-account .ui.modal > .actions .ui.approve.button,
body.npf-account .ui.modal > .actions .ui.green.button,
body.npf-account .ui.modal > .actions .ui.primary.button {
  color: #fff !important;
  background: var(--npf-primary) !important;
  border: 0 !important;
}

body.npf-account .ui.modal > .actions .ui.positive.button:hover,
body.npf-account .ui.modal > .actions .ui.ok.button:hover,
body.npf-account .ui.modal > .actions .ui.approve.button:hover,
body.npf-account .ui.modal > .actions .ui.green.button:hover,
body.npf-account .ui.modal > .actions .ui.primary.button:hover {
  background: var(--npf-primary-dark) !important;
}

/* Semantic's `.labeled.icon.button` positions the glyph absolutely against a
   reserved left inset. Our flex layout removes that inset, so the icon landed
   on top of the label. Put it back in the flow and let the gap space it. */
body.npf-account .ui.modal > .actions .ui.labeled.icon.button,
body.npf-account .ui.labeled.icon.button {
  padding-left: 22px !important;
  padding-right: 22px !important;
}

body.npf-account .ui.modal > .actions .ui.labeled.icon.button > i.icon,
body.npf-account .ui.labeled.icon.button > i.icon {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 1;
}

body.npf-account .ui.dimmer { background: rgba(2, 11, 24, 0.45) !important; }

@media (max-width: 860px) {
  body.npf-account .ui.modal {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 !important;
  }

  body.npf-account .ui.modal > .content { padding: 18px !important; }
  body.npf-account .ui.modal > .header,
  body.npf-account .ui.modal > .ui.icon.header { padding: 16px 52px 16px 18px !important; font-size: 18px !important; }

  body.npf-account .ui.modal > .actions {
    flex-direction: column-reverse;
    align-items: stretch;
    padding: 14px 18px !important;
  }

  body.npf-account .ui.modal > .actions .ui.button { width: 100% !important; }
}

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  body.npf-account .wpj-page-content { padding-block: 32px 60px !important; }

  body.npf-account h1.ui.header,
  body.npf-account .heading-title {
    font-size: 26px !important;
    line-height: 34px !important;
    margin-bottom: 20px !important;
  }

  body.npf-account .ui.segment,
  body.npf-account .ui.tab.segment { padding: 22px 18px !important; }

  body.npf-account .wpj-stats-segment .user-account-list {
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 12px;
  }

  body.npf-account .wpj-stats-segment .user-account-list > .item { padding: 16px 18px !important; }

  body.npf-account .wpj-stats-segment .user-account-table-value-mobile,
  body.npf-account .wpj-stats-segment .header { font-size: 22px !important; line-height: 28px !important; }

  /* The pills scroll sideways rather than stacking into a tall block.
     Padding on the strip, not margin, so the lift and shadow on the first and
     last pill are not clipped by the scroll container. */
  body.npf-account .ui.secondary.menu {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding: 4px 2px 8px !important;
    margin-bottom: 16px !important;
  }

  body.npf-account .ui.secondary.menu::-webkit-scrollbar { display: none; }

  body.npf-account .ui.secondary.menu .item {
    flex: 0 0 auto;
    padding: 9px 15px !important;
    font-size: 13px !important;
  }

  /* Hover lift is a pointer affordance; on touch it just causes reflow inside
     a scroller. */
  body.npf-account .ui.secondary.menu .item:hover { transform: none; box-shadow: none; }

  body.npf-account .ui.button { width: 100%; }

  /* …but the header action pair stays side by side rather than stacking. */
  body.npf-account .my-account-post-btn,
  body.npf-account .my-account-post-btn + .ui.button,
  body.npf-account .my-account-post-btn ~ .ui.basic.button { width: auto !important; }
  body.npf-account .ui.pagination.menu .item { min-width: 36px !important; min-height: 36px !important; }
}

@media (max-width: 560px) {
  body.npf-account .wpj-stats-segment .user-account-list { grid-template-columns: 1fr 1fr; }
  body.npf-account .ui.segment,
  body.npf-account .ui.tab.segment { padding: 18px 14px !important; }
}

/* ============================================================
   REFERRAL URL GENERATOR (/referral-url-generator)
   A 4-step wizard from indiasan-customization. The steps, the progress bar and
   every button are the plugin's own — only their appearance changes here. No
   rule touches which step is visible: `.iscu_active_step` stays the plugin's
   to set, so the wizard's logic is untouched.
   ============================================================ */

/* This template uses the blog wrapper, which paints white over the page bed
   and carries a top margin the page bed already provides. */
body.npf-account .blog_post,
body.npf-account .blog_posts {
  margin-top: 0 !important;
}

body.npf-account .blog_post.white-cnt,
body.npf-account #content-full {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.npf-account .padding-cnt { padding: 0 !important; }

/* It also titles the page with `.page_title`, not `h1.ui.header`. */
body.npf-account h1.page_title {
  font-family: var(--npf-font-head) !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  line-height: 26px !important;
  letter-spacing: -0.4px;
  text-transform: none !important;
  color: var(--npf-ink) !important;
  /* Centred over the wizard card, which is itself centred on the page. */
  text-align: center !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ---- Wizard card ----
   Replaces the peach gradient with the design's panel: white, hairline border,
   soft elevation, centred on a comfortable measure. */
body.npf-account .iscu_referral_multistep_container {
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  padding: 40px 44px 34px !important;
  background: #fff !important;
  border: 1px solid var(--npf-line-soft) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 34px rgba(19, 24, 36, 0.06) !important;
  box-sizing: border-box;
}

body.npf-account .iscu_referral_step { width: 100% !important; }
body.npf-account .iscu_step_content { text-align: center; }

body.npf-account .iscu_step_title {
  font-family: var(--npf-font-head) !important;
  font-weight: 500 !important;
  font-size: 28px !important;
  line-height: 36px !important;
  color: var(--npf-ink) !important;
  margin: 0 0 12px !important;
}

body.npf-account .iscu_step_subtitle {
  font-family: var(--npf-font-body) !important;
  font-size: 15px !important;
  line-height: 24px !important;
  color: var(--npf-text-soft) !important;
  margin: 0 auto 28px !important;
  max-width: 460px;
}

body.npf-account .iscu_step_form { text-align: left; }

body.npf-account .iscu_form_title {
  font-family: var(--npf-font-body) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 22px !important;
  color: var(--npf-ink) !important;
  margin: 0 0 10px !important;
}

body.npf-account .iscu_referral_multistep_container input[type="text"],
body.npf-account .iscu_referral_multistep_container input[type="url"],
body.npf-account .iscu_referral_multistep_container input[type="email"] {
  width: 100% !important;
  min-height: 50px !important;
  padding: 13px 16px !important;
  border: 1px solid var(--npf-g100) !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-family: var(--npf-font-ui) !important;
  font-size: 15px !important;
  line-height: 22px !important;
  color: var(--npf-ink) !important;
  box-shadow: none !important;
}

body.npf-account .iscu_referral_multistep_container input:focus {
  outline: none !important;
  border-color: var(--npf-primary) !important;
  box-shadow: 0 0 0 3px rgba(63, 109, 179, 0.14) !important;
}

/* ---- Progress ---- */
body.npf-account .iscu_progress_container { margin: 30px 0 24px; }

body.npf-account .iscu_progress_bar {
  height: 7px !important;
  border-radius: 999px !important;
  background: var(--npf-line-soft) !important;
  overflow: hidden;
}

body.npf-account .iscu_progress_fill {
  height: 100% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--npf-primary) 0%, var(--npf-primary-light) 100%) !important;
  transition: width 0.4s var(--npf-ease);
}

body.npf-account .iscu_step_indicator {
  margin-top: 10px;
  font-family: var(--npf-font-ui) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  letter-spacing: 0.3px;
  color: var(--npf-g600) !important;
  text-align: center;
}

/* ---- Navigation ---- */
body.npf-account .iscu_step_navigation {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}

body.npf-account .iscu_next_btn,
body.npf-account .iscu_prev_btn,
body.npf-account .iscu_copy_btn,
body.npf-account .iscu_referral_multistep_container input.page_url_sub {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  min-width: 132px;
  padding: 0 26px !important;
  font-family: var(--npf-font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 20px !important;
  text-transform: none !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background var(--npf-t), color var(--npf-t), border-color var(--npf-t);
}

body.npf-account .iscu_next_btn,
body.npf-account .iscu_copy_btn,
body.npf-account .iscu_referral_multistep_container input.page_url_sub {
  color: #fff !important;
  background: var(--npf-primary) !important;
}

body.npf-account .iscu_next_btn:hover,
body.npf-account .iscu_copy_btn:hover,
body.npf-account .iscu_referral_multistep_container input.page_url_sub:hover {
  background: var(--npf-primary-dark) !important;
}

body.npf-account .iscu_prev_btn {
  color: var(--npf-ink) !important;
  background: #fff !important;
  border: 1.5px solid var(--npf-line) !important;
}

body.npf-account .iscu_prev_btn:hover {
  border-color: var(--npf-primary) !important;
  color: var(--npf-primary) !important;
}

body.npf-account .iscu_copy_btn {
  min-width: 0;
  padding: 0 20px !important;
  letter-spacing: 0.4px;
}

body.npf-account .iscu_referral_multistep_container .iscu_loader { display: none; }

body.npf-account .iscu_referral_multistep_container .iscu_ajaxing .iscu_loader {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: npf-referral-spin 0.7s linear infinite;
}

@keyframes npf-referral-spin { to { transform: rotate(360deg); } }

@media (max-width: 860px) {
  body.npf-account .iscu_referral_multistep_container {
    max-width: none !important;
    padding: 28px 20px 26px !important;
    border-radius: 14px !important;
  }

  body.npf-account .iscu_step_title { font-size: 22px !important; line-height: 30px !important; }
  body.npf-account .iscu_step_subtitle { font-size: 14px !important; line-height: 22px !important; }
  body.npf-account .iscu_step_navigation { flex-direction: column-reverse; align-items: stretch; }

  body.npf-account .iscu_next_btn,
  body.npf-account .iscu_prev_btn,
  body.npf-account .iscu_referral_multistep_container input.page_url_sub { width: 100%; }
}

/* ============================================================
   MY FAVORITES (/my-favorites)
   Not a <table> — a Semantic grid (`.wpj-grid-table`) with one
   `.upb_bookmark` grid per saved job. Restyled as a compact list; the remove
   control keeps its own classes so the bookmark AJAX is untouched.
   ============================================================ */

body.npf-account .wpj-grid-table {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Column headings row. */
body.npf-account .wpj-grid-table > .row:first-child {
  margin: 0 !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--npf-line-soft);
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--npf-g500);
}

body.npf-account .upb-bookmarks-list.row {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* One saved job. */
/* Semantic already sizes these columns to total 100%. Left as its own grid —
   adding flex and a gap pushed the last column onto a second line. */
body.npf-account .ui.grid.my-favorites.upb_bookmark {
  align-items: center;
  margin: 0 !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--npf-line-soft);
  transition: background var(--npf-t);
}

body.npf-account .ui.grid.my-favorites.upb_bookmark:last-child { border-bottom: 0; }

body.npf-account .ui.grid.my-favorites.upb_bookmark:hover {
  background: var(--npf-auth-bed);
}

body.npf-account .wpj-grid-table .column {
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
}

/* Job cell: avatar + title + meta, on one compact row. */
body.npf-account .my-favorites .flex-parent.flex-thumb-text {
  display: flex !important;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

body.npf-account .my-favorites img.round-avatar {
  width: 46px !important;
  height: 46px !important;
  flex: none;
  border-radius: 50% !important;
  object-fit: cover;
  border: 1px solid var(--npf-line-soft);
}

body.npf-account .my-favorites .flex-thumb-text a {
  display: block;
  font-family: var(--npf-font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 21px !important;
  color: var(--npf-ink) !important;
  transition: color var(--npf-t);
}

body.npf-account .my-favorites .flex-thumb-text a:hover { color: var(--npf-primary) !important; }

/* "Not rated yet" and any other meta under the title. */
body.npf-account .my-favorites .flex-thumb-text .rating-text,
body.npf-account .my-favorites .flex-thumb-text small,
body.npf-account .my-favorites .flex-thumb-text > div > div:last-child {
  font-family: var(--npf-font-ui);
  font-size: 13px;
  line-height: 18px;
  color: var(--npf-g500);
}

/* Delivery and price read as data, not headings. */
body.npf-account .my-favorites .favorite-deliver-days,
body.npf-account .my-favorites .favorite-job-price,
body.npf-account .my-favorites .three.wide.column,
body.npf-account .my-favorites .four.wide.column {
  font-family: var(--npf-font-ui) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--npf-g900) !important;
}

/* Remove control: a quiet icon button that commits to red on hover, rather
   than a saturated heart shouting on every row. */
body.npf-account .my-favorites .upb_add_remove_links,
body.npf-account .my-favorites .upb_remove_bookmark,
body.npf-account .my-favorites .upb-remove {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: transparent;
  transition: background var(--npf-t), transform var(--npf-t);
}

body.npf-account .my-favorites .upb_add_remove_links:hover,
body.npf-account .my-favorites .upb_remove_bookmark:hover,
body.npf-account .my-favorites .upb-remove:hover {
  background: #fdecec;
}

body.npf-account .my-favorites .upb_add_remove_links i,
body.npf-account .my-favorites .upb_add_remove_links svg,
body.npf-account .my-favorites .upb_add_remove_links img {
  font-size: 19px !important;
  width: 19px;
  height: 19px;
  margin: 0 !important;
  opacity: 0.85;
  transition: opacity var(--npf-t), transform var(--npf-t);
}

body.npf-account .my-favorites .upb_add_remove_links:hover i,
body.npf-account .my-favorites .upb_add_remove_links:hover svg,
body.npf-account .my-favorites .upb_add_remove_links:hover img {
  opacity: 1;
  transform: scale(1.08);
}

@media (max-width: 860px) {
  /* The heading row is meaningless once the cells stack. */
  body.npf-account .wpj-grid-table > .row:first-child { display: none !important; }

  body.npf-account .ui.grid.my-favorites.upb_bookmark {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 6px 12px;
    padding: 16px 0 !important;
  }

  body.npf-account .my-favorites .eight.wide.column { grid-column: 1; }

  body.npf-account .my-favorites .favorite-deliver-days,
  body.npf-account .my-favorites .favorite-job-price,
  body.npf-account .my-favorites .three.wide.column,
  body.npf-account .my-favorites .four.wide.column {
    grid-column: 1;
    font-size: 13px !important;
    color: var(--npf-g600) !important;
  }

  /* Remove stays pinned to the top-right of the card. */
  body.npf-account .my-favorites .two.wide.column,
  body.npf-account .my-favorites .upb_add_remove_links {
    grid-column: 2;
    grid-row: 1;
  }
}

/* ============================================================
   POST NEW / EDIT SERVICE (/indiasan-post-new-or-edit-job)
   A 5-step wizard from indiasan-customization. Which `.tab` is `.active`, the
   progress width and the character counter are all the plugin's — nothing here
   touches them, only how they look.
   ============================================================ */

body.npf-account .iscu_new_job_posting { background: transparent !important; }

/* Admin-only tooltip notice at the top. */
body.npf-account .iscu_new_job_posting > .ui.segment:first-child {
  padding: 14px 18px !important;
  margin: 0 0 20px !important;
  border: 1px solid var(--npf-primary-soft) !important;
  border-radius: 10px !important;
  background: #f6faff !important;
  box-shadow: none !important;
  font-family: var(--npf-font-ui);
  font-size: 14px;
  line-height: 21px;
  color: var(--npf-g600) !important;
}

body.npf-account .tabs-container,
body.npf-account #add-edit-job-form,
body.npf-account .post-new-job-wrapper,
body.npf-account .tabs-wrapper,
body.npf-account .tab-wrapper {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* ---- The step card ----
   Replaces the peach gradient with the design's panel. */
body.npf-account .iscu_new_job_posting .tab.active {
  display: block;
  max-width: 780px;
  margin: 0 auto !important;
  padding: 34px 38px 28px !important;
  background: #fff !important;
  border: 1px solid var(--npf-line-soft) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 34px rgba(19, 24, 36, 0.06) !important;
  box-sizing: border-box;
}

/* The title sits inside a nested segment; it is a heading, not a panel. */
body.npf-account .post-new-job-title,
body.npf-account .iscu_new_job_posting .tab .ui.basic.segment {
  padding: 0 !important;
  margin: 0 0 24px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.npf-account .post-new-job-title h1.ui.header {
  font-family: var(--npf-font-head) !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  line-height: 30px !important;
  color: var(--npf-ink) !important;
  margin: 0 !important;
}

/* ---- Fields ---- */
body.npf-account .iscu_new_job_posting .fields,
body.npf-account .iscu_new_job_posting .field { margin: 0 0 18px !important; }

body.npf-account .iscu_new_job_posting .field > label {
  display: block;
  font-family: var(--npf-font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 20px !important;
  color: var(--npf-ink) !important;
  margin: 0 0 8px !important;
}

body.npf-account .iscu_new_job_posting textarea,
body.npf-account .iscu_new_job_posting input[type="text"],
body.npf-account .iscu_new_job_posting input[type="number"] {
  width: 100% !important;
  padding: 13px 16px !important;
  border: 1px solid var(--npf-g100) !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-family: var(--npf-font-ui) !important;
  font-size: 15px !important;
  line-height: 22px !important;
  color: var(--npf-ink) !important;
  box-shadow: none !important;
}

body.npf-account .iscu_new_job_posting textarea.job-title { min-height: 92px !important; resize: vertical; }

body.npf-account .iscu_new_job_posting textarea:focus,
body.npf-account .iscu_new_job_posting input:focus {
  outline: none !important;
  border-color: var(--npf-primary) !important;
  box-shadow: 0 0 0 3px rgba(63, 109, 179, 0.14) !important;
}

body.npf-account .iscu_new_job_posting .charscounter {
  font-family: var(--npf-font-ui) !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: var(--npf-g500) !important;
}

/* ---- Side tooltip ---- */
body.npf-account .iscu_new_job_posting .ui.popup {
  padding: 14px 16px !important;
  border: 1px solid var(--npf-line-soft) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(19, 24, 36, 0.1) !important;
  font-family: var(--npf-font-ui) !important;
  font-size: 13px !important;
  line-height: 20px !important;
  color: var(--npf-g600) !important;
}

body.npf-account .iscu_new_job_posting .ui.popup p { margin: 0 !important; color: inherit !important; }

/* ---- Progress ---- */
body.npf-account .iscu_job_posting_progress {
  height: 6px !important;
  margin-top: 26px !important;
  border-radius: 999px !important;
  background: var(--npf-line-soft) !important;
  overflow: hidden;
}

body.npf-account .iscu_job_posting_progress > * {
  height: 100% !important;
  border-radius: 999px !important;
  background: var(--npf-primary) !important;
  transition: width 0.4s var(--npf-ease);
}

body.npf-account .iscu_job_posting_progress_text {
  margin-top: 10px !important;
  font-family: var(--npf-font-ui) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: var(--npf-g600) !important;
  text-align: center;
}

/* ---- Step controls ---- */
body.npf-account .tab-controls {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 0 !important;
  margin-top: 22px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--npf-line-soft);
}

body.npf-account .tab-controls::before,
body.npf-account .tab-controls::after { content: none !important; }

body.npf-account .tab-controls .ui.button {
  float: none !important;
  min-height: 46px;
  min-width: 118px;
  margin: 0 !important;
  padding: 0 24px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
}

/* "Back" reads as the quiet option, "next" as the primary one. */
body.npf-account .tab-controls .ui.button.left.floated,
body.npf-account .tab-controls .ui.basic.button {
  order: -1;
  margin-right: auto !important;
  color: var(--npf-ink) !important;
  background: #fff !important;
  border: 1.5px solid var(--npf-line) !important;
}

body.npf-account .tab-controls .ui.secondary.button,
body.npf-account .tab-controls .ui.primary.button {
  color: #fff !important;
  background: var(--npf-primary) !important;
  border: 0 !important;
}

body.npf-account .tab-controls .ui.secondary.button:hover,
body.npf-account .tab-controls .ui.primary.button:hover {
  background: var(--npf-primary-dark) !important;
}

/* Decorative corner art the design has no place for. */
body.npf-account .tab-corner-image { display: none !important; }

body.npf-account .iscu_new_job_posting .ui.error.message:not(:empty) {
  margin: 0 0 16px !important;
  border-color: #f3cfcf !important;
  background: #fdf3f3 !important;
  color: #a33 !important;
}

@media (max-width: 860px) {
  body.npf-account .iscu_new_job_posting .tab.active {
    padding: 24px 18px 22px !important;
    border-radius: 12px !important;
  }

  body.npf-account .post-new-job-title h1.ui.header { font-size: 19px !important; line-height: 26px !important; }

  body.npf-account .tab-controls { flex-wrap: wrap; }
  body.npf-account .tab-controls .ui.button { flex: 1 1 0; min-width: 0; }

  /* The tooltip has nowhere to sit beside the field on a phone. */
  body.npf-account .iscu_new_job_posting .ui.popup { display: none !important; }
}

/* The peach gradient is a `background-image` on `.tab.active`, set by a rule
   that lands after the `background` shorthand above — so the shorthand's
   implicit `background-image: none` was being overridden and the gradient
   survived. Reset the image and the colour as separate properties. */
body.npf-account .iscu_new_job_posting .tab,
body.npf-account .iscu_new_job_posting .tab.active {
  background-image: none !important;
  background-color: #fff !important;
}

/* `.tab-controls` holds a floated button, so it collapses to ~1px and the
   button escapes the card. Flex re-establishes the height. */
body.npf-account .iscu_new_job_posting .tab-controls {
  overflow: visible;
  clear: both;
}

body.npf-account .iscu_new_job_posting .tab-controls .ui.button.right.floated {
  float: none !important;
}

/* iscu-public.css paints the gradient through the full descendant chain
   (`.iscu_new_job_posting .post-new-job-wrapper … .tab`) with `!important`, so
   a shorter selector loses even when it is also `!important`. Matching the
   same depth is what it takes to win. */
body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tabs-wrapper .tab-wrapper .tab,
body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tabs-wrapper .tab-wrapper .tab.active {
  background-image: none !important;
  background-color: #fff !important;
  border: 1px solid var(--npf-line-soft) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 34px rgba(19, 24, 36, 0.06) !important;
}

/* ---- Post New: alignment + radius ----
   Measured: card 780px, title/fields/progress all 702px and aligned, but the
   textarea sat at 660px (21px inset) and the Pricing button ran 78px past the
   card's right edge. Both are brought back onto the same 702px column so every
   edge in the card lines up. */

body.npf-account .iscu_new_job_posting .field > textarea,
body.npf-account .iscu_new_job_posting .field > input[type="text"],
body.npf-account .iscu_new_job_posting .field > input[type="number"],
body.npf-account .iscu_new_job_posting .field .input-relative,
body.npf-account .iscu_new_job_posting .field .ui.input {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

/* 6px on every control, per spec. */
body.npf-account .iscu_new_job_posting textarea,
body.npf-account .iscu_new_job_posting input[type="text"],
body.npf-account .iscu_new_job_posting input[type="number"],
body.npf-account .iscu_new_job_posting .ui.selection.dropdown,
body.npf-account .iscu_new_job_posting .tab-controls .ui.button,
body.npf-account .tab-controls .ui.button {
  border-radius: 6px !important;
}

/* The button kept its Semantic `float: right`, which took it out of the flex
   row and past the card edge. */
body.npf-account .iscu_new_job_posting .tab-controls .ui.button,
body.npf-account .iscu_new_job_posting .tab-controls .ui.button.right.floated,
body.npf-account .iscu_new_job_posting .tab-controls .ui.right.floated.button {
  float: none !important;
  margin: 0 !important;
}

body.npf-account .iscu_new_job_posting .tab-controls {
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* ---- Notice ----
   Was running the full 1140px content width against a 780px card. Same width,
   and styled as a notice rather than a plain box: a primary rule down the
   leading edge instead of a full border. */
body.npf-account .iscu_new_job_posting > .ui.segment:first-child {
  max-width: 780px;
  margin: 0 auto 20px !important;
  padding: 13px 16px 13px 15px !important;
  border: 1px solid var(--npf-line-soft) !important;
  border-left: 3px solid var(--npf-primary) !important;
  border-radius: 6px !important;
  background: #f7fafd !important;
  font-size: 13px !important;
  line-height: 20px !important;
  color: var(--npf-g600) !important;
  box-sizing: border-box;
}

/* Full-chain overrides. iscu-public.css styles these through the whole
   descendant path with `!important`, so only a selector of equal depth wins —
   the same trap as the gradient above. */

body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tabs-wrapper .tab-wrapper .tab .field textarea,
body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tabs-wrapper .tab-wrapper .tab .field input[type="text"],
body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tabs-wrapper .tab-wrapper .tab .field input[type="number"] {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 6px !important;
  box-sizing: border-box;
}

body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tabs-wrapper .tab-wrapper .tab .tab-controls .ui.button {
  float: none !important;
  margin: 0 !important;
  border-radius: 6px !important;
}

/* The card and the notice were centring against different parents — the card
   inside an 844px `.tab-wrapper`, the notice inside the 1140px content column —
   so their edges never lined up. Same width, same parent width, same centre. */
body.npf-account .iscu_new_job_posting .tabs-wrapper,
body.npf-account .iscu_new_job_posting .tab-wrapper {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
}

/* ---- Post New: compact, and the title field reads as a title ----
   The winning rule is
   `.iscu_new_job_posting #add-edit-job-form .tabs-wrapper .field textarea`.
   It carries an ID, so no class-only selector can outrank it however deep —
   which is why the earlier attempts here kept losing. Matching the ID is the
   fix.

   The field is also given a title's proportions: it is capped at 80 characters,
   so a 92px message box misrepresented it as a description area and pushed the
   step button below the fold. */

body.npf-account .iscu_new_job_posting #add-edit-job-form .tabs-wrapper .field textarea,
body.npf-account .iscu_new_job_posting #add-edit-job-form .tabs-wrapper .field input[type="text"],
body.npf-account .iscu_new_job_posting #add-edit-job-form .tabs-wrapper .field input[type="number"] {
  width: 100% !important;
  max-width: none !important;
  min-height: 46px !important;
  height: 46px !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  line-height: 22px !important;
  overflow: hidden;
  resize: none;
  box-sizing: border-box;
}

/* Fields you write prose into keep room to write in.

   Named one by one rather than matched on `[name*="description"]`. That pattern
   only ever caught two of the six textareas on this form — job_description and
   package_description[] — and the word in the attribute was doing the work, not
   anything about the field. The three it missed are prose just the same:
   Instructions to Buyer (`instruction_box`), a service extra's description
   (`extraN_content`) and an FAQ answer (`faq_answer[]`).

   Missing them was not merely tight. They fell to the 46px single-line height
   above, which carries `overflow: hidden` — so a freelancer writing more than
   one line could not scroll back to what they had typed, it was simply out of
   sight. The theme asks for 6 rows on two of these fields; the rule above was
   overriding that.

   Anything genuinely single-line — the service title, prices — is left to the
   46px default, so this list stays the exception and not a second default. */
body.npf-account .iscu_new_job_posting #add-edit-job-form .tabs-wrapper .field textarea.job-description,
body.npf-account .iscu_new_job_posting #add-edit-job-form .tabs-wrapper .field textarea[name*="description"],
body.npf-account .iscu_new_job_posting #add-edit-job-form .tabs-wrapper .field textarea[name="instruction_box"],
body.npf-account .iscu_new_job_posting #add-edit-job-form .tabs-wrapper .field textarea.faq-answer {
  min-height: 140px !important;
  height: auto !important;
  overflow: auto;
  resize: vertical;
}

/* A service extra's description is capped at 50 characters, so it gets a box
   that shows all 50 with room to spare rather than the full 140px — a tall
   field would promise space the character counter takes straight back. */
body.npf-account .iscu_new_job_posting #add-edit-job-form .tabs-wrapper .field textarea[name*="_content"] {
  min-height: 88px !important;
  height: auto !important;
  overflow: auto;
  resize: vertical;
}

body.npf-account .iscu_new_job_posting #add-edit-job-form .tabs-wrapper .field {
  padding: 0 !important;
  margin: 0 0 14px !important;
}

body.npf-account .iscu_new_job_posting #add-edit-job-form .tab-controls .ui.button {
  float: none !important;
  margin: 0 !important;
  border-radius: 6px !important;
}

/* ---- Tighter vertical rhythm, so the step button stays above the fold ---- */
body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tabs-wrapper .tab-wrapper .tab,
body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tabs-wrapper .tab-wrapper .tab.active {
  padding: 22px 26px 18px !important;
}

body.npf-account .post-new-job-title,
body.npf-account .iscu_new_job_posting .tab .ui.basic.segment { margin: 0 0 16px !important; }

body.npf-account .post-new-job-title h1.ui.header { font-size: 20px !important; line-height: 27px !important; }

body.npf-account .iscu_new_job_posting .fields { margin: 0 0 14px !important; }

body.npf-account .iscu_new_job_posting .charscounter { font-size: 12px !important; }

body.npf-account .iscu_job_posting_progress { margin-top: 16px !important; }
body.npf-account .iscu_job_posting_progress_text { margin-top: 7px !important; font-size: 12px !important; }

body.npf-account .iscu_new_job_posting .tab-controls {
  margin-top: 14px !important;
  padding-top: 14px !important;
}

body.npf-account .iscu_new_job_posting .tab-controls .ui.button { min-height: 42px; }

body.npf-account .iscu_new_job_posting > .ui.segment:first-child { margin-bottom: 14px !important; }

/* This screen is a form, not a dashboard — it does not need the account bed's
   full 56/96 of air above and below. */
body.npf-account.page-id-20001 .wpj-page-content { padding-block: 28px 48px !important; }

/* ---- Post New: corrections ---- */

/* Bottom space restored — the earlier reduction was too aggressive. */
body.npf-account.page-id-20001 .wpj-page-content { padding-block: 32px 90px !important; }

/* The black 1px border and inner shadow are Semantic's `.ui.form` defaults for
   a focused/edited control; the design uses a hairline that only colours on
   focus. */
body.npf-account .iscu_new_job_posting #add-edit-job-form .tabs-wrapper .field textarea,
body.npf-account .iscu_new_job_posting #add-edit-job-form .tabs-wrapper .field input[type="text"],
body.npf-account .iscu_new_job_posting #add-edit-job-form .tabs-wrapper .field input[type="number"],
body.npf-account .iscu_new_job_posting #add-edit-job-form .tabs-wrapper .field textarea:focus,
body.npf-account .iscu_new_job_posting #add-edit-job-form .tabs-wrapper .field input:focus {
  border: 1px solid var(--npf-g100) !important;
  box-shadow: none !important;
  outline: none !important;
}

body.npf-account .iscu_new_job_posting #add-edit-job-form .tabs-wrapper .field textarea:focus,
body.npf-account .iscu_new_job_posting #add-edit-job-form .tabs-wrapper .field input:focus {
  border-color: var(--npf-primary) !important;
  box-shadow: 0 0 0 3px rgba(63, 109, 179, 0.14) !important;
}

/* A little more room to read the title back. */
body.npf-account .iscu_new_job_posting #add-edit-job-form .tabs-wrapper .field textarea.job-title {
  min-height: 62px !important;
  height: 62px !important;
  padding: 14px !important;
}

/* ---- Step navigation ----
   Left to the theme. It positions these buttons itself, below the card; a
   `position: static` override dropped them back into flow on top of the
   progress bar. The remaining ~39px right-edge overhang needs the winning
   rule identified first rather than another specificity guess. */

/* ---- Pricing-type cards (step 2) ----
   Peach and purple gradients replaced with the design's selectable card:
   white, hairline, primary ring and tint when chosen. */
body.npf-account .iscu_pricing_type_card,
body.npf-account .iscu_new_job_posting .pricing-type-card {
  background-image: none !important;
  background-color: #fff !important;
  border: 1.5px solid var(--npf-line-soft) !important;
  border-radius: 10px !important;
  padding: 18px !important;
  box-shadow: none !important;
  color: var(--npf-text) !important;
  transition: border-color var(--npf-t), background var(--npf-t);
}

body.npf-account .iscu_pricing_type_card:hover { border-color: var(--npf-primary) !important; }

body.npf-account .iscu_pricing_type_card.iscu_active,
body.npf-account .iscu_pricing_type_card.active,
body.npf-account .iscu_pricing_type_card.selected {
  border-color: var(--npf-primary) !important;
  background-color: var(--npf-primary-soft) !important;
}

body.npf-account .iscu_pricing_type_card h3,
body.npf-account .iscu_pricing_type_card h4,
body.npf-account .iscu_pricing_type_card strong {
  font-family: var(--npf-font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 21px !important;
  color: var(--npf-ink) !important;
  margin: 0 0 8px !important;
}

body.npf-account .iscu_pricing_type_card p {
  font-family: var(--npf-font-ui) !important;
  font-size: 13px !important;
  line-height: 19px !important;
  color: var(--npf-g600) !important;
  margin: 0 0 7px !important;
}

body.npf-account .iscu_pricing_type_card i.icon { color: var(--npf-primary) !important; }

/* Section sub-heading ("Pricing Type") and its helper line. */
body.npf-account .iscu_new_job_posting .tab h2,
body.npf-account .iscu_new_job_posting .tab h3 {
  font-family: var(--npf-font-head) !important;
  font-weight: 500 !important;
  font-size: 17px !important;
  line-height: 24px !important;
  color: var(--npf-ink) !important;
  margin: 0 0 6px !important;
}

/* Price row: the USD chip and its input read as one control. */
body.npf-account .iscu_new_job_posting .post-new-price,
body.npf-account .iscu_new_job_posting #job_price_field input,
body.npf-account .iscu_new_job_posting #job_price_field .ui.selection.dropdown {
  border-radius: 6px !important;
  border: 1px solid var(--npf-g100) !important;
  box-shadow: none !important;
}

/* Category / subcategory pickers. */
body.npf-account .iscu_new_job_posting .ui.selection.dropdown,
body.npf-account .iscu_new_job_posting .tagsinput,
body.npf-account .iscu_new_job_posting div.tagsinput {
  border-radius: 6px !important;
  border: 1px solid var(--npf-g100) !important;
  box-shadow: none !important;
  min-height: 46px !important;
}

/* ---- Step button alignment ----
   front.min.css positions this absolutely and pushes it out with
   `.post-new-job-wrapper .tab-controls a.right { right: -40px }`. That -40px
   was the overhang. Kept absolute — forcing it back into flow (an earlier
   attempt) dropped it on top of the progress bar. */
body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tab-controls a.right,
body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tab-controls a[class*="right"] {
  right: 0 !important;
}

body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tab-controls a.left,
body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tab-controls a[class*="left"] {
  left: 0 !important;
}

/* ---- Type scale ----
   The step sub-heading was smaller and lighter than the body copy under it,
   which inverted the hierarchy. One scale for the whole wizard. */
body.npf-account .iscu_new_job_posting .tab h2,
body.npf-account .iscu_new_job_posting .tab h3 {
  font-family: var(--npf-font-body) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 22px !important;
  color: var(--npf-ink) !important;
  margin: 0 0 4px !important;
}

body.npf-account .iscu_new_job_posting .tab > p,
body.npf-account .iscu_new_job_posting .tab .field > p,
body.npf-account .iscu_new_job_posting .tab .description {
  font-family: var(--npf-font-ui) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--npf-g600) !important;
  margin: 0 0 14px !important;
}

body.npf-account .iscu_new_job_posting .field > label {
  font-size: 14px !important;
  line-height: 20px !important;
}

/* ---- Pricing-type cards ----
   The middle card carried white text from its purple gradient; with the
   gradient gone it was white on white and vanished. Every card now inherits
   the same ink/grey pair regardless of which variant it was. */
body.npf-account .iscu_pricing_type_card,
body.npf-account .iscu_pricing_type_card * {
  color: var(--npf-g600) !important;
  text-shadow: none !important;
}

body.npf-account .iscu_pricing_type_card h3,
body.npf-account .iscu_pricing_type_card h4,
body.npf-account .iscu_pricing_type_card strong,
body.npf-account .iscu_pricing_type_card b {
  color: var(--npf-ink) !important;
}

/* Single border. Semantic's outline plus the theme's own box-shadow ring were
   drawing a second edge inside the first. */
body.npf-account .iscu_pricing_type_card {
  outline: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
  min-height: 100%;
  cursor: pointer;
}

body.npf-account .iscu_pricing_type_card.iscu_active,
body.npf-account .iscu_pricing_type_card.active,
body.npf-account .iscu_pricing_type_card.selected {
  border: 1.5px solid var(--npf-primary) !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-color: var(--npf-primary-soft) !important;
}

body.npf-account .iscu_pricing_type_card:hover {
  border-color: var(--npf-primary) !important;
  background-color: #f7fafd !important;
}

/* The selected card's inset ring.
   iscu-public.css draws a second border inside the card on the selected state —
   3px #21354d on odd cards, 3px #fff on even — sized for the peach/purple
   gradients it used to sit on. The 1.5px primary border above already marks the
   selection, so the ring is both redundant and off-palette. */
body.npf-account .iscu_pricing_type_card.selected::before,
body.npf-account .iscu_pricing_type_card.iscu_active::before,
body.npf-account .iscu_pricing_type_card.active::before {
  display: none !important;
}

/* ---- Old-palette leftovers from iscu-public.css ----
   Everything below was painted with the pre-redesign
   `linear-gradient(to right, #677ce7, #7450a8)`. The gradient is unreachable
   from the rules above because it is applied to pseudo-elements or through
   deeper selectors, so each one is restated here in the current primary. */

/* Wizard progress fill. The rule further up styles `> *`; the actual fill is a
   ::before, and the width-per-step rules that drive it stay untouched. */
body.npf-account .iscu_new_job_posting .iscu_job_posting_progress::before {
  background: var(--npf-primary) !important;
}

/* The "x" on each tag chip. */
body.npf-account .iscu_new_job_posting .ui.form.wpj-grey-form div.tagsinput span.tag a {
  background: var(--npf-primary) !important;
  background-image: none !important;
}

/* Equal-height cards in a tidy row. */
body.npf-account .iscu_new_job_posting .iscu_pricing_type_cards,
body.npf-account .iscu_new_job_posting .pricing-type-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

/* ---- Inputs and dropdowns ---- */
body.npf-account .iscu_new_job_posting #add-edit-job-form .tabs-wrapper .field .ui.selection.dropdown,
body.npf-account .iscu_new_job_posting #add-edit-job-form .tabs-wrapper .field div.tagsinput,
body.npf-account .iscu_new_job_posting #add-edit-job-form .tabs-wrapper .field select {
  min-height: 46px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--npf-g100) !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
  font-family: var(--npf-font-ui) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--npf-ink) !important;
}

body.npf-account .iscu_new_job_posting .ui.selection.dropdown:hover,
body.npf-account .iscu_new_job_posting div.tagsinput:hover { border-color: var(--npf-primary) !important; }

body.npf-account .iscu_new_job_posting .ui.selection.dropdown.active,
body.npf-account .iscu_new_job_posting div.tagsinput.focus {
  border-color: var(--npf-primary) !important;
  box-shadow: 0 0 0 3px rgba(63, 109, 179, 0.14) !important;
}

/* The USD chip and the amount read as one control. */
body.npf-account .iscu_new_job_posting #job_price_field {
  display: flex !important;
  align-items: stretch;
  gap: 0;
}

body.npf-account .iscu_new_job_posting #job_price_field .ui.label,
body.npf-account .iscu_new_job_posting #job_price_field .currency-label {
  display: flex !important;
  align-items: center;
  border-radius: 6px 0 0 6px !important;
  border: 1px solid var(--npf-g100) !important;
  border-right: 0 !important;
  background: var(--npf-auth-bed) !important;
  color: var(--npf-g600) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 14px !important;
}

/* Tag "remove" crosses on the category pickers. */
body.npf-account .iscu_new_job_posting div.tagsinput span.tag {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 5px 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--npf-primary-soft) !important;
  color: var(--npf-primary-dark) !important;
  font-family: var(--npf-font-ui) !important;
  font-size: 13px !important;
}

body.npf-account .iscu_new_job_posting div.tagsinput span.tag a {
  color: var(--npf-primary-dark) !important;
  opacity: 0.7;
  font-weight: 700;
}

body.npf-account .iscu_new_job_posting div.tagsinput span.tag a:hover { opacity: 1; }

/* ---- Selected card: one border, not two ----
   The theme draws its own heavy dark edge on the chosen card (inner), while
   ours drew the blue one (outer). Every inner edge source is cleared — border,
   outline and inset shadow — on the card and anything inside it, leaving only
   the primary ring. */
body.npf-account .iscu_pricing_type_card.iscu_active,
body.npf-account .iscu_pricing_type_card.active,
body.npf-account .iscu_pricing_type_card.selected,
body.npf-account .iscu_pricing_type_card:focus,
body.npf-account .iscu_pricing_type_card:focus-within {
  border: 2px solid var(--npf-primary) !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-color: var(--npf-primary-soft) !important;
}

body.npf-account .iscu_pricing_type_card > *,
body.npf-account .iscu_pricing_type_card.iscu_active > *,
body.npf-account .iscu_pricing_type_card.active > * {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ---- Step navigation buttons ----
   Both carried gradients — a purple one on "back" whose label washed out to
   grey. Flat primary for next, ghost for back. */
body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tab-controls a,
body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tab-controls a.left,
body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tab-controls a.right {
  background-image: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  font-family: var(--npf-font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tab-controls a.right {
  background-color: var(--npf-primary) !important;
  color: #fff !important;
  border: 0 !important;
}

body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tab-controls a.right:hover {
  background-color: var(--npf-primary-dark) !important;
}

body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tab-controls a.left {
  background-color: #fff !important;
  color: var(--npf-ink) !important;
  border: 1.5px solid var(--npf-line) !important;
}

body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tab-controls a.left:hover {
  border-color: var(--npf-primary) !important;
  color: var(--npf-primary) !important;
}

body.npf-account .iscu_new_job_posting .tab-controls a i.icon,
body.npf-account .iscu_new_job_posting .tab-controls a .chevron { color: inherit !important; }

/* ---- Price row: one control, consistent type ---- */
body.npf-account .iscu_new_job_posting #job_price_field,
body.npf-account .iscu_new_job_posting .post-new-price-wrapper {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

body.npf-account .iscu_new_job_posting #job_price_field > *,
body.npf-account .iscu_new_job_posting .post-new-price-wrapper > * { margin: 0 !important; }

body.npf-account .iscu_new_job_posting input.post-new-price {
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  min-height: 46px !important;
  width: 110px !important;
  text-align: left;
}

body.npf-account .iscu_new_job_posting #job_price_field .ui.selection.dropdown {
  border-radius: 0 6px 6px 0 !important;
  min-width: 150px;
}

/* "Number of Months" is a separate field, not part of the price control. */
body.npf-account .iscu_new_job_posting #iscu_number_of_months_field,
body.npf-account .iscu_new_job_posting .iscu_number_of_months_wrapper { margin-left: 20px; }

/* ---- Dropdowns: modern, consistent ---- */
body.npf-account .iscu_new_job_posting .ui.selection.dropdown {
  display: flex !important;
  align-items: center;
  min-height: 46px !important;
  padding: 12px 38px 12px 14px !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

body.npf-account .iscu_new_job_posting .ui.selection.dropdown > .text {
  font-family: var(--npf-font-ui) !important;
  font-size: 14px !important;
  color: var(--npf-ink) !important;
}

body.npf-account .iscu_new_job_posting .ui.selection.dropdown > i.dropdown.icon {
  top: 50% !important;
  right: 13px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-50%);
  color: var(--npf-g600) !important;
}

body.npf-account .iscu_new_job_posting .ui.dropdown .menu {
  border: 1px solid var(--npf-line-soft) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 32px rgba(19, 24, 36, 0.12) !important;
  margin-top: 4px !important;
}

body.npf-account .iscu_new_job_posting .ui.dropdown .menu > .item {
  padding: 10px 14px !important;
  font-family: var(--npf-font-ui) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  border: 0 !important;
}

body.npf-account .iscu_new_job_posting .ui.dropdown .menu > .item:hover {
  background: var(--npf-primary-soft) !important;
  color: var(--npf-primary-dark) !important;
}

/* ---- Package matrix (package pricing) ----
   Three saturated gradient columns replaced with plain tiers: a tinted header
   strip, white body, hairline separators. */
body.npf-account .iscu_new_job_posting .packages-table,
body.npf-account .iscu_new_job_posting table.packages,
body.npf-account .iscu_new_job_posting .iscu_packages_table { border-collapse: separate !important; }

body.npf-account .iscu_new_job_posting [class*="package"] td,
body.npf-account .iscu_new_job_posting [class*="package"] th {
  background-image: none !important;
  background-color: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid var(--npf-line-soft) !important;
  padding: 14px !important;
  vertical-align: middle;
}

body.npf-account .iscu_new_job_posting [class*="package"] thead th,
body.npf-account .iscu_new_job_posting [class*="package"] tr:first-child th,
body.npf-account .iscu_new_job_posting [class*="package"] tr:first-child td {
  background-color: var(--npf-auth-bed) !important;
  font-family: var(--npf-font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--npf-g600) !important;
  text-shadow: none !important;
}

body.npf-account .iscu_new_job_posting [class*="package"] td input,
body.npf-account .iscu_new_job_posting [class*="package"] td textarea,
body.npf-account .iscu_new_job_posting [class*="package"] td .ui.selection.dropdown {
  border: 1px solid var(--npf-g100) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

/* Row labels down the left. */
body.npf-account .iscu_new_job_posting [class*="package"] td:first-child {
  font-family: var(--npf-font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--npf-ink) !important;
  background-color: #fff !important;
}

/* ---- Package matrix ----
   Real class is `.ui.compact.celled.definition.table.packages-table`; the
   earlier `[class*="package"]` attempt lost to Semantic's `.ui.celled.table`
   rules. Matching Semantic's own specificity is what it takes. */
body.npf-account .iscu_new_job_posting .ui.table.packages-table,
body.npf-account .iscu_new_job_posting table.packages-table {
  border: 1px solid var(--npf-line-soft) !important;
  border-radius: 10px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  background: #fff !important;
}

body.npf-account .iscu_new_job_posting .ui.table.packages-table th,
body.npf-account .iscu_new_job_posting .ui.table.packages-table td,
body.npf-account .iscu_new_job_posting table.packages-table th,
body.npf-account .iscu_new_job_posting table.packages-table td {
  background-image: none !important;
  background-color: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid var(--npf-line-soft) !important;
  border-right: 1px solid var(--npf-line-soft) !important;
  padding: 14px !important;
  vertical-align: middle !important;
  color: var(--npf-ink) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.npf-account .iscu_new_job_posting .ui.table.packages-table th:last-child,
body.npf-account .iscu_new_job_posting .ui.table.packages-table td:last-child { border-right: 0 !important; }

body.npf-account .iscu_new_job_posting .ui.table.packages-table tr:last-child td { border-bottom: 0 !important; }

/* Tier headings — a tinted strip, not three saturated columns. */
body.npf-account .iscu_new_job_posting .ui.table.packages-table thead th,
body.npf-account .iscu_new_job_posting table.packages-table thead th {
  background-color: var(--npf-auth-bed) !important;
  font-family: var(--npf-font-body) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--npf-g600) !important;
}

/* Row labels down the left. */
body.npf-account .iscu_new_job_posting .ui.table.packages-table tbody td:first-child,
body.npf-account .iscu_new_job_posting .ui.table.packages-table tbody th:first-child {
  background-color: #fcfdfe !important;
  font-family: var(--npf-font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--npf-ink) !important;
  width: 180px;
}

/* Controls inside the matrix. */
body.npf-account .iscu_new_job_posting .packages-table input[type="text"],
body.npf-account .iscu_new_job_posting .packages-table input[type="number"],
body.npf-account .iscu_new_job_posting .packages-table textarea,
body.npf-account .iscu_new_job_posting .packages-table .ui.selection.dropdown {
  width: 100% !important;
  min-height: 42px !important;
  border: 1px solid var(--npf-g100) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-size: 14px !important;
}

/* The USD chip was a floating circle overlapping the price input. */
body.npf-account .iscu_new_job_posting .packages-table .ui.label,
body.npf-account .iscu_new_job_posting .packages-table .currency-label {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  height: auto !important;
  min-height: 42px;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid var(--npf-g100) !important;
  border-right: 0 !important;
  border-radius: 6px 0 0 6px !important;
  background: var(--npf-auth-bed) !important;
  color: var(--npf-g600) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body.npf-account .iscu_new_job_posting .packages-table .ui.label + input,
body.npf-account .iscu_new_job_posting .packages-table .currency-label + input {
  border-radius: 0 6px 6px 0 !important;
  border-left: 0 !important;
}

body.npf-account .iscu_new_job_posting .packages-table td > .ui.input,
body.npf-account .iscu_new_job_posting .packages-table td > div:has(> .ui.label) {
  display: flex !important;
  align-items: stretch;
  width: 100%;
}

/* Custom-field name inputs down the left column. */
body.npf-account .iscu_new_job_posting input.pck-inp-custom-name {
  width: 100% !important;
  min-height: 40px !important;
  padding: 9px 12px !important;
  border: 1px solid var(--npf-g100) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-family: var(--npf-font-ui) !important;
  font-size: 14px !important;
  color: var(--npf-ink) !important;
}

body.npf-account .iscu_new_job_posting input.pck-inp-custom-name:focus {
  border-color: var(--npf-primary) !important;
  box-shadow: 0 0 0 3px rgba(63, 109, 179, 0.14) !important;
}

/* Remove-row control: a quiet icon button, not a bare red cross. */
body.npf-account .iscu_new_job_posting .packages-table .remove-custom-field,
body.npf-account .iscu_new_job_posting .packages-table a[class*="remove"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 6px !important;
  border-radius: 6px;
  color: var(--npf-danger) !important;
  opacity: 0.75;
  transition: background var(--npf-t), opacity var(--npf-t);
}

body.npf-account .iscu_new_job_posting .packages-table .remove-custom-field:hover { background: #fdecec; opacity: 1; }

body.npf-account .iscu_new_job_posting .packages-table input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--npf-primary);
}

/* ---- Price row: full width ---- */
body.npf-account .iscu_new_job_posting #job_price_field,
body.npf-account .iscu_new_job_posting .field.js-tooltip-handler:has(.post-new-price) { width: 100% !important; }

body.npf-account .iscu_new_job_posting input.post-new-price { flex: 1 1 auto; width: auto !important; }

body.npf-account .iscu_new_job_posting #job_price_field .ui.selection.dropdown { flex: 0 0 190px; }

/* ---- Previous button ----
   Text and border are already #4f84c3; the chevron went missing, so it is
   redrawn here as a mask rather than relying on the theme's sprite. */
body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tab-controls a.left {
  color: var(--npf-primary) !important;
  border: 1.5px solid var(--npf-primary) !important;
  background-color: #fff !important;
  padding-left: 40px !important;
}

body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tab-controls a.left::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5-7 7 7 7'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5-7 7 7 7'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tab-controls a.left:hover {
  background-color: var(--npf-primary-soft) !important;
  border-color: var(--npf-primary) !important;
  color: var(--npf-primary-dark) !important;
}

body.npf-account .iscu_new_job_posting .tab-controls a.left,
body.npf-account .iscu_new_job_posting .tab-controls a.right { position: absolute; }

/* ---- Package price cells: stop the chip + input overflowing the column ----
   Each cell holds a currency chip and an input laid out inline; with no
   min-width floor the input kept its intrinsic size and pushed the pair into
   the neighbouring column. */
body.npf-account .iscu_new_job_posting .packages-table td {
  position: relative;
  overflow: hidden;
}

body.npf-account .iscu_new_job_posting .packages-table td .ui.input,
body.npf-account .iscu_new_job_posting .packages-table td > div {
  display: flex !important;
  align-items: stretch;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.npf-account .iscu_new_job_posting .packages-table td input[type="text"],
body.npf-account .iscu_new_job_posting .packages-table td input[type="number"] {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

body.npf-account .iscu_new_job_posting .packages-table .ui.label,
body.npf-account .iscu_new_job_posting .packages-table .currency-label {
  flex: 0 0 auto !important;
  white-space: nowrap;
}

/* The symbol is shorter than the code, so the chip can be narrower. */
body.npf-account .iscu_new_job_posting .packages-table .npf-currency-symbol {
  min-width: 38px;
  justify-content: center;
  font-size: 14px !important;
}

/* ---- Custom-field row: remove control to the top-right ---- */
body.npf-account .iscu_new_job_posting .packages-table td:first-child,
body.npf-account .iscu_new_job_posting .packages-table th:first-child { position: relative; }

body.npf-account .iscu_new_job_posting .packages-table td:first-child .remove-custom-field,
body.npf-account .iscu_new_job_posting .packages-table td:first-child a[class*="remove"],
body.npf-account .iscu_new_job_posting .packages-table th:first-child a[class*="remove"] {
  position: absolute !important;
  top: 8px;
  right: 8px;
  margin: 0 !important;
  width: 24px;
  height: 24px;
  font-size: 12px !important;
  line-height: 1 !important;
  z-index: 2;
}

body.npf-account .iscu_new_job_posting .packages-table td:first-child input.pck-inp-custom-name { padding-right: 34px !important; }

/* ---- Category / subcategory pickers ---- */
body.npf-account .iscu_new_job_posting div.tagsinput {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 46px !important;
  padding: 7px 12px !important;
  border: 1px solid var(--npf-g100) !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.npf-account .iscu_new_job_posting div.tagsinput:hover { border-color: var(--npf-primary) !important; }

body.npf-account .iscu_new_job_posting div.tagsinput span.tag {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 6px 10px 6px 12px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--npf-primary-soft) !important;
  color: var(--npf-primary-dark) !important;
  font-family: var(--npf-font-ui) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 18px !important;
}

body.npf-account .iscu_new_job_posting div.tagsinput span.tag a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(62, 110, 166, 0.16) !important;
  color: var(--npf-primary-dark) !important;
  font-size: 11px !important;
  font-weight: 700;
  text-decoration: none !important;
  opacity: 1;
  transition: background var(--npf-t);
}

body.npf-account .iscu_new_job_posting div.tagsinput span.tag a:hover {
  background: var(--npf-primary) !important;
  color: #fff !important;
}

body.npf-account .iscu_new_job_posting div.tagsinput input {
  flex: 1 1 90px;
  min-width: 90px;
  min-height: 30px !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  font-family: var(--npf-font-ui) !important;
  font-size: 14px !important;
}

/* ---- Selected card: the design system's own `is-active` ----
   nonprofit/css/style.css defines the active card once, and both places it is
   used (`.service-card.is-active`, `.expert-card.is-active`) agree:

       background: var(--primary-light);
       border-color: var(--primary-light);
       h3 { color: #fff }  p { color: rgba(255,255,255,.9) }

   Earlier I used a --primary-soft tint behind a blue border, which was my own
   invention rather than the system's — and a pale fill sitting behind the
   theme's dark edge is exactly what read as a double border. A filled card
   with a matching border removes that reading entirely. */

body.npf-account .iscu_pricing_type_card.iscu_active,
body.npf-account .iscu_pricing_type_card.active,
body.npf-account .iscu_pricing_type_card.selected,
body.npf-account .iscu_pricing_type_card:focus,
body.npf-account .iscu_pricing_type_card:focus-within {
  background-color: var(--npf-primary) !important;
  background-image: none !important;
  border: 2px solid var(--npf-primary) !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body.npf-account .iscu_pricing_type_card.iscu_active *,
body.npf-account .iscu_pricing_type_card.active *,
body.npf-account .iscu_pricing_type_card.selected * {
  color: rgba(255, 255, 255, 0.9) !important;
  border-color: transparent !important;
  background: transparent !important;
}

body.npf-account .iscu_pricing_type_card.iscu_active h3,
body.npf-account .iscu_pricing_type_card.active h3,
body.npf-account .iscu_pricing_type_card.selected h3,
body.npf-account .iscu_pricing_type_card.iscu_active h4,
body.npf-account .iscu_pricing_type_card.active h4,
body.npf-account .iscu_pricing_type_card.selected h4,
body.npf-account .iscu_pricing_type_card.iscu_active strong,
body.npf-account .iscu_pricing_type_card.active strong,
body.npf-account .iscu_pricing_type_card.selected strong,
body.npf-account .iscu_pricing_type_card.iscu_active i.icon,
body.npf-account .iscu_pricing_type_card.active i.icon,
body.npf-account .iscu_pricing_type_card.selected i.icon {
  color: #fff !important;
}

/* Hover on an unselected card hints at the primary colour. */
body.npf-account .iscu_pricing_type_card:not(.selected):not(.active):not(.iscu_active):hover {
  border-color: var(--npf-primary) !important;
  background-color: var(--npf-primary-soft) !important;
}

/* ---- Step 4: images + extras ---- */

/* Upload area: a soft drop zone, not a hard-bordered box. */
body.npf-account .iscu_new_job_posting .field .upload-form-wrapper,
body.npf-account .iscu_new_job_posting .uploaded-images,
body.npf-account .iscu_new_job_posting .images-wrapper,
body.npf-account .iscu_new_job_posting .field:has(> label + .plupload) > div {
  border: 1px dashed var(--npf-g200) !important;
  border-radius: 10px !important;
  background: #fcfdfe !important;
  box-shadow: none !important;
  padding: 16px !important;
  min-height: 130px;
  transition: border-color var(--npf-t), background var(--npf-t);
}

body.npf-account .iscu_new_job_posting .upload-form-wrapper:hover,
body.npf-account .iscu_new_job_posting .uploaded-images:hover {
  border-color: var(--npf-primary) !important;
  background: #f7fbff !important;
}

/* The images themselves sit flush — no frame around each thumb. */
body.npf-account .iscu_new_job_posting .uploaded-images img,
body.npf-account .iscu_new_job_posting .upload-form-wrapper img {
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(19, 24, 36, 0.08) !important;
  object-fit: cover;
}

body.npf-account .iscu_new_job_posting .uploaded-images > *,
body.npf-account .iscu_new_job_posting .upload-form-wrapper > * {
  border: 0 !important;
  box-shadow: none !important;
}

/* ---- Extras block ---- */
body.npf-account .iscu_new_job_posting .job-extra,
body.npf-account .iscu_new_job_posting .extra-wrapper,
body.npf-account .iscu_new_job_posting [class*="extra"][class*="row"],
body.npf-account .iscu_new_job_posting .ui.segment[class*="extra"] {
  position: relative;
  border: 1px solid var(--npf-line-soft) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: 18px !important;
  margin: 0 0 14px !important;
}

/* "Remove" reads as a quiet destructive action with a cross, top-right. */
body.npf-account .iscu_new_job_posting .npf-remove-extra,
body.npf-account .iscu_new_job_posting a[class*="delete-extra"],
body.npf-account .iscu_new_job_posting a[class*="remove-extra"] {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 6px 12px !important;
  border: 1px solid var(--npf-line) !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: var(--npf-g600) !important;
  font-family: var(--npf-font-body) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  text-decoration: none !important;
  transition: color var(--npf-t), border-color var(--npf-t), background var(--npf-t);
}

body.npf-account .iscu_new_job_posting .npf-remove-extra::before,
body.npf-account .iscu_new_job_posting a[class*="delete-extra"]::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
}

body.npf-account .iscu_new_job_posting .npf-remove-extra:hover,
body.npf-account .iscu_new_job_posting a[class*="delete-extra"]:hover {
  color: var(--npf-danger) !important;
  border-color: var(--npf-danger) !important;
  background: #fdf3f3 !important;
}

/* "+ Add New Extra" as a soft primary action. */
body.npf-account .iscu_new_job_posting a[class*="add-new-extra"],
body.npf-account .iscu_new_job_posting a[class*="add_extra"] {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 9px 16px !important;
  border: 1px dashed var(--npf-primary) !important;
  border-radius: 6px !important;
  background: var(--npf-primary-soft) !important;
  color: var(--npf-primary-dark) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
}

body.npf-account .iscu_new_job_posting a[class*="add-new-extra"]:hover {
  background: var(--npf-primary) !important;
  color: #fff !important;
  border-style: solid !important;
}

/* ---- Back button chevron ----
   The theme's own glyph rendered as a stray corner mark. Its content is
   cleared and the same stroke chevron used on "next" is drawn instead, so the
   pair matches. */
body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tab-controls a.left::after { content: none !important; }

body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tab-controls a.left > i,
body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tab-controls a.left > span:empty { display: none !important; }

body.npf-account .iscu_new_job_posting .post-new-job-wrapper .tab-controls a.left::before {
  content: "" !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* ---- Step 4, against the real class names ----
   The upload control is Dropzone (`#dropzone-jobimages.dropzone`) and the
   extras block is `.extra_wrapper`. My previous attempt guessed
   `.upload-form-wrapper` / `.job-extra` from a screenshot and matched nothing,
   which is why none of it applied. */

body.npf-account .iscu_new_job_posting .dropzone,
body.npf-account .iscu_new_job_posting #dropzone-jobimages {
  min-height: 132px !important;
  padding: 14px !important;
  border: 1px dashed var(--npf-g200) !important;
  border-radius: 10px !important;
  background: #fcfdfe !important;
  box-shadow: none !important;
  transition: border-color var(--npf-t), background var(--npf-t);
}

body.npf-account .iscu_new_job_posting .dropzone:hover,
body.npf-account .iscu_new_job_posting .dropzone.dz-drag-hover {
  border-color: var(--npf-primary) !important;
  background: #f7fbff !important;
}

body.npf-account .iscu_new_job_posting .dropzone .dz-default.dz-message {
  margin: 0 !important;
  font-family: var(--npf-font-ui) !important;
  font-size: 14px !important;
  color: var(--npf-g500) !important;
}

/* Thumbnails: no frame, soft lift, rounded. */
body.npf-account .iscu_new_job_posting .dropzone .dz-preview,
body.npf-account .iscu_new_job_posting .dropzone .dz-preview .dz-image {
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden;
}

body.npf-account .iscu_new_job_posting .dropzone .dz-preview img {
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(19, 24, 36, 0.10) !important;
  object-fit: cover;
}

/* ---- Extras ---- */
body.npf-account .iscu_new_job_posting .extra_wrapper,
body.npf-account .iscu_new_job_posting [class*="extra_wrap"] {
  position: relative;
  border: 1px solid var(--npf-line-soft) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: 18px !important;
  margin: 0 0 14px !important;
}

body.npf-account .iscu_new_job_posting .extra_wrapper .ui.segment {
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ---------- Order status: a chip, not a progress bar ----------

   The theme draws every order status as a full-width grey bar with the label
   in italic uppercase and the actual state encoded in a small coloured square
   floated at the right end (legend.css `.oe-status-btn` + `:after`). Two
   problems: the state is carried by a 20px square most people never connect to
   the word beside it, and the bar reads as a progress meter that never fills.

   Here the chip itself carries the colour, so the state is the thing you see
   first. The square is switched off — it was the only thing the `:after`
   drew — and the six theme classes are mapped onto the semantic palette the
   rest of the account area uses.

   Not italic: it was the theme's way of marking these as system text, and at
   11px uppercase it mostly just blurred. */

body.npf-account .oe-status-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 92px;
  height: auto !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  background: var(--npf-g100, #eceef1) !important;
  color: var(--npf-g600, #5f6c72) !important;
  font-family: var(--npf-font-body, "Inter", system-ui, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 0.02em !important;
  line-height: 1.5 !important;
  text-align: center !important;
  text-transform: capitalize !important;
  white-space: nowrap !important;
}

/* The coloured square. Its job is done by the chip now. */
body.npf-account .oe-status-btn:after {
  display: none !important;
  content: none !important;
}

/* Running, delivered, completed. */
body.npf-account .oe-status-btn.oe-green,
body.npf-account .oe-status-btn.oe-green-txt {
  background: #e6f2eb !important;
  color: #2d7454 !important;
}

/* Waiting on somebody: pending payment, a requested modification. */
body.npf-account .oe-status-btn.oe-orange {
  background: #fbf1dd !important;
  color: #9a6b16 !important;
}

/* Failed, cancelled, in dispute. */
body.npf-account .oe-status-btn.oe-red,
body.npf-account .oe-status-btn.oe-red-txt {
  background: #fbe9e8 !important;
  color: #ab3b38 !important;
}

/* Expired — over, but not anybody's fault, so it is quieter than a failure. */
body.npf-account .oe-status-btn.oe-burgundy {
  background: #f3ebef !important;
  color: #7c4257 !important;
}

/* The cell was sized for a full-width bar. */
body.npf-account .status-list-sales {
  display: flex !important;
  align-items: center !important;
}