/* ============================================================
   NPF Core — single job (service detail)
   Ported from nonprofit/freelancer-profile.html. Every rule is
   scoped under .npf-detail; design class names are namespaced
   npf-* so they cannot collide with the theme's Semantic UI.

   The dynamic blocks keep the theme's own markup (buy widget,
   package tabs, carousel, seller block, reviews), so those
   selectors are re-skinned in place rather than replaced.
   ============================================================ */

.npf-detail {
  --npf-primary: #4f84c3;
  --npf-primary-dark: #3e6ea6;
  --npf-primary-light: #6ac9fc;
  --npf-primary-soft: #e1eeff;
  --npf-primary-tint: #e1eeff;
  --npf-ink: #020b18;
  --npf-muted: #677489;
  --npf-line: #e3e3e3;
  --npf-line-soft: #eef1f6;
  --npf-bed: #f9fbff;
  --npf-bg-alt: #fafafa;
  --npf-star: #f5b301;
  --npf-g100: #e4e7e9;
  --npf-g200: #c9cfd2;
  --npf-g300: #d5d7da;
  --npf-g500: #77878f;
  --npf-g900: #191c1f;
  --npf-success: #22a35a;
  --npf-shadow-panel: 0 4px 33.7px rgba(0, 0, 0, 0.01);
  --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-headline: "Roboto", "Inter", system-ui, sans-serif;
  --npf-font-ui: "Public Sans", "Inter", system-ui, sans-serif;

  /* .detail — background var(--auth-bed); padding-block 100px 0 */
  background: var(--npf-bed);
  padding-block: 100px 0;
  font-family: var(--npf-font-body);

  /* Full-bleed out of .wpj-page-content's site-width cap. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

.npf-detail__container {
  width: 100%;
  max-width: 1248px;
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
}

/* ---------- Breadcrumb ---------- */

.npf-detail .npf-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--npf-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 19px;
}

.npf-detail .npf-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--npf-ink);
  text-decoration: none;
  transition: color var(--npf-t);
}

.npf-detail .npf-breadcrumb a:first-child { color: rgba(1, 8, 16, 0.6); }
.npf-detail .npf-breadcrumb a:hover { color: var(--npf-primary); }
.npf-detail .npf-breadcrumb a svg { width: 20px; height: 20px; }

/* The caret sits 3px from the label that follows it, 8px from the one before. */
.npf-detail .npf-breadcrumb__sep { color: var(--npf-ink); margin-right: -5px; }
.npf-detail .npf-breadcrumb__current { color: var(--npf-ink); font-weight: 500; }

/* ---------- Layout ---------- */

/* .detail-layout — content 704 / sidebar 444 with a 52px gap */
.npf-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 444px;
  gap: 52px;
  align-items: start;
  margin-bottom: 100px;
}

/* front.min.css gives .single-job-wrapper a top margin meant for the theme's
   own layout; the breadcrumb already sets the spacing here. */
.single-job .single-job-wrapper,
.npf-detail .single-job-wrapper { margin-top: 0; }

.npf-detail-main { min-width: 0; }

/* .detail-side — sticky column of cards, 40px apart */
.npf-detail-side {
  display: grid;
  gap: 40px;
  align-content: start;
  position: sticky;
  top: 16px;
  min-width: 0;
}

/* ---------- Head ---------- */

/* Figma "Heading/H3": Inter 600 24/30, tracking -1 */
.npf-detail .npf-detail-title {
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -1px;
  color: #0e1109;
  text-transform: capitalize;
  margin: 0 0 19px;
}

/* The theme fills this with either a row of <i class="star icon"> (when the job
   has enough ratings) or the plain string "Not rated yet" / "Not enough
   ratings". The design's gold + 1.9px tracking belongs to the stars only, so it
   is set on the icons; the fallback text reads as ordinary muted copy. */
.npf-detail-stars {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--npf-muted);
  font-size: 16px;
  line-height: 26px;
}

/* front.min.css floats .job-rating-top left, which pulled the meta row up
   alongside it. */
.npf-detail-stars .job-rating-top,
.npf-detail-stars .job-rating-top-text {
  float: none;
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.npf-detail-stars .wpj-star-rating-static {
  color: var(--npf-star);
  font-size: 20px;
  line-height: 22px;
  letter-spacing: 1.9px;
}

.npf-detail-stars .star.icon { color: var(--npf-star); }
.npf-detail-stars .empty-star-rating { color: #d8dee8; }

/* Not in the design, but real content: category trail, order queue, delivery
   time and location. One quiet meta row so it cannot compete with the title. */
.npf-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 12px;
  color: var(--npf-muted);
  font-size: 16px;
  line-height: 26px;
}

.npf-detail-meta a { color: var(--npf-muted); text-decoration: none; }
.npf-detail-meta a:hover { color: var(--npf-primary); }

.npf-detail-meta .single-job-rate-delivery {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The theme emits an empty <li> when a job has no queue; collapse it so the
   gap does not double. */
.npf-detail-meta .single-job-rate-delivery li { margin: 0; padding: 0; }
.npf-detail-meta .single-job-rate-delivery li:empty { display: none; }

.npf-detail-meta .single-job-delivery-time,
.npf-detail-meta .queue-order { display: inline-block; }

.npf-detail-meta .job-location { margin: 0; }

/* ---------- Hero ---------- */

/* .detail-hero — 354px tall, radius 7, image cover */
.npf-detail-hero {
  position: relative;
  margin-top: 40px;
  height: 354px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--npf-bg-alt);
}

.npf-detail-hero img,
.npf-detail-hero .owl-item img {
  width: 100%;
  height: 354px;
  object-fit: cover;
}

/* The theme's carousel is the hero. Strip the Semantic/owl chrome that assumed
   a boxed slider so it fills the 354px frame. */
.npf-detail-hero .cf,
.npf-detail-hero .wpj-carousel,
.npf-detail-hero .owl-stage-outer,
.npf-detail-hero .owl-stage,
.npf-detail-hero .owl-item,
.npf-detail-hero .bx-lazy-container {
  height: 100%;
  margin: 0;
}

/* The blurry backdrop layer the theme paints behind letterboxed images. With
   object-fit doing the same job it is only a second copy on top. */
.npf-detail-hero .job-blurry-bg { display: none; }

/* ---------- Video slides ----------
   A job can mix photos and a video in the same carousel. Owl builds the video
   slide as `.owl-video-wrapper` carrying the YouTube still as a background,
   and the theme sizes both that and the image slides to their natural 405px —
   51px taller than the 354px frame, so the bottom was being clipped. Both are
   pinned to the frame instead, and the play button is centred on it. */
.npf-detail-hero .owl-video-wrapper,
.npf-detail-hero .owl-video-frame,
.npf-detail-hero .owl-video-tn {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  background-size: cover !important;
  background-position: center !important;
}

.npf-detail-hero .owl-video-frame iframe,
.npf-detail-hero .owl-video-frame > * {
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

/* Owl centres the play button with its own margins; they assume the natural
   slide height, so it drifted once the frame was capped. */
.npf-detail-hero .owl-video-play-icon {
  top: 50% !important;
  left: 50% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%);
  z-index: 3;
}

.npf-detail-hero .owl-video-play-icon:hover { transform: translate(-50%, -50%) scale(1.06); }

/* ---------- Favourite control on the hero ----------
   npf-single-job.js reparents .upb_add_remove_links in here so it stops
   occupying a full row of its own under the reviews. Both anchors (add and
   remove) live inside it and the theme toggles between them, so the chip is
   put on the wrapper and each anchor just fills it. */
.npf-detail-hero .npf-hero-fav {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 !important;
  padding: 0 !important;
  /* No chip behind the icon — same treatment as the carousel arrows. */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  transition: transform var(--npf-t);
}

.npf-detail-hero .npf-hero-fav:hover { transform: translateY(-1px); }

.npf-detail-hero .npf-hero-fav > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.npf-detail-hero .npf-hero-fav .bookmark-icon,
.npf-detail-hero .npf-hero-fav .empty-heart,
.npf-detail-hero .npf-hero-fav .full-heart {
  margin: 0 !important;
  float: none !important;
}

/* The heart is wrapped in a bare <span> that exists only to hold the icon:
   `<a><div class="empty-heart"></div><span><div class="bookmark-icon">…</div></span></a>`.
   The badge rule below used to be written as `.npf-hero-fav span`, which caught
   that wrapper too and painted a near-black rounded box behind the heart. The
   count is the span INSIDE .bookmark-icon, so that is what the rule names now,
   and the wrapper is explicitly left with no chrome of its own. */
.npf-detail-hero .npf-hero-fav > a > span {
  position: static !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 0;
  transform: none;
}

/* The theme hangs a hover badge off the icon carrying the bookmark COUNT — an
   unlabelled "1" / "2" on a #666 background with a speech-bubble tail. Sitting
   14px from the top of a frame with `overflow: hidden`, it opened upwards and
   was sliced in half, which is the grey block above the heart. Restyled as a
   small dark pill BELOW the chip so it stays inside the frame, with the tail
   dropped since it no longer points anywhere. */
.npf-detail-hero .npf-hero-fav .bookmark-icon > span {
  top: calc(100% + 8px) !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  min-width: 24px;
  padding: 3px 8px !important;
  font-family: var(--npf-font-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: var(--npf-ink) !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(19, 24, 36, 0.25);
  white-space: nowrap;
}

.npf-detail-hero .npf-hero-fav .bookmark-icon > span::before,
.npf-detail-hero .npf-hero-fav .bookmark-icon > span::after { content: none !important; display: none !important; }

/* The row the control came from, once nothing visible is left in it. */
.npf-detail .social-icons-floating.npf-is-empty { display: none !important; }

/* Carousel arrows.
   Owl renders these as empty <button class="owl-prev"> / <button
   class="owl-next"> and the theme dresses them with a background sprite that
   no longer resolves — hence the striped grey bars floating over the photo.
   The sprite is dropped and the arrows are rebuilt as round white buttons with
   a chevron drawn from two borders, so they read as prev/next with no image
   dependency at all. */
.npf-detail-hero .owl-nav {
  position: static;
  margin: 0;
  pointer-events: none;
}

.npf-detail-hero .wpj-carousel.owl-theme .owl-nav button.owl-prev,
.npf-detail-hero .wpj-carousel.owl-theme .owl-nav button.owl-next {
  position: absolute;
  top: 50%;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  place-items: center;
  /* 44px is the touch target; the chevron inside is what you actually see. */
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  border-radius: 0;
  color: var(--npf-ink) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  /* Kills any sprite text or theme glyph the button may carry. */
  font-size: 0 !important;
  text-indent: 0 !important;
  opacity: 1;
  z-index: 4;
  cursor: pointer;
  pointer-events: auto;
  transition: color var(--npf-t);
}

/* Flush to the frame: the 44px button keeps its touch target inside the hero
   while the chevron itself reads ~14px from the edge. */
.npf-detail-hero .wpj-carousel.owl-theme .owl-nav button.owl-prev { left: 0; }
.npf-detail-hero .wpj-carousel.owl-theme .owl-nav button.owl-next { right: 0; }

.npf-detail-hero .wpj-carousel.owl-theme .owl-nav button.owl-prev::before,
.npf-detail-hero .wpj-carousel.owl-theme .owl-nav button.owl-next::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
}

.npf-detail-hero .wpj-carousel.owl-theme .owl-nav button.owl-prev::before { transform: rotate(-135deg); margin-left: 5px; }
.npf-detail-hero .wpj-carousel.owl-theme .owl-nav button.owl-next::before { transform: rotate(45deg); margin-right: 5px; }

.npf-detail-hero .wpj-carousel.owl-theme .owl-nav button.owl-prev:hover,
.npf-detail-hero .wpj-carousel.owl-theme .owl-nav button.owl-next:hover {
  color: var(--npf-primary) !important;
  background: transparent !important;
}

/* Owl marks an end-of-list arrow `.disabled`, and the whole nav when there is
   only one slide. */
.npf-detail-hero .wpj-carousel.owl-theme .owl-nav button.disabled { opacity: 0.4; cursor: default; }
.npf-detail-hero .owl-nav.disabled { display: none; }

.npf-detail-hero .owl-dots { z-index: 2; }

/* Cover image, when the job has one — same frame as the hero. */
.npf-detail .single-job-cover-top {
  margin-top: 40px;
  border-radius: 7px;
  overflow: hidden;
}
.npf-detail .single-job-cover-top img { width: 100%; display: block; }

/* ---------- Secure banner ---------- */

/* .secure-banner — flat primary, square corners, 127px tall */
.npf-detail .npf-secure-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 127px;
  padding: 0 40px;
  margin-top: 20px;
  background: var(--npf-primary);
  color: #fff;
  box-shadow: var(--npf-shadow-panel);
}

.npf-secure-banner__icon { display: flex; }
.npf-secure-banner__icon svg { width: 70px; height: 70px; }

/* The theme's .secure-info-badge draws its own dark shield from an icon-font
   ::before. The design supplies the outlined white one above, so the theme's
   would sit behind it as a second, differently-coloured badge. */
.npf-detail .npf-secure-banner::before,
.npf-detail .npf-secure-banner::after { content: none !important; display: none !important; }

.npf-detail .npf-secure-banner strong {
  display: block;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  text-transform: capitalize;
  margin-bottom: 6px;
}

.npf-detail .npf-secure-banner span {
  color: #fff;
  font-size: 16px;
  line-height: 26px;
}

/* ---------- Icons ----------
   The design draws every UI icon in the primary blue (the header's search /
   mail / bell set). The theme ships this page's icons in three leftovers from
   the old palette instead — #003366 navy for the icon-font glyphs, near-black
   for the carets, and #82c024 green for the ticks — so they are brought onto
   the one colour here.

   These are all icon-font glyphs painted with `color`, either on an <i> or on
   an h2::before, so a single colour rule covers the lot. `!important` because
   the theme sets several of them that way. */
.npf-detail .icon-before-title h2::before,
.npf-detail .single-job-delivery-time::before,
.npf-detail .js-toggle-angle-icon,
.npf-detail .pck-sidebar-title .dropdown.icon,
.npf-detail .packages-sidebar i.wait.icon,
.npf-detail .packages-sidebar i.refresh.icon,
.npf-detail .pck-sidebar-fields i.checkmark.icon,
.npf-detail .pck-include-list i.checkmark.icon,
.npf-detail .single-job-faq .ui.accordion > .title > i.dropdown.icon,
.npf-detail #pc-packages i.checkmark.icon,
.npf-detail .npf-detail-meta i.icon,
.npf-detail .single-job-rate-delivery i.icon {
  color: var(--npf-primary) !important;
}

/* The comparison table's "not included" mark stays neutral — turning it primary
   would read as an affirmative. */
.npf-detail #pc-packages i.remove.icon { color: var(--npf-g200) !important; }

/* ---------- Sections ---------- */

.npf-detail-section { margin-top: 40px; }

/* Figma "Heading/H4": Inter 600 20/26, 12px above the copy */
.npf-detail .npf-detail-section h2 {
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  color: var(--npf-ink);
  text-transform: capitalize;
  margin: 0 0 12px;
}

.npf-detail .npf-detail-section p {
  color: var(--npf-muted);
  font-size: 16px;
  line-height: 26px;
  margin-bottom: 26px;
}

.npf-detail .npf-detail-section p:last-child { margin-bottom: 0; }

.npf-detail .npf-detail-section li,
.npf-detail .npf-detail-section td,
.npf-detail .npf-detail-section .single-job-job-description {
  color: var(--npf-muted);
  font-size: 16px;
  line-height: 26px;
}

/* Plain discs at a 24px indent — the design runs the three items on one
   continuous 26px baseline. .green-list is the theme's class on the same <ul>;
   its check-mark background would fight the disc. */
.npf-detail .npf-detail-list {
  display: block;
  list-style: disc;
  padding-left: 24px;
  margin: 0;
}

.npf-detail .npf-detail-list li {
  color: var(--npf-muted);
  font-size: 16px;
  line-height: 26px;
  background: none;
  padding-left: 0;
  margin: 0;
}

/* .green-list prefixes each item with an icon-font tick in a ::before. The
   design uses plain discs, so the tick would double up with the marker. */
.npf-detail .npf-detail-list li::before { content: none !important; display: none !important; }

.npf-detail-section__more { margin-top: 16px; }

.npf-detail .npf-detail-section__more a {
  color: var(--npf-primary);
  font-weight: 600;
  text-decoration: none;
}
.npf-detail .npf-detail-section__more a:hover { text-decoration: underline; }

/* The theme wraps every section heading in an icon strip carrying a background
   sprite. The design has none. */
.npf-detail .icon-before-title {
  background: none !important;
  padding: 0 !important;
  min-height: 0;
  margin: 0;
}
.npf-detail .icon-before-title::before,
.npf-detail .icon-before-title::after { display: none !important; }

/* initializations.js turns every .js-toggle-arrow into a Semantic `ui grid` at
   runtime, wraps the heading in a `fourteen wide column` and appends a caret
   column — and that grid carries -1rem margins that would drag the heading out
   of the section. Flatten the injected wrapper back to a plain row; the toggle
   itself is left working, since it is what collapses these sections on mobile. */
.npf-detail .js-toggle-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
}

.npf-detail .js-toggle-wrapper > .column {
  width: auto !important;
  margin: 0;
  padding: 0 !important;
}

.npf-detail .js-toggle-wrapper .dynamically-title { flex: 1 1 auto; }
.npf-detail .js-toggle-wrapper .dynamically-icon { flex: 0 0 auto; }

/* Semantic's .ui.segment paints a bordered white box. The design's sections sit
   directly on the page bed — but only the wrappers the section itself owns are
   flattened, so cards the theme draws deeper (package tabs, review items) keep
   their own separation. */
.npf-detail .npf-detail-section > .ui.segment,
.npf-detail .npf-detail-section > * > .ui.basic.segment {
  border: 0;
  box-shadow: none;
  background: transparent;
  margin: 0;
  padding: 0;
}

/* Only the rule the theme prints directly under a section heading; dividers
   further in are structural and stay. */
.npf-detail .icon-before-title + .ui.divider,
.npf-detail .js-toggle-wrapper + .ui.divider { display: none; }

/* Read more / report links inside the description. */
.npf-detail .read-more-desc {
  display: inline-block;
  margin-top: 12px;
  cursor: pointer;
  color: var(--npf-primary);
  background: none;
  border: 0;
  font-weight: 600;
}

.npf-detail .single-job-job-description img { max-width: 100%; height: auto; }

/* ---------- FAQ ----------
   Semantic's simple accordion renders the questions at 14px in 40%-black with
   a 4px triangle — noticeably the old look next to the redesigned sections.
   Brought onto the design's body scale: 16/26 questions on ink, rules between
   rows, muted answers, and the triangle redrawn as a chevron. */

.npf-detail .single-job-faq .ui.accordion {
  box-shadow: none;
  border: 0;
  background: transparent;
}

.npf-detail .single-job-faq .ui.accordion > .title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0 !important;
  font-family: var(--npf-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
  color: var(--npf-ink) !important;
  border-top: 1px solid var(--npf-line-soft);
  cursor: pointer;
  transition: color var(--npf-t);
}

.npf-detail .single-job-faq .ui.accordion > .title:first-child { border-top: 0; }
.npf-detail .single-job-faq .ui.accordion > .title:hover { color: var(--npf-primary) !important; }

/* The caret moves to the right-hand end. Semantic rotates this <i> by 90deg
   when the row opens, so the chevron is drawn pointing RIGHT at rest — the
   rotation then lands it pointing down, which is the expected direction. */
.npf-detail .single-job-faq .ui.accordion > .title > i.dropdown.icon {
  order: 2;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  margin: 0 0 0 auto !important;
  color: var(--npf-muted);
  opacity: 1;
  transition: transform var(--npf-t), color var(--npf-t);
}

/* The chevron shape itself never moves — its rotation is baked in here and the
   OPEN state turns the parent <i> instead. Animating a pseudo-element's own
   transform proved unreliable in Chrome (the sibling `margin` in the same rule
   applied while the `transform` stayed at its base value), and the parent is an
   ordinary element where the swap is dependable. */
.npf-detail .single-job-faq .ui.accordion > .title > i.dropdown.icon::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: -2px;
}

/* NOTE: no open-state caret rotation or active colour here. Semantic only
   rotates the caret on its *styled* accordion, not the `simple` variant this
   markup uses, and every attempt to add it from CSS was silently ignored — the
   rules parse, match the element (`.title.active`) and carry !important at a
   higher specificity than the base rule, yet never win the cascade in Chrome.
   Since the row still opens and closes correctly, the embellishment was
   dropped rather than left in the file as dead weight. */

.npf-detail .single-job-faq .ui.accordion > .content {
  padding: 0 0 18px !important;
  font-size: 16px;
  line-height: 26px;
  color: var(--npf-muted);
}

.npf-detail .single-job-faq .ui.accordion > .content p {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  color: var(--npf-muted);
}

/* ---------- Packages section (main column) ---------- */

/* ---------- Package comparison table ----------
   Semantic's `celled definition table` ships 14px 40%-black headers on a grey
   wash with hairline borders — the other half of the old look. Rebuilt on the
   design's tokens: 16/26 type, ink headings, --line-soft rules, and the tick /
   cross taking the page's shared icon colour. */

.npf-detail #pc-packages table.ui.table {
  width: 100%;
  border: 1px solid var(--npf-line-soft);
  border-radius: 7px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-family: var(--npf-font-body);
  color: var(--npf-ink);
  background: #fff;
}

.npf-detail #pc-packages table.ui.table th {
  padding: 16px 18px !important;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  text-transform: none;
  color: var(--npf-ink) !important;
  background: var(--npf-bed) !important;
  border-bottom: 1px solid var(--npf-line-soft) !important;
  border-left: 1px solid var(--npf-line-soft) !important;
}

.npf-detail #pc-packages table.ui.table th:first-child { border-left: 0 !important; }

.npf-detail #pc-packages table.ui.table td {
  padding: 16px 18px !important;
  font-size: 16px;
  line-height: 26px;
  color: var(--npf-muted);
  background: #fff;
  border-top: 1px solid var(--npf-line-soft) !important;
  border-left: 1px solid var(--npf-line-soft) !important;
}

.npf-detail #pc-packages table.ui.table td:first-child { border-left: 0 !important; }

/* The definition table's row-label column: Semantic tints it and casts a
   1px inset shadow, both of which fight the flat design. */
.npf-detail #pc-packages table.ui.definition.table tr td:first-child,
.npf-detail #pc-packages table.ui.definition.table tbody tr td:first-child {
  font-weight: 500;
  color: var(--npf-ink) !important;
  background: var(--npf-bed) !important;
  box-shadow: none !important;
}

.npf-detail #pc-packages .pck-name {
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  color: var(--npf-ink) !important;
}

.npf-detail #pc-packages .pck-price,
.npf-detail #pc-packages td.pck-price {
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  color: var(--npf-ink) !important;
}

/* Colour for both marks is set once in the Icons block above; only the size
   belongs to the table. */
.npf-detail #pc-packages i.checkmark.icon,
.npf-detail #pc-packages i.remove.icon { font-size: 18px; }

.npf-detail #pc-packages .pck-center { text-align: center; }

/* The comparison table is the theme's own; keep its structure and let it
   scroll on narrow columns rather than squeezing the cells. */
.npf-detail .npf-detail-section--packages { margin-top: 40px; }
.npf-detail #pc-packages { overflow-x: auto; }
.npf-detail #pc-packages table { min-width: 560px; }

/* ---------- Sidebar: packages card ---------- */

/* .pkg-card — 444 wide, white, radius 7, panel shadow.
   `overflow: visible` on purpose: the theme's buy widget opens its breakdown as
   an absolutely-positioned panel below the button, and hiding the overflow (the
   usual way to round the head) sliced that panel off at the card's edge. The
   head rounds its own top corners instead. */
.npf-pkg-card {
  background: #fff;
  border-radius: 7px;
  overflow: visible;
  box-shadow: var(--npf-shadow-panel);
}

.npf-pkg-card__head {
  display: flex;
  align-items: center;
  height: 75px;
  padding: 0 42px;
  border-radius: 7px 7px 0 0;
  background: var(--npf-primary);
  color: #fff;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -1px;
  text-transform: capitalize;
}

.npf-pkg-card__body { padding: 33px 42px 50px; }

/* The theme nests its widget in .ui.basic.notpadded.segment wrappers that
   carry their own margins. The card supplies the inset now. */
.npf-detail .npf-pkg-card__body > .ui.segment {
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.npf-pkg-card__custom { margin-top: 17px !important; }

/* Package accordion rows — one per tier on jobs that use packages. */
.npf-detail .packages-sidebar {
  border: 1px solid var(--npf-g100) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: #fff !important;
}

/* The selected tier carries a navy `box-shadow: #003366 0 0 2px` glow that
   reads as a smudge against the flat card. The blue border alone marks it. */
.npf-detail .packages-sidebar.selected,
.npf-detail .ui.segment.packages-sidebar.selected {
  border-color: var(--npf-primary) !important;
  box-shadow: none !important;
}

.npf-detail .pck-sidebar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
}

/* 16px, same as every other bold amount in the sidebar. */
.npf-detail .pck-price-sidebar {
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  color: var(--npf-ink);
}

.npf-detail .pck-title-sidebar {
  color: var(--npf-muted);
  font-size: 16px;
  line-height: 26px;
}

.npf-detail .pck-sidebar-title .right { margin-left: auto; }

/* The expanded package body sat flush against the card's border because
   Semantic's `.ui.accordion:not(.styled) .title ~ .content:not(.ui)` zeroes the
   side padding and out-specifies a plain class pair. Matched here so the
   description lines up with the 16px inset the title above it already uses. */
.npf-detail .packages-sidebar .content,
.npf-detail .packages-sidebar .ui.accordion .title ~ .content,
.npf-detail .packages-sidebar .ui.accordion .title ~ .content:not(.ui) {
  padding: 0 16px 16px !important;
}

/* The theme wraps the body in a <p>, which carries its own margins. */
.npf-detail .packages-sidebar .content > p { margin: 0; padding: 0; }

/* ---------- Package body typography ----------
   The expanded package read at three different scales — 14/20 for the delivery
   line and the compare link, 15.99/20 for the package name, 16/22.8 for the
   feature list — against the 16/26 the rest of the page uses. All brought onto
   the one rhythm so the sidebar copy matches the description column. */

.npf-detail .packages-sidebar .content .bold {
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  color: var(--npf-ink);
}

.npf-detail .pck-sidebar-name {
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 16px !important;
  line-height: 26px !important;
  color: var(--npf-ink);
  margin-top: 14px;
}

.npf-detail .pck-sidebar-desc,
.npf-detail .pck-sidebar-fields,
.npf-detail .pck-sidebar-fields p,
.npf-detail .pck-sidebar-fields div {
  font-family: var(--npf-font-body);
  font-weight: 400;
  font-size: 16px !important;
  line-height: 26px !important;
  color: var(--npf-muted);
  letter-spacing: normal;
}

.npf-detail .pck-sidebar-fields p { margin: 6px 0 0; }

/* The customizer prints an inline `.packages-sidebar .pck-sidebar-compare-packages
   { color: #003366 !important }` — same specificity as a plain .npf-detail pair,
   and later in the document, so it won the tie. One class more settles it. */
.npf-detail .packages-sidebar .pck-sidebar-compare-packages,
.npf-detail .pck-sidebar-compare-packages {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--npf-font-body);
  font-weight: 500;
  font-size: 16px !important;
  line-height: 26px !important;
  color: var(--npf-primary) !important;
  text-decoration: none;
}

.npf-detail .packages-sidebar .pck-sidebar-compare-packages:hover,
.npf-detail .pck-sidebar-compare-packages:hover { text-decoration: underline; }

/* The tick sits in the button's own tinted block, so it has to read white
   rather than take the page's primary icon colour. */
.npf-detail .packages-sidebar button.ui.button i.icon,
.npf-detail .packages-sidebar .ui.button i.checkmark.icon,
.npf-detail .npf-detail-section--packages button.ui.button i.icon,
.npf-detail .pck-order button.ui.button i.icon {
  color: #fff !important;
  opacity: 1;
}
.npf-detail .pck-sidebar-name {
  font-weight: 600;
  color: var(--npf-ink);
  margin-top: 10px;
}
.npf-detail .pck-sidebar-desc,
.npf-detail .pck-sidebar-fields {
  color: var(--npf-muted);
  font-size: 16px;
  line-height: 26px;
}

/* The price breakdown the "Buy now for" button drops down.
   The theme leaves this panel transparent and lets the `.ui.segment` inside it
   supply the white — which the list reset below removes — so the panel is what
   carries the surface now. Without it the rows floated over the card and
   collided with "Request custom offer". */
.npf-detail .sidebar-buy-job-form {
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  width: auto;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--npf-g100);
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(19, 24, 36, 0.14);
}

/* Rows inside the buy form — the design's .pkg-row rhythm applied to the
   theme's own list items. */
.npf-detail .right_button_buy,
.npf-detail .job-order-items {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* .pkg-row — label left, amount right, both on the same baseline. */
.npf-detail .right_button_buy > li,
.npf-detail .job-order-items > li {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 20px;
  border: 0;
  color: var(--npf-ink);
  font-size: 16px;
  line-height: 26px;
}

.npf-detail .right_button_buy > li:last-child,
.npf-detail .job-order-items > li:last-child { margin-bottom: 0; }

/* The label wraps every half of the row in one <label>, and how many halves
   there are depends on the job: a fixed-price job prints
   `<span>Job Quantity</span><span class=extra-price-inside>…</span>`, while a
   monthly one adds a second pair — `Number of Months:` and an .amount_section.
   Spreading all four across a single flex line is what produced the ragged,
   mismatched column in the review, so this is a two-column grid instead: label
   left, value right, one pair per row, however many pairs there are.

   The <br> separators must stay display:none — a grid would otherwise promote
   each one to a cell of its own and knock every pair out of alignment. */
.npf-detail .main_amount_box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 14px;
  width: 100%;
  margin: 0;
}

.npf-detail .main_amount_box br { display: none; }

/* Labels — the design's .pkg-row__label: Inter 400 16/26 on ink. */
.npf-detail .main_amount_box > span:not(.extra-price-inside):not(.amount_section) {
  min-width: 0;
  font-family: var(--npf-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--npf-ink);
}

/* Values — the design's .pkg-row strong: Inter 600 18.243/23.716, right-set.
   The month count is a value too, so it takes the same treatment rather than
   inheriting whatever the theme left it at. */
.npf-detail .main_amount_box > .extra-price-inside,
.npf-detail .main_amount_box > .amount_section {
  justify-self: end;
  text-align: right;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  color: var(--npf-ink);
  white-space: nowrap;
}

/* Every bold amount in the buy panel is one size — 16px — so the rows read as
   a single column rather than three different weights of number. */
.npf-detail .extra-price-inside,
.npf-detail .processingfee-amount {
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  color: var(--npf-ink);
}

/* The processing-fee row's label is a bare TEXT NODE, not an element. In a flex
   container each contiguous text run becomes an anonymous item, and the run
   here carries the source's leading indentation — which is what pushed the
   label 15px in while `space-between` left the amount 16px short of the right
   edge. A two-column grid places the text run in column 1 and the amount in
   column 2 regardless, and `justify-self` pins each to its own edge. */
.npf-detail .right_button_buy > li.js-processingfees,
.npf-detail .job-order-items > li.js-processingfees,
.npf-detail .right_button_buy > li.shipping-cost,
.npf-detail .job-order-items > li.shipping-cost,
.npf-detail div.js-processingfees,
.npf-detail div.shipping {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 14px;
  border-top: 1px solid var(--npf-line-soft);
  padding-top: 16px;
  text-indent: 0;
}

/* No explicit `grid-column` here on purpose: pinning the amount to column 2
   made it an explicitly-placed item, and auto-placement then pushed the
   anonymous text run into that same column so the two overlapped. Left to
   normal document order the text takes column 1 and the amount column 2. */
.npf-detail .js-processingfees > .processingfee-amount,
.npf-detail .shipping-cost > .processingfee-amount,
.npf-detail .shipping > .processingfee-amount {
  justify-self: end;
  text-align: right;
  white-space: nowrap;
}

/* These rows carry the theme's `.cf` clearfix, which is a ::before + ::after
   pair with `content: ""`. Harmless on a block, but a grid or flex container
   promotes both to REAL items — so the four cells went ::before, label,
   amount, ::after, and the amount dropped to a second row on the wrong side.
   Killing the pair is what puts label and amount back on one line. */
.npf-detail .right_button_buy > li::before,
.npf-detail .right_button_buy > li::after,
.npf-detail .job-order-items > li::before,
.npf-detail .job-order-items > li::after,
.npf-detail .js-processingfees::before,
.npf-detail .js-processingfees::after,
.npf-detail .shipping::before,
.npf-detail .shipping::after,
.npf-detail .shipping-cost::before,
.npf-detail .shipping-cost::after,
.npf-detail .wpj-buy-extra-details::before,
.npf-detail .wpj-buy-extra-details::after {
  content: none !important;
  display: none !important;
}

/* "Buy now for" — the theme's primary purchase button. It appears twice: in the
   sidebar widget and again at the foot of the "Additional services" section.
   Semantic's `right labeled icon` variant pins a caret inside it, so `display`
   is deliberately left to the theme: turning the button into a flex container
   makes its label and its <strong class="total"> two anonymous flex items, and
   flex drops the whitespace between them — the price rendered as "FOR708.75".
   Centring is done with line-height instead.

   The background needs !important: the theme's customizer prints an inline
   `.ui.primary.huge.fluid.button.uppercase { background: #003366 !important }`,
   which nothing else can outrank. */
.npf-detail .sidebar-buy-job .ui.primary.button,
.npf-detail .npf-pkg-card__body .ui.primary.button,
.npf-detail .npf-pkg-card__body button.ui.button,
.npf-detail .npf-detail-section .ui.primary.button,
.npf-detail .npf-detail-section button.ui.primary.button {
  width: 100%;
  height: 54px;
  padding-block: 0;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 54px;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  color: #fff !important;
  background: var(--npf-primary) !important;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--npf-t), transform var(--npf-t);
}

.npf-detail .sidebar-buy-job .ui.primary.button:hover,
.npf-detail .npf-pkg-card__body .ui.primary.button:hover,
.npf-detail .npf-pkg-card__body button.ui.button:hover,
.npf-detail .npf-detail-section .ui.primary.button:hover,
.npf-detail .npf-detail-section button.ui.primary.button:hover {
  background: var(--npf-primary-dark) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* The customizer's inline rule is `.ui.primary.huge.fluid.button.uppercase`
   (five classes) with !important, so !important alone loses the tie — these
   repeat enough of the same classes to outrank it. Only the fill is restated;
   everything else is already set above.

   This is what repaints the purchase buttons from the theme's configured
   #003366 to the design's --primary. Drop this block to keep the navy. */
.npf-detail .npf-pkg-card .ui.primary.huge.fluid.button,
.npf-detail .npf-detail-section .ui.primary.huge.fluid.button {
  background: var(--npf-primary) !important;
}

.npf-detail .npf-pkg-card .ui.primary.huge.fluid.button:hover,
.npf-detail .npf-detail-section .ui.primary.huge.fluid.button:hover {
  background: var(--npf-primary-dark) !important;
}

/* "Select this package" in the mobile tabs is a `.ui.large.fluid.icon.button`
   with no `.primary`, so it misses every selector above and kept the theme's
   navy. Same for the comparison table's order cell. */
.npf-detail .npf-detail-section--packages button.ui.button,
.npf-detail .pck-order button.ui.button {
  height: 54px;
  padding-block: 0;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 54px;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  color: #fff !important;
  background: var(--npf-primary) !important;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  transition: background var(--npf-t);
}

.npf-detail .npf-detail-section--packages button.ui.button:hover,
.npf-detail .pck-order button.ui.button:hover {
  background: var(--npf-primary-dark) !important;
}

/* The comparison table's highlighted column has its own inline !important rule
   — `.pc-packages .pck-center.pck-order.active .ui.button { color: #003366 }`
   — which left navy text on the blue fill. Matched class-for-class plus
   .npf-detail so it loses the tie rather than winning it. */
.npf-detail .pc-packages .pck-center.pck-order.active .ui.button { color: #fff !important; }

/* The theme leaves floated children in .order-extras / .cf, which collapsed the
   section and left a tall empty gap under the purchase button. */
.npf-detail .npf-detail-section::after,
.npf-detail .order-extras::after {
  content: "";
  display: table;
  clear: both;
}

/* Request custom offer / Edit job — the design's ghost button. */
.npf-detail .npf-pkg-card__custom .ui.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  padding: 0 24px;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--npf-ink);
  background: #fff;
  border: 1px solid var(--npf-g100);
  border-radius: 6px;
  box-shadow: none;
  transition: border-color var(--npf-t), color var(--npf-t);
}

.npf-detail .npf-pkg-card__custom .ui.button:hover {
  border-color: var(--npf-primary);
  color: var(--npf-primary);
  background: #fff;
}

/* ---------- Coupon row ----------
   The design's .pkg-coupon: a 44px field with a 144px uppercase button sitting
   on top of its right border. The theme calls the same thing
   .apply-dicounts-wrapper and wraps the field in a Semantic .ui.icon.input. */

/* `align-items: center` rather than the default stretch: Semantic's
   `.ui.icon.input` wrapper carries its own line-height, and when it resolved
   taller than the 44px button the button dropped below the field's baseline. */
.npf-detail .apply-dicounts-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-top: 24px;
}

.npf-detail .apply-dicounts-wrapper .ui.input {
  display: flex;
  align-items: center;
  flex: 1 1 160px;
  min-width: 0;
  height: 44px;
  margin: 0;
}

.npf-detail .apply-dicounts-wrapper .ui.input > input { height: 44px; }

.npf-detail .discount_status {
  flex: 1 0 100%;
  margin: 0 0 10px !important;
  font-size: 14px;
  line-height: 20px;
}

.npf-detail .discount_status:empty { display: none !important; }

.npf-detail .npf-pkg-card .discount-btn,
.npf-detail .npf-detail-section .discount-btn {
  flex: none;
  width: 144px;
  height: 44px;
  margin-left: -1px;
  padding: 0 16px;
  font-family: var(--npf-font-ui);
  font-weight: 700;
  font-size: 14px;
  line-height: 44px;
  letter-spacing: 0.168px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #fff !important;
  background: var(--npf-primary-light) !important;
  border: 0;
  border-radius: 2px;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--npf-t);
}

.npf-detail .npf-pkg-card .discount-btn:hover,
.npf-detail .npf-detail-section .discount-btn:hover { background: #4aa3d8 !important; }

/* ---------- Form controls ----------
   The design's .form-input: 44px tall, 2px radius, Public Sans 14/20, 15px
   inset, --g100 border, primary focus ring. Applied to every control the
   theme's forms put on this page (coupon, report modal, custom offer). */

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

.npf-detail textarea {
  height: auto;
  min-height: 120px;
  resize: vertical;
}

.npf-detail input::placeholder,
.npf-detail textarea::placeholder { color: var(--npf-g500); }

.npf-detail input:focus,
.npf-detail textarea:focus,
.npf-detail select:focus,
.npf-detail .ui.input > input:focus {
  outline: none;
  border-color: var(--npf-primary);
  box-shadow: 0 0 0 3px rgba(63, 109, 179, 0.14);
}

.npf-detail .field > label,
.npf-detail .ui.form label:not(.main_amount_box) {
  display: block;
  font-family: var(--npf-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #010810;
  margin-bottom: 8px;
}

/* Semantic's dropdown is a div, not a select, so it needs the same shell. */
.npf-detail .ui.selection.dropdown {
  min-height: 44px;
  padding: 11px 15px;
  font-family: var(--npf-font-ui);
  font-size: 14px;
  line-height: 20px;
  border: 1px solid var(--npf-g100);
  border-radius: 2px;
  box-shadow: none;
}

.npf-detail .ui.selection.dropdown .menu {
  border-color: var(--npf-g100);
  border-radius: 0 0 2px 2px;
  box-shadow: 0 12px 28px rgba(19, 24, 36, 0.14);
}

/* ---------- Checkboxes, radios and quantity steppers ---------- */

/* Extras are Semantic checkboxes; the design's box is 20px, 6px radius,
   --g300 border, filling to --primary when checked. Semantic's own
   `.ui.checkbox label:before` is more specific than a plain class pair, hence
   the explicit border-color. */
.npf-detail .ui.checkbox label::before,
.npf-detail .ui.radio.checkbox label::before {
  width: 20px;
  height: 20px;
  border: 1px solid var(--npf-g300) !important;
  border-color: var(--npf-g300) !important;
  background: #fff;
  transition: background var(--npf-t), border-color var(--npf-t);
}

.npf-detail .ui.checkbox,
.npf-detail .ui.checkbox > label {
  min-width: 20px;
  min-height: 20px;
}

.npf-detail .ui.checkbox label::before { border-radius: 6px; }
.npf-detail .ui.radio.checkbox label::before { border-radius: 50%; }

.npf-detail .ui.checkbox input:checked ~ label::before,
.npf-detail .ui.radio.checkbox input:checked ~ label::before {
  background: var(--npf-primary);
  border-color: var(--npf-primary);
}

.npf-detail .ui.checkbox input:checked ~ label::after { color: #fff; }
.npf-detail .ui.radio.checkbox input:checked ~ label::after { background: #fff; }

.npf-detail .ui.checkbox input:focus-visible ~ label::before {
  box-shadow: 0 0 0 3px rgba(63, 109, 179, 0.3);
}

/* The +/- quantity stepper the theme puts next to each extra. The customizer
   prints an inline `.amount_section a { background: #003366 !important }`, so
   the neutral outline the rest of this commerce UI uses needs !important too. */
.npf-detail .amount_section {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}

.npf-detail .amount_rmv,
.npf-detail .amount_add {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--npf-ink) !important;
  background: #fff !important;
  border: 1px solid var(--npf-g100) !important;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color var(--npf-t), color var(--npf-t);
}

.npf-detail .amount_rmv:hover,
.npf-detail .amount_add:hover {
  border-color: var(--npf-primary) !important;
  color: var(--npf-primary) !important;
}

.npf-detail .amount_section .current_amount {
  width: 44px;
  height: 28px;
  padding: 0;
  text-align: center;
  font-family: var(--npf-font-ui);
  font-size: 14px;
  border-radius: 4px;
}

/* Each extra is one <label> holding the checkbox and a details block. Laid out
   as: title | price on the first line, delivery note | stepper on the second.
   `!important` because Semantic's own `.ui.form label` rules are more specific
   than this pair and were keeping the label display:block, which stacked the
   checkbox above a full-width details grid and pushed the price past the
   panel's right edge. */
.npf-detail .job-order-items > li > label:not(.main_amount_box),
.npf-detail .right_button_buy > li > label:not(.main_amount_box) {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  margin: 0;
}

.npf-detail .job-order-items .ui.checkbox,
.npf-detail .right_button_buy .ui.checkbox { flex: none; }

/* `flex: 1 1 auto` + `min-width: 0`, never `width: 100%` — the details block
   shares the row with the checkbox, so a full-width child overflows by exactly
   the checkbox's width. */
.npf-detail .wpj-buy-extra-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.npf-detail .wpj-buy-extra-details br { display: none; }

.npf-detail .wpj-buy-extra-details > span:first-of-type { grid-column: 1; }

.npf-detail .wpj-buy-extra-details .extra-price-inside {
  grid-column: 2;
  justify-self: end;
  white-space: nowrap;
}

.npf-detail .wpj-buy-extra-details .description {
  grid-column: 1;
  color: var(--npf-muted);
  font-size: 14px;
  line-height: 20px;
}

.npf-detail .wpj-buy-extra-details .amount_section { grid-column: 2; justify-self: end; }

/* ---------- Mobile package tabs ---------- */

/* Semantic renders this as `.ui.pointing.secondary.menu`: a 2px rule under the
   whole strip and an underline-style active item. Every selector below repeats
   enough of that class chain to outrank it — a plain `.npf-detail .pacakges-tabs`
   pair loses, which is why the old bordered-box tabs survived on mobile.

   Redesigned as a segmented control: three equal chips in a tinted track, the
   active one filled with the primary. */
.npf-detail .ui.pointing.secondary.pacakges-tabs.menu,
.npf-detail .pacakges-tabs.menu {
  display: flex;
  gap: 6px;
  padding: 5px;
  margin: 0 0 16px;
  background: var(--npf-bed);
  border: 1px solid var(--npf-line-soft) !important;
  border-bottom: 1px solid var(--npf-line-soft) !important;
  border-radius: 10px;
  box-shadow: none;
  min-height: 0;
}

.npf-detail .ui.pointing.secondary.pacakges-tabs.menu .item,
.npf-detail .pacakges-tabs.menu > .item {
  flex: 1 1 0;
  justify-content: center;
  align-items: center;
  padding: 10px 8px !important;
  margin: 0 !important;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  color: var(--npf-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px;
  transition: background var(--npf-t), color var(--npf-t);
}

.npf-detail .ui.pointing.secondary.pacakges-tabs.menu .item:hover,
.npf-detail .pacakges-tabs.menu > .item:hover {
  color: var(--npf-ink) !important;
  background: rgba(255, 255, 255, 0.75) !important;
}

.npf-detail .ui.pointing.secondary.pacakges-tabs.menu .item.active,
.npf-detail .ui.pointing.secondary.pacakges-tabs.menu .active.item,
.npf-detail .pacakges-tabs.menu > .item.active {
  color: #fff !important;
  background: var(--npf-primary) !important;
  border: 0 !important;
  box-shadow: 0 1px 4px rgba(19, 24, 36, 0.12);
}

/* The label is a nested span carrying its own #003366, so the chip's colour
   never reached the text — `inherit` hands it back. */
.npf-detail .ui.pointing.secondary.pacakges-tabs.menu .item .pck-tab-title,
.npf-detail .pacakges-tabs.menu .item .pck-tab-title,
.npf-detail .pacakges-tabs .item span { color: inherit !important; }

/* Semantic's pointing menu draws a caret under the active item. */
.npf-detail .ui.pointing.secondary.pacakges-tabs.menu .item::before,
.npf-detail .ui.pointing.secondary.pacakges-tabs.menu .item::after {
  content: none !important;
  display: none !important;
}

.npf-detail .packages-mobile.tab {
  border: 1px solid var(--npf-g100) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  padding: 20px !important;
}

/* ---------- Modals (report job, request custom offer) ----------

   Semantic MOVES a modal to <body> when it opens (`detachable`), so it leaves
   .npf-detail and every rule scoped to it stops matching — which is why the
   custom-offer form kept its stock green submit and 3em file glyph. WordPress
   puts `single-job` on <body> for these pages, so that is the scope root here.
   Everything below therefore reads `body.single-job`, not `.npf-detail`.

   The variables live on .npf-detail, so the few that are needed are restated
   on the modal itself. */

body.single-job .ui.modal {
  --npf-primary: #4f84c3;
  --npf-primary-dark: #3e6ea6;
  --npf-ink: #020b18;
  --npf-muted: #677489;
  --npf-line-soft: #eef1f6;
  --npf-g100: #e4e7e9;
  --npf-g500: #77878f;
  --npf-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --npf-font-ui: "Public Sans", "Inter", system-ui, sans-serif;
  --npf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --npf-t: 0.28s var(--npf-ease);

  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(19, 24, 36, 0.24);
  font-family: var(--npf-font-body);
}

/* Header. The custom-offer modal uses `.ui.icon.header`, which centres a 3em
   glyph above the title — the big grey page icon in the design review. The
   design has a plain left-aligned heading with a rule under it. */
body.single-job .ui.modal > .header,
body.single-job .ui.modal > .ui.icon.header {
  display: block;
  text-align: left;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  color: var(--npf-ink);
  background: #fff;
  border-bottom: 1px solid var(--npf-line-soft);
  border-radius: 10px 10px 0 0;
  padding: 20px 28px;
  margin: 0;
}

body.single-job .ui.modal > .ui.icon.header > i.icon { display: none !important; }

body.single-job .ui.modal > .ui.icon.header p,
body.single-job .ui.modal > .header p {
  margin: 0;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  color: var(--npf-ink);
}

body.single-job .ui.modal > .content { padding: 24px 28px; }

body.single-job .ui.modal > .actions {
  background: #fff;
  border-top: 1px solid var(--npf-line-soft);
  border-radius: 0 0 10px 10px;
  padding: 18px 28px;
}

body.single-job .ui.modal > .close.icon {
  top: 18px;
  right: 20px;
  color: var(--npf-muted);
}

/* Form controls inside a detached modal — same tokens as the page's. */
body.single-job .ui.modal input[type="text"],
body.single-job .ui.modal input[type="email"],
body.single-job .ui.modal input[type="number"],
body.single-job .ui.modal textarea,
body.single-job .ui.modal select,
body.single-job .ui.modal .ui.input > input {
  width: 100%;
  padding: 11px 15px;
  font-family: var(--npf-font-ui);
  font-size: 14px;
  line-height: 20px;
  color: var(--npf-ink);
  background: #fff;
  border: 1px solid var(--npf-g100);
  border-radius: 2px;
  box-shadow: none;
  transition: border-color var(--npf-t), box-shadow var(--npf-t);
}

body.single-job .ui.modal textarea {
  min-height: 140px;
  resize: vertical;
}

body.single-job .ui.modal input:focus,
body.single-job .ui.modal textarea:focus,
body.single-job .ui.modal select:focus {
  outline: none;
  border-color: var(--npf-primary);
  box-shadow: 0 0 0 3px rgba(63, 109, 179, 0.14);
}

body.single-job .ui.modal ::placeholder { color: var(--npf-g500); }

body.single-job .ui.modal .ui.selection.dropdown {
  min-height: 44px;
  padding: 11px 15px;
  font-family: var(--npf-font-ui);
  font-size: 14px;
  border: 1px solid var(--npf-g100);
  border-radius: 2px;
  box-shadow: none;
}

/* uploadifive renders "Select file" as a Semantic labeled-icon DIV with the
   default grey fill. Same neutral outline as the page's other secondary
   controls. The real <input type=file> is overlaid on it, so only paint. */
body.single-job .ui.modal .uploadifive-button {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px 0 44px;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 44px;
  text-transform: none;
  color: var(--npf-ink) !important;
  background: #fff !important;
  border: 1px solid var(--npf-g100) !important;
  border-radius: 6px;
  box-shadow: none;
  cursor: pointer;
  transition: border-color var(--npf-t), color var(--npf-t);
}

body.single-job .ui.modal .uploadifive-button:hover {
  border-color: var(--npf-primary) !important;
  color: var(--npf-primary) !important;
}

/* Semantic paints the labelled icon's block white on a coloured fill; on the
   outline button that left an invisible paperclip. */
body.single-job .ui.modal .ui.button.uploadifive-button > i.icon,
body.single-job .ui.modal .uploadifive-button > .icon {
  background: transparent !important;
  border: 0 !important;
  color: var(--npf-ink) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

body.single-job .ui.modal .uploadifive-queue { margin-top: 12px; }

/* The form's own action bar (a plain .actions div inside the form, not
   Semantic's modal actions). */
body.single-job .custom-offers-default-container .actions {
  display: flex;
  justify-content: flex-end;
  background: #fff;
  border-top: 1px solid var(--npf-line-soft);
  padding: 18px 0 0;
  margin-top: 20px;
}

/* Submit / cancel. Semantic's `.ui.positive.button` (three classes) paints the
   green, so these carry a class more plus !important — the customizer also
   prints an inline `button.ui.button` fill. */
body.single-job .ui.positive.button,
body.single-job .ui.positive.button.custom-offer-btn,
body.single-job .ui.modal .ui.positive.button,
body.single-job .ui.negative.button,
body.single-job .ui.modal .ui.negative.button {
  height: 46px;
  padding: 0 24px;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 46px;
  text-transform: none;
  letter-spacing: normal;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--npf-t);
}

body.single-job .ui.positive.button,
body.single-job .ui.positive.button.custom-offer-btn,
body.single-job .ui.modal .ui.positive.button {
  color: #fff !important;
  background: var(--npf-primary) !important;
}

body.single-job .ui.positive.button:hover,
body.single-job .ui.modal .ui.positive.button:hover { background: var(--npf-primary-dark) !important; }

/* Semantic's labeled-icon variant floats the tick in its own tinted block.
   Deliberately limited to the positive (submit) button — a blanket
   `.ui.labeled.icon.button > .icon` also caught the outline "Select file"
   control and painted its paperclip white on white. */
body.single-job .ui.positive.labeled.icon.button > .icon,
body.single-job .ui.modal .ui.positive.labeled.icon.button > .icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
}

body.single-job .ui.negative.button,
body.single-job .ui.modal .ui.negative.button {
  color: var(--npf-ink) !important;
  background: #fff !important;
  border: 1px solid var(--npf-g100) !important;
  line-height: 44px;
}

body.single-job .ui.negative.button:hover,
body.single-job .ui.modal .ui.negative.button:hover {
  border-color: var(--npf-primary) !important;
  color: var(--npf-primary) !important;
}

/* Status / validation messages the form drops in above the fields. */
body.single-job .custom-offers-msg-target:empty,
body.single-job .custom-offers-status-container:empty { display: none; }

body.single-job .ui.modal .ui.message {
  border-radius: 6px;
  box-shadow: none;
  font-family: var(--npf-font-body);
  font-size: 14px;
  line-height: 20px;
}

/* ---------- Sentence case ----------
   The theme tags its calls to action with `.uppercase`, which the design does
   not use — its buttons read "Continue", "Request custom offer". The class also
   sits on markup this plugin does not own, so the reset is applied only to the
   buttons already restyled above, on this page and its modals. */
body.single-job .npf-detail .npf-pkg-card .ui.button,
body.single-job .npf-detail .npf-detail-section .ui.primary.button,
body.single-job .npf-detail .npf-detail-section--packages button.ui.button,
body.single-job .npf-detail .npf-seller-card .ui.button,
body.single-job .ui.modal .ui.button { text-transform: none !important; }

/* "Report this job" sits under the description as a grey Semantic label. */
.npf-detail #report-jobs-link .ui.label {
  background: transparent;
  color: var(--npf-muted);
  font-family: var(--npf-font-body);
  font-weight: 500;
  font-size: 14px;
  padding: 0;
  cursor: pointer;
}

.npf-detail #report-jobs-link .ui.label:hover { color: var(--npf-primary); }

/* ---------- Sidebar: seller card ---------- */

/* .seller-card — 444 wide, 50/42 inset, centred */
.npf-seller-card {
  background: #fff;
  border-radius: 7px;
  padding: 50px 42px;
  text-align: center;
  box-shadow: var(--npf-shadow-panel);
}

.npf-detail .npf-seller-card .ui.segment {
  border: 0;
  box-shadow: none;
  background: transparent;
  margin: 0;
  padding: 0;
}

.npf-detail .npf-seller-card .round-avatar {
  display: inline-block;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
}

.npf-detail .npf-seller-card .user-img-container { position: relative; display: inline-block; }

.npf-detail .npf-seller-card h3 {
  font-family: var(--npf-font-headline);
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  color: #010810;
  margin: 7px 0 0;
}

.npf-detail .npf-seller-card h3 a { color: inherit; text-decoration: none; }

.npf-detail .npf-seller-card .user-info-subtitle,
.npf-detail .npf-seller-card .last-seen {
  color: var(--npf-muted);
  font-size: 16px;
  line-height: 26px;
}

/* The bio is the only left-aligned thing in the card, per the design. */
.npf-detail .npf-seller-card .user-bio {
  color: var(--npf-muted);
  font-size: 16px;
  line-height: 26px;
  text-align: left;
  margin: 19px 0 36px;
}

.npf-detail .npf-seller-card .ui.fluid.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  padding: 0 24px;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  text-transform: none;
  color: #fff;
  background: var(--npf-primary);
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  transition: background var(--npf-t), transform var(--npf-t);
}

.npf-detail .npf-seller-card .ui.fluid.button:hover {
  background: var(--npf-primary-dark);
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- Sidebar: related topics ---------- */

.npf-topics-card {
  background: #fff;
  border-radius: 7px;
  padding: 50px 38px 49px;
  box-shadow: var(--npf-shadow-panel);
}

/* M3 headline/medium: Roboto 400 28/36 */
.npf-detail .npf-topics-card__title {
  font-family: var(--npf-font-headline);
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
  color: var(--npf-ink);
  margin: 0 0 13px;
}

/* The theme prints the tags as bare <a> siblings, so the grid is applied to
   the wrapper and every child becomes a chip. */
.npf-topics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 7px;
  row-gap: 6px;
}

/* `font-size` needs !important: front.min.css sets `.sidebar-job-tags a
   { font-size: 1rem !important }`, and the theme's root font-size makes that
   14px — the one size on the page that broke from the design's 16px body. */
.npf-detail .npf-topics a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  text-align: center;
  font-family: var(--npf-font-body);
  font-weight: 400;
  font-size: 16px !important;
  line-height: 26px;
  color: var(--npf-ink);
  background: #fff;
  border: 1px solid var(--npf-primary-tint);
  border-radius: 4px;
  padding: 3px 10px;
  text-decoration: none;
  transition: background var(--npf-t), border-color var(--npf-t), color var(--npf-t);
}

.npf-detail .npf-topics a:hover {
  border-color: var(--npf-primary);
  color: var(--npf-primary);
}

/* A lone trailing tag on an odd row reads better full width. */
.npf-detail .npf-topics a:last-child:nth-child(odd) { grid-column: 1 / -1; }

.npf-detail .npf-topics-card__views {
  margin: 13px 0 0;
  color: var(--npf-muted);
  font-size: 16px;
  line-height: 26px;
}

.npf-side-widgets {
  background: #fff;
  border-radius: 7px;
  padding: 32px 38px;
  box-shadow: var(--npf-shadow-panel);
}

/* ---------- "Other jobs by …" ----------
   The section carries .npf-recommend, so npf-dashboard.css supplies the whole
   expert-card treatment (media box, tag row, title, and the primary-light hover
   fill). Only what is specific to this page is set here. */

/* The theme's own container is `ui three cards`, not the dashboard's
   `.row.wpj-load-more-target`, so it needs its own grid line.

   NO `!important` on `display`: the section's heading is a .js-toggle-arrow,
   and initializations.js collapses it with jQuery slideUp, which finishes by
   setting an inline `display: none`. An !important stylesheet declaration beats
   an inline one, so the grid could never hide and the expand/collapse did
   nothing. Plain specificity already outranks Semantic's `.ui.cards` (0,2,0),
   so the flag was never needed. */
.npf-detail .npf-recommend .ui.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 14.6px;
  row-gap: 35px;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* iscu-public.css carries `.suggested-jobs-col .ui.card > .image img
   { width: 145px !important }` — written for the old circular-avatar card, and
   more specific than the dashboard's `.npf-recommend .iscu_listings_user_badge`,
   so the tier badge inflated to 145px and swallowed the photo. Matched
   class-for-class plus .npf-detail to win it back. The photo itself is
   answered by the same rule pair one line down. */
/* Every declaration in that rule has to be answered, not just the size: it also
   sets `left: 50% !important; translate: -50%` (which centred the badge over
   the face instead of pinning it top-right), a 75% border-radius, a 1px border
   and an #acbdc5 wash. */
/* The tier shield is not shown on cards — it ranked freelancers by a level the
   platform assigns, in the corner of a card a nonprofit reads as a quality
   mark. Same call as on the dashboard and profile grids (npf-dashboard.css),
   the listing routes (npf-search.css) and the home and expert cards. Hidden
   rather than unhooked: the badge is printed by the child theme's card template
   and only repositioned here, so the third-party template is left alone.

   Not scoped to `> .image`, so it is caught whether or not the card script has
   moved it onto the photo yet.

   The positioning below is kept, commented-in, so restoring the badge is a
   matter of deleting this rule. */
.npf-detail .suggested-jobs-col .iscu_listings_user_badge {
  display: none !important;
}

.npf-detail .suggested-jobs-col .ui.card > .image img.iscu_listings_user_badge {
  position: absolute;
  top: 14.6px;
  right: 15px;
  left: auto !important;
  bottom: auto !important;
  translate: none;
  transform: none !important;
  z-index: 3;
  width: 50px !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  object-fit: contain;
  pointer-events: none;
}

.npf-detail .suggested-jobs-col .ui.card > .image img:not(.iscu_listings_user_badge) {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  left: auto !important;
  translate: none;
  border: 0 !important;
  border-radius: 0 !important;

  /* `background-color: transparent !important` used to close this rule, and it
     is why these cards showed a cut-out portrait floating on white while the
     identical card on a profile or the dashboard stood it on the design's slate
     wash. The colour is not iscu's to undo here: the theme's card template
     prints the photo as an INLINE `background-image` on this same <img> and
     pairs it with an inline `background-color: #acbdc5`, which is the backdrop
     the cut-outs are meant to stand on. Only an !important declaration could
     beat that inline value — so this rule was the one thing on the page
     removing it.

     npf-dashboard.css reached the same conclusion for the profile and dashboard
     grids and left the line commented out with a note; this file kept it, so
     the two screens disagreed about the same card. Answering iscu's wash was
     never needed anyway: iscu-public.css:244 sets `background-color: #acbdc5`
     WITHOUT !important, and the inline value already outranks it — at the same
     colour. Every other declaration above stays, because those iscu really does
     mark !important. */
}

/* The section is a white panel; its heading gets the same primary bar the
   Packages card wears, rounded and inset by the panel's own padding. */
.npf-detail .single-job-other-job > .ui.segment {
  background: #fff;
  border: 0;
  border-radius: 7px;
  box-shadow: var(--npf-shadow-panel);
  padding: 20px;
  margin: 0;
}

.npf-detail .single-job-other-jobs-title {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 0 24px !important;
  margin: 0 0 20px !important;
  background: var(--npf-primary);
  border-radius: 7px;
}

/* No `capitalize` here, unlike the Packages head — this heading is a sentence
   ("Other jobs by Jessica") and title-casing it reads wrong. */
.npf-detail .single-job-other-jobs-title h2 {
  margin: 0;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  color: #fff;
  text-transform: none;
}

/* The collapse caret initializations.js appends sits on the bar now. */
.npf-detail .single-job-other-jobs-title .js-toggle-angle-icon,
.npf-detail .single-job-other-jobs-title .dynamically-icon { color: #fff; }

.npf-detail .single-job-other-jobs-title + .ui.divider { display: none; }

/* ---------- Share / bookmark row ---------- */

/* front.min.css builds this as a rail hanging into the page gutter —
   `position: fixed; left: 120px` with `width: 796px; margin-left: -92px`. In
   the design's wider content column that landed on top of the layout, so it is
   put back in flow, at the column's own width, under the reviews. */
.npf-detail .social-icons-floating {
  position: static !important;
  inset: auto !important;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: auto !important;
  margin: 40px 0 0 !important;
}

.npf-detail .social-icons-floating .ui.segment {
  border: 0;
  box-shadow: none;
  background: transparent;
  margin: 0;
  padding: 0;
}

/* ---------- CTA ---------- */

/* .cta — padding-block 96/72, background var(--primary), decorative circles */
.npf-cta {
  position: relative;
  padding-block: 96px 72px;
  background: var(--npf-primary);
  color: #fff;
  overflow: hidden;
  text-align: center;
}

.npf-detail .npf-cta::before,
.npf-detail .npf-cta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.npf-detail .npf-cta::before {
  width: 340px;
  height: 340px;
  top: -258px;
  right: -96px;
  background: rgba(255, 255, 255, 0.06);
}

.npf-detail .npf-cta::after {
  width: 420px;
  height: 420px;
  bottom: -268px;
  left: -190px;
  background: rgba(255, 255, 255, 0.06);
}

.npf-cta__ring {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  width: 420px;
  height: 420px;
  top: -286px;
  right: -140px;
  pointer-events: none;
}

.npf-cta__ring--bl {
  width: 520px;
  height: 520px;
  top: auto;
  right: auto;
  bottom: -330px;
  left: -240px;
}

.npf-cta__inner { position: relative; z-index: 1; }

/* `margin-inline: auto` is what centres these, NOT `text-align: center` on the
   section: both carry a max-width (780px / 600px, from the design), so without
   auto side margins the BOX sits flush left inside the 1200px content column
   and only the text within it is centred — which is exactly how the heading and
   the sub-line drifted left of the ask bar and the feature row. */
.npf-detail .npf-cta h2 {
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 40px;
  line-height: 52px;
  color: #fff;
  max-width: 780px;
  margin: 0 auto 14px;
}

.npf-detail .npf-cta p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  line-height: 26px;
  max-width: 600px;
  margin: 0 auto;
}

.npf-ask-bar {
  display: flex;
  gap: 10px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 2px;
  max-width: 522px;
  margin: 24px auto 0;
  transition: border-color var(--npf-t), background var(--npf-t);
}

.npf-ask-bar:focus-within {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.22);
}

.npf-detail .npf-ask-bar input {
  flex: 1;
  min-width: 0;
  height: auto;
  border: none;
  outline: none;
  background: transparent;
  color: #fff;
  font-family: var(--npf-font-body);
  font-size: 1rem;
  padding: 12px 18px;
  box-shadow: none;
}

.npf-detail .npf-ask-bar input::placeholder { color: rgba(255, 255, 255, 0.75); }

.npf-detail .npf-ask-bar .npf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
  color: var(--npf-primary-dark);
  background: #fff;
  border: 0;
  /* 8px, not 6px: the bar is a 10px pill with a 2px inset, so this is the
     radius that keeps the inner corner concentric with the outer one. */
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--npf-t);
}

.npf-detail .npf-ask-bar .npf-btn:hover { background: #f0f4fa; }

/* ---------- "Explore freelancers" ----------
   The CTA that replaced the ask-the-expert band at the foot of this page. The
   ask bar's button was the only `.npf-btn` this stylesheet dressed, so without
   this the new one would render as bare browser chrome on the blue. Values
   match `.npf-dash .npf-cta__btn`, since it is the same CTA. */
.npf-detail .npf-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  margin-top: 28px;
  padding: 14px 22px;
  font-family: var(--npf-font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
  color: var(--npf-primary-dark);
  background: #fff;
  border: 0;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--npf-t);
}

.npf-detail .npf-cta__btn:hover {
  background: #f0f4fa;
  color: var(--npf-primary-dark);
  text-decoration: none;
}

.npf-cta__features {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px 48px;
  margin-top: 44px;
}

.npf-cta__feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 26px;
  color: #fff;
}

.npf-icon-chip {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  flex: none;
}

.npf-icon-chip svg { width: 22px; height: 22px; }

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

@media (max-width: 1024px) {
  /* The sidebar keeps its 42px card inset, so don't take it below ~400px. */
  .npf-detail-layout { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; }

  /* Mirrors npf-dashboard.css's own step for the recommend grid. That file
     covers `.row.ui` / `.wpj-load-more-target`; the "Other jobs by …" block
     uses the theme's `ui three cards` container, which neither selector
     reaches — so without this it stayed three-up on a phone. */
  .npf-detail .npf-recommend .ui.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .npf-detail { padding-block: 40px 0; }
  .npf-detail-layout { grid-template-columns: 1fr; gap: 60px; margin-bottom: 60px; }
  .npf-detail-side { position: static; gap: 40px; }

  /* The reference specifies 32px here, but that is LARGER than the 24px the
     title uses on desktop and it towered over the 20px section headings.
     Stepped down to desktop parity, tracking released as the reference does. */
  .npf-detail .npf-detail-title { font-size: 24px; line-height: 1.25; letter-spacing: 0; }

  /* 40px between sections reads as a void once the column is only ~358px wide. */
  .npf-detail .npf-detail-section,
  .npf-detail .npf-detail-section--packages { margin-top: 28px; }
  .npf-detail .npf-detail-hero { margin-top: 28px; }
  .npf-detail .npf-secure-banner { margin-top: 16px; }
  .npf-detail .social-icons-floating { margin-top: 28px !important; }

  .npf-detail-hero { height: 240px; }
  .npf-detail-hero img,
  .npf-detail-hero .owl-item img { height: 240px; }

  /* 17px inset; the gap tightens by 4px so "Job is done or money back" still
     fits on one line in a 327px frame. */
  .npf-detail .npf-secure-banner { padding: 0 17px; gap: 16px; }
  .npf-secure-banner__icon svg { width: 52px; height: 52px; }

  /* Smaller favourite on a phone. The heart is a SPRITE
     (icons-sprite.png at -9px -461px), so its box cannot simply be made
     smaller — that would slide the sprite window onto the neighbouring icon.
     `transform: scale()` shrinks what is drawn and leaves the offset intact. */
  .npf-detail-hero .npf-hero-fav {
    width: 34px;
    height: 34px;
    top: 10px;
    right: 10px;
  }

  .npf-detail-hero .npf-hero-fav .bookmark-icon {
    transform: scale(0.78);
    transform-origin: center;
  }

  .npf-pkg-card__head { padding: 0 31px; }
  .npf-pkg-card__body { padding: 33px 19px 50px; }
  .npf-seller-card { padding: 50px 30px; }
  .npf-topics-card { padding: 40px 28px; }
  .npf-side-widgets { padding: 32px 28px; }

  .npf-cta { padding-block: 64px 56px; }
  .npf-detail .npf-cta h2 { font-size: 30px; line-height: 40px; }
  .npf-detail .npf-cta::before { width: 190px; height: 190px; top: -142px; right: -52px; }
  .npf-detail .npf-cta::after { width: 260px; height: 260px; bottom: -166px; left: -118px; }
  .npf-cta__ring { width: 260px; height: 260px; top: -176px; right: -86px; }
  .npf-cta__ring--bl { width: 340px; height: 340px; bottom: -208px; left: -160px; }
  .npf-detail .npf-ask-bar input { padding: 12px 14px; }
  .npf-detail .npf-ask-bar .npf-btn { padding-inline: 20px; }

  .npf-cta__features { flex-direction: column; align-items: flex-start; text-align: left; }

  /* Other jobs — the card internals are shrunk by npf-dashboard.css's own
     .npf-recommend rules; only the panel around them belongs here. */
  .npf-detail .npf-recommend .ui.cards { column-gap: 9px; row-gap: 19px; }
  .npf-detail .single-job-other-job > .ui.segment { padding: 14px; }
  .npf-detail .single-job-other-jobs-title {
    min-height: 56px;
    padding: 0 16px !important;
    margin-bottom: 16px !important;
  }
  .npf-detail .single-job-other-jobs-title h2 { font-size: 18px; line-height: 24px; }

  /* The buy breakdown is an absolutely-positioned panel; at this width it
     spans the stacked sidebar card, so it only needs a tighter inset. */
  .npf-detail .sidebar-buy-job-form { padding: 16px; }

  /* ---------- Modals on mobile ----------
     Semantic ships its own phone rules for `.ui.modal`, and they are more
     specific than a `body.single-job` prefix alone — which is why the desktop
     28px gutter survived here. Each declaration below therefore carries
     !important, and the modal is pinned to the viewport rather than left at
     Semantic's fixed width, so it can never sit wider than the screen. */
  body.single-job .ui.modal,
  body.single-job .ui.modal.smaller,
  body.single-job .ui.page.modals > .ui.modal {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 auto !important;
    left: auto !important;
    right: auto !important;
    border-radius: 10px !important;
  }

  body.single-job .ui.modal > .header,
  body.single-job .ui.modal > .ui.icon.header { padding: 16px 20px !important; }
  body.single-job .ui.modal > .content { padding: 20px !important; }
  body.single-job .ui.modal > .actions { padding: 16px 20px !important; }

  /* Stack the action pair full width — 46px targets side by side get very
     narrow once the modal is only ~340px across. */
  body.single-job .ui.modal > .actions,
  body.single-job .custom-offers-default-container .actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  body.single-job .custom-offers-default-container .actions { padding: 16px 0 0 !important; }

  body.single-job .ui.modal .ui.positive.button,
  body.single-job .ui.modal .ui.negative.button,
  body.single-job .ui.modal .uploadifive-button {
    width: 100% !important;
    justify-content: center;
    margin: 0 !important;
  }

  /* Its own line rather than crowding the heading. */
  body.single-job .ui.modal > .close.icon {
    top: 14px !important;
    right: 14px !important;
  }
}

@media (max-width: 560px) {
  .npf-detail__container { padding-inline: 16px; }
  .npf-topics { grid-template-columns: 1fr; }
  .npf-detail .npf-topics a:last-child:nth-child(odd) { grid-column: auto; }

  /* 160px field + 144px button no longer fit side by side inside a ~289px
     panel, so the coupon row stacks rather than crushing the input. */
  .npf-detail .apply-dicounts-wrapper { flex-wrap: wrap; gap: 10px; }
  .npf-detail .apply-dicounts-wrapper .ui.input { flex: 1 1 100%; }
  .npf-detail .npf-pkg-card .discount-btn,
  .npf-detail .npf-detail-section .discount-btn { width: 100%; margin-left: 0; }

  /* Long price strings and their labels get one row each rather than being
     squeezed into two columns. */
  .npf-detail .main_amount_box { gap: 8px 10px; }
  .npf-detail .main_amount_box > span:not(.extra-price-inside):not(.amount_section) { font-size: 15px; }
  .npf-detail .main_amount_box > .extra-price-inside,
  .npf-detail .main_amount_box > .amount_section,
  .npf-detail .extra-price-inside,
  .npf-detail .processingfee-amount { font-size: 15px; line-height: 22px; }

  .npf-detail .npf-detail-title { font-size: 22px; line-height: 1.28; }
  .npf-detail .npf-detail-section,
  .npf-detail .npf-detail-section--packages { margin-top: 24px; }

  .npf-detail-hero { height: 200px; }
  .npf-detail-hero img,
  .npf-detail-hero .owl-item img { height: 200px; }

  .npf-detail .npf-secure-banner { min-height: 104px; }
  .npf-secure-banner__icon svg { width: 44px; height: 44px; }

  /* npf-dashboard.css shrinks the tier badge to 26px here, but its selector is
     a plain class pair — the override that answers iscu-public.css's
     `.suggested-jobs-col` rule out-specifies it, so the 50px desktop size stuck
     and the badge swallowed the face on a ~160px card. Same values, restated at
     this scope. */
  .npf-detail .suggested-jobs-col .ui.card > .image img.iscu_listings_user_badge {
    width: 26px !important;
    top: 7px;
    right: 8px;
  }
}


@media (max-width: 860px) {
  .npf-detail .npf-breadcrumb a{
    font-size: 15px !important;
  }

  .npf-detail-meta{
    font-size: 15px !important;
  }

  .npf-detail-stars{
    font-size: 15px !important;
  }
  .npf-detail .npf-secure-banner strong{
    font-size: 18px !important;
    line-height: 24px !important;
  }

  .npf-detail .npf-detail-section h2{
    font-size: 18px !important;
    line-height: 24px !important;
  }

  .npf-detail .npf-detail-list li,
  .npf-detail .npf-detail-section p{
    font-size: 15px !important;
  }

  .mobile-packages .pck-tab-title{
    font-size: 16px !important;
  }

  .npf-detail .single-job-faq .ui.accordion > .content,
  .npf-detail .single-job-faq .ui.accordion > .title{
    font-size: 15px !important;
  }

  .mobile-packages .pck-include .pck-include-title,
  .mobile-packages .pck-price,
  .mobile-packages .pck-name{
    font-size: 17px !important;
  }

  .npf-pkg-card__head{
    height: 56px !important;
    font-size: 20px !important;
    line-height: 25px !important;
  }
  .npf-detail .npf-pkg-card__custom .ui.button,
  .npf-detail .sidebar-buy-job .ui.primary.button, .npf-detail .npf-pkg-card__body .ui.primary.button, .npf-detail .npf-pkg-card__body button.ui.button, .npf-detail .npf-detail-section .ui.primary.button, .npf-detail .npf-detail-section button.ui.primary.button{
    font-size: 15px !important;
  }

  .npf-detail .npf-topics-card__title{
    font-size: 22px !important;
    line-height: 24px !important;
  }

  .npf-detail .right_button_buy > li, .npf-detail .job-order-items > li{
    margin: 0px !important;
  }

  .npf-detail .right_button_buy > li, .npf-detail .job-order-items > li{
    font-size: 15px !important;
    line-height: 24px !important;
  }
}

/* The reviews section used to be defined here. It now lives in
   assets/css/npf-reviews.css, scoped to `.npf-reviews` instead of to this
   page, because the public profile prints the same section — see
   NPF_Job_Reviews. Nothing about it changed but where it is written. */

/* ---------- "Other jobs by …" — the Experience Level chip on one line ----------
   These cards are a third of a narrower column than the dashboard's, so the
   chip that fits comfortably there wrapped its stars onto a second line here.
   Everything is trimmed rather than anything being dropped: smaller label,
   smaller stars, tighter padding and gap, and no wrapping. Scoped to this
   section, so the chip on every other grid keeps its own size. */
.npf-detail .single-job-other-job .iscu_listings_user_points,
.npf-detail .single-job-other-job .image .iscu_listings_user_points {
  flex-wrap: nowrap;
  white-space: nowrap;
  max-width: none;
  height: auto;
  min-height: 0;
  padding: 4px 8px !important;
  gap: 3px;
  border-radius: 8px;
}

.npf-detail .single-job-other-job .iscu_listings_user_points .npf-explevel { gap: 3px; flex-wrap: nowrap; }
.npf-detail .single-job-other-job .iscu_listings_user_points .npf-explevel__label { font-size: 10px; }
.npf-detail .single-job-other-job .iscu_listings_user_points .wpj-star-rating-static { font-size: 11px; }
.npf-detail .single-job-other-job .iscu_listings_user_points i.star { font-size: 11px; margin: 0; }

/* The service title on the same cards. 18px is the dashboard's size, set for a
   wider column; here it filled the card and clipped after three or four words.
   Smaller, so more of the title survives before the ellipsis. */
.npf-detail .single-job-other-job .ui.card .cards-title .list-header,
.npf-detail .single-job-other-job .wpj-card-style-3.ui.card .cards-title.list-70-right .list-header {
  font-size: 15px;
  line-height: 20px;
}

/* The "No reviews yet" state moved to assets/css/npf-reviews.css with the rest
   of the section. */