/* ==========================================================================
   NISSET SKILLS — Find Work / Project pages (projects.php, project.php)
   Loaded after style.css. v2 — compact, professional-marketplace redesign.
   Corrects the previous pass: card headers were too large and too colorful,
   and the mobile drawer's close button had no desktop rule so it defaulted
   to visible. Both fixed below (see sections 3 and 11).

   Zero PHP/HTML changes required beyond the mobile filter drawer markup
   already added to projects.php (button + backdrop + close button + JS).
   ========================================================================== */

:root {
  --ns-navy: #063B66;        /* Deep Navy — primary buttons, strongest accents */
  --ns-primary: #1677B8;     /* Professional Blue — links, active states, focus */
  --ns-primary-tint: #EAF5FC; /* Light Blue — active/hover backgrounds */

  --ns-bg: #F7F9FC;          /* page background */
  --ns-surface: #FFFFFF;     /* card/panel surfaces */
  --ns-border: #E4E7EC;
  --ns-border-strong: #D0D5DD;
  --ns-divider: #EEF2F6;

  --ns-text: #101828;
  --ns-muted: #667085;

  --ns-success-bg: #ECFDF3;
  --ns-success-text: #027A48;

  --ns-radius: 10px;
  --ns-radius-sm: 7px;
  --ns-radius-xs: 5px;

  --ns-shadow-1: 0 1px 2px rgba(16, 24, 40, .04);
  --ns-shadow-2: 0 6px 18px rgba(16, 24, 40, .08);

  --ns-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Cinematic hero atmosphere tokens (Find Work header + toolbar only —
     project cards stay white/light per brief section 3 and 10) ---- */
  --fw-bg-1: #061A2F;
  --fw-bg-2: #08243F;
  --fw-bg-3: #0B3153;
  --fw-electric: #27A8FF;
  --fw-cyan: #5ED7FF;
  --fw-soft-blue: #9BDFFF;
  --fw-white: #F8FBFF;
  --fw-muted: #8FA6BA;
  --fw-border: rgba(150, 200, 230, .14);
  --fw-surface: rgba(255, 255, 255, .055);
  --fw-surface-strong: rgba(255, 255, 255, .09);
}

/* ==========================================================================
   1. PAGE SHELL
   ========================================================================== */
.container.u-page { font-family: var(--ns-font); color: var(--ns-text); }

/* ---- Cinematic Find Work hero ---- */
.fw-hero {
  position: relative; border-radius: 16px; margin-bottom: 24px;
  padding: 40px 32px 24px;
  /* Fallback background — always present so the hero looks complete even if
     the video fails to load, is blocked from autoplaying, or is still
     buffering on a slow connection. The video (when it plays) sits on top
     of this at low opacity; the overlay above the video re-applies these
     same tones so the result reads the same either way. */
  background:
    radial-gradient(60% 90% at 15% 0%, rgba(39,168,255,.16), transparent 60%),
    radial-gradient(50% 80% at 100% 100%, rgba(94,215,255,.10), transparent 65%),
    linear-gradient(160deg, var(--fw-bg-1), var(--fw-bg-2) 55%, var(--fw-bg-3));
}

/* ---- Decorative background wrapper — video, overlay, grid, and filament
   all live in here, clipped to the hero's rounded corners.
   IMPORTANT: this overflow:hidden lives on THIS wrapper only, not on
   .fw-hero itself. Earlier revisions put overflow:hidden directly on
   .fw-hero, which also clipped the "Filters" popover (an absolutely
   positioned child further down in the hero) — since any ancestor with
   overflow:hidden clips its descendants' rendered boxes regardless of
   their own positioning, the popover was being cut off/hidden on desktop.
   Moving the clip to this separate, purely-decorative wrapper fixes that
   while still rounding the video/gradient correctly. ---- */
.fw-hero-bg {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit; z-index: 0; pointer-events: none;
}

/* ---- Video background layer ---- */
.fw-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 0; opacity: .38; pointer-events: none;
}

/* ---- Dark navy overlay: sits on top of the video so text/controls stay
   highly readable regardless of how bright the source footage is. Carries
   the same color language as the fallback gradient so the two blend into
   one consistent atmosphere whether or not the video is actually playing.
   NOTE: tuned lighter than the first pass — video opacity .2 stacked under
   an .86/.82/.78-alpha overlay made the video imperceptible regardless of
   whether it was actually playing. This balance (video .38, overlay ~.55)
   keeps the footage visibly in motion while text/controls stay well above
   WCAG contrast requirements against the navy tones underneath. ---- */
.fw-hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(60% 90% at 15% 0%, rgba(39,168,255,.14), transparent 60%),
    radial-gradient(50% 80% at 100% 100%, rgba(94,215,255,.08), transparent 65%),
    linear-gradient(160deg, rgba(6,26,47,.62), rgba(8,36,63,.56) 55%, rgba(11,49,83,.50));
}

/* very subtle grid, masked so it fades rather than tiling harshly to the edges */
.fw-hero-bg::before {
  content: ''; position: absolute; inset: 0; z-index: 2; opacity: .5; pointer-events: none;
  background-image:
    linear-gradient(rgba(150,200,230,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,200,230,.06) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(80% 100% at 20% 20%, black 0%, transparent 75%);
  mask-image: radial-gradient(80% 100% at 20% 20%, black 0%, transparent 75%);
}

.fw-hero-atmosphere { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.fw-filament { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; }
.fw-filament-path {
  fill: none; stroke: var(--fw-electric); stroke-width: 1.4; stroke-linecap: round;
  stroke-dasharray: 14 10; opacity: .55;
  filter: drop-shadow(0 0 6px rgba(39,168,255,.45));
  animation: fw-filament-flow 11s linear infinite;
}
@keyframes fw-filament-flow {
  to { stroke-dashoffset: -480; }
}

.fw-hero .page-head { position: relative; z-index: 4; margin-bottom: 20px; }
.fw-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fw-cyan); margin-bottom: 10px;
}
.fw-hero .page-head h1 {
  color: var(--fw-white); font-size: 30px; font-weight: 700; letter-spacing: -.015em;
  line-height: 1.3; max-width: 640px; margin: 0 0 10px;
}
.fw-hero .page-head .count {
  color: var(--fw-muted); font-size: 14px; font-weight: 500; margin: 0;
}
.fw-hero .pc-match-note { color: var(--fw-cyan); font-weight: 700; }

/* ---- Glass toolbar variant, scoped to inside the hero ---- */
.fw-hero .filter-bar {
  position: relative; z-index: 4; background: var(--fw-surface); border: 1px solid var(--fw-border);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.fw-hero .filter-bar-btn {
  background: var(--fw-surface); border-color: var(--fw-border); color: var(--fw-white);
}
.fw-hero .filter-bar-btn:hover { border-color: var(--fw-electric); color: var(--fw-cyan); background: var(--fw-surface-strong); }
.fw-hero .filter-bar-btn[aria-expanded="true"] { border-color: var(--fw-electric); background: var(--fw-surface-strong); color: var(--fw-cyan); }

.fw-hero .filter-bar-select,
.fw-hero .filter-bar-search input {
  background: var(--fw-surface); border-color: var(--fw-border); color: var(--fw-white);
}
.fw-hero .filter-bar-select option { color: var(--ns-text); } /* native dropdown list stays legible */
.fw-hero .filter-bar-select:focus,
.fw-hero .filter-bar-search input:focus {
  border-color: var(--fw-electric); box-shadow: 0 0 0 3px rgba(39,168,255,.10);
}
.fw-hero .filter-bar-search i { color: var(--fw-muted); }
.fw-hero .filter-bar-search input::placeholder { color: var(--fw-muted); }
.fw-hero .filter-bar-sort-label { color: var(--fw-muted); }
.fw-hero .filter-bar-clear { color: var(--fw-muted); }
.fw-hero .filter-bar-clear:hover { color: var(--fw-white); }

/* Advanced filters popover keeps its light surface even inside the hero —
   it's a working form panel, not atmosphere, so it stays fully legible. */
.fw-hero .advanced-filters-panel { background: var(--ns-surface); }

@media (prefers-reduced-motion: reduce) {
  .fw-filament-path { animation: none !important; }
}
@media (max-width: 767px) {
  .fw-hero { padding: 28px 18px 18px; border-radius: 12px; }
  .fw-hero .page-head h1 { font-size: 22px; }
  .fw-filament { opacity: .5; }
  .fw-hero-video { opacity: .22; }
}

/* ==========================================================================
   2. RECOMMENDED FOR YOU — de-boxed content section, not a dashboard panel.
   No background/border/container — just spacing and a clear header row,
   so it reads as part of the page rather than a bolted-on widget.
   ========================================================================== */
.recommended-section { margin-bottom: 28px; }

/* A thin blue light line travels across the top of the section — the same
   filament motif from the hero, echoed here at a much smaller scale so the
   section feels connected to the page's atmosphere rather than being a
   disconnected widget. */
.recommended-section::before {
  content: ''; display: block; height: 2px; margin-bottom: 20px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--fw-electric, #27A8FF), transparent);
  background-size: 200% 100%; opacity: .45;
  animation: fw-line-travel 9s ease-in-out infinite;
}
@keyframes fw-line-travel {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 0%; }
}

.recommended-header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px;
}
.recommended-title {
  margin: 0; font-size: 18px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; color: var(--ns-text);
}
.recommended-star { color: #F5A524; font-size: 15px; align-self: center; }
.recommended-sub { font-size: 13px; font-weight: 400; color: var(--ns-muted); }
.recommended-see-all {
  font-size: 13px; font-weight: 600; color: var(--ns-primary); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; transition: gap .15s ease;
}
.recommended-see-all i { font-size: 11px; }
.recommended-see-all:hover { gap: 9px; }
.recommended-see-all:focus-visible { outline: 2px solid var(--ns-primary); outline-offset: 2px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .recommended-section::before { animation: none !important; }
}

/* ==========================================================================
   3. PROJECT GRID + CARD
   ========================================================================== */
.job-grid {
  display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 18px;
}
.job-card {
  background: var(--ns-surface); border: 1px solid var(--ns-border); border-radius: var(--ns-radius);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--ns-shadow-1);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1), border-color .25s cubic-bezier(.2,.8,.2,1);
}
.job-card:hover {
  transform: translateY(-3px); box-shadow: 0 12px 35px rgba(9,94,150,.12); border-color: rgba(39,168,255,.35);
}

/* ---- Compact category header — the previous version was a 130px+ solid
   color block that dominated the card. Replaced with a small subtle strip:
   light gradient wash, small icon, small badge, small bookmark. ---- */
.job-thumb {
  position: relative; height: 78px; display: flex; align-items: center; padding: 0 14px;
  background: linear-gradient(135deg, #EEF6FC, #F7FAFC);
  border-bottom: 1px solid var(--ns-divider);
}
.job-thumb i.job-thumb-icon {
  font-size: 30px; opacity: 1; color: var(--ns-primary);
  position: static; /* icon sits inline at the left, not centered/dominant */
}
.job-thumb .job-save {
  position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ns-surface); border: 1px solid var(--ns-border); color: var(--ns-muted);
  display: grid; place-items: center; font-size: .78rem; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, transform .1s ease;
}
.job-thumb .job-save:hover { color: var(--ns-primary); border-color: var(--ns-primary); }
.job-thumb .job-save:active { transform: scale(.92); }
.job-thumb .job-save:focus-visible { outline: 2px solid var(--ns-primary); outline-offset: 2px; }
.job-thumb .job-save-form { position: static; display: contents; }
.job-thumb .job-save.is-saved { color: var(--ns-primary); border-color: var(--ns-primary); background: var(--ns-primary-tint); }
.job-thumb .job-cat-tag {
  position: absolute; bottom: 10px; left: 14px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: #1677B8;
  background: #EFF8FF; border: 1px solid #D7EEFF;
  padding: 4px 7px; border-radius: var(--ns-radius-xs);
}

/* The 6-way category rotation now only tints the icon/badge accent very
   subtly instead of coloring a large block — see spec sections 3 & 10.
   Each variant just nudges the wash and icon color, never a bold fill. */
.grad-1 .job-thumb-icon { color: #0B5E8E; }
.grad-2 { background: linear-gradient(135deg, #FBF3E3, #F7FAFC); }
.grad-2 .job-thumb-icon { color: #8A6D1E; }
.grad-3 { background: linear-gradient(135deg, #E9F6EF, #F7FAFC); }
.grad-3 .job-thumb-icon { color: #1F7A55; }
.grad-4 { background: linear-gradient(135deg, #F6EAF3, #F7FAFC); }
.grad-4 .job-thumb-icon { color: #8A3E75; }
.grad-5 { background: linear-gradient(135deg, #EAEEF6, #F7FAFC); }
.grad-5 .job-thumb-icon { color: #3E5E92; }
.grad-6 { background: linear-gradient(135deg, #F6EEE7, #F7FAFC); }
.grad-6 .job-thumb-icon { color: #A1522B; }

/* ---- Body ---- */
.job-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.job-poster { display: flex; align-items: center; gap: 8px; }
.job-poster img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.job-poster span {
  font-size: 13px; font-weight: 600; color: var(--ns-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.job-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; }
.job-title a {
  color: var(--ns-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.job-title a:hover { color: var(--ns-primary); }

.job-desc {
  margin: 0; font-size: 13px; line-height: 1.55; color: var(--ns-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- Skills — small metadata tags, not pills ---- */
.pc-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-skill-tag {
  font-size: 11px; font-weight: 600; color: var(--ns-muted); background: #F8FAFC;
  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-xs); padding: 5px 8px;
}

/* ---- Match badge — subtle relevance indicator ---- */
.pc-match-badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600;
  color: var(--ns-success-text); background: var(--ns-success-bg); border-radius: var(--ns-radius-xs);
  padding: 4px 8px; width: fit-content;
}

/* ---- Footer, pinned to bottom of every card via margin-top: auto ---- */
.job-foot {
  margin-top: auto; padding-top: 13px; border-top: 1px solid var(--ns-divider);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.job-budget { font-size: 15px; font-weight: 700; color: var(--ns-text); }
.job-budget span { font-weight: 500; color: var(--ns-muted); font-size: 12px; display: block; margin-top: 1px; }
.job-proposals { font-size: 12px; color: var(--ns-muted); flex-shrink: 0; white-space: nowrap; }

/* ==========================================================================
   4. HORIZONTAL FILTER BAR (replaces the old permanent sidebar)
   ========================================================================== */
.filter-bar {
  position: relative;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--ns-surface); border: 1px solid var(--ns-border); border-radius: var(--ns-radius);
  padding: 12px 14px;
}

.filter-bar-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px;
  border: 1px solid var(--ns-border-strong); border-radius: var(--ns-radius-sm);
  background: var(--ns-surface); color: var(--ns-text); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
  flex-shrink: 0;
}
.filter-bar-btn:hover { border-color: var(--ns-primary); color: var(--ns-primary); }
.filter-bar-btn[aria-expanded="true"] { border-color: var(--ns-primary); background: var(--ns-primary-tint); color: var(--ns-primary); }
.filter-bar-btn:focus-visible { outline: 2px solid var(--ns-primary); outline-offset: 2px; }

.filter-bar-field { flex-shrink: 0; }
.filter-bar-category, .filter-bar-budget, .filter-bar-exp { min-width: 150px; }
.filter-bar-select {
  width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--ns-border-strong);
  border-radius: var(--ns-radius-sm); font-size: 13px; font-family: inherit;
  background: var(--ns-surface); color: var(--ns-text);
}
.filter-bar-select:focus { outline: none; border-color: var(--ns-primary); box-shadow: 0 0 0 3px rgba(22,119,184,.10); }

.filter-bar-search {
  position: relative; flex: 1 1 260px; min-width: 240px; max-width: 300px;
}
.filter-bar-search i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ns-muted); font-size: 13px;
}
.filter-bar-search input {
  width: 100%; height: 40px; padding: 0 12px 0 34px; border: 1px solid var(--ns-border-strong);
  border-radius: var(--ns-radius-sm); font-size: 13px; font-family: inherit;
  background: var(--ns-surface); color: var(--ns-text);
}
.filter-bar-search input:focus { outline: none; border-color: var(--ns-primary); box-shadow: 0 0 0 3px rgba(22,119,184,.10); }

/* Sort sits on the far right of the bar, with its own small label */
.filter-bar-sort { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.filter-bar-sort-label { font-size: 12px; font-weight: 600; color: var(--ns-muted); white-space: nowrap; }
.filter-bar-sort .filter-bar-select { width: auto; min-width: 170px; }

.filter-bar-clear {
  font-size: 13px; font-weight: 600; color: var(--ns-muted); flex-shrink: 0;
}
.filter-bar-clear:hover { color: var(--ns-text); text-decoration: underline; }
.filter-bar-clear:focus-visible { outline: 2px solid var(--ns-primary); outline-offset: 2px; }

/* ---- Advanced filters panel: popover on desktop, drawer on mobile ---- */
.advanced-filters-panel {
  display: none; /* toggled to flex via .is-open on desktop, or the mobile drawer rules below */
  flex-direction: column; gap: 0;
  position: absolute; top: calc(100% + 8px); left: 14px; width: 260px;
  background: var(--ns-surface); border: 1px solid var(--ns-border); border-radius: var(--ns-radius);
  box-shadow: var(--ns-shadow-2); padding: 16px; z-index: 50;
}
.advanced-filters-panel.is-open { display: flex; }
.advanced-filters-title { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--ns-text); }
.advanced-filters-panel .filter-group { margin-bottom: 16px; }
.advanced-filters-panel .filter-group:last-of-type { margin-bottom: 0; }
.advanced-filters-actions { margin-top: 4px; }
.advanced-filters-actions .btn.btn-primary {
  width: 100%; height: 40px; border-radius: var(--ns-radius-sm); font-weight: 700;
  background: var(--ns-navy); border: 1px solid var(--ns-navy); color: #fff;
  transition: background-color .2s ease, border-color .2s ease;
}
.advanced-filters-actions .btn.btn-primary:hover { background: #052C4D; border-color: #052C4D; }
.advanced-filters-actions .btn.btn-primary:focus-visible { outline: 2px solid var(--ns-navy); outline-offset: 2px; }

.filter-group { margin-bottom: 0; }
.filter-group label {
  display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ns-muted);
}
.filter-group input[type="number"], .filter-group select {
  width: 100%; height: 40px; padding: 0 11px; border: 1px solid var(--ns-border-strong);
  border-radius: var(--ns-radius-sm); font-size: 13px; font-family: inherit;
  background: var(--ns-surface); color: var(--ns-text); transition: border-color .15s ease, box-shadow .15s ease;
}
.filter-group input:focus, .filter-group select:focus {
  outline: none; border-color: var(--ns-primary); box-shadow: 0 0 0 3px rgba(22,119,184,.10);
}
.range-row { display: flex; align-items: center; gap: 8px; }
.range-row input { min-width: 0; flex: 1; }

.filter-hint {
  font-size: 12px; color: var(--ns-text); background: var(--ns-primary-tint);
  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-sm); padding: 10px 12px;
  display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; margin-bottom: 16px;
}
.filter-hint i { color: var(--ns-primary); margin-top: 2px; flex-shrink: 0; }
.filter-hint a { color: var(--ns-primary); font-weight: 600; }

/* ---- Section title above the main results grid ---- */
.section-title { font-size: 16px; font-weight: 700; color: var(--ns-text); margin: 0 0 14px; }


/* ==========================================================================
   6. PAGINATION
   ========================================================================== */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; justify-content: center; }
.pagination a {
  min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--ns-border-strong);
  border-radius: var(--ns-radius-sm); display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--ns-muted); background: var(--ns-surface);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.pagination a:hover { background: var(--ns-primary-tint); border-color: var(--ns-primary); color: var(--ns-primary); }
.pagination a.active { background: var(--ns-primary); border-color: var(--ns-primary); color: #fff; }
.pagination a:focus-visible { outline: 2px solid var(--ns-primary); outline-offset: 2px; }

/* ==========================================================================
   7. EMPTY STATE
   ========================================================================== */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 48px 24px; text-align: center; color: var(--ns-muted);
  background: var(--ns-surface); border: 1px solid var(--ns-border); border-radius: var(--ns-radius);
}
.empty i { font-size: 32px; color: var(--ns-border-strong); }
.empty p { margin: 0; max-width: 340px; font-size: 13px; line-height: 1.5; color: var(--ns-muted); }
.empty .btn { margin-top: 4px; }

/* ==========================================================================
   8. UTILITIES USED ON THIS PAGE
   ========================================================================== */
.container.u-page .u-mb-2 { margin-bottom: 20px; }
.container.u-page .u-mt-1 { margin-top: 12px; }
.container.u-page .u-mt-2 { margin-top: 20px; }
.container.u-page .u-fs-sm { font-size: 12px; }
/* Scoped to the page shell on purpose: these utilities are global in style.css and must
   keep their style.css values everywhere else (header, footer, other pages). */

/* ==========================================================================
   9. PROJECT DETAIL PAGE (project.php) — order box, same visual system
   ========================================================================== */
.order-box {
  background: var(--ns-surface); border: 1px solid var(--ns-border); border-radius: var(--ns-radius);
  padding: 18px;
}
.order-box .order-price { font-size: 24px; font-weight: 800; margin: 4px 0 12px; color: var(--ns-text); }
.order-box .order-price span { font-size: 13px; font-weight: 500; color: var(--ns-muted); }
.order-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.order-list li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ns-text); }
.order-list li i { color: var(--ns-primary); width: 15px; text-align: center; }
.order-box .btn-block { width: 100%; }
.order-box .btn-secondary { margin-bottom: 9px; }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ==========================================================================
   10. MOBILE FILTER DRAWER
   The advanced filters panel is a desktop popover by default (see section 4).
   On mobile it becomes a full off-canvas drawer instead, opened by the same
   "Filters" button in the horizontal bar. The close button ("X") only ever
   renders inside that mobile drawer state — it has no display rule at the
   base level, so it cannot appear on desktop under any circumstance.
   ========================================================================== */
.filters-drawer-close { display: none; } /* base rule — always hidden unless explicitly re-enabled below */

.filters-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .35); z-index: 60;
}
.filters-backdrop.is-open { display: block; }

@media (max-width: 767px) {
  .advanced-filters-panel.is-open {
    display: flex; position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(320px, 88vw); border-radius: 0; overflow-y: auto; z-index: 61;
    animation: ns-drawer-in .18s ease;
  }

  /* Only visible once the drawer is actually open on mobile — never on
     desktop, and not even on mobile until .is-open is applied. */
  .advanced-filters-panel.is-open .filters-drawer-close {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    border: none; background: var(--ns-bg); color: var(--ns-muted); margin-bottom: 12px; cursor: pointer;
  }
}
@keyframes ns-drawer-in {
  from { transform: translateX(16px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */
@media (min-width: 1600px) {
  .job-grid { grid-template-columns: repeat(4, minmax(260px, 1fr)); }
}

@media (max-width: 1199px) and (min-width: 768px) {
  .job-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .page-head h1 { font-size: 24px; }
  .job-grid { grid-template-columns: 1fr; }
  .recommended-section .job-grid { grid-template-columns: 1fr; }

  .filter-bar { padding: 10px 12px; gap: 8px; }
  .filter-bar-search { flex: 1 1 100%; min-width: 0; max-width: none; order: -1; }
  .filter-bar-category, .filter-bar-budget, .filter-bar-exp { flex: 1 1 45%; min-width: 0; }
  .filter-bar-sort { margin-left: 0; flex-basis: 100%; justify-content: space-between; }
  .filter-bar-sort .filter-bar-select { flex: 1; min-width: 0; }
  .filter-bar-clear { flex-basis: 100%; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  .job-card, .job-title a, .pagination a, .filter-bar-btn { transition: none !important; }
  .advanced-filters-panel.is-open { animation: none !important; }
}

/* ==========================================================================
   13. JOB DETAIL PAGE UPGRADE — meta grid, client stats, save/report actions
   ========================================================================== */
.pd-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pd-head-actions { display: flex; align-items: center; gap: 6px; }
.pd-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-muted);
  cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease; font-size: 14px;
}
.pd-icon-btn:hover { background: var(--ns-bg); color: var(--ns-text); }
.pd-icon-btn.is-active { background: var(--ns-primary-tint); color: var(--ns-primary); border-color: var(--ns-primary); }

.pd-byline { margin: 0 0 18px; font-size: 13px; }

.pd-meta-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 6px;
}
.pd-meta-item { display: flex; align-items: flex-start; gap: 10px; }
.pd-meta-item i { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--ns-bg); color: var(--ns-primary); font-size: 13px; }
.pd-meta-item strong { display: block; font-size: 13.5px; color: var(--ns-text); }
.pd-meta-item span { display: block; font-size: 11.5px; color: var(--ns-muted); text-transform: uppercase; letter-spacing: .03em; }

.pd-desc-title, .pd-skills-title { font-size: 16px; margin: 18px 0 8px; }
.pd-desc-text { font-size: 14.5px; line-height: 1.7; color: var(--ns-text); white-space: pre-line; }

.pd-proposals-panel h2, .pd-client-panel h2 { font-size: 16px; margin: 0 0 8px; }

.pd-client-industry { display: flex; align-items: center; gap: 6px; margin: 8px 0; }
.pd-client-stats { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--ns-divider); display: flex; flex-direction: column; gap: 9px; }
.pd-client-stats li { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.pd-client-stats li span:first-child { color: var(--ns-muted); }
.pd-client-stats li strong { font-weight: 600; color: var(--ns-text); }
.pd-verified { color: var(--ns-success-text); }

.pd-proposal-status { opacity: 1 !important; }
.pd-proposal-status-accepted { background: var(--ns-success-bg) !important; color: var(--ns-success-text) !important; border-color: transparent !important; }
.pd-proposal-status-rejected, .pd-proposal-status-withdrawn { background: #fee2e2 !important; color: #b91c1c !important; border-color: transparent !important; }

/* .status-in_progress / .status-closed / .status-draft now live in style.css with the
   rest of the shared status palette, so they render on every page, not only these. */

/* Report modal */
.pd-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pd-modal-backdrop[hidden] { display: none; }
.pd-modal { width: 100%; max-width: 420px; }
.pd-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pd-modal-head h2 { margin: 0; font-size: 17px; }
.pd-modal-head button { border: none; background: none; font-size: 22px; line-height: 1; color: var(--ns-muted); cursor: pointer; }

@media (max-width: 767px) {
  .pd-meta-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .pd-meta-grid { grid-template-columns: 1fr 1fr; }
  .pd-head-row { flex-wrap: wrap; }
}

/* ==========================================================================
   14. FREELANCER PROFILE UPGRADE — preview banner + completion meter
   ========================================================================== */
.u-page-thin { padding-top: 1.25rem; }
.preview-banner {
  background: var(--ns-primary-tint); color: var(--ns-primary); border: 1px solid var(--ns-primary);
  border-radius: var(--ns-radius); padding: .7rem 1rem; font-size: 13.5px; display: flex; align-items: center; gap: .5rem;
  margin-bottom: 1rem;
}
.preview-banner a { margin-left: auto; font-weight: 600; }

.completion-panel { margin-bottom: 1rem; }
.completion-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.completion-bar { height: 8px; border-radius: 999px; background: var(--ns-divider); overflow: hidden; }
.completion-bar-fill { height: 100%; background: linear-gradient(90deg, var(--ns-primary), var(--ns-primary-tint)); background: var(--ns-primary); border-radius: 999px; transition: width .3s ease; }