/* Jackson Mediation Booking — front-end styles
   Scoped under #jmb-app so it won't collide with the theme. */

#jmb-app.jmb-app {
  /* Palette matched to jackson-law.net (firm red #B41423 / grays) */
  --jmb-ink: #444444;
  --jmb-teal: #b41423;
  --jmb-teal-dk: #8e0f1b;
  --jmb-muted: #666666;
  --jmb-line: #e6e6e6;
  --jmb-bg: #ffffff;
  --jmb-soft: #f7f7f7;
  --jmb-err: #b41423;
  --jmb-ok: #2e7d4f;
  font-family: "Roboto", Arial, sans-serif;
  max-width: 720px;
  margin: 0 auto;
  color: var(--jmb-ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

#jmb-app .jmb-h2 { font-size: 1.7rem; margin: 0 0 .35em; color: var(--jmb-ink); font-weight: 700; }
#jmb-app .jmb-h3 { font-size: 1.2rem; margin: 0 0 .6em; color: var(--jmb-teal-dk); font-weight: 700; }
#jmb-app .jmb-lead { color: var(--jmb-muted); margin: 0 0 1.4em; }
#jmb-app .jmb-muted { color: var(--jmb-muted); }
#jmb-app .jmb-help { color: var(--jmb-muted); font-size: .9rem; margin: 0 0 .8em; }

/* Buttons */
#jmb-app .jmb-btn {
  display: inline-block; border: 1px solid transparent; border-radius: 8px;
  font-size: 1rem; font-weight: 600; padding: .7em 1.3em; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  font-family: inherit;
}
#jmb-app .jmb-btn-lg { font-size: 1.08rem; padding: .85em 1.7em; }
#jmb-app .jmb-btn-primary { background: var(--jmb-teal); color: #fff; }
#jmb-app .jmb-btn-primary:hover { background: var(--jmb-teal-dk); }
#jmb-app .jmb-btn-primary:disabled { opacity: .6; cursor: default; }
#jmb-app .jmb-btn-ghost { background: #fff; color: var(--jmb-teal-dk); border-color: var(--jmb-line); }
#jmb-app .jmb-btn-ghost:hover { background: var(--jmb-soft); }

/* Steps */
#jmb-app .jmb-step { margin-top: 1.6em; padding-top: 1.4em; border-top: 1px solid var(--jmb-line); }

/* Date list */
#jmb-app .jmb-dates { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; margin-top: .6em; }
@media (max-width: 540px){ #jmb-app .jmb-dates { grid-template-columns: 1fr; } }
#jmb-app .jmb-date {
  border: 1px solid var(--jmb-line); border-radius: 10px; padding: .85em 1em;
  cursor: pointer; background: #fff; text-align: left; font-size: .98rem; line-height: 1.35;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
#jmb-app .jmb-date:hover { border-color: var(--jmb-teal); }
#jmb-app .jmb-date.is-selected { border-color: var(--jmb-teal); background: var(--jmb-soft); box-shadow: 0 0 0 2px rgba(180,20,35,.18); }
#jmb-app .jmb-date .jmb-date-dow { font-weight: 700; }
#jmb-app .jmb-date .jmb-date-time { color: var(--jmb-muted); font-size: .9rem; }

/* Form */
#jmb-app .jmb-selected-date {
  background: var(--jmb-soft); border: 1px solid var(--jmb-line); border-radius: 8px;
  padding: .7em 1em; margin-bottom: 1.2em; font-weight: 600;
}
#jmb-app .jmb-fieldset { border: 1px solid var(--jmb-line); border-radius: 10px; padding: 1em 1.1em 1.2em; margin: 0 0 1.2em; }
#jmb-app .jmb-fieldset legend { font-weight: 700; padding: 0 .4em; color: var(--jmb-teal-dk); }
#jmb-app .jmb-field { display: block; margin: .6em 0; }
#jmb-app .jmb-field > span { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .3em; }
#jmb-app .jmb-field em { color: var(--jmb-err); font-style: normal; }
#jmb-app .jmb-field input,
#jmb-app .jmb-field select {
  width: 100%; box-sizing: border-box; padding: .6em .7em; font-size: 1rem;
  border: 1px solid var(--jmb-line); border-radius: 8px; background: #fff; color: var(--jmb-ink);
  font-family: inherit;
}
#jmb-app .jmb-field input:focus,
#jmb-app .jmb-field select:focus { outline: none; border-color: var(--jmb-teal); box-shadow: 0 0 0 2px rgba(180,20,35,.15); }
#jmb-app .jmb-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9em; }
@media (max-width: 540px){ #jmb-app .jmb-row { grid-template-columns: 1fr; } }

/* Opposing counsel rows */
#jmb-app .jmb-oc-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: .6em; align-items: center; margin-bottom: .9em; }
@media (max-width: 540px){ #jmb-app .jmb-oc-row { grid-template-columns: 1fr 1fr; } }
#jmb-app .jmb-oc-row input { width: 100%; box-sizing: border-box; padding: .55em .65em; border: 1px solid var(--jmb-line); border-radius: 8px; font-size: .98rem; font-family: inherit; }
/* name + email on row 1, firm + represents on row 2; remove button spans the right edge */
#jmb-app .jmb-oc-row .jmb-oc-name { grid-column: 1; grid-row: 1; }
#jmb-app .jmb-oc-row .jmb-oc-email { grid-column: 2; grid-row: 1; }
#jmb-app .jmb-oc-row .jmb-oc-firm { grid-column: 1; grid-row: 2; }
#jmb-app .jmb-oc-row .jmb-oc-represents { grid-column: 2; grid-row: 2; }
#jmb-app .jmb-oc-remove { grid-column: 3; grid-row: 1 / span 2; background: none; border: none; color: var(--jmb-err); cursor: pointer; font-size: 1.3rem; line-height: 1; padding: 0 .3em; align-self: center; }
@media (max-width: 540px){ #jmb-app .jmb-oc-remove { grid-column: 1 / span 2; grid-row: auto; justify-self: end; } }

#jmb-app .jmb-actions { display: flex; justify-content: space-between; gap: 1em; margin-top: 1.4em; }

/* Errors + success */
#jmb-app .jmb-errors {
  background: #fbe9eb; border: 1px solid #f1c2c7; color: var(--jmb-err);
  border-radius: 8px; padding: .8em 1em; margin: 1em 0; font-size: .95rem;
}
#jmb-app .jmb-errors ul { margin: .3em 0 0; padding-left: 1.2em; }
#jmb-app .jmb-success { background: #eef7f1; border: 1px solid #c2e3d0; border-radius: 10px; padding: 1.4em 1.4em; }
#jmb-app .jmb-success .jmb-ref strong { font-size: 1.15rem; letter-spacing: .04em; color: var(--jmb-teal-dk); }

#jmb-app [hidden] { display: none !important; }

/* ============================================================
   Stage 2 additions: multi-select dates + poll voting page
   The poll page container is #jmb-poll-app (also .jmb-app).
   Re-declare palette vars on the class so both containers share them.
   ============================================================ */
.jmb-app.jmb-poll {
  --jmb-ink: #444444;
  --jmb-teal: #b41423;
  --jmb-teal-dk: #8e0f1b;
  --jmb-muted: #666666;
  --jmb-line: #e6e6e6;
  --jmb-bg: #ffffff;
  --jmb-soft: #f7f7f7;
  --jmb-err: #b41423;
  --jmb-ok: #2e7d4f;
  font-family: "Roboto", Arial, sans-serif;
  max-width: 720px;
  margin: 0 auto;
  color: var(--jmb-ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Headings/buttons/notice reused on the poll page */
.jmb-app.jmb-poll .jmb-h2 { font-size: 1.7rem; margin: 0 0 .35em; color: var(--jmb-ink); font-weight: 700; }
.jmb-app.jmb-poll .jmb-h3 { font-size: 1.2rem; margin: 0 0 .6em; color: var(--jmb-teal-dk); font-weight: 700; }
.jmb-app.jmb-poll .jmb-lead { color: var(--jmb-muted); margin: 0 0 1.4em; }
.jmb-app.jmb-poll .jmb-muted { color: var(--jmb-muted); }
.jmb-app.jmb-poll .jmb-btn {
  display: inline-block; border: 1px solid transparent; border-radius: 8px;
  font-size: 1rem; font-weight: 600; padding: .7em 1.3em; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease; font-family: inherit;
}
.jmb-app.jmb-poll .jmb-btn-primary { background: var(--jmb-teal); color: #fff; }
.jmb-app.jmb-poll .jmb-btn-primary:hover { background: var(--jmb-teal-dk); }
.jmb-app.jmb-poll .jmb-btn-primary:disabled { opacity: .6; cursor: default; }
.jmb-app.jmb-poll .jmb-actions { display: flex; justify-content: flex-start; gap: 1em; margin-top: 1.4em; }
.jmb-app.jmb-poll .jmb-errors {
  background: #fbe9eb; border: 1px solid #f1c2c7; color: var(--jmb-err);
  border-radius: 8px; padding: .8em 1em; margin: 1em 0; font-size: .95rem;
}
.jmb-app.jmb-poll .jmb-errors ul { margin: .3em 0 0; padding-left: 1.2em; }
.jmb-app.jmb-poll .jmb-success { background: #eef7f1; border: 1px solid #c2e3d0; border-radius: 10px; padding: 1.4em 1.4em; }
.jmb-app.jmb-poll .jmb-step { margin-top: 1.6em; padding-top: 1.4em; border-top: 1px solid var(--jmb-line); }
.jmb-app.jmb-poll [hidden] { display: none !important; }
.jmb-app.jmb-poll .jmb-date-dow { font-weight: 700; }
.jmb-app.jmb-poll .jmb-date-time { color: var(--jmb-muted); font-size: .9rem; }

/* Poll: notice for invalid/closed links */
.jmb-app.jmb-poll .jmb-notice { border-radius: 10px; padding: 1.3em 1.4em; }
.jmb-app.jmb-poll .jmb-notice-error { background: #fbe9eb; border: 1px solid #f1c2c7; }

/* Poll: case meta block */
.jmb-app.jmb-poll .jmb-poll-meta {
  background: var(--jmb-soft); border: 1px solid var(--jmb-line); border-radius: 10px;
  padding: .9em 1.1em; margin: 0 0 1.3em;
}
.jmb-app.jmb-poll .jmb-poll-metarow { display: flex; justify-content: space-between; gap: 1em; padding: .25em 0; font-size: .95rem; }
.jmb-app.jmb-poll .jmb-poll-metarow + .jmb-poll-metarow { border-top: 1px solid var(--jmb-line); }
.jmb-app.jmb-poll .jmb-poll-metalabel { color: var(--jmb-muted); font-weight: 600; }
.jmb-app.jmb-poll .jmb-poll-metavalue { text-align: right; font-weight: 600; }

/* Poll: one row per date with Yes / If need be / No */
.jmb-app.jmb-poll .jmb-poll-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  border: 1px solid var(--jmb-line); border-radius: 10px; padding: .85em 1em; margin-bottom: .7em;
}
@media (max-width: 540px){ .jmb-app.jmb-poll .jmb-poll-row { flex-direction: column; align-items: stretch; } }
.jmb-app.jmb-poll .jmb-poll-choices { display: flex; gap: .5em; flex: 0 0 auto; }
.jmb-app.jmb-poll .jmb-choice {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--jmb-line); border-radius: 8px; padding: .45em .8em; cursor: pointer;
  font-size: .9rem; font-weight: 600; background: #fff; user-select: none; white-space: nowrap;
}
.jmb-app.jmb-poll .jmb-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.jmb-app.jmb-poll .jmb-choice-yes:has(input:checked)   { background: #eef7f1; border-color: var(--jmb-ok); color: #1f5c39; }
.jmb-app.jmb-poll .jmb-choice-maybe:has(input:checked) { background: #fff6e6; border-color: #d39c2b; color: #8a5d00; }
.jmb-app.jmb-poll .jmb-choice-no:has(input:checked)    { background: #fbe9eb; border-color: var(--jmb-err); color: var(--jmb-teal-dk); }
.jmb-app.jmb-poll .jmb-choice:focus-within { box-shadow: 0 0 0 2px rgba(180,20,35,.15); }
.jmb-app.jmb-poll .jmb-rule11 { font-size: .82rem; margin-top: 1.2em; }

/* ---- Multi-select on the booking page (step 1) ---- */
#jmb-app .jmb-dates-multi .jmb-date { display: flex; align-items: flex-start; gap: .7em; }
#jmb-app .jmb-dates-multi .jmb-date-check {
  flex: 0 0 auto; width: 20px; height: 20px; border: 2px solid var(--jmb-line); border-radius: 5px;
  margin-top: .15em; position: relative; transition: border-color .12s ease, background .12s ease;
}
#jmb-app .jmb-dates-multi .jmb-date.is-selected .jmb-date-check { background: var(--jmb-teal); border-color: var(--jmb-teal); }
#jmb-app .jmb-dates-multi .jmb-date.is-selected .jmb-date-check::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 4px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
#jmb-app #jmb-dates-count { margin-top: .7em; font-size: .9rem; }
#jmb-app #jmb-dates-count.jmb-flash { color: var(--jmb-teal); font-weight: 700; }
#jmb-app .jmb-actions { } /* step-1 actions inherit */
#jmb-app #jmb-step-dates .jmb-actions { justify-content: flex-end; }
#jmb-app .jmb-selected-dates { margin: .3em 0 1.2em; padding-left: 1.2em; }
#jmb-app .jmb-selected-dates li { margin: .2em 0; font-weight: 600; }
#jmb-app .jmb-selected-dates-help { margin-bottom: .3em; }

/* ============================================================
   Stage 3 additions: case intake step (post-booking)
   ============================================================ */
#jmb-app .jmb-divider { border: none; border-top: 1px solid var(--jmb-line); margin: 1.6em 0 1.4em; }
#jmb-app .jmb-intake-block { margin-top: .4em; }

/* Document upload rows */
#jmb-app .jmb-doc-row { display: grid; grid-template-columns: minmax(160px, .9fr) 1fr auto; gap: .6em; align-items: center; margin-bottom: .6em; }
@media (max-width: 600px){ #jmb-app .jmb-doc-row { grid-template-columns: 1fr auto; } }
@media (max-width: 600px){ #jmb-app .jmb-doc-row .jmb-doc-label { grid-column: 1 / -1; } }
#jmb-app .jmb-doc-row .jmb-doc-label {
  box-sizing: border-box; padding: .55em .65em; border: 1px solid var(--jmb-line);
  border-radius: 8px; font-size: .95rem; font-family: inherit; background: #fff; color: var(--jmb-ink);
}
#jmb-app .jmb-doc-row .jmb-doc-file { font-size: .92rem; font-family: inherit; min-width: 0; }
#jmb-app .jmb-doc-remove { background: none; border: none; color: var(--jmb-err); cursor: pointer; font-size: 1.3rem; line-height: 1; padding: 0 .3em; }

/* Confidentiality acknowledgment checkbox */
#jmb-app .jmb-check { display: flex; align-items: flex-start; gap: .65em; margin: .2em 0 .9em; font-size: .92rem; line-height: 1.5; color: var(--jmb-ink); }
#jmb-app .jmb-check input[type="checkbox"] { margin-top: .2em; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--jmb-teal); }
#jmb-app .jmb-esign-note { font-size: .82rem; margin: .5em 0 0; }