/* ============================================================
   Dashboard Pakistan — Frontend Main Stylesheet
   Consolidated from the old site.css + home-design.css so every
   public page (site-wide UI + the pd- design-system pages) pulls
   its styles from a single file.
   ============================================================ */

/* ---------- Site-wide base styles ---------- */
:root {
  --primary: #0e5c8c;
  --primary-dark: #0a3450;
  --primary-light: #1a76ab;
  --accent: #e2222f;
  --bg: #f4f6f8;
}

body { background: var(--bg); font-family: 'Segoe UI', Tahoma, sans-serif; color: #222; }

a { text-decoration: none; }

/* ---------- Navbar ---------- */
.site-navbar { background: var(--primary); }
.site-navbar .nav-link { color: rgba(255,255,255,.85); font-weight: 500; }
.site-navbar .nav-link:hover, .site-navbar .nav-link.active { color: #fff; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  padding: 4rem 0 5rem;
}
.hero h1 { font-weight: 700; }
.hero-search {
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  margin-top: -3rem;
  position: relative;
  z-index: 2;
}
.stat-box { text-align: center; }
.stat-box .num { font-size: 1.8rem; font-weight: 700; color: var(--accent); }
.stat-box .label { font-size: .85rem; color: rgba(255,255,255,.8); }

/* ---------- Opportunity Cards ---------- */
.opp-card {
  background: #fff;
  border: 1px solid #e3e6e8;
  border-radius: 10px;
  padding: 1.25rem;
  height: 100%;
  transition: box-shadow .2s, transform .2s;
}
.opp-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.opp-card .employer-logo {
  width: 48px; height: 48px; object-fit: contain;
  border: 1px solid #eee; border-radius: 8px; background: #fff; padding: 4px;
}
.opp-card .opp-title { color: var(--primary); font-weight: 600; }
.opp-card .opp-title:hover { text-decoration: underline; }
.opp-card .meta-pill {
  display: inline-block; font-size: .75rem; background: #eef4f1; color: var(--primary);
  padding: 3px 10px; border-radius: 20px; margin: 2px 4px 2px 0;
}
.opp-card .deadline { font-size: .8rem; color: #c0392b; font-weight: 600; }

/* ---------- Filters ---------- */
.filter-card {
  background: #fff; border: 1px solid #e3e6e8; border-radius: 10px; padding: 1.25rem;
}
.filter-card h6 { color: var(--primary); font-weight: 700; margin-top: 1rem; }
.filter-card h6:first-child { margin-top: 0; }

/* ---------- Section headings ---------- */
.section-title { font-weight: 700; color: #1a1a1a; }
.section-title span { color: var(--primary); }

/* ---------- Employer cards ---------- */
.employer-card {
  background: #fff; border: 1px solid #e3e6e8; border-radius: 10px; padding: 1.5rem; text-align: center; height: 100%;
}
.employer-card img { width: 72px; height: 72px; object-fit: contain; margin-bottom: .75rem; }

/* ---------- Detail page ---------- */
.detail-card {
  background: #fff; border: 1px solid #e3e6e8; border-radius: 10px; padding: 1.5rem; margin-bottom: 1.25rem;
}
.detail-card h5 { color: var(--primary); font-weight: 700; margin-bottom: 1rem; }
.apply-box {
  background: #fff; border: 1px solid #e3e6e8; border-radius: 10px; padding: 1.5rem; position: sticky; top: 90px;
}

/* ---------- Employer detail page: icon chips ----------
   Matches the filled, colored-background icon treatment already used
   elsewhere on the site (Share buttons, For Queries contact icons)
   instead of bare transparent glyphs, so this page's icons look
   consistent with the rest of the design. Each platform/contact type
   gets its own background color. */
.employer-icon-chip{
  width:36px; height:36px; border-radius:10px; flex:0 0 36px;
  display:flex; align-items:center; justify-content:center;
  color:#fff !important; font-size:1.05rem; transition:opacity .15s;
}
.employer-icon-chip:hover{ opacity:.85; color:#fff !important; }
.employer-icon-website{ background:var(--primary); }
.employer-icon-facebook{ background:#1877f2; }
.employer-icon-linkedin{ background:#0a66c2; }
.employer-icon-instagram{ background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.employer-icon-youtube{ background:#ff0000; }
.employer-icon-twitter{ background:#000; }

.employer-contact-chip{
  width:36px; height:36px; border-radius:10px; flex:0 0 36px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1rem; margin-right:8px;
}
.employer-contact-email{ background:var(--primary); }
.employer-contact-phone{ background:#1a9a52; }
.employer-contact-whatsapp{ background:#25d366; }
.employer-contact-address{ background:#e0a300; }

/* ---------- Footer ---------- */
.site-footer { background: var(--primary-dark); }
.site-footer a { color: rgba(255,255,255,.7); }
.site-footer a:hover { color: #fff; }
.social-icon {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1); border-radius: 50%; color: #fff !important;
}
.social-icon:hover { background: var(--accent); }

/* ---------- Auth pages ---------- */
.auth-card { max-width: 440px; margin: 3rem auto; border-radius: 12px; }

/* ---------- Pagination ---------- */
.pagination .page-link { color: var(--primary); }
.pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); }
/* ---------- Design-system (home / search / opportunity-details) styles ---------- */
/* ============================================================
   Dashboard Pakistan — Homepage (exact design match)
   ============================================================ */
:root{
  --pd-navy-dark:#016BA5;
  --pd-navy:#016BA5;
  --pd-navy-light:#1a76ab;
  --pd-blue:#006BA6;
  --pd-red:#e2222f;
  --pd-red-bg:#feeff0;
  --pd-grey-bg:#f5f6f6;
  /* Closed listings use the brand accent red, so "Closed" reads clearly as done/unavailable. */
  --pd-closed:var(--pd-red);
  --pd-closed-bg:var(--pd-red-bg);
  --pd-closed-icon-bg:#fbdde0;
  --pd-grey-line:#e7e9ea;
  --pd-placeholder-bg:#eef0f1;
  --pd-peach:#f3c9a8;

  /* Deadline urgency scale: green while there's plenty of time, sliding through
     amber/orange as the deadline nears, ending in red once it's closed. */
  --pd-status-open:#1e9e50;
  --pd-status-open-bg:#e9f8ef;
  --pd-status-warning:#e0a300;
  --pd-status-warning-bg:#fff6e6;
  --pd-status-urgent:#e2660e;
  --pd-status-urgent-bg:#fdece0;
  --pd-status-closed:var(--pd-red);
  --pd-status-closed-bg:var(--pd-red-bg);
}

body.pd-body{
  background-color:var(--pd-grey-bg);
  font-family:'Poppins','Segoe UI',Tahoma,sans-serif;
  color:#222;
}

/* Decorative peach-pattern band (page bg.png). Used twice on the homepage:
   once right under the search card / above "Latest Opportunities", and
   again right above the footer — matching the approved design exactly. */
.pd-decor-band{
  width:100%;
  height:100px;
  background-image:url("../images/page bg.png");
  background-repeat:no-repeat;
  background-position:top center;
  background-size:1300px auto;
  pointer-events:none;
}
.pd-decor-band-top{ margin-top:0; margin-bottom:-55px; position:relative; z-index:0; }
.pd-decor-band-bottom{ margin-top:10px; }
/* Looser variant: used before content that starts with small left-aligned
   elements (e.g. the All/Closed Opportunities tabs on Find Opportunities) —
   the tight overlap used on the Home page's big centered heading looks like
   a collision here, so this keeps the pattern visible but clear of the tabs. */
.pd-decor-band-top-loose{ margin-top:0; margin-bottom:0; position:relative; z-index:0; }
.pd-decor-band-top-loose + .pd-results-wrap{ margin-top:22px; }
@media (max-width:767px){
  .pd-decor-band{ background-size:900px auto; height:70px; }
  .pd-decor-band-top{ margin-bottom:-30px; }
}
.pd-body a{ text-decoration:none; }

/* ---------------- Top bar ---------------- */
.pd-topbar{
  background-image: url("../images/nav-bg.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--pd-grey-line);
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  z-index: 10;
}

/* ---------------- Unified max-width for all home page sections ----------------
   Keeps the top bar, hero, search card, latest opportunities and footer
   all aligned to the same 1200px width instead of relying on Bootstrap's
   default (and inconsistent) .container breakpoints. */
.pd-container{
  max-width: 1200px !important;
  margin-left: auto;
  margin-right: auto;
}
.pd-topbar::before,
.pd-topbar::after{
  content:"";
  position:absolute;
  top:-20px;
  width:220px;
  height:150px;
  background-image: url("../images/nav-bg.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  opacity: 1;
}
.pd-topbar::before{ left:-40px; }
.pd-topbar::after{ right:-40px; }
.pd-topbar .container{ position:relative; z-index:1; top:10px;}
.pd-topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:12px;
}
.pd-btn-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--pd-navy);
  color:#fff;
  border:none;
  border-radius:30px;
  padding:10px 20px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  white-space:nowrap;
}
.pd-btn-pill:hover{ background:var(--pd-navy-dark); color:#fff; }

.pd-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  color:var(--pd-navy);
  line-height:1;
}
.pd-brand svg{ width:34px; height:38px; color:var(--pd-navy); }
.pd-brand .pd-brand-name{
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:.02em;
  margin-top:2px;
}
.pd-brand .pd-brand-sub{
  font-weight:700;
  font-size:.55rem;
  letter-spacing:.15em;
  color:var(--pd-red);
}

.pd-follow{
  display:inline-flex;
  align-items:center;
  gap:12px;
  border:1.5px solid var(--pd-navy);
  border-radius:30px;
  padding:8px 18px;
  color:var(--pd-navy);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.pd-follow a{
  display:inline-flex;
  color:inherit;
  text-decoration:none;
}
.pd-follow .pd-social-ic{
  width:26px; height:26px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--pd-navy);
  font-size:1.15rem;
}

.pd-visitor-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:var(--pd-grey-bg);
  border:1.5px solid var(--pd-grey-line);
  border-radius:30px;
  padding:6px 14px;
  color:var(--pd-navy);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  white-space:nowrap;
}
.pd-visitor-badge i{ color:var(--pd-blue); font-size:.85rem; }

/* ---------------- Hero ---------------- */
.pd-hero{
  position:relative;
  background:linear-gradient(135deg,var(--pd-navy-dark),var(--pd-navy) 60%, var(--pd-navy-light));
  overflow:hidden;
  padding:130px 0 95px;
  top: -100px;
}
.pd-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: url("../images/bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.15));
}
.pd-hero .container{ position:relative; z-index:1; padding-left:44px; padding-right:44px; }
.pd-hero-title{
  color:#fff;
  font-weight:800;
  font-size:1.9rem;
  line-height:1.25;
  text-transform:uppercase;
  letter-spacing:.01em;
  margin:0;
}

.pd-carousel-nav{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-bottom:14px;
}
.pd-nav-arrow{
  width:34px; height:34px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.8);
  background:transparent;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s;
}
.pd-nav-arrow:hover{ background:rgba(255,255,255,.15); }

/* ---------------- Opportunity Details: decorative banner ----------------
   Stays a plain, blank strip for normal listings — no title/text sits on
   it. Only Premium opportunities get a badge here; everything else (title,
   employer, deadline box, etc.) lives in the white .pd-opp-header section
   right below it. */
.pd-opp-banner{
  position:relative;
  z-index:0;
  top:-100px;
  background:linear-gradient(135deg,var(--pd-navy-dark),var(--pd-navy) 60%, var(--pd-navy-light));
  overflow:hidden;
  padding:130px 0 60px;
}
.pd-opp-banner::before{
  content:"";
  position:absolute; inset:0;
  background-image: url("../images/bg.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.15));
}
.pd-opp-banner .container{ position:relative; z-index:1; padding-left:44px; padding-right:44px; }
.pd-opp-banner-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--pd-red);
  color:#fff;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:8px 18px;
  border-radius:30px;
}

/* ---------------- Opportunity Details: page header (title + deadline box) ----------------
   Sits on plain white, directly under the banner strip above. */
.pd-opp-header{
  /* background:#fff; */
  padding:28px 0 8px;
}
.pd-opp-ribbon{
  display:inline-block;
  background:var(--pd-red);
  color:#fff;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:4px;
  margin-bottom:12px;
}
.pd-opp-ribbon-closed{ background:#8a9299; }
.pd-opp-ribbon-premium{ background:#ffc107; color:#1a1a1a; }
.pd-opp-header-title{
  color:var(--pd-navy);
  font-weight:800;
  font-size:1.9rem;
  line-height:1.25;
  margin:0 0 6px;
}
.pd-opp-header-category{
  color:var(--pd-blue);
  font-weight:600;
  font-size:.85rem;
}
.pd-opp-header-employer{
  color:#5b6770;
  font-weight:700;
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin-top:4px;
}
.pd-opp-header-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.pd-header-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--pd-grey-bg);
  border:1.5px solid var(--pd-grey-line);
  border-radius:30px;
  padding:6px 14px;
  color:var(--pd-navy);
  font-size:.78rem;
  font-weight:600;
}
.pd-header-pill i{ color:var(--pd-blue); }

.pd-deadline-box{
  background:#fff;
  border:1px solid var(--pd-grey-line);
  border-radius:12px;
  padding:20px 24px;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
}
.pd-deadline-box-label{
  color:var(--pd-blue);
  font-weight:800;
  font-size:.72rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:8px;
}
.pd-deadline-box-date{
  color:var(--pd-navy);
  font-weight:800;
  font-size:1.15rem;
}
.pd-deadline-box-sub{
  font-size:.78rem;
  color:#8a9299;
  margin-top:4px;
}
.pd-deadline-box-sub.pd-status-open{ color:var(--pd-status-open); }
.pd-deadline-box-sub.pd-status-warning{ color:var(--pd-status-warning); }
.pd-deadline-box-sub.pd-status-urgent{ color:var(--pd-status-urgent); font-weight:700; }
.pd-deadline-box-sub.pd-status-closed{ color:var(--pd-closed); font-weight:700; }

@media (max-width: 991px){
  .pd-opp-header-title{ font-size:1.5rem; }
  .pd-deadline-box{ margin-top:4px; }
}

/* Featured / hero opportunity card (horizontal) */
.pd-feature-card{
  position:relative;
  background:#fff;
  border-radius:12px;
  box-shadow:0 15px 35px rgba(0,0,0,.25);
  display:none;
  overflow:hidden;
}
.pd-feature-card.active{ display:flex; animation:pdFeatureFade .45s ease; }
@keyframes pdFeatureFade{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
.pd-feature-card.pd-closed{ background:var(--pd-closed-bg); }
.pd-feature-card.pd-closed .pd-opp-title{ color:var(--pd-closed) !important; }
.pd-feature-card .pd-card-logo,
.pd-opp-card .pd-card-logo{
  position:relative;
  background:var(--pd-placeholder-bg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px;
}
.pd-feature-card .pd-card-logo{ flex:0 0 130px; width:130px; height:130px; margin: 10px; border-radius: 4px; }
.pd-feature-card .pd-card-body{ flex:1; padding:14px 18px; min-width:0; }

/* ---------------- Opportunity Cards (shared) ---------------- */
.pd-badge{
  position:absolute;
  top:10px; left:10px;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.03em;
  padding:3px 9px;
  border-radius:4px;
  text-transform:uppercase;
  z-index:2;
}
.pd-badge-closed{ background:var(--pd-closed); color:#fff; }
.pd-badge-premium{ background:#ffc107; color:#1a1a1a; }

.pd-card-logo-icon{ width:44px; height:44px; opacity:.55; color:#9aa2a7; }
.pd-card-logo-wm{
  font-size:.5rem;
  font-weight:800;
  color:#b7bcbf;
  letter-spacing:.03em;
  margin-top:2px;
  text-align:center;
  line-height:1.1;
}
.pd-card-logo-wm span{ display:block; color:#c9575e; font-size:.42rem; font-weight:700; }
.pd-card-logo img{ width:100%; height:100%; object-fit:contain; }

.pd-opp-title{
  color:var(--pd-blue);
  font-weight:700;
  font-size:1rem;
  line-height:1.3;
  display:block;
  margin-bottom:8px;
}
.pd-opp-title:hover{ text-decoration:underline; }
.pd-opp-card.pd-closed .pd-opp-title{ color:var(--pd-closed); }

.pd-divider{ border-top:1px solid var(--pd-grey-line); margin:8px 0; }

.pd-meta-label{
  font-size:.62rem;
  color:#9aa0a3;
  font-weight:600;
  text-transform:capitalize;
  display:block;
}
.pd-meta-value{
  font-size:.8rem;
  font-weight:700;
  color:#2b2f31;
}
.pd-meta-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.pd-meta-row i{ color:var(--pd-blue); font-size:.8rem; }
.pd-meta-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  flex:0 0 26px;
  border-radius:6px;
  /* background:#e4f1fb; */
}
/* .pd-opp-card.pd-closed .pd-meta-icon{ background:var(--pd-closed-icon-bg); } */

/* Hero feature card meta icons use a filled light-blue "chip" behind the icon
   (per design), unlike the plain outline icons on the grid opportunity cards. */
.pd-meta-icon-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:9px;
  background:#dcedfb;
  color:var(--pd-blue);
  font-size:1rem;
}
.pd-feature-card.pd-closed .pd-meta-icon-chip{ background:var(--pd-closed-icon-bg); color:var(--pd-closed); }
.pd-opp-card.pd-closed .pd-meta-row.pd-deadline-row i{ color:var(--pd-closed); }
.pd-deadline-value{ color:#2b2f31; font-weight:700; font-size:.8rem; transition:color .2s ease; }
.pd-deadline-value.pd-status-open{ color:var(--pd-status-open); }
.pd-deadline-value.pd-status-warning{ color:var(--pd-status-warning); }
.pd-deadline-value.pd-status-urgent{ color:var(--pd-status-urgent); font-weight:800; }
.pd-opp-card.pd-closed .pd-deadline-value,
.pd-deadline-value.pd-status-closed{ color:var(--pd-closed); font-weight:800; }

.pd-opp-card{
  position:relative;
  background:#fff;
  border-radius:12px;
  box-shadow:0 3px 14px rgba(20,40,60,.06);
  display:flex;
  overflow:hidden;
  height:100%;
}
.pd-opp-card.pd-closed{ background:var(--pd-closed-bg); }
.pd-opp-card .pd-card-logo{ flex:0 0 120px; width:120px; height:120px; margin: 10px; border-radius: 4px; }
.pd-opp-card .pd-card-body{ flex:1; padding:14px 16px 14px 14px; min-width:0; }
.pd-truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------------- Search card ---------------- */
.pd-search-wrap{ margin-top:-150px; position:relative; z-index:3; }
/* Variant used on inner pages (e.g. Find Opportunities) whose page-header
   is much shorter than the Home hero, so it needs little to no overlap. */
.pd-search-wrap-page{ margin-top:28px; position:relative; z-index:3; }
.pd-search-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 20px 45px rgba(0,0,0,.15);
  padding:16px 24px 16px;
  position:relative;
}
.pd-tag-pill{
  position:absolute;
  top:-14px; left:50%;
  transform:translateX(-50%);
  background:#e9ebec;
  border:1px solid #d7dadc;
  border-radius:20px;
  padding:5px 18px;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
  color:#333;
  text-transform:uppercase;
  white-space:nowrap;
}
.pd-input-pill{
  border:1.3px solid #cfd4d7;
  border-radius:30px;
  padding:10px 18px;
  font-size:.85rem;
  width:100%;
  color:#333;
  background:#fff;
}
.pd-input-pill:focus{ outline:none; border-color:var(--pd-navy); box-shadow:0 0 0 3px rgba(14,92,140,.12); }
.pd-search-btn{
  background:#016BA5;
  color:#fff;
  border:none;
  border-radius:30px;
  padding:11px 34px;
  font-weight:700;
  font-size:.85rem;
}
.pd-search-btn:hover{ background:#016BA5; color:#fff; }

/* ---------------- Page header (inner pages) ---------------- */
.pd-page-header{
  background:linear-gradient(135deg,var(--pd-navy-dark),var(--pd-navy) 60%, var(--pd-navy-light));
  position:relative;
  overflow:hidden;
  padding:34px 0;
}
.pd-page-header::before{
  content:"";
  position:absolute; inset:0;
 background-image: url("../images/bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.pd-page-header .container{ position:relative; z-index:1; }
.pd-page-header h1{
  color:#fff;
  font-weight:800;
  font-size:1.6rem;
  text-transform:uppercase;
  margin:0 0 6px;
}
.pd-page-header .pd-crumb{
  color:rgba(255,255,255,.75);
  font-size:.82rem;
}
.pd-page-header .pd-crumb a{ color:rgba(255,255,255,.9); }

/* ---------------- Filter sidebar ---------------- */
.pd-filter-card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 3px 14px rgba(20,40,60,.06);
  padding:22px 20px;
}
.pd-filter-card h6{
  color:var(--pd-navy);
  font-weight:800;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  margin:16px 0 8px;
}
.pd-filter-card h6:first-child{ margin-top:0; }
.pd-filter-card label.form-label{
  font-size:.78rem;
  font-weight:600;
  color:#555;
}
.pd-select-pill{
  border:1.3px solid #cfd4d7;
  border-radius:30px;
  padding:9px 16px;
  font-size:.82rem;
  width:100%;
  color:#333;
  background:#fff;
}
.pd-select-pill:focus{ outline:none; border-color:var(--pd-navy); box-shadow:0 0 0 3px rgba(14,92,140,.12); }
.pd-filter-apply-btn{
  background:var(--pd-navy);
  color:#fff;
  border:none;
  border-radius:30px;
  padding:10px 20px;
  font-weight:700;
  font-size:.82rem;
  width:100%;
}
.pd-filter-apply-btn:hover{ background:var(--pd-navy-dark); color:#fff; }
.pd-filter-clear-btn{
  border:1.3px solid #cfd4d7;
  color:#555;
  border-radius:30px;
  padding:9px 20px;
  font-weight:600;
  font-size:.82rem;
  width:100%;
  background:#fff;
}
.pd-filter-clear-btn:hover{ background:#f5f6f6; color:#333; }

.pd-results-count{
  font-size:.85rem;
  color:#555;
  font-weight:600;
}
.pd-results-count b{ color:var(--pd-navy); }

/* ---------------- Pagination ---------------- */
.pd-pagination{ display:flex; justify-content:center; gap:6px; list-style:none; padding:0; margin:34px 0 0; }
.pd-pagination a, .pd-pagination span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:0 10px;
  border-radius:10px;
  border:1.3px solid #dfe3e5;
  color:#444;
  font-weight:600;
  font-size:.85rem;
  background:#fff;
}
.pd-pagination a:hover{ background:var(--pd-grey-bg); }
.pd-pagination .active span{ background:var(--pd-navy); border-color:var(--pd-navy); color:#fff; }
.pd-pagination .disabled span{ opacity:.4; }

/* ---------------- Section heading ---------------- */
.pd-section-tag-wrap{ text-align:center; margin-bottom:10px; }
.pd-tag-pill-static{
  position:static;
  transform:none;
  display:inline-block;
}
.pd-section-heading{
  text-align:center;
  font-weight:800;
  font-size:1.9rem;
  color:#1a1a1a;
  margin-bottom:34px;
}
.pd-section-heading span{ color:#006BA6; }

/* ---------------- View all button ---------------- */
.pd-viewall-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: #016BA5;
  color:#fff;
  border-radius:30px;
  padding:11px 26px;
  font-weight:700;
  font-size:.85rem;
}
.pd-viewall-btn:hover{ background:#016BA5; color:#fff; }

/* ---------------- Footer ---------------- */
.pd-footer{
  background:var(--pd-navy);
  padding:16px 0;
  margin-top:20px;
}
.pd-footer .pd-follow{ border-color:rgba(255,255,255,.8); color:#fff; }
.pd-footer .pd-follow .pd-social-ic{ color:#fff; }
.pd-footer-links a{
  color:#fff;
  font-size:.82rem;
  font-weight:500;
}
.pd-footer-links a:hover{ text-decoration:underline; }
.pd-footer-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  padding-top: 30px;
  padding-bottom: 30px;
}
.pd-footer-inner .pd-follow{ justify-self:start; }
.pd-footer-visitors{
  justify-self:center;
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#fff;
  font-size:.82rem;
  font-weight:600;
}
.pd-footer-visitors i{ color:#fff; font-size:.9rem; }
.pd-footer-inner .pd-footer-links{ justify-self:end; }

/* ============================================================
   Opportunity Detail Page
   ============================================================ */

/* ---- Header block (inside .pd-page-header) ---- */
.pd-detail-header-inner{ display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; }
.pd-detail-logo{
  width:76px; height:76px; border-radius:14px; background:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  padding:8px; box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.pd-detail-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.pd-detail-logo .pd-card-logo-icon{ width:38px; height:44px; opacity:.6; color:#9aa2a7; }
.pd-detail-logo .pd-card-logo-wm{ font-size:.42rem; }
.pd-detail-title{ color:#fff; font-weight:800; font-size:1.5rem; margin:0 0 6px; line-height:1.3; }
.pd-detail-employer{ color:rgba(255,255,255,.85); font-size:.92rem; font-weight:600; }
.pd-detail-employer i{ margin-right:4px; }
.pd-detail-badges{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.pd-detail-pill{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.32);
  color:#fff; font-size:.72rem; font-weight:600;
  padding:5px 14px; border-radius:20px;
}
.pd-detail-pill.pd-closed-pill{ background:var(--pd-closed); border-color:var(--pd-closed); }

/* Same pills, but used on a white card body (Opportunity Type section) instead of the dark hero */
.pd-detail-badges-inline{ margin-top:0; }
.pd-detail-badges-inline .pd-detail-pill{
  background:var(--pd-grey-bg); border:1px solid #dfe6ee; color:var(--pd-navy);
}
.pd-detail-badges-inline .pd-detail-pill.pd-closed-pill{ background:var(--pd-closed); border-color:var(--pd-closed); color:#fff; }

/* ---- Content cards ---- */
.pd-detail-card{
  background:#fff; border-radius:14px; box-shadow:0 3px 14px rgba(20,40,60,.06);
  padding:24px; margin-bottom:22px;
}
.pd-detail-card h5{
  color:var(--pd-navy); font-weight:800; font-size:.88rem; text-transform:uppercase;
  letter-spacing:.03em; margin-bottom:18px; display:flex; align-items:center; gap:10px;
}
.pd-detail-card h5 i{ color:var(--pd-blue); font-size:.95rem; }
.pd-card-icon-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex:0 0 32px; border-radius:9px;
  background:#dcedfb; color:var(--pd-blue); font-size:.9rem;
}
.pd-detail-card p, .pd-detail-card li{ font-size:.86rem; color:#40464a; }
/* Guard against mobile browsers (e.g. Android Chrome) auto-styling recognised
   text (addresses, dates, phone numbers) inside these value rows — without
   this, such values can render indented/highlighted in a different color. */
.pd-row-item p{ color:#40464a !important; text-decoration:none !important; padding-left:0 !important; margin-left:0 !important; }
.pd-detail-card ul{ padding-left:1.1rem; margin-bottom:0; }
.pd-detail-subtitle{ font-size:.72rem; font-weight:700; color:#1c1c1c; text-transform:uppercase; letter-spacing:.02em; display:block; margin-bottom:4px; }
.pd-label-caps{ text-transform:uppercase; letter-spacing:.02em; }

/* Highlighted subsection divider bar (e.g. "Education, Experience and Skills
   Requirements" inside the Eligibility & Requirements card) — light blue fill
   with a solid left accent border, matching the approved design. */
.pd-subsection-bar{
  display:flex; align-items:center; gap:8px;
  background:#eef6fb; border-left:4px solid var(--pd-blue);
  color:var(--pd-blue); font-weight:800; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.02em; padding:10px 14px; border-radius:0 6px 6px 0; margin:18px 0 6px;
}
.pd-subsection-bar i{ font-size:.9rem; }

/* Row-aligned N-column field grid used by pd_field_grid() (e.g. Opportunity
   Type: Level | Placement | Type & Nature of Appointment). A real CSS grid
   instead of CSS multi-columns: items fill row-major (col1, col2, col3,
   then wrap), so every cell in a row shares that row's height — if one
   cell's value wraps to extra lines, the cells beside it grow to match
   instead of drifting out of sync with the ones below. */
.pd-field-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  column-gap:32px; row-gap:0;
}
.pd-field-item{ min-width:0; padding:10px 0; }
.pd-field-item-hline{ border-bottom:1px solid var(--pd-grey-line); }
.pd-field-item-vdivider{ padding-right:20px; border-right:1px solid var(--pd-grey-line); }
@media (max-width:575.98px){
  .pd-field-grid{ grid-template-columns:1fr !important; }
  .pd-field-item{ border-right:none !important; padding-right:0 !important; border-bottom:1px solid var(--pd-grey-line); }
  .pd-field-item:last-child{ border-bottom:none; }
}

/* Independent-height row list used inside a .pd-subgroup-col (e.g. Basic
   Details: Core Information | Organizational Details). Each field is its
   own full-width row with a divider — but unlike .pd-pair-grid, the two
   columns are NOT locked to the same row count, so a short column (e.g.
   4 fields) never grows blank/empty rows just to match a taller column
   (e.g. 8 fields) sitting next to it. */
.pd-row-list{ display:flex; flex-direction:column; }
.pd-row-item{ padding:10px 0; border-bottom:1px solid var(--pd-grey-line); }
.pd-row-item:last-child{ border-bottom:none; }

/* Separates a second stacked group of field-columns (e.g. Reference/Scale
   below Core Info/Organizational Details) from the group above it with a
   bold top divider, so it reads as a new section instead of a continuation. */
.pd-section-split{ margin-top:28px; padding-top:24px;  }

/* ---- Sub-grouped card content (e.g. Eligibility | Requirements, Salary | Benefits) ----
   Fixed 2-column grid instead of wrapping flexbox: with flex-wrap, an odd number of
   sub-groups (or a narrower viewport) left the last column stranded/misaligned under
   the previous one. A grid keeps every pair evenly aligned on the same row, on every
   card, regardless of how many sub-groups it has. */
.pd-subgroup-row{
  display:grid; grid-template-columns:repeat(2, 1fr); column-gap:40px; row-gap:24px;
  align-items:start;
}
.pd-subgroup-col{ min-width:0; }
.pd-subgroup-col:only-child{ grid-column:1 / -1; }
.pd-subgroup-col:nth-child(odd):not(:only-child){
  padding-right:20px; border-right:1px solid var(--pd-grey-line);
}
.pd-subgroup-col:nth-child(even){ padding-left:0; }
/* If a card ends with an odd, unpaired sub-group (e.g. only 3 of the 4 possible
   sections have data), let that last one span the full row instead of leaving
   an empty gap beside it. */
.pd-subgroup-col:nth-child(odd):last-child:not(:only-child){
  grid-column:1 / -1; border-right:none; padding-right:0;
}
/* A sub-group that should take the full row (e.g. a lone trailing item) */
.pd-subgroup-col-full{ grid-column:1 / -1; border-right:none !important; padding-right:0 !important; }
.pd-subgroup-title{
  font-size:.76rem; font-weight:800; color:var(--pd-blue); text-transform:uppercase;
  letter-spacing:.03em; margin-bottom:14px; padding-bottom:8px;
  border-bottom:2px solid var(--pd-grey-line); display:flex; align-items:center; gap:6px;
}
/* Post Status: shown as a single labelled strip under the grid rather than a
   standalone grid column, so it never ends up orphaned on its own row. */
.pd-subgroup-footer{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:20px; padding-top:16px; border-top:1px solid var(--pd-grey-line);
}
.pd-subgroup-footer .pd-detail-subtitle{ display:inline-flex; align-items:center; gap:6px; margin-bottom:0; }
.pd-detail-pill-solid{
  background:var(--pd-grey-bg); border:1px solid #dfe6ee; color:var(--pd-navy);
}
@media (max-width:767.98px){
  .pd-subgroup-row{ grid-template-columns:1fr; row-gap:18px; }
  .pd-subgroup-col{ padding:0 !important; border-right:none !important; }
  .pd-subgroup-col:not(:first-child){ border-top:1px solid var(--pd-grey-line); padding-top:18px !important; }
}

/* Row-aligned two-column layout (pd_row_list_paired(), e.g. Basic Details:
   Core Information | Organizational Details). Each left/right field pair is
   placed as two consecutive grid children, so native CSS grid row-sizing
   keeps them on the same row: if one side's value wraps to extra lines,
   the row across from it grows to match instead of the columns drifting
   out of sync further down the list. */
.pd-aligned-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); column-gap:40px; row-gap:0;
}
.pd-aligned-grid > *{ order:0; }
.pd-aligned-grid .pd-subgroup-title{ margin-bottom:14px; }
.pd-aligned-grid .pd-row-item{ padding:10px 0; border-bottom:1px solid var(--pd-grey-line); }
.pd-aligned-grid .pd-aligned-left{ padding-right:20px; border-right:1px solid var(--pd-grey-line); }
.pd-aligned-grid .pd-aligned-right{ padding-left:20px; }
.pd-aligned-grid .pd-row-item-empty{ border-bottom:none; }
@media (max-width:767.98px){
  /* On narrow screens the grid drops to a single column. Left/right cells
     are interleaved in the DOM (needed for the desktop row-pairing above),
     so re-sequence them here via the --m-order custom property (set inline
     per item in pd_row_list_paired()) to read as "all left rows, then all
     right rows" instead of alternating. */
  .pd-aligned-grid{ grid-template-columns:1fr; }
  .pd-aligned-grid > *{ order:var(--m-order, 0); }
  .pd-aligned-grid .pd-aligned-left{ border-right:none; padding-right:0; }
  .pd-aligned-grid .pd-aligned-right{ padding-left:0; }
  .pd-aligned-grid .pd-row-item-empty{ display:none; }
  .pd-aligned-grid .pd-subgroup-title:nth-of-type(2){
    margin-top:18px; padding-top:18px; border-top:1px solid var(--pd-grey-line);
  }
}
.pd-walkin-heading{
  color:var(--pd-navy); font-weight:800; font-size:.88rem; text-transform:uppercase;
  letter-spacing:.03em; display:flex; align-items:center; gap:10px;
}
.pd-walkin-heading i{ color:var(--pd-blue); font-size:.95rem; }

.pd-info-pill{
  display:inline-flex; align-items:center; gap:6px; background:var(--pd-grey-bg);
  color:var(--pd-navy); font-size:.74rem; font-weight:700; padding:5px 14px;
  border-radius:20px;
}
.pd-info-pill i{ color:var(--pd-blue); }
/* Even, gap-based wrapping for pill lists (Benefits, etc.) instead of the old
   margin-hack, which produced uneven/ragged spacing between rows and pills.
   A grid (rather than flex-wrap) keeps pills lined up in neat columns instead
   of each row starting wherever the previous row's last pill happened to end. */
.pd-pill-wrap{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;
}
.pd-info-pill{ width:100%; box-sizing:border-box; justify-content:flex-start; }
@media (max-width:991.98px){ .pd-pill-wrap{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:575.98px){ .pd-pill-wrap{ grid-template-columns:repeat(2, 1fr); } }

/* Benefits list: plain bulleted text (no icon/pill chip) in a 2-column layout. */
/* Utility: strips bullet markers/indent from any <ul> inside the details page
   (education, languages, benefits, documents, instructions) — the design
   calls for plain text rows with no bullet points at all. */
.pd-plain-list{ list-style:none !important; padding-left:0 !important; margin-bottom:0; }
.pd-plain-list li{ padding:2px 0; }

/* Used for the "Required Documents" and "Instructions for applicants" lists
   in the Application sidebar box — these DO want a visible dot bullet
   (unlike .pd-plain-list above, which is used elsewhere on this page). */
.pd-bulleted-list{ list-style:disc !important; padding-left:1.1rem !important; margin-bottom:0; }
.pd-bulleted-list li{ padding:2px 0; }

.pd-benefits-list{
  list-style:none; display:grid; grid-template-columns:repeat(2, 1fr);
  gap:2px 24px; padding-left:1.1rem; margin:0;
}
.pd-benefits-list li{ color:#40464a; padding:3px 0; }
@media (max-width:575.98px){ .pd-benefits-list{ grid-template-columns:1fr; } }

/* Keep all bulleted content lists (Documents Required, Instructions,
   Selection Process, Benefits, Education, Languages, etc.) showing a
   simple, consistent bullet marker — never removed, never an icon. */
.pd-detail-card ul li::marker,
.pd-apply-subsection ul li::marker{ color:#8a9198; }

/* Eligibility & Requirements: a shared 2-column grid where matching items
   (Education/Skills, Experience/Required Trainings, ...) sit in the same
   row and stretch to equal height — so a long entry on one side never
   leaves the facing entry on the other side floating with empty space
   next to it. */
.pd-pair-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:40px; row-gap:0; }
.pd-pair-header{
  font-size:.76rem; font-weight:800; color:var(--pd-blue); text-transform:uppercase;
  letter-spacing:.03em; padding-bottom:8px; margin-bottom:14px;
  border-bottom:2px solid var(--pd-grey-line); display:flex; align-items:center; gap:6px;
}
.pd-pair-header:nth-child(odd){ padding-right:20px; border-right:1px solid var(--pd-grey-line); }
.pd-pair-header:nth-child(even){ padding-left:20px; }
.pd-pair-cell{ padding:10px 0; border-bottom:1px solid var(--pd-grey-line); }
.pd-pair-cell:nth-child(odd){ padding-right:20px; border-right:1px solid var(--pd-grey-line); }
.pd-pair-cell:nth-child(even){ padding-left:20px; }
.pd-pair-grid > .pd-pair-cell:nth-last-child(2),
.pd-pair-grid > .pd-pair-cell:last-child{ border-bottom:none; }
@media (max-width:767.98px){
  .pd-pair-grid{ grid-template-columns:1fr; }
  .pd-pair-header:nth-child(2){ margin-top:18px; }
  .pd-pair-cell:nth-child(odd){ border-right:none; padding-right:0; }
  .pd-pair-cell:nth-child(even){ padding-left:0; }
  .pd-pair-grid > .pd-pair-cell:nth-last-child(2){ border-bottom:1px solid var(--pd-grey-line); }
}



/* ---- Sidebar / apply box ---- */
.pd-sticky-sidebar{
  position:sticky; top:20px; z-index:5;
}
.pd-apply-box{
  background:#fff; border-radius:14px; box-shadow:0 3px 14px rgba(20,40,60,.06);
  padding:22px;
}
.pd-apply-alert{ border-radius:10px; padding:12px 14px; font-size:.82rem; font-weight:700; text-align:center; margin-bottom:16px; transition:background .2s ease, color .2s ease; }
.pd-apply-alert.pd-alert-open{ background:var(--pd-status-open-bg); color:var(--pd-status-open); }
.pd-apply-alert.pd-alert-warning{ background:var(--pd-status-warning-bg); color:var(--pd-status-warning); }
.pd-apply-alert.pd-alert-urgent{ background:var(--pd-status-urgent-bg); color:var(--pd-status-urgent); }
.pd-apply-alert.pd-alert-closed{ background:var(--pd-status-closed-bg); color:var(--pd-status-closed); }
.pd-apply-alert.pd-alert-success{ background:#e9f8ef; color:#0e7a3d; }

.pd-apply-facts{ list-style:none; padding:0; margin:0 0 16px; }
.pd-apply-facts li{ display:flex; align-items:flex-start; gap:8px; font-size:.82rem; color:#3c4143; margin-bottom:10px; }
.pd-apply-facts li:last-child{ margin-bottom:0; }
.pd-apply-facts i{ color:var(--pd-blue); margin-top:2px; width:14px; text-align:center; }

.pd-btn-apply{
  display:block; width:100%; text-align:center; background:var(--pd-navy); color:#fff;
  border:none; border-radius:30px; padding:11px 20px; font-weight:700; font-size:.86rem; margin-bottom:10px;
}
.pd-btn-apply:hover{ background:var(--pd-navy-dark); color:#fff; }
.pd-btn-outline{
  display:block; width:100%; text-align:center; border:1.5px solid var(--pd-navy); color:var(--pd-navy);
  border-radius:30px; padding:9px 20px; font-weight:700; font-size:.82rem; background:#fff; margin-bottom:10px;
}
.pd-btn-outline:hover{ background:var(--pd-grey-bg); color:var(--pd-navy); }
.pd-btn-outline-success{ border-color:#1a9a52; color:#1a9a52; }
.pd-btn-outline-success:hover{ background:#e9f8ef; color:#1a9a52; }
.pd-btn-outline-secondary{ border-color:#cfd4d7; color:#555; }
.pd-btn-outline-secondary:hover{ background:var(--pd-grey-bg); color:#333; }

.pd-apply-box hr{ border-color:var(--pd-grey-line); margin:16px 0; }
.pd-apply-note{ font-size:.8rem; color:#3c4143; margin-bottom:4px; }
.pd-apply-note strong{ color:#1c1c1c; }

/* Boxed instructions text (Walk-in Interview) */
.pd-instructions-box{
  background:var(--pd-grey-bg); border:1px solid var(--pd-grey-line);
  border-radius:8px; padding:10px 14px; margin-top:2px;
}

/* ---- Application card (red-accented, matches the approved sidebar design) ---- */
.pd-apply-box-primary{
  border:1.5px solid var(--pd-red-bg);
  border-top:4px solid var(--pd-red);
}
.pd-apply-box-title{
  color:var(--pd-red); font-weight:800; font-size:.82rem; text-transform:uppercase;
  letter-spacing:.04em; margin-bottom:18px; display:flex; align-items:center; gap:10px;
}
.pd-card-icon-chip-red{ background:var(--pd-red-bg); color:var(--pd-red); }
.pd-apply-deadline{
  display:flex; flex-direction:column; gap:2px;
  background:var(--pd-red-bg); border-radius:10px; padding:12px 14px; margin-bottom:16px;
}
.pd-apply-deadline .pd-label-caps{ font-size:.68rem; font-weight:800; color:var(--pd-red); }
.pd-apply-deadline strong{ font-size:.95rem; color:var(--pd-navy); }
.pd-apply-subsection{ margin-bottom:16px; }
.pd-apply-subsection .pd-detail-subtitle{ display:flex; align-items:center; gap:6px; }
.pd-apply-subsection ul{ padding-left:1.1rem; }
.pd-apply-fee-none{ font-size:.82rem; color:#8a9299; margin-bottom:16px; }
.pd-apply-actions{ display:flex; flex-direction:column; }
.pd-apply-box-primary .pd-btn-apply{ background:var(--pd-red); }
.pd-apply-box-primary .pd-btn-apply:hover{ background:#c11c28; }
.pd-apply-box-primary .pd-btn-outline{ border-color:var(--pd-blue); color:var(--pd-blue); }
.pd-apply-box-primary .pd-btn-outline:hover{ background:#eef6fb; color:var(--pd-blue); }
.pd-apply-box-primary .pd-btn-outline-success{ border-color:var(--pd-blue); color:var(--pd-blue); }
.pd-apply-box-primary .pd-btn-outline-success:hover{ background:#eef6fb; color:var(--pd-blue); }
.pd-apply-box-primary .pd-apply-facts{ margin-top:16px; padding-top:16px; border-top:1px solid var(--pd-grey-line); margin-bottom:0; }

/* Light-blue variant for sidebar boxes that should stand out from the
   white cards around them (About the Employer, Share this Opportunity).
   No box-shadow here — the shadow used on white cards reads as an odd
   blue-tinted halo against this tinted background, so it's turned off. */
.pd-apply-box-lightblue1{   border:1px solid #d7e9f5; box-shadow:none; }
.pd-apply-box-lightblue{  background:#eef6fb; border:1px solid #d7e9f5; box-shadow:none; }

/* ---- Share this Opportunity ---- */
.pd-share-row{ display:flex; gap:10px; }
.pd-share-btn{
  width:42px; height:42px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.05rem; flex:0 0 42px; transition:opacity .15s;
}
.pd-share-btn:hover{ opacity:.85; color:#fff; }
.pd-share-fb{ background:#1877f2; }
.pd-share-li{ background:#0a66c2; }
.pd-share-wa{ background:#25d366; }

/* "For Queries" contact icons (email/phone) — same rounded, filled, white-icon
   treatment as the Share buttons above, instead of bare outline glyphs, so
   the two icon rows in the sidebar look visually consistent. */
.pd-contact-row{ display:flex; align-items:center; gap:10px; }
.pd-contact-icon{
  width:30px; height:30px; border-radius:8px; flex:0 0 30px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:.85rem;
}
.pd-contact-icon-email{ background:var(--pd-blue); }
.pd-contact-icon-phone{ background:#1a9a52; }

/* ---- Sidebar: Advertisement preview card ---- */
.pd-ad-preview{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:4px;
  background:var(--pd-grey-bg);
  border:1.5px dashed var(--pd-grey-line);
  border-radius:10px;
  padding:24px 14px;
  color:#8a9299;
  margin-bottom:12px;
}
.pd-ad-preview i{ font-size:1.6rem; color:#b6bcc0; margin-bottom:6px; }
.pd-ad-preview span{ font-size:.82rem; font-weight:700; color:#5a636a; }
.pd-ad-preview small{ font-size:.72rem; }
.pd-ad-preview.pd-ad-preview-image{ padding:8px; overflow:hidden; background:#fff; }
.pd-ad-preview.pd-ad-preview-image img{ width:100%; max-height:260px; object-fit:contain; display:block; }
.pd-ad-viewfull{ display:inline-block; font-size:.82rem; font-weight:700; color:var(--pd-blue); }
.pd-ad-viewfull:hover{ text-decoration:underline; color:var(--pd-blue); }

.pd-employer-mini{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.pd-employer-mini img{ width:44px; height:44px; border-radius:10px; object-fit:contain; border:1px solid var(--pd-grey-line); padding:4px; background:#fff; flex-shrink:0; transition:border-color .15s, box-shadow .15s; }
.pd-employer-mini strong{ font-size:.88rem; color:#222; transition:color .15s; }
/* Whole block (logo + name) is now a single link to the employer profile,
   not just the logo, so make that obvious with a hover state on both. */
.pd-employer-mini-link:hover img{ border-color:var(--pd-navy); box-shadow:0 0 0 2px rgba(0,0,0,.04); }
.pd-employer-mini-link:hover strong{ color:var(--pd-blue); }

/* ---- Similar opportunities heading (matches other detail card h5 headings) ---- */
.pd-subsection-heading{
  color:var(--pd-navy); font-weight:800; font-size:.88rem; text-transform:uppercase;
  letter-spacing:.03em; margin-bottom:16px; display:flex; align-items:center; gap:10px;
}
.pd-subsection-heading i{ color:var(--pd-blue); font-size:.95rem; }

/* NOTE: .col-lg-8/.col-lg-4 stack below the LG breakpoint (992px), so the
   sticky sidebar must be disabled at the same breakpoint — otherwise on
   tablet / small-laptop widths (768px–991px) the sidebar stays "stuck"
   while stacked full-width under the content and overlaps/covers it. */
@media (max-width:991px){
  .pd-sticky-sidebar{ position:static; }
}

/* ---------------- Responsive ---------------- */
@media (max-width:767px){
  .pd-hero .container, .pd-opp-banner .container{ padding-left:12px; padding-right:12px; }
  .pd-hero-title{ font-size:1.4rem; text-align:center; }
  .pd-carousel-nav{ justify-content:center; }
  .pd-feature-card{ flex-direction:column; }
  .pd-feature-card .pd-card-logo{ flex:0 0 90px; width:100%; height:90px; margin: 10px; }
  .pd-search-card{ padding:30px 16px 20px; }
  .pd-opp-card{ flex-direction:row; align-items:flex-start; }
  .pd-opp-card .pd-card-logo{ flex:0 0 96px; width:96px; height:96px; margin: 10px; }
  .pd-topbar-inner{ flex-wrap:wrap; justify-content:center; }
  .pd-footer-inner{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .pd-footer-inner .pd-follow{ justify-self:center; }
  .pd-detail-header-inner{ flex-direction:column; align-items:center; text-align:center; }
  .pd-detail-badges{ justify-content:center; }
  .pd-page-header h1{ font-size:1.25rem; }
  .pd-detail-title{ font-size:1.2rem; }
  .pd-detail-employer{ display:block; }
}