/* Public apply form (views/forms/recruitment_channel_form.php), in the
   theplanetsoft.com/careers look of the Recruitment Portal (rec_portal_careers.css):
   the logo alone at the top, a dark rounded panel with the job, the form in white
   cards on a light page and "What happens next" beside it.
   Shown on its own page, inside an iframe on a company website (no logo and no
   footer then: html.rec-pf-embedded), and as the apply form behind a job on the
   Recruitment Portal. Self-contained: it does not use the admin theme.
   Colours: ink #001722, dark #040F14, navy #0D3D54, green #44B74A (text on white
   #2A7F31), muted #4B5D66, lines #E3EAEE / #C9D6DC. Type: Mona Sans, Albert Sans. */

body.rec-pf {
  margin: 0;
  /* the CRM's external form styles pad the body */
  padding: 0 !important;
  color: #001722;
  font-family: 'Albert Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: #F6F9FA;
  -webkit-font-smoothing: antialiased;
}

.rec-pf *, .rec-pf *::before, .rec-pf *::after { box-sizing: border-box; }
.rec-pf a { color: #2A7F31; }
.rec-pf a:hover, .rec-pf a:focus { color: #1F6326; }
.rec-pf h1, .rec-pf h2, .rec-pf p { margin: 0; }

/* up to 1424px of content, sides growing with the screen (16-48px), as the Portal */
.rec-pf-shell { width: 100%; max-width: 1520px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 48px); }

/* ---- Header: the logo alone */
/* the logo, centred */
.rec-pf-top .rec-pf-shell { display: flex; align-items: center; justify-content: center; padding-top: 24px; padding-bottom: 24px; }
/* Setup -> Settings -> General -> Company Logo (rec_portal_logo_html()); none set: the company's name */
.rec-pf-logo { display: block; width: auto; height: 51px; }
.rec-pf-logo-text { font-family: 'Mona Sans', sans-serif; font-weight: 600; font-size: 24px; line-height: 51px; color: #001722; }
html.rec-pf-embedded .rec-pf-top,
html.rec-pf-embedded .rec-pf-foot { display: none; }
html.rec-pf-embedded .rec-pf-hero { margin-top: 16px; }
html.rec-pf-embedded .rec-pf-back,
html.rec-pf-embedded .rec-pf-all { display: none; }

/* ---- The job: a dark rounded panel */
/* the job's text on the left, "All openings" on the right */
.rec-pf-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 40px;
  padding: 36px clamp(20px, 5vw, 56px) 40px;
  color: #ffffff;
  background: #040F14;
  border-radius: 28px;
}
/* Back to job: a light pill above the form, on the left of the required-fields note */
.rec-pf-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 16px 6px 13px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #E3EAEE;
  border-radius: 999px;
}
.rec-pf .rec-pf-back, .rec-pf .rec-pf-back:focus { color: #0D3D54; text-decoration: none; }
.rec-pf .rec-pf-back:hover { color: #001722; text-decoration: none; background: #F1F5F7; border-color: #C9D6DC; }
.rec-pf .rec-pf-back:focus-visible { outline: 3px solid #44B74A; outline-offset: 2px; }
.rec-pf-hero-text { display: flex; flex: 1 1 520px; flex-direction: column; gap: 14px; min-width: 0; }
/* All openings: a quiet outlined button on the dark panel */
.rec-pf .rec-pf-all {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  font-size: 14.5px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  transition: background-color .15s, border-color .15s;
}
.rec-pf .rec-pf-all i { font-size: 14px; color: #44B74A; }
.rec-pf .rec-pf-all:hover, .rec-pf .rec-pf-all:focus { color: #ffffff; text-decoration: none; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); }
.rec-pf .rec-pf-all:focus-visible { outline: 3px solid #44B74A; outline-offset: 2px; }
.rec-pf-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #44B74A; }
.rec-pf-job-title { font-family: 'Mona Sans', sans-serif; font-weight: 500; font-size: 38px; line-height: 1.18; color: #ffffff; overflow-wrap: anywhere; }
.rec-pf-job-title.rec-pf-title-long { font-size: 32px; }
.rec-pf-job-title.rec-pf-title-xlong { font-size: 28px; }
.rec-pf-pill-closed {
  display: inline-block;
  margin-left: 10px;
  padding: 4px 12px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  vertical-align: middle;
  color: #E4ECEF;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
}
/* the job's facts: one line of icon + text, starting where the eyebrow and the title do */
.rec-pf-facts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 2px 0 0; padding: 0; list-style: none; }
.rec-pf-facts li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.4; color: #E4ECEF; }
.rec-pf-facts i { font-size: 14px; color: #44B74A; }

/* ---- Form and side panel */
.rec-pf-main { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; padding-top: 32px; padding-bottom: 80px; }
.rec-pf-col { display: flex; flex: 999 1 600px; flex-direction: column; gap: 20px; min-width: 0; }
.rec-pf-form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
/* Above the form: Back to job on the left, the required-fields note on the right */
.rec-pf-toprow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
/* on the right also when it wraps under Back (".rec-pf p" would zero the margin) */
.rec-pf-toprow .rec-pf-required-note { margin-left: auto; }
/* "Fields marked * are required": a small rounded note, not loose text */
.rec-pf-required-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #35464E;
  background: #ffffff;
  border: 1px solid #E3EAEE;
  border-radius: 999px;
}
.rec-pf-required-note i { font-size: 14px; color: #0D3D54; }
.rec-pf-req-star { font-weight: 700; color: #B42318; }

/* ---- Cards: one per group of fields */
.rec-pf-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 30px;
  background: #ffffff;
  border: 1px solid #E3EAEE;
  border-radius: 20px;
}
.rec-pf-card-head { display: flex; gap: 14px; align-items: center; }
.rec-pf-step {
  display: flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  background: #0D3D54;
  border-radius: 50%;
}
.rec-pf-card-title { font-family: 'Mona Sans', sans-serif; font-weight: 500; font-size: 20px; line-height: 1.3; color: #001722; }
.rec-pf-card-sub { margin-top: 2px; font-size: 15px; color: #4B5D66; }

/* Three to a row at most (two, then one, when a field would be under 240px wide); a long
   field (textarea, file, ...) takes the row, LinkedIn two thirds */
.rec-pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 40px) / 3)), 1fr)); gap: 18px 20px; }
.rec-pf-wide { grid-column: 1 / -1; }
.rec-pf-span2 { grid-column: span 2; }
.rec-pf-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rec-pf-field > [class*="col-"] { float: none; width: auto; padding: 0; }

/* A header / paragraph from the form builder */
.rec-pf-field h1, .rec-pf-field h2, .rec-pf-field h3, .rec-pf-field h4 {
  margin: 4px 0 0 !important;
  font-family: 'Mona Sans', sans-serif;
  font-size: 18px !important;
  font-weight: 500;
  color: #001722;
}
.rec-pf-field p { color: #4B5D66; }

/* ---- Fields */
.rec-pf-form .form-group { margin: 0; }
.rec-pf-form label,
.rec-pf-form .control-label {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: #001722;
}
/* the required star after the label, as on the Portal (the builder writes style="display:block" on it) */
.rec-pf-form .control-label { display: inline-flex !important; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 4px; }
.rec-pf-form .control-label .req, .rec-pf-form .control-label .text-danger { margin: 0; }
.rec-pf-form .form-control {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  font: inherit;
  font-size: 16px;
  color: #001722;
  background: #ffffff;
  border: 1px solid #C9D6DC;
  border-radius: 12px;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
.rec-pf-form select.form-control { padding-right: 36px; }
.rec-pf-form textarea.form-control { height: auto; min-height: 120px; padding: 14px 16px; resize: vertical; }
.rec-pf-form .form-control::placeholder { color: #7A8B93; }
.rec-pf-form .form-control:focus { border-color: #2A7F31; outline: none; box-shadow: 0 0 0 3px rgba(68, 183, 74, .3); }

/* A select the CRM turns into a bootstrap-select: the wrapper keeps the
   .form-control class, so the button inside is styled as the field instead */
.rec-pf-form .bootstrap-select.form-control { height: auto; padding: 0; background: transparent; border: 0; box-shadow: none; }
/* its text inherits the button's padding: real top / bottom padding centres it */
.rec-pf-form .bootstrap-select > .dropdown-toggle {
  height: 52px;
  padding: 14px 36px 14px 16px;
  line-height: 22px;
  font-size: 16px;
  color: #001722;
  background: #ffffff;
  border: 1px solid #C9D6DC;
  border-radius: 12px;
  box-shadow: none;
}
.rec-pf-form .bootstrap-select > .dropdown-toggle.bs-placeholder { color: #7A8B93; }
.rec-pf-form .bootstrap-select.open > .dropdown-toggle,
.rec-pf-form .bootstrap-select > .dropdown-toggle:focus { border-color: #2A7F31; outline: none !important; box-shadow: 0 0 0 3px rgba(68, 183, 74, .3); }
.rec-pf-form .bootstrap-select .dropdown-menu { border-color: #E3EAEE; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 23, 34, .12); }

.rec-pf-form .text-danger, .rec-pf-form .req { color: #B42318; }

/* The validator's messages and a field that needs fixing */
.rec-pf-form p.text-danger,
.rec-pf-form label.error { display: block; margin: 6px 0 0; font-size: 13px; font-weight: 500; color: #B42318; }
.rec-pf-form .form-control.error,
.rec-pf-form .has-error .form-control { border-color: #E5484D; }

/* a field's help, under it (the builder's "help text") */
.rec-pf-help { display: block; font-size: 13.5px; line-height: 1.45; color: #4B5D66; }

/* the terms box, right above Send */
.rec-pf-terms { margin: 0; padding: 0 4px; }
.rec-pf-terms label { font-weight: 400; }

/* ---- "Applying through a recruitment agency?": an optional card after the steps, closed until opened */
.rec-pf-agency { background: #ffffff; border: 1px solid #E3EAEE; border-radius: 20px; }
.rec-pf-agency-head {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 22px 30px;
  cursor: pointer;
  list-style: none;
  border-radius: 20px;
}
.rec-pf-agency-head::-webkit-details-marker { display: none; }
.rec-pf-agency-head:focus-visible { outline: 3px solid #44B74A; outline-offset: 2px; }
.rec-pf-agency-icon {
  display: flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 15px;
  color: #0D3D54;
  background: #EEF3F5;
  border-radius: 50%;
}
.rec-pf-agency-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.rec-pf-agency-title { font-family: 'Mona Sans', sans-serif; font-weight: 500; font-size: 18px; color: #001722; }
.rec-pf-agency-sub { font-size: 15px; color: #4B5D66; }
.rec-pf-agency-caret { font-size: 14px; color: #4B5D66; transition: transform .15s; }
.rec-pf-agency[open] .rec-pf-agency-caret { transform: rotate(180deg); }
.rec-pf-form .rec-pf-agency-body { display: flex; flex-direction: column; max-width: 420px; padding: 0 30px 26px 80px; }
.rec-pf-agency-body .form-control { text-transform: uppercase; letter-spacing: .06em; }
.rec-pf-agency-body .form-control::placeholder { text-transform: none; letter-spacing: 0; }
.rec-pf-agency-help { margin-top: 8px; font-size: 13.5px; color: #4B5D66; }

/* ---- Resume drop zone (the real file input lies over it) */
.rec-pf-drop {
  position: relative;
  padding: 34px 20px;
  text-align: center;
  background: #F7FAFB;
  border: 2px dashed #A9BCC4;
  border-radius: 18px;
  transition: border-color .15s, background .15s;
}
.rec-pf-drop:hover, .rec-pf-drop-over { background: #F1F7F2; border-color: #2A7F31; }
.rec-pf-drop:focus-within { border-color: #2A7F31; box-shadow: 0 0 0 3px rgba(68, 183, 74, .3); }
.rec-pf-drop input[type="file"] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; cursor: pointer; opacity: 0; }
.rec-pf-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rec-pf-drop-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  font-size: 22px;
  color: #2A7F31;
  background: #E6F4E7;
  border-radius: 50%;
}
.rec-pf-drop-text { font-size: 17px; font-weight: 600; color: #001722; }
.rec-pf-drop-text u { color: #2A7F31; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.rec-pf-drop-hint { font-size: 14px; color: #4B5D66; }
/* A file is chosen: show it with Remove; the input no longer covers the zone */
.rec-pf-drop-has { text-align: left; background: #ffffff; border-style: solid; border-color: #C9D6DC; }
.rec-pf-drop-has input[type="file"] { pointer-events: none; }
.rec-pf-drop-file { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; }
.rec-pf-drop-file > i { font-size: 22px; color: #2A7F31; }
.rec-pf-drop-name { flex: 1 1 auto; min-width: 0; overflow: hidden; font-weight: 600; color: #001722; white-space: nowrap; text-overflow: ellipsis; }
.rec-pf-drop-size { flex: 0 0 auto; font-size: 13px; color: #4B5D66; }
.rec-pf-drop-remove { flex: 0 0 auto; padding: 6px 10px; font: inherit; font-size: 14px; font-weight: 600; color: #B42318; background: none; border: 0; border-radius: 8px; }
.rec-pf-drop-remove:hover, .rec-pf-drop-remove:focus { background: #FEF3F2; outline: none; }
/* The validator's message for the resume sits under the zone */
.rec-pf-drop p.text-danger, .rec-pf-drop label.error { position: relative; z-index: 2; margin-top: 10px; }

/* ---- Buttons (the careers site's leaf shape) */
.rec-pf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 28px 40px 0 28px;
}
.rec-pf .rec-pf-btn:hover, .rec-pf .rec-pf-btn:focus { text-decoration: none; }
.rec-pf-btn:focus-visible { outline: 3px solid #44B74A; outline-offset: 2px; }
.rec-pf .rec-pf-btn-primary, .rec-pf .rec-pf-btn-primary:focus { padding: 0 38px; color: #001722; background: #44B74A; }
.rec-pf .rec-pf-btn-primary:hover { color: #001722; background: #3BA641; }
.rec-pf .rec-pf-btn-outline, .rec-pf .rec-pf-btn-outline:focus { font-weight: 600; color: #0D3D54; background: #ffffff; border-color: #C9D6DC; }
.rec-pf .rec-pf-btn-outline:hover { color: #001722; background: #F6F9FA; }
.rec-pf-btn[disabled] { cursor: progress; opacity: .7; }

/* ---- Send */
.rec-pf-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; align-items: center; padding-top: 6px; }
.rec-pf-submit .fa-paper-plane { font-size: 15px; }
.rec-pf-sending .fa-paper-plane { animation: rec-pf-fly .9s ease-in-out infinite alternate; }
@keyframes rec-pf-fly { to { transform: translate(3px, -3px); } }
@media (prefers-reduced-motion: reduce) { .rec-pf-sending .fa-paper-plane { animation: none; } }

/* reCAPTCHA v3 is invisible: Google's badge in the bottom-right corner (over the footer's empty
   right side at the end of the page) and this notice */
.rec-pf-captcha-note { display: flex; gap: 8px; align-items: flex-start; justify-content: flex-end; margin-top: -6px; font-size: 13.5px; line-height: 1.5; color: #4B5D66; text-align: right; }
.rec-pf-captcha-note i { flex: 0 0 auto; margin-top: 3px; }

/* ---- The server's answer above the form */
.rec-pf-response:empty { display: none; }
.rec-pf-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; font-size: 15px; line-height: 1.5; border-radius: 12px; }
.rec-pf-alert i { margin-top: 3px; }
.rec-pf-alert-error { color: #912018; background: #FEF3F2; border: 1px solid #FECDCA; }
.rec-pf-alert-info { color: #166534; background: #F0FDF4; border: 1px solid #BBF7D0; }
/* Applied from this browser before (channel_form_js.php): under the email field */
.rec-pf-help.rec-pf-applied-email { color: #166534; }

/* ---- Sent (or the job no longer takes applications) */
.rec-pf-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 28px;
  text-align: center;
  background: #ffffff;
  border: 1px solid #E3EAEE;
  border-radius: 20px;
}
.rec-pf-done.hide { display: none; }
.rec-pf-done:focus { outline: none; }
.rec-pf-done-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  font-size: 26px;
  color: #2A7F31;
  background: #E6F4E7;
  border-radius: 50%;
}
.rec-pf-done-icon-muted { color: #4B5D66; background: #EEF3F5; }
.rec-pf-done-title { font-family: 'Mona Sans', sans-serif; font-weight: 500; font-size: 26px; color: #001722; }
.rec-pf-done-message { max-width: 520px; font-size: 16px; line-height: 1.6; color: #4B5D66; }
.rec-pf-done-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }

/* ---- Sent: in the job page's look (rec_portal_careers.css .rpx-d-*): a head with a tile,
   the agency's candidate profile, then a band with what to do next */
.rec-pf-done.rec-pf-sent { align-items: stretch; gap: 26px; padding: 34px clamp(20px, 3vw, 36px) 32px; text-align: left; }
.rec-pf-sent-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; align-items: start; }
.rec-pf-sent-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; font-size: 26px; color: #1F6326; background: #E0EAE2; border-radius: 18px; }
.rec-pf-sent-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rec-pf-sent-meta { font-size: 14px; color: #4B5D66; }
.rec-pf-sent-title { font-family: 'Mona Sans', sans-serif; font-weight: 500; font-size: 30px; line-height: 1.2; color: #001722; }
.rec-pf-sent .rec-pf-done-message { max-width: 640px; font-size: 16px; line-height: 1.6; color: #22343C; }
/* once sent: Back to job is in the band below, and "Applied before?" no longer applies */
.rec-pf-is-sent .rec-pf-toprow,
.rec-pf-is-sent .rec-pf-side-note { display: none; }

/* Sent by a recruitment agency: the candidate's name and ID as the job page's fact tiles,
   their profile address with Copy link */
.rec-pf-profile { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 1px solid #E3EAEE; }
.rec-pf-profile.hide { display: none; }
.rec-pf-profile-intro { display: flex; flex-direction: column; gap: 4px; }
.rec-pf .rec-pf-profile-title { margin: 0; font-family: 'Mona Sans', sans-serif; font-weight: 500; font-size: 20px; line-height: 1.3; color: #001722; }
.rec-pf-profile-help { font-size: 15px; line-height: 1.55; color: #4B5D66; }
.rec-pf-pfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0; }
.rec-pf-pfact { padding: 16px 18px; border-radius: 16px; }
.rec-pf-pfact.hide { display: none; }
.rec-pf-pfact-name { background: #E0EAE2; }
.rec-pf-pfact-code { background: #CAEDF4; }
.rec-pf-pfact dt { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #35464E; }
.rec-pf-pfact dd { margin: 8px 0 0; font-family: 'Mona Sans', sans-serif; font-weight: 600; font-size: 17px; line-height: 1.3; color: #001722; overflow-wrap: anywhere; }
/* the address on one line: when it does not fit, its start is shortened, never its end
   ("/candidate/name-123", the part that counts) */
.rec-pf-share { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 18px; background: #ffffff; border: 1px solid #C9D6DC; border-radius: 18px; }
.rec-pf-share-icon { flex: 0 0 auto; font-size: 15px; color: #4B5D66; }
.rec-pf .rec-pf-profile-url { display: flex; flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 15px; color: #0D3D54; white-space: nowrap; text-decoration: none; }
.rec-pf-url-head { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rec-pf-url-tail { flex: 0 0 auto; }
.rec-pf .rec-pf-profile-url:hover, .rec-pf .rec-pf-profile-url:focus { color: #001722; text-decoration: underline; }
.rec-pf .rec-pf-profile-copy { flex: 0 0 auto; min-height: 46px; padding: 0 24px; font-size: 15px; }
.rec-pf .rec-pf-profile-copy.rec-pf-copied, .rec-pf .rec-pf-profile-copy.rec-pf-copied:hover { color: #ffffff; background: #2A7F31; }
/* read out when copied; shown only when copying failed */
.rec-pf-profile-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rec-pf-profile-status.rec-pf-profile-status-error { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 14px; font-weight: 600; color: #912018; white-space: normal; }

/* What to do next: the job page's "Interested in this role?" band. An agency gets its own
   (Send another candidate) in place of the applicant's. */
.rec-pf-sent-next { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 24px 28px; background: #F3F7F4; border-radius: 20px; }
.rec-pf-sent-next-text { display: flex; flex: 1 1 280px; flex-direction: column; gap: 4px; min-width: 0; }
.rec-pf-sent-next-title { font-family: 'Mona Sans', sans-serif; font-weight: 500; font-size: 18px; color: #001722; }
.rec-pf-sent-next-sub { font-size: 14px; line-height: 1.5; color: #4B5D66; }
.rec-pf-sent .rec-pf-done-actions { justify-content: flex-end; margin-top: 0; }
.rec-pf-next-agency,
.rec-pf-sent-agency .rec-pf-next-public { display: none; }
.rec-pf-sent-agency .rec-pf-next-agency { display: flex; }

/* ---- Side panel: what happens next, applying again */
.rec-pf-aside { display: flex; flex: 1 1 340px; flex-direction: column; gap: 16px; max-width: 400px; min-width: 0; }
.rec-pf-side-card { display: flex; flex-direction: column; gap: 16px; padding: 26px; background: #ffffff; border: 1px solid #E3EAEE; border-radius: 20px; }
.rec-pf-side-title { font-family: 'Mona Sans', sans-serif; font-weight: 500; font-size: 20px; color: #001722; }
.rec-pf-steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.rec-pf-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; line-height: 1.5; color: #22343C; }
.rec-pf-steps li span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 14px; font-weight: 700; color: #1F6326; background: #E6F4E7; border-radius: 50%; }
.rec-pf-side-note { display: flex; flex-direction: column; gap: 8px; padding: 22px 26px; background: #EAF1F3; border-radius: 20px; }
.rec-pf-side-note h2 { font-size: 16px; font-weight: 700; color: #001722; }
.rec-pf-side-note p { font-size: 15px; line-height: 1.55; color: #22343C; }

/* ---- Footer */
.rec-pf-foot { background: #ffffff; border-top: 1px solid #E3EAEE; }
.rec-pf-foot .rec-pf-shell { padding-top: 24px; padding-bottom: 24px; font-size: 14px; color: #4B5D66; }

/* ---- Laptops (a screen up to 800px high): a smaller header and job panel, so the form starts higher */
@media (min-width: 768px) and (max-height: 800px) {
  .rec-pf-top .rec-pf-shell { padding-top: 14px; padding-bottom: 14px; }
  .rec-pf-logo { height: 40px; }
  .rec-pf-hero { padding: 22px clamp(20px, 4vw, 48px) 26px; border-radius: 24px; }
  .rec-pf-hero-text { gap: 10px; }
  .rec-pf-eyebrow { font-size: 13px; }
  .rec-pf-job-title { font-size: 30px; }
  .rec-pf-job-title.rec-pf-title-long { font-size: 27px; }
  .rec-pf-job-title.rec-pf-title-xlong { font-size: 24px; }
  .rec-pf-main { padding-top: 24px; }
}

/* ---- Narrow phones (two fields would be under 240px): one field per row */
@media (max-width: 560px) {
  .rec-pf-grid { grid-template-columns: minmax(0, 1fr); }
  .rec-pf-span2 { grid-column: auto; }
}

/* ---- Phones */
@media (max-width: 767px) {
  .rec-pf-shell { padding: 0 12px; }
  .rec-pf-top .rec-pf-shell { padding: 16px 16px 14px; }
  .rec-pf-logo { height: 32px; }
  .rec-pf-hero { gap: 16px; padding: 22px 18px 24px; border-radius: 22px; }
  .rec-pf-hero-text { gap: 10px; }
  .rec-pf .rec-pf-all { padding: 9px 16px; font-size: 14px; }
  .rec-pf-eyebrow { font-size: 13px; }
  .rec-pf-job-title { font-size: 24px; line-height: 1.22; }
  .rec-pf-job-title.rec-pf-title-long { font-size: 22px; }
  .rec-pf-job-title.rec-pf-title-xlong { font-size: 20px; }
  .rec-pf-facts { gap: 6px 18px; }
  .rec-pf-facts li { font-size: 14px; }
  .rec-pf-main { gap: 16px; padding-top: 20px; padding-bottom: 32px; }
  .rec-pf-col, .rec-pf-form { gap: 16px; }
  .rec-pf-toprow { gap: 8px; }
  .rec-pf-back { padding: 6px 12px 6px 10px; font-size: 13.5px; }
  .rec-pf-required-note { gap: 6px; padding: 7px 12px; font-size: 13px; }
  .rec-pf-card { gap: 16px; padding: 20px 16px; border-radius: 18px; }
  .rec-pf-step { flex-basis: 32px; width: 32px; height: 32px; font-size: 14px; }
  .rec-pf-card-title { font-size: 19px; }
  .rec-pf-card-sub { font-size: 14px; }
  .rec-pf-grid { gap: 16px; }
  .rec-pf-form .form-control, .rec-pf-form .bootstrap-select > .dropdown-toggle { height: 50px; }
  .rec-pf-form .bootstrap-select > .dropdown-toggle { padding-top: 13px; padding-bottom: 13px; }
  .rec-pf-drop { padding: 26px 14px; border-radius: 16px; }
  .rec-pf-drop-icon { width: 48px; height: 48px; font-size: 20px; }
  .rec-pf-drop-text { font-size: 16px; }
  .rec-pf-agency { border-radius: 18px; }
  .rec-pf-agency-head { padding: 16px; }
  .rec-pf-agency-icon { display: none; }
  .rec-pf-agency-title { font-size: 16.5px; }
  .rec-pf-agency-sub { font-size: 14px; }
  .rec-pf-form .rec-pf-agency-body { max-width: none; padding: 0 16px 18px; }
  .rec-pf-actions { flex-direction: column-reverse; align-items: stretch; }
  .rec-pf-actions .rec-pf-btn { width: 100%; }
  .rec-pf-captcha-note { justify-content: flex-start; margin: 0 4px; font-size: 13px; text-align: left; }
  .rec-pf-aside { max-width: none; }
  .rec-pf-side-card, .rec-pf-side-note { padding: 20px 16px; border-radius: 18px; }
  .rec-pf-done { padding: 36px 18px; }
  .rec-pf-done-actions { flex-direction: column; align-self: stretch; }
  .rec-pf-done.rec-pf-sent { gap: 22px; padding: 24px 16px 18px; }
  .rec-pf-sent-head { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
  .rec-pf-sent-icon { width: 52px; height: 52px; font-size: 22px; border-radius: 16px; }
  .rec-pf-sent-title { font-size: 24px; }
  .rec-pf-sent .rec-pf-done-message { font-size: 15px; }
  .rec-pf-profile { padding-top: 20px; }
  /* the whole address on two or three lines, Copy link under it */
  .rec-pf-share { flex-wrap: wrap; padding: 14px 14px 12px; }
  .rec-pf-share-icon { align-self: flex-start; width: 18px; margin-top: 2px; }
  .rec-pf .rec-pf-profile-url { display: block; flex: 1 1 calc(100% - 42px); font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
  .rec-pf-url-head { overflow: visible; }
  .rec-pf .rec-pf-profile-copy { flex: 1 1 100%; }
  .rec-pf-sent-next { padding: 20px 16px; border-radius: 18px; }
  .rec-pf-sent .rec-pf-done-actions .rec-pf-btn { width: 100%; }
  .rec-pf-foot .rec-pf-shell { padding: 20px 16px; font-size: 13.5px; }
}