/* ==========================================================================
   Sankalp Pharma — Recruitment portal design system
   ========================================================================== */
:root{
   --rec-navy-1:#0a1f3a;
   --rec-navy-2:#122e50;
   --rec-navy-3:#1c4270;
   --rec-blue:#2f6fed;
   --rec-blue-light:#e8f0ff;
   --rec-ink:#1c2733;
   --rec-muted:#6b7688;
   --rec-bg:#f4f6f9;
   --rec-white:#ffffff;
   --rec-border:rgba(18,46,80,0.08);
   --rec-shadow-sm:0 8px 20px rgba(18,46,80,0.08);
   --rec-shadow-md:0 20px 45px rgba(18,46,80,0.12);
   --rec-shadow-lg:0 30px 70px rgba(18,46,80,0.18);
   --rec-radius:20px;
   --rec-ease:cubic-bezier(0.16,1,0.3,1);
}

.rec-page{ background:var(--rec-bg); }
.rec-page *{ box-sizing:border-box; }
.rec-container{ max-width:1280px; margin:0 auto; padding:0 24px; }

/* fontawesome.min.js replaces <i class="fas ..."> icons with inline <svg>
   at runtime, but the bundled fontawesome.min.css doesn't ship the
   .svg-inline--fa sizing rules those SVGs rely on — left unconstrained,
   a replaced icon can render at its raw intrinsic size and inflate any
   flex/grid row it sits in. Pin every FA-generated svg to a normal
   icon-font-like 1em box so it always behaves like the <i> it replaced. */
.rec-page svg[data-prefix],
.rec-page svg[data-icon]{
   width:1em;
   height:1em;
   max-width:1em;
   max-height:1em;
   overflow:visible;
   vertical-align:-0.125em;
}

/* ---------- Hero ---------- */
.rec-hero{
   position:relative;
   background:linear-gradient(135deg, var(--rec-navy-1) 0%, var(--rec-navy-2) 55%, var(--rec-navy-3) 100%);
   padding:90px 0 130px;
}
.rec-hero::before{
   content:"";
   position:absolute;
   inset:0;
   background:
      radial-gradient(600px 300px at 15% 10%, rgba(47,111,237,0.28), transparent 60%),
      radial-gradient(500px 260px at 90% 90%, rgba(143,180,255,0.18), transparent 60%);
   pointer-events:none;
}
/* the hero no longer isolates/clips (that trapped the location/department
   dropdown lists below it) — give the actual content its own stacking
   context instead so it still paints above the decorative gradient */
.rec-hero > .rec-container{
   position:relative;
   z-index:1;
}
.rec-hero-tag{
   display:inline-flex;
   align-items:center;
   gap:8px;
   color:#9fc0ff;
   font-size:13px;
   font-weight:700;
   letter-spacing:1.5px;
   text-transform:uppercase;
   margin-bottom:18px;
}
.rec-hero-tag::before{
   content:"";
   width:8px;height:8px;border-radius:50%;
   background:#9fc0ff;
}
.rec-hero h1{
   color:#fff;
   font-weight:800;
   font-size:clamp(32px, 4.4vw, 52px);
   line-height:1.15;
   max-width:820px;
   margin-bottom:16px;
   letter-spacing:-0.5px;
}
.rec-hero p{
   color:rgba(255,255,255,0.72);
   font-size:17px;
   max-width:620px;
   margin-bottom:40px;
}

.rec-search-panel{
   background:rgba(255,255,255,0.08);
   border:1px solid rgba(255,255,255,0.16);
   -webkit-backdrop-filter:blur(18px);
   backdrop-filter:blur(18px);
   border-radius:var(--rec-radius);
   padding:14px;
   display:flex;
   flex-wrap:wrap;
   gap:10px;
   box-shadow:var(--rec-shadow-lg);
}
.rec-search-field{
   flex:1 1 220px;
   min-width:0;
   position:relative;
   display:flex;
   align-items:center;
   background:#fff;
   border-radius:14px;
   padding:0 16px;
   height:56px;
   min-height:56px;
   max-height:56px;
   box-sizing:border-box;
}
.rec-search-field i,
.rec-search-field svg{
   color:var(--rec-blue);
   font-size:15px;
   width:15px;
   height:15px;
   max-width:15px;
   max-height:15px;
   margin-right:10px;
   flex:0 0 auto;
}
.rec-search-field input,
.rec-search-field select{
   border:0;
   outline:0;
   background:transparent;
   width:100%;
   height:100%;
   font-size:14.5px;
   color:var(--rec-ink);
   font-family:inherit;
}

/* main.js runs niceSelect() on every <select>, which hides the native
   element and inserts its own ".nice-select" widget — restyle it to
   blend into our field instead of drawing a second, redundant box */
.rec-search-field .nice-select{
   width:100%;
   height:100%;
   border:0;
   background:transparent;
   padding:0 20px 0 0;
   margin:0;
   line-height:54px;
   font-size:14.5px;
   font-family:inherit;
   color:var(--rec-ink);
   float:none;
}
.rec-search-field .nice-select:after{ right:2px; }
.rec-search-field .nice-select .list{
   width:100%;
   min-width:180px;
   z-index:50;
   max-height:260px;
   overflow-y:auto;
}
.rec-search-btn{
   flex:0 0 auto;
   height:56px;
   min-height:56px;
   max-height:56px;
   box-sizing:border-box;
   padding:0 32px;
   border:0;
   border-radius:14px;
   background:linear-gradient(135deg, var(--rec-blue) 0%, var(--rec-navy-3) 100%);
   color:#fff;
   font-weight:700;
   font-size:15px;
   display:inline-flex;
   align-items:center;
   gap:10px;
   cursor:pointer;
   transition:transform 0.3s var(--rec-ease), box-shadow 0.3s var(--rec-ease);
}
.rec-search-btn i,
.rec-search-btn svg{ width:15px; height:15px; max-width:15px; max-height:15px; flex:0 0 auto; }
.rec-search-btn:hover{
   transform:translateY(-2px);
   box-shadow:0 14px 30px rgba(47,111,237,0.4);
}
.rec-hero-stats{
   display:flex;
   flex-wrap:wrap;
   gap:34px;
   margin-top:36px;
}
.rec-hero-stats div{ color:#fff; }
.rec-hero-stats strong{ font-size:24px; font-weight:800; display:block; }
.rec-hero-stats span{ color:rgba(255,255,255,0.6); font-size:13px; }

/* ---------- Sidebar filter layout ---------- */
.rec-layout{
   display:grid;
   grid-template-columns:280px 1fr;
   gap:26px;
   align-items:start;
   margin-top:36px;
   position:relative;
   z-index:5;
   margin-bottom:60px;
}
@media (max-width:991px){
   .rec-layout{ grid-template-columns:1fr; margin-top:28px; }
}

.rec-filters-sidebar{
   background:var(--rec-white);
   border-radius:var(--rec-radius);
   box-shadow:var(--rec-shadow-md);
   border:1px solid var(--rec-border);
   padding:22px;
   position:sticky;
   top:20px;
}
.rec-sidebar-top{
   display:flex;
   align-items:center;
   justify-content:space-between;
   margin-bottom:6px;
}
.rec-sidebar-top h5{
   margin:0;
   font-size:16px;
   font-weight:800;
   color:var(--rec-navy-2);
   display:flex;
   align-items:center;
   gap:8px;
}
.rec-sidebar-top h5 i{ color:var(--rec-blue); }
.rec-clear-link{
   border:0;
   background:none;
   color:var(--rec-blue);
   font-size:12.5px;
   font-weight:700;
   cursor:pointer;
   padding:4px;
}
.rec-clear-link:hover{ text-decoration:underline; }
.rec-drawer-close-mobile{ display:none; }

.rec-filter-group{
   border-top:1px solid var(--rec-border);
   padding:14px 0;
}
.rec-filter-group summary{
   list-style:none;
   cursor:pointer;
   display:flex;
   align-items:center;
   justify-content:space-between;
   font-size:13.5px;
   font-weight:700;
   color:var(--rec-navy-2);
}
.rec-filter-group summary::-webkit-details-marker{ display:none; }
.rec-filter-group summary i{
   color:var(--rec-muted);
   font-size:11px;
   transition:transform 0.25s ease;
}
.rec-filter-group[open] summary i{ transform:rotate(180deg); }
.rec-filter-options{
   display:flex;
   flex-direction:column;
   gap:2px;
   margin-top:12px;
   max-height:220px;
   overflow-y:auto;
}
.rec-checkbox{
   display:flex;
   align-items:center;
   gap:10px;
   padding:6px 4px;
   font-size:13px;
   color:var(--rec-ink);
   cursor:pointer;
   border-radius:8px;
   transition:background 0.2s ease;
}
.rec-checkbox:hover{ background:#f4f6f9; }
.rec-checkbox input{
   width:16px;height:16px;
   accent-color:var(--rec-blue);
   cursor:pointer;
   flex:0 0 auto;
}
.rec-checkbox span{ flex:1 1 auto; min-width:0; overflow-wrap:break-word; }
.rec-checkbox em{
   font-style:normal;
   font-size:11.5px;
   color:var(--rec-muted);
   background:#f4f6f9;
   border-radius:20px;
   padding:2px 8px;
}
.rec-filter-group .rec-salary-range{
   display:flex;
   align-items:center;
   gap:8px;
   margin-top:10px;
}
.rec-filter-group .rec-salary-range input{
   width:100%;
   height:40px;
   border-radius:8px;
   border:1px solid var(--rec-border);
   background:#f8f9fb;
   padding:0 10px;
   font-size:13px;
   color:var(--rec-ink);
}
.rec-apply-filters-btn{
   width:100%;
   margin-top:16px;
   height:48px;
   border:0;
   border-radius:12px;
   background:linear-gradient(135deg, var(--rec-blue), var(--rec-navy-3));
   color:#fff;
   font-weight:700;
   font-size:14px;
   display:flex;
   align-items:center;
   justify-content:center;
   gap:8px;
   cursor:pointer;
   transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.rec-apply-filters-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(47,111,237,0.35); }

.rec-filter-drawer-toggle{
   display:none;
   height:44px;
   padding:0 18px;
   border-radius:10px;
   border:0;
   background:var(--rec-navy-2);
   color:#fff;
   font-weight:700;
   font-size:13.5px;
   align-items:center;
   gap:8px;
   cursor:pointer;
}
.rec-sort-select{
   height:44px;
   border-radius:10px;
   border:1px solid var(--rec-border);
   background:#f8f9fb;
   padding:0 14px;
   font-size:13.5px;
   color:var(--rec-ink);
   cursor:pointer;
}

/* mobile: sidebar becomes an off-canvas drawer */
.rec-drawer-overlay{
   position:fixed; inset:0;
   background:rgba(10,20,40,0.55);
   z-index:1000;
   opacity:0;
   pointer-events:none;
   transition:opacity 0.3s ease;
}
.rec-drawer-overlay.is-open{ opacity:1; pointer-events:auto; }

@media (max-width:991px){
   .rec-filter-drawer-toggle{ display:inline-flex; }
   .rec-filters-sidebar{
      position:fixed;
      top:0; right:0;
      height:100%;
      width:min(360px, 88vw);
      z-index:1001;
      border-radius:0;
      transform:translateX(100%);
      transition:transform 0.35s var(--rec-ease);
      overflow-y:auto;
      box-shadow:-20px 0 60px rgba(0,0,0,0.25);
   }
   .rec-filters-sidebar.is-open{ transform:translateX(0); }
   .rec-drawer-close-mobile{
      display:flex;
      align-items:center;
      justify-content:center;
      width:34px;height:34px;
      border-radius:50%;
      border:1px solid var(--rec-border);
      background:#f4f6f9;
      color:var(--rec-muted);
      cursor:pointer;
      position:absolute;
      top:18px; right:18px;
   }
   .rec-sidebar-top{ padding-right:40px; }
}

.rec-active-chips{
   display:flex;
   flex-wrap:wrap;
   gap:8px;
   margin-top:16px;
}
.rec-chip{
   display:inline-flex;
   align-items:center;
   gap:8px;
   background:var(--rec-blue-light);
   color:var(--rec-navy-2);
   border-radius:30px;
   padding:6px 12px 6px 14px;
   font-size:12.5px;
   font-weight:600;
}
.rec-chip button{
   border:0;
   background:rgba(18,46,80,0.12);
   color:var(--rec-navy-2);
   width:18px;height:18px;
   border-radius:50%;
   display:inline-flex;
   align-items:center;
   justify-content:center;
   cursor:pointer;
   font-size:10px;
   line-height:1;
}

/* ---------- Results header ---------- */
.rec-results-header{
   display:flex;
   flex-wrap:wrap;
   align-items:center;
   justify-content:space-between;
   gap:16px;
   margin-bottom:24px;
}
.rec-results-count{
   font-size:20px;
   font-weight:800;
   color:var(--rec-navy-2);
}
.rec-results-count span{ color:var(--rec-blue); }
.rec-view-toggle{
   display:inline-flex;
   background:#fff;
   border:1px solid var(--rec-border);
   border-radius:10px;
   overflow:hidden;
}
.rec-view-toggle button{
   border:0;
   background:transparent;
   width:42px;
   height:40px;
   display:inline-flex;
   align-items:center;
   justify-content:center;
   color:var(--rec-muted);
   cursor:pointer;
   transition:background 0.25s ease, color 0.25s ease;
}
.rec-view-toggle button.is-active{
   background:var(--rec-navy-2);
   color:#fff;
}

.rec-results-full{
   margin-top:36px;
   margin-bottom:60px;
}
@media (max-width:991px){
   .rec-results-full{ margin-top:28px; }
}

/* ---------- Job grid & cards ---------- */
.rec-job-grid{
   display:grid;
   grid-template-columns:repeat(3, 1fr);
   gap:24px;
}
.rec-job-grid.is-list{ grid-template-columns:1fr; }
@media (max-width:1199px){ .rec-job-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:767px){ .rec-job-grid{ grid-template-columns:1fr; } }

/* ---------- Simple job cards (present-vacancies.php grid) ---------- */
.rec-simple-grid{
   grid-template-columns:repeat(3, 1fr);
}
@media (max-width:1199px){ .rec-simple-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:640px){ .rec-simple-grid{ grid-template-columns:1fr; } }

.rec-simple-card{
   display:block;
   background:#fff;
   border-radius:16px;
   border:1px solid var(--rec-border);
   box-shadow:var(--rec-shadow-sm);
   padding:20px;
   text-decoration:none;
   transition:transform 0.3s var(--rec-ease), box-shadow 0.3s var(--rec-ease), border-color 0.3s var(--rec-ease);
}
.rec-simple-card:hover{
   transform:translateY(-5px);
   box-shadow:var(--rec-shadow-lg);
   border-color:rgba(47,111,237,0.25);
}
.rec-simple-top{
   display:flex;
   align-items:flex-start;
   gap:12px;
}
.rec-simple-logo{
   flex:0 0 auto;
   width:42px;
   height:42px;
   border-radius:12px;
   background:linear-gradient(135deg, var(--rec-navy-2), var(--rec-navy-3));
   color:#fff;
   display:flex;
   align-items:center;
   justify-content:center;
   font-size:16px;
}
.rec-simple-heading{
   flex:1 1 auto;
   min-width:0;
}
.rec-simple-heading h4{
   margin:0;
   font-size:14.5px;
   font-weight:800;
   color:var(--rec-navy-2);
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}
.rec-simple-heading span{
   font-size:12.5px;
   color:var(--rec-muted);
}
.rec-simple-badge{
   flex:0 0 auto;
   background:var(--rec-blue-light);
   color:var(--rec-navy-2);
   font-size:11px;
   font-weight:700;
   padding:5px 10px;
   border-radius:20px;
   white-space:nowrap;
}
.rec-simple-divider{
   height:1px;
   background:var(--rec-border);
   margin:16px 0;
}
.rec-simple-title{
   font-size:15.5px;
   font-weight:700;
   color:var(--rec-ink);
   line-height:1.4;
}
.rec-simple-salary{
   margin-top:8px;
   font-size:14px;
   font-weight:700;
   color:var(--rec-blue);
}

.rec-job-card{
   background:#fff;
   border-radius:var(--rec-radius);
   border:1px solid var(--rec-border);
   box-shadow:var(--rec-shadow-sm);
   padding:24px;
   position:relative;
   display:flex;
   flex-direction:column;
   transition:transform 0.4s var(--rec-ease), box-shadow 0.4s var(--rec-ease), border-color 0.4s var(--rec-ease);
}
.rec-job-card:hover{
   transform:translateY(-7px);
   box-shadow:var(--rec-shadow-lg);
   border-color:rgba(47,111,237,0.25);
}
.rec-job-grid.is-list .rec-job-card{
   flex-direction:row;
   align-items:center;
   gap:24px;
}
.rec-job-grid.is-list .rec-job-card .rec-card-top{ flex:0 0 auto; }
.rec-job-grid.is-list .rec-job-card .rec-card-body{ flex:1 1 auto; }
.rec-job-grid.is-list .rec-job-card .rec-card-meta{ grid-template-columns:repeat(4,1fr); }
.rec-job-grid.is-list .rec-job-card .rec-card-footer{ flex:0 0 220px; flex-direction:column; align-items:stretch; }

.rec-card-top{
   display:flex;
   align-items:flex-start;
   justify-content:space-between;
   margin-bottom:16px;
}
.rec-card-logo{
   width:52px;height:52px;
   border-radius:14px;
   background:linear-gradient(135deg, var(--rec-navy-2), var(--rec-navy-3));
   color:#fff;
   display:flex;
   align-items:center;
   justify-content:center;
   font-size:20px;
   flex:0 0 auto;
}
.rec-save-btn{
   width:38px;height:38px;
   border-radius:50%;
   border:1px solid var(--rec-border);
   background:#fff;
   color:var(--rec-muted);
   display:flex;
   align-items:center;
   justify-content:center;
   cursor:pointer;
   transition:color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
   flex:0 0 auto;
}
.rec-save-btn:hover{ transform:scale(1.08); }
.rec-save-btn.is-saved{ color:#e0434b; border-color:#f3c2c5; background:#fff5f5; }

.rec-card-company{
   font-size:12.5px;
   color:var(--rec-muted);
   font-weight:600;
   display:flex;
   align-items:center;
   gap:6px;
   margin-bottom:6px;
}
.rec-card-title{
   font-size:18px;
   font-weight:800;
   color:var(--rec-navy-2);
   line-height:1.35;
   margin-bottom:14px;
}
.rec-card-meta{
   display:grid;
   grid-template-columns:1fr 1fr;
   gap:10px 14px;
   margin-bottom:16px;
}
.rec-card-meta div{
   display:flex;
   align-items:center;
   gap:8px;
   font-size:12.5px;
   color:var(--rec-ink);
   min-width:0;
   overflow-wrap:anywhere;
}
.rec-card-meta i{
   color:var(--rec-blue);
   width:14px;
   text-align:center;
   font-size:12px;
}
.rec-card-badges{
   display:flex;
   flex-wrap:wrap;
   gap:6px;
   margin-bottom:18px;
}
.rec-badge{
   display:inline-flex;
   align-items:center;
   gap:5px;
   font-size:10.5px;
   font-weight:700;
   letter-spacing:0.4px;
   text-transform:uppercase;
   padding:5px 10px;
   border-radius:30px;
}
.rec-badge-type{ background:var(--rec-blue-light); color:var(--rec-navy-2); }
.rec-badge-fresher{ background:#e9f9ee; color:#1e8a4c; }
.rec-badge-experienced{ background:#f3eefc; color:#6a3fc0; }
.rec-badge-new{ background:#fff4e0; color:#b3720a; }
.rec-badge-urgent{ background:#fdeaea; color:#c0392b; }

.rec-card-footer{
   margin-top:auto;
   display:flex;
   flex-wrap:wrap;
   align-items:center;
   justify-content:space-between;
   gap:12px;
   padding-top:16px;
   border-top:1px solid var(--rec-border);
}
.rec-card-posted{
   font-size:11.5px;
   color:var(--rec-muted);
   min-width:0;
   flex:1 1 auto;
}
.rec-card-cta{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   gap:8px;
   background:var(--rec-navy-2);
   color:#fff;
   border:0;
   border-radius:10px;
   padding:10px 18px;
   font-size:13px;
   font-weight:700;
   text-decoration:none;
   white-space:nowrap;
   flex:0 0 auto;
   transition:background 0.25s ease, transform 0.25s ease;
}
@media (max-width:400px){
   .rec-card-footer{ flex-direction:column; align-items:stretch; }
   .rec-card-cta{ width:100%; }
}
.rec-card-cta:hover{
   background:var(--rec-blue);
   color:#fff;
   transform:translateX(2px);
}

/* ---------- Skeletons ---------- */
.rec-skeleton{
   background:#fff;
   border-radius:var(--rec-radius);
   border:1px solid var(--rec-border);
   padding:24px;
   overflow:hidden;
}
.rec-skeleton-line{
   height:12px;
   border-radius:6px;
   background:linear-gradient(90deg, #eef1f5 25%, #f7f8fa 37%, #eef1f5 63%);
   background-size:400% 100%;
   animation:rec-shimmer 1.4s ease infinite;
   margin-bottom:12px;
}
@keyframes rec-shimmer{
   0%{ background-position:100% 50%; }
   100%{ background-position:0 50%; }
}

/* ---------- Empty state ---------- */
.rec-empty{
   text-align:center;
   padding:80px 20px;
   background:#fff;
   border-radius:var(--rec-radius);
   border:1px dashed var(--rec-border);
}
.rec-empty i{
   font-size:40px;
   color:var(--rec-blue);
   margin-bottom:18px;
}
.rec-empty h3{ color:var(--rec-navy-2); font-weight:800; margin-bottom:8px; }
.rec-empty p{ color:var(--rec-muted); margin-bottom:22px; }

/* ---------- Pagination ---------- */
.rec-pagination-wrap{
   display:flex;
   flex-wrap:wrap;
   align-items:center;
   justify-content:space-between;
   gap:16px;
   margin-top:40px;
}
.rec-pagination{
   display:flex;
   align-items:center;
   gap:8px;
}
.rec-pagination button{
   min-width:38px;
   height:38px;
   padding:0 8px;
   border-radius:9px;
   border:1px solid var(--rec-border);
   background:#fff;
   color:var(--rec-ink);
   font-size:13.5px;
   font-weight:600;
   cursor:pointer;
   transition:background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.rec-pagination button:hover:not(:disabled){ border-color:var(--rec-blue); color:var(--rec-blue); }
.rec-pagination button.is-active{ background:var(--rec-navy-2); border-color:var(--rec-navy-2); color:#fff; }
.rec-pagination button:disabled{ opacity:0.4; cursor:default; }
.rec-showing-text{ font-size:13px; color:var(--rec-muted); }

@media (max-width:575px){
   .rec-container{ padding:0 16px; }
   .rec-hero{ padding:70px 0 100px; }
   .rec-search-panel{ flex-direction:column; }
   .rec-search-btn{ width:100%; justify-content:center; }
   .rec-job-grid.is-list .rec-job-card{ flex-direction:column; align-items:stretch; }
   .rec-job-grid.is-list .rec-job-card .rec-card-footer{ flex-direction:row; }

   .rec-hero-stats{ flex-wrap:nowrap; gap:10px; justify-content:space-between; }
   .rec-hero-stats div{ flex:1 1 0; min-width:0; }
   .rec-hero-stats strong{ font-size:18px; }
   .rec-hero-stats span{ font-size:11px; white-space:nowrap; }

   .rec-simple-grid{ gap:16px; }
   .rec-simple-card{ padding:16px; }
   .rec-simple-top{ gap:10px; }
   .rec-simple-logo{ width:38px; height:38px; font-size:15px; }
   .rec-simple-badge{ font-size:10.5px; padding:4px 9px; }
}

@media (max-width:480px){
   .rec-job-card{ padding:18px; }
   .rec-card-meta{ grid-template-columns:1fr; gap:8px; }
   .rec-card-title{ font-size:16.5px; }
   .rec-card-logo{ width:44px; height:44px; font-size:17px; }
   .rec-save-btn{ width:34px; height:34px; }
}

@media (max-width:767px){
   /* grid/list makes no visual difference once cards are already
      forced to a single column, so hide the toggle on mobile */
   .rec-view-toggle{ display:none; }
}

/* ---------- Job details page ---------- */
.rec-breadcrumb{
   font-size:13px;
   color:var(--rec-muted);
   margin-bottom:20px;
}
.rec-breadcrumb a{ color:var(--rec-navy-2); font-weight:600; text-decoration:none; }
.rec-breadcrumb i{ font-size:9px; margin:0 8px; }

/* ---------- Greeting note banner ---------- */
.rec-greeting-banner{
   display:flex;
   align-items:flex-start;
   gap:12px;
   background:var(--rec-blue-light);
   color:var(--rec-navy-2);
   border-radius:14px;
   padding:16px 18px;
   font-size:13.5px;
   font-weight:600;
   line-height:1.6;
   margin-bottom:20px;
}
.rec-greeting-banner i{ color:var(--rec-blue); font-size:16px; margin-top:2px; }
.rec-greeting-banner-sm{
   margin-bottom:0;
   background:#fff4e0;
   color:#8a5a09;
   font-size:12.5px;
   padding:12px 14px;
}
.rec-greeting-banner-sm i{ color:#b3720a; }

.rec-detail-header{
   background:linear-gradient(135deg, var(--rec-navy-1), var(--rec-navy-2) 60%, var(--rec-navy-3));
   border-radius:var(--rec-radius);
   padding:40px;
   color:#fff;
   display:flex;
   flex-wrap:wrap;
   gap:24px;
   justify-content:space-between;
   align-items:center;
   margin-bottom:30px;
}
.rec-detail-header-left{ display:flex; gap:20px; align-items:center; }
.rec-detail-logo{
   width:70px;height:70px;
   border-radius:18px;
   background:rgba(255,255,255,0.1);
   border:1px solid rgba(255,255,255,0.2);
   display:flex;align-items:center;justify-content:center;
   font-size:28px;
   flex:0 0 auto;
}
.rec-detail-header h1{
   font-size:clamp(22px,3vw,30px);
   font-weight:800;
   margin-bottom:8px;
   color:#fff;
}
.rec-detail-header .rec-card-company{ color:rgba(255,255,255,0.75); }
.rec-detail-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.rec-icon-btn{
   width:44px;height:44px;
   border-radius:50%;
   border:1px solid rgba(255,255,255,0.25);
   background:rgba(255,255,255,0.08);
   color:#fff;
   display:flex;align-items:center;justify-content:center;
   cursor:pointer;
   transition:background 0.25s ease, transform 0.2s ease;
}
.rec-icon-btn:hover{ background:rgba(255,255,255,0.2); transform:translateY(-2px); }
.rec-icon-btn.is-saved{ background:#e0434b; border-color:#e0434b; }

.rec-detail-layout{
   display:grid;
   grid-template-columns:2fr 1fr;
   gap:30px;
   align-items:start;
}
@media (max-width:991px){ .rec-detail-layout{ grid-template-columns:1fr; } }

.rec-detail-card{
   background:#fff;
   border-radius:var(--rec-radius);
   border:1px solid var(--rec-border);
   box-shadow:var(--rec-shadow-sm);
   padding:30px;
   margin-bottom:24px;
}
.rec-detail-card h3{
   color:var(--rec-navy-2);
   font-weight:800;
   font-size:19px;
   margin-bottom:16px;
   display:flex;
   align-items:center;
   gap:10px;
}
.rec-detail-card h3 i{ color:var(--rec-blue); }
.rec-detail-card p{ color:var(--rec-ink); line-height:1.75; }

.rec-overview-grid{
   display:grid;
   grid-template-columns:repeat(4, 1fr);
   gap:18px;
}
@media (max-width:767px){ .rec-overview-grid{ grid-template-columns:repeat(2,1fr); } }
.rec-overview-item{
   background:#f8f9fb;
   border-radius:14px;
   padding:16px;
}
.rec-overview-item i{ color:var(--rec-blue); margin-bottom:8px; display:block; font-size:16px; }
.rec-overview-item .label{ font-size:11px; text-transform:uppercase; letter-spacing:0.4px; color:var(--rec-muted); font-weight:700; }
.rec-overview-item .value{ font-size:14.5px; font-weight:700; color:var(--rec-navy-2); margin-top:2px; }

@media (max-width:480px){
   .rec-overview-grid{ grid-template-columns:1fr; gap:10px; }
   .rec-overview-item{ display:flex; align-items:center; gap:12px; padding:12px 14px; }
   .rec-overview-item i{ margin-bottom:0; font-size:15px; }
   .rec-overview-item .label{ font-size:10.5px; }
   .rec-overview-item .value{ margin-top:1px; }
}

.rec-responsibilities{ list-style:none; padding:0; margin:0; }
.rec-responsibilities li{
   display:flex;
   gap:12px;
   padding:10px 0;
   border-bottom:1px solid var(--rec-border);
   color:var(--rec-ink);
   line-height:1.6;
}
.rec-responsibilities li:last-child{ border-bottom:0; }
.rec-responsibilities li i{ color:#1e8a4c; margin-top:4px; }

.rec-skill-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.rec-skill-chip{
   background:var(--rec-blue-light);
   color:var(--rec-navy-2);
   font-size:12.5px;
   font-weight:600;
   padding:8px 14px;
   border-radius:30px;
}

.rec-sidebar-card{
   background:#fff;
   border-radius:var(--rec-radius);
   border:1px solid var(--rec-border);
   box-shadow:var(--rec-shadow-sm);
   padding:26px;
   margin-bottom:24px;
   position:sticky;
   top:20px;
}
.rec-apply-btn{
   width:100%;
   border:0;
   border-radius:12px;
   padding:15px;
   font-weight:700;
   font-size:15px;
   color:#fff;
   background:linear-gradient(135deg, var(--rec-blue), var(--rec-navy-3));
   cursor:pointer;
   margin-bottom:12px;
   transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.rec-apply-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(47,111,237,0.35); }
.rec-whatsapp-btn{
   width:100%;
   display:flex;
   align-items:center;
   justify-content:center;
   gap:10px;
   border:1.5px solid #25d366;
   color:#1e9e52;
   background:#f2fdf6;
   border-radius:12px;
   padding:13px;
   font-weight:700;
   font-size:14.5px;
   text-decoration:none;
   margin-bottom:20px;
   transition:background 0.25s ease;
}
.rec-whatsapp-btn:hover{ background:#e3f9ea; color:#1e9e52; }
.rec-sidebar-divider{ height:1px; background:var(--rec-border); margin:20px 0; }
.rec-sidebar-meta{ display:flex; flex-direction:column; gap:14px; }
.rec-sidebar-meta div{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--rec-ink); }
.rec-sidebar-meta i{ color:var(--rec-blue); width:16px; }
.rec-sidebar-actions{ display:flex; gap:10px; margin-top:20px; }
.rec-sidebar-actions button{
   flex:1;
   height:44px;
   border-radius:10px;
   border:1px solid var(--rec-border);
   background:#fff;
   color:var(--rec-navy-2);
   font-weight:700;
   font-size:13px;
   display:flex;
   align-items:center;
   justify-content:center;
   gap:8px;
   cursor:pointer;
   transition:border-color 0.25s ease, color 0.25s ease;
}
.rec-sidebar-actions button.is-saved{ border-color:#e0434b; color:#e0434b; }
.rec-sidebar-actions button:hover{ border-color:var(--rec-blue); color:var(--rec-blue); }

/* ---------- Apply modal ---------- */
.rec-modal-overlay{
   position:fixed; inset:0;
   background:rgba(10,20,40,0.6);
   z-index:1100;
   display:flex;
   align-items:center;
   justify-content:center;
   padding:20px;
   opacity:0;
   pointer-events:none;
   transition:opacity 0.3s ease;
}
.rec-modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.rec-modal{
   background:#fff;
   border-radius:22px;
   width:100%;
   max-width:560px;
   max-height:90vh;
   overflow-y:auto;
   padding:34px;
   transform:translateY(20px) scale(0.98);
   transition:transform 0.3s var(--rec-ease);
}
.rec-modal-overlay.is-open .rec-modal{ transform:translateY(0) scale(1); }
.rec-modal-header{
   display:flex;
   justify-content:space-between;
   align-items:flex-start;
   margin-bottom:22px;
}
.rec-modal-header h3{ color:var(--rec-navy-2); font-weight:800; margin-bottom:4px; }
.rec-modal-header p{ color:var(--rec-muted); font-size:13.5px; }
.rec-modal-close{
   border:0; background:#f4f6f9; width:34px;height:34px; border-radius:50%;
   color:var(--rec-muted); cursor:pointer;
}
.rec-form-group{ margin-bottom:16px; }
.rec-form-group label{ display:block; font-size:13px; font-weight:700; color:var(--rec-navy-2); margin-bottom:7px; }
.rec-form-group input,
.rec-form-group textarea{
   width:100%;
   border:1px solid var(--rec-border);
   background:#f8f9fb;
   border-radius:10px;
   padding:12px 14px;
   font-size:14px;
   color:var(--rec-ink);
   font-family:inherit;
}
.rec-form-group input:focus,
.rec-form-group textarea:focus{ outline:0; border-color:var(--rec-blue); background:#fff; }
.rec-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:480px){ .rec-form-row{ grid-template-columns:1fr; } }
.rec-file-drop{
   border:1.5px dashed var(--rec-border);
   border-radius:12px;
   padding:18px;
   text-align:center;
   color:var(--rec-muted);
   font-size:13px;
   cursor:pointer;
   transition:border-color 0.25s ease;
}
.rec-file-drop.has-file{ border-color:var(--rec-blue); color:var(--rec-navy-2); font-weight:600; }
.rec-file-drop i{ display:block; font-size:20px; margin-bottom:6px; color:var(--rec-blue); }
.rec-modal-submit{
   width:100%;
   border:0;
   border-radius:12px;
   padding:15px;
   font-weight:700;
   font-size:15px;
   color:#fff;
   background:linear-gradient(135deg, var(--rec-blue), var(--rec-navy-3));
   cursor:pointer;
   margin-top:6px;
}
.rec-modal-submit[disabled]{ opacity:0.6; cursor:default; }
.rec-form-status{
   margin-top:14px;
   font-size:13.5px;
   border-radius:10px;
   padding:12px 14px;
   display:none;
}
.rec-form-status.is-success{ display:block; background:#e9f9ee; color:#1e8a4c; }
.rec-form-status.is-error{ display:block; background:#fdeaea; color:#c0392b; }

/* ---------- Related jobs ---------- */
.rec-related-title{
   font-size:22px;
   font-weight:800;
   color:var(--rec-navy-2);
   margin-bottom:22px;
}

/* ---------- Section utilities ---------- */
.rec-section{ padding:60px 0; }
.rec-fade-up{
   opacity:0;
   transform:translateY(20px);
   transition:opacity 0.6s var(--rec-ease), transform 0.6s var(--rec-ease);
}
.rec-fade-up.in-view{ opacity:1; transform:translateY(0); }