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

  /* LP V2 type scale — desktop defaults. Mobile values are set in the
     @media (max-width: 767.98px) :root override below the rules block. */
  --lp-text-2xs: 11px;      /* disclosure / micro-meta */
  --lp-text-xs: 13px;       /* form label, caption */
  --lp-text-body-sm: 14px;  /* form subtitle, chat desc, choice pill */
  --lp-text-sm: 16px;       /* body p / li / input */
  --lp-text-md: 18px;       /* subheadline, instructions */
  --lp-text-lg: 20px;       /* form title (Quick Apply) */
  --lp-text-xl: 22px;       /* body section h2, section card title */
  --lp-text-2xl: 28px;      /* free for component use */
  --lp-text-display: clamp(26px, 3vw, 34px);  /* hero lede */

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

@media (max-width: 767.98px) {
  :root {
    --lp-text-2xs: 11px;
    --lp-text-xs: 12px;
    --lp-text-body-sm: 13px;
    --lp-text-sm: 14px;
    --lp-text-md: 16px;
    --lp-text-lg: 18px;
    --lp-text-xl: 20px;
    --lp-text-2xl: 24px;
    --lp-text-display: clamp(22px, 6vw, 28px);
  }
}


/* ============================================
   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-lg) !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 — prominent, scannable */
.card-title {
  font-family: var(--revamp-font-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--revamp-text-primary) !important;
  margin-bottom: 3px !important;
  letter-spacing: -0.15px;
}

/* Location text — subtle, distinct from title */
.card-container .fw-bold[style*="font-size:0.8em"] {
  font-family: var(--revamp-font-body) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 2px !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 pills */
.card-container .d-flex:last-child {
  margin-top: 8px !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 — readable, 3 lines on desktop */
.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.55 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* Legacy job info tags - pill style (fallback when no LLM highlights) */
.job-info-tag {
  font-family: var(--revamp-font-body) !important;
  padding: 5px 12px !important;
  border-radius: var(--revamp-radius-full) !important;
  font-size: 12px !important;
  font-weight: 600 !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;
}

.job-info-tag:last-child {
  font-weight: 700 !important;
  color: var(--revamp-text-primary) !important;
}

/* Job card highlight pills — solid brand bg, contrast text */
.cw-job-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.cw-job-pill {
  font-family: var(--revamp-font-body);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--revamp-radius-full);
  background: var(--brand-color, #059669);
  color: var(--brand-text-color, #fff);
  border: none;
  line-height: 1.3;
}

/* Iconed variant — Lucide SVG sits inline before the label. Tighter
   left padding so the icon hugs the leading edge without doubling
   visual whitespace. SVG inherits currentColor from the pill's
   contrast-text color, so it tracks brand background automatically. */
.cw-job-pill--iconed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-left: 9px;
}
.cw-job-pill--iconed > svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  display: block;
}

.cw-job-pill-more {
  background: var(--revamp-bg-secondary);
  color: var(--revamp-text-primary);
  border: 1.5px solid var(--revamp-border-light);
  font-weight: 600;
  font-size: 11.5px;
}

/* 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;
  height: 100% !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).
   Image fills the full wrapper (CR-2026-04-21 — removes the visible white
   gutter that made the logo look smaller than its container). */
#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: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  border: none !important;
  border-radius: inherit !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-lg) !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 */
/* Radio/checkbox options — 2-column grid layout */
#desktopJobDetailsContainer .holdSingleChoice,
#desktopJobDetailsContainer .holdMuiltpleChoice {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
#desktopJobDetailsContainer .holdSingleChoice .form-check,
#desktopJobDetailsContainer .holdMuiltpleChoice .form-check {
  margin: 0 !important;
  width: 100% !important;
}
#desktopJobDetailsContainer .holdSingleChoice .form-check-label,
#desktopJobDetailsContainer .holdMuiltpleChoice .form-check-label {
  width: 100% !important;
  text-align: center !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-lg) !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 removed (CR-2026-04-21) — the 5px white gutter made the logo
     look smaller than its rounded container. Logo now fills the full box. */
  padding: 0 !important;
  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: cover !important;
  border: none !important;
  border-radius: inherit;
}

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

/* .jv-hl-toggle removed (CR-2026-04-22) — spec §3 replaces the "Show
   more" expander with a dedicated overflow section below description. */
.cw-hl-toggle {
  display: none;
}

@media (max-width: 767.98px) {
  .cw-hl-toggle {
    display: block;
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    background: none;
    border: 1px solid var(--revamp-border-light);
    border-radius: var(--revamp-radius-sm);
    font-size: 12px;
    font-weight: 600;
    color: var(--revamp-text-secondary);
    cursor: pointer;
    text-align: center;
  }
}

/* -----------------------------------------------------------------------
   Lead + rest highlights split (CR-2026-04-27).

   --lead is a single white panel with vertical dividers between cells —
   reads as one cohesive callout strip, not a grid of separate tiles.
   --rest stays as a standard tile grid below the description so overflow
   callouts get their own visual space.

   Replaces the click-to-expand pattern (.jv-highlights--top +
   .jv-hl-more button) — every callout is visible, just split between
   above-the-fold (lead) and below-the-description (rest).
   ----------------------------------------------------------------------- */

/* -----------------------------------------------------------------------
   PANEL SURFACE — shared between --lead and --rest.

   Trick: panel bg = border color, cells are bg:#fff, gap:1px between
   cells. The 1px panel bg bleeds through each gap as a hairline divider
   without per-cell border math. border-radius + overflow:hidden seals
   the outermost cells inside the rounded surface.

   Lead is a CSS grid (always single row, even distribution).
   Rest is flex+wrap so trailing-row cells stretch to fill the last
   partial row instead of leaving divider-colored "blank" slots.

   align-items: stretch (default) means cells inside the same row
   equalize to the tallest cell's height — clean visual rhythm even
   when one cell wraps to 3 lines and a sibling is single-line.
   min-height on cells extends that floor, so very short content cells
   don't dwarf cells in adjacent rows that have more text.
   ----------------------------------------------------------------------- */
.jv-highlights.jv-highlights--lead,
.jv-highlights.jv-highlights--rest {
  background: #fff;
  border: 1px solid var(--revamp-border-light);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  gap: 1px;
}

/* Lead — grid, auto-fit minmax(160px, 1fr). At wide viewports all 4 cells
   fit in a single row, equally distributed. As the viewport narrows, cells
   reflow to a second row instead of shrinking below readability — at
   ~640px the strip wraps to 3+1, at ~480px to 2+2. Mobile (<768px) hides
   cells 3-4 entirely (see below) so it never wraps there. */
.jv-highlights.jv-highlights--lead {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 22px;
}

/* Rest — flex+wrap. flex:1 1 150px means each cell starts at 150px and
   grows to fill the row, including trailing-row cells (so the last row
   stretches to fill instead of leaving an empty divider-colored slot). */
.jv-highlights.jv-highlights--rest {
  display: flex;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Cell surface — opaque white so the gap (panel bg = border color)
   reads as a hairline divider between adjacent cells. Cells size to
   their natural content height; align-items: stretch (default flex/grid)
   still equalizes cells WITHIN a row to that row's tallest cell. */
.jv-highlights--lead .jv-hl-card,
.jv-highlights--rest .jv-hl-card {
  background: #fff;
}

/* Rest cell sizing — min 150px, grow equally within row. */
.jv-highlights--rest .jv-hl-card {
  flex: 1 1 150px;
  min-width: 0;
}

/* Mobile bridge cards — lead's tail (cards 3-4) that mobile pushes out
   of the top panel into the start of --rest. Hidden on desktop (already
   shown in --lead), visible on mobile (where lead only shows cells 1-2).
   Compound selector (.jv-hl-card.jv-hl-card--mobile-bridge) wins over
   the base .jv-hl-card { display: flex } rule defined further down. */
.jv-hl-card.jv-hl-card--mobile-bridge {
  display: none;
}

@media (max-width: 767.98px) {
  /* Mobile lead — server always emits 4 cells; CSS hides cells 3-4 so
     only the first 2 show in the top panel. Auto-fit minmax(0, 1fr)
     (inherited from desktop) makes the visible 2 cells split 50/50.
     Hidden bridge cards re-emerge at the top of --rest below. */
  .jv-highlights--lead .jv-hl-card:nth-child(n+3) {
    display: none;
  }

  /* Mobile rest — 2 per row. Wider cells mean values fit on 2-3 lines
     with whole words instead of cramped 3-up cells with mid-word breaks.
     Trailing odd cell stretches to full width. */
  .jv-highlights--rest .jv-hl-card {
    flex: 1 1 calc(50% - 0.5px);
  }

  /* Show bridge cards on mobile — compound selector to beat the
     desktop .jv-hl-card.jv-hl-card--mobile-bridge { display: none }. */
  .jv-hl-card.jv-hl-card--mobile-bridge {
    display: flex;
  }
}

/* Breathing room between hero and highlights — the hero strip butts
   directly against the content area, so the first highlight tile has
   no visual gap above it without this. Margin (not padding) keeps the
   .cw-content-area background flush behind the hero. */
.cw-detail-container .cw-content-area > .jv-highlights:first-child,
.cw-detail-container .cw-content-area > .cw-highlights:first-child {
  margin-top: 14px;
}

/* Mobile: form-first reading order. Source order is desktop-correct
   (lead → summary → actions → form → full description → rest). On mobile
   we flex the content area and reassign order so the apply card lands
   right under the lead highlights — applicants can submit without
   scrolling past the long description first. Rest highlights stay last
   (after the full description), matching their desktop position.
   Desktop falls back to source order. */
@media (max-width: 767.98px) {
  .cw-detail-container .cw-content-area {
    display: flex;
    flex-direction: column;
  }
  .cw-detail-container .cw-content-area > .jv-highlights--lead,
  .cw-detail-container .cw-content-area > .cw-highlights         { order: 0; }
  .cw-detail-container .cw-content-area > .cw-actions            { order: 1; }
  .cw-detail-container .cw-content-area > .cw-apply-card         { order: 2; }
  .cw-detail-container .cw-content-area > .cw-desc-card--summary { order: 3; }
  .cw-detail-container .cw-content-area > .cw-desc-card--full    { order: 4; }
  .cw-detail-container .cw-content-area > .jv-highlights--rest   { order: 5; }
}

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

/* Inline emphasis only — see rationale at .jv-desc-content strong rule.
   display:block here was tearing inline values ("up to <strong>5%</strong>")
   into orphan lines on the AJAX SPA pane. */
.cw-desc-card .cw-desc-content strong,
.cw-desc-card .cw-desc-content b {
  font-weight: 700 !important;
  color: var(--revamp-text-primary) !important;
}

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

/* Override for wrap contexts (CR-2026-04-21) — on desktop the partial
   renders the logo inside .jv-hero-logo-wrap / .cw-hero-logo-wrap, which
   already supplies the white rounded square + shadow. The image must fill
   the entire wrap or the wrap shows as a visible white border around a
   smaller logo. Specificity here (2 IDs + 1 class) beats the standalone
   rule above (2 IDs). */
#main-content .jv-hero-logo-wrap > #companyLogoMobile,
#main-content .cw-hero-logo-wrap > #companyLogoMobile,
#main-content .jv-hero-logo-wrap > .jv-hero-logo-img,
#main-content .cw-hero-logo-wrap > .cw-hero-logo-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !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;
}

/* Contain job description HTML (purified markup often has tables with fixed widths,
   wide images, or inline styles that break out of the card on mobile). */
.cw-desc-card,
.cw-desc-content,
.jv-desc-card,
.jv-desc-content,
#jobDescription {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

.cw-desc-content,
.jv-desc-content,
#jobDescription {
  overflow-x: auto;
}

.cw-desc-card table,
.cw-desc-content table,
.jv-desc-card table,
.jv-desc-content table,
#jobDescription table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.cw-desc-card table td,
.cw-desc-card table th,
.jv-desc-card table td,
.jv-desc-card table th,
#jobDescription table td,
#jobDescription table th {
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.cw-desc-card img,
.cw-desc-card iframe,
.cw-desc-card video,
.jv-desc-card img,
.jv-desc-card iframe,
.jv-desc-card video,
#jobDescription img,
#jobDescription iframe,
#jobDescription video {
  max-width: 100%;
  height: auto;
}

.cw-desc-card pre,
.jv-desc-card pre,
#jobDescription pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
}

#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 (advancedLpForm.php)

   HTML structure:
   <header> <nav> <div#v2BannerContainer>
   <main> <div#v2BackgroundImgContainer>
     <article.v2-job-container>
       <section.lp-details-container> (left: headline + body)
       <div.apply-form-container-v2> (right: form card)
   <section.v2-job-desc-container> (mobile body)
   ============================================ */

/* ---- LP Navbar (shared by advanced + careers LP) ---- */

/* Full-width navbar — override inline max-width:1200px */
header[role="banner"] > nav.content.container {
  max-width: 100% !important;
  padding: 0 !important;
}

header[role="banner"] {
  background: #fff !important;
  border-bottom: 1px solid #eaedf1 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

#v2BannerContainer {
  height: var(--revamp-nav-height) !important;
  min-height: var(--revamp-nav-height) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 40px !important;
  background: #fff !important;
  border-bottom: none !important;
  margin: 0 auto !important;
  gap: 16px !important;
  max-width: 1200px !important;
}

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

/* Phone CTA in navbar — brand-colored pill */
#v2BannerContainer .d-none.d-md-block {
  font-family: var(--revamp-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--revamp-text-secondary) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#v2BannerContainer .d-none.d-md-block a {
  font-family: var(--revamp-font-heading) !important;
  font-weight: 700 !important;
  color: var(--revamp-text-primary) !important;
  text-decoration: none !important;
}

/* Mobile call button in navbar */
#v2BannerContainer #bannerCallButton {
  padding: 7px 16px !important;
  border-radius: var(--revamp-radius-full) !important;
  font-family: var(--revamp-font-heading) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Careers dropdown menu icon */
#v2BannerContainer #careersPagesDropdown {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--revamp-radius-lg) !important;
  border: 1px solid var(--revamp-border-light) !important;
  cursor: pointer !important;
  color: var(--revamp-text-secondary) !important;
  transition: background 0.15s !important;
}

#v2BannerContainer #careersPagesDropdown:hover {
  background: var(--revamp-bg-tertiary) !important;
}

/* ---- 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 wrapper (Advanced LP) ---- */
.v2-job-container {
  max-width: 1120px !important;
  margin: 0 auto;
}

/* ---- Careers LP: Sidebar form card. Stickiness + scroll owned by .lp-sidebar-wrapper. ---- */
#applyFormContainerCareers {
  border-radius: 16px !important;
  border: none !important;
  background: #fff !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
  padding: 8px 16px 16px !important;
}

/* Careers LP form labels */
#applyFormContainerCareers label:not(.form-check-label) {
  font-family: 'Inter', var(--revamp-font-body), sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--revamp-text-secondary) !important;
  margin-bottom: 4px !important;
}

/* Careers LP form inputs */
#applyFormContainerCareers .form-control:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]),
#applyFormContainerCareers .form-control-lg:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]) {
  height: 42px !important;
  border: 1.5px solid var(--revamp-border-light) !important;
  border-radius: 10px !important;
  padding: 0 14px !important;
  font-family: 'Inter', var(--revamp-font-body), sans-serif !important;
  font-size: 13px !important;
  background: #fff !important;
  color: #111827 !important;
  box-shadow: none !important;
}

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

/* Careers LP form heading */
#applyFormContainerCareers .form-head-text {
  font-family: 'Plus Jakarta Sans', var(--revamp-font-heading), sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--revamp-text-primary) !important;
}

/* Careers LP Apply By Chat button */
#applyFormContainerCareers #applyByChatBtn {
  padding: 13px 16px !important;
  border-radius: 12px !important;
  font-family: 'Plus Jakarta Sans', var(--revamp-font-heading), sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Careers LP submit button — aligned with MJLP V2 .cw-apply-card .btn-apply
   so all three LP types render an identically sized Apply / Continue
   button. Padding bumped 13 → 14 to match MJLP V2's vertical rhythm. */
#applyFormContainerCareers .btn-theme.btn-t-primary,
#applyFormContainerCareers .btn-apply,
#applyFormContainerCareers .continue-btn {
  width: 100% !important;
  padding: 14px 16px !important;
  border-radius: var(--revamp-radius-md) !important;
  font-family: 'Plus Jakarta Sans', var(--revamp-font-heading), sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  margin-top: 6px !important;
  box-shadow: var(--revamp-shadow-sm) !important;
}

/* Careers LP disclosure */
#applyFormContainerCareers .discInfo,
#applyFormContainerCareers #discInfo {
  font-family: 'Inter', var(--revamp-font-body), sans-serif !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  color: #b0b0b0 !important;
}

/* Careers LP choice pills */
#applyFormContainerCareers .holdSingleChoice,
#applyFormContainerCareers .holdMuiltpleChoice,
#applyFormContainerCareers .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: 6px !important;
}

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

#applyFormContainerCareers .holdSingleChoice .form-check-label,
#applyFormContainerCareers .holdMuiltpleChoice .form-check-label {
  padding: 8px 14px !important;
  border: 1px solid var(--revamp-border-light) !important;
  border-radius: 8px !important;
  background: var(--revamp-bg-tertiary) !important;
  color: var(--revamp-text-secondary) !important;
  cursor: pointer !important;
  font-family: 'Inter', var(--revamp-font-body), sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: all 0.12s !important;
  margin: 0 !important;
}

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

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

/* Left column — headline, body copy, sections */
.lp-details-container {
  color: #fff !important;
  padding-right: 0 !important;
}

.lp-details-container .row,
.lp-details-container .col-12 {
  padding: 0 !important;
  margin: 0 !important;
}

/* Page headline (h1 visually-hidden + form instructions paragraph) */
.lp-details-container h1 {
  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;
  clip: unset !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  white-space: normal !important;
}

.lp-details-container p {
  font-family: var(--revamp-font-body) !important;
  font-size: 15px !important;
  color: rgba(255,255,255,0.88) !important;
  line-height: 1.7 !important;
  margin-bottom: 20px !important;
}

/* Body copy sections on dark bg */
.lp-details-container .d-none.d-md-block {
  display: block !important;
}

/* Right column — form card. Stickiness + scroll now owned by .lp-sidebar-wrapper. */
.apply-form-container-v2.card {
  background: var(--revamp-bg-secondary) !important;
  border-radius: var(--revamp-radius-lg) !important;
  border: 1px solid var(--revamp-border-light) !important;
  padding: 24px !important;
  box-shadow: var(--revamp-shadow-xl) !important;
  width: 100% !important;
}

/* Override V1's v1_multiJobLandingPageStyles.css rules which still apply
   to .apply-form-container-v2, #careersFormContainerDesktop, and
   #applyFormContainerCareers — V1 forces them to be sticky with
   max-height: 80vh / calc(100vh - 8em), which on V2 stacks against
   .lp-sidebar-wrapper's own stickiness and creates nested cages that
   clip taller forms invisibly (V2's `overflow: hidden` on the outer
   form-card hides any clipped content rather than offering a scrollbar).
   V2 puts stickiness on .lp-sidebar-wrapper only — the form cards stay
   normal blocks that grow to their natural height, and the sidebar's
   own overflow-y handles any viewport-exceeding case. */
.lp-revamp .apply-form-container-v2.card,
.lp-revamp #careersFormContainerDesktop,
.lp-revamp #applyFormContainerCareers {
  position: static !important;
  top: auto !important;
  max-height: none !important;
}
/* overflow: hidden (both axes) is the only reliable way to make a child's
   own painted background respect the parent's rounded corners across
   browsers. `overflow-x: clip; overflow-y: visible` was passing the corner
   clipping at the box level (DOM probe confirmed the corner cutouts) but
   the form-header child's #fff background still rendered all the way into
   the corner pixels — making the corners look square visually even though
   the box was rounded. With every form-card cage already neutralised
   (max-height: none), nothing actually gets clipped vertically — the card
   grows to its content and the sidebar wrapper handles any viewport
   overflow with its own scrollbar. */
.lp-revamp .apply-form-container-v2.card,
.lp-revamp #careersFormContainerDesktop,
.lp-revamp #applyFormContainerCareers {
  overflow: hidden !important;
}

/* "Apply By Chat" button in form card */
.apply-form-container-v2 #applyByChatBtn {
  padding: 12px 16px !important;
  border-radius: var(--revamp-radius-md) !important;
  font-family: var(--revamp-font-heading) !important;
  font-size: var(--lp-text-sm) !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: none !important;
  box-shadow: var(--revamp-shadow-md) !important;
  transition: all 0.15s !important;
}

.apply-form-container-v2 #applyByChatBtn:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--revamp-shadow-lg) !important;
}

/* "Call us:" row in form card */
.apply-form-container-v2 > div:nth-child(2) {
  font-family: var(--revamp-font-body) !important;
  font-size: var(--lp-text-xs) !important;
  color: var(--revamp-text-secondary) !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--revamp-border-light) !important;
  margin-bottom: 12px !important;
}

.apply-form-container-v2 > div:nth-child(2) a {
  font-weight: 700 !important;
  color: var(--revamp-text-primary) !important;
  text-decoration: none !important;
}

/* Form title and subtitle */
.apply-form-container-v2 #form-details-area > div > .mt-3:first-child {
  font-family: var(--revamp-font-heading) !important;
  font-size: var(--lp-text-lg) !important;
  font-weight: 700 !important;
  color: var(--revamp-text-primary) !important;
  margin-bottom: 2px !important;
  margin-top: 0 !important;
}

/* Form labels — aligned with MJLP V2 .cw-apply-card label
   (11.5 / 600 / secondary / mb 5). */
.apply-form-container-v2 label:not(.form-check-label) {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--revamp-text-secondary) !important;
  margin-bottom: 5px !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}

/* Form inputs — aligned with MJLP V2 .cw-apply-card .form-control
   (44 / 1.5 border / 16 radius / 14 font / pure white). */
.apply-form-container-v2 .form-control:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]),
.apply-form-container-v2 .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-lg) !important;
  padding: 0 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  background: #fff !important;
  color: var(--revamp-text-primary) !important;
  box-shadow: none !important;
}

.apply-form-container-v2 .form-control:not(.noBorder):focus {
  border-color: var(--revamp-border-medium) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06) !important;
}

/* Submit/Continue button in form card — aligned with MJLP V2 .cw-apply-card
   .btn-apply spec (radius 12, font 15, margin-top 6, shadow-sm) so the
   Apply button reads the same size and weight on every LP type. */
.apply-form-container-v2 .btn-theme.btn-t-primary,
.apply-form-container-v2 .btn-apply {
  width: 100% !important;
  padding: 14px 16px !important;
  border-radius: var(--revamp-radius-md) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  border: none !important;
  cursor: pointer !important;
  margin-top: 6px !important;
  box-shadow: var(--revamp-shadow-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Disclosure text */
.apply-form-container-v2 .discInfo,
.apply-form-container-v2 #discInfo {
  font-family: var(--revamp-font-body) !important;
  font-size: var(--lp-text-xs) !important;
  line-height: 1.45 !important;
  color: #9ca3af !important;
  margin-top: 14px !important;
}

/* Radio/choice pills in form */
.apply-form-container-v2 .holdSingleChoice,
.apply-form-container-v2 .holdMuiltpleChoice,
.apply-form-container-v2 .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;
}

.apply-form-container-v2 .holdSingleChoice .form-check,
.apply-form-container-v2 .holdMuiltpleChoice .form-check {
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

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

.apply-form-container-v2 .holdSingleChoice .form-check-label,
.apply-form-container-v2 .holdMuiltpleChoice .form-check-label {
  /* Border is part of the box from the start (not toggled on selection) so
     the pill's outer geometry stays identical across states — no 1px shift
     when the user clicks. Same reason font-weight stays at 500 in both
     states: a 500 → 600 swap on a short label sub-pixel-reflows the pill
     width and reads as a jitter when adjacent pills are unselected. */
  padding: 8px 19px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #f1f3f5 !important;
  color: #4b5563 !important;
  cursor: pointer !important;
  font-family: 'Inter', sans-serif !important;
  font-size: var(--lp-text-body-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s !important;
  margin: 0 !important;
}

.apply-form-container-v2 .holdSingleChoice .form-check-input:checked + .form-check-label,
.apply-form-container-v2 .holdMuiltpleChoice .form-check-input:checked + .form-check-label {
  background: var(--brand-color, #111827) !important;
  color: var(--brand-text-color, #fff) !important;
  border-color: var(--brand-color, #111827) !important;
  /* weight stays 500 — bg + color alone carry the selected state */
}

/* ---- LP body copy (v2-job-desc) 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 {
  font-family: var(--revamp-font-body) !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* LP Sections — glass morphism cards */
.v2-job-desc .section,
.lp-details-container div[style*="margin-bottom:3em"] {
  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,
.lp-details-container div[style*="margin-bottom:3em"] > div:first-child {
  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 !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

/* Section headline icon color */
.lp-details-container div[style*="margin-bottom:3em"] i {
  font-size: 1.2em !important;
  margin-right: 0.4em !important;
}

.v2-job-desc .section li,
.lp-details-container li {
  font-family: var(--revamp-font-body) !important;
  font-size: 13.5px !important;
  color: rgba(255,255,255,0.85) !important;
  line-height: 1.7 !important;
  padding-left: 20px !important;
  position: relative !important;
  margin-bottom: 4px !important;
}

.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,
#v2BackgroundImgContainer .apply-form-container-v2.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 {
  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 body copy images & iframes — rounded */
.lp-details-container img:not(.v2NavbarLogo) {
  border-radius: var(--revamp-radius-md) !important;
}

.lp-details-container iframe {
  border-radius: var(--revamp-radius-md) !important;
}

/* ---- LP Mobile (Mobile body copy section) ---- */
.v2-job-desc-container {
  background: var(--revamp-bg-primary) !important;
}

.v2-job-desc-container .v2-job-desc {
  color: var(--revamp-text-primary) !important;
}

.v2-job-desc-container .v2-job-desc h1,
.v2-job-desc-container .v2-job-desc h2,
.v2-job-desc-container .v2-job-desc h3,
.v2-job-desc-container .v2-job-desc .sectionHeadline {
  color: var(--revamp-text-primary) !important;
}

.v2-job-desc-container .v2-job-desc p {
  color: var(--revamp-text-secondary) !important;
}

.v2-job-desc-container .v2-job-desc .section,
.v2-job-desc-container div[style*="margin-bottom:3em"] {
  background: var(--revamp-bg-secondary) !important;
  border: 1px solid var(--revamp-border-light) !important;
  backdrop-filter: none !important;
}

.v2-job-desc-container .v2-job-desc .section h3,
.v2-job-desc-container .v2-job-desc .section .sectionHeadline {
  color: var(--revamp-text-primary) !important;
  border-bottom-color: var(--revamp-border-light) !important;
}

.v2-job-desc-container .v2-job-desc .section li,
.v2-job-desc-container .v2-job-desc li {
  color: var(--revamp-text-secondary) !important;
}


/* ============================================
   LP FORM PAGE (lpForm.php — type 0)
   Scoped via .lp-revamp class on <main>.
   Background/text colors from page settings via CSS vars:
   --lp-bg, --lp-text, --lp-brand, --lp-brand-text
   ============================================ */

/* Type-leak guardrail. The company brand sheet appends a
   `* { font-family: <bodyFont> }` rule that reaches any LP V2 element we
   haven't given an explicit font-family — last seen leaking Satoshi-Regular
   into choice pills, Read more button, and form-check wrappers. Pin the
   LP V2 root, every common interactive surface, and headings to our type
   system so the cascade can't fall through. */
.lp-revamp,
.lp-revamp p,
.lp-revamp span,
.lp-revamp div,
.lp-revamp li,
.lp-revamp a,
.lp-revamp button,
.lp-revamp input,
.lp-revamp select,
.lp-revamp textarea,
.lp-revamp label {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.lp-revamp h1,
.lp-revamp h2,
.lp-revamp h3,
.lp-revamp h4,
.lp-revamp h5,
.lp-revamp h6,
.lp-revamp .lp-form-title,
.lp-revamp .lp-chat-persona span,
.lp-revamp .lp-chat-start-btn,
.lp-revamp .lp-nav-phone-pill,
.lp-revamp .btn-apply {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* ---- Page Root ---- */
.lp-revamp {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: var(--lp-bg, #ffffff) !important;
  color: var(--lp-text, #1a1a1a) !important;
  min-height: 100vh !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ---- Navbar: Full-width, logo left, sticky ---- */
.lp-revamp > .d-none.d-md-block {
  background: #fff !important;
  border-bottom: 1px solid #eaedf1 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  /* Break out to full viewport width */
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  max-width: none !important;
}

.lp-revamp.lp-dark > .d-none.d-md-block {
  background: #1a1a1a !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}

.lp-revamp > .d-none.d-md-block > .container-fluid {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
}

.lp-revamp .jumbotron {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.lp-revamp .jumbotron > header.row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  height: 56px !important;
  border: none !important;
  margin: 0 !important;
}

.lp-revamp .jumbotron header .col-2 {
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: auto !important;
  padding: 0 !important;
}

.lp-revamp .jumbotron header .col-2 img {
  height: 32px !important;
  width: auto !important;
  max-width: 180px !important;
  border: none !important;
  object-fit: contain !important;
  cursor: pointer !important;
}

/* Hide banner image, show phone pill */
.lp-revamp .jumbotron header .lp-nav-banner-col {
  display: none !important;
}

/* Phone pill in navbar */
.lp-nav-phone-pill {
  display: none;
}

.lp-revamp header.row > .lp-nav-phone-pill,
.lp-revamp .lp-nav-phone-pill {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 8px 18px !important;
  border-radius: 9999px !important;
  background: var(--lp-brand, #da2528) !important;
  color: var(--lp-brand-text, #fff) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: var(--lp-text-body-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums lining-nums !important;
}

.lp-revamp .lp-nav-phone-pill:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2) !important;
  text-decoration: none !important;
  color: var(--lp-brand-text, #fff) !important;
}

.lp-revamp .lp-nav-phone-pill svg {
  flex-shrink: 0 !important;
}

/* ---- Content Grid (lpForm only, not .lp-revamp-grid) ---- */
.lp-revamp > div:last-of-type:not(.lp-revamp-grid) {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.lp-revamp .enclosed-small {
  padding: 0 !important;
}

@media (min-width: 768px) {
  .lp-revamp .job-container {
    display: grid !important;
    padding: 40px 40px 60px !important;
    gap: 40px !important;
    grid-template-columns: 1fr 400px !important;
    align-items: start !important;
    max-width: none !important;
    width: 100% !important;
  }

  /* Sidebar wrapper takes the right column */
  .lp-revamp .job-container .lp-sidebar-wrapper {
    order: 2 !important;
    width: 100% !important;
  }

  /* Job desc takes the left column */
  .lp-revamp .job-container .job-desc-container {
    order: 1 !important;
    width: 100% !important;
  }
}

/* ======== LEFT COLUMN ======== */
.lp-revamp .job-desc-container {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  min-height: auto !important;
  color: var(--lp-text, #1a1a1a) !important;
  contain: unset !important;
  content-visibility: unset !important;
}

/* Headline */
.lp-revamp .job-desc-container > .text.fs-2 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.5px !important;
  color: var(--lp-text, #1a1a1a) !important;
  padding-bottom: 24px !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
}

/* Body copy container */
.lp-revamp .job-desc-container #jobDescription {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: var(--lp-text, #4b5563) !important;
}

/* Section cards */
.lp-revamp .job-desc-container #jobDescription div[style*="margin-bottom:3em"] {
  background: #fff !important;
  border: 1px solid #e8ebf0 !important;
  border-radius: 14px !important;
  padding: 28px 30px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02) !important;
  transition: box-shadow 0.2s !important;
}

.lp-revamp .job-desc-container #jobDescription div[style*="margin-bottom:3em"]:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.07) !important;
}

.lp-revamp.lp-dark .job-desc-container #jobDescription div[style*="margin-bottom:3em"] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2) !important;
}

.lp-revamp.lp-dark .job-desc-container #jobDescription div[style*="margin-bottom:3em"]:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
}

/* Section headline */
.lp-revamp .job-desc-container #jobDescription div[style*="margin-bottom:3em"] > div[style*="display: flex"][style*="align-items: center"],
.lp-revamp .job-desc-container #jobDescription div[style*="margin-bottom:3em"] > div[style*="display: flex"][style*="justify-content: flex-start"] {
  margin-bottom: 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #e8ebf0 !important;
}

.lp-revamp.lp-dark .job-desc-container #jobDescription div[style*="margin-bottom:3em"] > div[style*="display: flex"][style*="align-items: center"],
.lp-revamp.lp-dark .job-desc-container #jobDescription div[style*="margin-bottom:3em"] > div[style*="display: flex"][style*="justify-content: flex-start"] {
  border-bottom-color: rgba(255,255,255,0.08) !important;
}

.lp-revamp .job-desc-container #jobDescription div[style*="margin-bottom:3em"] > div[style*="display: flex"] > div[style*="font-size"] {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--lp-text, #1a1a1a) !important;
}

/* Section headline in .section elements */
.lp-revamp .job-desc-container .section h3 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--lp-text, #1a1a1a) !important;
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
}

.lp-revamp .job-desc-container #jobDescription div[style*="margin-bottom:3em"] > div[style*="display: flex"] i {
  font-size: 1em !important;
  color: var(--lp-brand, var(--brand-color, #FFD700)) !important;
}

.lp-revamp .job-desc-container .sectionHeadline,
.lp-revamp .job-desc-container .sectionIcon {
  font-size: 18px !important;
}

.lp-revamp .job-desc-container .section {
  background: #fff !important;
  border: 1px solid #e8ebf0 !important;
  border-radius: 14px !important;
  padding: 28px 30px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

.lp-revamp.lp-dark .job-desc-container .section {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2) !important;
}

/* Section body text */
.lp-revamp .job-desc-container #jobDescription p {
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: #4b5563 !important;
}

.lp-revamp.lp-dark .job-desc-container #jobDescription p {
  color: rgba(255,255,255,0.72) !important;
}

.lp-revamp .job-desc-container #jobDescription ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.lp-revamp .job-desc-container #jobDescription li {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: #4b5563 !important;
  margin-bottom: 7px !important;
  padding-left: 22px !important;
  position: relative !important;
}

.lp-revamp.lp-dark .job-desc-container #jobDescription li {
  color: rgba(255,255,255,0.78) !important;
}

.lp-revamp .job-desc-container #jobDescription li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 10px !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--lp-brand, #da2528) !important;
}

.lp-revamp .job-desc-container #jobDescription h1,
.lp-revamp .job-desc-container #jobDescription h2,
.lp-revamp .job-desc-container #jobDescription h3 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  color: var(--lp-text, #1a1a1a) !important;
}

.lp-revamp .job-desc-container #jobDescription img {
  border-radius: 12px !important;
  max-width: 100% !important;
}

.lp-revamp .job-desc-container #jobDescription iframe {
  border-radius: 12px !important;
}

/* ======== RIGHT COLUMN: Form Sidebar ======== */
.lp-revamp .apply-form-container.card {
  border-radius: 16px !important;
  border: 1px solid #e8ebf0 !important;
  padding: 0 !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important;
  background: #fff !important;
  color: var(--revamp-text-primary) !important;
  overflow: hidden !important;
}

.lp-revamp.lp-dark .apply-form-container.card {
  border: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
}

/* CTA button zone - hidden (replaced by chat CTA card) */
.lp-revamp .apply-form-container .apply-button-container {
  display: none !important;
}

.lp-revamp .apply-form-container #applyByChatBtn {
  padding: 14px 20px !important;
  border-radius: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
}

.lp-revamp .apply-form-container #applyByChatBtn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
}

.lp-revamp .apply-form-container #callButton {
  padding: 14px 20px !important;
  border-radius: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  background: rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  color: var(--revamp-text-primary) !important;
}

/* Call us divider row — hidden (replaced by phone footer) */
.lp-revamp .apply-form-container > #form-details-area > .mt-3.d-none.d-md-block {
  display: none !important;
}

/* Form zone */
.lp-revamp .apply-form-container #job-form-container {
  padding: 16px 20px 20px !important;
  margin-top: 0 !important;
}

/* Kill V1's inline `margin-top: 1.5em` (~24px) on #job-form-container
   AND its first inner wrapper div. The V1 form scaffolding has the
   margin on BOTH levels — `#job-form-container { margin-top: 1.5em }`
   inline AND its immediate child div also `margin-top: 1.5em` inline.
   Zeroing only #job-form-container left a 24px gap injected by the
   inner wrapper, pushing "First Name" 44px below the Quick Apply
   subtitle on careers LP. Hit both levels so the gap collapses to
   header padding-bottom (16px) + container padding-top (4px) = 20px. */
.lp-revamp #applyFormContainerCareers #job-form-container,
.lp-revamp #applyFormContainerCareers #job-form-container > div:first-child,
.lp-revamp .lp-revamp-form-card #job-form-container,
.lp-revamp .lp-revamp-form-card #job-form-container > div:first-child {
  margin-top: 0 !important;
}

.lp-revamp .apply-form-container #job-form-container > .row {
  margin: 0 !important;
}

.lp-revamp .apply-form-container #job-form-container > .row > .col-12 {
  padding: 0 !important;
}

/* Form heading — first <p> = title, second = subtitle */
.lp-revamp .apply-form-container .form-head-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--revamp-text-tertiary) !important;
  line-height: 1.5 !important;
  display: block !important;
  margin-bottom: 4px !important;
}

.lp-revamp .apply-form-container .form-head-text p:first-child {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin-bottom: 2px !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}

.lp-revamp .apply-form-container .form-head-text p:last-child {
  font-size: 12px !important;
  color: #9ca3af !important;
  margin-bottom: 12px !important;
}

/* Labels — industry standard 14/600 */
.lp-revamp .apply-form-container label:not(.form-check-label) {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--lp-text-body-sm) !important;
  font-weight: 600 !important;
  color: var(--revamp-text-secondary) !important;
  margin-bottom: 4px !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}

/* Inputs */
.lp-revamp .apply-form-container .form-control:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]),
.lp-revamp .apply-form-container .form-control-lg:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]) {
  height: 38px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  background: #fff !important;
  color: #111827 !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.lp-revamp .apply-form-container .form-control:not(.noBorder):focus {
  border-color: var(--lp-brand, #9ca3af) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.04) !important;
}

/* Continue/Submit button */
.lp-revamp .apply-form-container .continue-btn,
.lp-revamp .apply-form-container .btn-theme.btn-t-primary,
.lp-revamp .apply-form-container .btn-apply {
  width: 100% !important;
  padding: 11px 16px !important;
  border-radius: 10px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  border: none !important;
  cursor: pointer !important;
  margin-top: 4px !important;
  transition: all 0.15s !important;
}

.lp-revamp .apply-form-container .continue-btn:hover,
.lp-revamp .apply-form-container .btn-theme.btn-t-primary:hover,
.lp-revamp .apply-form-container .btn-apply:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important;
}

/* Disclosure */
.lp-revamp .apply-form-container .discInfo,
.lp-revamp .apply-form-container #discInfo {
  font-family: 'Inter', sans-serif !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
  color: #b0b0b0 !important;
  margin-top: 8px !important;
  padding: 0 !important;
}

.lp-revamp .apply-form-container .discInfo a,
.lp-revamp .apply-form-container #discInfo a {
  color: #888 !important;
}

/* Choice pills */
.lp-revamp .apply-form-container .holdSingleChoice,
.lp-revamp .apply-form-container .holdMuiltpleChoice,
.lp-revamp .apply-form-container .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: 6px !important;
}

.lp-revamp .apply-form-container .holdSingleChoice .form-check-input,
.lp-revamp .apply-form-container .holdMuiltpleChoice .form-check-input {
  display: none !important;
}

.lp-revamp .apply-form-container .holdSingleChoice .form-check-label,
.lp-revamp .apply-form-container .holdMuiltpleChoice .form-check-label {
  padding: 8px 14px !important;
  border: 1px solid var(--revamp-border-light) !important;
  border-radius: 8px !important;
  background: var(--revamp-bg-tertiary) !important;
  color: var(--revamp-text-secondary) !important;
  cursor: pointer !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: all 0.12s !important;
  margin: 0 !important;
}

.lp-revamp .apply-form-container .holdSingleChoice .form-check-label:hover,
.lp-revamp .apply-form-container .holdMuiltpleChoice .form-check-label:hover {
  border-color: var(--lp-brand, var(--revamp-border-medium)) !important;
}

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

.lp-revamp .apply-form-container .form-group {
  margin-bottom: 10px !important;
}

/* Form labels smaller */
.lp-revamp .apply-form-container label:not(.form-check-label) {
  font-size: 11.5px !important;
  margin-bottom: 3px !important;
}

/* ======== SIDEBAR WRAPPER (Chat CTA + Form card) ========
   Single scroll container for the right column on desktop. */
.lp-revamp .lp-sidebar-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  position: sticky !important;
  top: 76px !important;
  align-self: flex-start !important;
  /* One — and only one — scroll container for the right column. With the
     V1 cages neutralised on .apply-form-container-v2.card /
     #careersFormContainerDesktop / #applyFormContainerCareers, there are
     no inner scrollers competing here, so the user gets a single,
     predictable scrollbar that only appears when chat-CTA + form
     genuinely overflow the viewport (overflow-y: auto, not scroll). On
     viewports tall enough to fit the form, no scrollbar — sidebar just
     sticks at top:76 as normal. */
  max-height: calc(100vh - 90px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  /* Scroll headroom below the phone-footer. Without this, when the form
     exceeds the cage by only a few pixels, the inner scroll bottoms out
     before the phone-footer is fully visible — its last 10-20px sit
     clipped at the edge of the scroll area and the user has to scroll
     the WHOLE PAGE to reveal them. 32px of trailing padding pushes the
     scroll endpoint comfortably past the footer so the call number is
     reachable via inner scroll alone. */
  padding-bottom: 32px !important;
}

/* Flex children of the sidebar (chat-CTA card, form-card) must NOT shrink
   when the wrapper has a max-height cap. Default `flex-shrink: 1` causes
   the flex algorithm to crush the form-card down to fit the cage — its
   white background ends mid-form while the captcha and Apply button
   render OUTSIDE the card via `overflow-y: visible`, looking broken. With
   flex-shrink: 0 the cards keep their natural content height, the wrapper
   overflows, and the wrapper's own `overflow-y: auto` provides the
   scrollbar that lets the user reach the bottom. */
.lp-revamp .lp-sidebar-wrapper > * {
  flex-shrink: 0 !important;
}

/* Chat CTA Card — radius + 1px border + no shadow to match the
   form-card and section-card chrome on the same page. Border uses the
   same translucent-black tone so it reads as a subtle darker rim on
   any brand bg (yellow, red, blue, etc.) without us needing to know
   the brand color per LP. The brand color itself still carries the
   visual hierarchy; the border just unifies chrome across all card
   surfaces in the right column. */
.lp-revamp .lp-chat-cta-card {
  border-radius: var(--revamp-radius-lg) !important;
  padding: 24px !important;
  text-align: center !important;
  box-shadow: none !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
}

.lp-revamp .lp-chat-persona {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.lp-revamp .lp-chat-persona img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 3px solid rgba(255,255,255,0.3) !important;
  object-fit: cover !important;
}

.lp-revamp .lp-chat-persona span {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}

.lp-revamp .lp-chat-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--lp-text-body-sm) !important;
  font-weight: 400 !important;
  opacity: 0.9 !important;
  margin: 6px 0 12px !important;
  line-height: 1.45 !important;
}

/* Force inheritance from the chat-cta-card's inline color. On careers mobile
   the chat card is JS-relocated into #jobDescription (.lp-revamp-body), where
   `.lp-revamp.lp-dark-overlay .lp-revamp-body p { color: rgba(255,255,255,0.92)
   !important; text-shadow: 0 1px 2px rgba(0,0,0,0.18) }` would otherwise paint
   this <p> white over a light brand bg (e.g. DG yellow #f4ed00), making the
   copy invisible. The dark-overlay rule (0,3,1) sits later in the file so
   it'd tie-break-win against an equal-specificity selector — chain the
   chat-cta-card class twice to bump to (0,4,1) and force the win, and also
   nuke the inherited text-shadow which adds a dark halo on the yellow card. */
.lp-revamp .lp-chat-cta-card.lp-chat-cta-card p.lp-chat-desc {
  color: inherit !important;
  text-shadow: none !important;
}

.lp-revamp .lp-chat-start-btn {
  width: 100% !important;
  padding: 11px !important;
  border-radius: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  background: rgba(255,255,255,0.95) !important;
  color: var(--revamp-text-primary, #111) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}

.lp-revamp .lp-chat-start-btn:hover {
  background: #fff !important;
  transform: translateY(-1px) !important;
}

/* "Or call:" row at the end of the form card — mirrors MJLP V2's
   .jv-phone-row pattern (job-application-view.php:717): a plain top
   divider inside the white card, no separate footer chrome. Drops
   the previous #f8f9fa grey strip + bottom-rounded corners, which
   read as a heavier "form footer" surface than MJLP shows. */
.lp-revamp .lp-form-phone-footer {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 14px 24px 0 !important;
  padding: 14px 0 16px !important;
  border-top: 1px solid var(--revamp-border-light) !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: var(--lp-text-body-sm) !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  font-variant-numeric: tabular-nums lining-nums !important;
}

.lp-revamp .lp-form-phone-footer svg {
  flex-shrink: 0 !important;
  /* One shade darker than the original #b0b8c4 so the icon doesn't read
     as disabled next to the bold tabular phone number — gray-400 sits
     subordinate to the #6b7280 text without disappearing. */
  color: #9ca3af !important;
}

/* Phone link inherits the row's muted color — matches MJLP V2's
   jv-phone-row inline style (color: inherit; font-weight: 700) so the
   row reads as one tonal block with the number standing out via
   weight alone, not contrast. */
.lp-revamp .lp-form-phone-footer a {
  font-weight: 700 !important;
  color: inherit !important;
  text-decoration: none !important;
}

/* Hide old CTA buttons inside form card (replaced by chat CTA card) */
.lp-revamp .apply-form-container .apply-button-container {
  display: none !important;
}

/* Hide old "Call us" row (replaced by phone footer) */
.lp-revamp .apply-form-container > #form-details-area > .mt-3.d-none.d-md-block {
  display: none !important;
}

/* Form card inside sidebar wrapper — no sticky (parent handles it) */
.lp-revamp .lp-sidebar-wrapper .apply-form-container.card {
  position: static !important;
}

/* Light theme is now the default — .lp-dark overrides above handle dark mode */

/* ============================================
   LP MOBILE (max-width: 767.98px)
   ============================================ */
@media (max-width: 767.98px) {

  /* Hide old banner+logo mobile header — replace with clean layout */
  .lp-revamp > .d-md-none.mobile-header-area {
    display: none !important;
  }

  /* Hide mobile job title block (redundant with content headline) */
  .lp-revamp > .w-100.mt-2.d-md-none {
    display: none !important;
  }

  /* Stack layout — single column */
  .lp-revamp .job-container {
    display: flex !important;
    flex-direction: column !important;
    padding: 20px 16px 80px !important;
    gap: 16px !important;
  }

  /* Content first on mobile (headline + sections) then sidebar */
  .lp-revamp .job-desc-container {
    order: 1 !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .lp-revamp .lp-sidebar-wrapper {
    order: 2 !important;
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Headline — mobile size, show the desktop one */
  .lp-revamp .job-desc-container > .text.fs-2 {
    font-size: 22px !important;
    padding-bottom: 20px !important;
    display: block !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
  }

  /* Section cards — tighter padding */
  .lp-revamp .job-desc-container #jobDescription div[style*="margin-bottom:3em"] {
    padding: 20px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }

  .lp-revamp .job-desc-container #jobDescription div[style*="margin-bottom:3em"] > div[style*="display: flex"] > div[style*="font-size"] {
    font-size: 16px !important;
  }

  .lp-revamp .job-desc-container .section {
    padding: 20px !important;
    border-radius: 12px !important;
  }

  /* Chat CTA card — mobile */
  .lp-revamp .lp-chat-cta-card {
    border-radius: 12px !important;
    padding: 20px !important;
  }

  .lp-revamp .lp-chat-persona img {
    width: 40px !important;
    height: 40px !important;
  }

  .lp-revamp .lp-chat-persona span {
    font-size: 14px !important;
  }

  .lp-revamp .lp-chat-desc {
    font-size: 12.5px !important;
  }

  .lp-revamp .lp-chat-start-btn {
    padding: 11px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

  /* Form card — mobile */
  .lp-revamp .apply-form-container.card {
    border-radius: 12px !important;
  }

  .lp-revamp .apply-form-container .apply-button-container {
    padding: 16px 18px !important;
  }

  .lp-revamp .apply-form-container #job-form-container {
    padding: 16px 18px 20px !important;
  }

  .lp-revamp .apply-form-container .form-head-text p:first-child {
    font-size: 16px !important;
  }

  .lp-revamp .apply-form-container .form-control:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]),
  .lp-revamp .apply-form-container .form-control-lg:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]) {
    height: 44px !important;
    font-size: 14px !important;
  }

  .lp-revamp .apply-form-container .continue-btn,
  .lp-revamp .apply-form-container .btn-theme.btn-t-primary,
  .lp-revamp .apply-form-container .btn-apply {
    padding: 14px 16px !important;
    font-size: 15px !important;
  }

  /* Phone footer — mobile. No bottom-corner radius; footer is now a
     plain top-divider row inside the card (MJLP V2 .jv-phone-row). */
  .lp-revamp .lp-form-phone-footer {
    padding: 14px 0 16px !important;
  }

  /* Images & video — full width, smaller radius */
  .lp-revamp .job-desc-container #jobDescription img {
    border-radius: 10px !important;
  }

  .lp-revamp .job-desc-container #jobDescription iframe {
    border-radius: 10px !important;
  }

  /* Text sizes for mobile */
  .lp-revamp .job-desc-container #jobDescription p {
    font-size: 13.5px !important;
  }

  .lp-revamp .job-desc-container #jobDescription li {
    font-size: 13px !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-lg) !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-lg) !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 — consolidated into LP section above */


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

/* ============================================
   LANDING PAGE SHIMMER — full-page skeleton
   ============================================ */
.lp-shimmer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: #fff;
  transition: opacity 0.35s ease;
  overflow: hidden;
}

.lp-shimmer[data-hidden] {
  opacity: 0;
  pointer-events: none;
}

.lp-shimmer-nav {
  display: none;
}

/* No-hero variant — white bg, full coverage */
.lp-shimmer.lp-shimmer--no-hero {
  background: #fff;
  padding-top: 60px;
}

.lp-shimmer-hero {
  height: 240px;
  background: linear-gradient(90deg, #e4e7eb 25%, #eef0f3 50%, #e4e7eb 75%);
  background-size: 800px 100%;
  animation: cwShimmer 1.4s ease-in-out infinite;
  display: flex;
  align-items: flex-end;
}

.lp-shimmer-hero-inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px 32px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.lp-shimmer-body-wrap {
  background: #f5f6f8;
  margin-top: -32px;
  border-radius: 24px 24px 0 0;
  position: relative;
  min-height: calc(100vh - 240px);
}

.lp-shimmer.lp-shimmer--no-hero .lp-shimmer-body-wrap {
  min-height: calc(100vh - 60px);
}

.lp-shimmer-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 40px 60px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 36px;
  align-items: start;
}

.lp-shimmer-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lp-shimmer-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lp-shimmer-pill {
  background: linear-gradient(90deg, #e8eaed 25%, #f2f3f5 50%, #e8eaed 75%);
  background-size: 600px 100%;
  animation: cwShimmer 1.4s ease-in-out infinite;
  /* Default 8px radius — text-block-sized pills (headline, subtitle)
     should read like text, not chip-shapes. Pills that need a larger
     radius (form inputs at 12, submit button at 12, card placeholders
     at 16) override inline. Earlier var-lg (16) default forced every
     non-radius-inlined pill to over-round into tablet shapes. */
  border-radius: 8px;
  flex-shrink: 0;
}

/* Stagger the animation for visual rhythm */
.lp-shimmer-pill:nth-child(2) { animation-delay: 0.15s; }
.lp-shimmer-pill:nth-child(3) { animation-delay: 0.3s; }

/* Inline CTA row in the content column is hidden in the real layout on
   both desktop AND mobile (see .lp-inline-ctas rule — the right-column
   chat-CTA card handles desktop, the bottom CTA bar handles mobile).
   Hide the shimmer placeholder universally so the skeleton matches the
   final composition on every viewport. */
.lp-shimmer-cta-row {
  display: none !important;
}

/* Form card skeleton inside sidebar — chrome matches real
   .lp-revamp-form-card exactly: 0 outer padding (header + body own their
   inner rail), 16px radius, 1px medium border, shadow-sm. */
.lp-shimmer-form {
  background: #fff;
  border-radius: var(--revamp-radius-lg);
  padding: 0;
  border: 1px solid var(--revamp-border-medium);
  box-shadow: var(--revamp-shadow-sm);
  display: flex;
  flex-direction: column;
}

/* Form header sub-block — matches real .lp-form-header rhythm
   (padding 22 24 16 for the "Quick Apply" title + subtitle pair). */
.lp-shimmer-form-header {
  padding: 22px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Form body sub-block — matches the advanced LP form's
   #job-form-container inner padding (8 16 16) so the input pills sit
   at the same horizontal inset as the real fields. */
.lp-shimmer-form-body {
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Chat-CTA card skeleton — sits above the form on desktop and mirrors
   .lp-chat-cta-card (24px padding, 16px radius, ~168px tall once
   avatar + persona + desc + button are rendered). Brand color isn't
   known at shimmer time, so paint a neutral animated fill at the same
   geometry so the sidebar height matches what loads in. */
.lp-shimmer-chat-cta {
  height: 168px;
  border-radius: var(--revamp-radius-lg);
  background: linear-gradient(90deg, #e4e7eb 25%, #eef0f3 50%, #e4e7eb 75%);
  background-size: 800px 100%;
  animation: cwShimmer 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* ---- Theme modifiers ----
   The .lp-shimmer surface defaults to white, which mismatches the real
   page bg on standard LP (#f7f8fa grey) and on advanced/careers LPs
   that ship a hero photo with a dark or light overlay. Carrying the
   real page bg through the shimmer kills the bright flash when the
   skeleton dismisses. */

/* Standard LP runs on a light-grey surface. */
.lp-shimmer.lp-shimmer--standard,
.lp-shimmer.lp-shimmer--standard.lp-shimmer--no-hero {
  background: #f7f8fa;
}

/* Photo-bg LPs (advanced + careers with bg image). The pill gradients
   below switch to translucent white so they still read on dark surfaces. */
.lp-shimmer.lp-shimmer--has-bg.lp-shimmer--dark-overlay {
  background: #1f2937;
}
.lp-shimmer.lp-shimmer--has-bg.lp-shimmer--light-overlay {
  background: #e5e7eb;
}

/* On overlay shimmers, only the pills sitting on the page surface
   (content column + chat-CTA) need to switch gradients — pills INSIDE
   .lp-shimmer-form sit on a white card so they keep the default
   light-grey gradient regardless of overlay. Targeting the content
   column and chat-CTA directly avoids the white-on-white invisibility
   bug where dark-overlay made every pill including the form fields
   translucent-white and they disappeared inside the white form card. */
.lp-shimmer.lp-shimmer--dark-overlay .lp-shimmer-content > .lp-shimmer-pill,
.lp-shimmer.lp-shimmer--dark-overlay .lp-shimmer-cta-row > .lp-shimmer-pill,
.lp-shimmer.lp-shimmer--dark-overlay .lp-shimmer-chat-cta {
  background: linear-gradient(90deg, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.08) 75%);
  background-size: 600px 100%;
}

.lp-shimmer.lp-shimmer--light-overlay .lp-shimmer-content > .lp-shimmer-pill,
.lp-shimmer.lp-shimmer--light-overlay .lp-shimmer-cta-row > .lp-shimmer-pill,
.lp-shimmer.lp-shimmer--light-overlay .lp-shimmer-chat-cta {
  background: linear-gradient(90deg, #d1d5db 25%, #e5e7eb 50%, #d1d5db 75%);
  background-size: 600px 100%;
}

.lp-shimmer-form-row {
  display: flex;
  gap: 12px;
}

.lp-shimmer-form-row > .lp-shimmer-pill {
  flex: 1;
}

@media (max-width: 767.98px) {
  .lp-shimmer.lp-shimmer--no-hero {
    padding-top: 52px;
  }
  .lp-shimmer-hero {
    height: 180px;
  }
  .lp-shimmer-hero-inner {
    padding: 0 16px 24px;
    gap: 12px;
  }
  .lp-shimmer-body-wrap {
    margin-top: -24px;
    border-radius: 20px 20px 0 0;
  }
  .lp-shimmer-body {
    grid-template-columns: 1fr;
    padding: 20px 16px 60px;
    gap: 16px;
  }
  /* Mobile: chat-CTA placeholder is shorter because the real card is
     narrower (full viewport width minus 24 padding) and uses 16px
     padding instead of 24px. Approx 132px tall once persona + desc +
     button render at mobile sizes. */
  .lp-shimmer-chat-cta {
    height: 132px;
  }
}


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

/* Call Now variant (CR-2026-04-21) — brand-colored solid button that
   replaces the All Jobs search when a tracking phone is available. */
.jv-navbar-btn.jv-navbar-btn-call {
  background: var(--brand-color, #111827);
  color: var(--brand-text-color, #fff);
  border-color: transparent;
}
.jv-navbar-btn.jv-navbar-btn-call:hover {
  background: var(--brand-color, #111827);
  color: var(--brand-text-color, #fff);
  filter: brightness(0.95);
}

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

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

/* Hero masthead strip — the .jv-hero-content row owns its own background.
   Edge-to-edge feathered gradient (transparent top → opaque bottom) wraps
   the logo + title + location as a unified lower-third, like a film chyron
   or magazine caption strip. Reads as photographic finishing, not chrome.
   Replaces the prior full-image .jv-hero-overlay (a separate caption pill
   was tried at 3a58b9ec and reverted because it read as bolted-on UI).
   backdrop-filter blurs the image behind the strip — this is what kills
   text-in-image bleed-through on busy uploads (e.g. red overlaid type on
   the Crete banner) where opacity alone can't save the title. */
.jv-hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* Tight strip — top padding pulled in so the masthead hugs the
     bottom edge of the hero and leaves the photo readable above it. */
  padding: 14px 40px 18px;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  background:
    /* Side-vignette anchored at the logo corner — grounds the eye at
       bottom-left where the brand mark sits. Peak ~16%, invisible at
       a glance but felt as visual weight. */
    radial-gradient(
      ellipse 50% 110% at 0% 100%,
      rgba(0, 0, 0, 0.16) 0%,
      rgba(0, 0, 0, 0)   65%
    ),
    /* Sharper feather: gradient stays nearly transparent until ~30%,
       then ramps to a heavier dark anchor at the bottom so white
       text reads cleanly even on light/sky banners. The strip itself
       is short, so the bulk of the photo above stays untouched. */
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0)    0%,
      rgba(0, 0, 0, 0.3)  30%,
      rgba(0, 0, 0, 0.65) 65%,
      rgba(0, 0, 0, 0.9)  100%
    );
  backdrop-filter: blur(2px) saturate(115%);
  -webkit-backdrop-filter: blur(2px) saturate(115%);
}

/* Fallback for browsers without backdrop-filter (older Safari):
   the blur is what neutralizes text-in-image (Crete's red overlaid type).
   Without it, push opacity harder so the strip still hides busy detail. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .jv-hero-content {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0)    0%,
      rgba(0, 0, 0, 0.72) 35%,
      rgba(0, 0, 0, 0.94) 100%
    );
  }
}

.jv-hero-logo-wrap {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: #fff;
  /* Padding removed (CR-2026-04-21) — the white gutter made the logo look
     smaller than its container and reintroduced the "shade around logo"
     regression. Logo now fills the full rounded square. */
  padding: 0;
  /* Layered shadow tuned for the dark photo strip below. Top inset
     highlight = catches edge light. Long drop = depth on the strip.
     Tight contact shadow = anchors the card to the surface. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 14px 36px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.jv-hero-logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  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;
  /* Two-layer shadow: the 1px crispens the glyph edge against any
     remaining background frequency; the 12px halo gives the title
     visual depth without bleeding into the location row. */
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.55),
    0 2px 12px rgba(0, 0, 0, 0.45);
  margin: 0;
}

/* Subheadline sits directly under .jv-hero-title inside the hero
   masthead. Quieter weight, body font, lighter shadow — reads as the
   title's supporting line rather than a competing heading. Color stays
   inherited light-on-overlay from .jv-hero-text. */
.jv-hero-subheadline {
  font-family: var(--revamp-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  margin: 4px 0 0;
}
@media (max-width: 767.98px) {
  .jv-hero-subheadline { font-size: 13px; margin-top: 2px; }
}

.jv-hero-loc {
  font-family: var(--revamp-font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
  margin-top: 7px;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* Body wrapper — content max-width was 1080px (CR-2026-04-22). Bumped
   to 1200px (CR-2026-04-27) so the left column gets ~120px more breathing
   room. At 4-up highlight grids that translates to ~30px more text width
   per card, which is the difference between "1 year tractor/trailer
   driving experience" wrapping clean vs. wrapping into 4 ragged lines. */
.jv-body {
  max-width: 1200px;
  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;
}

/* -----------------------------------------------------------------------
   Highlights tile — editorial / data-forward. Icon chip is brand-filled
   at rest (permanent highlight). No hover state on the card itself —
   these tiles are passive informational content, not buttons. Every
   tile renders identically; hierarchy comes from render order (priority
   sort places Pay first, Benefits second, etc.).
   ----------------------------------------------------------------------- */
/* -----------------------------------------------------------------------
   EDITORIAL DATA CALLOUT (CR-2026-04-27 typography pass)

   Job callouts are DATA, not brand moments. The visual hierarchy is
   inverted from the previous "card" treatment: icons recede to a quiet
   marker (26px chip, was 40px), labels become magazine standfirsts
   (9px / +1.1px tracking), and values carry the weight via tight letter-
   spacing (-0.25px) and tabular numerals so currency aligns across cells.
   The cell itself is transparent — it's the parent .jv-highlights--lead
   panel that owns the surface, with hairline dividers between siblings.
   ----------------------------------------------------------------------- */

.jv-hl-card {
  display: flex;
  /* Top-align so the icon chip sits at the same vertical position
     across all cells regardless of value-wrap depth. With center-align,
     a 3-line value pushed the icon down vs. a 1-line value, leaving
     icons drifting at different heights across the strip. Top-align
     locks the icon row to the cell top — clean horizontal rhythm. */
  align-items: flex-start;
  gap: 11px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 13px 16px;
  min-width: 0;
}

/* Optical alignment — icon's vertical center should read aligned with
   the label's cap-height, not its top edge. The 9px uppercase label
   sits ~3-4px below the body's top edge after font metrics, so we lift
   the icon a touch so the chip's geometric center crosses the label
   centerline. Subtle but reads as deliberate vs. mechanically aligned. */
.jv-hl-card > .jv-hl-icon {
  margin-top: -1px;
}

/* Quiet round icon — small enough to read as a typographic flourish, not
   a billboard. The faint inset rim catches light against brand-fill so
   the chip has a subtle dimension at small sizes (loses depth otherwise). */
.jv-hl-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-color, #111827);
  color: var(--brand-text-color, #ffffff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.jv-hl-icon svg {
  width: 13px;
  height: 13px;
  display: block;
  /* Stroke shaved 2 → 1.75 so the icon reads crisp at this small size,
     not chunky. Pairs with the smaller chip to feel intentional. */
  stroke-width: 1.75;
}

.jv-hl-body { min-width: 0; flex: 1 1 auto; }

/* Editorial kicker — tiny caps, wide tracking, low contrast. Reads as
   metadata, not a heading. The 11px is at the floor of legibility but
   the +1.1px tracking opens it up so it doesn't squish. */
.jv-hl-label {
  font-family: var(--revamp-font-body);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--revamp-text-tertiary);
  line-height: 1.1;
  margin-bottom: 5px;
  /* Slight optical adjustment — uppercase glyphs sit higher than lowercase,
     so a tiny lift aligns the cap-height with the icon center. */
  margin-top: -1px;
}

/* Confident value — tighter than the default heading tracking so the
   line reads as one unit, not letters spaced across a card. Tabular
   numerals are critical: the lead panel stacks 4 cells wide and currency
   tokens drift visibly across cells without lining + tabular features. */
.jv-hl-value {
  font-family: var(--revamp-font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--revamp-text-primary);
  line-height: 1.28;
  letter-spacing: -0.25px;
  font-variant-numeric: tabular-nums lining-nums;
  /* Break at word boundaries first; only break mid-word when a single
     token literally cannot fit. Prior `hyphens: auto` was hyphenating
     readable words like "competitive" → "competi-tive" on narrow mobile
     cells, which looked broken even though the container could fit a
     3-line wrap with whole words. */
  word-break: normal;
  overflow-wrap: break-word;
}

/* Staggered entrance — 25ms steps, capped at :nth-child(8) so the tail
   doesn't drag past ~550ms on long lists. Fades + 6px settle. */
@keyframes jv-hl-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.jv-highlights .jv-hl-card {
  animation: jv-hl-enter 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: 175ms; /* default for :nth-child(8) and beyond */
}
.jv-highlights .jv-hl-card:nth-child(1) { animation-delay:   0ms; }
.jv-highlights .jv-hl-card:nth-child(2) { animation-delay:  25ms; }
.jv-highlights .jv-hl-card:nth-child(3) { animation-delay:  50ms; }
.jv-highlights .jv-hl-card:nth-child(4) { animation-delay:  75ms; }
.jv-highlights .jv-hl-card:nth-child(5) { animation-delay: 100ms; }
.jv-highlights .jv-hl-card:nth-child(6) { animation-delay: 125ms; }
.jv-highlights .jv-hl-card:nth-child(7) { animation-delay: 150ms; }

@media (prefers-reduced-motion: reduce) {
  .jv-highlights .jv-hl-card {
    animation: none;
  }
  .jv-hl-card,
  .jv-hl-card::before,
  .jv-hl-icon {
    transition: none;
  }
}

/* -----------------------------------------------------------------------
   Top cap + inline expansion. Default hides anything past the cap:
     desktop → 4 tiles, mobile → 2 tiles (mobile rule lives in the media
     query below). The `.jv-highlights--expanded` class on the grid
     reveals everything; the toggle button flips its aria-expanded.
   ----------------------------------------------------------------------- */
.jv-highlights--top:not(.jv-highlights--expanded) .jv-hl-card:nth-child(n+5) {
  display: none;
}

/* Show-more toggle — sits inside the highlights grid as the last cell
   so it lands in the same row as the last visible tile. Brand-filled by
   default (no hover shift — the default IS the accented state). Chevron
   rotates on expand; tiny :active brightness tick provides touch feedback. */
.jv-hl-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  background: var(--brand-color, #111827);
  border: 1px solid var(--brand-color, #111827);
  border-radius: 999px;
  font-family: var(--revamp-font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-text-color, #ffffff);
  cursor: pointer;
  /* Grid positioning — pill hugs its own width and centers within the
     grid cell it occupies (naturally lands next to the last tile). */
  justify-self: center;
  align-self: center;
  width: fit-content;
  /* currentColor inheritance carries the chevron stroke. */
}
.jv-hl-more:active {
  filter: brightness(0.92);
}
.jv-hl-more-chevron {
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.jv-hl-more[aria-expanded="true"] .jv-hl-more-chevron {
  transform: rotate(180deg);
}
.jv-hl-more-label--expanded { display: none; }
.jv-hl-more[aria-expanded="true"] .jv-hl-more-label--collapsed { display: none; }
.jv-hl-more[aria-expanded="true"] .jv-hl-more-label--expanded { display: inline; }

/* Hidden count differs by viewport since the caps differ. Span visibility
   swaps at the breakpoint. .jv-hl-more--mobile-only hides the button on
   desktop when desktop shows everything already. */
.jv-hl-more-count--m { display: none; }
@media (min-width: 768px) {
  .jv-hl-more--mobile-only { display: none; }
}

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

/* Desktop: left column wraps top + bottom in a flex stack so the
   description card sits flush under the summary. Sidebar is the
   second grid item (col 2). Mobile overrides flatten this wrapper. */
.jv-main-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0; /* prevent grid item overflow when description is wide */
}

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

/* Inline emphasis only — earlier this rule forced display:block + block
   margins on the assumption that source HTML wraps section headers in
   <strong>. In practice descriptions use <strong> for inline values
   ("Top pay up to <strong>$98K/year</strong>"), and forcing block
   shredded paragraphs into orphan fragments. Keep weight + color so
   bold still reads as bold; let <strong> stay inline. */
.jv-desc-content strong,
.jv-desc-content b {
  font-weight: 700;
  color: var(--revamp-text-primary);
}

.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 — sticky pane with its own scroll so long forms don't force
   page-level scroll (which dragged the left description along and clipped
   the bottom of the form at page-end). Scoped to desktop; mobile override
   at :5179 resets to position:static. */
.jv-sidebar {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
  /* Leave room on the right so the scrollbar doesn't overlap rounded card edges. */
  padding-right: 4px;
}
.jv-sidebar::-webkit-scrollbar {
  width: 6px;
}
.jv-sidebar::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}
.jv-sidebar::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}
.jv-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

/* 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: 4px;
  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;
}

/* Force 2-col grid — flex-wrap was stacking items full-width because the
   form config doesn't set displayas="buttons", so v1's width:49% rule
   never applied. Grid removes the dependency on form attributes. */
.jv-apply-card .holdSingleChoice,
.jv-apply-card .holdMuiltpleChoice {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.jv-apply-card .holdSingleChoice .form-check,
.jv-apply-card .holdMuiltpleChoice .form-check {
  width: auto !important;
  min-width: 0 !important;
}

.jv-apply-card .holdSingleChoice .form-check-label,
.jv-apply-card .holdMuiltpleChoice .form-check-label {
  width: 100% !important;
  box-sizing: border-box !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) {
  /* Mobile hero: size to banner's natural aspect ratio (no crop). min-height
     keeps visual weight when the upload is short; max-height caps absurdly
     tall portraits. The masthead strip (.jv-hero-content) is absolutely
     positioned at bottom, so it anchors correctly regardless of rendered height. */
  .jv-hero { height: auto; min-height: 140px; max-height: 60vh; }
  .jv-hero-img { height: auto; max-height: 60vh; object-fit: contain; }
  .jv-hero-content { padding: 10px 18px 12px; gap: 12px; }
  .jv-hero-logo-wrap { width: 48px; height: 48px; border-radius: 12px; }
  .jv-hero-title { font-size: 19px; letter-spacing: -0.2px; line-height: 1.25; }
  .jv-hero-loc { font-size: 12.5px; margin-top: 3px; }
  .jv-body { padding: 16px; padding-bottom: 80px; /* room for fixed CTA */ }
  .jv-highlights { grid-template-columns: 1fr 1fr; gap: 8px; }
  /* Mobile top cap = 2. Overrides the desktop n+5 cap (higher specificity
     via the @media compound would not apply, so we override by selector). */
  .jv-highlights--top:not(.jv-highlights--expanded) .jv-hl-card:nth-child(n+3) {
    display: none;
  }
  /* Mobile callout typography — slightly more breathing room than
     desktop since 2-up cells on a small viewport are wider per card.
     Editorial scale preserved: tiny labels, tight-tracked values. */
  .jv-hl-card { padding: 14px 14px; gap: 11px; }
  .jv-hl-icon { width: 28px; height: 28px; }
  .jv-hl-icon svg { width: 14px; height: 14px; }
  .jv-hl-label {
    font-size: 9px;
    letter-spacing: 1px;
    margin-bottom: 5px;
  }
  .jv-hl-value {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.28;
    letter-spacing: -0.2px;
  }
  /* Rest tiles — tighter on mobile to match the 3-up grid density. */
  .jv-highlights--rest .jv-hl-card {
    padding: 11px 12px;
    gap: 10px;
  }
  .jv-highlights--rest .jv-hl-icon { width: 24px; height: 24px; }
  .jv-highlights--rest .jv-hl-icon svg { width: 12px; height: 12px; }
  /* Show-more: span the full row on mobile (row 1 is always full with 2
     tiles), and shrink the pill to match mobile density. */
  .jv-hl-more {
    grid-column: 1 / -1;
    padding: 6px 14px;
    font-size: 11.5px;
  }
  .jv-hl-more-count--d { display: none; }
  .jv-hl-more-count--m { display: inline; }
  .jv-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* Flatten the col-1 wrapper so its children become direct grid items.
     CSS `order` then puts the form between summary and full description:
     jv-main-top (DOM 1, order 0) → jv-sidebar (DOM 3, order 0)
     → jv-main-bottom (DOM 2, order 1, pushed last). */
  .jv-main-col {
    display: contents;
  }
  .jv-main-bottom {
    order: 1;
  }
  .jv-sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }
  .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
     ============================================ */

  /* Details pane — edge-to-edge on mobile */
  #details-container {
    padding: 0 !important;
    margin: 0 !important;
  }
  #desktopJobDetailsContainer {
    padding: 0 !important;
  }
  .cw-detail-container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  /* Hero banner */
  .cw-banner-wrapper {
    height: 180px !important;
    width: 100% !important;
    border-radius: 0 !important;
  }

  .cw-banner-img {
    height: 180px !important;
    width: 100% !important;
    border-radius: 0 !important;
  }

  /* Form radio/checkbox options — 2 column grid on mobile */
  .holdSingleChoice,
  .holdMuiltpleChoice {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .holdSingleChoice .form-check,
  .holdMuiltpleChoice .form-check {
    margin: 0 !important;
    width: 100% !important;
  }
  .holdSingleChoice .form-check-label,
  .holdMuiltpleChoice .form-check-label {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !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 — show first 4 on mobile, expand with toggle */
  .cw-highlights {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .cw-highlights:not(.cw-hl-expanded) .cw-hl-card:nth-child(n+5) { display: none; }

  /* 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-lg) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: var(--lp-text-body-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !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.2 !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: 7px 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #f8f9fa !important;
  font-size: 12.5px !important;
  color: #4b5563 !important;
  cursor: pointer !important;
  width: 100% !important;
  line-height: 1.4 !important;
}

/* File type hint text — inline with label so the file group stays compact */
#customForm .form-group .jv-file-hint,
#customForm .form-group span[style*="font-style:italic"] {
  font-size: 11px !important;
  color: #9ca3af !important;
  display: inline-block !important;
  margin-left: 6px !important;
  margin-top: -2px !important;
  margin-bottom: 6px !important;
  vertical-align: middle !important;
}

/* Put the file-type hint on the same row as its label */
#customForm .form-group:has(> .jv-file-hint) > label:not(.form-check-label) {
  display: inline-block !important;
  margin-bottom: 6px !important;
  margin-right: 0 !important;
}

#customForm .form-group:has(> .jv-file-hint) > input[type="file"] {
  display: block !important;
  clear: both !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;
}


/* ============================================
   ADVANCED LP REVAMP (advancedLpForm.php — type 1)
   Shares .lp-revamp class with lpForm.php
   Uses new structure: .lp-revamp-header, .lp-revamp-grid, etc.
   ============================================ */

/* ---- Navbar ---- */
.lp-revamp-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  width: 100%;
}

/* White navbar — clean background for logo visibility */
.lp-revamp-header.lp-brand-nav {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Logo always shown as-is */
.lp-revamp-header.lp-brand-nav .lp-revamp-nav-logo img {
  filter: none;
}

/* Phone pill — solid brand-colored button matching the MJLP V2 nav call CTA
   (.jv-navbar-btn.jv-navbar-btn-call). Earlier this rule shipped a gray pill,
   which read as a secondary chip rather than the primary Call CTA. */
.lp-revamp-header.lp-brand-nav .lp-nav-phone-pill {
  background: var(--lp-brand, var(--brand-color, #da2528)) !important;
  color: var(--lp-brand-text, var(--brand-text-color, #fff)) !important;
  border: 1px solid transparent !important;
}

.lp-revamp-header.lp-brand-nav .lp-nav-phone-pill:hover {
  background: var(--lp-brand, var(--brand-color, #da2528)) !important;
  color: var(--lp-brand-text, var(--brand-text-color, #fff)) !important;
  filter: brightness(0.95);
}

/* Hamburger menu — always dark on white navbar */
.lp-revamp-header.lp-brand-nav .fa-bars {
  color: #333 !important;
}

/* Nav actions wrapper — keeps phone pill + hamburger menu together on the
   right side of the nav so .lp-revamp-nav-inner's space-between distributes
   logo to the left edge and this entire action group to the right edge. */
.lp-revamp-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Hamburger menu button — soft pill that lives next to the phone CTA.
   Uses 1px subtle border by default (kills the heavy default browser
   button chrome) and animates on hover + press for tactile feedback.
   Focus ring is brand-tinted on keyboard focus so it stays accessible
   without painting the default thick browser outline. */
.lp-revamp-header .lp-nav-menu-btn,
.lp-revamp-header .lp-nav-menu-btn:hover,
.lp-revamp-header .lp-nav-menu-btn:focus,
.lp-revamp-header .lp-nav-menu-btn:focus-visible,
.lp-revamp-header .lp-nav-menu-btn:active,
.lp-revamp-header .lp-nav-menu-btn[aria-expanded],
.lp-revamp-header .lp-nav-menu-btn[aria-expanded="true"] {
  /* Nuke native button chrome across every state so no border /
     outline / focus ring can leak through. !important on each so any
     Bootstrap .btn-* / .dropdown-toggle rule that might be matched
     can't override. */
  border: 0 none transparent !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  outline: 0 none transparent !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

.lp-revamp-header .lp-nav-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  color: #374151;
  /* Color-only transition — no transforms. Transforms on the trigger
     interfered with Bootstrap's Popper positioning of the dropdown,
     causing the menu to stutter into place on open. */
  transition: background 0.15s ease, color 0.15s ease;
}
.lp-revamp-header .lp-nav-menu-btn:hover {
  background: #f3f4f6;
  color: #111827;
}
.lp-revamp-header .lp-nav-menu-btn:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-brand, #111827) 22%, transparent);
}
/* Open state — brand-color fill while the dropdown is showing. The
   [aria-expanded] attribute toggles back to false on Bootstrap close,
   so the fill clears automatically once the menu is out of scope. */
.lp-revamp-header .lp-nav-menu-btn[aria-expanded="true"] {
  background: var(--lp-brand, #111827);
  color: var(--lp-brand-text, #fff);
}
.lp-revamp-header .lp-nav-menu-btn[aria-expanded="true"] .fa-bars {
  color: var(--lp-brand-text, #fff) !important;
}
.lp-revamp-header .lp-nav-menu-btn .fa-bars {
  font-size: 18px;
  line-height: 1;
}

/* Dropdown menu chrome — V2 surface (rounded card, soft shadow) over the
   Bootstrap default flat menu so the surfaces match the rest of the LP.
   No enter animation: the keyframe-driven scale + translate was running
   against Popper.js's positioning math, leaving the menu visibly snapping
   into place after the first frame. Static appearance reads as instant
   and clean. */
.lp-revamp-header .lp-nav-menu .dropdown-menu {
  border: 1px solid var(--revamp-border-light, #e5e7eb);
  border-radius: var(--revamp-radius-md, 12px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.04);
  padding: 6px;
  margin-top: 10px !important;
  /* Auto-fit to the longest item label. !important because
     multi-job-landing-page stylesheets (v1 + v2) set
     .dropdown-menu { width: 100% } globally — that stretches the menu
     to its 40px-wide .lp-nav-menu parent and collapses the dropdown.
     Cap at min(320px, calc(100vw - 24px)) so it can't grow past the
     viewport on mobile. */
  width: max-content !important;
  min-width: 220px !important;
  max-width: min(320px, calc(100vw - 24px)) !important;
}

.lp-revamp-header .lp-nav-menu .dropdown-menu .dropdown-item {
  padding: 10px 12px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  cursor: pointer;
  /* Allow long labels to wrap inside the menu instead of getting clipped.
     Bootstrap's .dropdown-item default is white-space: nowrap which
     truncated names like "Dollar General CDL Jobs" / "DG Fleet Terminal
     Locations" past the menu's right edge. */
  white-space: normal;
  line-height: 1.35;
  transition: background 0.14s ease, color 0.14s ease;
}
.lp-revamp-header .lp-nav-menu .dropdown-menu .dropdown-item:hover {
  background: var(--lp-brand, rgba(0,0,0,0.04));
  color: var(--lp-brand-text, #1f2937);
}

.lp-revamp-header.lp-dark {
  background: #1a1a1a;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.lp-revamp-nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.lp-revamp-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.lp-revamp-nav-logo img {
  height: 34px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

.lp-revamp-header .lp-nav-phone-pill {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  border-radius: 9999px !important;
  background: var(--lp-brand, #da2528) !important;
  color: var(--lp-brand-text, #fff) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
  white-space: nowrap !important;
}

.lp-revamp-header .lp-nav-phone-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  text-decoration: none;
}

/* ---- Landing Page Hero Banner ---- */
.lp-landing-hero {
  position: relative;
  height: 240px;
  overflow: hidden;
  width: 100%;
}

.lp-landing-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

.lp-landing-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.3) 45%, rgba(0,0,0,0.18) 100%);
}

.lp-landing-hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 40px 32px;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
}

.lp-landing-logo {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lp-landing-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 11px;
}

.lp-landing-hero-text h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
  margin: 0;
}

.lp-landing-hero-loc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  margin-top: 6px;
  letter-spacing: 0;
}

/* Hero → content overlap transition */
.lp-landing-hero + .lp-revamp {
  margin-top: -32px;
  position: relative;
  z-index: 1;
  border-radius: 24px 24px 0 0;
}

.lp-landing-hero + .lp-revamp::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: #f5f6f8;
  border-radius: 24px 24px 0 0;
  z-index: -1;
}

/* ---- Inline CTA Buttons (Apply By Chat / Phone) ----
   Hidden by default everywhere — the right-column form card surfaces Apply By Chat
   on desktop and the bottom fixed CTA bar handles Call + Chat on mobile, so this
   hero-area pair is redundant in both viewports. */
.lp-revamp .lp-inline-ctas {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.lp-revamp .lp-inline-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--lp-text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  background: var(--lp-brand, #111827);
  color: var(--lp-brand-text, #fff);
  border: 2px solid var(--lp-brand, #111827);
}

.lp-revamp .lp-inline-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  text-decoration: none;
  color: var(--lp-brand-text, #fff);
}

.lp-revamp .lp-inline-cta-btn--outline {
  background: transparent;
  color: var(--lp-text, #111827);
  border: 2px solid #d1d5db;
}

.lp-revamp .lp-inline-cta-btn--outline:hover {
  border-color: #9ca3af;
  background: #f9fafb;
  color: var(--lp-text, #111827);
}

@media (max-width: 767.98px) {
  /* Hide inline CTAs on mobile — bottom bar handles Call + Chat */
  .lp-revamp .lp-inline-ctas {
    display: none !important;
  }
}

/* Read more button — hidden on desktop. Explicit font-family pins it to
   Inter so the company-injected `* { font-family: <bodyFont> }` rule can't
   leak it back to Satoshi-Regular when shown on mobile. */
.lp-revamp .lp-read-more-btn {
  display: none;
  font-family: 'Inter', sans-serif;
  font-size: var(--lp-text-body-sm);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
}

/* ---- LP Mobile Bottom CTA Bar ---- */
.lp-mobile-cta {
  display: none;
}

@media (max-width: 767.98px) {
  .lp-mobile-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 500;
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  }

  .lp-mcta-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: var(--lp-text-sm);
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
  }

  .lp-mcta-call {
    background: #f3f4f6;
    color: #111827;
  }

  .lp-mcta-call:hover {
    background: #e5e7eb;
    color: #111827;
    text-decoration: none;
  }

  .lp-mcta-chat,
  .lp-mcta-apply {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  }
  /* When all three buttons share the bar (Call | Apply | Chat), give
     each equal width but tighten the label gap so icon + text don't
     wrap on the smallest phones. The flex:1 from .lp-mcta-btn already
     handles equal share. */
  .lp-mobile-cta .lp-mcta-apply {
    /* Same surface as chat (brand pill) — both are primary conversion
       actions, distinguished by icon + label, not by color hierarchy.
       Background + color are set inline from PHP. */
  }

  /* Hide ALL floating widgets on mobile — bottom bar handles everything */
  .phone-widget,
  #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;
  }

  /* Restore chat container only when chat is 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;
  }

}

/* No-hero shimmer variant */
.lp-shimmer--no-hero {
  background: #fff;
}

/* ---- Background image overlay ---- */
.lp-revamp.lp-has-bg {
  position: relative;
  background-color: transparent;
}

.lp-revamp.lp-has-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.lp-revamp.lp-dark-overlay::before {
  background: rgba(0, 0, 0, 0.5);
}

.lp-revamp.lp-light-overlay::before {
  background: rgba(255, 255, 255, 0.7);
}

.lp-revamp.lp-has-bg .lp-revamp-grid {
  position: relative;
  z-index: 1;
}

/* Dark overlay: section cards get glass treatment for advanced + careers LPs.
   Standard LP gets a white-card override further down (`.lp-standard`-scoped)
   because that surface mirrors MJLP V2's white-on-photo aesthetic, while
   advanced + careers keep the photo-driven glass card look. Border radius +
   visible 1px translucent-white border match the form-card / chat-cta chrome
   on the right column so the whole page reads as one rounded-card system.
   Drop-shadow removed — glass bg + backdrop-blur + visible border already
   carry depth against the photo, and multi-layer shadows just compete with
   the hero imagery underneath. */
.lp-revamp.lp-dark-overlay .lp-revamp-body div[style*="margin-bottom:3em"],
.lp-revamp.lp-dark-overlay .lp-revamp-body div[style*="margin-bottom: 3em"] {
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--revamp-radius-lg) !important;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: none !important;
}

.lp-revamp.lp-dark-overlay .lp-revamp-body div[style*="margin-bottom:3em"] > div[style*="align-items: center"][style*="justify-content: flex-start"],
.lp-revamp.lp-dark-overlay .lp-revamp-body div[style*="margin-bottom: 3em"] > div[style*="align-items: center"][style*="justify-content: flex-start"] {
  border-bottom-color: rgba(255,255,255,0.1) !important;
}

.lp-revamp.lp-dark-overlay .lp-revamp-body div[style*="margin-bottom:3em"] > div[style*="align-items: center"][style*="justify-content: flex-start"] > div[style*="font-size"],
.lp-revamp.lp-dark-overlay .lp-revamp-body div[style*="margin-bottom: 3em"] > div[style*="align-items: center"][style*="justify-content: flex-start"] > div[style*="font-size"] {
  color: #fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Body-section header icons on dark-overlay LPs use the content-text
   contrast color (#fff on dark overlay) instead of the brand color.
   Previously hard-pinned to var(--lp-brand), which works for bright
   brands (red, orange, yellow) but disappears for dark brands
   (Freymiller's #263876 navy, etc.) when painted against the dark
   photo overlay — contrast dropped to ~1.5:1. --content-text is set
   by the partial to #fff on dark-overlay LPs and #262626 on light, so
   the icon always contrasts with the surface no matter what brand
   color the company ships. */
.lp-revamp.lp-dark-overlay .lp-revamp-body div[style*="margin-bottom:3em"] > div[style*="align-items: center"][style*="justify-content: flex-start"] i,
.lp-revamp.lp-dark-overlay .lp-revamp-body div[style*="margin-bottom: 3em"] > div[style*="align-items: center"][style*="justify-content: flex-start"] i {
  color: var(--content-text, #fff) !important;
}

.lp-revamp.lp-dark-overlay .lp-revamp-body p {
  color: rgba(255,255,255,0.92) !important;
  font-size: var(--lp-text-sm) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.lp-revamp.lp-dark-overlay .lp-revamp-body li {
  color: rgba(255,255,255,0.92) !important;
  font-size: var(--lp-text-sm) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

/* Standard LP with a dark hero overlay — white card + dark text, but the
   same MJLP-aligned chrome as the rest of standard LP: 1px hairline
   border, 16px radius, no drop-shadow. Wins over the dark-overlay glass
   rule above via `.lp-standard.lp-dark-overlay` specificity (0,3,2) >
   the base dark-overlay selector (0,2,2). */
.lp-revamp.lp-standard.lp-dark-overlay .lp-revamp-body div[style*="margin-bottom:3em"],
.lp-revamp.lp-standard.lp-dark-overlay .lp-revamp-body div[style*="margin-bottom: 3em"] {
  background: #fff !important;
  border: 1px solid var(--revamp-border-medium) !important;
  border-radius: var(--revamp-radius-lg) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none !important;
}

.lp-revamp.lp-standard.lp-dark-overlay .lp-revamp-body div[style*="margin-bottom:3em"] > div[style*="align-items: center"][style*="justify-content: flex-start"],
.lp-revamp.lp-standard.lp-dark-overlay .lp-revamp-body div[style*="margin-bottom: 3em"] > div[style*="align-items: center"][style*="justify-content: flex-start"] {
  border-bottom-color: #f0f1f4 !important;
}

.lp-revamp.lp-standard.lp-dark-overlay .lp-revamp-body div[style*="margin-bottom:3em"] > div[style*="align-items: center"][style*="justify-content: flex-start"] > div[style*="font-size"],
.lp-revamp.lp-standard.lp-dark-overlay .lp-revamp-body div[style*="margin-bottom: 3em"] > div[style*="align-items: center"][style*="justify-content: flex-start"] > div[style*="font-size"] {
  color: var(--lp-text, #111827) !important;
  text-shadow: none !important;
}

.lp-revamp.lp-standard.lp-dark-overlay .lp-revamp-body p,
.lp-revamp.lp-standard.lp-dark-overlay .lp-revamp-body li {
  color: var(--lp-text, #111827) !important;
  text-shadow: none !important;
}
/* Generic #jobDescription h1/h2/h3 rule at line 2730 has ID-level specificity
   (1,0,1) and !important — it sets color: var(--revamp-text-primary) (dark)
   and font-size: 15px. On dark-overlay LPs that paints CMS-authored body
   headings dark-on-dark and dwarfs them at 15px. Boost specificity here by
   chaining through #jobDescription so we win on (1,2,1) > (1,0,1). */
.lp-revamp.lp-dark-overlay #jobDescription h1,
.lp-revamp.lp-dark-overlay #jobDescription h2,
.lp-revamp.lp-dark-overlay #jobDescription h3,
.lp-revamp.lp-dark-overlay .lp-revamp-body h1,
.lp-revamp.lp-dark-overlay .lp-revamp-body h2,
.lp-revamp.lp-dark-overlay .lp-revamp-body h3 {
  color: #fff !important;
  border-top-color: rgba(255,255,255,0.15) !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Standard LP white card override — dark text on white card. */
.lp-revamp.lp-standard.lp-dark-overlay #jobDescription h1,
.lp-revamp.lp-standard.lp-dark-overlay #jobDescription h2,
.lp-revamp.lp-standard.lp-dark-overlay #jobDescription h3,
.lp-revamp.lp-standard.lp-dark-overlay .lp-revamp-body h1,
.lp-revamp.lp-standard.lp-dark-overlay .lp-revamp-body h2,
.lp-revamp.lp-standard.lp-dark-overlay .lp-revamp-body h3 {
  color: var(--lp-text, #111827) !important;
  border-top-color: #f0f1f4 !important;
  text-shadow: none !important;
}
.lp-revamp.lp-standard.lp-dark-overlay .lp-revamp-body strong {
  color: var(--lp-text, #111827) !important;
}

/* Body section heading sizing — override the generic 15px from line 2730 so
   CMS-authored h1/h2/h3 inside body content actually read as section
   headings. Applies to all LP V2 surfaces regardless of overlay. */
.lp-revamp #jobDescription h1,
.lp-revamp #jobDescription h2,
.lp-revamp #jobDescription h3 {
  font-size: 22px !important;
  line-height: 1.3 !important;
}
@media (max-width: 767.98px) {
  .lp-revamp #jobDescription h1,
  .lp-revamp #jobDescription h2,
  .lp-revamp #jobDescription h3 {
    font-size: 18px !important;
  }
}
.lp-revamp.lp-dark-overlay .lp-revamp-body strong { color: #fff !important; }

/* Dark overlay: list bullet uses brand color for visibility */
.lp-revamp.lp-dark-overlay .lp-revamp-body li::before {
  background: var(--lp-brand, #da2528) !important;
}

/* Dark overlay: headline and instructions */
.lp-revamp.lp-dark-overlay .lp-revamp-headline {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.lp-revamp.lp-dark-overlay .lp-revamp-subheadline,
.lp-revamp.lp-dark-overlay .lp-revamp-instructions {
  color: rgba(255,255,255,0.9) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Dark overlay: inline CTA outline button */
.lp-revamp.lp-dark-overlay .lp-inline-cta-btn--outline {
  color: #fff !important;
  border-color: rgba(255,255,255,0.35) !important;
}

.lp-revamp.lp-dark-overlay .lp-inline-cta-btn--outline:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.5) !important;
}

/* Dark overlay: plain-text card gets glass treatment too */
.lp-revamp.lp-dark-overlay .lp-revamp-body#jobDescription:not(:has(div[style*="margin-bottom"])):not(:empty) {
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  /* Same 3-stack as the section cards above for elevation consistency. */
  box-shadow:
    0 1px 2px rgba(0,0,0,0.18),
    0 8px 24px rgba(0,0,0,0.24),
    0 20px 48px rgba(0,0,0,0.2) !important;
}

.lp-revamp.lp-dark-overlay .lp-revamp-body p > strong:only-child,
.lp-revamp.lp-dark-overlay .lp-revamp-body p > b:only-child {
  color: #fff !important;
  border-top-color: rgba(255,255,255,0.1) !important;
}

/* Form card stays white on any overlay */
.lp-revamp.lp-has-bg .lp-revamp-form-card {
  background: #fff !important;
}

/* ---- Page atmosphere ---- */
.lp-revamp {
  background-color: #f5f6f8;
}

.lp-revamp.lp-has-bg {
  background-color: #1a1a1a;
}

/* ---- Main container override for advancedLP ----
   Form column is 360px so .lp-revamp-form-card renders at the same width
   as MJLP V2 .cw-apply-card on its standalone job-application-view (the
   reference surface). With both forms sharing 44 / 16 / 14 input spec, the
   matching column width makes the visual proportions read identical. */
.lp-revamp .lp-revamp-grid {
  display: grid !important;
  grid-template-columns: 1fr 360px !important;
  gap: 36px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 28px 40px 60px !important;
  align-items: start !important;
}

/* Standard LP — hero + clean white body, mirroring the MJLP V2 job surface.
   The .lp-standard scope avoids inheriting dark-overlay treatment used by
   the careers / advanced LP variants and lets the .jv-hero ride above the
   grid as an edge-to-edge masthead, exactly like the MJLP V2 hero. */
.lp-revamp.lp-standard {
  background: #f7f8fa;
}
.lp-jv-hero {
  margin: 0 auto;
}

/* Standard LP nav — edge-to-edge to match MJLP V2's .jv-navbar exactly.
   Default LP nav is max-width 1200px / 40px gutter (constrained, centered),
   which leaves the logo floating with whitespace while the hero banner runs
   edge-to-edge below — visually misaligned. On .lp-standard-nav, drop the
   container max-width so the logo sits flush at the 28px page rail like
   the MJLP V2 reference. Logo also bumped to 36px to match jv-navbar. */
.lp-revamp-header.lp-standard-nav .lp-revamp-nav {
  max-width: none !important;
  padding: 0 28px !important;
}
.lp-revamp-header.lp-standard-nav .lp-revamp-nav-inner {
  height: 60px;
}
.lp-revamp-header.lp-standard-nav .lp-revamp-nav-logo img {
  height: 36px;
  max-width: 200px;
}
@media (max-width: 767.98px) {
  .lp-revamp-header.lp-standard-nav .lp-revamp-nav {
    padding: 0 16px !important;
  }
  .lp-revamp-header.lp-standard-nav .lp-revamp-nav-logo img {
    height: 30px;
  }
}

/* Prevent grid children from overflowing their columns */
.lp-revamp .lp-revamp-grid > * {
  min-width: 0;
}

.lp-revamp .lp-revamp-content {
  overflow: hidden;
}

/* ---- Left Column: Content ---- */
.lp-revamp .lp-revamp-content {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.lp-revamp .lp-revamp-headline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--lp-text-display);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: var(--lp-text, #111827);
  margin: 0 0 16px 0;
}

/* Above-fold headline block gets white background for visual weight */
.lp-revamp .lp-revamp-content > .lp-revamp-headline:first-child {
  padding: 0 0 4px;
}

.lp-revamp .lp-revamp-subheadline {
  font-family: 'Inter', sans-serif;
  font-size: var(--lp-text-md);
  line-height: 1.6;
  color: #4b5563;
  margin: -12px 0 20px;
  font-weight: 500;
}

/* When the subheadline / instructions is the first child of the content
   column (e.g. on standard LP where the H1 has moved into the hero strip),
   drop the negative top margin that was designed to sit it tight under
   the headline — otherwise it pulls itself up under the hero and clips. */
.lp-revamp .lp-revamp-content > .lp-revamp-subheadline:first-child,
.lp-revamp .lp-revamp-content > .lp-revamp-instructions:first-child {
  margin-top: 0 !important;
}

.lp-revamp .lp-revamp-instructions {
  font-family: 'Inter', sans-serif;
  font-size: var(--lp-text-md);
  line-height: 1.6;
  color: var(--lp-text, #4b5563);
  margin-bottom: 24px;
  opacity: 0.85;
}

/* ── Author-driven hero typography (CMS pours hN / b / i / p) ──────────────
   Some LPs ship the entire hero block (title + italic tagline + intro) inside
   pageFormInstructions instead of separate page_headline / subheadline fields.
   The company-level `* { font-family: <bodyFont> }` rule then wins on raw
   <b> / <i> / <strong> / <em> children because they have no own font rule,
   leaving the title in Plus Jakarta Sans but its inline emphasis in Roboto —
   two fonts on one line.

   Force the design-system family on every text-bearing child here. Italics
   come through as Plus Jakarta Sans italic — a real italic by design, not a
   serif fallback from the system. Color + shadow tuned per overlay.
*/
.lp-revamp .lp-revamp-instructions h1,
.lp-revamp .lp-revamp-instructions h2,
.lp-revamp .lp-revamp-instructions h3,
.lp-revamp .lp-revamp-instructions h4,
.lp-revamp .lp-revamp-instructions h5,
.lp-revamp .lp-revamp-instructions h6,
.lp-revamp .lp-revamp-instructions b,
.lp-revamp .lp-revamp-instructions strong {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.4px !important;
  line-height: 1.18 !important;
  margin: 0 0 6px !important;
}

.lp-revamp .lp-revamp-instructions h1 { font-size: clamp(28px, 6vw, 40px) !important; }
.lp-revamp .lp-revamp-instructions h2 { font-size: clamp(26px, 5.4vw, 36px) !important; }
.lp-revamp .lp-revamp-instructions h3,
.lp-revamp .lp-revamp-instructions h4 { font-size: clamp(22px, 5vw, 30px) !important; }
.lp-revamp .lp-revamp-instructions h5,
.lp-revamp .lp-revamp-instructions h6 { font-size: clamp(18px, 4vw, 22px) !important; }

/* Italic emphasis (e.g. tagline under the headline). Keep the design-system
   font but engage its italic axis at a lighter weight + open tracking so it
   reads as an editorial subtitle, not a font swap. */
.lp-revamp .lp-revamp-instructions i,
.lp-revamp .lp-revamp-instructions em {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
}

/* If an italic is the only child of a heading row (TMC pattern:
   <h4><i>Tagline</i></h4>), trim the heading weight so the italic carries
   the line — otherwise the h4's 800 weight + italic looks like an oblique
   heavy display, not a subtitle. */
.lp-revamp .lp-revamp-instructions h1:has(> i:only-child),
.lp-revamp .lp-revamp-instructions h2:has(> i:only-child),
.lp-revamp .lp-revamp-instructions h3:has(> i:only-child),
.lp-revamp .lp-revamp-instructions h4:has(> i:only-child),
.lp-revamp .lp-revamp-instructions h5:has(> i:only-child),
.lp-revamp .lp-revamp-instructions h6:has(> i:only-child) {
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  margin-bottom: 14px !important;
}

.lp-revamp .lp-revamp-instructions p,
.lp-revamp .lp-revamp-instructions span,
.lp-revamp .lp-revamp-instructions li,
.lp-revamp .lp-revamp-instructions div {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
}

.lp-revamp .lp-revamp-instructions p {
  font-size: 16px !important;
  line-height: 1.55 !important;
  margin: 0 0 12px !important;
}

/* Dark overlay: maximize legibility on photo backgrounds. Drop the parent
   opacity (it dimmed everything to 0.85 which compounds with photo midtones)
   and instead set per-element color + text-shadow. Title pops white with a
   crisp shadow, italic subtitle slightly muted, body copy near-white. */
.lp-revamp.lp-dark-overlay .lp-revamp-instructions {
  opacity: 1 !important;
}

.lp-revamp.lp-dark-overlay .lp-revamp-instructions h1,
.lp-revamp.lp-dark-overlay .lp-revamp-instructions h2,
.lp-revamp.lp-dark-overlay .lp-revamp-instructions h3,
.lp-revamp.lp-dark-overlay .lp-revamp-instructions h4,
.lp-revamp.lp-dark-overlay .lp-revamp-instructions h5,
.lp-revamp.lp-dark-overlay .lp-revamp-instructions h6,
.lp-revamp.lp-dark-overlay .lp-revamp-instructions b,
.lp-revamp.lp-dark-overlay .lp-revamp-instructions strong {
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}

.lp-revamp.lp-dark-overlay .lp-revamp-instructions i,
.lp-revamp.lp-dark-overlay .lp-revamp-instructions em {
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

.lp-revamp.lp-dark-overlay .lp-revamp-instructions p,
.lp-revamp.lp-dark-overlay .lp-revamp-instructions span,
.lp-revamp.lp-dark-overlay .lp-revamp-instructions li {
  color: rgba(255,255,255,0.94) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Same font normalization for .lp-revamp-subheadline (when authors do use the
   dedicated subheadline field — same `* { font-family: Roboto }` hazard). */
.lp-revamp .lp-revamp-subheadline b,
.lp-revamp .lp-revamp-subheadline strong,
.lp-revamp .lp-revamp-subheadline h1,
.lp-revamp .lp-revamp-subheadline h2,
.lp-revamp .lp-revamp-subheadline h3,
.lp-revamp .lp-revamp-subheadline h4,
.lp-revamp .lp-revamp-subheadline h5,
.lp-revamp .lp-revamp-subheadline h6 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.lp-revamp .lp-revamp-subheadline i,
.lp-revamp .lp-revamp-subheadline em {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-style: italic !important;
}
.lp-revamp .lp-revamp-subheadline p,
.lp-revamp .lp-revamp-subheadline span {
  font-family: 'Inter', sans-serif !important;
}

/* Body search bar — full-width pill, theming adapts to dark/light overlay.
   Replaces the old nested-div + 70%-width + box-shadow pattern that got clipped
   by the glass card's overflow:hidden and read as a center-of-page orphan. */
.lp-revamp .lp-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  margin: 0 0 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  box-shadow: none;
}

.lp-revamp.lp-dark-overlay .lp-search-bar {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.25);
}

.lp-revamp .lp-search-bar-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #6b7280;
  font-size: 16px;
  cursor: pointer;
}

.lp-revamp .lp-search-bar input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  font-family: 'Inter', sans-serif;
  font-size: var(--lp-text-sm);
  line-height: 1.4;
  color: #111827;
}

.lp-revamp .lp-search-bar input::placeholder {
  color: #9ca3af;
}

/* Body copy / sections */
.lp-revamp .lp-revamp-body {
  font-family: 'Inter', sans-serif;
  color: var(--lp-text, #4b5563);
}

/* Card treatment for plain-text job descriptions (no v2 section cards inside) */
.lp-revamp .lp-revamp-body#jobDescription:not(:has(div[style*="margin-bottom"])):not(:empty) {
  background: #fff;
  border: none;
  border-radius: 16px;
  padding: 32px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.06),
    0 8px 24px rgba(0,0,0,0.08),
    0 20px 48px rgba(0,0,0,0.06);
}

.lp-revamp .lp-revamp-body p {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--lp-text-sm) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #4b5563;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums lining-nums;
}

/* First paragraph inside a body section acts as the section lede — gentle
   weight bump (500) so the section's opening sentence reads with more
   intent before the bullets / supporting paragraphs. */
.lp-revamp .lp-revamp-body div[style*="margin-bottom:3em"] > p:first-of-type,
.lp-revamp .lp-revamp-body div[style*="margin-bottom: 3em"] > p:first-of-type {
  font-weight: 500;
  color: #374151;
}

/* Style bold-only paragraphs as section-emphasis text. Earlier this
   rule also added a top border + padding-top to fake a divider, but
   CMS authors use <b>/<strong> for in-line emphasis (e.g. "<b>Now
   hiring Drivers</b>", "<b>Apply in 60 seconds</b>") far more often
   than as actual section headers. The fake divider rendered as a
   phantom separator BETWEEN consecutive bold lines inside the same
   section card — visually duplicating the real section-title border
   above. Dropped the border/padding-top so bold paragraphs are just
   strongly-weighted text, no divider chrome. */
.lp-revamp .lp-revamp-body p > strong:only-child,
.lp-revamp .lp-revamp-body p > b:only-child {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--lp-text-md);
  font-weight: 700;
  color: var(--lp-text, #111827);
}

/* Horizontal rules as clean dividers */
.lp-revamp .lp-revamp-body hr {
  border: none;
  height: 1px;
  background: #f0f1f4;
  margin: 20px 0;
}

.lp-revamp .lp-revamp-body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.lp-revamp .lp-revamp-body li {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--lp-text-sm) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #4b5563;
  margin-bottom: 6px;
  padding-left: 22px;
  position: relative;
  font-variant-numeric: tabular-nums lining-nums;
}

.lp-revamp .lp-revamp-body li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lp-brand, #da2528);
}

/* Blockquotes as testimonial callouts */
.lp-revamp .lp-revamp-body blockquote {
  border-left: 3px solid var(--lp-brand, #da2528);
  padding: 12px 20px;
  margin: 16px 0;
  background: #f9fafb;
  border-radius: 0 10px 10px 0;
  font-style: italic;
  color: #374151;
}

.lp-revamp .lp-revamp-body h1,
.lp-revamp .lp-revamp-body h2,
.lp-revamp .lp-revamp-body h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--lp-text, #111827);
  margin-top: 20px;
  margin-bottom: 10px;
  padding-top: 16px;
  border-top: 1px solid #f0f1f4;
}

/* First heading inside the body wrapper resets the separator/padding so
   the section card doesn't lead with a hairline divider and 36px of
   empty space above the title. Earlier `>` (direct child) selector
   missed CMS-authored content where the body ships wrapped in an outer
   `<div style="margin-bottom:3em">` + inner `<div style="width:100%">`
   pair — the leading H3 lived 2 levels deep, so the reset never fired
   and the card top read as broken empty padding. `:first-child` without
   the combinator matches any first-child heading regardless of depth. */
.lp-revamp .lp-revamp-body h1:first-child,
.lp-revamp .lp-revamp-body h2:first-child,
.lp-revamp .lp-revamp-body h3:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.lp-revamp .lp-revamp-body h2 { font-size: var(--lp-text-xl); }
.lp-revamp .lp-revamp-body h3 { font-size: var(--lp-text-lg); letter-spacing: 0; }

.lp-revamp .lp-revamp-body img {
  border-radius: 14px;
  max-width: 100%;
}

.lp-revamp .lp-revamp-body iframe {
  border-radius: 14px;
  max-width: 100%;
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}

/* Hide empty section cards */
.lp-revamp .lp-revamp-body div[style*="margin-bottom:3em"]:empty,
.lp-revamp .lp-revamp-body div[style*="margin-bottom: 3em"]:empty,
.lp-revamp .lp-revamp-body div[style*="margin-bottom:3em"]:has(> :only-child:empty),
.lp-revamp .lp-revamp-body div[style*="margin-bottom: 3em"]:has(> :only-child:empty) {
  display: none !important;
}

/* Section cards from CMS (margin-bottom:3em style containers) */
.lp-revamp .lp-revamp-body div[style*="margin-bottom:3em"],
.lp-revamp .lp-revamp-body div[style*="margin-bottom: 3em"] {
  background: #fff;
  border: none;
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 16px !important;
  /* Three-stack soft elevation matching .lp-revamp-form-card. A single
     0 8px 30px shadow read heavy at the bottom edge (bottom-weighted because
     of the 8px y-offset on a tall card); the form-card 3-stack diffuses the
     shadow up + out so the card reads as gently lifted from the page. */
  box-shadow:
    0 1px 2px rgba(0,0,0,0.06),
    0 8px 24px rgba(0,0,0,0.08),
    0 20px 48px rgba(0,0,0,0.06);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.lp-revamp .lp-revamp-body div[style*="margin-bottom:3em"]:hover,
.lp-revamp .lp-revamp-body div[style*="margin-bottom: 3em"]:hover {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.07),
    0 12px 32px rgba(0,0,0,0.1),
    0 28px 64px rgba(0,0,0,0.08);
}

/* Standard LP — MJLP V1 Bootstrap-card aesthetic across the body too:
   light grey page bg, white cards held by a 1px rgba(0,0,0,0.125) hairline
   border, no drop-shadow. Matches the form-card chrome on the right
   column so the whole page reads as one consistent system. */
.lp-revamp.lp-standard {
  background-color: #f8f9fa !important;
}

.lp-revamp.lp-standard .lp-revamp-body div[style*="margin-bottom:3em"],
.lp-revamp.lp-standard .lp-revamp-body div[style*="margin-bottom: 3em"] {
  border: 1px solid var(--revamp-border-medium) !important;
  box-shadow: none !important;
}

.lp-revamp.lp-standard .lp-revamp-body div[style*="margin-bottom:3em"]:hover,
.lp-revamp.lp-standard .lp-revamp-body div[style*="margin-bottom: 3em"]:hover {
  border-color: rgba(0,0,0,0.175) !important;
  box-shadow: none !important;
}

/* Standard LP form + chat cards match the job page's apply card style:
   same 1px border + same single soft shadow + 16px radius. Keeps the right
   column visually aligned with the left description cards. */
/* Standard LP form-card: match the MJLP V1 Bootstrap-card aesthetic
   exactly — 1px solid var(--revamp-border-medium) border, tight 8px radius
   (close to Bootstrap's 0.25rem with a tiny modern bump), no
   box-shadow. Same chrome the V1 .apply-form-container.card carried
   on the multi-job landing page. */
.lp-revamp.lp-standard .lp-revamp-form-card {
  border: 1px solid var(--revamp-border-medium) !important;
  border-radius: var(--revamp-radius-lg) !important;
  box-shadow: none !important;
}

.lp-revamp.lp-standard .lp-chat-cta-card {
  border-radius: var(--revamp-radius-lg) !important;
  box-shadow: none !important;
}

/* Section headline inside cards.
   Selector pinned to align-items:center + justify-content:flex-start so it
   matches ONLY the headline flex row emitted by the section renderer. The
   earlier `> div[style*="display: flex"]` form also matched the video
   container (display: flex + padding-bottom: 56.25%) and the image wrapper
   (display: flex + justify-content: center), overriding their padding-bottom
   aspect-ratio trick and collapsing media to ~8px tall. */
.lp-revamp .lp-revamp-body div[style*="margin-bottom:3em"] > div[style*="align-items: center"][style*="justify-content: flex-start"],
.lp-revamp .lp-revamp-body div[style*="margin-bottom: 3em"] > div[style*="align-items: center"][style*="justify-content: flex-start"] {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid #f0f1f4;
}

.lp-revamp .lp-revamp-body div[style*="margin-bottom:3em"] > div[style*="align-items: center"][style*="justify-content: flex-start"] > div[style*="font-size"],
.lp-revamp .lp-revamp-body div[style*="margin-bottom: 3em"] > div[style*="align-items: center"][style*="justify-content: flex-start"] > div[style*="font-size"] {
  /* !important here defeats the inline `font-size: 2em; font-weight: bold` on
     the headline div (emitted by the section renderer for V1 parity). The
     section card title sits BELOW the page lede in the hierarchy — 22/700,
     not 28/800. */
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: var(--lp-text-xl) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  /* CMS ships section titles like "💵 What We Offer" — emoji followed by a
     single space, then the label. In bold weight the space character gets
     visually compressed and the emoji reads as touching the first word.
     Widening word-spacing by a quarter-em gives the leading emoji proper
     separation without splaying multi-word titles like "About Us" too far
     apart (0.25em of 22px ≈ 5-6px between any two words). */
  word-spacing: 0.25em !important;
  line-height: 1.25 !important;
  color: var(--lp-text, #111827) !important;
}

.lp-revamp .lp-revamp-body div[style*="margin-bottom:3em"] > div[style*="align-items: center"][style*="justify-content: flex-start"] i,
.lp-revamp .lp-revamp-body div[style*="margin-bottom: 3em"] > div[style*="align-items: center"][style*="justify-content: flex-start"] i {
  font-size: 1.1em;
  color: var(--lp-brand, #FFD700);
}

/* Section card images — edge-to-edge inside card */
.lp-revamp .lp-revamp-body div[style*="margin-bottom:3em"] > div[style*="justify-content: center"] {
  margin: -28px -28px 0 !important;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

.lp-revamp .lp-revamp-body div[style*="margin-bottom:3em"] > div[style*="justify-content: center"] img {
  border-radius: 0 !important;
  width: 100%;
}

/* When image is the only child (no headline above it), restore bottom margin */
.lp-revamp .lp-revamp-body div[style*="margin-bottom:3em"] > div[style*="justify-content: center"]:first-child {
  margin-bottom: 20px !important;
}

/* Section card videos — edge-to-edge */
.lp-revamp .lp-revamp-body div[style*="margin-bottom:3em"] > div[style*="padding-bottom: 56.25%"] {
  margin: -28px -28px 0 !important;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

.lp-revamp .lp-revamp-body div[style*="margin-bottom:3em"] > div[style*="padding-bottom: 56.25%"] iframe {
  border-radius: 0 !important;
}

/* Media sections (image / video) — full-bleed within the body container, no
   section-card frame. The wrapper carries margin-bottom:3em like other sections
   but the .lp-media-section marker (set in PHP for image/video sections only)
   strips the glass-card chrome and cancels the -28px "bleed to card edge" trick
   that would otherwise overshoot when the wrapper has no padding to escape from.

   .lp-form-section gets the same treatment — the apply form (and JS-relocated
   chat CTA on careers mobile) ship their own white card chrome, so a wrapping
   glass card would just stack a second surface and eat horizontal room. */
.lp-revamp .lp-revamp-body div.lp-media-section,
.lp-revamp .lp-revamp-body div.lp-form-section,
.lp-revamp.lp-dark .lp-revamp-body div.lp-media-section,
.lp-revamp.lp-dark .lp-revamp-body div.lp-form-section,
.lp-revamp.lp-dark-overlay .lp-revamp-body div.lp-media-section,
.lp-revamp.lp-dark-overlay .lp-revamp-body div.lp-form-section,
.lp-revamp.lp-light-overlay .lp-revamp-body div.lp-media-section,
.lp-revamp.lp-light-overlay .lp-revamp-body div.lp-form-section {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.lp-revamp .lp-revamp-body div.lp-media-section:hover {
  box-shadow: none !important;
  transform: none !important;
}

.lp-revamp .lp-revamp-body div.lp-media-section > div[style*="justify-content: center"],
.lp-revamp .lp-revamp-body div.lp-media-section > div[style*="padding-bottom: 56.25%"] {
  margin: 0 !important;
  border-radius: 12px !important;
  overflow: hidden;
}

.lp-revamp .lp-revamp-body div.lp-media-section > div[style*="justify-content: center"] img {
  border-radius: 12px !important;
  width: 100% !important;
}

.lp-revamp .lp-revamp-body div.lp-media-section > div[style*="padding-bottom: 56.25%"] iframe {
  border-radius: 12px !important;
}

/* ---- Dark theme overrides ---- */
.lp-revamp.lp-dark .lp-revamp-body p {
  color: rgba(255,255,255,0.72);
}

.lp-revamp.lp-dark .lp-revamp-body li {
  color: rgba(255,255,255,0.85);
}

.lp-revamp.lp-dark .lp-revamp-body h1,
.lp-revamp.lp-dark .lp-revamp-body h2,
.lp-revamp.lp-dark .lp-revamp-body h3 {
  color: #ffffff;
}

.lp-revamp.lp-dark .lp-revamp-body div[style*="margin-bottom:3em"],
.lp-revamp.lp-dark .lp-revamp-body div[style*="margin-bottom: 3em"] {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

.lp-revamp.lp-dark .lp-revamp-body div[style*="margin-bottom:3em"]:hover,
.lp-revamp.lp-dark .lp-revamp-body div[style*="margin-bottom: 3em"]:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

.lp-revamp.lp-dark .lp-revamp-body div[style*="margin-bottom:3em"] > div[style*="align-items: center"][style*="justify-content: flex-start"],
.lp-revamp.lp-dark .lp-revamp-body div[style*="margin-bottom: 3em"] > div[style*="align-items: center"][style*="justify-content: flex-start"] {
  border-bottom-color: rgba(255,255,255,0.08);
}

/* ---- Right Column: Form Card (advancedLP) ----
   Chrome borrowed from MJLP V1 (Bootstrap .card aesthetic): 1px border,
   tight radius, no drop-shadow. Colors stay V2. Replaces the earlier
   18px radius + multi-layer shadow which felt heavy next to MJLP V1's
   plain technical look. overflow-x clips horizontal rounded-corner
   overrun; overflow-y stays visible so taller forms don't get caged. */
.lp-revamp .lp-revamp-form-card {
  border-radius: var(--revamp-radius-lg) !important;
  border: 1px solid var(--revamp-border-medium) !important;
  padding: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
  /* `overflow: hidden` (both axes) is the only reliable way to make
     children's own painted backgrounds respect the rounded corners.
     With no max-height set on this card, the card grows to its natural
     content height and nothing gets clipped vertically. */
  overflow: hidden !important;
}

.lp-revamp.lp-dark .lp-revamp-form-card {
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}

.lp-revamp .lp-form-header {
  padding: 22px 24px 16px;
  background: #fff;
}

.lp-revamp .lp-form-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #111827;
  margin-bottom: 4px;
}

.lp-revamp .lp-form-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: #6b7280;
  margin-bottom: 0;
}

/* When the form header has no subtitle (standard LP V2 — instructions
   live in the V1-style form-head-text slot inside #job-form-container
   below, NOT in the header), tighten the bottom padding so the form
   inputs / instructions don't sit in an airy gap below a lonely "Quick
   Apply" title. Default header is 22 / 24 / 16 — drop the bottom to 4
   in title-only mode. */
.lp-revamp .lp-form-header--title-only {
  padding-bottom: 4px !important;
}

/* Standard LP only: the form-head-text (CMS page_form_instructions)
   renders as the first child of #job-form-container, immediately under
   the "Quick Apply" title. The container's default `padding: 8 24 20`
   (top-padding 8) stacks on top of the title-only header's bottom
   padding (4) and the title's own 4px margin, opening a ~20px gap
   between "Quick Apply" and the instruction sentence — feels detached.
   Zero the container's top padding on standard so the instruction sits
   tight against the title (~12px total gap, which reads as one block).
   Advanced + careers keep the 8px breathing room — they have no
   form-head-text and the inputs start straight away. */
.lp-revamp.lp-standard .lp-revamp-form-card #job-form-container {
  padding-top: 0 !important;
}

/* V1's form-head-text slot, restyled for V2 — sits inside
   #job-form-container above the inputs and renders the raw CMS
   page_form_instructions on standard LP. Match the form-subtitle
   typography (Inter 14 / 500 / 1.45 / #6b7280) so the copy reads as
   the same tier as the rest of the form chrome. CMS-shipped HTML
   (p, strong, em, ul/li, h1-h6, br) renders through without forcing
   any specific structure — we just align fonts and zero out browser
   defaults that would jar against the form's grid. */
.lp-revamp .apply-form-container-v2 .form-head-text {
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  color: #6b7280 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}
.lp-revamp .apply-form-container-v2 .form-head-text p,
.lp-revamp .apply-form-container-v2 .form-head-text div,
.lp-revamp .apply-form-container-v2 .form-head-text span,
.lp-revamp .apply-form-container-v2 .form-head-text ul,
.lp-revamp .apply-form-container-v2 .form-head-text ol,
.lp-revamp .apply-form-container-v2 .form-head-text li {
  font: inherit !important;
  color: inherit !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
}
.lp-revamp .apply-form-container-v2 .form-head-text h1,
.lp-revamp .apply-form-container-v2 .form-head-text h2,
.lp-revamp .apply-form-container-v2 .form-head-text h3,
.lp-revamp .apply-form-container-v2 .form-head-text h4,
.lp-revamp .apply-form-container-v2 .form-head-text h5,
.lp-revamp .apply-form-container-v2 .form-head-text h6 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  border: 0 !important;
  letter-spacing: -0.01em !important;
}
.lp-revamp .apply-form-container-v2 .form-head-text strong,
.lp-revamp .apply-form-container-v2 .form-head-text b {
  font-weight: 700 !important;
  color: #111827 !important;
}
.lp-revamp .apply-form-container-v2 .form-head-text > *:last-child {
  margin-bottom: 0 !important;
}

/* Form instructions lede — first content block in the left column, above
   the description body. Reads as standard body copy (matches .lp-revamp-body
   p) so it sits in the same type rhythm as the rest of the section, not as
   a competing display heading. */
.lp-revamp .lp-revamp-lede {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--lp-text-sm) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: #4b5563;
  margin: 0 0 20px;
  /* Explicit full width so CMS-shipped inline width/max-width on a
     wrapping element can't shrink the lede inside the content column. */
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Block-level descendants inherit full width too — CMS authors sometimes
   ship <p style="width: 75%"> or <div style="max-width: 320px"> wrappers
   from TinyMCE that constrain the rendered line length on mobile. */
.lp-revamp .lp-revamp-lede p,
.lp-revamp .lp-revamp-lede > div,
.lp-revamp .lp-revamp-lede ul,
.lp-revamp .lp-revamp-lede ol {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.lp-revamp .lp-revamp-lede > *:first-child { margin-top: 0 !important; }
.lp-revamp .lp-revamp-lede > *:last-child { margin-bottom: 0 !important; }
/* CMS-driven content — preserve the formatting backend ships (font-size /
   font-weight / color via inline style; strong, em, hN, br). Defaults are
   set as concrete values (NOT `inherit !important`) so plain bare tags
   pick up the lede's body type, while any inline style on an authored
   element wins the cascade naturally. Earlier `inherit` overrides
   collapsed `<p style="font-size: 24px; font-weight: 700;">` back to
   14/400, stripping author intent. */
.lp-revamp .lp-revamp-lede p,
.lp-revamp .lp-revamp-lede div,
.lp-revamp .lp-revamp-lede span {
  font-family: 'Inter', sans-serif;
  font-size: var(--lp-text-sm);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: inherit;
  margin: 0 0 10px;
  padding: 0;
}
/* CMS lists — match the description body's brand-dot pattern so bullets
   remain visible after zeroing default list padding. */
.lp-revamp .lp-revamp-lede ul,
.lp-revamp .lp-revamp-lede ol {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
.lp-revamp .lp-revamp-lede li {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
}
.lp-revamp .lp-revamp-lede li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lp-brand, #da2528);
}
.lp-revamp .lp-revamp-lede h1,
.lp-revamp .lp-revamp-lede h2,
.lp-revamp .lp-revamp-lede h3,
.lp-revamp .lp-revamp-lede h4,
.lp-revamp .lp-revamp-lede h5,
.lp-revamp .lp-revamp-lede h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--lp-text-md);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--lp-text, #111827);
  margin: 0 0 8px;
  padding: 0;
}
.lp-revamp .lp-revamp-lede p:last-child,
.lp-revamp .lp-revamp-lede div:last-child,
.lp-revamp .lp-revamp-lede h1:last-child,
.lp-revamp .lp-revamp-lede h2:last-child,
.lp-revamp .lp-revamp-lede h3:last-child,
.lp-revamp .lp-revamp-lede h4:last-child,
.lp-revamp .lp-revamp-lede h5:last-child,
.lp-revamp .lp-revamp-lede h6:last-child {
  margin-bottom: 0;
}
.lp-revamp .lp-revamp-lede strong,
.lp-revamp .lp-revamp-lede b {
  font-weight: 700;
  color: var(--lp-text, #111827);
}
.lp-revamp .lp-revamp-lede em,
.lp-revamp .lp-revamp-lede i {
  font-style: italic;
}
.lp-revamp.lp-dark-overlay .lp-revamp-lede h1,
.lp-revamp.lp-dark-overlay .lp-revamp-lede h2,
.lp-revamp.lp-dark-overlay .lp-revamp-lede h3,
.lp-revamp.lp-dark-overlay .lp-revamp-lede h4,
.lp-revamp.lp-dark-overlay .lp-revamp-lede h5,
.lp-revamp.lp-dark-overlay .lp-revamp-lede h6,
.lp-revamp.lp-dark-overlay .lp-revamp-lede strong,
.lp-revamp.lp-dark-overlay .lp-revamp-lede b {
  color: #ffffff;
}

/* Dark-overlay LPs (advanced + careers w/ photo bg): match body p shadow. */
.lp-revamp.lp-dark-overlay .lp-revamp-lede {
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

.lp-revamp .lp-revamp-form-card #form-details-area {
  padding: 0;
  /* Neutralize the legacy `.apply-form-container-v2 > div:nth-child(2)`
     rule at ~L3132 — it was authored for an old "Call us:" row that
     sat as the second direct child of the form-card. The current DOM
     puts #form-details-area in that slot (header / form-details /
     phone-footer = 1 / 2 / 3), so the nth-child rule pinned a
     border-bottom on form-details. Combined with .lp-form-phone-footer's
     own border-top, this rendered as two stacked 1px lines between the
     disclaimer and the "Or call:" row. Zero it here. */
  border-bottom: 0 !important;
}

.lp-revamp .lp-revamp-form-card #job-form-container {
  padding: 8px 24px 20px !important;
  margin-top: 0 !important;
}

.lp-revamp .lp-revamp-form-card #job-form-container > .row {
  margin: 0 !important;
}

.lp-revamp .lp-revamp-form-card #job-form-container > .row > .col-12 {
  padding: 0 !important;
}

/* Form labels — aligned with MJLP V2 .cw-apply-card label spec
   (11.5px / 600 / muted secondary / mb: 5) for the same clean
   small-caps-feel above each input. */
.lp-revamp .lp-revamp-form-card label:not(.form-check-label) {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--revamp-text-secondary) !important;
  margin-bottom: 5px !important;
}

/* Form inputs — aligned with MJLP V2 .cw-apply-card .form-control:
   44px tall, 1.5px hairline border at var-light, 16px (var-lg) radius,
   14px Inter on pure white. Drops the previous 38px / 10 radius /
   13px / #fafbfc tinted-grey background which read smaller and dingier
   than MJLP V2's clean fields. */
.lp-revamp .lp-revamp-form-card .form-control:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]),
.lp-revamp .lp-revamp-form-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-lg) !important;
  padding: 0 14px !important;
  font-family: 'Inter', sans-serif !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;
}

/* Focus — neutral ring (matches MJLP V2). Dropped the brand-color
   tint that previously fired on focus; the calmer rgba(0,0,0,0.06)
   ring reads cleaner inside a white form card. */
.lp-revamp .lp-revamp-form-card .form-control:not(.noBorder):focus {
  border-color: var(--revamp-border-medium) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06) !important;
}

/* Form groups spacing */
.lp-revamp .lp-revamp-form-card .form-group {
  margin-bottom: 10px !important;
}

/* Choice pills */
.lp-revamp .lp-revamp-form-card .holdSingleChoice,
.lp-revamp .lp-revamp-form-card .holdMuiltpleChoice,
.lp-revamp .lp-revamp-form-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: 6px !important;
}

.lp-revamp .lp-revamp-form-card .holdSingleChoice .form-check,
.lp-revamp .lp-revamp-form-card .holdMuiltpleChoice .form-check {
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

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

.lp-revamp .lp-revamp-form-card .holdSingleChoice .form-check-label,
.lp-revamp .lp-revamp-form-card .holdMuiltpleChoice .form-check-label {
  padding: 7px 12px !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #fafbfc !important;
  color: #374151 !important;
  cursor: pointer !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  transition: all 0.12s !important;
  margin: 0 !important;
}

.lp-revamp .lp-revamp-form-card .holdSingleChoice .form-check-label:hover,
.lp-revamp .lp-revamp-form-card .holdMuiltpleChoice .form-check-label:hover {
  border-color: var(--lp-brand, #9ca3af) !important;
}

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

/* Catch-all: any selected option in LP context always uses brand color */
.lp-revamp .selected-btn,
.lp-revamp .form-check-input:checked + .form-check-label,
.lp-revamp .form-group[displayas="buttons"] .selected-btn .form-check-label {
  background: var(--lp-brand, #111827) !important;
  color: var(--lp-brand-text, #fff) !important;
  border-color: var(--lp-brand, #111827) !important;
  font-weight: 700 !important;
}

/* Submit button — brand-tinted, sized to match MJLP V2 .cw-apply-card
   .btn-apply (radius 12, font 15, margin-top 6) so the Apply button
   reads identical across MJLP V2 and all three LP V2 types. The
   brand-shadow tint is kept here (unique to LP — MJLP V2 uses neutral
   --revamp-shadow-sm) so the button still picks up the company brand
   color on a 1px lift; on careers / fallback variants where this rule
   doesn't apply, the lighter neutral shadow is fine. */
.lp-revamp .lp-revamp-form-card .continue-btn,
.lp-revamp .lp-revamp-form-card .btn-theme.btn-t-primary,
.lp-revamp .lp-revamp-form-card .btn-apply {
  width: 100% !important;
  padding: 14px 16px !important;
  border-radius: var(--revamp-radius-md) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  border: none !important;
  cursor: pointer !important;
  margin-top: 6px !important;
  transition: all 0.2s ease !important;
  background: var(--lp-brand, #111827) !important;
  color: var(--lp-brand-text, #fff) !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--lp-brand, #111827) 30%, transparent) !important;
}

.lp-revamp .lp-revamp-form-card .continue-btn:hover,
.lp-revamp .lp-revamp-form-card .btn-theme.btn-t-primary:hover,
.lp-revamp .lp-revamp-form-card .btn-apply:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important;
}

/* Disclosure text */
.lp-revamp .lp-revamp-form-card .discInfo,
.lp-revamp .lp-revamp-form-card #discInfo {
  font-family: 'Inter', sans-serif !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
  color: #b0b0b0 !important;
  margin-top: 8px !important;
  padding: 0 !important;
}

.lp-revamp .lp-revamp-form-card .discInfo a,
.lp-revamp .lp-revamp-form-card #discInfo a {
  color: #888 !important;
}

/* ---- Careers Page Form (type 2) overrides ---- */
/* The form container #applyFormContainerCareers is built in PHP with inline styles.
   Override those to match the mockup card design. */
.lp-revamp .lp-revamp-grid > .lp-sidebar-wrapper {
  grid-column: 2 !important;
  grid-row: 1 !important;
  /* No `overflow: visible` here — the sidebar-wrapper sets its own
     overflow-y: auto with max-height (single scroll container for the
     right column). A higher-specificity `overflow: visible !important`
     placed here was beating that rule and silently un-caging the
     wrapper, which dropped the phone-footer off-screen on shorter
     viewports because the form-card extended past the wrapper's
     boundary without a scrollbar to reach it. */
}

.lp-revamp #careersFormContainerDesktop {
  background: #fff !important;
  border-radius: var(--revamp-radius-lg) !important;
  padding: 0 !important;
  /* Chrome borrowed from MJLP V1's .apply-form-container.card —
     1px border, no drop-shadow. Color stays the V2 white surface.
     `overflow: hidden` so children's painted backgrounds respect the
     rounded corners (otherwise the form-header white bg would render
     into the corner pixels and the card would look square). */
  box-shadow: none !important;
  overflow: hidden !important;
  border: 1px solid var(--revamp-border-medium) !important;
  max-width: 420px !important;
}

.lp-revamp.lp-dark #careersFormContainerDesktop {
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}

.lp-revamp #careersFormContainerDesktop .lp-form-header {
  padding: 22px 16px 16px;
  background: #fff;
}

.lp-revamp #applyFormContainerCareers {
  background-color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  /* L/R 16 to match the advanced LP form-card (#job-form-container has
     the same 16px L/R inset) so careers and advanced read at the same
     inner field width. Header padding above is also 16 L/R so the
     "Quick Apply" title aligns horizontally with the input edges. */
  padding: 4px 16px 16px !important;
  color: #333 !important;
}

/* On desktop the careers form lives INSIDE #careersFormContainerDesktop /
   .lp-revamp-form-card, which already owns the card-level box-shadow. The
   base rule on #applyFormContainerCareers (a 0 20px 60px rgba(0,0,0,0.3)
   drop-shadow) was meant for the standalone mobile case — when nested, it
   bleeds a gray gradient onto the form fields directly below the header,
   reading as a "greyish tint" strip between subtitle and First Name. Kill
   the shadow only when nested so mobile careers (where the container is
   the visible card) keeps its elevation. */
.lp-revamp #careersFormContainerDesktop #applyFormContainerCareers,
.lp-revamp .lp-revamp-form-card #applyFormContainerCareers {
  box-shadow: none !important;
}

.lp-revamp #applyFormContainerCareers #applyByChatBtn {
  display: none !important;
}

/* Form labels in careers page — aligned with MJLP V2 .cw-apply-card label
   so the label tier reads identical across LP types + MJLP. */
.lp-revamp #applyFormContainerCareers label:not(.form-check-label) {
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--revamp-text-secondary) !important;
  margin-bottom: 5px !important;
}

/* Form inputs in careers page — aligned with MJLP V2 .cw-apply-card
   .form-control (44 / 1.5 border / 16 radius / 14 font / pure white). */
.lp-revamp #applyFormContainerCareers .form-control:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]),
.lp-revamp #applyFormContainerCareers .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-lg) !important;
  padding: 0 14px !important;
  font-family: 'Inter', sans-serif !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;
}

.lp-revamp #applyFormContainerCareers .form-control:not(.noBorder):focus {
  border-color: var(--lp-brand, #111827) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.04) !important;
}

/* Choice pills in careers page */
.lp-revamp #applyFormContainerCareers .holdSingleChoice,
.lp-revamp #applyFormContainerCareers .holdMuiltpleChoice,
.lp-revamp #applyFormContainerCareers .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: 6px !important;
}

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

.lp-revamp #applyFormContainerCareers .holdSingleChoice .form-check-label,
.lp-revamp #applyFormContainerCareers .holdMuiltpleChoice .form-check-label {
  padding: 8px 14px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #f9fafb !important;
  color: #374151 !important;
  cursor: pointer !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: all 0.12s !important;
  margin: 0 !important;
}

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

/* Submit button in careers page */
.lp-revamp #applyFormContainerCareers .continue-btn,
.lp-revamp #applyFormContainerCareers .btn-theme.btn-t-primary,
.lp-revamp #applyFormContainerCareers .btn-apply {
  width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  border: none !important;
  cursor: pointer !important;
  margin-top: 4px !important;
  background: linear-gradient(135deg, var(--lp-brand, #FFD700), var(--lp-brand, #FFC000)) !important;
  color: var(--lp-brand-text, #1a1a1a) !important;
}

/* Tighten internal form spacing */
.lp-revamp #applyFormContainerCareers #job-form-container {
  margin-top: 0 !important;
  padding: 0 !important;
}

.lp-revamp #applyFormContainerCareers #customForm {
  margin-top: 0 !important;
}

.lp-revamp #applyFormContainerCareers #customForm .mt-3 {
  margin-top: 0 !important;
}

/* Form-group margin defined in the rhythm rule below — kept single-source
   so spacing tweaks live in one place. */

.lp-revamp #applyFormContainerCareers .block-section-xs {
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.lp-revamp #applyFormContainerCareers .apply-form {
  margin: 0 !important;
  padding: 0 !important;
}

/* Disclosure */
.lp-revamp #applyFormContainerCareers #discInfo {
  font-family: 'Inter', sans-serif !important;
  font-size: 9px !important;
  line-height: 1.35 !important;
  color: #b0b0b0 !important;
}

/* ================================================================
   UNIFIED FORM RHYTHM
   Single source of truth for the apply form's vertical cadence across
   every LP V2 partial (standard, advanced, careers, careers homepage).
   Replaces the divergent values that had built up across .lp-revamp-form-card
   and #applyFormContainerCareers — different input heights, different pill
   paddings, different group margins. Sits LAST so source-order wins on
   equal specificity; no !important arms race needed.

   Spacing system (8px-leaning):
     label → input            6px
     input → next form-group  14px
     last group → submit      14px
     submit → disclosure      14px

   Sizing:
     Inputs  44px / 16px text  (touch target + iOS-zoom safe)
     Labels  13px / 600        (close sibling to its input, not a tiny caption)
     Pills   9×14 / 13px       (shrink-safe via flex 0 1 auto + min-width 56)
   ================================================================ */

/* Strip stray padding from form-details-area so the unified rhythm starts clean */
.lp-revamp .lp-revamp-form-card #form-details-area,
.lp-revamp #applyFormContainerCareers #form-details-area {
  padding: 0 !important;
}

/* ---- Labels ----
   Aligned with MJLP V2 .cw-apply-card label exactly. `#customForm`
   chained selectors give specificity 1,3,1 to beat legacy
   `#customForm .required` (1,1,0) and any other low-specificity rules. */
.lp-revamp .lp-revamp-form-card #customForm label,
.lp-revamp .lp-revamp-form-card #customForm .required,
.lp-revamp #applyFormContainerCareers #customForm label,
.lp-revamp #applyFormContainerCareers #customForm .required {
  display: block !important;
  margin: 0 0 5px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: var(--revamp-text-secondary) !important;
}
/* form-check-label is a pill, has its own treatment below — reset margin */
.lp-revamp .lp-revamp-form-card #customForm label.form-check-label,
.lp-revamp #applyFormContainerCareers #customForm label.form-check-label {
  margin: 0 !important;
  font-size: 14px !important;
}

/* ---- Inputs (text / email / tel / number / date / select) ----
   Aligned with MJLP V2 .cw-apply-card .form-control exactly:
   44 tall, 1.5px var-light border, 16 (var-lg) radius, 14 Inter on
   pure white, primary text color. */
.lp-revamp .lp-revamp-form-card #customForm .form-control:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]),
.lp-revamp .lp-revamp-form-card #customForm .form-control-lg:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]),
.lp-revamp #applyFormContainerCareers #customForm .form-control:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]),
.lp-revamp #applyFormContainerCareers #customForm .form-control-lg:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]) {
  display: block !important;
  width: 100% !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1.5px solid var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-lg) !important;
  background: #fff !important;
  color: var(--revamp-text-primary) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

/* Textarea: needs vertical room and resize handle */
.lp-revamp .lp-revamp-form-card #customForm textarea.form-control,
.lp-revamp #applyFormContainerCareers #customForm textarea.form-control {
  height: auto !important;
  min-height: 96px !important;
  padding: 12px 14px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
}

/* Focus — neutral ring (matches MJLP V2). Dropped brand-tinted glow
   because a clean form should feel calm, not branded on every focus. */
.lp-revamp .lp-revamp-form-card #customForm .form-control:not(.noBorder):focus,
.lp-revamp #applyFormContainerCareers #customForm .form-control:not(.noBorder):focus {
  border-color: var(--revamp-border-medium) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06) !important;
  outline: 0 !important;
}

/* Placeholder */
.lp-revamp .lp-revamp-form-card #customForm .form-control::placeholder,
.lp-revamp #applyFormContainerCareers #customForm .form-control::placeholder {
  color: #9ca3af !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

/* ---- File inputs ---- Bootstrap's default is ugly; dashed-border drop zone */
.lp-revamp .lp-revamp-form-card input[type="file"],
.lp-revamp #applyFormContainerCareers input[type="file"] {
  display: block !important;
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1.5px dashed #d1d5db !important;
  border-radius: 12px !important;
  background: #fafbfc !important;
  color: #4b5563 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: border-color 0.18s ease, background 0.18s ease !important;
}
.lp-revamp .lp-revamp-form-card input[type="file"]:hover,
.lp-revamp #applyFormContainerCareers input[type="file"]:hover {
  border-color: #9ca3af !important;
  background: #fff !important;
}
.lp-revamp .lp-revamp-form-card input[type="file"]::-webkit-file-upload-button,
.lp-revamp #applyFormContainerCareers input[type="file"]::-webkit-file-upload-button,
.lp-revamp .lp-revamp-form-card input[type="file"]::file-selector-button,
.lp-revamp #applyFormContainerCareers input[type="file"]::file-selector-button {
  margin: 0 12px 0 0 !important;
  padding: 7px 12px !important;
  border: none !important;
  border-radius: 8px !important;
  background: var(--lp-brand, #111827) !important;
  color: var(--lp-brand-text, #fff) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

/* File-type hint span the renderer prepends to file inputs */
.lp-revamp .lp-revamp-form-card .jv-file-hint,
.lp-revamp #applyFormContainerCareers .jv-file-hint {
  display: block !important;
  margin: 0 0 6px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-style: normal !important;
  color: #9ca3af !important;
}

/* ---- Form-group rhythm ----
   14px between rows — matches MJLP V2 .cw-apply-card .form-group exactly,
   so the LP form's vertical rhythm reads the same as the MJLP job-page
   apply card. With the input height bumped to 44px (also MJLP V2 spec)
   the cumulative form height is fine on shorter laptops because the
   sidebar wrapper's own overflow-y: auto + 32px scroll headroom handles
   any viewport overflow cleanly. */
.lp-revamp .lp-revamp-form-card .form-group,
.lp-revamp #applyFormContainerCareers .form-group {
  margin: 0 0 14px !important;
}
.lp-revamp .lp-revamp-form-card .form-page > .form-group:last-child,
.lp-revamp #applyFormContainerCareers .form-page > .form-group:last-child {
  margin-bottom: 0 !important;
}

/* ---- Choice pills (singleChoice + multipleChoice) ---- */
.lp-revamp .lp-revamp-form-card .holdSingleChoice,
.lp-revamp .lp-revamp-form-card .holdMuiltpleChoice,
.lp-revamp .lp-revamp-form-card .noBorder,
.lp-revamp #applyFormContainerCareers .holdSingleChoice,
.lp-revamp #applyFormContainerCareers .holdMuiltpleChoice,
.lp-revamp #applyFormContainerCareers .noBorder {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 none !important;
  background: transparent !important;
  height: auto !important;
  box-shadow: none !important;
}

/* Each pill (.form-check) — Yes/No stay on one row, long labels wrap inside.
   Parent gets the same 16px radius as its child .form-check-label because
   the lpApplyCustomForm_revamped.js click handler adds `.selected-btn` to
   THIS parent, and the catch-all rule at ~L8810 paints the brand bg on
   `.selected-btn` itself. Without a matching radius here, the parent's
   square brand fill bleeds past the child label's 16px corners and the
   selected pill reads visually square. border-radius alone clips the
   background to the rounded shape per CSS spec — no overflow:hidden
   needed (and overflow:hidden was breaking click events on advanced LP
   by establishing a stacking context that interfered with the JS click
   handler on this same element). */
.lp-revamp .lp-revamp-form-card .holdSingleChoice .form-check,
.lp-revamp .lp-revamp-form-card .holdMuiltpleChoice .form-check,
.lp-revamp #applyFormContainerCareers .holdSingleChoice .form-check,
.lp-revamp #applyFormContainerCareers .holdMuiltpleChoice .form-check {
  display: inline-flex !important;
  flex: 0 1 auto !important;
  min-width: 56px !important;
  max-width: 100% !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  border-radius: var(--revamp-radius-lg) !important;
}

.lp-revamp .lp-revamp-form-card .holdSingleChoice .form-check-input,
.lp-revamp .lp-revamp-form-card .holdMuiltpleChoice .form-check-input,
.lp-revamp #applyFormContainerCareers .holdSingleChoice .form-check-input,
.lp-revamp #applyFormContainerCareers .holdMuiltpleChoice .form-check-input {
  display: none !important;
}

/* Choice pills aligned to the same geometry as text inputs so the form
   reads as one coherent set: 44px tall, 16px (var-lg) radius, 14 Inter.
   Slightly tinted background (var-bg-tertiary) keeps pills visually
   distinct from white text inputs so users understand they're tappable
   buttons rather than fields to type in. */
.lp-revamp .lp-revamp-form-card #customForm .holdSingleChoice .form-check-label,
.lp-revamp .lp-revamp-form-card #customForm .holdMuiltpleChoice .form-check-label,
.lp-revamp #applyFormContainerCareers #customForm .holdSingleChoice .form-check-label,
.lp-revamp #applyFormContainerCareers #customForm .holdMuiltpleChoice .form-check-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 1.5px solid var(--revamp-border-light) !important;
  border-radius: var(--revamp-radius-lg) !important;
  background: var(--revamp-bg-tertiary) !important;
  color: var(--revamp-text-secondary) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  cursor: pointer !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease !important;
}

.lp-revamp .lp-revamp-form-card #customForm .holdSingleChoice .form-check-label:hover,
.lp-revamp .lp-revamp-form-card #customForm .holdMuiltpleChoice .form-check-label:hover,
.lp-revamp #applyFormContainerCareers #customForm .holdSingleChoice .form-check-label:hover,
.lp-revamp #applyFormContainerCareers #customForm .holdMuiltpleChoice .form-check-label:hover {
  border-color: var(--lp-brand, #9ca3af) !important;
  background: #fff !important;
}

/* Selected pill — brand-color filled. Keep font-weight at 600 (NOT 700)
   so the glyph width doesn't change between unselected and selected
   states; otherwise short labels sub-pixel-shift on click and adjacent
   unselected pills appear to jitter. Color + background carry the
   selected affordance, no weight bump needed. */
.lp-revamp .lp-revamp-form-card #customForm .holdSingleChoice .form-check-input:checked + .form-check-label,
.lp-revamp .lp-revamp-form-card #customForm .holdMuiltpleChoice .form-check-input:checked + .form-check-label,
.lp-revamp #applyFormContainerCareers #customForm .holdSingleChoice .form-check-input:checked + .form-check-label,
.lp-revamp #applyFormContainerCareers #customForm .holdMuiltpleChoice .form-check-input:checked + .form-check-label {
  background: var(--lp-brand, #111827) !important;
  color: var(--lp-brand-text, #fff) !important;
  border: 1.5px solid var(--lp-brand, #111827) !important;
  border-radius: var(--revamp-radius-lg) !important;
}

/* ---- Submit / Continue button ----
   Master compound rule covering both .lp-revamp-form-card (standard +
   advanced LP) and #applyFormContainerCareers (careers LP). Sized to
   MJLP V2 .cw-apply-card .btn-apply spec exactly so the Apply button
   reads identical across MJLP V2 + all three LP V2 types:
     padding 14/16, radius var(--revamp-radius-md) = 12,
     margin-top 6, font 15/700.
   .actionBtn inclusion guarantees this rule wins over older
   .btn-theme.btn-t-primary / V1 stylesheet rules. Brand-tinted shadow
   stays — unique LP touch picking up the company brand color on lift. */
.lp-revamp .lp-revamp-form-card .continue-btn,
.lp-revamp .lp-revamp-form-card .btn-theme.btn-t-primary,
.lp-revamp .lp-revamp-form-card .btn-apply,
.lp-revamp .lp-revamp-form-card .actionBtn,
.lp-revamp #applyFormContainerCareers .continue-btn,
.lp-revamp #applyFormContainerCareers .btn-theme.btn-t-primary,
.lp-revamp #applyFormContainerCareers .btn-apply,
.lp-revamp #applyFormContainerCareers .actionBtn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 6px 0 0 !important;
  padding: 14px 16px !important;
  border: none !important;
  border-radius: var(--revamp-radius-md) !important;
  background: var(--lp-brand, #111827) !important;
  color: var(--lp-brand-text, #fff) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--lp-brand, #111827) 28%, transparent) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.lp-revamp .lp-revamp-form-card .continue-btn:hover,
.lp-revamp .lp-revamp-form-card .btn-theme.btn-t-primary:hover,
.lp-revamp .lp-revamp-form-card .btn-apply:hover,
.lp-revamp .lp-revamp-form-card .actionBtn:hover,
.lp-revamp #applyFormContainerCareers .continue-btn:hover,
.lp-revamp #applyFormContainerCareers .btn-theme.btn-t-primary:hover,
.lp-revamp #applyFormContainerCareers .btn-apply:hover,
.lp-revamp #applyFormContainerCareers .actionBtn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--lp-brand, #111827) 35%, transparent) !important;
}

/* ---- Disclosure ---- */
.lp-revamp .lp-revamp-form-card .discInfo,
.lp-revamp .lp-revamp-form-card #discInfo,
.lp-revamp #applyFormContainerCareers .discInfo,
.lp-revamp #applyFormContainerCareers #discInfo {
  margin: 14px 0 0 !important;
  padding: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: #9ca3af !important;
}
.lp-revamp .lp-revamp-form-card .discInfo a,
.lp-revamp .lp-revamp-form-card #discInfo a,
.lp-revamp #applyFormContainerCareers .discInfo a,
.lp-revamp #applyFormContainerCareers #discInfo a {
  color: #6b7280 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* ---- reCAPTCHA responsive ---- Native widget is 304×78.
   Scale uniformly on narrow viewports and clip the parent form-group so the
   shrunk widget doesn't reserve native-size vertical space (would otherwise
   leave a gap above the submit button). */
.lp-revamp .lp-revamp-form-card .g-recaptcha,
.lp-revamp #applyFormContainerCareers .g-recaptcha {
  transform-origin: top left;
  -webkit-transform-origin: top left;
}
.lp-revamp .lp-revamp-form-card .form-group:has(> .g-recaptcha),
.lp-revamp #applyFormContainerCareers .form-group:has(> .g-recaptcha) {
  overflow: hidden !important;
  margin: 0 0 14px !important;
}

@media (max-width: 400px) {
  .lp-revamp .g-recaptcha {
    transform: scale(0.92);
    -webkit-transform: scale(0.92);
  }
  .lp-revamp .form-group:has(> .g-recaptcha) {
    height: 72px;
  }
}

@media (max-width: 360px) {
  .lp-revamp .g-recaptcha {
    transform: scale(0.82);
    -webkit-transform: scale(0.82);
  }
  .lp-revamp .form-group:has(> .g-recaptcha) {
    height: 64px;
  }
}

/* Mobile: small rhythm tightening */
@media (max-width: 767.98px) {
  .lp-revamp .lp-revamp-form-card .form-group,
  .lp-revamp #applyFormContainerCareers .form-group {
    margin-bottom: 12px !important;
  }
  .lp-revamp .lp-revamp-form-card .continue-btn,
  .lp-revamp .lp-revamp-form-card .btn-theme.btn-t-primary,
  .lp-revamp .lp-revamp-form-card .btn-apply,
  .lp-revamp .lp-revamp-form-card .actionBtn,
  .lp-revamp #applyFormContainerCareers .continue-btn,
  .lp-revamp #applyFormContainerCareers .btn-theme.btn-t-primary,
  .lp-revamp #applyFormContainerCareers .btn-apply,
  .lp-revamp #applyFormContainerCareers .actionBtn {
    /* Mobile button keeps the same 6px margin-top as desktop to match
       MJLP V2's apply-card rhythm exactly. Was 12px which created a
       different vertical gap on mobile than desktop / MJLP V2. */
    margin-top: 6px !important;
  }
}

/* Safety net — never let any child overflow the card horizontally.
   Uses `overflow: hidden` (both axes) so children's painted backgrounds
   also get clipped to the rounded corners. No max-height anywhere on
   these surfaces, so nothing is actually clipped — the cards grow to
   their natural content height. */
.lp-revamp .lp-revamp-form-card,
.lp-revamp #applyFormContainerCareers {
  overflow: hidden !important;
}

/* Hide mobile form container on desktop — form is in sidebar */
@media (min-width: 768px) {
  .lp-revamp #careersFormContainerMobile {
    display: none !important;
  }
}

/* On mobile, show the inline form and hide desktop sidebar form */
@media (max-width: 767.98px) {
  .lp-revamp #careersFormContainerDesktop {
    display: none !important;
  }
  .lp-revamp #careersFormContainerMobile {
    display: block !important;
  }
  /* Careers form on mobile: white card aligned with the desktop careers
     form-card and mobile advanced LP both. All three now share a 16 L/R
     content rail so the visual rhythm reads identical across viewports.
     Radius bumped to 16 (var-lg) to match the desktop card chrome — the
     12px mobile-only radius made the mobile card feel like a different
     surface than desktop's. Shadow softened (advanced LP mobile drops it
     entirely; careers keeps a hint so the inline placement inside the BE
     body copy still reads as a distinct apply unit). */
  .lp-revamp #careersFormContainerMobile #applyFormContainerCareers {
    background-color: #fff !important;
    border-radius: var(--revamp-radius-lg) !important;
    padding: 12px 16px 16px !important;
    border: 1px solid var(--revamp-border-medium) !important;
    box-shadow: var(--revamp-shadow-sm) !important;
  }
  .lp-revamp #careersFormContainerMobile #applyFormContainerCareers #form-details-area,
  .lp-revamp #careersFormContainerMobile #applyFormContainerCareers #job-form-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ---- Advanced LP Mobile ---- */
@media (max-width: 767.98px) {
  .lp-revamp .lp-revamp-grid {
    display: flex;
    flex-direction: column;
    padding: 12px 12px 64px;
    gap: 12px;
  }

  .lp-revamp .lp-revamp-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    padding: 12px 12px 64px !important;
    gap: 12px !important;
  }

  /* Mobile order: headline → subheadline/instructions → form (chat+card) → description → read-more → physical requirements.
     `.lp-revamp-content` becomes display: contents so its children participate
     directly in the .lp-revamp-grid flex column, letting `order` interleave them
     with `.lp-sidebar-wrapper`. Desktop layout (grid) is unaffected.
     Careers page: the chat card is relocated by lpApplyCustomForm_revamped.js to
     sit just above the inline mobile form (inside #jobDescription), so the BE
     body_copy_v2 section order (search → text → … → lead_form) renders verbatim
     with the chat card landing right before the form. */
  .lp-revamp .lp-revamp-content {
    display: contents !important;
  }

  .lp-revamp .lp-revamp-headline                  { order: 1 !important; }
  .lp-revamp .lp-revamp-subheadline               { order: 2 !important; }
  .lp-revamp .lp-revamp-instructions              { order: 3 !important; }
  .lp-revamp .lp-sidebar-wrapper {
    order: 4 !important;
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    /* Drop the desktop 14px flex-gap on mobile so the chat card's own
       margin-bottom (set below) is the single source of spacing between
       chat and form. Avoids gap + margin stacking. */
    gap: 0 !important;
  }
  .lp-revamp #jobDescription                      { order: 5 !important; }
  .lp-revamp .lp-read-more-btn                    { order: 6 !important; }
  .lp-revamp .lp-revamp-body:not(#jobDescription) { order: 7 !important; }

  /* Careers mobile: sidebar wrapper has no own content (chat card is relocated
     into #jobDescription by JS, desktop form container is hidden by an earlier
     rule). Collapse it so it leaves no vertical gap above the description. */
  .lp-revamp.lp-careers .lp-sidebar-wrapper {
    display: none !important;
  }

  /* Mobile: white form card with subtle shadow for visual lift against the
     page bg. Matches advanced LP. Earlier this surface was chromeless but
     that left the form reading as loose unanchored fields, missing the
     "this is the apply unit" cue. Header + fields share 16px L/R padding
     for vertical alignment. overflow-x: clip clips rounded-corner overrun
     without forcing overflow-y: auto (which `hidden` would do, caging the
     form vertically and silently clipping the submit button on shorter
     phone heights). */
  .lp-revamp .apply-form-container-v2.card,
  .lp-revamp .lp-revamp-form-card {
    background: #fff !important;
    /* MJLP V1 chrome on mobile too — 1px Bootstrap-style border,
       16px radius, no drop-shadow. Keeps the form unit visually
       consistent with desktop and avoids the "floating card" elevation
       that competed with the fixed mobile bottom CTA bar's own shadow.
       overflow: hidden so children's painted backgrounds respect the
       rounded corners (otherwise corners render square on mobile too). */
    box-shadow: none !important;
    border: 1px solid var(--revamp-border-medium) !important;
    border-radius: var(--revamp-radius-lg) !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .lp-revamp .lp-form-header {
    padding: 16px 16px 8px !important;
    background: #fff !important;
    margin-bottom: 0 !important;
  }
  .lp-revamp .lp-revamp-form-card #form-details-area,
  .lp-revamp .lp-revamp-form-card #job-form-container {
    padding: 0 !important;
  }
  .lp-revamp .lp-form-phone-footer {
    /* Mobile: align side margin to the form's 16px content rail
       (header + #form-details-area both use 16px L/R on mobile). */
    margin-left: 16px !important;
    margin-right: 16px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .lp-revamp .lp-chat-cta-card {
    padding: 16px !important;
    /* Mobile separation between the chat CTA and whatever sits below it. On
       LP / Advanced LP the chat card and form card are both inside a flex
       .lp-sidebar-wrapper which provides 14px gap — but on careers the chat
       card is JS-relocated into #jobDescription as a sibling of the inline
       mobile form, where no gap rule applies. Setting margin-bottom on the
       card itself guarantees separation in both layouts. */
    margin-bottom: 16px !important;
  }


  /* Tighten body-section spacing on mobile. Each section is wrapped by the renderer
     in a div with inline `margin-bottom: 3em` — override to 1em so the vertical
     gaps between truck image / Requirements / Why-DG feel proportional to the
     12px grid gap above. */
  .lp-revamp #jobDescription > div[style*="margin-bottom"] {
    margin-bottom: 1em !important;
  }

  /* Breathing room between the form/chat block and the start of the description
     content. The form is the conversion moment — the description shouldn't feel
     like it's crashing into the bottom of the form card. */
  .lp-revamp #jobDescription {
    margin-top: 20px !important;
  }

  /* Hero text blocks — kill the cascading bottom margins so the grid gap is the
     ONLY vertical spacer between headline / subheadline / chat-CTA card. Without
     this, .lp-revamp-subheadline (20px) + an inner <ul>/<p>'s default bottom
     margin (~16px) + grid gap (12px) stack to ~48px of empty space above the
     chat card. */
  .lp-revamp .lp-revamp-subheadline,
  .lp-revamp .lp-revamp-instructions,
  .lp-revamp .lp-revamp-lede {
    margin-bottom: 0 !important;
  }
  .lp-revamp .lp-revamp-subheadline > *:last-child,
  .lp-revamp .lp-revamp-instructions > *:last-child,
  .lp-revamp .lp-revamp-lede > *:last-child {
    margin-bottom: 0 !important;
  }

  /* Glass-card body sections — explicit internal padding so heading text aligns
     horizontally with the form/chat card heading text on the same rail. Without
     this, the glass cards have no inner inset and headings hug the card edge
     while the form card content sits 16px inside its own padding.
     Excludes lp-media-section (image/video/search) and lp-form-section so those
     wrappers stay full-bleed and don't eat horizontal width with redundant pad. */
  .lp-revamp .lp-revamp-body div[style*="margin-bottom:3em"]:not(.lp-media-section):not(.lp-form-section),
  .lp-revamp .lp-revamp-body div[style*="margin-bottom: 3em"]:not(.lp-media-section):not(.lp-form-section) {
    padding: 18px !important;
    border-radius: 14px !important;
  }

  /* Tighten the section heading row's bottom rule on mobile so it doesn't take
     up half the card before the body even starts. Selector pinned to the
     headline row's specific flex attributes so video / image containers (which
     also use `display: flex`) keep their inline padding-bottom aspect-ratio. */
  .lp-revamp .lp-revamp-body div[style*="margin-bottom:3em"] > div[style*="align-items: center"][style*="justify-content: flex-start"],
  .lp-revamp .lp-revamp-body div[style*="margin-bottom: 3em"] > div[style*="align-items: center"][style*="justify-content: flex-start"] {
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
  }

  /* Hide inline CTAs — bottom bar handles Call + Chat */
  .lp-revamp .lp-inline-ctas {
    display: none !important;
  }

  /* No collapse — show full description */
  .lp-revamp .lp-read-more-btn {
    display: none !important;
  }

  .lp-revamp.lp-dark-overlay .lp-read-more-btn {
    color: #fff;
  }

  .lp-revamp .lp-revamp-headline {
    /* font-size handled by --lp-text-display var which switches to 32px at this breakpoint */
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 16px;
  }

  .lp-revamp .lp-revamp-body div[style*="margin-bottom:3em"]:not(.lp-media-section):not(.lp-form-section),
  .lp-revamp .lp-revamp-body div[style*="margin-bottom: 3em"]:not(.lp-media-section):not(.lp-form-section) {
    padding: 20px;
    margin-bottom: 12px !important;
    border-radius: 12px;
  }
  /* Form section gets a tiny 6px L/R breath so the chat/form cards don't sit
     edge-to-edge against the 12px grid rail (net viewport inset 12 + 6 = 18px).
     Media stays full-bleed by intent. */
  .lp-revamp .lp-revamp-body div.lp-form-section {
    padding: 0 6px !important;
    margin-bottom: 12px !important;
  }
  .lp-revamp .lp-revamp-body div.lp-media-section {
    margin-bottom: 12px !important;
  }

  .lp-revamp .lp-revamp-form-card {
    /* Match desktop radius so mobile corners aren't visibly tighter
       than desktop (was 12px stale override against the new 16px). */
    border-radius: var(--revamp-radius-lg) !important;
  }

  /* Mobile form internal padding — 16px L/R inside the white card so fields
     align vertically with the lp-form-header (also 16px L/R). #form-details-area
     keeps zero LR because it's a flex/structural wrapper and its child
     #job-form-container owns the visible inset. */
  .lp-revamp .lp-revamp-form-card #form-details-area {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .lp-revamp .lp-revamp-form-card #job-form-container {
    padding: 8px 16px 16px !important;
  }

  .lp-revamp .lp-revamp-form-card .form-control:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]),
  .lp-revamp .lp-revamp-form-card .form-control-lg:not(.noBorder):not(.holdSingleChoice):not(.holdMuiltpleChoice):not([type="file"]) {
    height: 44px !important;
    font-size: 14px !important;
  }

  .lp-revamp .lp-revamp-form-card .continue-btn,
  .lp-revamp .lp-revamp-form-card .btn-theme.btn-t-primary,
  .lp-revamp .lp-revamp-form-card .btn-apply {
    padding: 14px 16px !important;
    font-size: 15px !important;
  }

  .lp-revamp-nav {
    padding: 0 16px;
  }

  .lp-revamp-nav-inner {
    height: 52px;
  }

  .lp-revamp-nav-logo img {
    height: 28px;
  }

  .lp-revamp-header .lp-nav-phone-pill {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  .lp-revamp .lp-chat-cta-card {
    border-radius: var(--revamp-radius-lg) !important;
  }

  .lp-revamp .lp-form-phone-footer {
    /* Mobile padding only — no bottom radius needed, the footer is now
       a plain top-divider row inside the card (no separate floor). */
    padding: 14px 0 16px !important;
  }

  /* Hero Banner Mobile */
  .lp-landing-hero {
    height: 180px;
  }

  .lp-landing-hero-content {
    padding: 0 16px 24px;
    gap: 12px;
  }

  .lp-landing-hero-text h1 {
    font-size: 20px;
    letter-spacing: -0.3px;
  }

  .lp-landing-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    padding: 5px;
  }

  .lp-landing-hero-loc {
    font-size: 13px;
  }

  .lp-landing-hero + .lp-revamp {
    margin-top: -24px;
    border-radius: 20px 20px 0 0;
  }
}

/* ==================================================================
   CTA PANEL — Editorial Application Panel (CR-2026-04-28)

   Two-column "ticket" composition for the apply-start moment:
   heading column (eyebrow stamp + display title) on the left,
   action column (primary button + optional secondary call link)
   on the right, with a vertical dashed perforation between them.
   Brand-color accent stripe across the top edge. Mobile collapses
   to single column with a horizontal perforation.

   Used by both the standalone full-page surface
   (_php_pcs/modules/multi-job-landing-page/views/jobApplyStart.php)
   AND the AJAX/careerwebsite surface
   (_php_pcs/modules/multi-job-landing-page/api/job-application/job-apply-start-view.php).
   Originally lived in css/applyStart.css; moved here so the AJAX
   surface (which loads v2_revamp.css via parent jobApplicationView,
   not applyStart.css) can use the same panel.
   ================================================================== */

.cw-cta-panel {
    position: relative;
    margin: 24px 0 32px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--revamp-border-light, #ececec);
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 12px 36px rgba(20, 20, 40, 0.04);
}

/* Brand accent stripe — picks up --brand-color from the page (set
   on .jv-page or .cw-detail-container by inline style). 4px tall:
   noticeable as identity, not decoration. */
.cw-cta-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--brand-color, #d6263d);
    z-index: 1;
}

.cw-cta-panel__inner {
    display: flex;
    align-items: center;
    padding: 0;
}

.cw-cta-panel__heading {
    flex: 1;
    min-width: 0;
    padding: 28px 32px;
}

/* Vertical dashed perforation between the two columns —
   background-image gradient stripe gives a finer dash than
   border-style: dashed. Pulled in from the panel edges so it
   reads as a "tear" inside the card. */
.cw-cta-panel__divider {
    flex-shrink: 0;
    align-self: stretch;
    width: 1px;
    margin: 20px 0;
    background-image: linear-gradient(
        to bottom,
        #d6dbe1 50%,
        transparent 50%
    );
    background-size: 1px 7px;
    background-repeat: repeat-y;
    background-position: center top;
}

/* Eyebrow stamp inside the heading column. Small uppercase
   marker with a brand-color leader bar — sets up the headline
   below as the page's primary moment. */
.cw-cta-panel__stamp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8a8a8a;
    margin: 0 0 12px;
}

.cw-cta-panel__stamp-bar {
    display: inline-block;
    width: 22px;
    height: 2px;
    background: var(--brand-color, #d6263d);
    border-radius: 1px;
}

/* Title — mixed case + tight optical tracking, matching the
   register of jobApplicationView's section headings (jv-desc-card h3
   at 17px / weight 700) and the hero job title. Was uppercase
   tracking-heavy before, but on the AJAX surface that read
   louder than every other heading on the page; the eyebrow above
   and button below carry the uppercase register, the title
   doesn't need to. The brand-color period stays as the one
   permitted ornament. */
.cw-cta-panel__title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.3px;
    color: #111827;
    margin: 0;
    font-feature-settings: "kern" 1, "lnum" 1;
    text-rendering: optimizeLegibility;
}

.cw-cta-panel__title::after {
    content: '.';
    color: var(--brand-color, #d6263d);
    margin-left: 1px;
}

/* Action stack — primary button + optional secondary call link
   stacked vertically inside the right column. */
.cw-cta-panel__actions {
    flex-shrink: 0;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    min-width: 280px;
}

/* Primary button — refined CTA proportions. Smaller cap (14px)
   than the title (20px); title remains the headline, button is
   the action, not a competing display element. */
.cw-cta-panel__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 26px;
    border: 0;
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    font-feature-settings: "kern" 1;
    text-rendering: optimizeLegibility;
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.18s ease, filter 0.18s ease;
}

/* Sweep highlight on hover — left-to-right shimmer pass. */
.cw-cta-panel__btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 20%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 80%
    );
    transform: translateX(-110%);
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: -1;
}

.cw-cta-panel__btn:hover::after {
    transform: translateX(110%);
}

.cw-cta-panel__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(20, 20, 40, 0.18);
    filter: brightness(1.05);
    text-decoration: none;
}

.cw-cta-panel__btn:active {
    transform: translateY(0);
    transition-duration: 0.05s;
}

.cw-cta-panel__btn-arrow {
    display: inline-flex;
    align-items: center;
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cw-cta-panel__btn:hover .cw-cta-panel__btn-arrow {
    transform: translateX(5px);
}

/* Secondary call link inside the action column. Quiet alternate
   path — centered, light-tinted, brand color on hover. */
.cw-cta-panel__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 8px;
    padding: 6px 2px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease;
}

.cw-cta-panel__secondary:hover {
    color: var(--brand-color, #d6263d);
    text-decoration: none;
    transform: translateX(1px);
}

.cw-cta-panel__secondary svg {
    flex-shrink: 0;
    color: var(--brand-color, #d6263d);
}

.cw-cta-panel__secondary-num {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    color: #111827;
    transition: color 0.15s ease;
}

.cw-cta-panel__secondary:hover .cw-cta-panel__secondary-num {
    color: var(--brand-color, #d6263d);
}

/* Staggered reveal — each row of content fades up sequentially
   on load. Felt as polish, not delay (under 0.4s total). */
@keyframes cwCtaReveal {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cw-cta-panel__title,
.cw-cta-panel__actions {
    animation: cwCtaReveal 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.cw-cta-panel__title    { animation-delay: 0.10s; }
.cw-cta-panel__actions  { animation-delay: 0.26s; }

@media (prefers-reduced-motion: reduce) {
    .cw-cta-panel__btn::after { display: none; }
    .cw-cta-panel__title,
    .cw-cta-panel__actions { animation: none; }
}

@media (max-width: 767.98px) {
    /* Mobile: collapse the ticket to a single column. Heading on
       top, horizontal perforation, action stack on bottom. */
    .cw-cta-panel__inner { flex-direction: column; align-items: stretch; }
    .cw-cta-panel__heading { padding: 24px 24px 20px; }
    .cw-cta-panel__actions { padding: 22px 24px 24px; min-width: 0; gap: 10px; }
    .cw-cta-panel__title { font-size: 19px; letter-spacing: -0.2px; }
    .cw-cta-panel__btn { font-size: 13.5px; letter-spacing: 1.3px; padding: 14px 22px; width: 100%; }
    .cw-cta-panel__stamp { font-size: 10px; margin-bottom: 14px; }
    .cw-cta-panel__secondary { align-self: center; padding: 4px 0; }

    /* Horizontal perforation between stacked sections. */
    .cw-cta-panel__divider {
        align-self: stretch;
        width: auto;
        height: 1px;
        margin: 0 24px;
        background-image: linear-gradient(
            to right,
            #d6dbe1 50%,
            transparent 50%
        );
        background-size: 7px 1px;
        background-repeat: repeat-x;
        background-position: left center;
    }
}