/* Custom styles layered on top of nhsuk-frontend. */

.spoa-body {
  margin: 0;
}

/* Sticky footer on short pages. The body grows with content (min-height, no
   fixed height) so its themed background always covers the full scroll height —
   otherwise the html canvas (#d8dde0) shows behind overflowing content. */
.spoa-body { display: flex; flex-direction: column; min-height: 100vh; }
.spoa-body > footer { margin-top: auto; }

/* Distance badge on provider cards. */
.spoa-distance {
  display: inline-block;
  background: #005eb8;
  color: #fff;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 1rem;
  margin-bottom: 8px;
}
.spoa-rank {
  color: #4c6272;
  font-size: 1rem;
  font-weight: 400;
}

.spoa-provider-meta { margin: 0; }
.spoa-provider-meta dt { font-weight: 600; }

/* ----------------------------------------------------------------------- */
/* Admin chrome                                                            */
/* ----------------------------------------------------------------------- */
.spoa-admin-bar {
  background: #212b32;
  color: #fff;
}
.spoa-admin-bar .nhsuk-width-container {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}
.spoa-admin-bar a { color: #fff; text-decoration: none; font-weight: 600; }
.spoa-admin-bar a:hover { text-decoration: underline; }
.spoa-admin-bar__brand { font-weight: 700; margin-right: auto; }
.spoa-admin-bar__user { font-weight: 400; color: #aeb7bd; font-size: 0.9rem; }

.spoa-status-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}
.spoa-status-PENDING_AUTH { background:#fff3cd; color:#594d00; }
.spoa-status-AUTHENTICATED { background:#cde3f5; color:#003366; }
.spoa-status-CHOSEN { background:#cce3cd; color:#13501a; }
.spoa-status-AUTO_ASSIGNED { background:#e8dcf0; color:#3d1d56; }
.spoa-status-PRIVATE { background:#212b32; color:#fff; }
.spoa-status-CANCELLED { background:#f0dddd; color:#7a1c1c; }

.spoa-table-wrap { overflow-x: auto; }

/* ----------------------------------------------------------------------- */
/* Private (non-NHS) theme — deliberately not NHS branding                 */
/* ----------------------------------------------------------------------- */
/* Theme the html canvas too, so any area beyond the body (overscroll, gaps)
   is black rather than the NHS grey behind the dark private pages. */
.spoa-html--private { background-color: #0b0b0b; }
.spoa-body--private {
  background: #0b0b0b;
  color: #f2f2f2;
}
.spoa-body--private .nhsuk-main-wrapper { color: #f2f2f2; }
.spoa-body--private h1,
.spoa-body--private h2,
.spoa-body--private h3,
.spoa-body--private p,
.spoa-body--private li,
.spoa-body--private label,
.spoa-body--private .nhsuk-body { color: #f2f2f2; }
.spoa-body--private a { color: #fff; }
.spoa-body--private a:hover { color: #ccc; }

.spoa-private-header {
  background: #000;
  color: #fff;
  border-bottom: 4px solid #fff;
  padding: 16px 0;
}
.spoa-private-header .nhsuk-width-container {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.spoa-private-header__name {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.spoa-private-header__tag {
  background: #fff;
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  padding: 3px 10px;
  border-radius: 3px;
}

.spoa-body--private .nhsuk-button {
  background: #fff;
  color: #000;
  box-shadow: 0 4px 0 #9c9c9c;
}
.spoa-body--private .nhsuk-button:hover { background: #e8e8e8; }
.spoa-body--private .nhsuk-button--secondary {
  background: #2b2b2b;
  color: #fff;
  box-shadow: 0 4px 0 #000;
}

.spoa-body--private .nhsuk-warning-callout {
  background: #161616;
  border: 1px solid #fff;
}
/* White label band with black text (readable), light body text. */
.spoa-body--private .nhsuk-warning-callout__label { background: #fff; }
.spoa-body--private .nhsuk-warning-callout__label,
.spoa-body--private .nhsuk-warning-callout__label * { color: #000; }
.spoa-body--private .nhsuk-warning-callout > div,
.spoa-body--private .nhsuk-warning-callout p,
.spoa-body--private .nhsuk-warning-callout li,
.spoa-body--private .nhsuk-warning-callout strong { color: #f2f2f2; }
/* Inset text + details readable on black. */
.spoa-body--private .nhsuk-inset-text { border-left-color: #fff; }
.spoa-body--private .nhsuk-inset-text,
.spoa-body--private .nhsuk-inset-text * { color: #f2f2f2; }
.spoa-body--private .nhsuk-card {
  background: #161616;
  border-color: #333;
}
.spoa-body--private .nhsuk-card__content { color: #f2f2f2; }

/* ----------------------------------------------------------------------- */
/* Options page: NHS / private toggle + embedded (black) private panel      */
/* ----------------------------------------------------------------------- */
.spoa-toggle {
  display: inline-flex;
  border: 2px solid #005eb8;
  border-radius: 6px;
  overflow: hidden;
  margin: 4px 0 24px;
}
.spoa-toggle__btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: #fff;
  color: #005eb8;
  font-weight: 600;
  font-size: 1rem;
  padding: 10px 20px;
  cursor: pointer;
  line-height: 1.25;
}
.spoa-toggle__btn + .spoa-toggle__btn { border-left: 2px solid #005eb8; }
.spoa-toggle__btn:hover { background: #f0f4f5; }
.spoa-toggle__btn.is-active[data-view="nhs"] { background: #005eb8; color: #fff; }
.spoa-toggle__btn.is-active[data-view="private"] { background: #0b0b0b; color: #fff; }
.spoa-toggle__btn:focus-visible { outline: 4px solid #ffeb3b; outline-offset: -2px; }
/* When private is active the whole control reads black, not NHS blue. */
.spoa-toggle[data-active="private"] { border-color: #0b0b0b; }
.spoa-toggle[data-active="private"] .spoa-toggle__btn + .spoa-toggle__btn { border-left-color: #0b0b0b; }

/* Embedded private panel — deliberately black so it can never be mistaken for
   an NHS offer, even though it sits on the (white) NHS options page. */
.spoa-private-panel {
  border: 2px solid #0b0b0b;
  border-radius: 6px;
  padding: 0 24px 24px;
  margin-top: 8px;
}
.spoa-private-panel__banner {
  background: #0b0b0b;
  color: #fff;
  margin: 0 -24px 24px;
  padding: 12px 24px;
  border-radius: 4px 4px 0 0;
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}
.spoa-private-panel__name { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em; }
.spoa-private-panel__tag {
  background: #fff;
  color: #000;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
}
/* Black "colour options" — the private buttons. (Focus keeps the NHS yellow
   state from nhsuk.css, so accessibility is preserved.) */
.spoa-private-panel .nhsuk-button {
  background: #0b0b0b;
  color: #fff;
  box-shadow: 0 4px 0 #5c5c5c;
}
.spoa-private-panel .nhsuk-button:hover { background: #2b2b2b; }
.spoa-private-panel .nhsuk-button--secondary {
  background: #fff;
  color: #0b0b0b;
  border: 2px solid #0b0b0b;
  box-shadow: 0 4px 0 #0b0b0b;
}
.spoa-private-panel .nhsuk-button--secondary:hover { background: #f0f0f0; }

/* One private provider card within the (white) private panel — a black-bordered
   box so each provider is visually separated. Text stays the default dark. */
.spoa-private-card {
  border: 1px solid #0b0b0b;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
}
.spoa-private-card:last-child { margin-bottom: 0; }