/* =============================================================================
   hyyryn-jobmodal.css
   The split-card overlay, built 18 Aug 2026. Sir asked for these two to be
   popups "like the login page", so the card is built the way login.html is
   built, navy photo panel beside the form, and then floated on a blurred
   backdrop instead of filling the viewport.
   Used by: review-homeowner, quote.
   Prefix jsm-. Assumes the host page defines --cream --navy --green --gold
   --ink --muted --line --serif --sans.
============================================================================= */

.jsm-body { background: var(--cream); min-height: 100vh; overflow: hidden; }

/* what sits behind. Not a screenshot of my-jobs, but the same cream ground and
   the same arches, blurred, so the card reads as floating over the app. */
.jsm-backdrop {
  position: fixed; inset: -40px;
  background: var(--cream);
  background-image:
    radial-gradient(52% 42% at 18% 12%, rgba(15,90,79,.10) 0%, rgba(15,90,79,0) 60%),
    radial-gradient(46% 40% at 84% 78%, rgba(184,148,31,.12) 0%, rgba(184,148,31,0) 62%),
    linear-gradient(180deg, #FBF9F4 0%, #F1EBDD 100%);
  filter: blur(14px);
}
.jsm-scrim {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(10,22,40,.42); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 3vh, 40px) clamp(14px, 3vw, 40px);
  overflow-y: auto;
}
.jsm-card {
  position: relative; width: 100%; max-width: 1020px;
  background: #fff; border-radius: 20px; overflow: hidden;
  display: grid; grid-template-columns: 340px minmax(0,1fr);
  max-height: calc(100vh - clamp(28px, 6vh, 80px));
  box-shadow: 0 30px 80px -24px rgba(10,22,40,.55), 0 2px 6px rgba(10,22,40,.14);
  animation: jsmIn .42s cubic-bezier(.16,1,.3,1) both;
}
@keyframes jsmIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.jsm-close {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; text-decoration: none;
  background: rgba(255,255,255,.9); box-shadow: 0 1px 3px rgba(10,22,40,.16);
}
.jsm-close svg { width: 15px; height: 15px; stroke: var(--ink); fill: none; stroke-width: 1.8; }
.jsm-close:hover { background: #fff; }

/* ---------- left, the login page construction ---------------------------- */
.jsm-side {
  position: relative; background: var(--navy); color: var(--cream);
  padding: 34px 30px 30px; display: flex; flex-direction: column; justify-content: space-between;
  background-size: cover; background-position: center; min-height: 420px;
}
.jsm-side::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,22,40,.74) 0%, rgba(10,22,40,.44) 40%, rgba(10,22,40,.90) 100%);
}
.jsm-side > * { position: relative; }
.jsm-eyebrow {
  font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(250,248,243,.60);
}
.jsm-side-title {
  font-family: var(--serif); font-size: 27px; line-height: 1.16; color: #fff; font-weight: 400; margin-top: 12px;
}
.jsm-side-sub { font-family: var(--sans); font-size: 12px; line-height: 1.55; color: rgba(250,248,243,.70); margin-top: 10px; }
.jsm-facts { display: grid; gap: 13px; margin-top: 26px; }
.jsm-fact { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 11px; align-items: start; }
.jsm-fact svg { width: 15px; height: 15px; stroke: rgba(250,248,243,.72); fill: none; stroke-width: 1.5; margin-top: 2px; }
.jsm-fact-t { font-family: var(--sans); font-size: 12.5px; color: #fff; }
.jsm-fact-d { font-family: var(--sans); font-size: 11px; color: rgba(250,248,243,.55); margin-top: 2px; }
.jsm-side-foot { border-top: 1px solid rgba(250,248,243,.14); padding-top: 16px; margin-top: 26px; }
.jsm-side-quote { font-family: var(--serif); font-size: 13px; line-height: 1.6; color: rgba(250,248,243,.85); }
.jsm-stars { display: flex; gap: 5px; margin-top: 11px; }
.jsm-stars svg { width: 12px; height: 12px; fill: var(--gold-soft, #D4A943); }

/* ---------- right, the scrolling form ------------------------------------ */
.jsm-main { padding: 36px clamp(24px, 3vw, 40px) 34px; overflow-y: auto; }
.jsm-h { font-family: var(--serif); font-size: clamp(25px, 2.3vw, 32px); line-height: 1.14; color: var(--ink); font-weight: 400; }
.jsm-sub { font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: 9px; }
.jsm-rule { height: 1px; background: var(--line); margin: 24px 0; }

/* step rail inside the card, used by the checkout */
.jsm-steps { display: flex; align-items: center; gap: 0; margin-bottom: 26px; flex-wrap: wrap; }
.jsm-step { display: inline-flex; align-items: center; gap: 9px; }
.jsm-step-num {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  background: rgba(10,22,40,.06); color: var(--muted);
}
.jsm-step-label { font-family: var(--sans); font-size: 12.5px; color: var(--muted); }
.jsm-step.is-current .jsm-step-num { background: var(--navy); color: #fff; }
.jsm-step.is-current .jsm-step-label { color: var(--ink); font-weight: 600; }
.jsm-step.is-done .jsm-step-num { background: var(--green); color: #fff; }
.jsm-step-line { flex: 1 1 30px; height: 1px; background: var(--line); margin: 0 12px; min-width: 16px; }

.jsm-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; flex-wrap: wrap; }
.jsm-cancel { font-family: var(--sans); font-size: 13px; color: var(--muted); text-decoration: none; }
.jsm-cancel:hover { color: var(--ink); }
.jsm-cta {
  display: inline-flex; align-items: center; gap: 11px; border: 0; cursor: pointer;
  background: var(--navy); color: #fff; border-radius: 999px; padding: 15px 26px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(10,22,40,.10), 0 12px 26px -12px rgba(10,22,40,.55);
  transition: transform .18s ease;
}
.jsm-cta:hover { transform: translateY(-1px); }
.jsm-cta[disabled] { opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; }
.jsm-cta svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.jsm-consequence { font-family: var(--sans); font-size: 11px; line-height: 1.5; color: var(--muted); margin-top: 10px; }

@media (max-width: 860px) {
  .jsm-card { grid-template-columns: minmax(0,1fr); max-height: none; }
  .jsm-side { min-height: 200px; padding: 26px 24px 24px; }
  .jsm-facts, .jsm-side-foot { display: none; }
  .jsm-scrim { align-items: flex-start; }
  .jsm-main { padding: 26px 22px 28px; }
}

/* the success pane lives in the same grid cell as the form */
.jsm-card > .success-state { display: none; }
.jsm-card > .success-state.active {
  display: block; padding: 46px clamp(24px, 3vw, 40px); overflow-y: auto; text-align: center;
}

/* =========================== checkout overlay ============================= */
.jsm-scrim[hidden] { display: none; }
.jsm-card--wide { max-width: 1120px; grid-template-columns: 360px minmax(0,1fr); }
.co-pane { display: none; }
.co-pane.is-on { display: block; }

.co-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
.co-f {
  display: block; border: 1px solid var(--line); border-radius: 11px;
  padding: 9px 14px 10px; background: #fff;
}
.co-f--wide { grid-column: 1 / -1; }
.co-f:focus-within { border-color: rgba(10,22,40,.30); }
.co-l {
  display: block; font-family: var(--sans); font-size: 9px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.co-l em { font-style: normal; font-weight: 500; letter-spacing: .06em; opacity: .7; }
.co-f input {
  width: 100%; border: 0; outline: 0; background: transparent;
  font-family: var(--sans); font-size: 13.5px; color: var(--ink); padding: 0;
}
.co-f input::placeholder { color: rgba(107,114,128,.62); }

.co-order { display: grid; gap: 11px; }
.co-order-row { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.co-order-l { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.co-order-v { font-family: var(--sans); font-size: 13px; color: var(--ink); text-align: right; }

.co-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 6px 0;
  font-family: var(--sans); font-size: 13px; color: var(--ink); }
.co-sum span:first-child { color: var(--muted); }
.co-inc { color: var(--green); font-weight: 600; }
.co-sum--total { border-top: 1px solid rgba(10,22,40,.16); margin-top: 10px; padding-top: 14px; }
.co-sum--total span:first-child { font-family: var(--serif); font-size: 17px; color: var(--ink); }
.co-sum--total span:last-child { font-family: var(--serif); font-size: 25px; color: var(--ink); letter-spacing: -0.01em; }
.co-memo { display: flex; justify-content: space-between; gap: 18px;
  font-family: var(--sans); font-size: 11.5px; color: var(--muted); margin-top: 6px; }

.co-protect {
  margin-top: 20px; border-radius: 11px; background: var(--cream-2, #F3EFE4); padding: 15px 16px;
  display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 12px; align-items: start;
}
.co-protect > svg { width: 19px; height: 19px; stroke: var(--green); fill: none; stroke-width: 1.5; margin-top: 1px; }
.co-protect-t { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.co-protect-d { font-family: var(--sans); font-size: 11.5px; line-height: 1.55; color: var(--muted); }

/* the required agreement, directly above the button. Audo Copenhagen. */
.co-terms { display: flex; gap: 11px; align-items: flex-start; margin-top: 20px; cursor: pointer; }
.co-terms input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--navy); flex: none; }
.co-terms span { font-family: var(--sans); font-size: 12.5px; line-height: 1.55; color: var(--ink); }
.co-terms a { color: var(--ink); }

.co-stripe {
  border: 1px solid var(--line); border-radius: 12px; padding: 16px 17px;
  display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 12px; align-items: start;
}
.co-stripe > svg { width: 19px; height: 19px; stroke: var(--navy); fill: none; stroke-width: 1.5; margin-top: 1px; }
.co-stripe-t { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.co-stripe-d { font-family: var(--sans); font-size: 11.5px; line-height: 1.55; color: var(--muted); }
.co-payrow { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-top: 16px; }
.co-payrow div {
  border: 1px solid var(--line); border-radius: 9px; height: 38px; display: grid; place-items: center;
  font-family: var(--sans); font-size: 8.5px; font-weight: 700; letter-spacing: .06em; color: var(--muted);
}
.co-final { margin-top: 22px; border-radius: 12px; background: var(--navy); color: #fff; padding: 20px 20px 18px; }
.co-final-l { font-family: var(--sans); font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(250,248,243,.6); }
.co-final-v { font-family: var(--serif); font-size: 32px; margin-top: 7px; letter-spacing: -0.01em; }
.co-final-s { font-family: var(--sans); font-size: 11.5px; line-height: 1.55; color: rgba(250,248,243,.65); margin-top: 8px; }