/* ==========================================================================
   Worker Portal Design System — worker.qamarhire.com
   ========================================================================== */

:root {
  /* Color system */
  --w-primary: #4338ca;
  --w-primary-600: #4f46e5;
  --w-primary-700: #3730a3;
  --w-primary-50: #eef2ff;
  --w-primary-100: #e0e7ff;
  --w-accent: #f59e0b;
  --w-accent-dark: #d97706;
  --w-success: #10b981;
  --w-success-dark: #059669;

  --w-ink-900: #0f172a;
  --w-ink-800: #1e293b;
  --w-ink-700: #334155;
  --w-ink-600: #475569;
  --w-ink-500: #64748b;
  --w-ink-300: #cbd5e1;
  --w-ink-200: #e2e8f0;
  --w-ink-100: #f1f5f9;
  --w-ink-50: #f8fafc;
  --w-white: #ffffff;

  --w-border: #e6e9f2;
  --w-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --w-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  --w-shadow-lg: 0 20px 45px -12px rgba(67, 56, 202, 0.25);

  /* Typography */
  --w-font-heading: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --w-font-body: 'Inter', 'Segoe UI', sans-serif;

  /* Layout */
  --w-container: 1220px;
  --w-radius-sm: 10px;
  --w-radius: 16px;
  --w-radius-lg: 24px;
  --w-header-h: 76px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

.worker-scope {
  font-family: var(--w-font-body);
  color: var(--w-ink-800);
  background: var(--w-ink-50);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

.worker-scope * {
  box-sizing: border-box;
}

.worker-scope img {
  max-width: 100%;
  display: block;
}

.worker-scope a {
  color: inherit;
  text-decoration: none;
}

.worker-scope ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.worker-scope h1,
.worker-scope h2,
.worker-scope h3,
.worker-scope h4 {
  font-family: var(--w-font-heading);
  color: var(--w-ink-900);
  line-height: 1.2;
  margin: 0;
}

/* Browsers don't inherit font-family into form controls by default (each
   gets a UA-stylesheet system font instead), so without this reset inputs/
   selects/textareas/buttons silently stay off --w-font-body/--w-font-heading
   - most visible on pages with heavy filter bars (e.g. Orders) where nearly
   every visible label sits inside one of these elements. */
.worker-scope button,
.worker-scope input,
.worker-scope select,
.worker-scope textarea {
  font-family: inherit;
}

.w-container {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: 20px;
}

.w-section {
  padding-block: 72px;
}

@media (max-width: 768px) {
  .w-section {
    padding-block: 48px;
  }
}

.w-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--w-primary);
  background: var(--w-primary-50);
  border: 1px solid var(--w-primary-100);
  padding: 6px 14px;
  border-radius: 999px;
}

.w-section-head {
  max-width: 640px;
  margin-bottom: 40px;
}

.w-section-head.w-center {
  margin-inline: auto;
  text-align: center;
}

.w-section-head h2 {
  font-size: clamp(1.6rem, 1.4rem + 1vw, 2.25rem);
  font-weight: 800;
  margin-top: 14px;
}

.w-section-head p {
  margin-top: 12px;
  color: var(--w-ink-600);
  font-size: 1.05rem;
}

.w-section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.w-fade {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.w-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.w-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.w-btn:hover {
  transform: translateY(-1px);
}

/* Root cause of "the button doesn't seem clickable" complaints like the
Hire Now modal's Confirm Order button: .w-btn never had a disabled state
at all, so a disabled <button> (e.g. gated on required fields not yet
filled in) rendered pixel-identical to an enabled one - same background,
same "pointer" cursor - with zero visual sign it was waiting on anything.
Clicking it does nothing (a disabled button's click event never fires,
by spec), which reads as "broken" rather than "not ready yet". This does
not change when any button is enabled/disabled - only what a disabled
one now looks like. */
.w-btn:disabled,
.w-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.w-btn:disabled:hover,
.w-btn[disabled]:hover {
  transform: none;
}

.w-btn-sm {
  padding: 9px 16px;
  font-size: 0.85rem;
  border-radius: 10px;
}

.worker-scope .w-btn-primary {
  background: var(--w-primary);
  color: var(--w-white) !important;
  box-shadow: 0 10px 24px -8px rgba(67, 56, 202, 0.55);
}

.worker-scope .w-btn-primary:hover {
  background: var(--w-primary-700);
  color: var(--w-white) !important;
}

.worker-scope .w-btn-danger {
  background: #dc2626;
  color: var(--w-white) !important;
  box-shadow: 0 10px 24px -8px rgba(220, 38, 38, 0.45);
}

.worker-scope .w-btn-danger:hover {
  background: #b91c1c;
  color: var(--w-white) !important;
}

.worker-scope .w-btn-accent {
  background: var(--w-accent);
  color: var(--w-white) !important;
  box-shadow: 0 10px 24px -8px rgba(217, 119, 6, 0.5);
}

.worker-scope .w-btn-accent:hover {
  background: var(--w-accent-dark);
  color: var(--w-white) !important;
}

.worker-scope .w-btn-outline {
  background: transparent;
  border-color: var(--w-ink-200);
  color: var(--w-ink-800) !important;
}

.worker-scope .w-btn-outline:hover {
  border-color: var(--w-primary);
  color: var(--w-primary) !important;
}

.worker-scope .w-btn-ghost-light {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--w-white) !important;
}

.worker-scope .w-btn-ghost-light:hover {
  background: rgba(255, 255, 255, 0.22);
  color: var(--w-white) !important;
}

.w-btn-block {
  width: 100%;
}

/* ==========================================================================
   Header
   ========================================================================== */

.w-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--w-header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--w-border);
}

/* The frosted-glass fill lives on this pseudo-element rather than directly
on .w-header: a backdrop-filter on .w-header itself would make it a CSS
containing block for its position:fixed descendants (any element with
filter/backdrop-filter does) - the mobile nav drawer's `inset:
var(--w-header-h) 0 0 0` would then resolve against this ~76px header box
instead of the viewport, collapsing the drawer to zero height. That was
the actual root cause of "tapping the hamburger does nothing": the class
toggle worked, the drawer just had no visible size to open into. */
.w-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(14px);
}

.w-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.w-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--w-font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--w-ink-900);
  flex-shrink: 0;
}

.w-logo img {
  height: 34px;
  width: auto;
}

.w-logo .w-logo-badge {
  height: 38px;
  width: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--w-primary), var(--w-primary-600));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.w-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.w-nav a {
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--w-ink-700);
  transition: background 0.15s ease, color 0.15s ease;
}

.w-nav a:hover,
.w-nav a.is-active {
  background: var(--w-primary-50);
  color: var(--w-primary);
}

.w-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.w-nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--w-ink-200);
  background: var(--w-white);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.w-nav-toggle span,
.w-nav-toggle span::before,
.w-nav-toggle span::after {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: var(--w-ink-800);
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.w-nav-toggle span::before {
  position: absolute;
  top: -6px;
}

.w-nav-toggle span::after {
  position: absolute;
  top: 6px;
}

.w-nav-close {
  display: none;
}

.w-nav-backdrop {
  display: none;
}

@media (max-width: 860px) {
  .w-nav {
    position: fixed;
    inset: var(--w-header-h) 0 0 0;
    z-index: 200;
    background: var(--w-white);
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
    gap: 4px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    border-top: 1px solid var(--w-border);
    overflow-y: auto;
  }

  .w-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  .w-nav a {
    padding: 14px 16px;
    border-bottom: 1px solid var(--w-ink-100);
  }

  .w-header-actions .w-btn-primary-desktop {
    display: none;
  }

  .w-nav-toggle {
    display: flex;
  }

  .w-nav-toggle.is-open span {
    background: transparent;
  }

  .w-nav-toggle.is-open span::before {
    top: 0;
    transform: rotate(45deg);
  }

  .w-nav-toggle.is-open span::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .w-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    width: 38px;
    height: 38px;
    margin-bottom: 8px;
    border-radius: 10px;
    border: 1px solid var(--w-ink-200);
    background: var(--w-white);
    color: var(--w-ink-700);
    cursor: pointer;
  }

  .w-nav-backdrop {
    display: block;
    position: fixed;
    inset: var(--w-header-h) 0 0 0;
    z-index: 199;
    background: rgba(15, 23, 42, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;
  }

  .w-nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.w-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1200px 480px at 15% -10%, #6d5df0 0%, rgba(109, 93, 240, 0) 60%),
    linear-gradient(160deg, var(--w-ink-900) 0%, #1c1550 55%, var(--w-primary-700) 100%);
  color: var(--w-white);
  padding-block: 96px 120px;
}

.w-hero::after {
  content: '';
  position: absolute;
  inset: auto -10% -30% auto;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.35), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

.w-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.w-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.w-hero h1 {
  color: var(--w-white);
  font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  font-weight: 800;
  margin-top: 20px;
  letter-spacing: -0.01em;
}

.w-hero h1 span {
  background: linear-gradient(90deg, #fbbf24, #f97316);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.w-hero p.w-lead {
  margin-top: 20px;
  font-size: 1.12rem;
  color: rgba(255, 255, 255, 0.82);
  max-width: 540px;
}

.w-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.w-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 44px;
}

.w-hero-trust div {
  display: flex;
  flex-direction: column;
}

.w-hero-trust strong {
  font-family: var(--w-font-heading);
  font-size: 1.7rem;
  font-weight: 800;
}

.w-hero-trust span {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}

/* Hero search card */
.w-hero-card {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.98);
  border-radius: var(--w-radius-lg);
  padding: 28px;
  box-shadow: var(--w-shadow-lg);
  color: var(--w-ink-800);
}

.w-hero-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
}

.w-hero-card p {
  color: var(--w-ink-500);
  font-size: 0.9rem;
  margin-top: 4px;
}

.w-hero-card-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.w-hero-card-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--w-ink-50);
  border: 1px solid var(--w-border);
  font-weight: 600;
  font-size: 0.92rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.w-hero-card-list a:hover {
  border-color: var(--w-primary);
  background: var(--w-primary-50);
}

.w-hero-card-list a svg {
  flex-shrink: 0;
  color: var(--w-primary);
}

@media (max-width: 980px) {
  .w-hero-grid {
    grid-template-columns: 1fr;
  }

  .w-hero-card {
    max-width: 460px;
  }
}

/* ==========================================================================
   Stats
   ========================================================================== */

.w-stats {
  position: relative;
  z-index: 2;
  margin-top: -68px;
}

.w-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Contact Us page's Email/Phone/Office cards - same .w-stat-card/.w-stat-icon
markup as the homepage's stats row, just a 3-column grid instead of 4. */
.w-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 980px) {
  .w-contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .w-contact-grid {
    grid-template-columns: 1fr;
  }
}

/* Contact Us page's Location/branch cards - image + city name, matching
qamarhire.com's own Contact Us "branch" section content (5 cities) but as
a bordered card instead of a bare image+caption, for visual consistency
with .w-step-card/.w-stat-card elsewhere on this site. */
.w-branch-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.w-branch-card {
  background: var(--w-white);
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  padding: 16px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.w-branch-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--w-shadow);
}

.w-branch-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--w-radius-sm);
  margin-bottom: 10px;
}

.w-branch-card h3 {
  font-size: 0.92rem;
  font-weight: 700;
}

@media (max-width: 980px) {
  .w-branch-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .w-branch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.w-stat-card {
  background: var(--w-white);
  border-radius: var(--w-radius);
  padding: 26px 22px;
  box-shadow: var(--w-shadow);
  border: 1px solid var(--w-border);
  display: flex;
  align-items: center;
  gap: 16px;
}

.w-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--w-primary-50);
  color: var(--w-primary);
  flex-shrink: 0;
}

.w-stat-card strong {
  display: block;
  font-family: var(--w-font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--w-ink-900);
}

.w-stat-card span {
  color: var(--w-ink-500);
  font-size: 0.88rem;
  font-weight: 500;
}

@media (max-width: 980px) {
  .w-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .w-stats {
    margin-top: -40px;
  }
  .w-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   How it works / feature strip
   ========================================================================== */

.w-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.w-step-card {
  background: var(--w-white);
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  padding: 28px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.w-step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--w-shadow);
}

.w-step-num {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--w-ink-900);
  color: #fff;
  font-family: var(--w-font-heading);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.w-step-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
}

.w-step-card p {
  margin-top: 8px;
  color: var(--w-ink-600);
  font-size: 0.92rem;
}

@media (max-width: 860px) {
  .w-steps {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Job category chips
   ========================================================================== */

.w-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.w-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--w-border);
  background: var(--w-white);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--w-ink-700);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.w-chip:hover {
  border-color: var(--w-primary);
  color: var(--w-primary);
  background: var(--w-primary-50);
}

/* ==========================================================================
   Candidate cards
   ========================================================================== */

.w-candidate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.w-candidate-card {
  background: var(--w-white);
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.w-candidate-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--w-shadow-lg);
}

.w-candidate-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--w-ink-100);
}

.w-candidate-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.w-candidate-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.95);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
}

.w-candidate-exp {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.w-candidate-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.w-candidate-body h3 {
  font-size: 1.02rem;
  font-weight: 700;
}

.w-candidate-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--w-ink-600);
  font-size: 0.86rem;
}

.w-candidate-meta div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.w-candidate-meta svg {
  color: var(--w-ink-500);
  flex-shrink: 0;
}

.w-candidate-actions {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  gap: 8px;
}

.w-candidate-actions .w-btn {
  flex: 1;
  padding: 10px 12px;
  font-size: 0.85rem;
}

.w-empty-state {
  text-align: center;
  padding: 64px 20px;
  color: var(--w-ink-500);
}

.w-empty-state svg {
  color: var(--w-ink-300);
  margin-bottom: 14px;
}

.w-empty-state h3 {
  color: var(--w-ink-800);
  margin-bottom: 6px;
}

@media (max-width: 1080px) {
  .w-candidate-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .w-candidate-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .w-candidate-actions {
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .w-candidate-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .w-candidate-body {
    padding: 12px;
  }
}

/* 4-per-row variant, used on the homepage "Recently added candidates" section */
.w-candidate-grid.w-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1200px) {
  .w-candidate-grid.w-cols-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 860px) {
  .w-candidate-grid.w-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .w-candidate-grid.w-cols-4 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Resumes listing page — layout & filters
   ========================================================================== */

.w-page-header {
  background: linear-gradient(160deg, var(--w-ink-900), var(--w-primary-700));
  color: #fff;
  padding-block: 36px 28px;
}

.w-page-header h1 {
  color: #fff;
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
}

.w-page-header p {
  color: rgba(255, 255, 255, 0.75);
  margin-top: 6px;
  max-width: 560px;
}

.w-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 10px;
}

.w-breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

.w-listing {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 30px;
  align-items: start;
}

.w-filter-panel {
  position: sticky;
  top: calc(var(--w-header-h) + 20px);
  background: var(--w-white);
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  padding: 22px;
  box-shadow: var(--w-shadow-sm);
}

.w-filter-panel h3 {
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.w-filter-group {
  margin-top: 18px;
}

.w-filter-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--w-ink-700);
  margin-bottom: 8px;
}

.w-select {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--w-ink-200);
  background: var(--w-white);
  font-size: 0.9rem;
  color: var(--w-ink-800);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23475569' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.w-select:focus {
  outline: none;
  border-color: var(--w-primary);
  box-shadow: 0 0 0 3px var(--w-primary-50);
}

.w-filter-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.w-listing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.w-result-count {
  font-size: 0.92rem;
  color: var(--w-ink-600);
}

.w-result-count strong {
  color: var(--w-ink-900);
}

.w-filter-toggle {
  display: none;
}

@media (max-width: 940px) {
  .w-listing {
    grid-template-columns: 1fr;
  }

  .w-filter-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 340px);
    z-index: 200;
    border-radius: 0;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }

  .w-filter-panel.is-open {
    transform: translateX(0);
  }

  .w-filter-toggle {
    display: inline-flex;
  }

  .w-filter-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 190;
  }

  .w-filter-backdrop.is-open {
    display: block;
  }
}

.w-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 40px;
}

.w-pagination a,
.w-pagination span {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--w-border);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--w-ink-700);
  background: var(--w-white);
}

.w-pagination a:hover {
  border-color: var(--w-primary);
  color: var(--w-primary);
}

.w-pagination .is-active {
  background: var(--w-primary);
  border-color: var(--w-primary);
  color: #fff;
}

.w-pagination .is-disabled {
  color: var(--w-ink-300);
}

#worker-resumes-grid {
  min-height: 320px;
  position: relative;
}

.w-loading {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 0;
  color: var(--w-ink-500);
  font-weight: 600;
}

.w-loading.is-visible {
  display: flex;
}

.w-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid var(--w-primary-100);
  border-top-color: var(--w-primary);
  animation: w-spin 0.7s linear infinite;
}

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

/* ==========================================================================
   Resume details page
   ========================================================================== */

.w-details-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 32px;
  align-items: start;
}

.w-gallery {
  position: sticky;
  top: calc(var(--w-header-h) + 20px);
}

.w-gallery-main-wrap {
  position: relative;
}

.w-gallery-main {
  border-radius: var(--w-radius);
  overflow: hidden;
  background: var(--w-ink-100);
  aspect-ratio: 4 / 3.4;
  border: 1px solid var(--w-border);
  transition: opacity 0.18s ease;
}

.w-gallery-main.is-fading {
  opacity: 0;
}

.w-gallery-main img,
.w-gallery-main video,
.w-gallery-main iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}

/* Siblings of .w-gallery-main (not children - see the blade comment on
why), absolutely positioned over its left/right edges. inset-inline-*
rather than left/right so "previous" and "next" swap sides automatically
in RTL, matching how a right-to-left reader expects "back" to sit on the
right and "forward" on the left. */
.w-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(15, 23, 42, 0.45);
  color: var(--w-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(2px);
  transition: background 0.15s ease, transform 0.15s ease;
}

.w-gallery-nav:hover {
  background: rgba(15, 23, 42, 0.7);
  transform: translateY(-50%) scale(1.06);
}

.w-gallery-nav-prev {
  inset-inline-start: 12px;
}

.w-gallery-nav-next {
  inset-inline-end: 12px;
}

[dir="rtl"] .w-gallery-nav svg {
  transform: scaleX(-1);
}

@media (max-width: 560px) {
  .w-gallery-nav {
    width: 34px;
    height: 34px;
  }

  .w-gallery-nav-prev {
    inset-inline-start: 8px;
  }

  .w-gallery-nav-next {
    inset-inline-end: 8px;
  }
}

.w-gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.w-gallery-thumbs button {
  width: 66px;
  height: 66px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: var(--w-ink-100);
}

.w-gallery-thumbs button.is-active {
  border-color: var(--w-primary);
}

.w-gallery-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.w-profile-card {
  background: var(--w-white);
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  padding: 20px;
  margin-top: 16px;
}

.w-profile-name {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.w-profile-name h1 {
  font-size: 1.4rem;
}

.w-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--w-success);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

.w-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.w-tag {
  background: var(--w-primary-50);
  color: var(--w-primary);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
}

.w-tag.is-neutral {
  background: var(--w-ink-100);
  color: var(--w-ink-700);
}

.w-cta-row {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.w-cta-row .w-btn {
  flex: 1;
}

.w-info-card {
  background: var(--w-white);
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  padding: 26px;
  margin-bottom: 24px;
}

.w-info-card h2 {
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--w-ink-100);
  margin-bottom: 18px;
}

.w-info-card h2 svg {
  color: var(--w-primary);
}

.w-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 16px;
}

.w-info-grid.w-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.w-info-item span {
  display: block;
  font-size: 0.78rem;
  color: var(--w-ink-500);
  font-weight: 600;
  margin-bottom: 4px;
}

.w-info-item strong {
  font-size: 0.95rem;
  color: var(--w-ink-900);
  font-weight: 700;
}

.w-exp-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--w-ink-200);
}

.w-exp-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.w-exp-row:first-child {
  padding-top: 0;
}

.w-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.w-summary-item {
  border: 1px solid var(--w-border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.w-summary-item svg {
  color: var(--w-primary);
  margin-bottom: 8px;
}

.w-summary-item strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--w-ink-900);
}

.w-summary-item span {
  font-size: 0.78rem;
  color: var(--w-ink-500);
  font-weight: 600;
}

.w-requirement-list li {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  color: var(--w-ink-700);
  font-size: 0.92rem;
}

.w-requirement-list svg {
  color: var(--w-accent-dark);
  flex-shrink: 0;
  margin-top: 2px;
}

@media (max-width: 980px) {
  .w-details-grid {
    grid-template-columns: 1fr;
  }
  .w-gallery {
    position: static;
  }
  .w-info-grid,
  .w-info-grid.w-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .w-exp-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .w-info-grid,
  .w-info-grid.w-cols-4 {
    grid-template-columns: 1fr 1fr;
  }
  .w-cta-row {
    flex-direction: column;
  }
}

.w-related {
  margin-top: 12px;
}

/* ==========================================================================
   CTA banner
   ========================================================================== */

.w-cta-banner {
  background: linear-gradient(135deg, var(--w-primary), #6d28d9);
  border-radius: var(--w-radius-lg);
  padding: 48px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.w-cta-banner h2 {
  color: #fff;
  font-size: 1.6rem;
}

.w-cta-banner p {
  color: rgba(255, 255, 255, 0.82);
  margin-top: 8px;
  max-width: 460px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.w-footer {
  background: var(--w-ink-900);
  color: rgba(255, 255, 255, 0.7);
  padding-top: 64px;
}

.w-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.w-footer-brand .w-logo {
  color: #fff;
}

.w-footer-brand p {
  margin-top: 14px;
  font-size: 0.9rem;
  max-width: 300px;
  color: rgba(255, 255, 255, 0.6);
}

.w-footer h4 {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}

.w-footer ul li {
  margin-bottom: 11px;
}

.w-footer ul li a {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.68);
  transition: color 0.15s ease;
}

.w-footer ul li a:hover {
  color: #fff;
}

.w-footer-contact li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.68);
}

.w-footer-contact svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--w-accent);
}

.w-social-row {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.w-social-row a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.w-social-row a:hover {
  background: var(--w-primary);
}

.w-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 22px;
  font-size: 0.85rem;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .w-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .w-footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .w-cta-banner {
    padding: 32px 24px;
    text-align: center;
    justify-content: center;
  }
}

/* ==========================================================================
   Back to top
   ========================================================================== */

.w-back-top {
  position: fixed;
  right: 22px;
  /* 22px base + the floating WhatsApp button's 56px + 14px gap, so the two
  never overlap when both are visible (see .w-whatsapp-float below). */
  bottom: 92px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--w-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--w-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 90;
  border: 0;
  cursor: pointer;
}

.w-back-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Site-wide floating WhatsApp button (see worker/partials/whatsapp-float.blade.php).
Always bottom-right, deliberately not mirrored under [dir="rtl"] like
.w-back-top - this brand icon conventionally stays in a fixed corner
regardless of language direction. z-index sits above every other
fixed-position layer on this site (header 100, mobile nav 199/200, Partner
Portal sidebar/drawer 200/210, modal system 300/301) per the requirement
that it stay reachable above page content and open modals alike. */
.w-whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
  z-index: 999;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.w-whatsapp-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.55);
}

@media (max-width: 560px) {
  .w-whatsapp-float {
    width: 50px;
    height: 50px;
    right: 16px;
    bottom: 16px;
  }

  .w-back-top {
    right: 16px;
    bottom: 80px;
  }
}

/* ==========================================================================
   Partner auth modal
   ========================================================================== */

.w-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}

.w-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.worker-scope .w-modal {
  position: fixed;
  inset: 0;
  z-index: 301;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.97);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  /* Root fix for the "clipped at the top" bug: a dialog taller than the
  viewport, centered with align-items:center inside a container that
  can't scroll itself, has its overflow above/below the fold with no way
  to reach it. align-items:flex-start here (never centers, so it can
  never clip) plus overflow-y:auto (so this layer - not body/html -
  scrolls when needed) hands vertical centering entirely to
  .w-modal-dialog's own margin-block:auto below instead: auto margins
  center the dialog when it fits and collapse to 0 - i.e. flush against
  this flex-start, fully scrollable - when it doesn't. That's the
  universally-supported way to get "centered when possible, always fully
  reachable otherwise" without depending on the newer align-items:safe
  keyword. */
  overflow-y: auto;
}

.worker-scope .w-modal.is-open {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.w-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--w-white);
  border-radius: var(--w-radius);
  padding: 32px 28px;
  box-shadow: var(--w-shadow-lg);
  max-height: min(90vh, calc(100vh - 40px));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* Flex-column with plain block children (Add/Edit/Delete modals) lays
  out identically to normal block flow, so this is safe for every existing
  modal - only .has-fixed-sections below changes behavior, and only for
  modals that opt into it. */
  margin-block: auto;
}

/* Opt-in structure for a modal whose header/footer must stay pinned while
only its middle content scrolls (currently just the Employer Filter
modal) - the dialog itself stops scrolling as a whole so there is exactly
one scroll region instead of two. */
.w-modal-dialog.has-fixed-sections {
  overflow-y: hidden;
  /* Tighter than the default 32px/28px - this dialog's own header/scroll
  area/footer padding (below) already provides breathing room, so the
  outer padding doesn't need to add as much again on top of it. */
  padding: 22px 24px;
}

.w-modal-fixed-top,
.w-modal-fixed-bottom {
  flex-shrink: 0;
}

.w-modal-fixed-top {
  margin-bottom: 12px;
}

.w-modal-scroll-area {
  overflow-y: auto;
  flex: 1;
  min-height: 0; /* required for a flex child to actually shrink and scroll instead of stretching its flex parent */
  padding-block: 2px; /* small buffer so focus rings on the first/last field aren't clipped by the scroll edge */
}

.w-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--w-ink-200);
  background: var(--w-white);
  color: var(--w-ink-600);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.w-modal-title {
  font-size: 1.25rem;
  padding-bottom: 30px;
  font-weight: 800;
}

.w-modal-subtitle {
  color: var(--w-ink-500);
  font-size: 0.9rem;
  margin-top: 6px;
  margin-bottom: 20px;
}

.w-auth-tabs {
  display: flex;
  gap: 6px;
  background: var(--w-ink-100);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 20px;
}

.worker-scope .w-auth-tab {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--w-ink-600);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.worker-scope .w-auth-tab.is-active {
  background: var(--w-white);
  color: var(--w-primary);
  box-shadow: var(--w-shadow-sm);
}

.w-form-alert {
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.w-form-alert.is-error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.w-form-alert.is-success {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.w-form-row {
  margin-bottom: 16px;
}

.w-form-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--w-ink-700);
  margin-bottom: 8px;
}

.w-form-optional-tag {
  font-weight: 400;
  color: var(--w-ink-500);
  text-transform: none;
}

.w-form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--w-ink-700);
  cursor: pointer;
}

.w-form-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--w-primary);
  flex-shrink: 0;
}

.w-form-phone-row {
  display: flex;
  gap: 8px;
}

.w-form-phone-row .w-select {
  flex: 0 0 42%;
}

.w-input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--w-ink-200);
  font-size: 0.92rem;
  color: var(--w-ink-800);
}

/* Full Name/Email on a Google-originated Register as Partner (see
partner-auth.js's data-open-register handling) - server-verified, shown
but not editable. */
.w-input[readonly] {
  background: var(--w-ink-50);
  color: var(--w-ink-600);
  cursor: not-allowed;
}

.w-input:focus,
.w-select:focus {
  outline: none;
  border-color: var(--w-primary);
  box-shadow: 0 0 0 3px var(--w-primary-50);
}

.w-input-otp {
  text-align: center;
  letter-spacing: 10px;
  font-size: 1.4rem;
  font-weight: 700;
}

.w-form-hint {
  color: var(--w-ink-600);
  font-size: 0.88rem;
  margin-bottom: 16px;
}

.w-form-error {
  color: #b91c1c;
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 6px;
}

.w-visa-rows-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.w-visa-rows-table th {
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--w-ink-600);
  padding: 0 6px 4px 0;
}

.w-visa-rows-table td {
  padding: 0 6px 0 0;
  vertical-align: top;
}

.w-visa-rows-table td:last-child,
.w-visa-rows-table th:last-child {
  padding-right: 0;
  white-space: nowrap;
  width: 1%;
}

[dir="rtl"] .w-visa-rows-table th,
[dir="rtl"] .w-visa-rows-table td {
  text-align: right;
  padding: 0 0 0 6px;
}

[dir="rtl"] .w-visa-rows-table td:last-child,
[dir="rtl"] .w-visa-rows-table th:last-child {
  padding-left: 0;
}

/* Two-fields-per-row layout for the Add/Edit Employer modals on desktop */
.w-form-grid {
  display: block;
}

.w-form-grid .w-form-row-full {
  grid-column: 1 / -1;
}

@media (min-width: 981px) {
  .w-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
  }
}

/* Employer Filter modal: slightly tighter row spacing than the Add/Edit
Employer forms (7 short fields don't need the same breathing room as a
long single-column form) and Reset/Save/Apply sharing one row instead of
each stacking full-width - both aimed at the modal using noticeably less
vertical space overall. */
.wp-filter-modal-grid .w-form-row {
  margin-bottom: 12px;
}

.wp-filter-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.wp-filter-modal-actions .w-btn {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  padding-inline: 10px;
}

@media (max-width: 480px) {
  .wp-filter-modal-actions {
    flex-wrap: wrap;
  }

  .wp-filter-modal-actions .w-btn {
    flex: 1 1 100%;
    white-space: normal;
  }
}

/* Select2 reskin - matches the portal's .w-select look instead of
Select2's default theme (loaded page-scoped on the Employer page only) */
.w-select2-wrap {
  position: relative;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--w-ink-200) !important;
  border-radius: 10px !important;
  min-height: 44px !important;
  padding: 4px 4px 4px 0;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--w-primary) !important;
  box-shadow: 0 0 0 3px var(--w-primary-50);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px;
  padding-left: 14px;
  color: var(--w-ink-800);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px;
}

/* Root cause of the missing dropdown arrow on /resumes' Filter Candidates
panel: the vendored select2.css (an admin theme skin) only paints the
arrow's actual chevron - its background-image - under a .light-style/
.dark-style ancestor class. Neither class exists anywhere in this public
Worker Portal layout, so .select2-selection__arrow b was rendering as an
empty, invisible box (this predates and is unrelated to allowClear/the
clear icon). Scoped to this one filter form - not every .w-select2-wrap
sitewide, since that same wrapper class is also used on the Profile,
Hire Now and Employer pages, which this task doesn't touch - and reusing
the exact chevron .w-select's own native dropdowns already use elsewhere
on this page, so it matches visually. select2.css loads after this
stylesheet (see worker/layouts/app.blade.php), so !important guards
against its equal-specificity background-size/repeat rule overriding this
regardless of load order. */
[data-resume-filter-form] .select2-selection--single .select2-selection__arrow b {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23475569' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px 8px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--w-primary-50);
  border: 1px solid var(--w-primary-100);
  color: var(--w-primary-700);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.82rem;
  font-weight: 600;
}

.select2-container--default .select2-selection__choice__remove {
  color: var(--w-primary-700) !important;
}

.select2-dropdown {
  border-color: var(--w-ink-200) !important;
  border-radius: 10px !important;
  box-shadow: var(--w-shadow-lg);
  overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--w-ink-200);
  border-radius: 8px;
  padding: 7px 10px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--w-primary) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--w-primary-50);
  color: var(--w-primary-700);
}

[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
  padding-right: 14px;
}

/* flatpickr reskin */
.flatpickr-calendar {
  border-radius: var(--w-radius-sm) !important;
  box-shadow: var(--w-shadow-lg) !important;
  border: 1px solid var(--w-ink-200) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--w-primary) !important;
  border-color: var(--w-primary) !important;
}

.flatpickr-day.inRange {
  background: var(--w-primary-50) !important;
  border-color: var(--w-primary-50) !important;
  box-shadow: -5px 0 0 var(--w-primary-50), 5px 0 0 var(--w-primary-50) !important;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
span.flatpickr-weekday {
  color: var(--w-ink-800);
}

.flatpickr-day:hover {
  background: var(--w-ink-100);
}

/* The calendar is appended to document.body (see employer-widgets.js's
appendTo fix), so it no longer sits inside the Arabic page's normal
content flow - direction still inherits from <html dir="rtl"> either way,
but this makes it explicit rather than relying on inheritance alone.
Localized day/month text (see initFlatpickr's arabicLocale) needs this to
actually read right-to-left instead of just being Arabic words laid out
in an LTR line. The day-grid column order and prev/next arrows stay
LTR internally - this flatpickr build has no RTL layout-mirroring of its
own to hook into, only text localization. */
[dir="rtl"] .flatpickr-calendar {
  direction: rtl;
  text-align: right;
}

/* Employer Filter is a centered .w-modal (see filter-panel.blade.php) -
reuses the same modal component Add/Edit Employer already use, so only the
small active-filter-count badge on the toolbar's Filter button needs its
own style here. */
.wp-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--w-accent);
  color: var(--w-white);
  font-size: 0.72rem;
  font-weight: 800;
  margin-inline-start: 6px;
}

.w-form-resend {
  text-align: center;
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--w-ink-500);
}

.w-form-resend a {
  color: var(--w-primary);
  font-weight: 700;
}

.w-form-back {
  display: block;
  margin: 16px auto 0;
  background: none;
  border: 0;
  color: var(--w-ink-500);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.w-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--w-ink-500);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.w-auth-divider::before,
.w-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--w-ink-200);
}

.worker-scope .w-btn-google {
  color: var(--w-ink-800) !important;
  border-color: var(--w-ink-200);
  gap: 10px;
}

.worker-scope .w-btn-google:hover {
  border-color: var(--w-ink-300);
  background: var(--w-ink-50);
}

.w-form-switch {
  text-align: center;
  margin: 18px 0 0;
  font-size: 0.88rem;
  color: var(--w-ink-600);
}

.w-form-switch a {
  color: var(--w-primary);
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   Language switcher (header) — single toggle link to the other language
   ========================================================================== */

.lang-switcher {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--w-ink-200);
  background: var(--w-white);
  color: var(--w-ink-700);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}

.lang-switcher:hover {
  border-color: var(--w-primary);
  color: var(--w-primary);
}

.lang-switcher:focus-visible {
  outline: 2px solid var(--w-primary);
  outline-offset: 2px;
}

.lang-switcher-flag {
  font-size: 1.1rem;
  line-height: 1;
}

/* ==========================================================================
   RTL (Arabic) — public Worker site
   ========================================================================== -
   As with portal.css, flex/grid children reverse automatically once
   dir="rtl" is set on <html>. Only fixed/absolute-positioned elements,
   background-image positions and a few directional icons need explicit
   overrides here.
   ========================================================================== */

/* Every component in this file (and portal.css/orders-vendor.css) sets its
   font-family via var(--w-font-heading)/var(--w-font-body) rather than a
   literal font name, so redefining the two tokens here is enough to retarget
   the entire site to Tajawal in RTL - no per-component overrides needed.
   Tajawal is already loaded by the same Google Fonts <link> as Inter/Plus
   Jakarta Sans (see app.blade.php / portal.blade.php's <head>), just unused
   until now. */
[dir="rtl"] {
  --w-font-heading: 'Tajawal', 'Segoe UI', sans-serif;
  --w-font-body: 'Tajawal', 'Segoe UI', sans-serif;
  text-align: right;
}

[dir="rtl"] .w-select {
  background-position: left 14px center;
}

[dir="rtl"] .w-candidate-badge {
  left: auto;
  right: 12px;
}

[dir="rtl"] .w-candidate-exp {
  right: auto;
  left: 12px;
}

[dir="rtl"] .w-modal-close {
  right: auto;
  left: 16px;
}

[dir="rtl"] .w-back-top {
  right: auto;
  left: 22px;
}

[dir="rtl"] .w-nav {
  text-align: right;
}

[dir="rtl"] .w-breadcrumb a,
[dir="rtl"] .w-form-back {
  flex-direction: row-reverse;
}

[dir="rtl"] .w-filter-toggle svg,
[dir="rtl"] .w-hero-actions svg,
[dir="rtl"] .w-hero-card-list svg {
  transform: scaleX(-1);
}

[dir="rtl"] .w-back-top svg {
  transform: none;
}

/* Numbers/prices/dates stay LTR-readable inside an RTL flow */
[dir="rtl"] .w-hero-trust strong,
[dir="rtl"] .w-stat-card strong,
[dir="rtl"] .w-candidate-exp,
[dir="rtl"] .w-info-item strong,
[dir="rtl"] .w-summary-item strong {
  direction: ltr;
  unicode-bidi: isolate;
}

[dir="rtl"] .w-stat-card,
[dir="rtl"] .w-hero-trust > div {
  text-align: right;
}

/* ==========================================================================
   Legal pages — Privacy Policy & Terms of Service
   ========================================================================== */

.w-legal-updated {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--w-primary);
  background: var(--w-primary-50);
  border: 1px solid var(--w-primary-100);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.w-legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  background: var(--w-white);
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  padding: 18px 20px;
  margin-bottom: 24px;
}

.w-legal-toc > span:first-child {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--w-ink-900);
  margin-inline-end: 6px;
}

.w-legal-toc a {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--w-primary);
  background: var(--w-primary-50);
  border: 1px solid var(--w-primary-100);
  padding: 6px 12px;
  border-radius: 999px;
}

.w-legal-toc a:hover {
  background: var(--w-primary-100);
}

.w-legal .w-info-card h2 {
  font-size: 1.1rem;
}

.w-legal .w-info-card p {
  color: var(--w-ink-700);
  margin-bottom: 12px;
}

.w-legal .w-info-card p:last-child {
  margin-bottom: 0;
}

.w-legal .w-info-card ul,
.w-legal .w-info-card ol {
  margin: 0 0 12px;
  padding-inline-start: 20px;
  color: var(--w-ink-700);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.w-legal .w-info-card ul {
  list-style: disc;
}

.w-legal .w-info-card ol {
  list-style: decimal;
}

.w-legal .w-info-card ul:last-child,
.w-legal .w-info-card ol:last-child {
  margin-bottom: 0;
}

.w-legal .w-info-card li strong {
  color: var(--w-ink-900);
}

.w-legal-note {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: var(--w-radius-sm);
  padding: 14px 16px;
  font-size: 0.85rem;
  margin-top: 14px;
}

/* Settings page tabs (Personal Details / Company Profile / Branding / Domain) */
.wp-settings-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--w-border);
  margin-bottom: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.wp-settings-tab-btn {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--w-ink-500);
  font-family: var(--w-font-body);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 12px 16px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.wp-settings-tab-btn:hover {
  color: var(--w-ink-800);
}

.wp-settings-tab-btn.is-active {
  color: var(--w-primary);
  border-bottom-color: var(--w-primary);
}

.wp-settings-tab-pane {
  display: none;
}

.wp-settings-tab-pane.is-active {
  display: block;
}

.wp-logo-upload {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.wp-logo-upload img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-sm);
  background: var(--w-ink-50);
  padding: 6px;
}

.wp-domain-preview {
  display: flex;
  align-items: center;
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-sm);
  overflow: hidden;
  font-size: 0.92rem;
}

.wp-domain-preview input {
  border: none;
  padding: 10px 12px;
  flex: 1;
  min-width: 0;
  font-family: var(--w-font-body);
  font-size: inherit;
}

.wp-domain-preview input:focus {
  outline: none;
}

.wp-domain-preview span {
  background: var(--w-ink-100);
  color: var(--w-ink-600);
  padding: 10px 12px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .wp-settings-tabs {
    gap: 0;
  }

  .wp-settings-tab-btn {
    padding: 10px 12px;
    font-size: 0.82rem;
  }

  .wp-logo-upload {
    flex-direction: column;
    align-items: flex-start;
  }
}