/**
 * Quick Apply modal — shared by the jobs archive / search / landing results and
 * the single job listing's "Similar jobs" cards.
 *
 * Extracted from jobs-archive.css so single job listings can render the modal
 * without loading the whole archive stylesheet. Selectors keep their
 * .advantis-jobs-v2 prefix: single-job.css styles .interested-form-wrap /
 * .amed-ff-row / .amed-optin-wrap unscoped, and dropping the prefix would tie
 * with those on specificity and leave the winner up to load order.
 *
 * On the archive that prefix is the page <main>. On single job listings
 * advantis_single_job_quick_apply_modal() (functions.php, wp_footer) wraps the
 * modal in a bare .advantis-jobs-v2 div purely as the specificity hook these
 * selectors expect — jobs-archive.css is not loaded there, so nothing else
 * matches it.
 */

/* Self-contained base + tokens: the modal mounts at body level on single job
   listings — outside .amed-single-job, and jobs-archive.css is not loaded there,
   so neither of the usual base layers applies. The canonical token set lives on
   .advantis-jobs-v2 in jobs-archive.css; these repeat it with identical values,
   scoped to .qa-modal so they cannot reach anything else. Keep the two in sync. */
.qa-modal,
.qa-modal *,
.qa-modal *::before,
.qa-modal *::after {
  box-sizing: border-box;
}

.qa-modal {
  --ink: #0f1722;
  --navy: #16263b;
  --slate: #475569;
  --muted: #64748b; /* AA-darkened; deliberately diverges from --adv-muted (#7a8898, 3.6:1) */
  --teal: #0ca2d4;
  --teal-d: #0879a2;
  --teal-soft: #e3f6fc;
  --line: #e5eaf0;
  --panel: #f4f7fa;
  --card: #fff;
  --gold1: #c2901e;
  --gold2: #946c0a;
  --shadow-lg: 0 16px 48px rgba(15, 23, 34, 0.18);

  font-family: system-ui, "Verdana", sans-serif;
  line-height: 1.45;
}

/* Form controls and buttons don't inherit font-family by default. */
.qa-modal button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.qa-modal input,
.qa-modal select {
  font-family: inherit;
}

/* ─────────────────────────────────────────────────────────────
   Quick Apply modal
   Shared "I'm Interested" CF7 form (89780) opened from a card's
   .qa button. Markup: template-parts/jobs/quick-apply-modal.php.
   Behavior: assets/js/quick-apply-modal.js.
   ───────────────────────────────────────────────────────────── */
.advantis-jobs-v2 .qa-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  padding: 20px;
  background: rgba(15, 23, 34, 0.55);
  justify-content: center;
  align-items: center;
  animation: qa-fade 0.15s ease;
}

.advantis-jobs-v2 .qa-modal.is-open {
  display: flex;
}

@keyframes qa-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.advantis-jobs-v2 .qa-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 468px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px 24px 22px;
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  animation: qa-pop 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes qa-pop {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.advantis-jobs-v2 .qa-modal__close {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.advantis-jobs-v2 .qa-modal__close:hover {
  background: var(--panel);
  color: var(--ink);
}

.advantis-jobs-v2 .qa-modal__close svg {
  width: 18px;
  height: 18px;
}

/* ── Job-context header ──────────────────────────────────── */
/* Mirrors the single job page's Quick Apply form: centred heading -> sub ->
   job-context pill. Type sizes match #primary .interested-form-wrap h2 /
   .sub-heading, and the pill matches .contact-question-modal__ctx — both in
   single-job.css, which never loads here (its enqueue is mutually exclusive
   with this file's), so the rules are duplicated rather than shared. */
/* No right inset: that cleared the close button when this header was
   left-aligned, but it would pull centred content 15px off-centre. The
   heading is short enough that it never reaches the close button. */
.advantis-jobs-v2 .qa-modal__ctx {
  padding: 0 0 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.advantis-jobs-v2 .qa-modal__title {
  margin: 0 0 7px;
  color: var(--ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.advantis-jobs-v2 .qa-modal__sub {
  margin: 4px 0 14px;
  color: var(--slate);
  font-size: 20px;
  font-weight: 500;
}

.advantis-jobs-v2 .qa-modal__pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal-d);
  font-size: 12px;
  font-weight: 700;
}

.advantis-jobs-v2 .qa-modal__pill svg {
  width: 13px;
  height: 13px;
  flex: none;
}

/* Trust line under the form — ported from single-job.css's .amed-apply-trust
   since that file never loads on archive pages. Stars sit on their own line
   above the text, so they're wrapped in .amed-apply-trust__stars (a text node
   can't be pushed to its own flex line without an element to target). */
.advantis-jobs-v2 .qa-modal .amed-apply-trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 12px 0 0;
  padding-block: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}

.advantis-jobs-v2 .qa-modal .amed-apply-trust__stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.advantis-jobs-v2 .qa-modal .amed-apply-trust svg {
  width: 14px;
  height: 14px;
  color: var(--gold1);
  flex: none;
}

/* SMS consent disclosure — ported from single-job.css's .amed-apply-legal for the
   same reason as the trust line above. Centred here (the rail's copy is
   left-aligned) to sit with the modal's centred composition. */
.advantis-jobs-v2 .qa-modal .amed-apply-legal {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
  color: #aab4bf;
  text-align: center;
}

.advantis-jobs-v2 .qa-modal .amed-apply-legal a {
  color: #8a97a5;
  text-decoration: underline;
}

/* ── CF7 form inside the modal ───────────────────────────── */
/* The modal header supplies the heading/subhead; hide the form's own. */
.advantis-jobs-v2 .qa-modal .interested-form-wrap > h2,
.advantis-jobs-v2 .qa-modal .interested-form-wrap > .sub-heading {
  display: none;
}

.advantis-jobs-v2 .qa-modal .wpcf7 {
  margin: 0;
}

/* CF7 wraps every control in a <p> with default block margins — remove them;
   spacing is owned by the row/section rules below. */
.advantis-jobs-v2 .qa-modal .wpcf7 p {
  margin: 0;
}

.advantis-jobs-v2 .qa-modal .amed-ff-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.advantis-jobs-v2 .qa-modal .interesred-form {
  flex: 1 1 0;
  min-width: 0;
}

.advantis-jobs-v2 .qa-modal .interesred-form .wpcf7-form-control-wrap {
  display: block;
}

.advantis-jobs-v2
  .qa-modal
  input.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]) {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.advantis-jobs-v2
  .qa-modal
  input.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-soft);
}

/* "+1" prefix inside the phone field (shown on focus / when filled). */
.advantis-jobs-v2 .qa-modal .phone-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.advantis-jobs-v2 .qa-modal .phone-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  color: var(--muted);
  font-size: 15px;
  pointer-events: none;
}

.advantis-jobs-v2 .qa-modal .phone-wrap.show-prefix .phone-prefix {
  display: block;
}

.advantis-jobs-v2 .qa-modal .phone-wrap.show-prefix input[name="phone-number"] {
  padding-left: 38px;
}

/* SMS opt-in — CF7 renders spans (no <label>), so the flex row lives on
   .wpcf7-list-item; the checkbox is a custom teal control. */
.advantis-jobs-v2 .qa-modal .amed-optin-wrap {
  margin: 6px 0 16px;
}

.advantis-jobs-v2 .qa-modal .amed-optin-wrap .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}

.advantis-jobs-v2 .qa-modal .amed-optin-wrap .wpcf7-list-item-label {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
  cursor: pointer;
}

.advantis-jobs-v2 .qa-modal .amed-optin-wrap input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  background: #fff;
  border: 1.5px solid #c3cedb;
  border-radius: 5px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.advantis-jobs-v2 .qa-modal .amed-optin-wrap input[type="checkbox"]:hover {
  border-color: var(--teal);
}

.advantis-jobs-v2 .qa-modal .amed-optin-wrap input[type="checkbox"]:checked {
  background: var(--teal);
  border-color: var(--teal);
}

.advantis-jobs-v2
  .qa-modal
  .amed-optin-wrap
  input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.advantis-jobs-v2
  .qa-modal
  .amed-optin-wrap
  input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--teal-soft);
}

/* Submit — gold CTA, full width */
.advantis-jobs-v2 .qa-modal .submit-button-wrapper {
  margin-top: 4px;
}

.advantis-jobs-v2 .qa-modal .submit-button-wrapper p {
  position: relative;
}

.advantis-jobs-v2 .qa-modal .wpcf7-submit,
.advantis-jobs-v2 .qa-modal .interest-button-submit {
  width: 100%;
  padding: 14px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  background: linear-gradient(135deg, var(--gold1), var(--gold2));
  border: none;
  border-radius: 11px;
  box-shadow: 0 4px 14px rgba(148, 108, 10, 0.32);
  cursor: pointer;
  transition: filter 0.2s ease;
}

.advantis-jobs-v2 .qa-modal .wpcf7-submit:hover,
.advantis-jobs-v2 .qa-modal .interest-button-submit:hover {
  filter: brightness(1.05);
}

/* Idle CF7 keeps the spinner at visibility:hidden but it still reserves a
   layout box; overlay it inside the button so it never adds vertical space,
   and it simply appears in place while submitting. */
.advantis-jobs-v2 .qa-modal .wpcf7-spinner {
  position: absolute;
  top: 50%;
  right: 16px;
  margin: 0;
  transform: translateY(-50%);
}

/* CF7 validation feedback — one calm error red across field ring, tip, and
   summary banner. */
.advantis-jobs-v2 .qa-modal .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  color: #c0453c;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

/* Matches the base input selector's specificity (its :not() attrs out-rank a
   plain .wpcf7-not-valid) so the invalid ring actually applies. */
.advantis-jobs-v2
  .qa-modal
  input.wpcf7-form-control:not([type="submit"]):not(
    [type="checkbox"]
  ).wpcf7-not-valid {
  border-color: #d98680;
  box-shadow: 0 0 0 3px rgba(192, 69, 60, 0.12);
}

.advantis-jobs-v2 .qa-modal .wpcf7-response-output {
  display: flex;
  gap: 8px;
  margin: 14px 0 0;
  padding: 11px 14px;
  color: #9a3a31;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  background: #fdf2f1;
  border: 1px solid #f1cec9;
  border-radius: 10px;
}

.advantis-jobs-v2 .qa-modal .wpcf7-response-output:empty {
  display: none;
}

/* Success state (CF7 reuses the response-output element for its sent message). */
.advantis-jobs-v2 .qa-modal .wpcf7-response-output.wpcf7-mail-sent-ok {
  color: #1f7a4d;
  background: #eefaf2;
  border-color: #b7e2c7;
}

/* Lead-submission error (our admin-ajax pipeline, not CF7's) — same treatment. */
.advantis-jobs-v2 .qa-modal__error {
  margin-top: 14px;
  padding: 11px 14px;
  color: #9a3a31;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  background: #fdf2f1;
  border: 1px solid #f1cec9;
  border-radius: 10px;
}

/* ── Success panel ───────────────────────────────────────── */
.advantis-jobs-v2 .qa-modal__success {
  padding: 12px 6px 6px;
  text-align: center;
}

.advantis-jobs-v2 .qa-modal__success-badge {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  color: var(--teal-d);
  background: var(--teal-soft);
  border-radius: 50%;
}

.advantis-jobs-v2 .qa-modal__success-badge svg {
  width: 28px;
  height: 28px;
}

.advantis-jobs-v2 .qa-modal__success h2 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 20px;
  font-weight: 700;
}

.advantis-jobs-v2 .qa-modal__success p {
  margin: 0 auto 18px;
  max-width: 34ch;
  color: var(--slate);
  font-size: 14px;
  line-height: 1.5;
}

.advantis-jobs-v2 .qa-modal__finish {
  display: inline-block;
  padding: 13px 22px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  /* Blue CTA gradient, matching the single job page's .amed-apply-success__more.
     --adv-cta is a :root token from site-chrome.css, which loads site-wide. The
     gold gradient is reserved for the form's own Apply Now submit. */
  background: var(--adv-cta);
  border-radius: 11px;
  box-shadow: 0 4px 14px rgba(28, 138, 210, 0.35);
  transition: filter 0.2s ease;
}

.advantis-jobs-v2 .qa-modal__finish:hover {
  filter: brightness(1.05);
}

/* ── Mobile: dock as a bottom sheet ──────────────────────── */
@media (max-width: 560px) {
  .advantis-jobs-v2 .qa-modal {
    padding: 0;
    align-items: flex-end;
  }

  .advantis-jobs-v2 .qa-modal__dialog {
    max-width: none;
    max-height: 92vh;
    padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
    animation: qa-sheet-up 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  @keyframes qa-sheet-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: none;
    }
  }

  .advantis-jobs-v2 .qa-modal .amed-ff-row {
    flex-wrap: wrap;
  }

  .advantis-jobs-v2 .qa-modal .interesred-form {
    flex-basis: 100%;
  }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .advantis-jobs-v2 .qa-modal,
  .advantis-jobs-v2 .qa-modal__dialog {
    animation: none;
  }
}