/**
 * 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; }

/* `fitted` is Semantic's modifier for "this divider has no margins", and the
   rule above hands 22px back on both sides with an `!important`. The Payments
   tabs are built on it — `<h2>Transactions</h2>` in a `.sixteen.wide.column`,
   then a `.ui.fitted.divider`, then the table — so the tab title ended up
   floating in a band of empty space above its own underline. The modifier gets
   its meaning back; the heading loses the second gap that Semantic's grid
   padding was adding under it. Top spacing is untouched. */
body.npf-account .ui.fitted.divider { margin: 0 !important; }

body.npf-account .ui.tab.segment > .ui.grid > .column:has(> h2:only-child) {
  padding-bottom: 0 !important;
}

body.npf-account .ui.tab.segment > .ui.grid > .column > h2:only-child {
  margin-bottom: 12px !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;
}

/* `.ui.button` rides along with `.item` in every rule below: the My
   Payments tab strip isn't only ours to draw into — wpjobster-affiliate
   hooks `after_payment_type_list` to add its own "Referral Reports" control
   into this same `.ui.secondary.menu`, as a plain `<a class="ui white
   button">` rather than the theme's own `.item.force-white-btn` markup. Left
   unmatched, it fell through to Semantic's stock ~4px button radius instead
   of this strip's pill shape — the one visibly square-cornered tab among
   rounded siblings. Matching `.ui.button` here, rather than editing that
   plugin's own file, keeps the fix ours to remove if the plugin ever
   changes its markup, and covers any *other* button a future
   `after_payment_type_list` hook adds the same way. */
body.npf-account .ui.secondary.menu .item,
body.npf-account .ui.secondary.menu .ui.button {
  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,
body.npf-account .ui.secondary.menu .ui.button::before,
body.npf-account .ui.secondary.menu .ui.button::after { display: none !important; }

body.npf-account .ui.secondary.menu .item:hover,
body.npf-account .ui.secondary.menu .ui.button: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,
body.npf-account .ui.secondary.menu .ui.button:active { transform: translateY(0); }

body.npf-account .ui.secondary.menu .item.active,
body.npf-account .ui.secondary.menu .ui.button.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,
body.npf-account .ui.secondary.menu .ui.button.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,
body.npf-account .ui.secondary.menu .ui.button: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; }

/* The list sat straight on the line under the column headings: the headings
   row carries the divider on its bottom edge and the results row that follows
   is padded to nothing (MY SHOPPING, below, flattens it so it does not measure
   like a row of its own), so the first service's 60px avatar touched the rule.
   A step of space, on the container rather than on each result, so the divider
   between two services stays the tighter one. Four class names deep because
   that same MY SHOPPING rule sets `padding: 0 !important` further down the
   file — this has to outrank it, not merely follow it. */
body.npf-account .wpj-grid-table > .row.wpj-load-more-target.my-account-job-listing {
  padding-top: 12px !important;
}

/* ---------- My Services row actions ----------

   Edit / Deactivate / Delete under a service title were three different
   buttons: the theme gives Edit `.btn.green`, Delete `.btn.red` and, while a
   service is under review, swaps Deactivate for a Semantic `.ui.button.disabled`
   — which the 44px rule above then sized like a page action. So the row showed a
   tiny green chip, a full-height grey slab and a tiny red chip, none of them
   aligned to each other.

   One shape for all three, whichever class the theme happened to print: a 26px
   ghost square carrying an icon instead of a word. Three labelled pills under
   every title repeated the same three words down the whole list and took more
   room than the title they belonged to; the icons say the same thing in a
   quarter of the width, with the word itself kept for the hover tooltip and
   for screen readers, which still see the theme's text node. Only the colour
   distinguishes them, and only Delete carries one, because it is the only
   action in the row that cannot be undone. */

body.npf-account ul.job-edit-deac-delete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0 !important;
  padding: 0;
}

body.npf-account ul.job-edit-deac-delete li { display: flex; }

body.npf-account ul.job-edit-deac-delete li > a,
body.npf-account .wpj-page-content ul.job-edit-deac-delete li > a.ui.button {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  margin: 0 !important;
  /* The label is still in the markup — it is what the tooltip and the
     accessibility tree read. It just does not draw. */
  font-size: 0 !important;
  line-height: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
  border-radius: 8px !important;
  border: 1.5px solid var(--npf-line) !important;
  background: #fff !important;
  color: var(--npf-g600) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transition: background var(--npf-t), color var(--npf-t), border-color var(--npf-t);
}

/* The icon. One masked box per button, tinted with `currentColor`, so Delete's
   red and every hover state come along without a second set of images. */
body.npf-account ul.job-edit-deac-delete li > a:before {
  content: "";
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: var(--npf-act-icon) center / 13px 13px no-repeat;
  mask: var(--npf-act-icon) center / 13px 13px no-repeat;
}

body.npf-account ul.job-edit-deac-delete li > a[href*="jb_action=edit_job"] {
  --npf-act-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}

body.npf-account ul.job-edit-deac-delete li > a.open-deactivate-job {
  --npf-act-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.36 6.64a9 9 0 1 1-12.72 0'/%3E%3Cpath d='M12 2v10'/%3E%3C/svg%3E");
}

body.npf-account ul.job-edit-deac-delete li > a.open-activate-job {
  --npf-act-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4l13 8-13 8V4Z'/%3E%3C/svg%3E");
}

body.npf-account ul.job-edit-deac-delete li > a.open-delete-job {
  --npf-act-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
}

body.npf-account ul.job-edit-deac-delete li > a.feature {
  --npf-act-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l2.9 5.9 6.6.9-4.8 4.6 1.2 6.6-5.9-3.1-5.9 3.1 1.2-6.6L2.5 9.3l6.6-.9L12 2.5Z'/%3E%3C/svg%3E");
}

/* The word the button lost, back on hover. `attr(title)` is not an option —
   the theme prints no title — so each label is named where its icon is. */
body.npf-account ul.job-edit-deac-delete li > a:after {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--npf-ink, #131824);
  color: #fff;
  font-family: var(--npf-font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--npf-t);
  z-index: 5;
}

body.npf-account ul.job-edit-deac-delete li > a:hover:after {
  opacity: 1;
  visibility: visible;
}

body.npf-account ul.job-edit-deac-delete li > a[href*="jb_action=edit_job"]:after { content: "Edit"; }
body.npf-account ul.job-edit-deac-delete li > a.open-deactivate-job:after { content: "Deactivate"; }
body.npf-account ul.job-edit-deac-delete li > a.open-activate-job:after { content: "Activate"; }
body.npf-account ul.job-edit-deac-delete li > a.open-delete-job:after { content: "Delete"; }
body.npf-account ul.job-edit-deac-delete li > a.feature:after { content: "Feature"; }

body.npf-account ul.job-edit-deac-delete li > a:hover,
body.npf-account .wpj-page-content ul.job-edit-deac-delete li > a.ui.button:hover {
  border-color: var(--npf-primary) !important;
  color: var(--npf-primary) !important;
  background: #fff !important;
}

/* Delete is the one action that does not come back. */
body.npf-account ul.job-edit-deac-delete li > a.open-delete-job {
  color: var(--npf-danger) !important;
  border-color: #f3cfcf !important;
}

body.npf-account ul.job-edit-deac-delete li > a.open-delete-job:hover {
  color: #fff !important;
  background: var(--npf-danger) !important;
  border-color: var(--npf-danger) !important;
}

/* Under review: the theme disables Deactivate. It stays the same pill, greyed,
   and stops answering the pointer rather than growing into a slab. */
body.npf-account .wpj-page-content ul.job-edit-deac-delete li > a.disabled,
body.npf-account .wpj-page-content ul.job-edit-deac-delete li > a.ui.button.disabled {
  color: var(--npf-g600) !important;
  background: var(--npf-auth-bed, #f7f9fc) !important;
  border-color: var(--npf-line) !important;
  opacity: 0.65 !important;
  pointer-events: none;
  cursor: default;
}

/* ---------- 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; }

/* The Stripe Connect panel (indiasan-payments' class-ispm-theme-integration.php)
   carries `.ui.info.message` too, so the empty-state centering above reaches
   it by accident — the heading and description were reading centered instead
   of left, the one message on this page that is a real content block with a
   button, not a placeholder. Its own icon inherits the button's `color: #fff`
   from the generic button rule below, but is pinned explicit here too as a
   safety net against whatever forced it invisible against the matching blue
   background. */
body.npf-account .ui.info.message:has(#stripe-connect-btn) {
  text-align: left !important;
}

body.npf-account .ui.info.message:has(#stripe-connect-btn) strong,
body.npf-account .ui.info.message:has(#stripe-connect-btn) div {
  text-align: left !important;
}

body.npf-account #stripe-connect-btn,
body.npf-account #stripe-connect-btn .icon {
  color: #fff !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;
}

/* ---------- Vacation Mode, specifically ----------

   The one modal on the site whose footer is a matched pair — Activate and
   Cancel, or Deactivate and Cancel — rather than a primary action with a way
   out beside it. Centred under the form they confirm; every other modal keeps
   the right-aligned footer above.

   `overflow` because the dialog holds two Semantic calendars, and those open
   as popups that reach past the modal's own bottom edge. The rounded corners
   the `hidden` above was clipping are drawn by the header and footer's own
   backgrounds anyway, so nothing is lost by letting this one dialog spill.
   Which direction they open is npf-vacation.js — from here they can only be
   allowed to be visible, not repositioned. */
body.npf-account #vacation_mode_modal_ui { overflow: visible !important; }

body.npf-account #vacation_mode_modal_ui > .actions {
  justify-content: center !important;
}

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;
}

/* My Jobs specifically — `wpj_after_post_results` prints "Status Messages
   Legend" (`.status-message-legend`) as the last child of this same
   `.wpj-grid-table`, after the header row and every result, where it read as
   stranded below the table. Scoped with :has() to only a grid that actually
   contains the legend, so My Favorites' identical `.wpj-grid-table` (no legend
   link) is untouched without needing to know what else tells the pages apart.

   On the tab row, at the far right end of it.

   It is a reference link, not one of the page's actions, so it belongs beside
   the filter tabs rather than in the table: on its own line above the headings
   it read as a fourth thing in the SERVICE DETAILS column, and it was the
   reason the list started so far below the tabs.

   legend.css pins it `position: absolute; right: -15px; bottom: -27px`, so it
   is out of flow already — kept that way, just measured from this table
   instead of hung off its bottom corner. The offset is the strip above:
   `.ui.secondary.menu` sits 22px clear of the table (its margin-bottom) and
   its pills are 40px tall, so 31px puts the link's baseline area on the pills'
   centre line. Out of flow it also takes no height here, which is what lets
   the headings sit a normal 22px under the tabs.

   Same for the four screens that print it — My Jobs, My Sales, My Shopping,
   My Requests, all through `wpj_after_post_results` — since all four put this
   table directly under that same tab strip. */
body.npf-account .wpj-grid-table:has(.status-message-legend) {
  position: relative;
}

body.npf-account .wpj-grid-table:has(.status-message-legend) .status-message-legend {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: auto !important;
  bottom: calc(100% + 31px) !important;
  margin: 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; }

  /* The tab strip becomes a horizontal scroller here, so there is no free room
     at its right end to hang the legend link in. Back into the flow, above the
     first result and still right-aligned. */
  body.npf-account .wpj-grid-table:has(.status-message-legend) {
    display: flex !important;
    flex-direction: column !important;
  }

  body.npf-account .wpj-grid-table:has(.status-message-legend) .status-message-legend {
    position: static !important;
    order: -1;
    align-self: flex-end;
    margin: 0 0 10px !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 is styled properly further down (a faint tinted
   circle at rest, solid primary only on :hover — see
   "Tag "remove" crosses on the category pickers" below). A rule used to sit
   here forcing `background: var(--npf-primary)` (solid) permanently, with
   the extra `.ui.form.wpj-grey-form` class making it win over the intended
   one — a solid medium-blue circle behind medium-blue "x" text, so it was
   never actually visible. */

/* 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;
  /* Without this, the page-wide `.ui.secondary.button:hover` rule's
     `color: var(--npf-primary)` (medium blue) wins the tie on this specific
     property against a background that just got darker, not lighter — blue
     text on dark blue, the low-contrast hover the user saw on "Add-ons". */
  color: #fff !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;
  /* The theme's own `a.left:before` sets `background: url(prev-tab-arrow.png)`
     — a shorthand, so it still supplies `background-image` even though
     nothing here overrode it before. That raster sprite, tiled inside this
     16px box and clipped through the chevron mask below, is the stray
     "corner mark" fragment that was showing instead of a clean chevron. */
  background-image: none !important;
  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;
}

/* The theme's own wrapper (`#delete_extra_wrapper`) sets `bottom`/`z-index`
   with no `position` to make them apply, so it just fell into normal block
   flow — clear of the Price / Max Days to Deliver / Multiple row above it,
   but with no spacing of its own, reading as crowded against or overlapping
   whatever follows. `position: static` is explicit here only to override any
   inline/theme `position` that might otherwise revive that dead bottom/
   z-index pairing; the actual fix is the margin. */
body.npf-account .iscu_new_job_posting #delete_extra_wrapper,
body.npf-account .iscu_new_job_posting .delete_extra_wrapper {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 12px 0 0 !important;
  text-align: right !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;
}

/* ---------- Messages: a conversation that reads like one ----------

   The thread rendered every message identically — avatar, name, text, full
   width, one under the other — so who said what could only be worked out by
   reading the names. The theme already knows: `wpjobster_pm_loop()` puts
   `.pm-sent` on the rows the viewer wrote, and nothing anywhere styled that
   class. So no markup changes, and no JavaScript — the rows are laid out as
   the two sides of a conversation, the way every messenger does it: mine on
   the right in the brand colour, theirs on the left in white.

   Scoped to `.wpj-messenger`, which is the thread screen's own wrapper, so
   the inbox list beside it (`.link-to-pm` rows, same `.pm-holder` class)
   keeps its list layout. */

body.npf-account .wpj-messenger .thread-content .pm-holder,
body.npf-account .wpj-messenger .thread-content .ui.segments > .segment.pm-holder {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.npf-account .wpj-messenger .thread-content .pm-holder .padding-cnt {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 8px 4px !important;
}

/* Mine: bubble on the right, avatar after it. */
body.npf-account .wpj-messenger .thread-content .pm-holder.pm-sent .padding-cnt {
  flex-direction: row-reverse;
}

body.npf-account .wpj-messenger .thread-content .pm-avatar {
  float: none !important;
  flex: none;
  margin: 0 !important;
}

body.npf-account .wpj-messenger .thread-content .pm-avatar img {
  width: 36px;
  height: 36px;
  object-fit: cover;
}

/* The bubble. `.pm-content` is the theme's own text column — it is given a
   width of its own here rather than the padding it used to reserve for the
   avatar it no longer sits beside. */
body.npf-account .wpj-messenger .thread-content .pm-content {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(72%, 560px);
  padding: 10px 14px !important;
  background: #fff;
  border: 1px solid var(--npf-line);
  border-radius: 16px 16px 16px 6px;
}

body.npf-account .wpj-messenger .thread-content .pm-sent .pm-content {
  background: var(--npf-primary);
  border-color: var(--npf-primary);
  border-radius: 16px 16px 6px 16px;
  color: #fff;
}

/* Everything inside my own bubble sits on the primary fill, including the
   theme's own muted greys and any link in the message. */
body.npf-account .wpj-messenger .thread-content .pm-sent .pm-content h4,
body.npf-account .wpj-messenger .thread-content .pm-sent .pm-content .pm-date,
body.npf-account .wpj-messenger .thread-content .pm-sent .pm-content-message,
body.npf-account .wpj-messenger .thread-content .pm-sent .pm-content-message a,
body.npf-account .wpj-messenger .thread-content .pm-sent .pm-settings .ui.dropdown > .icon {
  color: #fff !important;
}

body.npf-account .wpj-messenger .thread-content .pm-sent .pm-content-message a {
  text-decoration: underline;
}

/* Name and time above the text, small and quiet; the cog stays where the
   theme puts it, at the end of that row. */
body.npf-account .wpj-messenger .thread-content .pm-content-header {
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px !important;
}

body.npf-account .wpj-messenger .thread-content .pm-content-header h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
}

body.npf-account .wpj-messenger .thread-content .pm-date {
  margin: 0 !important;
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
}

/* The theme reserved room on the right for the settings cog, which pushed
   every message off-centre inside its bubble. The cog is in the header row. */
body.npf-account .wpj-messenger .thread-content .pm-content-message {
  padding-right: 0 !important;
  font-size: 14px;
  line-height: 21px;
  word-break: break-word;
}

/* Attachments keep their own block, inside the bubble. */
body.npf-account .wpj-messenger .thread-content .pm-content-message .ui.segment {
  margin: 8px 0 0;
}

/* Mobile: the bubbles get the width back that the avatars were taking. */
@media (max-width: 600px) {
  body.npf-account .wpj-messenger .thread-content .pm-content { max-width: 82%; }
  body.npf-account .wpj-messenger .thread-content .pm-avatar img { width: 30px; height: 30px; }
}

/* ---------- A custom offer inside the thread ----------

   `wpjobster_pm_loop()` prints a custom-offer message as four siblings inside
   `.padding-cnt`, not as one block: the "Custom Price Offer Sent/Received"
   title, the avatar, the message bubble, then the price/duration table and the
   accept/decline buttons. The rule above turned `.padding-cnt` into a flex row
   so the avatar could sit beside the bubble — which laid all four of those out
   as columns of a single row, so the title ended up left of the avatar and the
   offer's table and buttons ended up squeezed into a strip to the right of the
   bubble.

   Inside that strip the buttons then collided. The theme floats
   `.pm-custom-offer-actions .btn` right and leaves the `<form>` wrapping Accept
   in normal flow, so that form collapsed to zero height around its floated
   button and the Decline link drew over the top of it — one button printed
   across the other, which is the reported break.

   This is in two layers on purpose:

     1. A base layer that only needs flex-wrap. The row wraps, the title and the
        offer each claim a full line of it, and inside the offer the floats are
        replaced by a flex row that cannot overlap. Correct, but the card runs
        the full width of the thread.

     2. A grid layer behind `@supports selector(:has(*))` that places the four
        parts explicitly and lets the card size to its content up to a cap, so
        it reads as a card in the conversation rather than a full-width band.

   The split is what makes this safe: the enhancement is scoped by `:has()` to
   rows that actually carry an offer, so a plain message keeps the flex bubble
   layout untouched, and a browser without `:has()` still gets layer 1 — a
   correct, non-overlapping card — rather than the break.
   ------------------------------------------------------------------ */

body.npf-account .wpj-messenger .thread-content .pm-holder .padding-cnt {
  flex-wrap: wrap;
}

/* The theme marks an offer's state with a 0.5em x 4.5em bar positioned
   absolutely at the top-left of the row (`custom-offer.css`). That was a
   full-width row's left edge; against a card it is a stray mark floating in
   the gutter beside the avatar. The same information is carried by the card's
   own left border below, in the same four colours. */
body.npf-account .wpj-messenger .thread-content .pm-request-holder .padding-cnt::before,
body.npf-account .wpj-messenger .thread-content .pm-offer-holder .padding-cnt::before {
  content: none !important;
}

/* The title, on its own line above the bubble. 46px is the avatar's 36px plus
   the row's 10px gap, so it starts where the bubble starts. */
body.npf-account .wpj-messenger .thread-content .pm-custom-offer-offer-header,
body.npf-account .wpj-messenger .thread-content .pm-custom-offer-request-header {
  flex: 1 1 100%;
  min-width: 0;
  margin: 0 0 6px 46px !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: var(--npf-font-ui);
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  color: var(--npf-g600);
}

body.npf-account .wpj-messenger .thread-content .pm-sent .pm-custom-offer-offer-header,
body.npf-account .wpj-messenger .thread-content .pm-sent .pm-custom-offer-request-header {
  margin: 0 46px 6px 0 !important;
  text-align: right;
}

/* The offer itself: a card under the bubble, on the same 46px gutter. */
body.npf-account .wpj-messenger .thread-content .pm-custom-offer-bottom {
  flex: 1 1 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 10px 0 0 46px !important;
  padding: 14px 16px !important;
  background: #fff;
  border: 1px solid var(--npf-line) !important;
  border-left: 3px solid var(--npf-g300) !important;
  border-radius: 14px;
}

body.npf-account .wpj-messenger .thread-content .pm-sent .pm-custom-offer-bottom {
  margin: 10px 46px 0 0 !important;
}

/* State, in the theme's own four classes — the bar's colours, moved onto an
   edge of the card that is actually next to the offer it describes. */
body.npf-account .wpj-messenger .thread-content .pm-offer-blue .pm-custom-offer-bottom {
  border-left-color: var(--npf-primary) !important;
}
body.npf-account .wpj-messenger .thread-content .pm-offer-green .pm-custom-offer-bottom {
  border-left-color: var(--npf-success) !important;
}
body.npf-account .wpj-messenger .thread-content .pm-offer-red .pm-custom-offer-bottom {
  border-left-color: var(--npf-danger) !important;
}
body.npf-account .wpj-messenger .thread-content .pm-offer-gray .pm-custom-offer-bottom {
  border-left-color: var(--npf-g300) !important;
}

/* The theme floats the table and the buttons side by side at 35% / 65% of a
   full-width row. Inside a card that is two columns too many. */
body.npf-account .wpj-messenger .thread-content .pm-custom-offer-meta,
body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions {
  float: none !important;
  width: 100% !important;
  text-align: left !important;
}

/* `border-collapse` and the explicit `border: 0`: the theme's global table
   styling draws a rule under every cell, which on a two-row table reads as an
   underline running out from the price to the far edge of the card. */
body.npf-account .wpj-messenger .thread-content .pm-custom-offer-meta table {
  float: none !important;
  width: auto;
  margin: 0;
  border: 0 !important;
  border-collapse: collapse !important;
  background: none !important;
}

body.npf-account .wpj-messenger .thread-content .pm-custom-offer-meta td {
  padding: 1px 0 !important;
  border: 0 !important;
  background: none !important;
  font-family: var(--npf-font-ui);
  font-size: 12.5px;
  line-height: 19px;
  color: var(--npf-g900);
}

/* Label column: named, quiet, and only as wide as its longest word. */
body.npf-account .wpj-messenger .thread-content .pm-custom-offer-meta td:first-child {
  width: 1%;
  padding-right: 18px !important;
  font-weight: 500;
  white-space: nowrap;
  color: var(--npf-g500);
}

body.npf-account .wpj-messenger .thread-content .pm-custom-offer-meta td + td {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* The action row. This is what stops the collision: no floats, one flex line,
   and the `<form>` and `<span>` the theme wraps each button in become flex
   items rather than a collapsed block and an inline box drawn over it.
   `stretch` so a two-line Accept and a one-line Decline are the same height. */
/* Only when there is a table above it. A custom-offer *request* renders the
   actions alone in the card — `wpjobster_pm_loop()` prints no
   `.pm-custom-offer-meta` for that branch — and an unconditional margin was
   padding the top of a card whose first child is the button. */
body.npf-account .wpj-messenger .thread-content .pm-custom-offer-meta + .pm-custom-offer-actions {
  margin-top: 10px;
}

body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions .btn-margin-bottom-helper {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin: 0 !important;
}

body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions .btn-margin-bottom-helper > form,
body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions .btn-margin-bottom-helper > span {
  display: flex;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}

body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions .btn,
body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions a,
body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions button {
  float: none !important;
  margin: 0 !important;
}

/* One button treatment for whichever set the row is showing: Accept + Decline
   for the buyer, Withdraw alone for the seller, Create Custom Offer on a
   request. 44px is the minimum comfortable touch target. */
/* Sized against the message beside them, not as page buttons. At 14px/44px
   these two read louder than the offer they act on and louder than the
   conversation around them — the card is a line item in a thread, not a
   checkout panel. */
body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions .ui.button {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 34px !important;
  max-width: 100%;
  min-width: 0;
  padding: 6px 12px !important;
  border-radius: var(--npf-radius-btn) !important;
  font-family: var(--npf-font-ui) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-align: center;
  box-shadow: none !important;
  overflow-wrap: anywhere;
  transition: background var(--npf-t), color var(--npf-t), border-color var(--npf-t);
}

body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions .ui.positive.button {
  background: var(--npf-success) !important;
  color: #fff !important;
  border: 0 !important;
}

body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions .ui.positive.button:hover {
  background: #1b8449 !important;
}

/* The price rides inside the Accept button as a `<strong class="total">`, after
   a bare text node. Both become flex items of the column above, so the amount
   sits on its own line under the label instead of being laid out beside it and
   running out of the button — which is what put "500.00 USD" across the label.
   A five- or six-figure amount now grows the button downward, not sideways. */
body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions .ui.positive.button .total {
  display: block;
  max-width: 100%;
  color: #fff !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  opacity: 0.92;
  overflow-wrap: anywhere;
}

body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions .decline_custom_offer,
body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions .withdraw_custom_offer {
  background: #fff !important;
  color: var(--npf-g600) !important;
  border: 1px solid var(--npf-line) !important;
}

body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions .decline_custom_offer:hover,
body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions .withdraw_custom_offer:hover {
  background: #fff !important;
  color: var(--npf-danger) !important;
  border-color: var(--npf-danger) !important;
}

/* In flight. `custom-offer.js` adds Semantic's `loading` class to whichever
   button was pressed while the request is out, and the browser disables a
   submit button it has already accepted; neither had any styling here, so the
   card looked untouched for the second or two before the thread reloads and a
   second click was inviting. Sized identically to the resting state, so
   nothing in the card moves when it flips. */
body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions .ui.button.loading,
body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions .ui.button.disabled,
body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions .ui.button[disabled] {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* Once the offer has been answered the row is a sentence, not a button. The
   theme sets it in 40px-tall italics to sit level with the buttons it replaced,
   which is a line and a half of dead space in a card this size.

   `.btn-margin-bottom-helper > span` rather than every descendant span: this
   same container also holds the hidden Send Quote modal
   (`wpj_custom_offer_modal_init_content()` prints it as a sibling of the
   button), and although Semantic detaches that to `<body>` the moment it is
   first opened, its markup should not be inheriting a chat card's type on the
   way there. */
body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions .btn-margin-bottom-helper > span {
  line-height: 20px !important;
  font-style: normal !important;
  font-family: var(--npf-font-ui);
  font-size: 13px;
}

body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions .offer-green {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: var(--npf-success) !important;
}

body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions .offer-red {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  color: var(--npf-danger) !important;
}

/* ---------- Layer 2: explicit placement ----------

   Scoped by `:has()` to rows that carry an offer, so a plain message is never
   touched by any of this and keeps the flex bubble layout above. The `@supports`
   guard is not decoration: without it, a browser that does not understand
   `:has()` would drop the whole block anyway, but with it the intent is legible
   and layer 1 is visibly the fallback rather than dead code.

   Grid rather than more flex because the four parts have fixed positions that
   should not depend on how wide any of them happens to be — which is exactly
   what went wrong when they were flex columns. */
@supports selector(:has(*)) {
  body.npf-account .wpj-messenger .thread-content .pm-holder:has(.pm-custom-offer-bottom) .padding-cnt {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    column-gap: 10px;
    row-gap: 0;
  }

  /* Every row is pinned, none auto-placed. Auto-placement is sparse: once the
     avatar has been put in the second column, the cursor has passed the first,
     and a bubble asking for column 1 cannot go backwards — it starts a new row
     instead, which is what left the avatar stranded on a line of its own above
     my own messages. Naming the row as well as the column is what makes the
     placement independent of source order, which is the whole point of moving
     this off flex. */
  /* Column 2, not the full width: the title then starts exactly where the
     bubble and the card start, because it is in the same track they are,
     rather than at a hand-measured indent. The avatar column is not 36px — the
     theme's `.round-avatar` adds a border, so the real gutter is 50px — and
     the base layer's 46px is a close-enough approximation only because nothing
     there can ask the grid what the number is. */
  body.npf-account .wpj-messenger .thread-content .pm-holder:has(.pm-custom-offer-bottom) .pm-custom-offer-offer-header,
  body.npf-account .wpj-messenger .thread-content .pm-holder:has(.pm-custom-offer-bottom) .pm-custom-offer-request-header {
    grid-row: 1;
    grid-column: 2;
    margin-left: 0 !important;
  }

  body.npf-account .wpj-messenger .thread-content .pm-holder:has(.pm-custom-offer-bottom) .pm-avatar {
    grid-row: 2;
    grid-column: 1;
  }

  body.npf-account .wpj-messenger .thread-content .pm-holder:has(.pm-custom-offer-bottom) .pm-content {
    grid-row: 2;
    grid-column: 2;
    justify-self: start;
  }

  /* `justify-self` rather than a width: the card then sizes to its own content
     — a lone Withdraw button does not stretch into a 460px band — and only
     stops growing at the cap, where a long note or a wide price table would
     otherwise run the width of the thread. */
  body.npf-account .wpj-messenger .thread-content .pm-holder:has(.pm-custom-offer-bottom) .pm-custom-offer-bottom {
    grid-row: 3;
    grid-column: 2;
    justify-self: start;
    max-width: min(100%, 460px);
    margin-left: 0 !important;
  }

  /* Mine: the same three rows mirrored, avatar on the right. */
  body.npf-account .wpj-messenger .thread-content .pm-sent:has(.pm-custom-offer-bottom) .padding-cnt {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.npf-account .wpj-messenger .thread-content .pm-sent:has(.pm-custom-offer-bottom) .pm-custom-offer-offer-header,
  body.npf-account .wpj-messenger .thread-content .pm-sent:has(.pm-custom-offer-bottom) .pm-custom-offer-request-header {
    grid-column: 1;
    margin: 0 0 6px !important;
  }

  body.npf-account .wpj-messenger .thread-content .pm-sent:has(.pm-custom-offer-bottom) .pm-avatar {
    grid-row: 2;
    grid-column: 2;
  }

  body.npf-account .wpj-messenger .thread-content .pm-sent:has(.pm-custom-offer-bottom) .pm-content {
    grid-row: 2;
    grid-column: 1;
    justify-self: end;
  }

  body.npf-account .wpj-messenger .thread-content .pm-sent:has(.pm-custom-offer-bottom) .pm-custom-offer-bottom {
    grid-row: 3;
    grid-column: 1;
    justify-self: end;
    margin-right: 0 !important;
  }
}

/* ---------- Attachments in a message ----------

   `wpj_list_attachments()` prints these inside the bubble. The theme colours
   the whole block `#cccdce` — a grey chosen for its own dark row, and all but
   invisible both on the white bubble and on the primary fill of my own. The
   file name is already cut to 20 characters server-side, but a name with no
   break opportunity still has to be stopped from widening the bubble. */
body.npf-account .wpj-messenger .thread-content .pm-attachments {
  max-width: 100%;
  margin-top: 8px;
  color: inherit;
}

body.npf-account .wpj-messenger .thread-content .pm-attachments-title {
  margin: 0 0 4px !important;
  font-family: var(--npf-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 16px;
  color: var(--npf-g500);
}

body.npf-account .wpj-messenger .thread-content .pm-attachments .div_div2 {
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 2px 0;
}

body.npf-account .wpj-messenger .thread-content .pm-attachment-rtl {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

body.npf-account .wpj-messenger .thread-content .pm-attachments a.download-req {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 20px;
  color: var(--npf-primary);
}

body.npf-account .wpj-messenger .thread-content .pm-filesize {
  flex: none;
  font-size: 12px;
  line-height: 20px;
  color: var(--npf-g500);
}

/* Inside my own bubble everything sits on the primary fill. */
body.npf-account .wpj-messenger .thread-content .pm-sent .pm-attachments-title,
body.npf-account .wpj-messenger .thread-content .pm-sent .pm-attachments a.download-req,
body.npf-account .wpj-messenger .thread-content .pm-sent .pm-filesize {
  color: #fff !important;
}

body.npf-account .wpj-messenger .thread-content .pm-sent .pm-attachments a.download-req {
  text-decoration: underline;
}

/* ---------- Narrow ----------
   Same breakpoint as the bubbles above. The avatar gutter the card is indented
   by is most of a phone's width, so it goes; the buttons become full-width
   rows, which is also what keeps a two-line Accept from sitting beside a
   one-line Decline at half width each. */
@media (max-width: 600px) {
  body.npf-account .wpj-messenger .thread-content .pm-custom-offer-offer-header,
  body.npf-account .wpj-messenger .thread-content .pm-custom-offer-request-header,
  body.npf-account .wpj-messenger .thread-content .pm-sent .pm-custom-offer-offer-header,
  body.npf-account .wpj-messenger .thread-content .pm-sent .pm-custom-offer-request-header {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.npf-account .wpj-messenger .thread-content .pm-custom-offer-bottom,
  body.npf-account .wpj-messenger .thread-content .pm-sent .pm-custom-offer-bottom {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 12px 14px !important;
  }

  body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions .btn-margin-bottom-helper > form,
  body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions .btn-margin-bottom-helper > span,
  body.npf-account .wpj-messenger .thread-content .pm-custom-offer-actions .ui.button {
    width: 100%;
  }
}

@supports selector(:has(*)) {
  @media (max-width: 600px) {
    body.npf-account .wpj-messenger .thread-content .pm-holder:has(.pm-custom-offer-bottom) .pm-custom-offer-offer-header,
    body.npf-account .wpj-messenger .thread-content .pm-holder:has(.pm-custom-offer-bottom) .pm-custom-offer-request-header,
    body.npf-account .wpj-messenger .thread-content .pm-sent:has(.pm-custom-offer-bottom) .pm-custom-offer-offer-header,
    body.npf-account .wpj-messenger .thread-content .pm-sent:has(.pm-custom-offer-bottom) .pm-custom-offer-request-header {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    /* The cap comes off and the card fills its column — but it stays in the
       column, rather than spanning out to the row's edge. Letting it span
       would put its left edge a whole avatar to the left of the title and the
       bubble it belongs to; on a phone that indent is only ~44px, and three
       edges agreeing reads better than one card reaching wider than the
       conversation it is part of. */
    body.npf-account .wpj-messenger .thread-content .pm-holder:has(.pm-custom-offer-bottom) .pm-custom-offer-bottom {
      justify-self: stretch;
      max-width: 100%;
    }
  }
}

/* ============================================================
   MESSENGER CHROME — everything in the thread that is not a bubble

   The block above dressed the messages. Everything around them was still the
   theme's: the conversation list, the thread header and its actions, the
   "Load Older Messages" control, the Zoom invitation card, the composer and
   its four icon controls, and the two empty states. None of those had a single
   rule here, which is why the screen changed character the moment any feature
   other than a plain message appeared in it.

   The pass is deliberately uniform rather than per-feature: one row height,
   one control height, one icon size, one radius, one pair of greys. A feature
   that arrives later — another action in the cog menu, another kind of card in
   a bubble — lands on those defaults instead of on nothing.

   It is also a compaction pass. The theme spends 3.5rem on the thread header,
   1em+ per message row and ~90px on the composer; a conversation that is
   mostly one-line messages showed six of them in a viewport. Everything below
   is tighter, and the numbers are chosen together so the rhythm holds.
   ============================================================ */

/* ---------- Shell ---------- */

body.npf-account .wpj-messenger {
  margin: 0 !important;
  background: #fff !important;
  border: 1px solid var(--npf-line-soft) !important;
  border-radius: var(--npf-radius-panel) !important;
  box-shadow: var(--npf-shadow-card) !important;
}

body.npf-account .wpj-messenger .thread-list-body {
  border-right: 1px solid var(--npf-line-soft) !important;
}

/* ---------- Conversation list ---------- */

/* The header element is taller than the segment inside it and paints a tint of
   its own, so a band of that tint showed under the white header as a stray
   bar above the first conversation. The colour and the rule both belong to the
   header itself. */
body.npf-account .wpj-messenger .thread-list-header {
  padding: 0 !important;
  background: #fff !important;
  border-bottom: 1px solid var(--npf-line-soft) !important;
}

/* The list header carries an `<h1>`, which inherits the page-title scale and
   was setting the word "Messages" at the size of the page heading itself. */
body.npf-account .wpj-messenger .thread-list-header > .ui.segment {
  margin: 0 !important;
  padding: 12px 14px !important;
  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.npf-account .wpj-messenger .thread-list-header h1 {
  margin: 0 !important;
  font-family: var(--npf-font-head) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: var(--npf-ink) !important;
}

/* Inbox / Archived. Two icon buttons, so they read as a pair of toggles
   rather than two filled primary blocks. */
body.npf-account .wpj-messenger .pm-nav-btn.ui.button {
  width: 32px !important;
  height: 32px !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 0 0 6px !important;
  padding: 0 !important;
  background: var(--npf-auth-bed) !important;
  color: var(--npf-g600) !important;
  border: 1px solid var(--npf-line-soft) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

body.npf-account .wpj-messenger .pm-nav-btn.ui.button:hover {
  background: var(--npf-primary-soft) !important;
  color: var(--npf-primary) !important;
  border-color: var(--npf-primary-soft) !important;
}

body.npf-account .wpj-messenger .pm-nav-btn.ui.button > .icon {
  margin: 0 !important;
  font-size: 14px !important;
}

/* One conversation. `.link-to-pm` is the whole row's anchor, so it is the
   flex row — not `.pm-holder`, which the theme also uses for thread messages
   and which this file styles very differently over in `.thread-content`. */
body.npf-account .wpj-messenger .thread-list-content .ui.segments,
body.npf-account .wpj-messenger .thread-list-content .pm-holder {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  /* `.ui.segments` keeps a rem of padding of its own, which showed as a gap
     between the header's rule and the first conversation. */
  padding: 0 !important;
  background: transparent !important;
}

body.npf-account .wpj-messenger .thread-list-content .link-to-pm {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--npf-line-soft);
  transition: background var(--npf-t);
}

body.npf-account .wpj-messenger .thread-list-content .link-to-pm:hover {
  background: var(--npf-auth-bed);
}

body.npf-account .wpj-messenger .thread-list-content .pm-holder.active .link-to-pm {
  background: var(--npf-primary-soft);
}

body.npf-account .wpj-messenger .thread-list-content .pm-avatar {
  flex: none !important;
  float: none !important;
  margin: 0 !important;
  width: 38px;
  height: 38px;
}

body.npf-account .wpj-messenger .thread-list-content .pm-avatar img {
  width: 38px !important;
  height: 38px !important;
  object-fit: cover;
  border-radius: 50%;
}

body.npf-account .wpj-messenger .thread-list-content .pm-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
}

/* Name and time on one line, the name taking the slack and the time refusing
   to wrap — the theme let the time drop under a long name and the row grew by
   a line for every account with a long display name. */
body.npf-account .wpj-messenger .thread-list-content .pm-content .flex-parent {
  display: flex !important;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

body.npf-account .wpj-messenger .thread-list-content .pm-content .flex-parent.p5b {
  margin-bottom: 2px !important;
  padding-bottom: 0 !important;
}

body.npf-account .wpj-messenger .thread-list-content .pm-user {
  flex: 1 1 auto;
  min-width: 0;
}

body.npf-account .wpj-messenger .thread-list-content .pm-user h4 {
  margin: 0 !important;
  font-family: var(--npf-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  color: var(--npf-ink) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.npf-account .wpj-messenger .thread-list-content .pm-date {
  flex: none;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 18px !important;
  white-space: nowrap;
  color: var(--npf-g500) !important;
}

/* `min-width: 0` on the preview's own flex cell. `.flex-both` is `flex: 1 1
   auto` with the default `min-width: auto`, so the cell could not shrink below
   the nowrap text inside it — the row grew to the width of the longest message
   in the inbox and pushed a horizontal scrollbar into the list. */
body.npf-account .wpj-messenger .thread-list-content .pm-content .flex-both,
body.npf-account .wpj-messenger .thread-list-content .pm-content .overflow-ellipsis {
  min-width: 0;
  overflow: hidden;
}

/* The preview line, and the tag glyph that precedes it on a conversation
   carrying an offer. A row, because the glyph is a sibling of the text rather
   than part of it: as two blocks the glyph took a line of its own and every
   offer conversation in the list stood a line taller than the rest. */
body.npf-account .wpj-messenger .thread-list-content .pm-content .flex-both {
  display: flex !important;
  align-items: center;
  gap: 5px;
}

body.npf-account .wpj-messenger .thread-list-content .js-tpm-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--npf-g600) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.npf-account .wpj-messenger .thread-list-content .flex-both > .tags.icon {
  flex: none;
  margin: 0 !important;
  font-size: 12px !important;
  color: var(--npf-primary) !important;
}

/* Unread. The theme draws a 0.5em bar down the left of the row; a dot at the
   end of the name row says the same thing without moving the text. */
body.npf-account .wpj-messenger .thread-list-content .pm-holder.pm-unread-message:not(.active) {
  border-left: 0 !important;
  padding-left: 0 !important;
}

body.npf-account .wpj-messenger .thread-list-content .pm-unread-message .pm-user h4 {
  font-weight: 700 !important;
}

body.npf-account .wpj-messenger .thread-list-content .pm-unread-message .js-tpm-text {
  color: var(--npf-ink) !important;
  font-weight: 500;
}

body.npf-account .wpj-messenger .thread-list-content .pm-unread-message .pm-date::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--npf-primary);
  vertical-align: middle;
}

/* ---------- Thread header ---------- */

body.npf-account .wpj-messenger .thread-header {
  border-bottom: 1px solid var(--npf-line-soft) !important;
}

body.npf-account .wpj-messenger .thread-header > .ui.segment {
  padding: 10px 14px !important;
  background: #fff !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* `height: 3.5rem` in the theme, on a row whose tallest thing is a 38px
   avatar. The row is now measured by its content. */
body.npf-account .wpj-messenger .thread-header .flex-parent {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  height: auto !important;
  min-width: 0;
}

body.npf-account .wpj-messenger .thread-header .message-user-avatar img {
  width: 38px !important;
  height: 38px !important;
  object-fit: cover;
  border-radius: 50%;
}

body.npf-account .wpj-messenger .thread-header .conversation-title {
  min-width: 0;
}

body.npf-account .wpj-messenger .thread-header .conversation-title h2 {
  margin: 0 !important;
  font-family: var(--npf-font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
}

body.npf-account .wpj-messenger .thread-header .conversation-title h2 a {
  color: var(--npf-ink) !important;
}

body.npf-account .wpj-messenger .thread-header .conversation-title h2 a:hover {
  color: var(--npf-primary) !important;
}

body.npf-account .wpj-messenger .thread-header .conversation-title span {
  display: block;
  font-size: 12px;
  line-height: 17px;
  color: var(--npf-g500) !important;
}

/* Send Custom Offer — the one action in this bar, so it is the one filled
   control, sized to the bar rather than to a page button. `flex: none` because
   the title beside it is what should absorb a narrow window. */
body.npf-account .wpj-messenger .thread-header .conversation-custom-offer {
  flex: none;
}

body.npf-account .wpj-messenger .thread-header .conversation-custom-offer .ui.button {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  background: var(--npf-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--npf-radius-btn) !important;
  font-family: var(--npf-font-ui) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  box-shadow: none !important;
}

body.npf-account .wpj-messenger .thread-header .conversation-custom-offer .ui.button:hover {
  background: var(--npf-primary-dark) !important;
}

/* The theme spaces the label off the glyph with `margin-left: 1em`, which is
   doubled by the gap above. */
body.npf-account .wpj-messenger .thread-header .conversation-custom-offer .icon + .text {
  margin-left: 0 !important;
}

body.npf-account .wpj-messenger .thread-header .conversation-custom-offer .ui.button > .icon {
  margin: 0 !important;
  font-size: 14px !important;
}

/* ---------- The two dropdown menus (conversation ⋮, per-message cog) ----------
   Same menu in two places, and the per-message one is also where the Report
   action from wpjobster-reports lands (`wpj_before_message_action_buttons`),
   so it has to hold an `<a class="item">` and a `<div class="item">` and make
   them look like one list. */

body.npf-account .wpj-messenger .conversation-settings,
body.npf-account .wpj-messenger .pm-settings {
  flex: none;
}

body.npf-account .wpj-messenger .conversation-settings .ui.dropdown > .icon,
body.npf-account .wpj-messenger .pm-settings .ui.dropdown > .icon {
  margin: 0 !important;
  font-size: 15px !important;
  color: var(--npf-g500) !important;
  transition: color var(--npf-t);
}

/* ---------- The per-message cog must not resize the bubble ----------

   The theme reveals it with `display: none` -> `display: block` on
   `.pm-holder:hover`. Going from no box to a box adds a line to the name row,
   so the bubble grew taller the moment the pointer touched it — and because
   growing pushed the row's edge around under the cursor, hovering near the
   bottom of a bubble made it flicker between the two heights.

   The box is therefore always laid out and only its paint is toggled. The
   slot is pinned to the 17px line box of the name beside it so the row
   measures the same whether the cog is showing or not.

   `.active` / `.visible` are Semantic's own open-state classes: without them
   the menu would fade out from under the pointer the moment it moved off the
   message and onto the open menu. `:focus-within` is the same guarantee for
   the keyboard, which never generates a hover at all. */
body.npf-account .wpj-messenger .thread-content .pm-settings {
  flex: 0 0 16px !important;
  height: 17px;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

body.npf-account .wpj-messenger .thread-content .pm-settings .ui.dropdown {
  display: block !important;
  line-height: 1 !important;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--npf-t);
}

body.npf-account .wpj-messenger .thread-content .pm-holder:hover .pm-settings .ui.dropdown,
body.npf-account .wpj-messenger .thread-content .pm-settings .ui.dropdown.active,
body.npf-account .wpj-messenger .thread-content .pm-settings .ui.dropdown.visible,
body.npf-account .wpj-messenger .thread-content .pm-settings:focus-within .ui.dropdown {
  visibility: visible;
  opacity: 1;
}

body.npf-account .wpj-messenger .thread-content .pm-settings .ui.dropdown > .icon {
  display: block !important;
  height: auto !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* On my own bubble the glyph sits on the primary fill. */
body.npf-account .wpj-messenger .thread-content .pm-sent .pm-settings .ui.dropdown > .icon {
  color: rgba(255, 255, 255, 0.85) !important;
}

body.npf-account .wpj-messenger .ui.dropdown .menu {
  min-width: 168px !important;
  padding: 5px !important;
  border: 1px solid var(--npf-line-soft) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 32px rgba(19, 24, 36, 0.14) !important;
}

body.npf-account .wpj-messenger .ui.dropdown .menu > .item {
  display: flex !important;
  align-items: center;
  gap: 9px;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  font-family: var(--npf-font-ui) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  color: var(--npf-g900) !important;
}

body.npf-account .wpj-messenger .ui.dropdown .menu > .item > .icon {
  margin: 0 !important;
  width: 14px !important;
  font-size: 13px !important;
  color: var(--npf-g500) !important;
}

body.npf-account .wpj-messenger .ui.dropdown .menu > .item:hover {
  background: var(--npf-auth-bed) !important;
}

/* Delete and Report are the destructive/serious pair; they say so on hover
   rather than sitting red in the resting list. */
body.npf-account .wpj-messenger .ui.dropdown .menu > .js-pm-delete:hover,
body.npf-account .wpj-messenger .ui.dropdown .menu > .js-pm-action-delete:hover,
body.npf-account .wpj-messenger .ui.dropdown .menu > .report-link:hover {
  background: #fdf2f2 !important;
  color: var(--npf-danger) !important;
}

body.npf-account .wpj-messenger .ui.dropdown .menu > .js-pm-delete:hover > .icon,
body.npf-account .wpj-messenger .ui.dropdown .menu > .js-pm-action-delete:hover > .icon,
body.npf-account .wpj-messenger .ui.dropdown .menu > .report-link:hover > .icon {
  color: var(--npf-danger) !important;
}

/* ---------- Load Older Messages ----------
   A history control, not a call to action: centred, quiet, and out of the way
   of the first message under it. */
body.npf-account .wpj-messenger .pm-ajax-trigger-container.ui.segment {
  padding: 10px 0 4px !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
}

body.npf-account .wpj-messenger .ui.button.pm-ajax-trigger {
  display: inline-flex !important;
  align-items: center;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  background: var(--npf-auth-bed) !important;
  color: var(--npf-g600) !important;
  border: 1px solid var(--npf-line-soft) !important;
  border-radius: 999px !important;
  font-family: var(--npf-font-ui) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

body.npf-account .wpj-messenger .ui.button.pm-ajax-trigger:hover {
  background: var(--npf-primary-soft) !important;
  color: var(--npf-primary) !important;
  border-color: var(--npf-primary-soft) !important;
}

/* ---------- Zoom invitation ----------
   NPF_Zoom_Call prints this as a Semantic grid inside the bubble: a 1/11/4
   column split, which at bubble width gives the button a four-column sliver
   and broke "Join call" over two lines. It is a row of two things — a line of
   text and a button — so it is laid out as one. */
body.npf-account .wpj-messenger .thread-content .pm-content-message > .ui.segment {
  margin: 6px 0 0 !important;
  padding: 10px 12px !important;
  background: var(--npf-auth-bed) !important;
  border: 1px solid var(--npf-line-soft) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body.npf-account .wpj-messenger .thread-content .pm-content-message > .ui.segment > .ui.grid {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 !important;
}

body.npf-account .wpj-messenger .thread-content .pm-content-message > .ui.segment > .ui.grid > .column {
  width: auto !important;
  min-width: 0;
  padding: 0 !important;
  text-align: left !important;
}

body.npf-account .wpj-messenger .thread-content .pm-content-message > .ui.segment > .ui.grid > .eleven.wide.column {
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 19px;
}

body.npf-account .wpj-messenger .thread-content .pm-content-message > .ui.segment .video.icon {
  font-size: 16px !important;
  color: var(--npf-primary) !important;
}

body.npf-account .wpj-messenger .thread-content .iscu-zoom-call-action.ui.button {
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center;
  background: var(--npf-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--npf-radius-btn) !important;
  font-family: var(--npf-font-ui) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  box-shadow: none !important;
}

body.npf-account .wpj-messenger .thread-content .iscu-zoom-call-action.ui.button:hover {
  background: var(--npf-primary-dark) !important;
}

body.npf-account .wpj-messenger .thread-content .iscu-zoom-meeting-status.ui.label {
  margin: 0 0 0 4px !important;
  padding: 2px 7px !important;
  font-family: var(--npf-font-ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
}

/* Inside my own bubble the card sits on the primary fill. */
body.npf-account .wpj-messenger .thread-content .pm-sent .pm-content-message > .ui.segment {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
}

body.npf-account .wpj-messenger .thread-content .pm-sent .pm-content-message > .ui.segment .video.icon {
  color: #fff !important;
}

/* ---------- The listing chip a message can carry ----------
   `wpjobster_pm_loop()` prepends `.ui.horizontal.label` linking the job or
   request a message is about. */
body.npf-account .wpj-messenger .thread-content .pm-content-message > .ui.horizontal.label {
  display: inline-flex !important;
  align-items: center;
  margin: 0 0 5px !important;
  padding: 2px 8px !important;
  background: var(--npf-primary-soft) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--npf-font-ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 17px !important;
}

body.npf-account .wpj-messenger .thread-content .pm-content-message > .ui.horizontal.label a {
  color: var(--npf-primary-dark) !important;
}

body.npf-account .wpj-messenger .thread-content .pm-sent .pm-content-message > .ui.horizontal.label {
  background: rgba(255, 255, 255, 0.2) !important;
}

body.npf-account .wpj-messenger .thread-content .pm-sent .pm-content-message > .ui.horizontal.label a {
  color: #fff !important;
}

/* ---------- Composer ---------- */

body.npf-account .wpj-messenger .thread-input {
  background: #fff !important;
  border-top: 1px solid var(--npf-line-soft) !important;
}

body.npf-account .wpj-messenger .thread-input-padding {
  padding: 10px 14px !important;
}

/* The send row: field, then the three icon controls, then submit. */
body.npf-account .wpj-messenger .responsive-pm.send-my-pm {
  display: flex !important;
  align-items: flex-end;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.npf-account .wpj-messenger .wrapper-pm-to-user {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
  width: auto !important;
  padding: 4px 6px 4px 12px !important;
  background: var(--npf-auth-bed) !important;
  border: 1px solid var(--npf-line) !important;
  border-radius: 22px !important;
  transition: border-color var(--npf-t);
}

/* The validation slot the theme prints inside the field is always in the
   markup and almost always empty, and it carries `width: 100%`. As a flex item
   that made an empty div claim over half the row, squeezing the editor into
   the remainder and pushing the icons onto a second line — which is most of
   why the field looked twice as tall as it should. Out of the flow when empty;
   a full-width row above the editor when it is not. */
body.npf-account .wpj-messenger .wrapper-pm-to-user > .wrapper-pm-errors:empty {
  display: none !important;
}

body.npf-account .wpj-messenger .wrapper-pm-to-user > .wrapper-pm-errors {
  flex: 1 1 100% !important;
  width: auto !important;
  margin: 2px 0 4px !important;
  order: -1;
}

body.npf-account .wpj-messenger .wrapper-pm-to-user:focus-within {
  border-color: var(--npf-primary) !important;
}

body.npf-account .wpj-messenger .form-container-pm {
  flex: 1 1 auto !important;
  min-width: 0;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.npf-account .wpj-messenger .form-container-pm form {
  margin: 0 !important;
}

/* One row to start with. The theme's own auto-grow script sets the height as
   the message gets longer; the cap keeps a long one from eating the thread. */
/* `display` deliberately without `!important`. When emoji input is on,
   emojionearea hides this textarea with an inline style and edits a
   contenteditable in its place; an `!important` here outranked that inline
   rule and put the hidden source back on screen as a second, empty field under
   the editor — the other half of the field's extra height. Without it the
   inline `display: none` wins, and when emoji input is off nothing sets one
   and the textarea is still the block below. */
body.npf-account .wpj-messenger textarea.message-field {
  display: block;
  width: 100% !important;
  min-height: 34px !important;
  max-height: 132px !important;
  margin: 0 !important;
  padding: 7px 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  resize: none !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 .wpj-messenger textarea.message-field:focus {
  border: 0 !important;
  box-shadow: none !important;
}

/* ---------- The three controls in the field ----------

   None of them is in the flow the theme leaves them in. `.input-pm-settings`
   and `.input-pm-quick-response` are `position: absolute` at `top: 10px` with
   `right: 10px` / `right: 37px`, dropped into the 70px of right padding the
   theme reserves on `.wrapper-pm-to-user`; the emoji button is absolute again
   inside `.emojionearea`, pinned to the top-right of the editor. Three
   separate absolute anchors measured from a padding box this layout no longer
   has — which is why the bolt and the gear stacked in one corner and the
   smiley landed on a line below them, and why the pill grew tall enough to
   hold the pair.

   All three are put back in the flow as flex items of the pill. They then sit
   on one line, at one size, and the pill is measured by the editor rather than
   by where an absolute icon happened to land. */
body.npf-account .wpj-messenger .thread-input .input-pm-settings,
body.npf-account .wpj-messenger .thread-input .input-pm-quick-response,
body.npf-account .wpj-messenger .thread-input .emojionearea .emojionearea-button {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}

body.npf-account .wpj-messenger .input-pm-settings,
body.npf-account .wpj-messenger .input-pm-quick-response,
body.npf-account .wpj-messenger .emojionearea-button {
  flex: none !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background var(--npf-t);
}

/* ---------- emojionearea ----------

   The plugin hides the `<textarea>` and edits a contenteditable div in its
   place, so the field rules below reach a node that is no longer the input.
   Its own defaults are `min-height: 8em` and `padding: 6px 24px 6px 12px` —
   eight lines tall, with an inset for the button that is now a sibling in the
   flow — and that is the extra height in the composer. */
body.npf-account .wpj-messenger .thread-input .emojionearea {
  display: flex !important;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* `position: static` as well as the sizing: emojionearea's inline variant
   takes the editor out of flow, which left the button as the only item in the
   row and put the smiley to the *left* of the text it belongs to, overlapping
   its first characters. */
body.npf-account .wpj-messenger .thread-input .emojionearea .emojionearea-editor {
  flex: 1 1 auto;
  min-width: 0;
  position: static !important;
  display: block !important;
  height: auto !important;
  min-height: 34px !important;
  max-height: 132px !important;
  margin: 0 !important;
  padding: 7px 0 !important;
  overflow-y: auto;
  background: none !important;
  border: 0 !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;
}

/* Its placeholder is a `:before`, not a real placeholder attribute. */
body.npf-account .wpj-messenger .thread-input .emojionearea .emojionearea-editor[placeholder]:empty::before {
  color: var(--npf-g500) !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

body.npf-account .wpj-messenger .thread-input .emojionearea-button:hover {
  background: var(--npf-primary-soft);
}

/* The picker is anchored to the button; it must open over the thread rather
   than stretch the composer that now holds the button in its flow. */
body.npf-account .wpj-messenger .thread-input .emojionearea .emojionearea-picker {
  position: absolute !important;
  bottom: 40px !important;
  right: 0 !important;
  top: auto !important;
  left: auto !important;
  z-index: 20;
}

body.npf-account .wpj-messenger .input-pm-settings:hover,
body.npf-account .wpj-messenger .input-pm-quick-response:hover {
  background: var(--npf-primary-soft);
}

body.npf-account .wpj-messenger .input-pm-settings .ui.dropdown > .icon,
body.npf-account .wpj-messenger .input-pm-quick-response .ui.dropdown > .icon {
  margin: 0 !important;
  font-size: 15px !important;
  color: var(--npf-g500) !important;
}

/* Send. A round primary button the same height as the field's pill. */
body.npf-account .wpj-messenger .wrapper-pm-submit {
  flex: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.npf-account .wpj-messenger .ui.button.submit-private-message {
  width: 42px !important;
  height: 42px !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--npf-primary) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

body.npf-account .wpj-messenger .ui.button.submit-private-message:hover {
  background: var(--npf-primary-dark) !important;
  color: #fff !important;
}

body.npf-account .wpj-messenger .ui.button.submit-private-message .icons,
body.npf-account .wpj-messenger .ui.button.submit-private-message .icon {
  margin: 0 !important;
  font-size: 14px !important;
  color: #fff !important;
}

/* ---------- Attach a file ----------

   The paperclip is not in the send row. `wpj_display_upload_form()` prints it
   at the end of the composer, inside `.wrapper-pm-attachments`, and the theme
   lifts it into place with `position: absolute; left: 30px; top: 30px` against
   `.thread-input`. The row reserves the space it lands in with an empty 52px
   flex item, `.wrapper-pm-attachments-placeholder`.

   That mechanism is kept — the markup gives no way to put the control in the
   flow where it appears — but anchored from the bottom instead of the top. A
   `top` offset is measured from whatever is above the send row, and the error
   banner is sometimes above it and sometimes not, which moved the paperclip
   off the field exactly when a message had failed to send. The send row is
   always the last thing in the composer, so `bottom` is stable: 10px of
   composer padding plus half the difference between the 42px row and the
   18px glyph. */
body.npf-account .wpj-messenger .wrapper-pm-attachments-placeholder {
  flex: 0 0 34px !important;
  min-width: 34px !important;
  margin: 0 !important;
}

body.npf-account .wpj-messenger .thread-input .wrapper-pm-attachments {
  margin: 0 !important;
}

body.npf-account .wpj-messenger .thread-input .wrapper-pm-attachments #queue + div {
  left: 22px !important;
  right: auto !important;
  top: auto !important;
  bottom: 22px !important;
}

body.npf-account .wpj-messenger .thread-input .wrapper-pm-attachments #queue + div i {
  font-size: 16px !important;
  color: var(--npf-g500) !important;
}

body.npf-account .wpj-messenger .thread-input .wrapper-pm-attachments #queue + div:hover i {
  color: var(--npf-primary) !important;
}

/* The queue of files waiting to go up, under the field. */
body.npf-account .wpj-messenger .thread-input .wrapper-pm-attachments .uploadifive-queue {
  max-height: 116px !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
}

body.npf-account .wpj-messenger .thread-input .uploadifive-queue-item {
  margin: 0 0 4px !important;
  padding: 6px 10px !important;
  background: var(--npf-auth-bed) !important;
  border: 1px solid var(--npf-line-soft) !important;
  border-radius: 8px !important;
  font-family: var(--npf-font-ui) !important;
  font-size: 12px !important;
  line-height: 18px !important;
  color: var(--npf-g600) !important;
  overflow: hidden;
}

/* Send failures and validation, above the field. The theme paints this as a
   full-bleed saturated bar the width of the thread. */
body.npf-account .wpj-messenger .error-wpj,
body.npf-account .wpj-messenger .wrapper-pm-errors:not(:empty) {
  margin: 0 0 8px !important;
  padding: 8px 12px !important;
  background: #fdf2f2 !important;
  color: #a33 !important;
  border: 1px solid #f3cfcf !important;
  border-radius: 8px !important;
  font-family: var(--npf-font-ui) !important;
  font-size: 13px !important;
  line-height: 19px !important;
  text-align: left !important;
}

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

body.npf-account .wpj-messenger .flex-center-container {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 32px 16px;
}

body.npf-account .wpj-messenger .thread-empty {
  margin: 0 !important;
  text-align: center;
}

body.npf-account .wpj-messenger .thread-empty > .icon {
  margin: 0 0 10px !important;
  font-size: 44px !important;
  color: var(--npf-g300) !important;
  opacity: 1 !important;
}

body.npf-account .wpj-messenger .thread-empty h2 {
  margin: 0 0 4px !important;
  font-family: var(--npf-font-head) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: var(--npf-ink) !important;
}

body.npf-account .wpj-messenger .thread-empty p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 19px !important;
  color: var(--npf-g500) !important;
}

body.npf-account .wpj-messenger .ui.segment.error-no-messages,
body.npf-account .wpj-messenger .ui.segment#no_messages {
  padding: 24px 16px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: center !important;
  font-size: 13px !important;
  color: var(--npf-g500) !important;
}

/* ---------- Compaction of the message rows themselves ----------
   These override the sizes set in the bubble block above. Kept here, at the
   end, so the whole of the tightening is one thing to read and to undo. */

body.npf-account .wpj-messenger .thread-content {
  padding: 4px 14px 10px !important;
}

body.npf-account .wpj-messenger .thread-content .pm-holder .padding-cnt {
  gap: 8px;
  padding: 4px 0 !important;
}

body.npf-account .wpj-messenger .thread-content .pm-content {
  padding: 7px 11px !important;
}

body.npf-account .wpj-messenger .thread-content .pm-avatar img {
  width: 30px;
  height: 30px;
}

body.npf-account .wpj-messenger .thread-content .pm-content-header {
  gap: 7px;
  margin-bottom: 2px !important;
}

body.npf-account .wpj-messenger .thread-content .pm-content-header h4 {
  font-size: 12px;
  line-height: 17px;
}

body.npf-account .wpj-messenger .thread-content .pm-date {
  font-size: 10px;
  line-height: 17px;
}

body.npf-account .wpj-messenger .thread-content .pm-content-message {
  font-size: 13px;
  line-height: 19px;
}

/* The avatar gutter follows the smaller avatar: 30px + the 8px row gap. */
body.npf-account .wpj-messenger .thread-content .pm-custom-offer-offer-header,
body.npf-account .wpj-messenger .thread-content .pm-custom-offer-request-header {
  margin-left: 38px !important;
}

body.npf-account .wpj-messenger .thread-content .pm-sent .pm-custom-offer-offer-header,
body.npf-account .wpj-messenger .thread-content .pm-sent .pm-custom-offer-request-header {
  margin: 0 38px 5px 0 !important;
}

body.npf-account .wpj-messenger .thread-content .pm-custom-offer-bottom {
  margin: 7px 0 0 38px !important;
  padding: 10px 12px !important;
}

body.npf-account .wpj-messenger .thread-content .pm-sent .pm-custom-offer-bottom {
  margin: 7px 38px 0 0 !important;
}

@media (max-width: 600px) {
  body.npf-account .wpj-messenger .thread-content { padding: 4px 10px 8px !important; }
  body.npf-account .wpj-messenger .thread-input-padding { padding: 8px 10px !important; }
  body.npf-account .wpj-messenger .thread-header > .ui.segment { padding: 8px 10px !important; }

  /* The label goes, the glyph stays — the bar still has to hold a name, a
     "last seen" line and a menu on a phone. */
  body.npf-account .wpj-messenger .thread-header .conversation-custom-offer .ui.button .text { display: none !important; }
  body.npf-account .wpj-messenger .thread-header .conversation-custom-offer .ui.button { padding: 0 11px !important; }

  /* Both menus open from a control that can sit close to either edge. Capped
     against the viewport so an open menu cannot be what makes the thread
     scroll sideways. */
  body.npf-account .wpj-messenger .ui.dropdown .menu {
    min-width: 148px !important;
    max-width: calc(100vw - 40px) !important;
  }
}

/* ============================================================
   MY SHOPPING / MY SALES (/my-shopping, /my-sales, and the Payments page,
   which renders the shopping template with the Status column dropped)

   The same `.wpj-grid-table` shell as MY FAVORITES above, one level deeper: a
   heading `.row`, then a single `.row.wpj-load-more-target` holding one nested
   `.ui.stackable.grid` per order — `.shopping-list-border` on Shopping,
   `.sales-list-border` on Sales. The two order templates are laid out
   identically (avatar + title + type chip, three data cells, status chip, an
   invoice action), so both class names ride along in every rule here and My
   Sales inherits the same table rather than a near-copy of it.

   Nothing in the theme ever styled either class, despite the names: the rows
   arrived as bare Semantic grids, top-aligned, with no row rhythm.
   ============================================================ */

/* ---------- The double rule under the column headings ----------

   `> .row:first-child` (MY FAVORITES, above) draws the divider under the
   headings. The theme draws a second one on the top edge of the row that
   follows — `.ui.grid.wpj-grid-table > .row + .row { border-top }` in
   front/style.css, from when nothing gave the headings a line of their own. Two
   parallel rules a padding-step apart, on every table built from this shell.
   The headings keep theirs, since it belongs to the headings; the results row
   loses its own. */
body.npf-account .wpj-grid-table > .row + .row {
  border-top: 0 !important;
}

/* That row is only a container for the per-order grids, so it should not
   measure like a table row of its own. */
body.npf-account .wpj-grid-table > .row.wpj-load-more-target {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Between consecutive orders the theme's own `.grid + .grid` divider is kept
   rather than a border-bottom per row — it is the one that leaves no rule
   hanging under the last order in the tab. Only the colour moves onto the
   `--npf-line-soft` the headings already use. */
body.npf-account .wpj-grid-table > .row > .grid + .grid {
  border-top: 1px solid var(--npf-line-soft) !important;
}

/* One order. `align-items: center` is what the row was missing most: the title
   cell is two lines tall (title + type chip) and the four data cells are one,
   so every date, price and status chip sat pinned to the top of the row, a
   line above the title it belonged to.

   `display` is deliberately not set — `.ui.stackable.grid` is already flex here
   and turns itself into stacked full-width columns below 767px, which is the
   mobile layout this section wants anyway. */
body.npf-account .shopping-list-border,
body.npf-account .sales-list-border {
  align-items: center !important;
  min-width: 100% !important;
  margin: 0 !important;
  padding: 14px 0 !important;
  transition: background var(--npf-t);
}

body.npf-account .shopping-list-border:hover,
body.npf-account .sales-list-border:hover {
  background: var(--npf-auth-bed);
}

/* ---------- Column widths ----------

   The child theme's own template (wpjobster-child/template-parts/my-account/
   html-shopping.php) sizes this table `four / two / two / two / three / three`:
   a quarter of it for the order, and the last 18.75% for Download Invoice — a
   cell that is empty on every order that is not finished (see the note on that
   column below). So the name of the order wrapped onto two lines while a fifth
   of the table sat blank.

   Re-balanced towards the only column with variable-length content in it. The
   `:has(> .column:nth-child(6))` guard is what keeps this to the six-column
   layout: the Payments page renders this same template with `$is_payments_page`
   true, which drops Status and widens the date cells to `three` — five columns,
   different meanings per position, left alone. */
body.npf-account .wpj-grid-table:has(.shopping-list-border) > .row:first-child:has(> .column:nth-child(6)) > .column:nth-child(1),
body.npf-account .shopping-list-border:has(> .column:nth-child(6)) > .column:nth-child(1) { width: 34% !important; }

body.npf-account .wpj-grid-table:has(.shopping-list-border) > .row:first-child:has(> .column:nth-child(6)) > .column:nth-child(2),
body.npf-account .wpj-grid-table:has(.shopping-list-border) > .row:first-child:has(> .column:nth-child(6)) > .column:nth-child(3),
body.npf-account .wpj-grid-table:has(.shopping-list-border) > .row:first-child:has(> .column:nth-child(6)) > .column:nth-child(4),
body.npf-account .shopping-list-border:has(> .column:nth-child(6)) > .column:nth-child(2),
body.npf-account .shopping-list-border:has(> .column:nth-child(6)) > .column:nth-child(3),
body.npf-account .shopping-list-border:has(> .column:nth-child(6)) > .column:nth-child(4) { width: 12% !important; }

body.npf-account .wpj-grid-table:has(.shopping-list-border) > .row:first-child:has(> .column:nth-child(6)) > .column:nth-child(5),
body.npf-account .wpj-grid-table:has(.shopping-list-border) > .row:first-child:has(> .column:nth-child(6)) > .column:nth-child(6),
body.npf-account .shopping-list-border:has(> .column:nth-child(6)) > .column:nth-child(5),
body.npf-account .shopping-list-border:has(> .column:nth-child(6)) > .column:nth-child(6) { width: 15% !important; }

/* ---------- Order cell: avatar, title, type ---------- */

/* `flex-start`, not centre: this cell is the only one that grows — a wrapped
   title, the type chip, the theme's Cancel/Process links, the recurring
   contract line — and centred against a four-line block the avatar floated in
   the middle of the row with nothing beside it. It belongs next to the title
   it illustrates. The row itself stays centred, so the dates, total and status
   still sit on the middle line of whatever height the order cell asks for. */
body.npf-account .shopping-list-border .flex-parent.flex-thumb-text,
body.npf-account .sales-list-border .flex-parent.flex-thumb-text {
  display: flex !important;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

/* The thumbnail sits in its own unclassed wrapper div, so the wrapper is what
   has to stop flexing — not the image inside it. */
body.npf-account .shopping-list-border .flex-thumb-text > div:first-child,
body.npf-account .sales-list-border .flex-thumb-text > div:first-child {
  flex: none;
  line-height: 0;
}

body.npf-account .shopping-list-border .y-center-x-left,
body.npf-account .sales-list-border .y-center-x-left {
  min-width: 0;
}

/* 60px in the markup, which crowded a row this height. */
body.npf-account .shopping-list-border img.round-avatar,
body.npf-account .sales-list-border img.round-avatar {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 1px solid var(--npf-line-soft);
}

/* The stack under the title — type chip, the recurring contract line from
   NPF_Buyer_Cancel, the theme's Cancel/Process links — arrived as separate
   blocks each carrying its own margins on top of Semantic's label margins, so
   a monthly order stood a good 40px taller than a one-off with nothing extra
   in it. One rhythm for the whole stack: 4px between the title and the chip,
   4px between the chip and whatever the contract line says. */
body.npf-account .shopping-list-border .ui.label,
body.npf-account .sales-list-border .ui.label { margin: 0 !important; }

body.npf-account .shopping-list-border .npf-cancel-inline,
body.npf-account .sales-list-border .npf-cancel-inline {
  gap: 2px 10px;
  margin-top: 4px !important;
  font-size: 12.5px;
  line-height: 18px;
}

body.npf-account .shopping-list-border .npf-cancel-detail,
body.npf-account .sales-list-border .npf-cancel-detail { line-height: 17px; }

body.npf-account .shopping-list-border .small-heading-title,
body.npf-account .sales-list-border .small-heading-title {
  margin: 0 0 4px !important;
  font-family: var(--npf-font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 21px !important;
}

/* `:not()` on the two action classes, not `> a:first-child`: an order awaiting
   payment prints Cancel and Process as further children of this same `h4`
   (html-shopping.php), and they are controls, not the order's name. */
body.npf-account .shopping-list-border .small-heading-title > a:not(.redlink):not(.greenlink),
body.npf-account .sales-list-border .small-heading-title > a:not(.redlink):not(.greenlink) {
  color: var(--npf-ink) !important;
  transition: color var(--npf-t);
}

body.npf-account .shopping-list-border .small-heading-title > a:not(.redlink):not(.greenlink):hover,
body.npf-account .sales-list-border .small-heading-title > a:not(.redlink):not(.greenlink):hover {
  color: var(--npf-primary) !important;
}

/* Those two, inherited at 15px/600 from the heading, read as loud as the title
   itself. They are row actions. */
body.npf-account .shopping-list-border .small-heading-title .redlink,
body.npf-account .shopping-list-border .small-heading-title .greenlink {
  font-family: var(--npf-font-ui) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 20px !important;
}

body.npf-account .shopping-list-border .small-heading-title .redlink { color: var(--npf-danger) !important; }
body.npf-account .shopping-list-border .small-heading-title .greenlink { color: var(--npf-success) !important; }

/* ---------- Data cells ----------
   The theme left these on whatever the cell inherited, so purchase dates,
   delivery dates and totals came out in three slightly different treatments.
   One family, one size, one colour; the total is the only emphasised value. */

body.npf-account .shopping-list-border .column,
body.npf-account .sales-list-border .column {
  font-family: var(--npf-font-ui) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--npf-g600) !important;
}

body.npf-account .shopping-list-border .shopping-total-price,
body.npf-account .sales-list-border .sales-total-cash {
  font-weight: 600 !important;
  color: var(--npf-g900) !important;
}

/* ---------- Download Invoice ----------
   A row-level action, so it is a compact ghost rather than the 44px filled
   page button every `.ui.button` gets by default. `.wpj-page-content` is in the
   selector to outrank that rule on specificity rather than on source order.

   The column is blank on most tabs by design, not by fault: the child theme
   prints the link only inside `if ( $completed == 1 )`, and `$completed` is
   `$row->done_buyer == 1` — the buyer having marked the order complete. So an
   Active, delivered, pending or cancelled order has no invoice to download and
   the cell is empty; only the Completed tab fills it. Nothing here changes
   that, but a heading over a column that is empty for the whole tab reads as
   something failing to load, so it is hidden until the tab has at least one
   invoice link in it. The column keeps its width either way, which is what
   holds the headings over the values they name. */
body.npf-account .wpj-grid-table:has(.shopping-list-border):not(:has(a[href*="invoice_page"])) > .row:first-child > .column:last-child {
  visibility: hidden;
}

body.npf-account .wpj-page-content .shopping-list-border .ui.button,
body.npf-account .wpj-page-content .sales-list-border .ui.button {
  min-height: 34px !important;
  padding: 0 12px !important;
  gap: 6px;
  font-size: 13px !important;
  color: var(--npf-primary) !important;
  background: #fff !important;
  border: 1px solid var(--npf-line) !important;
}

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

body.npf-account .wpj-page-content .shopping-list-border .ui.button i.icon,
body.npf-account .wpj-page-content .sales-list-border .ui.button i.icon {
  font-size: 14px !important;
}

/* MY FAVORITES hides the heading row at 860px, where its own cards stack.
   These tables do not stack until 767px — Semantic's `.stackable` breakpoint,
   which is also where the theme turns `.responsive_titles` back on — so
   between the two widths the headings went away while the columns stayed,
   leaving four unlabelled values. Only the grids that hold order rows are
   named, so My Favorites keeps its own breakpoint. */
@media (min-width: 768px) and (max-width: 860px) {
  body.npf-account .wpj-grid-table:has(.shopping-list-border) > .row:first-child,
  body.npf-account .wpj-grid-table:has(.sales-list-border) > .row:first-child {
    display: flex !important;
  }
}

@media (max-width: 767px) {
  /* Full-width cells now, so there is nothing left to centre vertically. */
  body.npf-account .shopping-list-border,
  body.npf-account .sales-list-border {
    align-items: stretch !important;
    padding: 16px 0 !important;
  }

  body.npf-account .shopping-list-border .flex-parent.flex-thumb-text,
  body.npf-account .sales-list-border .flex-parent.flex-thumb-text {
    align-items: flex-start;
  }

  /* `.responsive_titles` are the theme's per-cell labels, and with the heading
     row gone they are the only thing naming each value. Drawn as a label above
     its value instead of another line of body text the same size as it. */
  body.npf-account .shopping-list-border .responsive_titles,
  body.npf-account .sales-list-border .responsive_titles {
    margin: 12px 0 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--npf-g500);
  }

  body.npf-account .wpj-page-content .shopping-list-border .ui.button,
  body.npf-account .wpj-page-content .sales-list-border .ui.button {
    width: 100%;
    margin-top: 14px !important;
  }
}

/* ============================================================
   WITHDRAW MONEY (/my-account/payments/withdraw)

   indiasan-payments prints this screen itself
   (class-ispm-withdrawal-system.php): an `<h3>`, then a `.ui.segment` holding a
   heading `.ui.stackable.grid` of `.payment-title-table` cells and one
   `.ui.stackable.grid.payments-list-border` per payment. The class names are
   the same family the shopping and sales tables use, but nothing had ever
   styled them here — so the seller's money screen arrived as unruled rows of
   default body text with a full-width Semantic green button in the last cell,
   the one saturated green on the site, on the page where trust matters most.

   Same table as My Shopping, and the site's own primary button.
   ============================================================ */

/* "Available to Withdraw" / "Pending Withdrawals". Matched through the column
   the plugin prints them alone in, rather than as a bare `h3`, so this stays on
   this screen and off every other panel heading in the account area. */
body.npf-account .sixteen.wide.column > h3:only-child {
  margin: 26px 0 12px !important;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  color: var(--npf-ink);
}

/* The heading row. `:has()` rather than `:first-child` because the segment's
   first child is the heading grid on this screen and a row on others. */
body.npf-account .ui.segment > .ui.grid:has(> .payment-title-table) {
  margin: 0 !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--npf-line-soft);
}

body.npf-account .payment-title-table {
  padding: 0 !important;
  font-family: var(--npf-font-body) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  color: var(--npf-g500) !important;
}

/* One payment. */
body.npf-account .payments-list-border {
  align-items: center !important;
  min-width: 100% !important;
  margin: 0 !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--npf-line-soft);
  transition: background var(--npf-t);
}

body.npf-account .payments-list-border:last-child { border-bottom: 0; }

body.npf-account .payments-list-border > .column {
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
}

body.npf-account .payments-list-border .responsive_content_payment {
  font-family: var(--npf-font-ui) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--npf-g600) !important;
}

/* The job's name is what identifies the row; the plugin already prints it in a
   `<strong>`, which inherited the same grey as the values around it. */
body.npf-account .payments-list-border .responsive_content_payment strong {
  font-weight: 600 !important;
  color: var(--npf-ink) !important;
}

body.npf-account .withdrawal-form { margin: 0 !important; }

/* `.ui.button.fluid.green` in the markup: full width of its cell, and a green
   that belongs to Semantic rather than to this site. A row action, so it is
   sized like one and left under the heading it answers to. */
body.npf-account .wpj-page-content .withdrawal-form .ui.button,
body.npf-account .withdrawal-form .ui.button.fluid.green {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  width: auto !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: var(--npf-radius-btn) !important;
  background: var(--npf-primary) !important;
  color: #fff !important;
  font-family: var(--npf-font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: background var(--npf-t);
}

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

body.npf-account .withdrawal-form .ui.button i.icon {
  margin: 0 !important;
  font-size: 15px !important;
  opacity: 1;
}

@media (max-width: 767px) {
  /* The columns stack, so the plugin's own per-cell labels are what name each
     value — drawn as labels rather than as another line of body text. */
  body.npf-account .payments-list-border {
    align-items: stretch !important;
    padding: 16px 0 !important;
  }

  body.npf-account .payments-list-border .responsive_titles {
    margin: 12px 0 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--npf-g500);
  }

  body.npf-account .wpj-page-content .withdrawal-form .ui.button,
  body.npf-account .withdrawal-form .ui.button.fluid.green {
    width: 100% !important;
    margin-top: 12px !important;
  }
}