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

/* Partner registration "Registration Submitted" -> Contact Support:
   [icon] Contact Support
          +<code> <number>   (central RecruitmentCV WhatsApp number) */
.w-support-contact {
  white-space: normal;
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.w-support-contact-icon {
  flex-shrink: 0;
}

.w-support-contact-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
  min-width: 0;
}

.w-support-contact-number {
  font-size: 0.85rem;
  font-weight: 500;
  opacity: 0.8;
  unicode-bidi: isolate;
}

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

/* ---- Brand logo ---------------------------------------------------------
   ONE display rule for every header / footer logo - <x-brand-logo> (public
   header + footer, Partner Login) and the Partner Portal sidebar logo. Any
   uploaded or built-in logo fits a bounded box: a fixed height (so the
   header / footer never grows) and a maximum width, scaled with
   object-fit: contain - never stretched, distorted or cropped, whatever its
   shape (wide, square, tall) or format (SVG, PNG, JPG, WEBP; transparent
   backgrounds stay transparent). Each container only sets its own size
   (--w-brand-logo-h / --w-brand-logo-max-w). The image file is untouched. */
.w-brand-logo {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: var(--w-brand-logo-h, 34px);
  max-width: var(--w-brand-logo-max-w, 200px);
  max-height: var(--w-brand-logo-h, 34px);
  object-fit: contain;
  object-position: center;
}

/* Configured sizes: --w-header-logo-w/-h and --w-footer-logo-w/-h are the
   effective Header / Footer Logo Width & Height (App\Support\LogoDimensions:
   partner -> global -> default), published by the layouts
   (worker.partials.logo-dimensions). They are the MAXIMUM display area;
   the fallbacks below are the defaults. */

/* Header logo - every partner site + recruitmentcv.com. Sized from the
   header itself: the header is a fixed 76px (--w-header-h) and its tallest
   neighbours (nav pills, buttons, menu toggle) are ~42-46px, so the logo
   gets 52px (12px clear above and below - the header never grows), 48px
   on tablet and 44px on phones, with a generous width cap. The logo area
   may also give up width (flex-shrink + max-width: 100%) so it never runs
   into the navigation / language / Dashboard buttons / menu toggle when
   the space between them is tight; contain keeps it whole and in
   proportion. */
.w-header .w-logo {
  --w-brand-logo-h: min(var(--w-header-logo-h, 52px), calc(var(--w-header-h) - 6px));
  --w-brand-logo-max-w: var(--w-header-logo-w, 300px);
  flex: 0 1 auto;
  min-width: 0;
}

.w-header .w-logo .w-brand-logo {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(var(--w-brand-logo-max-w), 100%);
}

/* Tablet / phone: the configured size, never above what fits there. */
@media (max-width: 860px) {
  .w-header .w-logo {
    --w-brand-logo-h: min(var(--w-header-logo-h, 52px), 48px);
    --w-brand-logo-max-w: min(var(--w-header-logo-w, 300px), 260px);
  }
}

@media (max-width: 560px) {
  .w-header .w-logo {
    --w-brand-logo-h: min(var(--w-header-logo-h, 52px), 44px);
    --w-brand-logo-max-w: min(var(--w-header-logo-w, 300px), 200px);
  }
}

/* Footer logo: the configured size, never wider than its column. */
.w-footer .w-logo {
  --w-brand-logo-h: var(--w-footer-logo-h, 34px);
  --w-brand-logo-max-w: min(var(--w-footer-logo-w, 220px), 100%);
}

.w-logo .w-logo-name,
.w-partner-auth-page-brand .w-logo-name {
  min-width: 0;
  font-family: var(--w-font-heading);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* "Append Company Name" off / no name: logo only, no gap. */
.w-logo-name:empty {
  display: none;
}

.w-partner-auth-page-brand .w-logo-name {
  color: var(--w-ink-900);
  font-size: 1.15rem;
}

/* Narrow header: keep the name to one line beside the logo. */
@media (max-width: 560px) {
  .w-header .w-logo .w-logo-name {
    max-width: 42vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.95rem;
  }
}

.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-backdrop {
  display: none;
}

/* Logged-in customer's name next to Logout in the header. */
.w-header-customer {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--w-ink-700);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Customer Login/Logout inside the mobile nav drawer (the header button is
hidden at this breakpoint). Hidden on desktop. */
.w-nav-auth {
  display: none;
}

@media (max-width: 860px) {
  .w-nav .w-nav-auth {
    display: block;
    margin-top: 8px;
  }

  .w-nav button.w-nav-auth,
  .w-nav .w-nav-auth button {
    width: 100%;
    padding: 14px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--w-primary);
    color: var(--w-white);
    font: inherit;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
  }
}

@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-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);
  /* Bottom room is where the stats cards below overlap the hero. */
  padding-block: 56px 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;
}

/* 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-media {
  position: relative;
}

/* Hiring status on a candidate card's photo (worker.partials.candidate-hiring-status):
   bottom corner, clear of the face; outside the profile link. Hired by You (green),
   Already Hired (amber - opens the Already Hired notice), Candidate Available (blue).
   Logical inset, so RTL mirrors by itself. .is-inline = a table cell. */
.worker-scope .w-hiring-status {
  position: absolute;
  bottom: 12px;
  inset-inline-end: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.worker-scope .w-hiring-status svg {
  flex-shrink: 0;
}

.worker-scope .w-hiring-status.is-own {
  background: #ecfdf3;
  border-color: #abefc6;
  color: #067647;
}

.worker-scope .w-hiring-status.is-hired {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #b45309;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.worker-scope .w-hiring-status.is-hired:hover {
  background: #ffedd5;
  border-color: #fdba74;
}

.worker-scope .w-hiring-status.is-hired:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}

.worker-scope .w-hiring-status.is-available {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.worker-scope .w-hiring-status.is-inline {
  position: static;
  max-width: none;
  box-shadow: none;
}

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

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

/* Mobile: always 2 cards per row (never one full-width card). minmax(0, 1fr)
   lets columns shrink below their content's min width so long names/labels
   wrap instead of widening the page; the card internals are compacted to fit
   the ~130-200px column. Shared by every .w-candidate-grid (home, /resumes,
   partner candidates). */
@media (max-width: 560px) {
  .w-candidate-grid,
  .w-candidate-grid.w-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .w-candidate-card {
    min-width: 0;
  }
  /* Narrow 2-column cards: a smaller pill that wraps to a second line
     rather than being cut off. */
  .worker-scope .w-hiring-status:not(.is-inline) {
    bottom: 8px;
    inset-inline-end: 8px;
    max-width: calc(100% - 16px);
    gap: 3px;
    padding: 3px 7px;
    font-size: 0.62rem;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    border-radius: 10px;
  }
  .worker-scope .w-hiring-status:not(.is-inline) svg {
    width: 10px;
    height: 10px;
  }
  .w-candidate-body {
    padding: 10px;
    gap: 6px;
  }
  .w-candidate-body h3 {
    font-size: 0.88rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .w-candidate-meta {
    font-size: 0.74rem;
    gap: 4px;
  }
  .w-candidate-meta div {
    gap: 5px;
    align-items: flex-start;
    overflow-wrap: anywhere;
  }
  .w-candidate-meta svg {
    width: 12px;
    height: 12px;
    margin-top: 1px;
  }
  .w-candidate-actions {
    padding-top: 6px;
    gap: 6px;
  }
  .w-candidate-actions .w-btn {
    padding: 8px 6px;
    font-size: 0.76rem;
    border-radius: 10px;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }
}

@media (max-width: 360px) {
  .w-candidate-grid,
  .w-candidate-grid.w-cols-4 {
    gap: 8px;
  }
  .w-candidate-body {
    padding: 8px;
  }
}

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

/* Resumes: Available / Already Hired switch - same look as the Partner
candidates switch (portal.css .wp-view-switch / .wp-view-btn, not loaded on
the public pages); wraps on narrow screens. */
.w-hiring-switch {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 4px;
  background: var(--w-ink-100);
  border-radius: 10px;
  padding: 4px;
}

.worker-scope .w-hiring-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--w-ink-600);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

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

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

/* Filter panel as a drawer (< 940px, opened by the page's Filters button or
the mobile bottom navigation's Filter - main.js initFilterPanel): "Filters"
heading + close on top, the fields scrolling in between, Search / Reset
Filters pinned at the bottom (safe area included). Hidden from keyboard and
screen readers while closed (visibility, after the slide-out). The desktop
sidebar is unchanged: the drawer-only heading / label / icons stay hidden. */
.w-filter-drawer-only,
.w-filter-btn-icon {
  display: none;
}

@media (max-width: 940px) {
  .w-filter-panel {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
    box-shadow: -12px 0 32px rgba(15, 23, 42, 0.18);
    transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.3, 1), visibility 0s linear 0.28s;
  }

  .w-filter-panel.is-open {
    visibility: visible;
    transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.3, 1), visibility 0s;
  }

  .w-filter-panel h3 {
    flex: none;
    gap: 12px;
    margin: 0;
    padding-block: calc(12px + env(safe-area-inset-top, 0px)) 12px;
    padding-inline: 20px 12px;
    border-bottom: 1px solid var(--w-border);
    font-size: 1.15rem;
  }

  .w-filter-panel .w-filter-desktop-only {
    display: none;
  }

  .w-filter-panel .w-filter-drawer-only {
    display: inline;
  }

  .w-filter-panel .w-filter-close {
    flex: none;
    width: 44px;
    height: 44px;
    border-color: transparent;
    color: var(--w-ink-700);
  }

  .w-filter-panel .w-filter-close:hover,
  .w-filter-panel .w-filter-close:focus-visible {
    background: var(--w-ink-100);
  }

  .w-filter-panel form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .w-filter-fields {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 2px 20px 22px;
  }

  .w-filter-actions {
    flex: none;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--w-border);
    background: var(--w-white);
  }

  .w-filter-actions .w-btn {
    min-height: 48px;
  }

  .w-filter-actions .w-filter-btn-icon {
    display: block;
    flex: none;
  }

  .w-filter-backdrop.is-open {
    animation: w-backdrop-in 0.2s ease;
    touch-action: none;
  }

  /* No background scrolling under the open drawer; the floating WhatsApp
  button (z-index 999) would otherwise sit on top of Search / Reset. */
  html.w-filter-drawer-open,
  html.w-filter-drawer-open body {
    overflow: hidden;
  }

  html.w-filter-drawer-open .w-whatsapp-float {
    visibility: hidden;
  }
}

/* Phones: the drawer takes the screen width (up to 440px). */
@media (max-width: 767.98px) {
  .w-filter-panel {
    width: min(100vw, 440px);
  }
}

@keyframes w-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .w-filter-panel,
  .w-filter-panel.is-open {
    transition: none;
  }

  .w-filter-backdrop.is-open {
    animation: none;
  }
}

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

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

/* Restricted passport / driving licence slide (candidate-gallery,
   App\Support\PassportAccess): the image is already blurred server-side
   (that is what keeps it unreadable); the light CSS blur and the red note
   make that obvious. */
.w-gallery-blurred {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.w-gallery-blurred img {
  filter: blur(2px);
  transform: scale(1.05);
}

.w-gallery-blurred-note {
  position: absolute;
  inset-inline: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 10px;
  background: #b91c1c;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 4px 14px rgba(127, 29, 29, 0.35);
}

.w-gallery-blurred-note svg {
  flex-shrink: 0;
}

/* Email verified, mobile not (PassportAccess::MOBILE): the note carries its
   "Update Now" action (or the owner-only line for team members). */
.w-gallery-blurred-note.has-action {
  flex-wrap: wrap;
}

.w-gallery-note-action {
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #fff;
  color: #b91c1c;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.w-gallery-note-action:hover,
.w-gallery-note-action:focus-visible {
  background: #fee2e2;
}

.w-gallery-note-action:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.w-gallery-note-sub {
  flex-basis: 100%;
  font-size: 0.76rem;
  font-weight: 600;
  opacity: 0.9;
}

/* Mobile verification (PassportAccess::MOBILE): lock icon on top, the
   Passport message, then Update Now - all centred. The box hugs its content
   (fit-content, centred) and the message is held to 19em, so on desktop and
   tablet it breaks into two even lines ("...your mobile number to" / "this
   account to view the Passport." - measured for Inter and DM Sans); narrower
   phones wrap it further. On phones (<=560px, where the image is short) it
   spans at most the space between the prev/next arrows (8px + 34px from each
   edge), so it never runs under them. It grows upwards from the bottom and
   scrolls inside rather than ever being clipped. */
.w-gallery-blurred-note.is-stacked {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
  inset-inline: 12px;
  bottom: 12px;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin-inline: auto;
  max-height: calc(100% - 24px);
  overflow-y: auto;
  padding: 12px 18px 14px;
  font-size: 0.875rem;
  line-height: 1.4;
}

.w-gallery-note-message {
  display: block;
  max-width: 19em;
  overflow-wrap: anywhere;
  text-wrap: balance; /* even lines when phones wrap it to three */
}

.w-gallery-blurred-note.is-stacked .w-gallery-note-sub {
  flex-basis: auto;
}

@media (max-width: 480px) {
  .w-gallery-blurred-note {
    inset-inline: 8px;
    bottom: 8px;
    padding: 7px 10px;
    font-size: 0.78rem;
  }

  .w-gallery-note-action {
    padding: 4px 10px;
    font-size: 0.76rem;
  }
}

@media (max-width: 560px) {
  .w-gallery-blurred-note.is-stacked {
    inset-inline: 48px;
    bottom: 8px;
    max-width: calc(100% - 96px);
    max-height: calc(100% - 16px);
    gap: 6px;
    padding: 10px 12px 12px;
    font-size: 0.8125rem;
    line-height: 1.35;
  }
}

/* Smallest phones: same 13px text, tighter spacing. */
@media (max-width: 360px) {
  .w-gallery-blurred-note.is-stacked {
    gap: 5px;
    padding: 8px 10px 10px;
    line-height: 1.3;
  }
}

.w-gallery-thumbs button.is-restricted {
  position: relative;
}

.w-gallery-thumbs button.is-restricted img {
  filter: blur(1px);
}

.w-gallery-thumb-lock {
  position: absolute;
  inset-inline-end: 4px;
  bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #b91c1c;
  color: #fff;
  pointer-events: none;
}

.w-gallery-thumb-lock svg {
  width: 12px;
  height: 12px;
}

/* Candidate pages: "Verification required" notice (partner-verification-notice). */
.w-verify-notice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
  text-align: start;
}

.w-verify-notice-list {
  list-style: none;
  margin: 4px 0;
  padding: 0;
}

.w-verify-notice-link {
  font-weight: 700;
  text-decoration: underline;
  color: inherit;
}

.w-verify-notice.is-highlighted {
  animation: w-verify-notice-pulse 0.9s ease-in-out 2;
}

@keyframes w-verify-notice-pulse {
  50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.25); }
}

/* Video slides (App\Support\CandidateVideos): letterboxed, never cropped. */
.w-gallery-main video {
  background: #000;
}

/* A saved video link that can't be embedded: "Open Video" button. */
.w-gallery-video-link {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  text-align: center;
  color: var(--w-ink-700);
  font-weight: 600;
}

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

/* Video thumbnails: play badge over the (YouTube) thumbnail, or on a dark
   tile when there's no image (uploaded video / other links). */
.w-gallery-thumbs button.is-video {
  position: relative;
  background: linear-gradient(135deg, var(--w-ink-700), var(--w-ink-900));
}

.w-gallery-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.w-gallery-thumb-play svg {
  width: 26px;
  height: 26px;
  padding: 6px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
}

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

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

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

/* Blue verified mark after a candidate's name, on the same line
(worker.partials.candidate-verified-icon): scales with the name's font and
is centred on its capital letters, no background. Scoped with .worker-scope
so it beats the generic `.worker-scope img { display: block }` reset and
container photo rules such as `.wp-order-card-head img` (42px thumbnail),
which would otherwise push it onto its own line / resize it. */
.worker-scope .w-verified-icon {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  max-width: none;
  margin: 0;
  margin-inline-start: 0.3em;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  vertical-align: -0.12em;
  flex-shrink: 0;
}

/* "Already Hired" badge after the name + verified mark (worker.partials.
already-hired-badge): a clickable amber pill that opens the Already Hired
notice. Sized in rem (not the heading's em) so it stays a small tag next to
a large name; wraps under the name on narrow screens. */
.worker-scope .w-already-hired-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  margin-inline-start: 0.5rem;
  padding: 3px 10px;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  background: #fff7ed;
  color: #b45309;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.worker-scope .w-already-hired-badge:hover {
  background: #ffedd5;
  border-color: #fdba74;
}

.worker-scope .w-already-hired-badge:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}

.worker-scope .w-already-hired-badge svg {
  flex-shrink: 0;
}

/* "Already Hired" notice (worker.partials.already-hired-modal) - Partner
candidate page and public resume page: amber warning icon, three short
paragraphs, Cancel / Continue side by side, wrapping to full-width buttons
on narrow screens. Here (not portal.css) so both layouts have it. */
.wp-already-hired-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff7ed;
  color: #b45309;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.wp-already-hired-title {
  padding-bottom: 12px;
}

.wp-already-hired-text p {
  margin: 0 0 12px;
  color: var(--w-ink-600);
  font-size: 0.92rem;
  line-height: 1.6;
}

.wp-already-hired-text p:last-child {
  margin-bottom: 22px;
  color: var(--w-ink-800);
  font-weight: 600;
}

.wp-already-hired-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.wp-already-hired-actions .w-btn {
  flex: 1 1 140px;
}

/* Green status pill ("Hired", "Linked to you"). */
.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);
}

/* Action row on the candidate card (Hire Now / Download CV / Wishlist). The
buttons share the width but never shrink below their own label (.w-btn is
nowrap) - if the labels don't fit the card (e.g. longer Arabic text) the row
wraps instead of pushing the last button out of the card. Tighter padding
and font than a standalone .w-btn so all three fit the 420px card on one
line. */
.w-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.w-cta-row .w-btn {
  flex: 1 1 auto;
  padding: 12px 10px;
  gap: 6px;
  font-size: 0.85rem;
}

.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;
  height: 56px;
  max-width: calc(100vw - 44px);
  padding: 0 20px 0 7px;
  border-radius: 999px;
  /* --wa-* are set inline from the Partner's WhatsApp settings; the
     fallbacks are the defaults (PartnerPageContent::defaultWhatsapp()).
     --wa-icon is the label (text) colour. */
  background: var(--wa-bg, #25d366);
  color: var(--wa-icon, #fff);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--w-font-body);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 6px 20px var(--wa-shadow, 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 var(--wa-shadow-hover, rgba(37, 211, 102, 0.55));
}

/* White circle holding the WhatsApp icon, drawn in the button colour. */
.w-whatsapp-float-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--wa-bg, #25d366);
  display: flex;
  align-items: center;
  justify-content: center;
}

.w-whatsapp-float-icon svg {
  width: 26px;
  height: 26px;
}

/* Partner-uploaded WhatsApp icon (replaces the built-in glyph). */
.w-whatsapp-float-icon img {
  width: 62%;
  height: 62%;
  object-fit: contain;
}

.w-whatsapp-float-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Same button, in-flow, for the Partner Website -> WhatsApp tab preview. */
.w-whatsapp-float.is-preview {
  position: static;
  z-index: auto;
  max-width: 100%;
}

@media (max-width: 560px) {
  .w-whatsapp-float {
    height: 48px;
    right: 16px;
    bottom: 16px;
    max-width: calc(100vw - 32px);
    padding: 0 14px 0 6px;
    gap: 8px;
    font-size: 0.85rem;
  }

  .w-whatsapp-float-icon {
    width: 36px;
    height: 36px;
  }

  .w-whatsapp-float-icon svg {
    width: 22px;
    height: 22px;
  }

  /* Keep the pill compact so it never spans across page content. */
  .w-whatsapp-float-label {
    max-width: 42vw;
  }

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

/* Same auth form rendered as the body of the /partner/login page rather
than an overlay - normal document flow, always visible, no own scrolling. */
.worker-scope .w-modal.is-inline {
  position: static;
  inset: auto;
  z-index: auto;
  padding: 0;
  opacity: 1;
  visibility: visible;
  transform: none;
  overflow: visible;
}

.worker-scope .w-modal.is-inline .w-modal-dialog {
  max-width: 460px;
  max-height: none;
  overflow: visible;
  margin-block: 0;
  border: 1px solid var(--w-border);
  box-shadow: none; /* flat card in the page, not a floating overlay */
}

.w-partner-auth-page {
  /* Standalone page - no site header above it. */
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px 72px;
  background: linear-gradient(180deg, var(--w-primary-50) 0%, var(--w-ink-50) 55%);
}

.w-partner-auth-page-inner {
  width: 100%;
  max-width: 460px;
}

.w-partner-auth-page-head {
  text-align: center;
  margin-bottom: 22px;
}

/* "[Partner logo] Partner Portal" */
.w-partner-auth-page-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Partner Login logo: the header logo size, scaled to this card (40 x 180px by default). */
.w-partner-auth-page-brand {
  --w-brand-logo-h: min(calc(var(--w-header-logo-h, 52px) * 40 / 52), 60px);
  --w-brand-logo-max-w: min(calc(var(--w-header-logo-w, 300px) * 180 / 300), 100%);
}

/* Card heading row: "Partner Login" left, language switcher right. */
.w-partner-auth-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 30px;
}

.w-partner-auth-title-row .w-modal-title {
  padding-bottom: 0;
  min-width: 0;
}

.w-partner-auth-page-head p {
  margin: 10px 0 0;
  color: var(--w-ink-600);
  font-size: 0.95rem;
}

@media (max-width: 560px) {
  .w-partner-auth-page {
    padding-top: 28px;
  }
}

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

/* Partner login: identifier (mobile | username/email) and "Login using"
OTP / Password choice - state lives in partner-auth.js (applyLoginUi). */

/* .w-btn / .w-form-row / flex wrappers set display, which beats the UA
[hidden] rule. */
.w-auth-login-using[hidden],
.w-auth-identifier-toggle[hidden],
.w-input-icon[hidden],
.w-form-phone-row[hidden],
[data-partner-password-row][hidden],
[data-partner-send-otp][hidden],
[data-partner-password-login][hidden] {
  display: none;
}

/* "Use a username or email address instead" / "Use a mobile number instead" */
.w-auth-identifier-toggle {
  display: block;
  margin: 10px auto 0;
  padding: 2px 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--w-primary);
  text-align: center;
  cursor: pointer;
}

.w-auth-identifier-toggle:hover {
  color: var(--w-primary-700);
  text-decoration: underline;
}

.w-auth-identifier-toggle:focus-visible {
  outline: 2px solid var(--w-primary-100);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Input with a leading icon (mail icon on the username/email field). */
.w-input-icon {
  position: relative;
}

.w-input-icon > svg {
  position: absolute;
  top: 50%;
  inset-inline-start: 13px;
  transform: translateY(-50%);
  color: var(--w-ink-500);
  pointer-events: none;
}

.w-input-icon > .w-input {
  padding-inline-start: 40px;
}

.w-auth-login-using {
  margin-bottom: 16px;
}

.w-auth-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}

.w-auth-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--w-ink-700);
  cursor: pointer;
}

/* Native radio kept for keyboard/screen readers, visually replaced by the
mark. */
.w-auth-radio input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.w-auth-radio-mark {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--w-ink-300);
  background: var(--w-white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.w-auth-radio input:checked + .w-auth-radio-mark {
  border-color: var(--w-primary);
  box-shadow: inset 0 0 0 3px var(--w-white), inset 0 0 0 9px var(--w-primary);
}

.w-auth-radio input:focus-visible + .w-auth-radio-mark {
  outline: 2px solid var(--w-primary-100);
  outline-offset: 2px;
}

.w-auth-radio-text strong {
  font-weight: 700;
  color: var(--w-ink-800);
}

.w-auth-radio-text small {
  font-size: 0.8rem;
  color: var(--w-ink-500);
}

/* "Forgot Password?" under the Login password (end-aligned). */
.w-auth-forgot-link {
  display: block;
  margin: 8px 0 0 auto;
  padding: 2px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--w-primary);
  cursor: pointer;
}

[dir="rtl"] .w-auth-forgot-link {
  margin: 8px auto 0 0;
}

.w-auth-forgot-link:hover {
  color: var(--w-primary-700);
  text-decoration: underline;
}

.w-auth-forgot-link:focus-visible {
  outline: 2px solid var(--w-primary-100);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Password input with a show/hide eye at its end (right in LTR, left in
RTL) - worker.partials.password-toggle. */
.w-input-password {
  position: relative;
}

.w-input-password > .w-input {
  padding-inline-end: 46px;
}

/* Edge/IE's own reveal button would duplicate the eye. */
.w-input-password > .w-input::-ms-reveal {
  display: none;
}

.w-input-password-toggle {
  position: absolute;
  top: 50%;
  inset-inline-end: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--w-ink-500);
  cursor: pointer;
}

.w-input-password-toggle:hover {
  color: var(--w-ink-800);
  background: var(--w-ink-100);
}

.w-input-password-toggle:focus-visible {
  outline: 2px solid var(--w-primary-100);
  outline-offset: 1px;
  color: var(--w-primary);
}

.w-input-password-toggle .w-icon-eye-off,
.w-input-password-toggle.is-visible .w-icon-eye {
  display: none;
}

.w-input-password-toggle.is-visible .w-icon-eye-off {
  display: block;
}

/* "Continue →" (arrow mirrored in RTL; spaced by .w-btn's own gap). */
.w-btn-continue::after {
  content: '\2192';
  display: inline-block;
}

[dir="rtl"] .w-btn-continue::after {
  transform: scaleX(-1);
}

/* /partner/login card: subtitle sits directly under the title. */
.w-modal.is-inline .w-partner-auth-title-row {
  padding-bottom: 0;
}

.w-modal.is-inline .w-modal-title {
  font-size: 1.5rem;
}

.w-modal.is-inline .w-modal-subtitle {
  margin-top: 4px;
  margin-bottom: 24px;
}

.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-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-stat-card strong,
[dir="rtl"] .w-info-item strong,
[dir="rtl"] .w-summary-item strong {
  direction: ltr;
  unicode-bidi: isolate;
}

[dir="rtl"] .w-stat-card {
  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;
}

/* Website Config's own page nav (Home/About Us/Contact Us/Privacy Policy/
Terms of Service) - a vertical left-nav + right-content layout, distinct
from the horizontal .wp-settings-tabs strip above it (Company Profile/
Branding/Domain/Website Config, and the English/Arabic toggle inside each
page). Active-state technique (inset accent bar) matches .wp-nav-link.is-active
in the portal sidebar, recolored for this card's light background instead
of the sidebar's dark one. */
.wp-wc-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.wp-wc-nav {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-inline-end: 1px solid var(--w-border);
  padding-inline-end: 16px;
}

.wp-wc-nav-btn {
  appearance: none;
  background: none;
  border: none;
  border-radius: var(--w-radius-sm);
  text-align: start;
  padding: 10px 14px;
  font-family: var(--w-font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--w-ink-500);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.wp-wc-nav-btn:hover {
  background: var(--w-ink-50);
  color: var(--w-ink-800);
}

.wp-wc-nav-btn.is-active {
  background: var(--w-primary-50);
  color: var(--w-primary-700);
  box-shadow: inset 3px 0 0 var(--w-primary);
}

[dir="rtl"] .wp-wc-nav-btn.is-active {
  box-shadow: inset -3px 0 0 var(--w-primary);
}

.wp-wc-content {
  flex: 1;
  min-width: 0;
}

/* Website Config's own collapsible sections (Vuexy/Bootstrap Collapse
visual style - header + chevron + animated body - without pulling in
Bootstrap's JS, which the Worker Portal doesn't otherwise load). Each
section is independent: opening/closing one never affects another. */
.wp-wc-section {
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-sm);
  margin-bottom: 12px;
  overflow: hidden;
}

.wp-wc-section-header {
  appearance: none;
  background: var(--w-ink-50);
  border: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  font-family: var(--w-font-body);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--w-ink-800);
  cursor: pointer;
  text-align: start;
  transition: background 0.15s ease;
}

.wp-wc-section-header:hover {
  background: var(--w-primary-50);
}

.wp-wc-section-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--w-ink-500);
}

.wp-wc-section.is-open .wp-wc-section-chevron {
  transform: rotate(180deg);
  color: var(--w-primary);
}

.wp-wc-section-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.wp-wc-section.is-open .wp-wc-section-body {
  max-height: 3000px;
}

.wp-wc-section-body-inner {
  padding: 18px 16px 6px;
}

@media (max-width: 768px) {
  .wp-wc-section-header {
    padding: 12px 14px;
    font-size: 0.85rem;
  }

  .wp-wc-section-body-inner {
    padding: 14px 12px 4px;
  }
}

@media (max-width: 768px) {
  .wp-wc-layout {
    flex-direction: column;
  }

  .wp-wc-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    border-inline-end: none;
    padding-inline-end: 0;
    border-bottom: 1px solid var(--w-border);
    padding-bottom: 10px;
    margin-bottom: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wp-wc-nav-btn {
    white-space: nowrap;
  }

  .wp-wc-nav-btn.is-active {
    box-shadow: inset 0 -3px 0 var(--w-primary);
  }

  [dir="rtl"] .wp-wc-nav-btn.is-active {
    box-shadow: inset 0 -3px 0 var(--w-primary);
  }
}

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

/* Favicon preview: same box as the logos, icon shown at a small size. */
.wp-logo-upload img.wp-favicon-preview {
  padding: 22px;
}

/* Partner Website -> WhatsApp tab */
.wp-field-hint {
  color: var(--w-ink-500);
  font-size: 0.8rem;
  margin-top: 6px;
}

.wp-wa-preview {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 22px;
  margin-bottom: 18px;
  border: 1px dashed var(--w-border);
  border-radius: var(--w-radius-sm);
  background: var(--w-ink-50);
}

.wp-wa-preview-link {
  color: var(--w-ink-600);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

/* Contact Us > Branches/Locations repeater row */
.wp-branch-config-row {
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-sm);
  padding: 16px;
  margin-bottom: 14px;
}

.wp-branch-config-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--w-ink-800);
  font-size: 0.92rem;
}

.wp-branch-config-row-actions {
  display: flex;
  gap: 6px;
}

/* Privacy Policy / Terms of Service "Full Page Content" Quill editor */
.wp-quill-wrap {
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-sm);
  overflow: hidden;
}

.wp-quill-wrap .ql-toolbar.ql-snow {
  border: none;
  border-bottom: 1px solid var(--w-border);
  font-family: var(--w-font-body);
}

.wp-quill-wrap .ql-container.ql-snow {
  border: none;
  font-family: var(--w-font-body);
  font-size: 0.92rem;
}

.wp-quill-editor {
  height: 420px;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .wp-quill-editor {
    height: 320px;
  }
}

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

/* Assign Candidate modal - single-select row highlight */
[data-assign-candidate-rows] tr.is-selected {
  background: var(--w-primary-50);
  outline: 2px solid var(--w-primary-100);
  outline-offset: -2px;
}

[data-assign-candidate-rows] tr:hover {
  background: var(--w-ink-50);
}

/* ==========================================================================
   Customer account pages (/account/*) + wishlist button
   ========================================================================== */

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

@media (max-width: 860px) {
  .w-nav .w-nav-account {
    display: block;
  }
}

a.w-header-customer:hover {
  color: var(--w-primary);
}

.w-account-section {
  padding-top: 36px;
}

.w-account-head {
  margin-bottom: 24px;
}

.w-account-head h1 {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  font-weight: 800;
}

.w-account-head p {
  margin: 6px 0 0;
  color: var(--w-ink-600);
}

.w-account-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.w-account-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--w-white);
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  padding: 10px;
  position: sticky;
  top: calc(var(--w-header-h) + 20px);
}

.w-account-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--w-ink-700);
}

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

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

.w-account-card h2 {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 18px;
}

.w-account-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.w-account-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--w-ink-100);
  border-radius: 12px;
}

.w-account-item-photo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 56px;
  background: var(--w-ink-100);
}

.w-account-item-main {
  flex: 1;
  min-width: 0;
}

.w-account-item-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-weight: 700;
  color: var(--w-ink-900);
}

.w-account-item-title a:hover {
  color: var(--w-primary);
}

.w-account-item-ref {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--w-ink-500);
}

.w-account-item-sub {
  margin-top: 2px;
  font-size: 0.88rem;
  color: var(--w-ink-600);
}

.w-account-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
}

.w-account-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.w-account-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  background: var(--w-ink-100);
  color: var(--w-ink-600);
}

.w-account-badge.is-success { background: #ecfdf5; color: var(--w-success-dark); }
.w-account-badge.is-warning { background: #fffbeb; color: #b45309; }
.w-account-badge.is-info { background: #eff6ff; color: #2563eb; }
.w-account-badge.is-neutral { background: var(--w-ink-100); color: var(--w-ink-600); }

.w-account-danger {
  color: #b91c1c;
  border-color: #fecaca;
}

.w-account-empty {
  text-align: center;
  padding: 28px 10px;
}

.w-account-empty h3 {
  font-size: 1.05rem;
}

.w-account-empty p {
  margin: 6px 0 16px;
  color: var(--w-ink-600);
}

.w-account-photo-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.w-account-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 64px;
}

.w-account-avatar.is-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--w-primary-50);
  color: var(--w-primary);
  font-weight: 800;
  font-size: 1.4rem;
}

.w-account-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.w-account-field-wide {
  grid-column: 1 / -1;
}

.w-account-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--w-ink-100);
}

.w-account-contact-row:first-of-type {
  border-top: 0;
}

.w-account-contact-row strong {
  margin-inline-end: 8px;
}

.w-account-muted {
  display: block;
  font-size: 0.82rem;
  color: var(--w-ink-500);
}

.w-account-feed {
  list-style: none;
  margin: 0;
  padding: 0;
}

.w-account-feed li {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--w-ink-100);
}

.w-account-feed li:first-child {
  border-top: 0;
}

.w-account-feed-dot {
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--w-ink-300);
  flex: 0 0 10px;
}

.w-account-feed-dot.is-order {
  background: var(--w-primary);
}

.w-account-feed p {
  margin: 2px 0;
  color: var(--w-ink-600);
  font-size: 0.9rem;
}

.w-account-feed time {
  font-size: 0.8rem;
  color: var(--w-ink-500);
}

.w-wishlist-btn svg {
  fill: none;
}

.w-wishlist-btn.is-active {
  color: #e11d48;
  border-color: #fecdd3;
}

.w-wishlist-btn.is-active svg {
  fill: currentColor;
}

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

  .w-account-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
  }

  .w-account-nav a {
    white-space: nowrap;
  }
}

@media (max-width: 560px) {
  .w-account-item {
    flex-wrap: wrap;
  }

  .w-account-item-actions {
    width: 100%;
  }

  .w-account-fields {
    grid-template-columns: 1fr;
  }

  .w-account-contact-row {
    flex-wrap: wrap;
  }
}

/* Hire Now modal: compact vertical rhythm (this modal only). */
.w-modal[data-customer-hire-modal] .w-modal-title { padding-bottom: 0; }
.w-modal[data-customer-hire-modal] .w-modal-subtitle { margin-top: 4px; margin-bottom: 14px; }
.w-modal[data-customer-hire-modal] .w-form-alert { margin-bottom: 12px; }
.w-modal[data-customer-hire-modal] .w-form-row { margin-bottom: 14px; }
.w-modal[data-customer-hire-modal] .w-form-label { margin-bottom: 6px; }

/* Customer Hire Now - office decided server-side (display only). */
.w-hire-office {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 14px;
  border: 1px solid var(--w-ink-200);
  border-radius: 10px;
  background: var(--w-ink-50);
}

.w-hire-office span {
  font-size: 0.85rem;
  color: var(--w-ink-600);
}

/* ==========================================================================
   Customer account dropdown (header, partner subdomains)
   ========================================================================== */

.w-user-menu {
  position: relative;
}

.w-user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--w-ink-600);
  cursor: pointer;
}

.w-user-menu-trigger:focus-visible {
  outline: 2px solid var(--w-primary);
  outline-offset: 2px;
}

.w-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 2px solid var(--w-white);
  box-shadow: 0 0 0 1px var(--w-border);
}

.w-user-avatar.is-lg {
  width: 48px;
  height: 48px;
}

.w-user-avatar.is-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--w-primary-50);
  color: var(--w-primary);
  font-weight: 800;
}

.w-user-menu-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  z-index: 250;
  width: 17rem;
  max-width: calc(100vw - 24px);
  padding: 8px 0;
  background: var(--w-white);
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-sm);
  box-shadow: var(--w-shadow);
}

.w-user-menu-panel.is-open {
  display: block;
}

.w-user-menu-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 14px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--w-ink-100);
}

.w-user-menu-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.w-user-menu-id strong {
  font-size: 0.95rem;
  color: var(--w-ink-900);
  overflow-wrap: anywhere;
}

.w-user-menu-id span {
  font-size: 0.8rem;
  color: var(--w-ink-500);
  overflow-wrap: anywhere;
}

.w-user-menu-panel form {
  margin: 0;
}

.w-user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--w-ink-700);
  text-align: start;
  cursor: pointer;
}

.w-user-menu-item svg {
  opacity: 0.6;
  flex: 0 0 auto;
}

.w-user-menu-item:hover,
.w-user-menu-item.is-active {
  background: var(--w-primary-50);
  color: var(--w-primary);
}

.w-user-menu-item.is-danger {
  color: #b91c1c;
}

.w-user-menu-item.is-danger:hover {
  background: #fef2f2;
  color: #b91c1c;
}

.w-user-menu-divider {
  height: 1px;
  margin: 6px 0;
  background: var(--w-ink-100);
}

@media (max-width: 560px) {
  .w-user-avatar {
    width: 36px;
    height: 36px;
  }

  .w-user-menu-caret {
    display: none;
  }
}

/* Partner Website -> SMTP tab */
.wp-smtp-intro {
  margin: -4px 0 14px;
}

.wp-smtp-current {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.wp-smtp-current .w-form-label {
  margin: 0;
}

/* SMTP list (partials/smtp-list): collapsible cards in sending order. */
[data-smtp-root] [hidden] {
  display: none !important;
}

[data-smtp-root] .w-form-alert,
[data-settings-alert="smtp"] {
  white-space: pre-line;
}

.wp-smtp-item.is-primary {
  border-color: var(--w-success, #10b981);
}

.wp-smtp-name {
  font-weight: 500;
  color: var(--w-ink-600);
}

.wp-smtp-badges {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

.wp-smtp-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0 0 14px;
}

.wp-smtp-details dt {
  font-size: 0.75rem;
  color: var(--w-ink-500);
  margin: 0 0 2px;
}

.wp-smtp-details dd {
  margin: 0;
  font-weight: 600;
  color: var(--w-ink-800);
  overflow-wrap: anywhere;
}

.wp-smtp-warning {
  color: #b45309;
}

.wp-smtp-actions,
.wp-smtp-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.wp-smtp-actions .wp-smtp-delete {
  margin-inline-start: auto;
}

.wp-smtp-form-actions {
  justify-content: flex-end;
  margin-top: 6px;
}

.wp-smtp-new {
  margin-top: 12px;
}

.wp-smtp-new > .wp-wc-section-header {
  cursor: default;
}

/* "+ Add SMTP" and "+ Add SMTP With Google" side by side (stacked on phones). */
.wp-smtp-add-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.worker-scope .wp-smtp-google-btn {
  background: var(--w-white);
  gap: 10px;
}

.wp-google-g {
  flex: none;
  display: inline-block;
  vertical-align: middle;
}

.wp-smtp-google-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.wp-smtp-google-new > .wp-wc-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wp-smtp-google-account {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--w-border);
  border-radius: 10px;
  background: var(--w-ink-50);
  overflow-wrap: anywhere;
}

.wp-smtp-google-new input[readonly] {
  background: var(--w-ink-50);
  color: var(--w-ink-600);
  cursor: default;
}

/* SMTP form saving (the server tests the connection first): spinner in the button. */
.wp-smtp-btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  vertical-align: -2px;
}

.wp-smtp-form-actions .w-btn-outline .wp-smtp-btn-spinner {
  border-color: var(--w-primary-100);
  border-top-color: var(--w-primary);
}

[data-smtp-form][aria-busy="true"] .w-btn {
  cursor: progress;
}

@media (max-width: 480px) {
  .wp-smtp-add-actions > .w-btn {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .wp-smtp-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .wp-smtp-details {
    grid-template-columns: 1fr;
  }

  .wp-smtp-actions .wp-smtp-delete {
    margin-inline-start: 0;
  }
}

/* ==========================================================================
   Mobile bottom navigation (worker/partials/mobile-bottom-nav.blade.php)
   Phones only (< 768px, the reference site's breakpoint) - tablet and
   desktop unchanged. Fixed white bar, 4 equal items (icon over label),
   safe area included. z-index 180: over page content and the header's
   mobile menu (so Menu can close it again), under the filter drawer
   (backdrop 190 / panel 200) and the modal system (300/301).
   ========================================================================== */
.w-bottom-nav {
  display: none;
}

/* viewport-fit=cover (worker.layouts.app, for the bar's safe area) lets a
page reach under a landscape notch: keep the content inside the safe area.
No notch = insets 0 = the usual 20px. */
.worker-scope .w-container {
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

@media (max-width: 767.98px) {
  :root {
    --w-bottom-nav-h: 62px;
  }

  /* Room for the bar after the last content (footer). */
  body.w-has-bottom-nav {
    padding-bottom: calc(var(--w-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  }

  .w-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 180;
    display: flex;
    align-items: stretch;
    padding: 0 max(4px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(4px, env(safe-area-inset-left, 0px));
    background: var(--w-white);
    border-top: 1px solid var(--w-border);
    box-shadow: 0 -6px 18px rgba(15, 23, 42, 0.07);
  }

  .worker-scope .w-bottom-nav-item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: var(--w-bottom-nav-h);
    margin: 0;
    padding: 7px 0 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--w-ink-500);
    font: inherit;
    /* 10px at 320px wide up to 12px - "All Workers CV" fits one line at 320px. */
    font-size: clamp(0.625rem, 3.1vw, 0.75rem);
    font-weight: 600;
    line-height: 1.15;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease, background 0.15s ease;
  }

  .w-bottom-nav-item svg {
    flex: none;
    width: 22px;
    height: 22px;
  }

  .w-bottom-nav-icon {
    position: relative;
    display: flex;
  }

  .w-bottom-nav-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Active page / open menu or drawer: the theme's primary colour. */
  .worker-scope .w-bottom-nav-item.is-active,
  .worker-scope .w-bottom-nav-item[aria-expanded="true"] {
    color: var(--w-primary);
  }

  .worker-scope .w-bottom-nav-item.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 32px;
    height: 3px;
    margin-left: -16px;
    border-radius: 0 0 3px 3px;
    background: var(--w-primary);
  }

  .worker-scope .w-bottom-nav-item:active {
    background: var(--w-ink-50);
  }

  .worker-scope .w-bottom-nav-item:focus-visible {
    outline: 2px solid var(--w-primary);
    outline-offset: -3px;
    border-radius: 12px;
  }

  /* Number of applied filters on the resumes page's Filter item. */
  .w-bottom-nav-badge {
    position: absolute;
    top: -5px;
    right: -9px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--w-accent);
    color: var(--w-white);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--w-white);
  }

  .w-bottom-nav-badge[hidden] {
    display: none;
  }

  [dir="rtl"] .w-bottom-nav-badge {
    right: auto;
    left: -9px;
  }

  /* Floating WhatsApp / back-to-top buttons sit above the bar. */
  .w-has-bottom-nav .w-whatsapp-float {
    bottom: calc(var(--w-bottom-nav-h) + 12px + env(safe-area-inset-bottom, 0px));
  }

  .w-has-bottom-nav .w-back-top {
    bottom: calc(var(--w-bottom-nav-h) + 80px + env(safe-area-inset-bottom, 0px));
  }

  /* The header's mobile menu: its last links scroll clear of the bar. */
  .w-has-bottom-nav .w-nav {
    padding-bottom: calc(18px + var(--w-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  }

  /* The bar's Filter replaces the resumes page's own Filters button. */
  .w-has-bottom-nav .w-filter-toggle[data-filter-open] {
    display: none;
  }
}

/* ==========================================================================
   How It Works / Pricing pages (worker/how-it-works, worker/pricing)
   ========================================================================== */

/* Any number of steps (the Home page keeps its fixed 3 columns). */
.w-steps.w-steps-auto {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.w-step-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 12px;
  margin-bottom: 16px;
  display: block;
}

.w-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  align-items: stretch;
}

.w-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--w-white);
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  padding: 28px 24px;
}

.w-plan-card.is-highlighted {
  border: 2px solid var(--w-primary);
  box-shadow: var(--w-shadow);
}

.w-plan-badge {
  position: absolute;
  top: -12px;
  inset-inline-start: 24px;
  background: var(--w-primary);
  color: var(--w-white);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}

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

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

.w-plan-price span {
  font-family: var(--w-font-heading);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--w-ink-900);
}

.w-plan-price small {
  margin-inline-start: 6px;
  color: var(--w-ink-500);
  font-size: 0.88rem;
}

.w-plan-features {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.w-plan-features li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--w-ink-700);
  font-size: 0.92rem;
}

.w-plan-features svg {
  flex: none;
  margin-top: 3px;
  color: var(--w-primary);
}

.w-plan-btn {
  margin-top: auto;
  text-align: center;
  justify-content: center;
}

.w-plan-compare {
  margin-top: 48px;
}

.w-plan-compare h3 {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 14px;
  text-align: center;
}

.w-plan-compare-scroll {
  overflow-x: auto;
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  background: var(--w-white);
}

.w-plan-compare table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.w-plan-compare th,
.w-plan-compare td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--w-border);
  text-align: center;
}

.w-plan-compare tbody th {
  text-align: start;
  font-weight: 600;
  color: var(--w-ink-700);
}

.w-plan-compare tr:last-child th,
.w-plan-compare tr:last-child td {
  border-bottom: 0;
}

.w-plan-yes {
  color: var(--w-primary);
  font-weight: 800;
}

.w-plan-no {
  color: var(--w-ink-500);
}

.w-pricing-empty {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.w-pricing-empty p {
  color: var(--w-ink-700);
  font-size: 1.02rem;
}

/* Portal editors: an image preview that is not set stays hidden. */
.wp-logo-upload img[hidden] {
  display: none;
}

/* ==========================================================================
   Header bar (desktop, 861px+): logo | navigation | language + account
   button, vertically centred on one line. The navigation takes the free
   space between the logo and the buttons and centres its links with even
   gaps; labels never wrap. When the whole bar does not fit on one line,
   the header switches to the existing mobile menu (.w-header.is-compact,
   set by the measuring script in worker.partials.header) - measured, not a
   fixed breakpoint, because the logo width and the button labels differ
   per website and per login. Phones/tablets (860px and below) keep the
   rules above unchanged.
   ========================================================================== */
.w-header > .w-header-inner {
  max-width: 1440px;
  gap: 16px;
}

.w-header-actions {
  flex-shrink: 0;
  gap: 10px;
}

/* Account / login button: the same 40px height and 10px radius as the language selector. */
.w-header-actions .w-btn-sm {
  height: 40px;
  padding-block: 0;
  border-radius: 10px;
}

@media (min-width: 861px) {
  .w-header:not(.is-compact) .w-logo {
    flex-shrink: 0;   /* full bar: the logo keeps its configured size */
  }

  .w-header:not(.is-compact) .w-nav {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    gap: 2px;
  }

  .w-header:not(.is-compact) .w-nav a {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 10px 14px;
  }

  /* Compact header: the bar does not fit - the mobile menu (same rules as the max-width: 860px blocks above). */
  .w-header.is-compact .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-header.is-compact .w-nav.is-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

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

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

  .w-header.is-compact .w-nav-toggle {
    display: flex;
  }

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

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

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

  .w-header.is-compact .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-header.is-compact .w-nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
  }

  .w-header.is-compact .w-nav .w-nav-auth,
  .w-header.is-compact .w-nav .w-nav-account {
    display: block;
  }

  .w-header.is-compact .w-nav .w-nav-auth {
    margin-top: 8px;
  }

  .w-header.is-compact .w-nav button.w-nav-auth,
  .w-header.is-compact .w-nav .w-nav-auth button {
    width: 100%;
    padding: 14px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--w-primary);
    color: var(--w-white);
    font: inherit;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
  }
}

/* Pricing: test / dummy plans - always labelled, page notice above the cards. */
.w-pricing-test-notice {
  max-width: 900px;
  margin: 0 auto 28px;
  text-align: center;
}

.w-plan-test-label {
  align-self: flex-start;
  background: #FEF3C7;
  color: #92400E;
  border: 1px dashed #D97706;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 4px 10px;
}

.w-plan-card.is-highlighted .w-plan-test-label {
  margin-top: 6px;
}

.w-plan-test-note {
  color: #92400E;
  font-size: 0.78rem;
  text-align: center;
}

.w-pricing-test-notice {
  background: #FFFBEB;
  color: #92400E;
  border: 1px solid #FCD34D;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 600;
}