/* ============================================
   V2 REVAMP - Design System Overrides
   Matches HireMaster v2 Prototype Design
   ============================================ */

/* ============================================
   DESIGN TOKENS (CSS Custom Properties)
   Brand colors excluded - they come from PHP
   ============================================ */
:root {
  /* Background Colors */
  --revamp-bg-primary: #f8f9fa;
  --revamp-bg-secondary: #ffffff;
  --revamp-bg-tertiary: #f1f3f5;
  --revamp-bg-chat: #f8f9fb;

  /* Text Colors */
  --revamp-text-primary: #111827;
  --revamp-text-secondary: #4b5563;
  --revamp-text-tertiary: #9ca3af;

  /* Border Colors */
  --revamp-border-light: #e5e7eb;
  --revamp-border-medium: #d1d5db;

  /* Shadows */
  --revamp-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --revamp-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --revamp-shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --revamp-shadow-xl: 0 20px 60px rgba(0,0,0,0.15);

  /* Border Radii */
  --revamp-radius-sm: 8px;
  --revamp-radius-md: 12px;
  --revamp-radius-lg: 16px;
  --revamp-radius-full: 9999px;

  /* Typography */
  --revamp-font-heading: 'Plus Jakarta Sans', 'Satoshi-Bold', sans-serif;
  --revamp-font-body: 'Inter', 'Satoshi-Regular', sans-serif;

  /* Layout */
  --revamp-nav-height: 60px;
}


/* ============================================
   RESET & BASE OVERRIDES
   ============================================ */
body {
  font-family: var(--revamp-font-body) !important;
  background: var(--revamp-bg-primary) !important;
  color: var(--revamp-text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--revamp-font-heading) !important;
}


/* ============================================
   CAREERWEB - NAVIGATION BAR
   ============================================ */
#topMainNavbar {
  padding: 0 !important;
  z-index: 10000;
  border-bottom: 1px solid var(--revamp-border-light);
  background: var(--revamp-bg-secondary);
  height: var(--revamp-nav-height);
  display: flex;
  align-items: center;
  padding: 0 20px !important;
}

.navbar-content {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  background: transparent !important;
  gap: 12px;
  flex-wrap: nowrap !important;
}

.navbar-brand {
  padding: 0 !important;
  width: auto !important;
  flex-shrink: 0;
}

.navbarLogo {
  max-height: 36px !important;
  height: 36px !important;
  width: auto !important;
  object-fit: contain;
  margin: 0 !important;
}

/* Nav actions (filters button) */
.cw-nav-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Search bar - pill style */
.navbar-search {
  flex: 1 !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  justify-content: center !important;
}

.search-container {
  width: 100% !important;
  border-radius: var(--revamp-radius-full) !important;
  border: 1px solid var(--revamp-border-light) !important;
  background: var(--revamp-bg-tertiary) !important;
  box-shadow: none !important;
  padding: 0 16px 0 14px !important;
  height: 38px;
  transition: all 0.2s;
}

.search-container:focus-within {
  border-color: var(--revamp-border-medium) !important;
  background: var(--revamp-bg-secondary) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05) !important;
}

.search-container .icon {
  color: var(--revamp-text-tertiary) !important;
  font-size: 13px;
}

.search-container input.form-control,
.search-container input[type="search"],
#jobTitleDesktopInput,
.dfaic input.form-control {
  font-family: var(--revamp-font-body) !important;
  border: 0 none !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--revamp-text-primary) !important;
  padding: 0 8px !important;
  height: 36px !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
}

.search-container input.form-control:focus,
#jobTitleDesktopInput:focus {
  border: 0 none !important;
  box-shadow: none !important;
  outline: none !important;
}

.search-container input.form-control::placeholder,
#jobTitleDesktopInput::placeholder {
  color: var(--revamp-text-tertiary);
}

/* Filter icon in search bar — sits at right edge of pill */
#openFiltersModal {
  color: var(--revamp-text-tertiary);
  opacity: 0.7;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  padding: 4px 2px !important;
}

#openFiltersModal:hover {
  opacity: 1;
  color: var(--revamp-text-primary);
}

/* Ensure the search container displays as a proper pill row */
.search-container.dfaic {
  display: flex !important;
  align-items: center !important;
  overflow: hidden;
}

/* Navbar menu / careers pages dropdown */
.navbar-menu {
  width: auto !important;
  padding: 0 !important;
}

.navbar-menu .dropdown > div,
.ms-auto .dropdown > div {
  padding: 7px 14px;
  border-radius: var(--revamp-radius-sm);
  border: 1px solid var(--revamp-border-light);
  transition: background 0.15s;
}

.navbar-menu .dropdown > div:hover,
.ms-auto .dropdown > div:hover {
  background: var(--revamp-bg-tertiary);
}


/* ============================================
   CAREERWEB - THREE-PANE LAYOUT
   Uses CSS Grid with auto columns for dynamic visibility.
   Center pane starts as d-none, so we handle that gracefully.
   ============================================ */
#careerwebContainer {
  display: grid !important;
  grid-template-columns: 310px 1fr 350px !important;
  height: calc(100vh - var(--revamp-nav-height)) !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
  margin: 0 !important;
  gap: 0;
}

/* Details container visibility — Bootstrap d-none d-md-block controls visibility.
   On desktop (≥768px), d-md-block overrides d-none. We must NOT override that.
   When the details pane IS visible (d-md-block), ensure it shows as block in the grid. */
@media (min-width: 768px) {
  #details-container.d-md-block {
    display: block !important;
  }
}

/* When details has content loaded, ensure it shows */
#desktopJobDetailsContainer.d-md-block {
  display: block !important;
}

/* Override Bootstrap column widths for all children */
#careerwebContainer > #jobOuterContainer,
#careerwebContainer > #details-container,
#careerwebContainer > #chat-container {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
}

/* Also override inline padding from Bootstrap row */
#careerwebContainer.row {
  --bs-gutter-x: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Override the .flex.col-md-12 parent wrapper */
.full-viewport {
  margin-top: 0 !important;
  padding: 0 !important;
}

#desktopJobsOuterContainer {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  padding: 0 !important;
}

/* Left Pane - Job List */
#jobOuterContainer {
  background: var(--revamp-bg-secondary);
  border-right: 1px solid var(--revamp-border-light) !important;
  overflow-y: auto;
  overflow-x: hidden;
  /* Ensure scrollbar is within the pane */
  scrollbar-gutter: stable;
}

/* Right pane - Chat */
#chat-container {
  border-left: 1px solid var(--revamp-border-light) !important;
}

/* Location / Results Header */
.user-location-container {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--revamp-border-light) !important;
  position: sticky;
  top: 0;
  background: var(--revamp-bg-secondary);
  z-index: 10;
}

.job-result-text {
  font-family: var(--revamp-font-heading) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--revamp-text-tertiary) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

/* Override Bootstrap col-sm-5 on job-result-text */
.job-result-text.col-sm-5 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

.location-edit-row {
  gap: 5px !important;
  margin: 2px 0 0 0 !important;
}

.user-location-text {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--revamp-text-primary) !important;
}

/* Override Bootstrap col-sm-7 width */
.user-location-wrapper.col-sm-7 {
  width: auto !important;
  max-width: none !important;
  flex: 1 !important;
}

.location-icon {
  font-size: 14px;
}

.user-location-placeholder {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--revamp-text-tertiary) !important;
}


/* ============================================
   CAREERWEB - JOB CARDS
   Inline styles on cards use background-color and border —
   we MUST use !important on background-color to override.
   ============================================ */
#jobContainer .card-container,
.card-container[id^="jobCard_"] {
  padding: 14px 16px !important;
  border: none !important;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  border-image: none !important;
  border-bottom: 1px solid var(--revamp-border-light) !important;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
  position: relative;
  background-color: var(--revamp-bg-secondary) !important;
  background: var(--revamp-bg-secondary) !important;
}

/* Also override the pb-3 md:pb-0 padding from the container class */
#jobContainer .card-container.pb-3 {
  padding-bottom: 14px !important;
}

/* Left accent border for all cards */
#jobContainer .card-container::before,
.card-container[id^="jobCard_"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  border-radius: 0 3px 3px 0;
  transition: background 0.12s;
  z-index: 2;
}

/* Hover state */
#jobContainer .card-container:hover {
  background-color: var(--revamp-bg-tertiary) !important;
}

/* Active / selected card — toggled via JS class .cw-card-active */
#jobContainer .card-container.cw-card-active {
  background-color: var(--revamp-bg-tertiary) !important;
}

#jobContainer .card-container.cw-card-active::before {
  background: var(--brand-color, #da2528) !important;
}

/* Legacy: if JS still uses inline bg (first load), handle it */
#jobContainer .card-container[style*="background-color: rgb(242"] {
  background-color: var(--revamp-bg-tertiary) !important;
}

#jobContainer .card-container[style*="background-color: rgb(242"]::before {
  background: var(--brand-color, #da2528) !important;
}

/* Card body — override Bootstrap/Tailwind pl-2/pl-3/pt-2 */
#jobContainer .card-body,
.card-container .card-body,
.card-container .card-body.pl-2,
.card-container .card-body.pt-2 {
  padding: 0 !important;
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

/* Ensure Tailwind padding classes don't override */
.card-container .pl-2,
.card-container .pl-3 {
  padding-left: 0 !important;
}

.card-container .pt-2 {
  padding-top: 0 !important;
}

.card-container .pb-3 {
  padding-bottom: 0 !important;
}

/* Job Card Logo */
.job-card-logo-container,
.job-card-logo-container.w-5\/6 {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  border-radius: var(--revamp-radius-sm) !important;
  overflow: hidden !important;
  border: 1px solid var(--revamp-border-light) !important;
  background: #fff;
  flex-shrink: 0 !important;
  margin-right: 10px;
  padding: 0 !important;
}

.job-card-logo-container img,
.job-card-logo-container.w-5\/6 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 2px;
  border: none !important;
}

/* Job Card Title */
.card-title {
  font-family: var(--revamp-font-heading) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--revamp-text-primary) !important;
  margin-bottom: 2px !important;
}

/* Location text in card — uses inline color from PHP */
.card-container .fw-bold[style*="font-size:0.8em"] {
  font-family: var(--revamp-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 1px !important;
}

/* Tighten the space between d-flex (title row) and description */
.card-container .d-flex + .row.mb-2 {
  margin-bottom: 0 !important;
}

/* Space between description and tags */
.card-container .d-flex:last-child {
  margin-top: 10px !important;
  padding-top: 0;
}

/* Remove Bootstrap .row negative margins inside cards */
.card-container .row.mb-2 {
  margin-left: 0 !important;
  margin-right: 0 !important;
  --bs-gutter-x: 0 !important;
}

/* Job description summary */
.card-text,
p.card-text {
  font-family: var(--revamp-font-body) !important;
  font-size: 13px !important;
  color: var(--revamp-text-secondary) !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  margin-top: 6px !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
}

/* Job info tags - pill style */
.job-info-tag {
  font-family: var(--revamp-font-body) !important;
  padding: 4px 10px !important;
  border-radius: var(--revamp-radius-full) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  background: var(--revamp-bg-tertiary) !important;
  color: var(--revamp-text-secondary) !important;
  border: 1px solid var(--revamp-border-light) !important;
  margin: 0 6px 0 0 !important;
  line-height: 1.4;
}

/* Pay tag accent — last tag gets bolder */
.job-info-tag:last-child {
  font-weight: 600 !important;
  color: var(--revamp-text-primary) !important;
}

/* Location placeholder text */
.user-location-placeholder {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--revamp-text-tertiary) !important;
}

/* Hidden links inside card containers */
.card-container > a[style*="display:none"] {
  display: none !important;
}


/* ============================================
   CAREERWEB - CENTER PANE (Job Details)
   ============================================ */
#details-container {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: var(--revamp-bg-primary) !important;
  border-right: none !important;
}

#desktopJobDetailsContainer {
  overflow-y: auto !important;
}

/* ============================================
   CENTER PANE — AJAX-loaded job detail content

   Structure (from job-application-view.php):
   <div class="content container" style="max-width:600px; ...">  ← OUTER
     <div class="content container" style="position:static;">    ← HERO WRAPPER
       <div> <img class="w-100"> </div>                          ← BANNER
       <img id="companyLogoMobile" class="w-25" absolute>        ← LOGO
       <div class="w-100 mt-2">                                  ← TITLE AREA
         <div class="d-flex" style="margin-left:25%;">
           <div class="job-title-container">
     </div>
     <div>
       <div class="enclosed-small">
         <div class="mt-3">
           <div class="card p-3 flex col-12">                    ← FORM CARD
             <div id="form-details-area">
               #jobSummary, .apply-button-container, #job-form-container
   ============================================ */

/* OUTER CONTAINER — remove the 600px cap, let it fill the pane */
#desktopJobDetailsContainer .content.container {
  max-width: 100% !important;
  padding: 0 !important;
  position: relative !important;
  overflow: visible !important;
}

/* HERO WRAPPER — relative for logo positioning */
#desktopJobDetailsContainer .content.container > .content.container {
  position: relative !important;
  padding: 0 !important;
  max-width: 100% !important;
}

/* BANNER — crop to 200px with gradient overlay */
#desktopJobDetailsContainer .content.container > .content.container > div:first-child {
  position: relative;
  height: 200px;
  overflow: hidden;
}

#desktopJobDetailsContainer .content.container > .content.container > div:first-child::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 60%);
  pointer-events: none;
  z-index: 1;
}

#desktopJobDetailsContainer .content.container img.w-100,
#desktopJobDetailsContainer .content.container > .content.container > div:first-child > img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block;
}

/* COMPANY LOGO — inside .cw-hero-logo-wrap (60x60 absolute positioned box).
   The img must stay static inside its wrapper and fill it with contain. */
#desktopJobDetailsContainer #companyLogoMobile,
.cw-hero-logo-wrap > #companyLogoMobile,
.cw-hero-logo-wrap > .cw-hero-logo-img {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  width: 50px !important;
  height: 50px !important;
  max-width: 50px !important;
  max-height: 50px !important;
  object-fit: contain !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  aspect-ratio: 1/1 !important;
  display: block !important;
}

/* TITLE AREA — beside the logo */
#desktopJobDetailsContainer .w-100.mt-2 {
  padding: 8px 20px 0 20px !important;
  margin-top: 0 !important;
}

#desktopJobDetailsContainer .w-100.mt-2 > .d-flex {
  margin-left: 68px !important;
  padding: 0 !important;
}

#desktopJobDetailsContainer .job-title-container {
  margin: 0 !important;
  padding: 0 !important;
}

#desktopJobDetailsContainer .job-title,
#desktopJobDetailsContainer .job-title.text.h4 {
  font-family: var(--revamp-font-heading) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: var(--revamp-text-primary) !important;
  margin-bottom: 2px !important;
  margin-top: 0 !important;
}

#desktopJobDetailsContainer .job-location {
  font-size: 13px !important;
  color: var(--revamp-text-secondary) !important;
  font-weight: 400 !important;
}

/* Override the generic .text-secondary on detail pane — only for location */
#desktopJobDetailsContainer .job-title-container .text-secondary {
  font-size: 13px !important;
}

/* FORM CONTENT AREA — padding and card treatment */
#desktopJobDetailsContainer .enclosed-small {
  padding: 16px 20px !important;
  margin-bottom: 0 !important;
}

/* FORM CARD — rounded, shadow, proper spacing */
#desktopJobDetailsContainer .card.p-3 {
  background: var(--revamp-bg-secondary) !important;
  border: 1px solid var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-lg) !important;
  padding: 20px !important;
  box-shadow: none !important;
  max-width: 100% !important;
}

/* JOB SUMMARY text */
#desktopJobDetailsContainer #jobSummary {
  font-size: 13.5px !important;
  color: var(--revamp-text-secondary) !important;
  line-height: 1.7 !important;
  margin-bottom: 16px !important;
  background: var(--revamp-bg-tertiary);
  padding: 14px 16px;
  border-radius: var(--revamp-radius-md);
  border: 1px solid var(--revamp-border-light);
}

/* APPLY BUTTONS */
#desktopJobDetailsContainer .apply-button-container {
  gap: 8px !important;
  margin-bottom: 20px !important;
}

#desktopJobDetailsContainer .apply-button-container .actionBtn {
  padding: 11px 16px !important;
  border-radius: var(--revamp-radius-md) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: all 0.15s !important;
}

#desktopJobDetailsContainer .apply-button-container .btn-secondary {
  background: var(--revamp-bg-secondary) !important;
  color: var(--revamp-text-primary) !important;
  border: 1px solid var(--revamp-border-medium) !important;
}

/* FORM TITLE "Apply Here to Speak to a Recruiter" */
#desktopJobDetailsContainer #job-form-container .fw-bold.text-black,
#desktopJobDetailsContainer #job-form-container .fw-bold {
  font-family: var(--revamp-font-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--revamp-text-primary) !important;
  margin-bottom: 4px !important;
}

/* FORM FIELDS */
#desktopJobDetailsContainer #customForm {
  min-height: auto !important;
}

#desktopJobDetailsContainer #customForm .form-group {
  margin-bottom: 12px !important;
}

/* Keep Bootstrap row/col layout for form fields — only override appearance */

#desktopJobDetailsContainer #customForm label,
#desktopJobDetailsContainer #customForm .required {
  font-family: var(--revamp-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--revamp-text-secondary) !important;
  letter-spacing: 0.1px !important;
  margin-bottom: 4px !important;
  display: block !important;
}

#desktopJobDetailsContainer #customForm .form-control:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]),
#desktopJobDetailsContainer #customForm .form-control-lg:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]) {
  height: 40px !important;
  border: 1px solid var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-sm) !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  background: var(--revamp-bg-secondary) !important;
  color: var(--revamp-text-primary) !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

#desktopJobDetailsContainer #customForm .form-control:not(.noBorder):focus {
  border-color: var(--revamp-border-medium) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05) !important;
}

#desktopJobDetailsContainer #customForm .form-control::placeholder {
  color: var(--revamp-text-tertiary) !important;
}

/* Radio/Checkbox buttons inside form */
#desktopJobDetailsContainer .holdSingleChoice .form-check,
#desktopJobDetailsContainer .holdMuiltpleChoice .form-check {
  margin-right: 8px !important;
  margin-bottom: 6px !important;
}

#desktopJobDetailsContainer .noBorder {
  border: none !important;
  padding: 0 !important;
}

/* SUBMIT BUTTON — "APPLY NOW" */
#desktopJobDetailsContainer .btn-theme.btn-t-primary,
#desktopJobDetailsContainer form .btn[onclick*="submitApplication"],
#desktopJobDetailsContainer .apply-form .btn:not(.btn-secondary):not(.btn-close):not(.actionBtn) {
  width: 100% !important;
  padding: 12px 16px !important;
  border-radius: var(--revamp-radius-md) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: all 0.15s !important;
  margin-top: 8px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#desktopJobDetailsContainer .btn-theme.btn-t-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--revamp-shadow-md) !important;
}

/* File upload input */
#desktopJobDetailsContainer input[type="file"] {
  font-size: 13px !important;
  padding: 8px !important;
  border: 1px solid var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-sm) !important;
}

/* DISCLOSURE TEXT */
#desktopJobDetailsContainer .discInfo,
#desktopJobDetailsContainer #discInfo {
  font-size: 10px !important;
  line-height: 1.4 !important;
  color: var(--revamp-text-tertiary) !important;
  margin-top: 12px !important;
}

/* APPLICATION FORM LOADER */
#desktopJobDetailsContainer .jobApplicationFormLoader {
  display: none !important;
}

/* ============================================
   CENTER PANE — NEW CLASSES (added to PHP)
   ============================================ */

/* Detail container — fill the pane */
.cw-detail-container {
  max-width: 100% !important;
  padding: 0 !important;
  background: var(--revamp-bg-primary) !important;
}

#desktopJobDetailsContainer {
  background: var(--revamp-bg-primary) !important;
}

/* ============================================
   BANNER + HERO — NEW STRUCTURE
   Banner with gradient overlay. Logo + title ON the overlay.
   ============================================ */
.cw-banner-wrapper {
  position: relative !important;
  height: 200px;
  overflow: hidden;
  display: block !important;
}

.cw-banner-img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
}

.cw-banner-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.08) 60%) !important;
  pointer-events: none;
  z-index: 2 !important;
}

/* Logo container — inside banner, bottom-left */
.cw-hero-logo-wrap {
  position: absolute !important;
  bottom: 16px !important;
  left: 20px !important;
  z-index: 5 !important;
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
  border-radius: var(--revamp-radius-md);
  background: #fff;
  padding: 5px;
  box-shadow: var(--revamp-shadow-md);
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden !important;
}

.cw-hero-logo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border: none !important;
  border-radius: 6px;
}

/* Title text ON the hero overlay — white, bottom-left next to logo */
.cw-hero-text {
  position: absolute !important;
  bottom: 18px !important;
  left: 92px !important;
  right: 20px !important;
  z-index: 5 !important;
  color: #fff;
}

.cw-hero-title {
  font-family: var(--revamp-font-heading) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  color: #fff !important;
}

.cw-hero-loc {
  font-size: 13px;
  opacity: 0.9;
  margin-top: 2px;
  color: #fff !important;
}

.cw-hero-section {
  position: relative !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* Content area below hero — slightly grey bg for card contrast */
.cw-content-area {
  padding: 20px;
  background: var(--revamp-bg-primary) !important;
}

/* Action buttons row — "Apply by Chat" + "Call" like the design */
.cw-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  padding-top: 4px;
}

/* When there's only one button, make it full-width and more prominent */
.cw-actions > :only-child {
  width: 100%;
}

/* Single primary button should have rounded style */
.cw-actions > .cw-btn-primary:only-child {
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Single outline button (only Call, no primary) should also be full-width and prominent */
.cw-actions > .cw-btn-outline:only-child {
  flex: 1;
  border-radius: 14px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
}

/* Primary action button (Apply by Chat / Apply Now) */
.cw-btn-primary {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--revamp-radius-md);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--revamp-font-heading);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s;
  box-shadow: var(--revamp-shadow-sm);
  text-decoration: none;
  cursor: pointer;
  border: none;
}

.cw-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--revamp-shadow-md);
  text-decoration: none;
  color: inherit;
}

/* Outline button (Call) — matches design: same height, icon + text, light border */
.cw-btn-outline {
  padding: 12px 16px;
  border-radius: var(--revamp-radius-md);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--revamp-font-heading);
  background: var(--revamp-bg-secondary);
  color: var(--revamp-text-primary);
  border: 1px solid var(--revamp-border-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s;
  text-decoration: none;
  cursor: pointer;
}

.cw-btn-outline:hover {
  background: var(--revamp-bg-tertiary);
  text-decoration: none;
  color: var(--revamp-text-primary);
}

/* Highlights Grid — 2x2 grid of job detail cards */
.cw-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.cw-hl-card {
  background: var(--revamp-bg-secondary);
  border: 1px solid var(--revamp-border-light);
  border-radius: var(--revamp-radius-md);
  padding: 12px 14px;
}

.cw-hl-label {
  font-family: var(--revamp-font-heading);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--revamp-text-tertiary);
  margin-bottom: 2px;
}

.cw-hl-value {
  font-family: var(--revamp-font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--revamp-text-primary);
}

.cw-hl-green {
  color: #059669 !important;
}

/* Job Description Card */
.cw-desc-card {
  background: var(--revamp-bg-secondary) !important;
  border: 1px solid var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-lg) !important;
  padding: 20px !important;
  margin-bottom: 20px;
  box-shadow: var(--revamp-shadow-sm) !important;
}

.cw-desc-card h3 {
  font-family: var(--revamp-font-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  color: var(--revamp-text-primary) !important;
}

.cw-desc-card p {
  font-size: 13.5px;
  color: var(--revamp-text-secondary);
  line-height: 1.7;
  margin-bottom: 12px;
}

.cw-desc-card .cw-desc-content strong,
.cw-desc-card .cw-desc-content b {
  font-family: var(--revamp-font-heading) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--revamp-text-primary) !important;
  display: block;
  margin-top: 14px;
  margin-bottom: 6px;
}

.cw-desc-card .cw-desc-content p {
  font-size: 13.5px;
  color: var(--revamp-text-secondary);
  line-height: 1.7;
}

.cw-desc-card .cw-desc-content ul,
.cw-desc-card .cw-desc-content ol {
  padding-left: 20px;
  margin-bottom: 12px;
}

.cw-desc-card .cw-desc-content li {
  font-size: 13.5px;
  color: var(--revamp-text-secondary);
  line-height: 1.7;
  margin-bottom: 4px;
}

.cw-desc-divider {
  height: 1px;
  background: var(--revamp-border-light);
  margin: 16px 0;
}

/* Quick Apply Card */
.cw-apply-card {
  background: var(--revamp-bg-secondary) !important;
  border: 1px solid var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-lg) !important;
  padding: 24px !important;
  margin-bottom: 20px;
  box-shadow: var(--revamp-shadow-sm) !important;
}

.cw-apply-title {
  font-family: var(--revamp-font-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
  color: var(--revamp-text-primary) !important;
}

.cw-apply-sub {
  font-size: 12px !important;
  color: var(--revamp-text-tertiary) !important;
  margin-bottom: 16px !important;
}

/* Apply card form field styling */
/* Form group spacing only — do NOT override Bootstrap row/col layout */
.cw-apply-card .form-group {
  margin-bottom: 14px !important;
}

.cw-apply-card label,
.cw-apply-card .required {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--revamp-text-secondary) !important;
  margin-bottom: 5px !important;
}

.cw-apply-card .form-control:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]),
.cw-apply-card .form-control-lg:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]) {
  height: 44px !important;
  border: 1.5px solid var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-sm) !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  background: #fff !important;
  color: var(--revamp-text-primary) !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.cw-apply-card .form-control:focus,
.cw-apply-card .form-control-lg:focus {
  border-color: var(--revamp-border-medium) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06) !important;
  outline: none !important;
}

.cw-apply-card .form-control::placeholder {
  color: var(--revamp-text-tertiary) !important;
  font-weight: 400 !important;
}

/* Radio/Choice — clean no-border pills (same as #customForm rules at bottom) */

/* File upload — clean, subtle */
.cw-apply-card input[type="file"] {
  font-size: 13px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-sm) !important;
  background: var(--revamp-bg-tertiary) !important;
  width: 100% !important;
  cursor: pointer !important;
  color: var(--revamp-text-secondary) !important;
}

/* Submit button — prominent CTA */
.cw-apply-card .btn-apply,
.cw-apply-card .btn-theme.btn-t-primary,
.cw-apply-card .actionBtn.btn-apply {
  width: 100% !important;
  padding: 14px 16px !important;
  border-radius: var(--revamp-radius-md) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 6px !important;
  box-shadow: var(--revamp-shadow-sm) !important;
}

.cw-apply-card .btn-apply:hover,
.cw-apply-card .btn-theme.btn-t-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--revamp-shadow-md) !important;
  opacity: 0.95;
}

/* Disclosure */
.cw-apply-card .discInfo,
.cw-apply-card #discInfo {
  font-size: 10px !important;
  line-height: 1.4 !important;
  color: var(--revamp-text-tertiary) !important;
  margin-top: 12px !important;
  text-align: left !important;
}


/* ============================================
   FORM AREA + FORM CARD
   ============================================ */
.cw-form-area {
  padding: 16px 20px 20px 20px !important;
  margin-bottom: 0 !important;
}

.cw-form-card {
  background: var(--revamp-bg-secondary) !important;
  border: 1px solid var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-lg) !important;
  padding: 20px !important;
  box-shadow: none !important;
}

.cw-form-card #form-details-area {
  width: 100%;
}

/* Job summary box inside card */
.cw-form-card #jobSummary {
  font-size: 13.5px !important;
  color: var(--revamp-text-secondary) !important;
  line-height: 1.65 !important;
  margin-bottom: 16px !important;
  background: var(--revamp-bg-tertiary) !important;
  padding: 14px 16px !important;
  border-radius: var(--revamp-radius-md) !important;
  border: 1px solid var(--revamp-border-light) !important;
}

/* Apply buttons */
.cw-form-card .apply-button-container {
  gap: 8px !important;
  margin-bottom: 20px !important;
}

.cw-form-card .apply-button-container .flex-fill {
  flex: 1 !important;
}

.cw-form-card .apply-button-container .actionBtn {
  padding: 12px 16px !important;
  border-radius: var(--revamp-radius-md) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  transition: all 0.15s !important;
  box-shadow: var(--revamp-shadow-sm) !important;
}

.cw-form-card .apply-button-container .actionBtn:hover {
  transform: translateY(-1px);
  box-shadow: var(--revamp-shadow-md) !important;
}

.cw-form-card .apply-button-container .btn-secondary {
  background: var(--revamp-bg-secondary) !important;
  color: var(--revamp-text-primary) !important;
  border: 1px solid var(--revamp-border-medium) !important;
  box-shadow: none !important;
}

.cw-form-card .apply-button-container .btn-secondary:hover {
  background: var(--revamp-bg-tertiary) !important;
}

/* Form section title */
.cw-form-card #job-form-container .fw-bold.text-black,
.cw-form-card #job-form-container .row .fw-bold {
  font-family: var(--revamp-font-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--revamp-text-primary) !important;
  margin-bottom: 4px !important;
}

/* Form fields layout */
.cw-form-card #customForm .form-page.row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cw-form-card #customForm .form-group {
  margin-bottom: 14px !important;
}

.cw-form-card #customForm .form-group.col-6,
.cw-form-card #customForm .form-group.half-width,
.cw-form-card #customForm .form-group[displayas="half-width"] {
  flex: 0 0 calc(50% - 6px) !important;
  max-width: calc(50% - 6px) !important;
  padding: 0 !important;
}

.cw-form-card #customForm .form-group.col-12:not(.half-width) {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* Labels */
.cw-form-card label,
.cw-form-card .required {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--revamp-text-secondary) !important;
  margin-bottom: 5px !important;
}

/* Inputs */
.cw-form-card .form-control:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice),
.cw-form-card .form-control-lg:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice) {
  height: 42px !important;
  border: 1px solid var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-sm) !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  background: var(--revamp-bg-secondary) !important;
  color: var(--revamp-text-primary) !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.cw-form-card .form-control:focus,
.cw-form-card .form-control-lg:focus {
  border-color: var(--revamp-border-medium) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06) !important;
  outline: none !important;
}

.cw-form-card .form-control::placeholder {
  color: var(--revamp-text-tertiary) !important;
}

/* Radio/single-choice — style as button toggles */
.cw-form-card .holdSingleChoice {
  border: none !important;
  padding: 0 !important;
}

.cw-form-card .holdSingleChoice .form-check {
  display: inline-block !important;
  margin-right: 8px !important;
  margin-bottom: 6px !important;
}

.cw-form-card .holdSingleChoice .form-check-label {
  padding: 8px 20px !important;
  border: 1px solid var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-sm) !important;
  background: var(--revamp-bg-tertiary) !important;
  color: var(--revamp-text-secondary) !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: all 0.12s !important;
}

.cw-form-card .holdSingleChoice .form-check-label:hover {
  border-color: var(--revamp-border-medium) !important;
}

.cw-form-card .holdSingleChoice .form-check-input:checked + .form-check-label {
  background: var(--brand-color, #111827) !important;
  color: var(--brand-text-color, #fff) !important;
  border-color: transparent !important;
}

.cw-form-card .holdSingleChoice .form-check-input {
  display: none !important;
}

/* File upload */
.cw-form-card input[type="file"] {
  font-size: 13px !important;
  padding: 8px 12px !important;
  border: 1px dashed var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-sm) !important;
  background: var(--revamp-bg-tertiary) !important;
  width: 100% !important;
  cursor: pointer;
}

/* ====== SUBMIT BUTTON "APPLY NOW" ======
   It's a <div class="btn actionBtn btn-apply btn-theme btn-t-primary">
   with inline: background: #da2528 !important; text-transform: uppercase; font-size: 17px; width: 100%
   We need !important on everything to override inline styles. */
.btn-apply.btn-theme.btn-t-primary,
.cw-form-card .btn-apply,
.cw-form-card .btn-theme.btn-t-primary,
.cw-detail-container .btn-apply,
.cw-detail-container .btn-theme.btn-t-primary,
#desktopJobDetailsContainer .btn-apply {
  width: 100% !important;
  padding: 13px 16px !important;
  border-radius: var(--revamp-radius-md) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  transition: all 0.15s !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-apply.btn-theme.btn-t-primary:hover,
.cw-form-card .btn-apply:hover,
.cw-detail-container .btn-apply:hover {
  transform: translateY(-1px);
  box-shadow: var(--revamp-shadow-md) !important;
  opacity: 0.95;
}

/* Disclosure */
.cw-form-card .discInfo,
.cw-form-card #discInfo,
.cw-detail-container .discInfo {
  font-size: 10px !important;
  line-height: 1.4 !important;
  color: var(--revamp-text-tertiary) !important;
  margin-top: 12px !important;
  text-align: left !important;
}

/* ============================================
   JOB DESCRIPTION (below form in center pane)
   Rendered as h4 title + raw HTML content
   ============================================ */
.cw-detail-container > div:last-child {
  padding: 0 20px 20px 20px;
}

/* The "Warehouse Worker" h4 title above description */
.cw-detail-container h4.text,
.cw-detail-container .job-title.text.h4:not(.cw-title-content .job-title) {
  font-family: var(--revamp-font-heading) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--revamp-text-primary) !important;
  margin-bottom: 4px !important;
}

/* The job description content itself — inside a card */
.cw-detail-container #jobDescription,
.cw-detail-container .job-desc-content {
  background: var(--revamp-bg-secondary) !important;
  border: 1px solid var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-lg) !important;
  padding: 20px !important;
  margin-top: 8px;
}

.cw-detail-container #jobDescription h1,
.cw-detail-container #jobDescription h2,
.cw-detail-container #jobDescription h3,
.cw-detail-container #jobDescription h4 {
  font-family: var(--revamp-font-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  margin-top: 16px !important;
  color: var(--revamp-text-primary) !important;
}

.cw-detail-container #jobDescription h1:first-child,
.cw-detail-container #jobDescription h2:first-child,
.cw-detail-container #jobDescription h3:first-child {
  margin-top: 0 !important;
}

.cw-detail-container #jobDescription p {
  font-size: 13.5px !important;
  color: var(--revamp-text-secondary) !important;
  line-height: 1.7 !important;
  margin-bottom: 10px !important;
}

.cw-detail-container #jobDescription ul,
.cw-detail-container #jobDescription ol {
  padding-left: 20px !important;
  margin-bottom: 12px !important;
}

.cw-detail-container #jobDescription li {
  font-size: 13.5px !important;
  color: var(--revamp-text-secondary) !important;
  line-height: 1.7 !important;
  margin-bottom: 4px !important;
}

.cw-detail-container #jobDescription strong,
.cw-detail-container #jobDescription b {
  color: var(--revamp-text-primary) !important;
  font-weight: 600 !important;
}

/* ============================================
   JOB DESCRIPTION SECTION (new PHP classes)
   ============================================ */
.cw-desc-section {
  padding: 0 20px 20px 20px;
}

.cw-desc-header {
  margin-bottom: 12px;
}

.cw-desc-title {
  font-family: var(--revamp-font-heading) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--revamp-text-primary) !important;
  margin-bottom: 2px;
}

.cw-desc-location {
  font-size: 13px;
  color: var(--revamp-text-secondary);
}

.cw-desc-body {
  background: var(--revamp-bg-secondary) !important;
  border: 1px solid var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-lg) !important;
  padding: 20px !important;
  box-shadow: var(--revamp-shadow-sm);
}

.cw-desc-body h1,
.cw-desc-body h2,
.cw-desc-body h3,
.cw-desc-body h4 {
  font-family: var(--revamp-font-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  margin-top: 16px !important;
  color: var(--revamp-text-primary) !important;
}

.cw-desc-body h1:first-child,
.cw-desc-body h2:first-child,
.cw-desc-body h3:first-child {
  margin-top: 0 !important;
}

.cw-desc-body p {
  font-size: 13.5px !important;
  color: var(--revamp-text-secondary) !important;
  line-height: 1.7 !important;
  margin-bottom: 10px !important;
}

.cw-desc-body ul,
.cw-desc-body ol {
  padding-left: 20px !important;
  margin-bottom: 12px !important;
}

.cw-desc-body li {
  font-size: 13.5px !important;
  color: var(--revamp-text-secondary) !important;
  line-height: 1.7 !important;
  margin-bottom: 4px !important;
}

.cw-desc-body strong,
.cw-desc-body b {
  color: var(--revamp-text-primary) !important;
  font-weight: 600 !important;
}

/* Apply button container */
#desktopJobDetailsContainer .apply-button-container {
  display: flex !important;
  gap: 8px !important;
  margin: 16px 0 !important;
}

#desktopJobDetailsContainer .apply-button-container .actionBtn {
  flex: 1;
  padding: 12px 16px !important;
  border-radius: var(--revamp-radius-md) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  transition: all 0.15s;
  border: none !important;
}

#desktopJobDetailsContainer .apply-button-container .actionBtn:first-child {
  box-shadow: var(--revamp-shadow-sm);
}

#desktopJobDetailsContainer .apply-button-container .actionBtn:first-child:hover {
  transform: translateY(-1px);
  box-shadow: var(--revamp-shadow-md);
}

#desktopJobDetailsContainer .apply-button-container .btn-secondary {
  background: var(--revamp-bg-secondary) !important;
  color: var(--revamp-text-primary) !important;
  border: 1px solid var(--revamp-border-medium) !important;
}

#desktopJobDetailsContainer .apply-button-container .btn-secondary:hover {
  background: var(--revamp-bg-tertiary) !important;
}

/* Form card in detail pane */
#desktopJobDetailsContainer .card {
  background: var(--revamp-bg-secondary) !important;
  border: 1px solid var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-lg) !important;
  padding: 20px !important;
  box-shadow: none !important;
  max-width: 100% !important;
}

/* Highlights grid for job details */
.revamp-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.revamp-highlights .revamp-hl-card {
  background: var(--revamp-bg-secondary);
  border: 1px solid var(--revamp-border-light);
  border-radius: var(--revamp-radius-md);
  padding: 12px 14px;
}

.revamp-highlights .revamp-hl-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--revamp-text-tertiary);
  margin-bottom: 2px;
  font-family: var(--revamp-font-heading);
}

.revamp-highlights .revamp-hl-value {
  font-family: var(--revamp-font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--revamp-text-primary);
}

.revamp-highlights .revamp-hl-value.green {
  color: #059669;
}

/* Job description section card */
.revamp-job-desc {
  background: var(--revamp-bg-secondary);
  border: 1px solid var(--revamp-border-light);
  border-radius: var(--revamp-radius-lg);
  padding: 20px;
  margin-bottom: 20px;
}

.revamp-job-desc h3 {
  font-family: var(--revamp-font-heading);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--revamp-text-primary);
}

.revamp-job-desc p {
  font-size: 13.5px;
  color: var(--revamp-text-secondary);
  line-height: 1.7;
  margin-bottom: 14px;
}

.revamp-job-desc ul {
  list-style: none;
  padding: 0;
}

.revamp-job-desc li {
  font-size: 13.5px;
  color: var(--revamp-text-secondary);
  line-height: 1.7;
  padding-left: 18px;
  position: relative;
  margin-bottom: 4px;
}

.revamp-job-desc li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand-color, #4361ee);
}

.revamp-desc-divider {
  height: 1px;
  background: var(--revamp-border-light);
  margin: 16px 0;
}

/* Job summary text */
#desktopJobDetailsContainer #jobSummary {
  font-size: 13.5px;
  color: var(--revamp-text-secondary);
  line-height: 1.7;
  margin-bottom: 14px !important;
}

/* Apply form section title */
#desktopJobDetailsContainer .fw-bold.text-black {
  font-family: var(--revamp-font-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* Form inputs — exclude radio/choice wrapper divs that also have .form-control */
#desktopJobDetailsContainer .form-control:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]),
.form-control:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]) {
  height: 40px;
  border: 1px solid var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-sm) !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  background: var(--revamp-bg-secondary) !important;
  transition: all 0.15s !important;
  color: var(--revamp-text-primary) !important;
  box-shadow: none !important;
}

#desktopJobDetailsContainer .form-control:not(.noBorder):focus,
.form-control:focus {
  border-color: var(--revamp-border-medium) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05) !important;
  outline: none !important;
}

#desktopJobDetailsContainer .form-control::placeholder,
.form-control::placeholder {
  color: var(--revamp-text-tertiary) !important;
}

/* Submit button in detail form */
#desktopJobDetailsContainer .btn[type="submit"],
#desktopJobDetailsContainer form .btn:not(.btn-secondary):not(.btn-close) {
  width: 100%;
  padding: 12px !important;
  border-radius: var(--revamp-radius-md) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: all 0.15s;
}

#desktopJobDetailsContainer form .btn:not(.btn-secondary):not(.btn-close):hover {
  transform: translateY(-1px);
  box-shadow: var(--revamp-shadow-md);
}


/* ============================================
   CAREERWEB - CHAT PANE (Right)
   The chat-widget web component has inline styles:
     height: 100vh; width: 350px; border-left: 1px solid #f2f5f8;
   We need to override these to fit the grid column.
   ============================================ */
#chat-container {
  background: var(--revamp-bg-secondary) !important;
  border-left: 1px solid var(--revamp-border-light) !important;
  overflow: hidden !important;
  position: relative !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

#chat-container chat-widget {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  border-left: none !important;
  box-shadow: none !important;
  position: relative !important;
  top: auto !important;
  right: auto !important;
  display: flex !important;
  flex-direction: column !important;
}


/* ============================================
   CAREERWEB - FILTER MODAL — Modern, clean design
   ============================================ */

/* Modal positioning */
#desktopFiltersModal {
  z-index: 10000 !important;
}

#desktopFiltersModal .modal-dialog {
  max-width: 480px;
  margin: 80px auto;
}

/* Card treatment — NO overflow:hidden so dropdowns can extend */
#desktopFiltersModal .modal-content {
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 25px 80px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.1) !important;
  overflow: visible !important;
  background: #fff;
}

/* Header — clean, minimal */
#desktopFiltersModal .modal-header {
  border-bottom: 1px solid #f1f3f5 !important;
  padding: 20px 24px 16px !important;
}

#desktopFiltersModal .modal-title {
  font-family: var(--revamp-font-heading) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #111827;
}

#desktopFiltersModal .btn-close {
  opacity: 0.4;
  transition: opacity 0.15s;
}

#desktopFiltersModal .btn-close:hover {
  opacity: 1;
}

/* Body — allow overflow for dropdowns */
#desktopFiltersModal .modal-body {
  padding: 20px 24px 8px !important;
  overflow: visible !important;
}

/* Form groups inside modal */
#desktopFiltersModal .form-group {
  margin-bottom: 18px !important;
  position: relative;
}

#desktopFiltersModal .modal-body label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #374151 !important;
  margin-bottom: 6px !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-family: var(--revamp-font-heading) !important;
}

#desktopFiltersModal .modal-body label b {
  font-weight: 700 !important;
}

/* Inputs inside modal */
#desktopFiltersModal .modal-body .form-control:not(.dropdown-toggle):not(.dropdown-search):not(.noBorder) {
  height: 44px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  background: #fff !important;
  color: #111827 !important;
  box-shadow: none !important;
  transition: border-color 0.2s !important;
}

#desktopFiltersModal .modal-body .form-control:not(.dropdown-toggle):focus {
  border-color: #9ca3af !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05) !important;
}

/* Dropdown toggle — looks like a select */
#desktopFiltersModal .dropdown-toggle {
  height: 44px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  color: #6b7280 !important;
  background: #fff !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  cursor: pointer !important;
  transition: border-color 0.2s !important;
}

#desktopFiltersModal .dropdown-toggle:hover {
  border-color: #9ca3af !important;
}

#desktopFiltersModal .dropdown-toggle::after {
  margin-left: auto;
  opacity: 0.5;
}

/* Dropdown container — the toggle + menu live here.
   Bootstrap .dropdown sets position:relative which is what we want.
   The menu uses transform to position directly below the toggle. */
#desktopFiltersModal .dropdown-container {
  position: relative !important;
}

/* Dropdown menu — MUST sit directly below the toggle, not offset */
#desktopFiltersModal .dropdown-menu {
  position: absolute !important;
  inset: auto !important;
  top: calc(100%) !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  z-index: 10050 !important;
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06) !important;
  padding: 10px !important;
  margin-top: 4px !important;
  background: #fff !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  width: 100% !important;
  min-width: 100% !important;
}

/* Bootstrap Popper adds inline styles (transform, inset, position).
   Override ALL of them so the menu sits naturally below the toggle via CSS flow. */
#desktopFiltersModal .dropdown-menu[data-popper-placement],
#desktopFiltersModal .dropdown-menu[style] {
  position: relative !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: unset !important;
  margin-top: 6px !important;
  float: none !important;
}

/* Search input inside dropdown */
#desktopFiltersModal .dropdown-search {
  border-radius: 8px !important;
  font-size: 13px !important;
  height: 36px !important;
  border: 1px solid #e5e7eb !important;
  margin-bottom: 8px !important;
  padding: 0 10px !important;
}

#desktopFiltersModal .dropdown-search:focus {
  border-color: #9ca3af !important;
  box-shadow: none !important;
}

/* Checkbox items in dropdown */
#desktopFiltersModal .dropdown-menu li {
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.1s;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}

#desktopFiltersModal .dropdown-menu li:hover {
  background: #f8f9fa;
}

#desktopFiltersModal .form-check-input {
  border-radius: 4px;
  border-color: #d1d5db;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

#desktopFiltersModal .checkLabel {
  font-size: 13px !important;
  color: #374151;
  cursor: pointer;
  margin-left: 4px !important;
}

/* Footer — modern button pair */
#desktopFiltersModal .modal-footer {
  border-top: 1px solid #f1f3f5 !important;
  padding: 16px 24px !important;
  gap: 10px;
  display: flex !important;
  justify-content: flex-start !important;
}

#desktopFiltersModal .modal-footer .btn {
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: var(--revamp-font-heading) !important;
  padding: 10px 20px !important;
  transition: all 0.15s !important;
}

#desktopFiltersModal .modal-footer .btn-secondary {
  background: #f1f3f5 !important;
  color: #4b5563 !important;
  border: none !important;
}

#desktopFiltersModal .modal-footer .btn-secondary:hover {
  background: #e5e7eb !important;
}

/* Update button inherits brand color from inline style — just fix shape */
#desktopFiltersModal .modal-footer .btn:not(.btn-secondary) {
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

#desktopFiltersModal .modal-footer .btn:not(.btn-secondary):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}

/* The dropdown search inside modal should NOT get the noBorder exclusion treatment */
#desktopFiltersModal .dropdown-search {
  font-size: 13px !important;
  margin-bottom: 8px !important;
}

#desktopFiltersModal .form-check-input {
  border-radius: 4px;
  border-color: var(--revamp-border-medium);
}

#desktopFiltersModal .checkLabel {
  font-size: 13px !important;
  color: var(--revamp-text-primary);
}


/* ============================================
   CAREERWEB - PANE LOADERS
   ============================================ */
.pane-loader {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(4px) !important;
}

.loaderHolder {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(4px);
}


/* ============================================
   JOB APPLICATION VIEW (Single Job Landing)
   Loaded by jobApplicationView.php

   Live HTML structure:
   <main id="main-content">
     <div class="content container" style="position:static;padding:0px;max-width:1200px">
       <div class="d-md-none mobile-header-area">  (mobile banner)
       <div class="loaderHolder">
       <div class="d-md-none"> (mobile title)
       <div class="d-none d-md-block container-fluid p-0"> (desktop header)
         <div class="jumbotron jumbotron-fluid"> <header class="row" border-bottom>
           <div class="col-2"> (logo)
           <div class="col-10"> (banner img)
       <div class="enclosed-small">
         <div class="job-container mt-3">
           <div class="apply-form-container card p-3"> (form side)
           <div class="job-desc-container p-3"> (description side)
   ============================================ */

/* Desktop header — modernize the banner area */
#main-content > .content.container > .d-none.d-md-block.container-fluid {
  padding: 0 !important;
}

#main-content .jumbotron {
  margin-bottom: 0 !important;
  background: transparent !important;
}

#main-content .jumbotron > header.row,
#main-content .jumbotron > .row {
  border-bottom: none !important;
  margin: 0 !important;
  position: relative;
  overflow: hidden;
  min-height: 180px;
}

/* Banner image on desktop */
#main-content .jumbotron .col-10 {
  padding: 0 !important;
}

#main-content .jumbotron .col-10 img {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
}

/* Logo column on desktop */
#main-content .jumbotron .col-2 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  border: none !important;
  background: var(--revamp-bg-secondary);
}

#main-content .jumbotron .col-2 img {
  max-height: 60px !important;
  max-width: 100% !important;
  object-fit: contain !important;
  border: none !important;
}

/* Mobile header area */
.mobile-header-area {
  position: relative;
  overflow: hidden;
}

.mobile-header-area img.w-100 {
  height: 160px !important;
  object-fit: cover;
}

/* #companyLogoMobile for standalone Job Application View (not CareerWeb center pane).
   In the CW center pane, #companyLogoMobile is inside .cw-hero-logo-wrap
   and must NOT be positioned absolutely. */
#main-content #companyLogoMobile {
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  border-radius: var(--revamp-radius-md) !important;
  background: #fff !important;
  padding: 4px !important;
  box-shadow: var(--revamp-shadow-md) !important;
  border: none !important;
  object-fit: contain !important;
}

/* Desktop job title below banner */
#main-content .d-none.d-md-block .job-title,
#main-content .job-title.text.h4,
.job-title.text {
  font-family: var(--revamp-font-heading) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: var(--revamp-text-primary) !important;
  margin: 0 !important;
}

.job-location.text-secondary {
  font-size: 13px !important;
  color: var(--revamp-text-secondary) !important;
}

/* Mobile title area */
.d-md-none .job-title-container {
  padding: 8px 0 !important;
}

/* Job container — two-column layout */
@media (min-width: 768px) {
  .job-container {
    display: grid !important;
    grid-template-columns: 1fr 370px !important;
    gap: 24px !important;
    align-items: start !important;
    max-width: 1200px;
    margin: 0 auto !important;
    padding: 24px 28px !important;
    flex-direction: unset !important;
  }

  /* Description on left, form on right (grid reverses the flex-direction: row-reverse) */
  .job-desc-container {
    width: 100% !important;
    order: -1 !important;
    min-height: auto !important;
  }

  .apply-form-container {
    width: 100% !important;
    position: sticky !important;
    top: 20px !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
  }
}

/* Form card modernization */
.apply-form-container.card {
  background: var(--revamp-bg-secondary) !important;
  border: 1px solid var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-lg) !important;
  box-shadow: var(--revamp-shadow-sm) !important;
  padding: 20px !important;
}

/* Apply button container */
.apply-button-container {
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.apply-button-container .actionBtn {
  padding: 12px 16px !important;
  border-radius: var(--revamp-radius-md) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  transition: all 0.15s !important;
}

.apply-button-container .actionBtn:hover {
  transform: translateY(-1px);
  box-shadow: var(--revamp-shadow-md) !important;
}

.apply-button-container .btn-secondary {
  background: var(--revamp-bg-secondary) !important;
  color: var(--revamp-text-primary) !important;
  border: 1px solid var(--revamp-border-medium) !important;
}

.apply-button-container .btn-secondary:hover {
  background: var(--revamp-bg-tertiary) !important;
}

/* Form title "Apply Here..." */
#job-form-container .fw-bold.text-black {
  font-family: var(--revamp-font-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* Custom form fields */
#customForm .form-group {
  margin-bottom: 12px !important;
}

#customForm label,
#customForm .required {
  font-family: var(--revamp-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--revamp-text-secondary) !important;
  margin-bottom: 4px !important;
  letter-spacing: 0.1px !important;
}

#customForm .form-control:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]),
#customForm .form-control-lg:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]) {
  height: 44px !important;
  border: 1px solid var(--revamp-border-light) !important;
  border-radius: 10px !important;
  font-family: var(--revamp-font-body) !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  background: var(--revamp-bg-secondary) !important;
  color: var(--revamp-text-primary) !important;
  box-shadow: none !important;
}

#customForm .form-control:not(.noBorder):focus,
#customForm .form-control-lg:not(.noBorder):focus {
  border-color: var(--revamp-border-medium) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05) !important;
}

/* Submit button in form */
#customForm + .col-md-12 .btn,
.apply-form .btn[type="submit"],
.btn-theme.btn-t-primary {
  width: 100% !important;
  padding: 12px !important;
  border-radius: var(--revamp-radius-md) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: all 0.15s !important;
  margin-top: 8px !important;
}

/* Job Description container */
.job-desc-container {
  padding: 0 !important;
}

.job-desc-container > * {
  padding: 0 !important;
}

/* Job description text content — only add card treatment when NOT inside jv-desc-card or cw-desc-card */
#jobDescription {
  padding: 0 !important;
}

/* Standalone #jobDescription (not inside a desc-card) gets card treatment */
.job-desc-container > #jobDescription {
  background: var(--revamp-bg-secondary);
  border: 1px solid var(--revamp-border-light);
  border-radius: var(--revamp-radius-lg);
  padding: 20px !important;
}

/* Inside jv/cw desc cards — NO card styling, just content */
.jv-desc-card #jobDescription,
.jv-desc-content#jobDescription,
.cw-desc-card #jobDescription,
.cw-desc-body#jobDescription {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

#jobDescription h1,
#jobDescription h2,
#jobDescription h3 {
  font-family: var(--revamp-font-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  color: var(--revamp-text-primary) !important;
}

#jobDescription p {
  font-size: 13.5px;
  color: var(--revamp-text-secondary);
  line-height: 1.7;
}

#jobDescription li {
  font-size: 13.5px;
  color: var(--revamp-text-secondary);
  line-height: 1.7;
  margin-bottom: 4px;
}

#jobDescription ul {
  padding-left: 20px;
}

/* Desktop title in job-desc-container */
.job-desc-container .text.fs-2 {
  font-family: var(--revamp-font-heading) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  margin-bottom: 16px !important;
}

/* Back button */
#jobsSearchBackButton {
  font-size: 13px !important;
  color: var(--revamp-text-secondary) !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s;
}

#jobsSearchBackButton:hover {
  color: var(--revamp-text-primary) !important;
}


/* ============================================
   LANDING PAGE VIEW
   Used by landingPage.php

   Live HTML structure (same as jobApplicationView but with
   different content in job-desc-container from CMS):
   <main class="content container" style="max-width:1200px">
     <div class="d-md-none mobile-header-area">
     <div class="d-none d-md-block container-fluid p-0">
       <div class="jumbotron"> <header class="row" border-bottom>
     <div class="enclosed-small">
       <div class="job-container mt-3">
         <div class="apply-form-container card p-3">
         <article class="job-desc-container p-3" itemscope>
           <h1 itemprop="title">
           <section id="jobDescription" itemprop="description">
   ============================================ */

/* LP shares the same .job-container and .apply-form-container
   styles from the Job Application View section above.
   The following are LP-specific overrides. */

/* LP Banner — same header structure is reused */
#v2BannerContainer {
  height: var(--revamp-nav-height) !important;
  min-height: var(--revamp-nav-height) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 32px !important;
  background: #ffffff;
  border-bottom: 1px solid var(--revamp-border-light);
  margin: 0 !important;
}

.v2NavbarLogo {
  height: 34px !important;
  width: auto !important;
  object-fit: contain;
}

/* LP Background container — dark overlay */
#v2BackgroundImgContainer {
  min-height: calc(100vh - var(--revamp-nav-height)) !important;
  padding: 40px 48px 60px !important;
}

#v2BackgroundImgContainer::before {
  background: rgba(0,0,0,0.65) !important;
}

/* LP content grid */
.v2-job-container {
  max-width: 1120px !important;
  margin: 0 auto;
}

/* LP job description — white text on dark bg */
.v2-job-desc {
  color: #fff !important;
}

.v2-job-desc h1,
.v2-job-desc .sectionHeadline {
  font-family: var(--revamp-font-heading) !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #fff !important;
  margin-bottom: 24px !important;
}

.v2-job-desc h2,
.v2-job-desc h3 {
  font-family: var(--revamp-font-heading) !important;
  color: #fff !important;
}

.v2-job-desc p {
  color: rgba(255,255,255,0.85) !important;
  font-size: 13.5px;
  line-height: 1.7;
}

/* LP Sections - glass morphism */
.v2-job-desc .section {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--revamp-radius-lg) !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
  backdrop-filter: blur(4px);
}

.v2-job-desc .section h3,
.v2-job-desc .section .sectionHeadline {
  font-family: var(--revamp-font-heading) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin-bottom: 14px !important;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.v2-job-desc .section li {
  font-size: 13.5px;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  padding-left: 20px;
  position: relative;
  margin-bottom: 4px;
}

.v2-job-desc .section li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* LP form card on dark background — extra shadow */
#v2BackgroundImgContainer .apply-form-container.card {
  box-shadow: var(--revamp-shadow-xl) !important;
}

/* LP form buttons on dark bg */
#v2BackgroundImgContainer .apply-button-container .actionBtn {
  box-shadow: var(--revamp-shadow-md) !important;
}

/* LP article job description in dark context */
#v2BackgroundImgContainer .job-desc-container {
  color: #fff;
}

#v2BackgroundImgContainer #jobDescription {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.85);
}

#v2BackgroundImgContainer #jobDescription h1,
#v2BackgroundImgContainer #jobDescription h2,
#v2BackgroundImgContainer #jobDescription h3 {
  color: #fff !important;
}

#v2BackgroundImgContainer #jobDescription p,
#v2BackgroundImgContainer #jobDescription li {
  color: rgba(255,255,255,0.85) !important;
}

/* LP H1 title on dark background */
#v2BackgroundImgContainer .text.fs-2 {
  color: #fff !important;
  font-family: var(--revamp-font-heading) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
}


/* ============================================
   LP / Job Landing - SIDEBAR FORM CARD
   ============================================ */
.apply-form-container .c-form-1-box,
.apply-form-container-v2 .c-form-1-box {
  border: 1px solid var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-lg) !important;
  padding: 24px !important;
  box-shadow: var(--revamp-shadow-xl) !important;
  background: var(--revamp-bg-secondary) !important;
}

.apply-form-container .form-head-text,
.apply-form-container-v2 .form-head-text {
  font-family: var(--revamp-font-heading) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--revamp-text-primary);
  margin-bottom: 2px !important;
}

.apply-form-container .form-block-text,
.apply-form-container-v2 .form-block-text {
  font-size: 12px !important;
  color: var(--revamp-text-tertiary) !important;
  font-weight: 400 !important;
  margin-bottom: 16px !important;
}

/* Form labels */
.c-form-1-box label,
.apply-form-container label,
.apply-form-container-v2 label {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--revamp-text-secondary) !important;
  margin-bottom: 4px !important;
}

.c-form-1-box .required:after {
  color: #ef4444 !important;
}

/* Form inputs in sidebar */
.c-form-1-box .form-control,
.c-form-1-box .custom-input {
  height: 40px !important;
  border: 1px solid var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-sm) !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  background: var(--revamp-bg-secondary) !important;
  transition: all 0.15s !important;
  color: var(--revamp-text-primary) !important;
  box-shadow: none !important;
  font-weight: 400 !important;
}

.c-form-1-box .form-control:focus,
.c-form-1-box .custom-input:focus {
  border-color: var(--revamp-border-medium) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05) !important;
}

/* Submit button */
.c-form-1-box button.btn,
.c-form-1-box .btn-theme {
  width: 100% !important;
  padding: 12px !important;
  border-radius: var(--revamp-radius-md) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  transition: all 0.15s !important;
}

.c-form-1-box button.btn:hover,
.c-form-1-box .btn-theme:hover {
  transform: translateY(-1px);
  box-shadow: var(--revamp-shadow-md) !important;
}


/* ============================================
   BUTTON CHOICES (displayAs="buttons")
   ============================================ */
.form-group[displayas="buttons"] .form-check-label {
  border-radius: var(--revamp-radius-sm) !important;
  font-size: 13px !important;
  padding: 9px 16px !important;
  transition: all 0.12s !important;
  border-color: var(--revamp-border-light) !important;
  color: var(--revamp-text-secondary) !important;
  background: var(--revamp-bg-tertiary) !important;
}

.form-group[displayas="buttons"] .form-check-label:hover {
  border-color: var(--revamp-border-medium) !important;
  background: var(--revamp-bg-secondary) !important;
}

.form-group[displayas="buttons"] .form-check-input:checked + .form-check-label {
  background: var(--brand-color, #111827) !important;
  color: var(--brand-text-color, #fff) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}


/* ============================================
   V2 BANNER / NAVBAR (LP view)
   ============================================ */
#v2BannerContainer {
  height: var(--revamp-nav-height) !important;
  min-height: var(--revamp-nav-height) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 32px !important;
  background: #ffffff;
  border-bottom: 1px solid var(--revamp-border-light);
}

.v2NavbarLogo {
  height: 34px !important;
  width: auto !important;
  object-fit: contain;
}


/* ============================================
   CALL BUTTON REVAMP
   ============================================ */
.callBtn {
  border-radius: var(--revamp-radius-md) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  transition: all 0.15s;
}

.callBtn:hover {
  transform: translateY(-1px);
  box-shadow: var(--revamp-shadow-md);
}


/* ============================================
   DISCLOSURE / FINE PRINT
   ============================================ */
.discInfo {
  font-size: 10px !important;
  line-height: 1.4 !important;
  color: var(--revamp-text-tertiary) !important;
}


/* ============================================
   THANK YOU BUBBLE
   ============================================ */
.thank-you-bubble {
  border: 1px solid var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-lg) !important;
  box-shadow: var(--revamp-shadow-md) !important;
  padding: 30px 20px !important;
}


/* ============================================
   SCROLLBAR STYLING
   ============================================ */
/* Scrollbars — hidden by default, visible on hover/scroll */
#jobOuterContainer,
#details-container,
#desktopJobDetailsContainer,
.customScroll {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

#jobOuterContainer:hover,
#details-container:hover,
#desktopJobDetailsContainer:hover,
.customScroll:hover {
  scrollbar-color: #d1d5db transparent;
}

#jobOuterContainer::-webkit-scrollbar,
#details-container::-webkit-scrollbar,
#desktopJobDetailsContainer::-webkit-scrollbar,
.customScroll::-webkit-scrollbar {
  width: 6px;
}

#jobOuterContainer::-webkit-scrollbar-track,
#details-container::-webkit-scrollbar-track,
#desktopJobDetailsContainer::-webkit-scrollbar-track,
.customScroll::-webkit-scrollbar-track {
  background: transparent;
}

#jobOuterContainer::-webkit-scrollbar-thumb,
#details-container::-webkit-scrollbar-thumb,
#desktopJobDetailsContainer::-webkit-scrollbar-thumb,
.customScroll::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 10px;
}

#jobOuterContainer:hover::-webkit-scrollbar-thumb,
#details-container:hover::-webkit-scrollbar-thumb,
#desktopJobDetailsContainer:hover::-webkit-scrollbar-thumb,
.customScroll:hover::-webkit-scrollbar-thumb {
  background: #d1d5db;
}

#jobOuterContainer::-webkit-scrollbar-thumb:hover,
#details-container::-webkit-scrollbar-thumb:hover,
#desktopJobDetailsContainer::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}


/* ============================================
   SKELETON LOADER — center pane placeholder
   ============================================ */
@keyframes cwShimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.cw-skeleton {
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--revamp-bg-primary);
}

.cw-skel-banner {
  height: 200px;
  background: linear-gradient(90deg, #e5e7eb 25%, #f1f3f5 50%, #e5e7eb 75%);
  background-size: 800px 200px;
  animation: cwShimmer 1.5s ease-in-out infinite;
}

.cw-skel-body {
  padding: 20px;
}

.cw-skel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.cw-skel-circle {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(90deg, #e5e7eb 25%, #f1f3f5 50%, #e5e7eb 75%);
  background-size: 800px 56px;
  animation: cwShimmer 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

.cw-skel-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cw-skel-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e5e7eb 25%, #f1f3f5 50%, #e5e7eb 75%);
  background-size: 800px 12px;
  animation: cwShimmer 1.5s ease-in-out infinite;
}

.cw-skel-line.w100 { width: 100%; }
.cw-skel-line.w80 { width: 80%; }
.cw-skel-line.w70 { width: 70%; }
.cw-skel-line.w60 { width: 60%; }
.cw-skel-line.w40 { width: 40%; }
.cw-skel-line.w30 { width: 30%; }

.cw-skel-btns {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.cw-skel-btn {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(90deg, #e5e7eb 25%, #f1f3f5 50%, #e5e7eb 75%);
  background-size: 800px 44px;
  animation: cwShimmer 1.5s ease-in-out infinite;
}

.cw-skel-btn.short {
  flex: 0 0 100px;
}

.cw-skel-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.cw-skel-hl {
  height: 60px;
  border-radius: 12px;
  background: linear-gradient(90deg, #e5e7eb 25%, #f1f3f5 50%, #e5e7eb 75%);
  background-size: 800px 60px;
  animation: cwShimmer 1.5s ease-in-out infinite;
}

.cw-skel-card {
  background: var(--revamp-bg-secondary);
  border: 1px solid var(--revamp-border-light);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Hide skeleton when content loads */
#desktopJobDetailsContainer:not(.d-none) ~ #cw-skeleton,
#desktopJobDetailsContainer.d-md-block ~ #cw-skeleton {
  display: none;
}

.cw-skeleton.d-none {
  display: none !important;
}


/* ============================================
   FULL-PAGE SHIMMER — replaces the old spinner loaderHolder
   Mimics the three-pane CareerWeb layout
   ============================================ */
.cw-page-shimmer {
  background: #fff !important;
  backdrop-filter: none !important;
}

/* When loaderHolder is shown (display:flex from CSS), use these alignment rules.
   Do NOT use display:flex !important — it prevents jQuery .hide() from working. */
.cw-page-shimmer[style*="display: flex"],
.cw-page-shimmer[style*="display:flex"] {
  align-items: stretch;
  justify-content: stretch;
}

.cw-page-skel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cw-page-skel-nav {
  height: 60px;
  border-bottom: 1px solid #f1f3f5;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
}

.cw-page-skel-body {
  flex: 1;
  display: grid;
  grid-template-columns: 310px 1fr 350px;
}

.cw-page-skel-left {
  padding: 14px 16px;
  border-right: 1px solid #f1f3f5;
}

.cw-page-skel-card {
  padding: 14px 0;
  border-bottom: 1px solid #f1f3f5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cw-page-skel-card::before {
  content: '';
  display: block;
  width: 65%;
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f1f3f5 25%, #f8f9fa 50%, #f1f3f5 75%);
  background-size: 600px 14px;
  animation: cwShimmer 1.5s ease-in-out infinite;
}

.cw-page-skel-card::after {
  content: '';
  display: block;
  width: 90%;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f1f3f5 25%, #f8f9fa 50%, #f1f3f5 75%);
  background-size: 600px 10px;
  animation: cwShimmer 1.5s ease-in-out infinite;
}

.cw-page-skel-center {
  background: var(--revamp-bg-primary);
}

.cw-page-skel-right {
  border-left: 1px solid #f1f3f5;
}

/* Generic shimmer pill used in all skeletons */
.cw-skel-pill {
  background: linear-gradient(90deg, #f1f3f5 25%, #f8f9fa 50%, #f1f3f5 75%) !important;
  background-size: 600px 100% !important;
  animation: cwShimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}


/* ============================================
   JOBS LIST SHIMMER — replaces spinner in left pane
   ============================================ */
.cw-jobs-shimmer {
  background: #fff !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

.cw-jobs-skel-list {
  width: 100%;
}

.cw-jobs-skel-card {
  padding: 16px;
  border-bottom: 1px solid #f1f3f5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cw-jobs-skel-card::before {
  content: '';
  width: 70%;
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f1f3f5 25%, #f8f9fa 50%, #f1f3f5 75%);
  background-size: 600px 14px;
  animation: cwShimmer 1.5s ease-in-out infinite;
}

.cw-jobs-skel-card::after {
  content: '';
  width: 95%;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f1f3f5 25%, #f8f9fa 50%, #f1f3f5 75%);
  background-size: 600px 10px;
  animation: cwShimmer 1.5s ease-in-out infinite;
}


/* ============================================
   DETAIL PANE SHIMMER — replaces spinner when clicking a job
   ============================================ */
.cw-detail-shimmer {
  background: var(--revamp-bg-primary) !important;
  backdrop-filter: none !important;
}

.cw-detail-skel {
  width: 100%;
  height: 100%;
}


/* ============================================
   STANDALONE PAGE SHIMMER — Job View & Landing Page
   ============================================ */
.cw-standalone-shimmer {
  background: #fff !important;
  backdrop-filter: none !important;
}

.cw-standalone-skel {
  width: 100%;
  height: 100%;
}


/* ============================================
   JOB VIEW STANDALONE PAGE (jv- prefix)
   Matches "Job Landing" tab from design prototype
   ============================================ */

/* Navbar */
.jv-navbar {
  height: 60px;
  background: #fff;
  border-bottom: 1px solid var(--revamp-border-light);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.jv-navbar-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
}

.jv-navbar-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--revamp-font-body);
  background: none;
  color: var(--revamp-text-secondary);
  border: 1px solid var(--revamp-border-light);
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: background 0.15s;
}

.jv-navbar-btn:hover {
  background: var(--revamp-bg-tertiary);
  text-decoration: none;
  color: var(--revamp-text-primary);
}

/* Hero Banner */
.jv-hero {
  position: relative;
  height: 260px;
  overflow: hidden;
}

.jv-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jv-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.15) 100%);
}

.jv-hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 40px;
  display: flex;
  align-items: flex-end;
  gap: 20px;
}

.jv-hero-logo-wrap {
  width: 76px;
  height: 76px;
  border-radius: 16px;
  background: #fff;
  padding: 7px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.jv-hero-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: none !important;
}

.jv-hero-text {
  color: #fff;
}

.jv-hero-title {
  font-family: var(--revamp-font-heading);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.3px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
  margin: 0;
}

.jv-hero-loc {
  font-family: var(--revamp-font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  margin-top: 6px;
  letter-spacing: 0.1px;
}

/* Body wrapper */
.jv-body {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 40px;
}

/* Highlights Grid */
.jv-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.jv-hl-card {
  background: #fff;
  border: 1px solid var(--revamp-border-light);
  border-radius: 12px;
  padding: 12px 14px;
}

.jv-hl-label {
  font-family: var(--revamp-font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--revamp-text-tertiary);
  margin-bottom: 3px;
}

.jv-hl-value {
  font-family: var(--revamp-font-heading);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--revamp-text-primary);
  line-height: 1.3;
}

.jv-hl-green { color: #059669 !important; }

/* Two-column grid — Content + Sidebar */
.jv-grid {
  display: grid;
  grid-template-columns: 1fr 370px;
  gap: 28px;
  align-items: start;
}

/* Job Description Card */
.jv-desc-card {
  background: #fff;
  border: 1px solid var(--revamp-border-light);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.jv-desc-card h2,
.jv-desc-card h3,
.jv-desc-card h4,
.jv-desc-card h5,
.jv-desc-content h2,
.jv-desc-content h3,
.jv-desc-content h4,
.jv-desc-content h5 {
  font-family: var(--revamp-font-heading);
  font-weight: 700;
  color: var(--revamp-text-primary);
  letter-spacing: -0.2px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.jv-desc-card h2,
.jv-desc-content h2 { font-size: 19px; }

.jv-desc-card h3,
.jv-desc-content h3 { font-size: 17px; margin-bottom: 14px; }

.jv-desc-card h4,
.jv-desc-content h4 { font-size: 15.5px; }

.jv-desc-card h5,
.jv-desc-content h5 { font-size: 14.5px; }

.jv-desc-card p {
  font-family: var(--revamp-font-body);
  font-size: 14px;
  color: var(--revamp-text-secondary);
  line-height: 1.7;
  margin-bottom: 12px;
}

.jv-desc-content strong,
.jv-desc-content b {
  font-family: var(--revamp-font-heading);
  display: block;
  margin-top: 16px;
  margin-bottom: 6px;
  font-size: 15px;
  color: var(--revamp-text-primary);
  font-weight: 700;
}

.jv-desc-content p {
  font-family: var(--revamp-font-body);
  font-size: 14px;
  color: var(--revamp-text-secondary);
  line-height: 1.75;
}

.jv-desc-content ul, .jv-desc-content ol { padding-left: 22px; margin-bottom: 14px; }
.jv-desc-content li { font-family: var(--revamp-font-body); font-size: 14px; color: var(--revamp-text-secondary); line-height: 1.75; margin-bottom: 5px; }

.jv-desc-divider {
  height: 1px;
  background: var(--revamp-border-light);
  margin: 16px 0;
}

/* Sidebar */
.jv-sidebar {
  position: sticky;
  top: 80px;
}

/* Chat CTA Card */
.jv-chat-cta {
  border-radius: 16px;
  padding: 22px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border: none;
  margin-bottom: 14px;
}

.jv-chat-cta-persona {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

.jv-chat-cta-persona img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.35);
  object-fit: cover;
}

.jv-chat-cta-persona span {
  font-family: var(--revamp-font-heading);
  font-weight: 700;
  font-size: 15px;
}

.jv-chat-cta p {
  font-family: var(--revamp-font-body);
  font-size: 13.5px;
  opacity: 0.88;
  margin: 8px 0 14px;
  line-height: 1.5;
}

.jv-chat-cta-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  font-family: var(--revamp-font-heading);
  font-size: 14px;
  font-weight: 700;
  background: rgba(255,255,255,0.95);
  color: var(--revamp-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}

.jv-chat-cta-btn:hover {
  background: #fff;
  transform: translateY(-1px);
}

/* Quick Apply Card */
.jv-apply-card {
  background: #fff;
  border: 1px solid var(--revamp-border-light);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.jv-apply-title {
  font-family: var(--revamp-font-heading);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 3px;
  color: var(--revamp-text-primary);
  letter-spacing: -0.2px;
}

.jv-apply-sub {
  font-family: var(--revamp-font-body);
  font-size: 13px;
  color: var(--revamp-text-tertiary);
  margin-bottom: 18px;
  line-height: 1.4;
}

.jv-phone-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--revamp-border-light);
  font-family: var(--revamp-font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--revamp-text-secondary);
}

/* Form inputs inside jv-apply-card */
.jv-apply-card .form-control:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]),
.jv-apply-card .form-control-lg:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]) {
  height: 44px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-family: var(--revamp-font-body) !important;
  font-size: 13.5px !important;
  background: #fff !important;
  color: #111827 !important;
  box-shadow: none !important;
}

.jv-apply-card .form-control:not(.noBorder):focus {
  border-color: #9ca3af !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05) !important;
}

.jv-apply-card label:not(.form-check-label) {
  font-family: var(--revamp-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #4b5563 !important;
  margin-bottom: 5px !important;
  letter-spacing: 0.1px !important;
}

.jv-apply-card .form-group {
  margin-bottom: 14px !important;
}

/* Radio/choice inside jv-apply — clean pills */
.jv-apply-card .holdSingleChoice,
.jv-apply-card .holdMuiltpleChoice,
.jv-apply-card .noBorder {
  border: 0 none !important;
  background: transparent !important;
  height: auto !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.jv-apply-card .holdSingleChoice .form-check-input,
.jv-apply-card .holdMuiltpleChoice .form-check-input {
  display: none !important;
}

.jv-apply-card .holdSingleChoice .form-check-label,
.jv-apply-card .holdMuiltpleChoice .form-check-label {
  padding: 9px 20px !important;
  border: none !important;
  border-radius: 8px !important;
  background: #f1f3f5 !important;
  color: #4b5563 !important;
  cursor: pointer !important;
  font-family: var(--revamp-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: all 0.15s !important;
  margin: 0 !important;
}

.jv-apply-card .holdSingleChoice .form-check-input:checked + .form-check-label,
.jv-apply-card .holdMuiltpleChoice .form-check-input:checked + .form-check-label {
  background: var(--brand-color, #111827) !important;
  color: var(--brand-text-color, #fff) !important;
  font-weight: 700 !important;
}

.jv-apply-card .holdSingleChoice .form-check {
  margin: 0 !important;
  padding: 0 !important;
}

/* File upload */
.jv-apply-card input[type="file"] {
  height: auto !important;
  padding: 10px 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #f9fafb !important;
  font-size: 13px !important;
  width: 100% !important;
}

/* Submit button */
.jv-apply-card .btn-apply,
.jv-apply-card .btn-theme.btn-t-primary {
  width: 100% !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  font-family: var(--revamp-font-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: none !important;
  cursor: pointer !important;
  margin-top: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Disclosure */
.jv-apply-card .discInfo {
  font-family: var(--revamp-font-body) !important;
  font-size: 10.5px !important;
  line-height: 1.45 !important;
  color: #9ca3af !important;
  margin-top: 14px !important;
}

/* ============================================
   MOBILE FIXED BOTTOM CTA BAR
   Shows "Call" + "Chat" (or "Apply Now") fixed at bottom on mobile
   ============================================ */
.jv-mobile-cta {
  display: none; /* hidden on desktop */
}

/* Mobile responsive */
@media (max-width: 767.98px) {
  .jv-hero { height: 180px; }
  .jv-hero-content { padding: 16px 20px; gap: 14px; }
  .jv-hero-logo-wrap { width: 52px; height: 52px; border-radius: 12px; }
  .jv-hero-title { font-size: 20px; letter-spacing: -0.2px; line-height: 1.25; }
  .jv-hero-loc { font-size: 13px; margin-top: 4px; }
  .jv-body { padding: 16px; padding-bottom: 80px; /* room for fixed CTA */ }
  .jv-highlights { grid-template-columns: 1fr 1fr; gap: 8px; }
  .jv-hl-card { padding: 10px 12px; }
  .jv-hl-label { font-size: 10px; }
  .jv-hl-value { font-size: 13.5px; }
  .jv-grid { grid-template-columns: 1fr; gap: 16px; }
  .jv-sidebar { position: static; }
  .jv-navbar { padding: 0 16px; }
  .jv-navbar-logo { height: 30px; }
  .jv-navbar-btn { font-size: 12.5px; padding: 7px 14px; }
  .jv-desc-card { padding: 20px 18px; }
  .jv-desc-card h2, .jv-desc-content h2 { font-size: 17px; }
  .jv-desc-card h3, .jv-desc-content h3 { font-size: 15.5px; }
  .jv-desc-card h4, .jv-desc-content h4 { font-size: 14.5px; }
  .jv-desc-card p,
  .jv-desc-content p { font-size: 13.5px; line-height: 1.7; }
  .jv-desc-content li { font-size: 13.5px; }
  .jv-desc-content strong,
  .jv-desc-content b { font-size: 14px; }
  .jv-apply-title { font-size: 16px; }
  .jv-apply-sub { font-size: 12.5px; }
  .jv-chat-cta p { font-size: 13px; }

  /* Hide ALL floating buttons on mobile — the fixed CTA bar handles this. */
  .floating-chat-bubble,
  .call-to-apply-container,
  .floating-call-btn,
  #callToApplyEl,
  .phone-widget,
  [class*="call-float"],
  [class*="floating-call"],
  [id*="callToApply"] {
    display: none !important;
  }

  /* Push the chat widget's floating button off screen on mobile.
     The widget renders its own bubble via Shadow DOM which we can't
     target directly, so we make the container non-visible but functional. */
  #chat-widget-container {
    position: fixed !important;
    bottom: -200px !important;
    right: -200px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* When chat is actually open (widget expands), restore visibility */
  #chat-widget-container:has(chat-widget[open]),
  #chat-widget-container.chat-open {
    position: fixed !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 10000 !important;
  }

  /* Show the bottom CTA bar on mobile */
  .jv-mobile-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    background: #fff;
    border-top: 1px solid var(--revamp-border-light);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  }

  .jv-mcta-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--revamp-font-heading);
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    border: none;
  }

  .jv-mcta-call {
    background: #fff;
    color: var(--revamp-text-primary);
    border: 1px solid var(--revamp-border-medium) !important;
  }

  .jv-mcta-call:hover {
    background: var(--revamp-bg-tertiary);
    text-decoration: none;
    color: var(--revamp-text-primary);
  }

  .jv-mcta-chat {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  .jv-mcta-chat:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
}

/* Mobile: stack vertically */
@media (max-width: 767.98px) {
  .cw-standalone-skel > div:last-child {
    flex-direction: column !important;
  }
  .cw-standalone-skel > div:last-child > div:last-child {
    width: 100% !important;
  }
  .cw-page-skel-body {
    grid-template-columns: 1fr !important;
  }
  .cw-page-skel-right {
    display: none;
  }
}


/* ============================================
   FORM SKELETON — inside Quick Apply card
   Mimics 2-col form fields, gets replaced by JS innerHTML
   ============================================ */
.cw-form-skeleton {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0;
}

.cw-fskel-row {
  display: flex;
  gap: 12px;
}

.cw-fskel-block {
  height: 58px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f1f3f5 25%, #f8f9fa 50%, #f1f3f5 75%);
  background-size: 600px 58px;
  animation: cwShimmer 1.5s ease-in-out infinite;
}

.cw-fskel-block.half {
  flex: 1;
}

.cw-fskel-block.full {
  width: 100%;
}

.cw-fskel-block.short {
  height: 42px;
  width: 50%;
}

.cw-fskel-btn {
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(90deg, #f1f3f5 25%, #f8f9fa 50%, #f1f3f5 75%);
  background-size: 600px 48px;
  animation: cwShimmer 1.5s ease-in-out infinite;
  margin-top: 4px;
}


/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes revampFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.revamp-fade-up {
  animation: revampFadeUp 0.25s ease-out;
}


/* ============================================
   MOBILE RESPONSIVE - CAREERWEB
   ============================================ */
/* ============================================
   CAREERWEB MOBILE TAB BAR + BOTTOM CTA
   ============================================ */

/* Nav Filter Button (matches mock nav-btn style) */
.cw-nav-filter-btn {
  font-family: var(--revamp-font-body) !important;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  background: none;
  color: var(--revamp-text-secondary);
  border: 1px solid var(--revamp-border-light);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.cw-nav-filter-btn:hover {
  background: var(--revamp-bg-tertiary);
}
.cw-nav-filter-btn svg {
  flex-shrink: 0;
}

.cw-mobile-tabs {
  display: none; /* hidden on desktop */
}

.cw-mobile-cta {
  display: none; /* hidden on desktop */
}

@media (max-width: 991.98px) {
  #careerwebContainer {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }

  #jobOuterContainer {
    width: 100% !important;
    border-right: none !important;
  }

  #details-container {
    width: 100% !important;
  }

  #chat-container {
    width: 100% !important;
    border-left: none !important;
  }

  .navbar-brand {
    width: auto !important;
  }

  .navbar-search {
    max-width: none !important;
    flex: 1 !important;
  }
}

@media (max-width: 767.98px) {
  /* Mobile navbar — two rows: [Logo ... Filters] then [Search] */
  #topMainNavbar {
    height: auto !important;
    padding: 10px 14px 8px !important;
  }

  .navbar-content {
    flex-wrap: wrap !important;
    gap: 0 !important;
  }

  .navbar-brand {
    order: 1;
    margin-right: auto !important;
  }

  .navbarLogo {
    max-height: 30px !important;
    height: 30px !important;
  }

  .cw-nav-actions {
    order: 2;
  }

  .navbar-search {
    order: 3;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 0 !important;
  }

  .search-container {
    width: 100% !important;
    height: 36px !important;
  }

  .search-container input {
    font-size: 14px !important;
  }

  .cw-nav-filter-btn {
    padding: 6px 12px;
    font-size: 12px;
  }

  /* Mobile job cards */
  .card-container {
    padding: 12px 14px !important;
  }

  .job-card-logo-container {
    width: 36px !important;
    height: 36px;
    min-width: 36px;
  }

  .card-title {
    font-size: 14px !important;
  }

  .card-text {
    font-size: 13px !important;
  }

  /* Mobile location header */
  .user-location-container {
    padding: 10px 14px !important;
  }

  /* ============================================
     MOBILE DETAILS PANE — cw- classes on mobile
     Match the jv- standalone page design exactly
     ============================================ */

  /* Hero banner */
  .cw-banner-wrapper {
    height: 180px !important;
  }

  .cw-banner-img {
    height: 180px !important;
  }

  /* Logo on hero */
  .cw-hero-logo-wrap {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    bottom: 14px !important;
    left: 16px !important;
    padding: 4px;
    border-radius: 12px;
  }

  /* Title on hero */
  .cw-hero-text {
    bottom: 16px !important;
    left: 78px !important;
    right: 16px !important;
  }

  .cw-hero-title {
    font-size: 18px !important;
    line-height: 1.2;
  }

  .cw-hero-loc {
    font-size: 12px;
  }

  /* Content area below hero */
  .cw-content-area {
    padding: 16px !important;
  }

  /* Action buttons — stack vertically like jv- design */
  .cw-actions {
    flex-direction: column !important;
    gap: 8px;
  }

  .cw-btn-primary,
  .cw-btn-outline {
    width: 100%;
    padding: 14px 16px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
  }

  /* Highlights */
  .cw-highlights {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Cards */
  .cw-desc-card {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  .cw-apply-card {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  /* Detail container scrolls naturally */
  #desktopJobDetailsContainer {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 70px !important; /* room for bottom CTA */
  }

  #details-container {
    height: auto !important;
    overflow: visible !important;
  }

  /* LP mobile */
  #v2BackgroundImgContainer {
    padding: 20px 16px 80px !important;
  }

  .v2-job-desc h1,
  .v2-job-desc .sectionHeadline {
    font-size: 22px !important;
  }

  .v2-job-desc .section {
    padding: 16px !important;
  }

  #v2BannerContainer {
    padding: 0 16px !important;
  }

  .v2NavbarLogo {
    height: 28px !important;
  }

  /* Mobile form card */
  .c-form-1-box {
    border-radius: var(--revamp-radius-md) !important;
    padding: 16px !important;
    box-shadow: var(--revamp-shadow-md) !important;
  }

  /* Job Application View mobile */
  .apply-form-container {
    width: 100% !important;
    position: static !important;
    max-height: none !important;
  }

  .job-desc-container {
    width: 100% !important;
  }

  /* LP mobile - stack grid to single column */
  .job-container {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    padding: 16px !important;
    gap: 16px !important;
  }

  .v2-job-container {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
  }

  /* Highlights on mobile */
  .revamp-highlights {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .revamp-highlights .revamp-hl-card {
    padding: 10px 12px;
  }

  .revamp-highlights .revamp-hl-value {
    font-size: 13px !important;
  }

  /* Floating chat on mobile - hide (use bottom CTA instead) */
  .floating-chat-bubble {
    display: none !important;
  }

  /* LP CTA buttons mobile stack */
  .lp-cta-row-revamp {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* LP grid - single column on mobile */
  .lp-grid-revamp {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .lp-fullbg-revamp {
    padding: 20px 16px 80px !important;
  }

  /* LP sidebar unstick on mobile */
  .lp-grid-revamp > div:last-child {
    position: static !important;
  }

  /* Job Landing grid - single column on mobile */
  .jl-grid-revamp {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 16px !important;
  }

  /* ============================================
     CAREERWEB MOBILE — Tab bar + single pane + bottom CTA
     ============================================ */

  /* Show mobile tab bar — flush against navbar */
  .cw-mobile-tabs {
    display: flex !important;
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--revamp-border-light);
    margin-top: 0 !important;
    padding: 0 !important;
  }

  /* Remove navbar bottom margin/padding on mobile */
  #topMainNavbar {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  #topMainNavbar .navbar {
    margin-bottom: 0 !important;
    border-bottom: none !important;
  }

  .cw-mtab {
    flex: 1;
    padding: 10px 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--revamp-font-body);
    color: var(--revamp-text-tertiary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
  }

  .cw-mtab.active {
    color: var(--brand-color, var(--revamp-text-primary));
    font-weight: 600;
    border-bottom-color: var(--brand-color, #111827);
  }

  /* Compact location header on mobile */
  .user-location-container {
    padding: 10px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .user-location-container .job-result-text {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
  }

  .user-location-container .location-edit-row {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  .user-location-container .location-icon {
    font-size: 14px;
  }

  /* Override three-pane grid for mobile — stack vertically */
  #careerwebContainer {
    display: block !important;
    grid-template-columns: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Each pane takes full width on mobile */
  #jobOuterContainer,
  #details-container,
  #chat-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border: none !important;
    overflow: visible !important;
  }

  /* Default: only jobs pane visible */
  #details-container {
    display: none !important;
  }

  #chat-container {
    display: none !important;
    min-height: 70vh;
  }

  /* When JS shows a pane via inline display:block */
  #details-container[style*="display: block"],
  #chat-container[style*="display: block"] {
    display: block !important;
  }

  /* Job list scrolls naturally on mobile */
  #jobContainer {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Full viewport for mobile */
  .full-viewport {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #desktopJobsOuterContainer {
    height: auto !important;
    overflow: visible !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Remove the mt-2 from the careerwebContainer parent */
  .flex.col-md-12.mt-2 {
    margin-top: 0 !important;
  }

  /* Show mobile bottom CTA */
  .cw-mobile-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    display: flex !important;
    gap: 8px;
    padding: 10px 16px;
    background: #fff;
    border-top: 1px solid var(--revamp-border-light);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  }

  .cw-mcta-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--revamp-font-heading);
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    border: none;
  }

  .cw-mcta-call {
    background: #fff;
    color: var(--revamp-text-primary);
    border: 1px solid var(--revamp-border-medium) !important;
  }

  .cw-mcta-chat {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  /* Ensure CTA button text is ALWAYS visible — use contrasting color from inline style */
  .cw-mcta-btn[style*="color"] {
    color: inherit;
  }

  .cw-mcta-btn span {
    font-size: 14px;
    font-weight: 700;
  }

  /* Add bottom padding to body for fixed CTA */
  #careerwebContainer {
    padding-bottom: 70px !important;
  }

  /* Hide floating buttons on CW mobile */
  .floating-chat-bubble,
  .call-to-apply-container,
  [class*="floating-call"] {
    display: none !important;
  }

  /* Chat container on mobile — widget fills the tab area */
  #chat-container {
    position: relative !important;
    height: calc(100vh - 120px) !important;
    min-height: 500px;
    width: 100% !important;
  }

  #chat-container chat-widget {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    border-left: none !important;
    box-shadow: none !important;
    top: auto !important;
    right: auto !important;
  }

  /* Bottom CTA bar text */
  .cw-mobile-cta .cw-mcta-btn {
    font-size: 14px !important;
    font-weight: 700 !important;
  }

  /* Chat button — force the inline color to be used, not inherited */
  .cw-mobile-cta .cw-mcta-chat[style] {
    color: var(--brand-text-color, #fff) !important;
  }

  .cw-mobile-cta .cw-mcta-chat svg {
    stroke: currentColor;
  }
}


/* ============================================
   MOBILE BOTTOM CTA BAR (for LP & Job Landing)
   ============================================ */
.mobile-bottom-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: none;
  gap: 8px;
  padding: 10px 16px;
  background: var(--revamp-bg-secondary);
  border-top: 1px solid var(--revamp-border-light);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}

@media (max-width: 767.98px) {
  .mobile-bottom-cta-bar {
    display: flex;
  }
}

.mobile-bottom-cta-bar .mcta-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  border-radius: var(--revamp-radius-md);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
}

.mobile-bottom-cta-bar .mcta-call {
  background: var(--revamp-bg-secondary);
  color: var(--revamp-text-primary);
  border: 1px solid var(--revamp-border-medium);
}

.mobile-bottom-cta-bar .mcta-chat {
  color: #fff;
}


/* ============================================
   JOB APPLICATION VIEW (jobApplicationView.php)
   ============================================ */

/* Desktop: two-column layout */
@media (min-width: 768px) {
  .job-container {
    display: grid !important;
    grid-template-columns: 1fr 370px !important;
    gap: 28px !important;
    align-items: start !important;
    max-width: 1080px;
    margin: 0 auto !important;
    padding: 28px 40px !important;
  }

  .job-desc-container {
    width: 100% !important;
    order: -1;
  }

  .apply-form-container {
    width: 100% !important;
    position: sticky !important;
    top: 80px !important;
  }
}

/* Job description card */
.job-desc-container .job-full-details-container,
.job-desc-container .job-details-container {
  background: var(--revamp-bg-secondary) !important;
  border: 1px solid var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-lg) !important;
  padding: 20px !important;
  margin-bottom: 20px;
}

.job-desc-container h3 {
  font-family: var(--revamp-font-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
  color: var(--revamp-text-primary);
}

.job-desc-container p {
  font-size: 13.5px;
  color: var(--revamp-text-secondary);
  line-height: 1.7;
}

.job-desc-container li {
  font-size: 13.5px;
  color: var(--revamp-text-secondary);
  line-height: 1.7;
}


/* ============================================
   LANDING PAGE (landingPage.php) - LP specific
   ============================================ */

/* LP fullscreen background */
#v2BackgroundImgContainer::before {
  background: rgba(0,0,0,0.6) !important;
}

/* LP Apply Form Card */
.apply-form-container-v2 {
  position: sticky !important;
  top: calc(var(--revamp-nav-height) + 20px) !important;
}

/* Chat CTA card */
.chat-cta-card {
  border-radius: var(--revamp-radius-lg);
  padding: 22px;
  text-align: center;
  box-shadow: var(--revamp-shadow-md);
  border: none;
  margin-bottom: 16px;
}

.chat-cta-card h3 {
  font-family: var(--revamp-font-heading);
  font-size: 17px;
  font-weight: 800;
}

.chat-cta-card p {
  font-size: 13px;
  opacity: 0.85;
  margin: 8px 0 14px;
}

.chat-cta-card .btn-chat-cta {
  width: 100%;
  padding: 12px;
  border-radius: var(--revamp-radius-md);
  font-size: 14px;
  font-weight: 700;
  background: rgba(255,255,255,0.95);
  color: var(--revamp-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s;
  border: none;
  cursor: pointer;
}

.chat-cta-card .btn-chat-cta:hover {
  background: #fff;
  transform: translateY(-1px);
}


/* ============================================
   FLOATING CHAT BUBBLE
   ============================================ */
.floating-chat-bubble {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 10px;
  background: var(--revamp-bg-secondary);
  border-radius: var(--revamp-radius-full);
  box-shadow: var(--revamp-shadow-xl);
  border: 1.5px solid var(--brand-color, var(--revamp-border-light));
  cursor: pointer;
  transition: all 0.2s;
}

.floating-chat-bubble:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 70px rgba(0,0,0,0.2);
}

.floating-chat-bubble img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.floating-chat-bubble span {
  font-weight: 700;
  font-size: 13px;
  color: var(--revamp-text-primary);
}

.floating-chat-bubble .pulse {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #fff;
}


/* ============================================
   DROPDOWN MENU GLOBAL OVERRIDES
   ============================================ */
.dropdown-menu {
  border-radius: var(--revamp-radius-md) !important;
  border: 1px solid var(--revamp-border-light) !important;
  box-shadow: var(--revamp-shadow-md) !important;
  padding: 8px !important;
}

.dropdown-item {
  border-radius: var(--revamp-radius-sm);
  font-size: 13px;
  padding: 8px 12px;
  transition: background 0.1s;
}

.dropdown-item:hover {
  background: var(--revamp-bg-tertiary);
}


/* ============================================
   INPUT ELEMENT / CHOICE BUTTON OVERRIDES
   ============================================ */
.input-element a {
  border-radius: var(--revamp-radius-sm) !important;
  font-size: 12px !important;
  padding: 6px 14px !important;
  background: var(--revamp-bg-tertiary) !important;
  color: var(--revamp-text-secondary) !important;
  border: 1px solid var(--revamp-border-light) !important;
  transition: all 0.12s !important;
  line-height: 1.5 !important;
  height: auto !important;
}

.input-element a:hover {
  border-color: var(--revamp-border-medium) !important;
}

.input-element a.value-is-chosen {
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}


/* ============================================
   FULL VIEWPORT OVERRIDE
   ============================================ */
.full-viewport {
  height: calc(100dvh - var(--revamp-nav-height)) !important;
  max-height: calc(100dvh - var(--revamp-nav-height)) !important;
}

#desktopJobsOuterContainer {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}


/* ============================================
   HIGH-SPECIFICITY FORM OVERRIDES
   These target #customForm directly to override
   Bootstrap form-control-lg and JS-generated inline styles.
   Placed LAST in file for maximum cascade priority.
   ============================================ */

/* All text inputs, selects, textareas inside #customForm
   EXCLUDE: .holdSingleChoice and .holdMuiltpleChoice wrapper divs
   which also have .form-control class but are NOT input fields */
#customForm .form-control:not(.holdSingleChoice):not(.holdMuiltpleChoice):not(.noBorder):not([type="file"]),
#customForm .form-control-lg:not(.holdSingleChoice):not(.holdMuiltpleChoice):not(.noBorder):not([type="file"]),
#customForm input[type="text"],
#customForm input[type="email"],
#customForm input[type="tel"],
#customForm input[type="number"],
#customForm input[type="date"],
#customForm select,
#customForm textarea {
  height: 44px !important;
  border: 1.5px solid #d1d5db !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-size: 13.5px !important;
  font-family: var(--revamp-font-body) !important;
  background-color: #fff !important;
  color: #111827 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  line-height: 1.5 !important;
}

/* Explicitly strip ALL styling from choice/radio wrappers.
   These divs have class="form-control noBorder holdSingleChoice"
   and must look like transparent flex containers, not input fields. */
#customForm .holdSingleChoice.form-control,
#customForm .holdMuiltpleChoice.form-control,
#customForm .noBorder.form-control,
#customForm .noBorder,
.cw-apply-card .holdSingleChoice,
.cw-apply-card .holdMuiltpleChoice,
.cw-apply-card .noBorder,
.cw-detail-container .holdSingleChoice,
.cw-detail-container .holdMuiltpleChoice,
.cw-detail-container .noBorder,
div.form-control.noBorder,
div.form-control.holdSingleChoice,
div.form-control.holdMuiltpleChoice {
  border: 0 none transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background: none !important;
  background-color: transparent !important;
  height: auto !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* File upload — override input rules with type-specific selector */
#customForm input[type="file"],
#customForm input[type="file"].form-control,
#customForm input[type="file"].form-control-lg,
.cw-apply-card input[type="file"],
.cw-detail-container input[type="file"] {
  height: auto !important;
  padding: 10px 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #f9fafb !important;
  background-color: #f9fafb !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  cursor: pointer !important;
  width: 100% !important;
  line-height: 1.4 !important;
}

#customForm textarea {
  height: auto !important;
  min-height: 80px !important;
  padding: 10px 14px !important;
}

#customForm .form-control:focus,
#customForm .form-control-lg:focus,
#customForm input:focus,
#customForm select:focus,
#customForm textarea:focus {
  border-color: #9ca3af !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06) !important;
  outline: none !important;
}

#customForm .form-control::placeholder,
#customForm input::placeholder {
  color: #9ca3af !important;
  font-weight: 400 !important;
}

/* Form group labels — exclude .form-check-label (styled separately for selection state) */
#customForm .form-group label:not(.form-check-label),
#customForm .form-group .required,
#customForm label:not(.form-check-label) {
  font-family: var(--revamp-font-body) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #4b5563 !important;
  letter-spacing: 0.1px !important;
  margin-bottom: 6px !important;
  display: block !important;
  font-family: var(--revamp-font-body) !important;
}

/* Form group spacing — keep Bootstrap row/col layout intact */
#customForm .form-group {
  margin-bottom: 14px !important;
}

/* ====== RADIO / SINGLE-CHOICE — clean minimal style ====== */
/* No heavy borders — just subtle bg pills */
#customForm .holdSingleChoice,
#customForm .holdMuiltpleChoice {
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  height: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  background: transparent !important;
}

#customForm .holdSingleChoice .form-check,
#customForm .holdMuiltpleChoice .form-check {
  margin: 0 !important;
  padding: 0 !important;
}

#customForm .holdSingleChoice .form-check-input,
#customForm .holdMuiltpleChoice .form-check-input {
  display: none !important;
}

#customForm .holdSingleChoice .form-check-label,
#customForm .holdMuiltpleChoice .form-check-label {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 9px 24px !important;
  border: none !important;
  border-radius: 8px !important;
  background: #f1f3f5 !important;
  color: #4b5563 !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--revamp-font-body) !important;
  transition: all 0.15s ease !important;
  user-select: none;
  min-width: 72px;
  text-align: center;
  margin: 0 !important;
}

#customForm .holdSingleChoice .form-check-label:hover,
#customForm .holdMuiltpleChoice .form-check-label:hover {
  background: #e5e7eb !important;
}

/* Selected state uses brand color (set via JS var brandColor on the page) */
#customForm .holdSingleChoice .form-check-input:checked + .form-check-label,
#customForm .holdMuiltpleChoice .form-check-input:checked + .form-check-label,
#desktopJobDetailsContainer #customForm .holdSingleChoice .form-check-input:checked + .form-check-label,
#desktopJobDetailsContainer #customForm .holdMuiltpleChoice .form-check-input:checked + .form-check-label {
  background: var(--brand-color, #111827) !important;
  color: var(--brand-text-color, #fff) !important;
  font-weight: 600 !important;
  border-color: var(--brand-color, #111827) !important;
}

/* ====== FILE UPLOAD — clean, subtle background, no heavy border ====== */
#customForm input[type="file"],
#customForm input[type="file"].form-control,
#customForm input[type="file"].form-control-lg {
  height: auto !important;
  padding: 10px 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #f8f9fa !important;
  font-size: 13px !important;
  color: #4b5563 !important;
  cursor: pointer !important;
  width: 100% !important;
}

/* File type hint text */
#customForm .form-group span[style*="font-style:italic"] {
  font-size: 11px !important;
  color: #9ca3af !important;
  display: block !important;
  margin-bottom: 4px !important;
}

/* ====== SUBMIT BUTTON "Apply Now" ====== */
#customForm + .col-md-12 .btn-apply,
.btn-apply.btn-theme.btn-t-primary,
.cw-apply-card .btn-apply,
.cw-detail-container .btn-apply,
#desktopJobDetailsContainer .btn-apply,
.btn.actionBtn.btn-apply {
  width: 100% !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: var(--revamp-font-heading) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.btn-apply.btn-theme.btn-t-primary:hover,
.cw-apply-card .btn-apply:hover,
.cw-detail-container .btn-apply:hover,
#desktopJobDetailsContainer .btn-apply:hover,
.btn.actionBtn.btn-apply:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}

/* Continue button (multi-page forms) */
.continue-btn {
  width: 100% !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: var(--revamp-font-heading) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ====== DISCLOSURE TEXT ====== */
#discInfo,
.discInfo {
  font-size: 10px !important;
  line-height: 1.4 !important;
  color: #9ca3af !important;
  margin-top: 14px !important;
  text-align: left !important;
}

#discInfo a,
.discInfo a {
  color: #6b7280 !important;
  text-decoration: underline !important;
}