/* ============================================================
   Dashboard Pakistan — "Fluent" visual polish (add-on)
   Loaded AFTER main.css. Changes looks only: font, corners,
   borders, shadows, spacing, focus and hover states.
   Layout, content and features are untouched.
   To undo: remove the one <link> line that loads this file.
   ============================================================ */

:root{
  /* Fluent-style neutral and brand tokens (brand blue kept as is) */
  --fl-brand:#016BA5;
  --fl-brand-hover:#015A8C;
  --fl-brand-pressed:#014A73;
  --fl-brand-tint:#EBF3FA;
  --fl-text:#242424;
  --fl-text-2:#424242;
  --fl-text-3:#616161;
  --fl-stroke:#E0E0E0;
  --fl-stroke-strong:#D1D1D1;
  --fl-stroke-input:#C7C7C7;
  --fl-bg:#F5F5F5;
  --fl-card:#FFFFFF;
  --fl-r-sm:4px;      /* buttons, inputs, chips */
  --fl-r-md:8px;      /* cards */
  --fl-shadow-2:0 1px 2px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
  --fl-shadow-4:0 2px 4px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
  --fl-shadow-8:0 4px 8px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
  --fl-shadow-16:0 8px 16px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
  --fl-ease:cubic-bezier(.33,0,.67,1);
  --fl-font:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --fl-font-display:"Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- Type: one Windows font everywhere, calmer weights ---------- */
body, body.pd-body{
  font-family:var(--fl-font);
  color:var(--fl-text);
  background-color:var(--fl-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.pd-body h1, .pd-body h2, .pd-body h3,
.pd-section-heading, .pd-hero-title, .pd-opp-header-title, .pd-page-header h1{
  font-family:var(--fl-font-display);
  font-weight:600;
  letter-spacing:-.01em;
}
.pd-section-heading{ color:var(--fl-text); }
.pd-body input, .pd-body select, .pd-body textarea, .pd-body button{ font-family:inherit; }

/* Uppercase labels: less shouting, even spacing */
.pd-btn-pill, .pd-follow, .pd-visitor-badge,
.pd-detail-card h5, .pd-subsection-bar, .pd-deadline-box-label,
.pd-filter-card h6, .pd-detail-subtitle, .pd-opp-header-employer{
  letter-spacing:.02em;
  font-weight:600;
}

/* ---------- Cards: white, hairline border, soft Fluent shadow ---------- */
.pd-opp-card, .pd-detail-card, .pd-filter-card, .pd-deadline-box,
.opp-card, .filter-card, .employer-card, .detail-card, .apply-box{
  border-radius:var(--fl-r-md);
  border:1px solid var(--fl-stroke);
  box-shadow:var(--fl-shadow-2);
}
.pd-opp-card{ transition:box-shadow .2s var(--fl-ease), border-color .2s var(--fl-ease); }
.pd-opp-card:hover{ box-shadow:var(--fl-shadow-8); border-color:var(--fl-stroke-strong); }
.pd-opp-card:active{ box-shadow:var(--fl-shadow-4); }
.pd-feature-card{ border-radius:var(--fl-r-md); box-shadow:var(--fl-shadow-16); }
.pd-search-card{
  border-radius:var(--fl-r-md);
  border:1px solid var(--fl-stroke);
  box-shadow:var(--fl-shadow-16);
}

/* Logo tile: framed like a Windows thumbnail */
.pd-opp-card .pd-card-logo, .pd-feature-card .pd-card-logo{
  border-radius:var(--fl-r-sm);
  background:#FAFAFA;
  border:1px solid #EDEDED;
}
.pd-detail-logo{ border-radius:var(--fl-r-md); box-shadow:var(--fl-shadow-4); }

/* ---------- Card text: readable sizes, clear hierarchy ---------- */
.pd-opp-title{ font-weight:600; font-size:1rem; color:var(--fl-brand); }
.pd-meta-label{ font-size:.7rem; font-weight:400; color:var(--fl-text-3); text-transform:none; }
.pd-meta-value{ font-size:.82rem; font-weight:600; color:var(--fl-text); }
.pd-deadline-value{ font-weight:600; }
.pd-deadline-value.pd-status-urgent,
.pd-deadline-value.pd-status-closed,
.pd-opp-card.pd-closed .pd-deadline-value{ font-weight:700; }
.pd-divider{ border-top-color:#EDEDED; }
.pd-detail-card p, .pd-detail-card li{ color:var(--fl-text-2); line-height:1.6; }
.pd-results-count{ color:var(--fl-text-3); font-weight:400; }
.pd-results-count b{ font-weight:600; }

/* ---------- Inputs: Fluent text box (accent line on focus) ---------- */
.pd-input-pill, .pd-select-pill, .pd-body .form-control, .pd-body .form-select{
  border-radius:var(--fl-r-sm);
  border:1px solid var(--fl-stroke-input);
  border-bottom-color:#8A8A8A;
  min-height:40px;
  color:var(--fl-text);
  transition:border-color .1s var(--fl-ease), box-shadow .1s var(--fl-ease);
}
.pd-input-pill:hover, .pd-select-pill:hover{ border-color:#B3B3B3; border-bottom-color:#707070; }
.pd-input-pill:focus, .pd-select-pill:focus,
.pd-body .form-control:focus, .pd-body .form-select:focus{
  outline:none;
  border-color:var(--fl-stroke-input);
  border-bottom-color:var(--fl-brand);
  box-shadow:inset 0 -1px 0 var(--fl-brand);
}
.pd-input-pill::placeholder{ color:#707070; }

/* ---------- Buttons: 4px corners, hover and pressed states ---------- */
.pd-search-btn, .pd-filter-apply-btn, .pd-viewall-btn, .pd-btn-pill,
.pd-body .btn-primary{
  border-radius:var(--fl-r-sm);
  background:var(--fl-brand);
  border:1px solid transparent;
  font-weight:600;
  box-shadow:var(--fl-shadow-2);
  transition:background-color .1s var(--fl-ease);
}
.pd-search-btn:hover, .pd-filter-apply-btn:hover, .pd-viewall-btn:hover, .pd-btn-pill:hover,
.pd-body .btn-primary:hover{ background:var(--fl-brand-hover); color:#fff; }
.pd-search-btn:active, .pd-filter-apply-btn:active, .pd-viewall-btn:active, .pd-btn-pill:active,
.pd-body .btn-primary:active{ background:var(--fl-brand-pressed); }
.pd-search-btn{ min-height:40px; }

/* Secondary buttons (Clear All, Closed Opportunities) */
.pd-filter-clear-btn{
  border-radius:var(--fl-r-sm) !important;
  border:1px solid var(--fl-stroke-strong);
  color:var(--fl-text);
  font-weight:600;
  transition:background-color .1s var(--fl-ease);
}
.pd-filter-clear-btn:hover{ background:#F5F5F5; color:var(--fl-text); border-color:#C7C7C7; }
.pd-filter-clear-btn:active{ background:#E0E0E0; }
/* Selected "All/Closed Opportunities" tab: same brand blue as other buttons
   (it currently uses a darker one-off navy set inline in the page) */
.pd-filter-clear-btn[style*="#0b3d63"]{
  background:var(--fl-brand) !important;
  border-color:var(--fl-brand) !important;
  color:#fff !important;
}

/* ---------- Opportunity page: Apply box and Share buttons ---------- */
.pd-apply-box{ border-radius:var(--fl-r-md); border:1px solid var(--fl-stroke); box-shadow:var(--fl-shadow-2); }
.pd-apply-box-lightblue{ border-color:#D7E9F5; box-shadow:none; }
/* keep the red accent line on top of the Application box */
.pd-apply-box-primary{ border-color:var(--fl-stroke); border-top:3px solid var(--pd-red); }
.pd-btn-apply, .pd-btn-outline, .pd-btn-outline-success{
  border-radius:var(--fl-r-sm);
  font-weight:600;
  min-height:40px;
  transition:background-color .1s var(--fl-ease);
}
.pd-btn-apply{ box-shadow:var(--fl-shadow-2); }
.pd-apply-box-primary .pd-btn-apply:active{ background:#A3171F; }
.pd-apply-deadline, .pd-apply-alert{ border-radius:var(--fl-r-sm); }
.pd-share-btn{ border-radius:var(--fl-r-sm); }
.pd-employer-mini img{ border-radius:var(--fl-r-sm); }

/* ---------- Chips, pills, badges: consistent small radius ---------- */
.pd-follow, .pd-visitor-badge{ border-radius:var(--fl-r-sm); border-width:1px; }
.pd-header-pill, .pd-info-pill, .pd-detail-pill, .pd-tag-pill, .meta-pill{
  border-radius:var(--fl-r-sm);
  border-width:1px;
  font-weight:600;
}
.pd-meta-icon-chip, .pd-card-icon-chip, .employer-icon-chip, .employer-contact-chip{
  border-radius:var(--fl-r-sm);
}
.pd-subsection-bar{ border-left-width:3px; border-radius:0 var(--fl-r-sm) var(--fl-r-sm) 0; }

/* ---------- Pagination: Fluent subtle buttons ---------- */
.pd-pagination a, .pd-pagination span{
  border-radius:var(--fl-r-sm);
  border:1px solid var(--fl-stroke);
  color:var(--fl-text);
  font-weight:600;
  min-width:36px; height:36px;
  transition:background-color .1s var(--fl-ease);
}
.pd-pagination a:hover{ background:#F5F5F5; border-color:var(--fl-stroke-strong); }
.pd-pagination .active span{ background:var(--fl-brand); border-color:var(--fl-brand); }

/* ============================================================
   Harmonising the design elements (same elements, one system)
   ============================================================ */

/* One brand blue: the older pages (Employers, employer profile) use a
   slightly different blue (#0e5c8c) and Bootstrap's default link blue.
   Point them all at the same blue as the rest of the site. */
:root{
  --primary:#016BA5;
  --primary-dark:#014A73;
  --primary-light:#1A76AB;
  --bs-link-color:#016BA5;
  --bs-link-color-rgb:1,107,165;
  --bs-link-hover-color:#015A8C;
  --bs-link-hover-color-rgb:1,90,140;
  --bs-primary:#016BA5;
  --bs-primary-rgb:1,107,165;
}
.breadcrumb a{ color:var(--fl-brand); }
.breadcrumb-item.active{ color:var(--fl-text-3); }

/* Status colours: same meaning (green, amber, orange, red) on one
   scale, darkened just enough that the text is easy to read on white. */
:root{
  --pd-status-open:#107C41;
  --pd-status-open-bg:#E9F6EE;
  --pd-status-warning:#9A6700;
  --pd-status-warning-bg:#FFF6E0;
  --pd-status-urgent:#C24E0A;
  --pd-status-urgent-bg:#FDEEE3;
}
/* "Closed" used grey in one place and red everywhere else: red everywhere */
.pd-opp-ribbon-closed{ background:var(--pd-closed); }

/* Icon tiles: one shape, one tint, two sizes.
   Small (24px) beside card details, large (32px) beside section headings. */
.pd-meta-icon{
  width:24px; height:24px; flex:0 0 24px;
  border-radius:var(--fl-r-sm);
  background:var(--fl-brand-tint);
}
.pd-meta-row i, .pd-meta-icon i{ font-size:.8rem; color:var(--fl-brand); }
.pd-opp-card.pd-closed .pd-meta-icon{ background:var(--pd-closed-icon-bg); }
.pd-opp-card.pd-closed .pd-meta-icon i{ color:var(--pd-closed); }
.pd-card-icon-chip, .pd-meta-icon-chip{
  width:32px; height:32px; flex:0 0 32px;
  border-radius:var(--fl-r-sm);
  background:var(--fl-brand-tint);
  color:var(--fl-brand);
  font-size:.95rem;
}
.pd-card-icon-chip i, .pd-meta-icon-chip i{ color:inherit; font-size:inherit; }
.pd-detail-card h5 i{ color:inherit; }

/* Brand-coloured tiles (share, social, contact): one size, one shape */
.pd-share-btn, .employer-icon-chip, .employer-contact-chip{
  width:36px; height:36px; flex:0 0 36px;
  border-radius:var(--fl-r-sm);
  font-size:1rem;
}
.pd-share-row{ gap:8px; }

/* Small tags (pills, chips, badges): one height, one text size */
.pd-header-pill, .pd-info-pill, .pd-detail-pill, .meta-pill{
  min-height:26px;
  padding:3px 10px;
  font-size:.75rem;
  line-height:1.4;
  gap:6px;
  background:#F5F5F5;
  border:1px solid var(--fl-stroke);
  color:var(--fl-brand);
}
.pd-header-pill i, .pd-info-pill i{ color:var(--fl-brand); }
.pd-detail-pill.pd-closed-pill,
.pd-detail-badges-inline .pd-detail-pill.pd-closed-pill{
  background:var(--pd-closed); border-color:var(--pd-closed); color:#fff;
}
.pd-badge, .pd-opp-ribbon{ border-radius:var(--fl-r-sm); font-weight:700; letter-spacing:.04em; }

/* Logo tiles: white with a hairline edge, so white-background logos no
   longer sit inside a grey box. Same frame on every page. */
.pd-opp-card .pd-card-logo, .pd-feature-card .pd-card-logo{ background:#fff; }
.employer-card img{
  width:100%; max-width:140px; height:72px;
  object-fit:contain;
  display:block; margin:0 auto .75rem;
}
.employer-card > i.bi{ display:block; height:72px; line-height:72px; margin-bottom:.75rem; }
.detail-card > img{ border-radius:var(--fl-r-md) !important; border-color:var(--fl-stroke) !important; }
.pd-detail-logo, .pd-employer-mini img{ border-radius:var(--fl-r-sm); }

/* Section headings: same colour and weight on every page */
.pd-detail-card h5, .pd-subsection-heading,
.detail-card h5, .apply-box h6{
  color:var(--fl-brand) !important;
  font-weight:600 !important;
}
.pd-subsection-bar{ font-weight:600; }

/* Field labels (Grade, Level...) use the same grey as card labels */
.pd-detail-subtitle{ color:var(--fl-text-3); font-weight:600; }

/* Employers page: "N open" as a proper small tag, and fix the page-1
   button whose number was invisible (blue text on blue). */
.employer-card .meta-pill{ display:inline-flex; align-items:center; }
.employer-card{ transition:box-shadow .2s var(--fl-ease); }
.employer-card:hover{ box-shadow:var(--fl-shadow-8); }
.pagination .page-link{ color:var(--fl-text); border-color:var(--fl-stroke); font-weight:600; }
.pagination .page-item:first-child .page-link{ border-radius:var(--fl-r-sm) 0 0 var(--fl-r-sm); }
.pagination .page-item:last-child .page-link{ border-radius:0 var(--fl-r-sm) var(--fl-r-sm) 0; }
.pagination .page-item.active .page-link{ background:var(--fl-brand); border-color:var(--fl-brand); color:#fff; }

/* Footer and top bar social icons: same size */
.pd-follow .pd-social-ic{ width:24px; height:24px; font-size:1.05rem; }

/* ---------- Keyboard focus: the Windows two-tone focus ring ---------- */
.pd-body a:focus-visible, .pd-body button:focus-visible,
.pd-body .pd-opp-card:focus-visible{
  outline:2px solid var(--fl-text);
  outline-offset:2px;
  box-shadow:0 0 0 1px #fff;
}

/* ---------- Footer: tidier type ---------- */
.pd-footer-links a, .pd-footer-visitors{ font-weight:400; }

@media (prefers-reduced-motion: reduce){
  .pd-opp-card, .pd-search-btn, .pd-filter-clear-btn, .pd-pagination a{ transition:none; }
}

/* ---------- Top bar "Follow for Updates": bigger icons, ringing bell, popping social icons ----------
   Only the top bar; the footer icons stay still. */
.pd-topbar .pd-follow{ padding-top:6px; padding-bottom:6px; }
.pd-topbar .pd-follow .pd-social-ic{ width:30px; height:30px; font-size:1.4rem; }
.pd-topbar .pd-follow .bi-facebook{ --pd-pop:#1877F2; }
.pd-topbar .pd-follow .bi-linkedin{ --pd-pop:#0A66C2; }
.pd-topbar .pd-follow .bi-whatsapp{ --pd-pop:#25D366; }
.pd-topbar .pd-follow a:hover .pd-social-ic,
.pd-topbar .pd-follow a:focus-visible .pd-social-ic{ color:var(--pd-pop); animation-play-state:paused; }

/* Social icons swell, bounce and flash their brand colour one after another */
.pd-topbar .pd-follow a .pd-social-ic{ animation:pdPop 4.5s ease-in-out infinite; }
.pd-topbar .pd-follow a:nth-of-type(2) .pd-social-ic{ animation-delay:.3s; }
.pd-topbar .pd-follow a:nth-of-type(3) .pd-social-ic{ animation-delay:.6s; }
@keyframes pdPop{
  0%,70%,100%{ transform:scale(1);    color:var(--pd-navy); }
  76%        { transform:scale(1.45); color:var(--pd-pop); }
  82%        { transform:scale(.9);   color:var(--pd-pop); }
  88%        { transform:scale(1.12); color:var(--pd-pop); }
  94%        { transform:scale(1);    color:var(--pd-navy); }
}

/* Bell swings with a soft glow; sound waves ripple out from both sides */
.pd-topbar .pd-follow .bi-bell{ position:relative; overflow:visible; }
.pd-topbar .pd-follow .bi-bell::before{ display:inline-block; transform-origin:50% 12%; animation:pdBellSwing 1.6s ease-in-out infinite; }
.pd-topbar .pd-follow .bi-bell::after{
  content:""; position:absolute; inset:1px; border-radius:50%;
  border:2px solid transparent; border-left-color:var(--pd-navy); border-right-color:var(--pd-navy);
  opacity:0; pointer-events:none; animation:pdWave 1.6s ease-out infinite; }
@keyframes pdBellSwing{
  0%,100%{ transform:rotate(-15deg); filter:none; }
  25%,75%{ filter:drop-shadow(0 0 5px rgba(1,107,165,.7)); }
  50%    { transform:rotate(15deg); filter:none; }
}
@keyframes pdWave{
  0%  { transform:scale(.7); opacity:.85; }
  100%{ transform:scale(1.55); opacity:0; }
}

@media (max-width: 767.98px){
  .pd-topbar .pd-topbar-inner .pd-follow .pd-social-ic{ width:26px; height:26px; font-size:1.2rem; }
}
@media (prefers-reduced-motion: reduce){
  .pd-topbar .pd-follow .pd-social-ic,
  .pd-topbar .pd-follow .bi-bell::before,
  .pd-topbar .pd-follow .bi-bell::after{ animation:none; }
}

/* ---------- Home page: Search Opportunities button glows with a thin ring ---------- */
.pd-search-card .pd-search-btn{ animation:pdSearchGlow 2s ease-out infinite; }
.pd-search-card .pd-search-btn:hover{ animation-play-state:paused; }
@keyframes pdSearchGlow{
  0%{ box-shadow:0 0 0 0 rgba(1,107,165,.6); }
  70%,100%{ box-shadow:0 0 0 6px rgba(1,107,165,0); }
}
@media (prefers-reduced-motion:reduce){ .pd-search-card .pd-search-btn{ animation:none; } }

/* ---------- Home banner: Premium cards slide left, Premium label blinks ---------- */
#pdFeatureCarousel{ position:relative; overflow:hidden; padding:12px 24px 40px; margin:-12px -24px -40px; }
.pd-feature-card.active{ animation:pdSlideIn .6s cubic-bezier(.22,.61,.36,1) both; }
.pd-feature-card.pd-leaving{ display:flex; position:absolute; top:12px; left:24px; right:24px; animation:pdSlideOut .6s cubic-bezier(.22,.61,.36,1) both; }
.pd-feature-card.active.pd-rev{ animation-name:pdSlideInRev; }
.pd-feature-card.pd-leaving.pd-rev{ animation-name:pdSlideOutRev; }
@keyframes pdSlideIn{ from{ transform:translateX(calc(100% + 48px)); } to{ transform:none; } }
@keyframes pdSlideOut{ from{ transform:none; } to{ transform:translateX(calc(-100% - 48px)); } }
@keyframes pdSlideInRev{ from{ transform:translateX(calc(-100% - 48px)); } to{ transform:none; } }
@keyframes pdSlideOutRev{ from{ transform:none; } to{ transform:translateX(calc(100% + 48px)); } }
.pd-feature-card .pd-badge-premium, .pd-feature-card .pd-opp-title{ animation:pdPremiumBlink 1.2s ease-in-out infinite; }
@keyframes pdPremiumBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@media (prefers-reduced-motion:reduce){
  .pd-feature-card.active, .pd-feature-card.pd-leaving, .pd-feature-card .pd-badge-premium, .pd-feature-card .pd-opp-title{ animation:none; }
  .pd-feature-card.pd-leaving{ display:none; }
}

/* ---- Top bar tidy (2026-10-07): no "View All Opportunities" button, bigger logo,
   Follow box lined up with the right edge of the search boxes below ---- */
.pd-topbar .pd-btn-pill{ display:none !important; }
@media (min-width:768px){
  .pd-topbar-inner{ display:grid !important; grid-template-columns:1fr auto 1fr; align-items:center; }
  .pd-topbar-inner > .pd-brand{ grid-column:2; justify-self:center; }
  .pd-topbar-inner > .d-flex{ grid-column:3; justify-self:end; padding-right:24px; }
  .pd-topbar .pd-logo{ width:240px; height:112px; margin-top:22px; margin-bottom:-4px; }
}
@media (max-width:767.98px){
  .pd-topbar-inner .pd-logo{ width:180px; height:84px; }
}

/* ---- Home hero (2026-10-07): sharp blue tile pattern + typewriter heading ----
   main.css stretched bg.jpg to cover the whole banner, which blurred it on wide
   screens. Tiling it at half its pixel size keeps every edge crisp. */
.pd-hero::before{ background-size:438px 438px; background-repeat:repeat; background-position:center top; }
.pd-hero-title .pd-tw-c{ visibility:hidden; }
.pd-hero-title .pd-tw-c.on{ visibility:visible; }
.pd-hero-title .pd-tw-cur{ position:relative; }
.pd-hero-title .pd-tw-cur::after{
  content:""; position:absolute; right:-7px; top:.1em; width:3px; height:1em;
  background:#fff; animation:pdTwBlink .8s steps(1) infinite;
}
@keyframes pdTwBlink{ 50%{ opacity:0; } }

/* ---- Peach pattern (2026-10-07): sharper redraw at double resolution, a touch stronger ---- */
.pd-decor-band{ background-image:url("../images/pd-decor-sharp.png"); }
.pd-topbar, .pd-topbar::before, .pd-topbar::after{ background-image:url("../images/pd-topbar-sharp.jpg"); }
/* ---- Job page field headings bold (2026-10-09) ---- */
.pd-detail-subtitle{ font-weight:700 !important; color:#1c1c1c !important; }
/* ---- Phone page numbers (2026-10-09): 1, nearby pages, last page and "More pages >" ---- */
@media (max-width:767.98px){
  .pd-pagination{ gap:4px; flex-wrap:nowrap; max-width:100%; }
  .pd-pagination li{ display:none; }
  .pd-pagination li:last-child:not(.disabled),
  .pd-pagination li:nth-child(2), .pd-pagination li:nth-last-child(2),
  .pd-pagination li.active, .pd-pagination li.active + li,
  .pd-pagination li:has(+ li.active){ display:flex; align-items:center; }
  .pd-pagination li:first-child, .pd-pagination li:last-child.disabled{ display:none !important; }
  .pd-pagination a, .pd-pagination span{ min-width:34px; height:34px; padding:0 6px; }
  .pd-pagination li:last-child a{ padding:0 10px; white-space:nowrap; }
  .pd-pagination li:last-child a::before{ content:"More pages"; margin-right:4px; }
  .pd-pagination li:nth-child(2)::after, .pd-pagination li:nth-last-child(2)::before{
    content:"\2026"; display:none; padding:0 4px; color:var(--fl-text-3, #777); font-weight:600;
  }
  .pd-pagination:not(:has(li:nth-child(-n+4).active)) li:nth-child(2)::after{ display:inline; }
  .pd-pagination:not(:has(li:nth-last-child(-n+4).active)) li:nth-last-child(2)::before{ display:inline; }
}
/* ---- Phone job cards (2026-10-09): smaller logo, full employer names ---- */
@media (max-width:767.98px){
  .pd-opp-card .pd-card-logo{ flex:0 0 72px; width:72px; height:72px; margin:12px 0 12px 12px; }
  .pd-opp-card .pd-card-body{ padding:12px 12px 12px 12px; }
  .pd-opp-card .pd-opp-title{ font-size:1rem; line-height:1.3; padding-right:22px; }
  .pd-opp-card .pd-meta-value.pd-truncate{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3; }
  .pd-opp-card .pd-meta-row{ gap:6px; margin-bottom:4px; }
  .pd-opp-card .pd-meta-icon{ width:28px; height:28px; flex:0 0 28px; }
  .pd-opp-card .pd-meta-label{ white-space:nowrap; }
  .pd-opp-card .d-flex.justify-content-between{ gap:8px; }
  .pd-opp-card .d-flex.justify-content-between > .pd-meta-row{ min-width:0; }
}
/* ---- Computer page numbers (2026-10-09): same short row as phones ---- */
@media (min-width:768px){
  .pd-pagination{ gap:4px; flex-wrap:nowrap; max-width:100%; }
  .pd-pagination li{ display:none; }
  .pd-pagination li:last-child:not(.disabled),
  .pd-pagination li:nth-child(2), .pd-pagination li:nth-last-child(2),
  .pd-pagination li.active, .pd-pagination li.active + li,
  .pd-pagination li:has(+ li.active){ display:flex; align-items:center; }
  .pd-pagination li:first-child, .pd-pagination li:last-child.disabled{ display:none !important; }
  .pd-pagination a, .pd-pagination span{ min-width:34px; height:34px; padding:0 6px; }
  .pd-pagination li:last-child a{ padding:0 10px; white-space:nowrap; }
  .pd-pagination li:last-child a::before{ content:"More pages"; margin-right:4px; }
  .pd-pagination li:nth-child(2)::after, .pd-pagination li:nth-last-child(2)::before{
    content:"\2026"; display:none; padding:0 4px; color:var(--fl-text-3, #777); font-weight:600;
  }
  .pd-pagination:not(:has(li:nth-child(-n+4).active)) li:nth-child(2)::after{ display:inline; }
  .pd-pagination:not(:has(li:nth-last-child(-n+4).active)) li:nth-last-child(2)::before{ display:inline; }
}