/* ==========================================================================
   Jordan Law — Contact Widget
   Palette/type come from the jordan-law theme's SCSS variables so the widget
   reads as native on jordanlaw.com. Every rule is namespaced .jlcw-* and the
   root re-declares inherited properties, so theme CSS cannot bleed in.
   ========================================================================== */

.jlcw-root,
.jlcw-launcher {
  /* Brand — jordan-law/assets/dev/scss/custom/variables.scss */
  --jlcw-navy:        #0B243C;   /* $basePrimary   */
  --jlcw-navy-soft:   #152D45;   /* $blue_15       */
  --jlcw-blue:        #0172B0;   /* $baseSecondary */
  --jlcw-blue-dark:   #015B8C;
  --jlcw-blue-tint:   #E7F1F8;
  --jlcw-yellow:      #FFBC43;   /* $baseThirdly   */
  --jlcw-yellow-dark: #F0AC2E;
  --jlcw-ink:         #2A3439;
  --jlcw-muted:       #5D6567;   /* $gray_5d       */
  --jlcw-line:        #CEDDE3;   /* $blue_ce       */
  --jlcw-line-soft:   #E3EBF0;
  --jlcw-surface:     #F1F5F8;   /* $gray_f1       */
  --jlcw-danger:      #B3261E;
  --jlcw-success:     #2F7D52;

  /* Header matches the launcher — yellow ground, navy type — so the panel
     reads as that button expanding rather than a separate object. */
  --jlcw-header-bg:   var(--jlcw-yellow);
  --jlcw-header-ink:  var(--jlcw-navy);

  --jlcw-radius:      6px;
  --jlcw-radius-lg:   10px;
  /* Two shadows doing opposite jobs: the hairline ring defines the panel's
     edge against dark backgrounds (the navy hero, where a dark shadow is
     invisible), the drop shadow does it against light ones. Each is
     imperceptible where the other is working. */
  --jlcw-shadow:      0 0 0 1px rgba(255, 255, 255, .22),
                      0 18px 40px rgba(11, 36, 60, .38);
  --jlcw-font:        'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --jlcw-serif:       'Playfair Display', Georgia, 'Times New Roman', serif;
  --jlcw-z:           2147483000;
}

.jlcw-root *,
.jlcw-root *::before,
.jlcw-root *::after,
.jlcw-launcher,
.jlcw-launcher * { box-sizing: border-box; }

/* --------------------------------------------------------------- launcher */

.jlcw-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--jlcw-z);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 20px;
  border: 0;
  border-radius: var(--jlcw-radius);
  background: var(--jlcw-yellow);
  box-shadow: 0 8px 22px rgba(11, 36, 60, .4);
  color: var(--jlcw-navy);
  font: 600 15px/1.2 var(--jlcw-font);
  letter-spacing: .01em;
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.jlcw-launcher:hover  { background: var(--jlcw-yellow-dark); transform: translateY(-2px); }
.jlcw-launcher:active { transform: translateY(0); }
.jlcw-launcher svg    { flex: none; display: block; }
.jlcw-launcher[hidden] { display: none; }

/* ------------------------------------------------------------------- root */

.jlcw-root {
  position: fixed;
  inset: 0;
  z-index: calc(var(--jlcw-z) + 1);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 24px;
  pointer-events: none;
  font-family: var(--jlcw-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--jlcw-ink);
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
}
.jlcw-root[hidden] { display: none; }

.jlcw-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 36, 60, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
/* The dialog is genuinely modal (focus trapped, Escape closes), so the scrim
   blocks the page rather than only looking like it does. */
.jlcw-root.is-open .jlcw-backdrop { opacity: 1; pointer-events: auto; }

/* ------------------------------------------------------------------ panel */

.jlcw-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 400px;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  border-radius: var(--jlcw-radius-lg);
  background: #fff;
  box-shadow: var(--jlcw-shadow);
  overflow: hidden;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transform-origin: 100% 100%;
  transition: opacity .22s ease, transform .22s cubic-bezier(.2, .8, .3, 1);
}
.jlcw-root.is-open .jlcw-panel { opacity: 1; transform: none; }

.jlcw-header {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px;
  background: var(--jlcw-header-bg);
}
.jlcw-brand { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.jlcw-mark  { flex: none; height: 30px; width: auto; margin-top: 3px; }
.jlcw-title {
  margin: 0;
  font-family: var(--jlcw-serif);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.15;
  color: var(--jlcw-header-ink);
}
.jlcw-sub { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: rgba(11, 36, 60, .72); }

.jlcw-close {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(11, 36, 60, .35);
  border-radius: 50%;
  background: transparent;
  color: var(--jlcw-header-ink);
  font: 400 15px/1 var(--jlcw-font);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.jlcw-close:hover { background: rgba(11, 36, 60, .12); border-color: rgba(11, 36, 60, .6); }

.jlcw-body {
  flex: 1 1 auto;
  padding: 22px 24px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------- progress */

.jlcw-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.jlcw-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #DEE3E9;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.jlcw-dot.is-done    { background: var(--jlcw-blue); }
.jlcw-dot.is-current {
  width: 10px;
  height: 10px;
  background: var(--jlcw-blue);
  box-shadow: 0 0 0 4px rgba(1, 114, 176, .18);
}
.jlcw-rail {
  width: 26px;
  height: 2px;
  background: #DEE3E9;
  transition: background-color .25s ease;
}
.jlcw-rail.is-done { background: var(--jlcw-blue); }

/* ------------------------------------------------------- shared type/bits */

.jlcw-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--jlcw-muted);
  font: 400 14px/1.4 var(--jlcw-font);
  cursor: pointer;
}
.jlcw-back:hover { color: var(--jlcw-blue); }
.jlcw-back span  { font-size: 16px; line-height: 1; }

.jlcw-h {
  margin: 0 0 16px;
  font-family: var(--jlcw-serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  color: var(--jlcw-ink);
}
.jlcw-h.is-center { text-align: center; }

.jlcw-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--jlcw-blue);
}

.jlcw-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--jlcw-muted);
}
.jlcw-note.is-center { text-align: center; }
.jlcw-note a { color: var(--jlcw-blue); font-weight: 600; text-decoration: none; }
.jlcw-note a:hover { text-decoration: underline; }

/* ------------------------------------------------------------ option card */

.jlcw-opts { display: flex; flex-direction: column; gap: 12px; }

.jlcw-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--jlcw-line);
  border-radius: var(--jlcw-radius);
  background: #fff;
  color: var(--jlcw-ink);
  font-family: var(--jlcw-font);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.jlcw-opt:hover { border-color: var(--jlcw-blue); }
/* The scheduling option is a real <a> when it hands off to the booking page —
   keep it indistinguishable from the button-based options. */
a.jlcw-opt { text-decoration: none; }
a.jlcw-opt:hover { color: var(--jlcw-ink); }
.jlcw-opt.is-selected {
  padding: 15px 17px;
  border: 2px solid var(--jlcw-blue);
  background: var(--jlcw-blue-tint);
}
.jlcw-opt svg { flex: none; }
.jlcw-opt-text  { flex: 1 1 auto; min-width: 0; }
.jlcw-opt-title { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.jlcw-opt-desc  { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--jlcw-muted); }
.jlcw-opt-change {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--jlcw-blue);
  font: 600 13px/1 var(--jlcw-font);
  cursor: pointer;
}
.jlcw-opt-change:hover { text-decoration: underline; }

/* ------------------------------------------------------------- scheduling */

.jlcw-card {
  margin-top: 12px;
  padding: 16px;
  border-radius: var(--jlcw-radius);
  background: var(--jlcw-surface);
}
.jlcw-card-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
}

.jlcw-dates {
  display: flex;
  gap: 10px;
  padding-bottom: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-color: #B9C2CC #E0E3E8;
  scrollbar-width: thin;
}
.jlcw-dates::-webkit-scrollbar { height: 4px; }
.jlcw-dates::-webkit-scrollbar-track { background: #E0E3E8; border-radius: 2px; }
.jlcw-dates::-webkit-scrollbar-thumb { background: #B9C2CC; border-radius: 2px; }

.jlcw-date {
  flex: none;
  width: 64px;
  padding: 10px 0;
  border: 1px solid var(--jlcw-line);
  border-radius: var(--jlcw-radius);
  background: #fff;
  font-family: var(--jlcw-font);
  text-align: center;
  scroll-snap-align: start;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.jlcw-date:hover { border-color: var(--jlcw-blue); }
.jlcw-date.is-selected { border-color: var(--jlcw-blue); background: var(--jlcw-blue); }
.jlcw-date-dow { display: block; font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--jlcw-muted); }
.jlcw-date-day { display: block; font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--jlcw-ink); }
.jlcw-date-mon { display: block; font-size: 10px; letter-spacing: .06em; color: var(--jlcw-muted); }
.jlcw-date.is-selected .jlcw-date-dow,
.jlcw-date.is-selected .jlcw-date-mon { color: rgba(255, 255, 255, .8); }
.jlcw-date.is-selected .jlcw-date-day { color: #fff; }

.jlcw-select-wrap { position: relative; }
.jlcw-select {
  width: 100%;
  padding: 12px 38px 12px 14px;
  border: 2px solid var(--jlcw-blue);
  border-radius: var(--jlcw-radius);
  background: #fff;
  color: var(--jlcw-ink);
  font: 500 15px/1.3 var(--jlcw-font);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.jlcw-select-wrap svg {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  pointer-events: none;
}

.jlcw-appt {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--jlcw-blue);
  border-radius: var(--jlcw-radius);
  background: var(--jlcw-blue-tint);
}
.jlcw-appt svg { flex: none; }
.jlcw-appt-when { display: block; margin-top: 3px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--jlcw-ink); }

/* ------------------------------------------------------------------ forms */

.jlcw-fields { display: flex; flex-direction: column; gap: 14px; }
.jlcw-field label { display: block; margin-bottom: 7px; }

.jlcw-input {
  display: block;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--jlcw-line);
  border-radius: var(--jlcw-radius);
  background: #fff;
  color: var(--jlcw-ink);
  font: 400 15px/1.3 var(--jlcw-font);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .18s ease, border-width .01s;
}
.jlcw-input::placeholder { color: #9AA5AD; }
.jlcw-input:focus { padding: 12px 13px; border: 2px solid var(--jlcw-blue); outline: none; }
.jlcw-input.is-invalid { padding: 12px 13px; border: 2px solid var(--jlcw-danger); }

.jlcw-error {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--jlcw-danger);
}

.jlcw-phone-readout {
  padding: 18px;
  border: 1px solid var(--jlcw-line);
  border-radius: var(--jlcw-radius);
  background: var(--jlcw-surface);
  text-align: center;
}
.jlcw-phone-readout strong {
  display: block;
  margin-top: 6px;
  font-family: var(--jlcw-serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  color: var(--jlcw-ink);
}

.jlcw-yesno { display: flex; gap: 12px; }
.jlcw-yesno button {
  flex: 1 1 0;
  padding: 13px;
  border: 1px solid var(--jlcw-line);
  border-radius: var(--jlcw-radius);
  background: #fff;
  color: var(--jlcw-ink);
  font: 600 15px/1.3 var(--jlcw-font);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.jlcw-yesno button:hover { border-color: var(--jlcw-blue); }
.jlcw-yesno button.is-selected {
  border-color: var(--jlcw-blue);
  background: var(--jlcw-blue);
  color: #fff;
}

/* ------------------------------------------------------------- case types */

.jlcw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jlcw-tile {
  padding: 20px 12px;
  border: 1px solid var(--jlcw-line);
  border-radius: var(--jlcw-radius);
  background: #fff;
  color: var(--jlcw-ink);
  font-family: var(--jlcw-font);
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.jlcw-tile:hover { border-color: var(--jlcw-blue); }
.jlcw-tile.is-selected {
  padding: 19px 11px;
  border: 2px solid var(--jlcw-blue);
  background: var(--jlcw-blue-tint);
}
.jlcw-tile.is-wide { grid-column: 1 / -1; }
.jlcw-tile-label { display: block; margin-top: 10px; font-size: 14px; font-weight: 600; line-height: 1.3; }

/* ----------------------------------------------------------------- review */

.jlcw-review {
  border-radius: var(--jlcw-radius);
  background: var(--jlcw-surface);
  overflow: hidden;
}
.jlcw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--jlcw-line);
  background: none;
  font-family: var(--jlcw-font);
  text-align: left;
  cursor: pointer;
}
.jlcw-row:last-child { border-bottom: 0; }
.jlcw-row:hover { background: #E8EFF4; }
.jlcw-row-key { flex: none; font-size: 14px; color: var(--jlcw-muted); white-space: nowrap; }
.jlcw-row > span:last-child { text-align: right; }
.jlcw-row-val { font-size: 14px; font-weight: 600; color: var(--jlcw-ink); }
.jlcw-row-edit {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--jlcw-blue);
  opacity: 0;
  transition: opacity .15s ease;
}
.jlcw-row:hover .jlcw-row-edit,
.jlcw-row:focus-visible .jlcw-row-edit { opacity: 1; }

/* ---------------------------------------------------------------- buttons */

.jlcw-btn {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 14px;
  border: 0;
  border-radius: var(--jlcw-radius);
  background: var(--jlcw-blue);
  color: #fff;
  font: 600 15px/1.3 var(--jlcw-font);
  text-align: center;
  cursor: pointer;
  transition: background-color .18s ease;
}
.jlcw-btn:hover:not(:disabled) { background: var(--jlcw-blue-dark); }
.jlcw-btn:disabled { background: #B9C7D1; cursor: not-allowed; }
.jlcw-btn.is-busy { color: rgba(255, 255, 255, .75); }

.jlcw-btn-ghost {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 13px;
  border: 1px solid var(--jlcw-line);
  border-radius: var(--jlcw-radius);
  background: #fff;
  color: var(--jlcw-ink);
  font: 600 15px/1.3 var(--jlcw-font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.jlcw-btn-ghost:hover { border-color: var(--jlcw-blue); color: var(--jlcw-blue); }

/* ---------------------------------------------------------------- success */

.jlcw-success { padding: 8px 0 0; text-align: center; }
.jlcw-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--jlcw-blue-tint);
}
/* The scheduling hand-off borrows this circle but must NOT read as success.
   Yellow is the brand's attention colour and is already the header, so it says
   "still with us" rather than "done" — which the blue tick did not. */
.jlcw-success-icon.is-pending { background: #FFF1D6; }

.jlcw-success-when {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--jlcw-radius);
  background: var(--jlcw-surface);
}
.jlcw-success-when strong {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 600;
  color: var(--jlcw-ink);
}

.jlcw-alert {
  margin-bottom: 16px;
  padding: 13px 15px;
  border-left: 3px solid var(--jlcw-danger);
  border-radius: 4px;
  background: #FBEDEC;
  font-size: 13.5px;
  line-height: 1.5;
  color: #7A1C16;
}

/* ------------------------------------------------------------------ focus */

/* Navy, not yellow. Yellow on a white card is roughly 1.8:1 — below the 3:1
   WCAG needs for a focus indicator — and now that the header is yellow too it
   reads as decoration rather than focus. The 2px offset puts the ring on the
   surface behind each control, where navy contrasts against everything. */
.jlcw-root :focus-visible,
.jlcw-launcher:focus-visible {
  outline: 3px solid var(--jlcw-navy);
  outline-offset: 2px;
}
/* Text fields already show focus as a 2px blue border — the ring on top of it
   just reads as noise. */
.jlcw-input:focus-visible,
.jlcw-select:focus-visible { outline: none; }
.jlcw-select:focus-visible { border-color: var(--jlcw-blue-dark); }

.jlcw-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------------- mobile */

@media (max-width: 600px) {
  .jlcw-launcher {
    right: 12px;
    bottom: 12px;
    left: 12px;
    justify-content: center;
    padding: 15px 18px;
  }
  .jlcw-root { padding: 0; align-items: stretch; justify-content: stretch; }
  .jlcw-panel {
    width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
    transform: translateY(24px);
  }
  .jlcw-header { padding: 16px 18px; padding-top: max(16px, env(safe-area-inset-top)); }
  .jlcw-title  { font-size: 20px; }
  .jlcw-body   { padding: 20px 18px calc(24px + env(safe-area-inset-bottom)); }
  /* iOS zooms any input under 16px on focus */
  .jlcw-input, .jlcw-select { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .jlcw-root *, .jlcw-launcher { transition-duration: .01ms !important; }
  .jlcw-panel { transform: none; }
}

/* ---------------------------------------------------------------------------
   Qualification step

   Three questions on one screen, so each has to read as its own unit without
   the screen turning into a wall. Deliberately lighter than .jlcw-tile: those
   are the primary choice on a step of their own, these are three quick taps on
   a step the visitor has already been told is optional-feeling. Text-only, no
   icons — the answers are Yes/No/dates, which icons cannot help with.
   --------------------------------------------------------------------------- */
.jlcw-q { margin-bottom: 18px; }
/* Adjacent-sibling, not :first-of-type — the progress dots are a div too, so
   :first-of-type never matches a question and silently does nothing. */
.jlcw-h + .jlcw-q { margin-top: 18px; }
.jlcw-q:last-of-type { margin-bottom: 22px; }

.jlcw-q-label {
  margin: 0 0 8px;
  font-family: var(--jlcw-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--jlcw-ink);
  line-height: 1.3;
}

/* Wraps rather than scrolls: "More than a year ago" is long, and a hidden
   option on a narrow phone is an unanswered question. */
.jlcw-choices { display: flex; flex-wrap: wrap; gap: 8px; }

.jlcw-choice {
  flex: 1 1 auto;
  min-height: 44px;             /* iOS minimum tap target */
  padding: 10px 14px;
  border: 1px solid var(--jlcw-line);
  border-radius: var(--jlcw-radius);
  background: #fff;
  color: var(--jlcw-ink);
  font-family: var(--jlcw-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.jlcw-choice:hover { border-color: var(--jlcw-blue); }
.jlcw-choice.is-selected {
  padding: 9px 13px;            /* absorbs the 1px the thicker border adds */
  border: 2px solid var(--jlcw-blue);
  background: var(--jlcw-blue-tint);
  font-weight: 600;
}