/* ============================================================================================================================================================
 SR Global Design System (Power Pages)
 Version: 2j - fix long text wrapping in pick-lists & styled progress steps indicator

 Version change log:
 - Fixes the wrapping issues on radio buttons that are set as pick-lists
 - styled progress indicator to be style with a track line & nodes - similar to London Underground map
 ============================================================================================================================================================ */



 /* ============================================================================================================================================================
 0) DESIGN TOKENS (CSS variables)
 ============================================================================================================================================================ */
:root {
  /* Brand colour palette */

  --sr-color-primary: #005eb8; /* Primary */
  --sr-color-primary-600: #003087; /* Primary hover/active */
  --sr-color-primary-100: #E8EDEE; /* Light tint for subtle contrast */
  --sr-color-secondary: #231F20; /* Main text / dark neutral */
  --sr-color-accent: #ED8B00; /* Accent */
  --sr-color-success: #009639;
  --sr-color-warning: #ED8B00;
  --sr-color-danger: #DA291C;
  --sr-color-bg: #ffffff; /* Page background */
  --sr-color-surface: #E8EDEE; /* Cards / table headers / footer bg */
  --sr-color-border: #768692; /* Borders */
  --sr-color-muted: #768692; /* Secondary text */

  /* Typography */
  /* Use Frutiger across the system with sensible fallbacks */
  --sr-font-sans: "Frutiger W01", Arial, Helvetica, sans-serif;
  --sr-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --sr-font-size-100: 12px;
  --sr-font-size-200: 14px;
  --sr-font-size-300: 16px; /* base */
  --sr-font-size-400: 18px;
  --sr-font-size-500: 20px;
  --sr-font-size-600: 24px;
  --sr-font-size-700: 30px;
  --sr-font-size-800: 36px;

  --sr-line-height-tight: 1.1;
  --sr-line-height-normal: 1.25;
  --sr-line-height-loose: 1.5;

  /* Spacing (4px base) */
  --sr-space-0: 0;
  --sr-space-1: 4px;
  --sr-space-2: 8px;
  --sr-space-3: 12px;
  --sr-space-4: 16px;
  --sr-space-5: 20px;
  --sr-space-6: 24px;
  --sr-space-8: 32px;
  --sr-space-10: 40px;
  --sr-space-12: 48px;
  --sr-space-16: 64px;

  /* Radius, shadows, borders */
  --sr-radius-sm: 0;
  --sr-radius-md: 6px;
  --sr-radius-lg: 10px;
  --sr-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --sr-shadow-md: 0 4px 10px rgba(0,0,0,.08);
  --sr-shadow-lg: 0 10px 24px rgba(0,0,0,.12);
  --sr-border-width: 1px;

  /*Power Pages UI behaviour tokens */
  /* Forms colours */
  --pp-error-color: #DA291C;  /* error red */
  --pp-error-bg:    #fff3f2;  /* subtle error wash */
  --pp-error-outline: 2px solid var(--pp-error-color);
  --pp-error-radius: 4px;

  /* Accessible focus (NHS yellow focus ring) */
  --pp-focus-color: #fae100;  /* NHS focus yellow */

  /* Optional companions if using info/success/warning banners */
  --pp-info-color:    var(--sr-color-primary);  /* NHS Blue */
  --pp-info-bg:       #eaf4ff;  /* subtle blue wash */
  --pp-success-color: var(--sr-color-success);  /* NHS Green */
  --pp-success-bg:    #e9f7ef;  /* subtle green wash */
  --pp-warning-color: var(--sr-color-warning);  /* NHS Orange */
  --pp-warning-bg:    #fff4e5;  /* subtle amber wash */

}



/* ============================================================================================================================================================
 1) BASE / TYPOGRAPHY / LINKS
 ============================================================================================================================================================ */

 /* Prevent horizontal scroll globally */
body { overflow-x: hidden; /* Fallback if any overflow remains */ }


/* -------------------------------------------------------------
   Frutiger W01 — Regular (55 Roman)
   ------------------------------------------------------------- */
@font-face {
  font-family: "Frutiger W01";
  src:
    /* Web font sources: best > broader > legacy */
    url("/assets/frutigerltw01-55roman.woff2") format("woff2"),
    url("/assets/frutigerltw01-55roman.woff") format("woff");
    /* url("/assets/Frutiger-Roman.otf") format("opentype"); **/
    font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------
   Frutiger W01 — Bold (65 Bold)
   ------------------------------------------------------------- */
@font-face {
  font-family: "Frutiger W01";
  src:
    url("/assets/frutigerltw01-65bold.woff2") format("woff2"),
    url("/assets/frutigerltw01-65bold.woff") format("woff");
    /* url("/assets/Frutiger-Bold.otf") format("opentype"); **/
  font-weight: 700; /* ensures CSS 'bold' maps correctly */
  font-style: normal;
  font-display: swap;
}


/* Base text */
.sr-global {
  font-family: var(--sr-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #231f20;
}

/* Headings – shared rules */
.sr-global h1,
.sr-global h2,
.sr-global h3,
.sr-global h4,
.sr-global h5,
.sr-global h6,
.sr-global .h1,
.sr-global .h2,
.sr-global .h3,
.sr-global .h4,
.sr-global .h5,
.sr-global .h6 {
  color: var(--sr-color-primary);
  font-family: var(--sr-font-sans);
  font-weight: 700;
  line-height: calc(4px + 2ex);
  margin-top: 0;
  margin-bottom: 0.75em;
}

/* Heading sizes (BHFT-style clamp values) */
.sr-global h1,
.sr-global .h1 {
  font-size: clamp(2.29rem, 0.76vw + 2.29rem, 3.05rem);
}

.sr-global h2,
.sr-global .h2 {
  font-size: clamp(1.83rem, 0.61vw + 1.83rem, 2.44rem);
}

.sr-global h3,
.sr-global .h3 {
  font-size: clamp(1.46rem, 0.49vw + 1.46rem, 1.95rem);
}

.sr-global h4,
.sr-global .h4 {
  font-size: clamp(1.17rem, 0.39vw + 1.17rem, 1.56rem);
}

.sr-global h5,
.sr-global .h5 {
  font-size: clamp(1rem, 0.25vw + 1rem, 1.25rem);
}

.sr-global h6,
.sr-global .h6 {
  font-size: clamp(1rem, 0.1vw + 1rem, 1.1rem);
}

/* Paragraphs */
.sr-global p,
.sr-global li,
.sr-global a, .sr-global .a  {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  color: #231f20;
}

/* Links */
.sr-global a, .sr-global .a {
  color: var(--sr-color-primary);
}
.sr-global a:hover,
.sr-global a:focus,
.sr-global .a:hover,
.sr-global .a:focus {
  color: var(--sr-color-primary-600);
  text-decoration: none;
}

/* Stronger (scoped) paragraph family that beats Portal Basic Theme without !important */
.sr-global p,
.sr-global .p,
.sr-global .page_section p,
.sr-global .section-diagonal-left p,
.sr-global .section-diagonal-right p,
.sr-global p.form-text span {
  font-family: var(--sr-font-sans);
  font-weight: 400;
}

/* ---------------------------------------------------------
   LINKS — override PortalBasic for TEXT LINKS only
   (do NOT affect button-like anchors)
   --------------------------------------------------------- */

/* Text links only (exclude all button-like anchors) */
#mainContent.sr-global a:not(.btn):not(.button1):not(.submit-btn):not(.form-action-container-left),
#mainContent.sr-global a.anchor-inherit-styles:not(.btn):not(.button1):not(.submit-btn):not(.form-action-container-left) {
  color: var(--sr-color-primary);
  font-family: var(--sr-font-sans);
  font-size: 1rem;
  font-weight: 400;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

/* Visited state */
#mainContent.sr-global a:visited:not(.btn):not(.button1):not(.submit-btn):not(.form-action-container-left),
#mainContent.sr-global a.anchor-inherit-styles:visited:not(.btn):not(.button1):not(.submit-btn):not(.form-action-container-left) {
  color: var(--sr-color-primary);
}

/* Hover / focus (still text links only) */
#mainContent.sr-global a:hover:not(.btn):not(.button1):not(.submit-btn):not(.form-action-container-left),
#mainContent.sr-global a:focus:not(.btn):not(.button1):not(.submit-btn):not(.form-action-container-left),
#mainContent.sr-global a:focus-visible:not(.btn):not(.button1):not(.submit-btn):not(.form-action-container-left) {
  color: var(--sr-color-primary-600);
  text-decoration: none;
  outline: 3px solid var(--pp-focus-color);
  outline-offset: 2px;
}


/* ============================================================================================================================================================
 2) BUTTONS
 ============================================================================================================================================================ */

/* Shared base styling for all button-like elements */
.sr-global .btn,
.sr-global input.btn,
.sr-global button.btn,
.sr-global a.btn {
  font-weight: 700;
  border-radius: var(--sr-radius-sm);
  border-width: 2px;
  border-style: solid;
  font-family: var(--sr-font-sans);
  margin-bottom: 0.9rem;
  padding: 8px 14px;
  transition: background .15s ease,
              color .15s ease,
              border-color .15s ease,
              box-shadow .15s ease;
  text-decoration: none;
}

/* -------------------------------------------------------------
   PRIMARY IDENTIFIER
   Power Pages uses:
   • .btn.btn-primary  (Entity Form submit)
   • .btn button1      (Design Studio “Button” component)
   ------------------------------------------------------------- */

.sr-global :is(
  .btn.btn-primary,
  input.btn.btn-primary,
  button.btn.btn-primary,
  a.btn.button1,
  .button1.btn
) {
  background-color: var(--sr-color-primary);
  border-color: var(--sr-color-primary);
  color: #fff;
}

/* -------------------------------------------------------------
   Hover (reverse interaction): white bg + blue border/text
   ------------------------------------------------------------- */
.sr-global :is(
  .btn.btn-primary,
  input.btn.btn-primary,
  button.btn.btn-primary,
  a.btn.button1,
  .button1.btn
):hover {
  background-color: #fff;
  border-color: var(--sr-color-primary);
  color: var(--sr-color-primary);
  text-decoration: none;
}

/* -------------------------------------------------------------
   Focus + Focus-visible:
   White bg + blue border/text + yellow focus ring
   ------------------------------------------------------------- */
.sr-global :is(
  .btn.btn-primary,
  input.btn.btn-primary,
  button.btn.btn-primary,
  a.btn.button1,
  .button1.btn
):focus,
.sr-global :is(
  .btn.btn-primary,
  input.btn.btn-primary,
  button.btn.btn-primary,
  a.btn.button1,
  .button1.btn
):focus-visible {
  background-color: #fff;
  color: var(--sr-color-primary);
  border-color: var(--sr-color-primary);
  outline: 3px solid var(--pp-focus-color);
  outline-offset: 2px;
}

/* -------------------------------------------------------------
   Active (pressed): yellow background + black border/text
   (Must override Bootstrap's !important)
   ------------------------------------------------------------- */
.sr-global :is(
  .btn.btn-primary,
  input.btn.btn-primary,
  button.btn.btn-primary,
  a.btn.button1,
  .button1.btn
):active,
.sr-global :is(
  .btn.btn-primary,
  input.btn.btn-primary,
  button.btn.btn-primary,
  a.btn.button1,
  .button1.btn
).active {
  background-color: var(--pp-focus-color) !important;
  border-color: var(--sr-color-secondary) !important;
  color: var(--sr-color-secondary) !important;
  outline: none;
}

/* -------------------------------------------------------------
   Active + Focus-visible (pressed + ring)
   (Must override Bootstrap's !important)
   ------------------------------------------------------------- */
.sr-global :is(
  .btn.btn-primary,
  input.btn.btn-primary,
  button.btn.btn-primary,
  a.btn.button1,
  .button1.btn
):active:focus-visible {
  background-color: var(--pp-focus-color) !important;
  border-color: var(--sr-color-secondary) !important;
  color: var(--sr-color-secondary) !important;
  outline: 3px solid var(--pp-focus-color);
  outline-offset: 2px;
}

/* -------------------------------------------------------------
   Disabled
   ------------------------------------------------------------- */
.sr-global :is(
  .btn.btn-primary,
  input.btn.btn-primary,
  button.btn.btn-primary,
  a.btn.button1,
  .button1.btn
):disabled,
.sr-global :is(
  .btn.btn-primary,
  input.btn.btn-primary,
  button.btn.btn-primary,
  a.btn.button1,
  .button1.btn
).disabled {
  opacity: 0.6;
  cursor: not-allowed;
}



/* ============================================================================================================================================================
   3) FORMS — BHFT-aligned (replace existing Section 3)
   ============================================================================================================================================================ */

/* ---- Form container polish (remove portal chrome) ---- */
.sr-global .crmEntityFormView,
.sr-global .entitylist {
  border: 0;
  box-shadow: none;
}

.sr-global .crmEntityFormView .panel,
.sr-global .crmEntityFormView .card,
.sr-global .crmEntityFormView .tab-pane {
  border: 0;
  box-shadow: none;
}

/* Consistent cell spacing  */
.sr-global .crmEntityFormView .cell { padding: 0 28px 20px 0; }
.sr-global .crmEntityFormView .cell .field-label { padding-bottom: 0.25em; }

/*------------------------------------------------------------------------------------------------/
/*** Hide the Referral ID field  ***/
.sr-global .crmEntityFormView #cr3f5_srreferralid,
.sr-global .crmEntityFormView #cr3f5_srreferralid_label {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/*------------------------------------------------------------------------------------------------/


/* ---- BHFT input baseline (matches org site) ---- */
/* BHFT: border 2px solid #425563; padding .75rem .5rem; width 100% */
.sr-global .crmEntityFormView :is(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  input[type="url"],
  input[type="date"],
  textarea,
  select,
  .form-control
) {
  background: #fff;
  color: #231f20;
  border: 2px solid #425563;          /* BHFT border */
  padding: .75rem .5rem;              /* BHFT padding */
  width: 100%;
  box-shadow: none;
  font-family: "Frutiger W01", Arial, Helvetica, sans-serif;
  font-weight: 400;
  line-height: 1.5;
}

/* Placeholders (BHFT uses muted grey tone) */
.sr-global .crmEntityFormView :is(input, textarea)::placeholder {
  color: #425563;
}

/* Hover: BHFT border-color becomes dark (#231f20) */
.sr-global .crmEntityFormView :is(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  input[type="url"],
  input[type="date"],
  textarea,
  select,
  .form-control
):hover {
  border-color: #231f20;
}

/* Focus: BHFT thick yellow outline + inset stroke */
.sr-global .crmEntityFormView :is(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  input[type="url"],
  input[type="date"],
  textarea,
  select,
  .form-control
):focus,
.sr-global .crmEntityFormView :is(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  input[type="url"],
  input[type="date"],
  textarea,
  select,
  .form-control
):focus-visible {
  border-color: #231f20;
  outline: 4px solid #fae100;         /* BHFT focus yellow */
  box-shadow: inset 0 0 0 2px;        /* BHFT inner stroke */
}

/* ---- Labels / legends (BHFT rhythm + slightly stronger weight) ---- */
.sr-global .crmEntityFormView label,
.sr-global .crmEntityFormView legend {
  display: inline-block;
  color: #231f20;
  font-family: "Frutiger W01", Arial, Helvetica, sans-serif;
  line-height: calc(4px + 2ex);
  margin-top: 0;
}

.sr-global .crmEntityFormView label {
  font-size: clamp(1rem, calc(.1vw + 1rem), 1.1rem); /* mirrors BHFT label sizing */
  font-weight: 400;
  margin-bottom: .25rem;
}

.sr-global .crmEntityFormView legend {
  font-size: clamp(1rem, calc(.2vw + 1rem), 1.2rem);
  font-weight: 600;                                  /* BHFT uses 600 in places */
  margin-bottom: .5rem;
}

/* -------------------------------------------------------------
   Forms: match BHFT field width (~550px) + square corners
   ------------------------------------------------------------- */

/* Constrain the element that actually sizes the control */
.sr-global .crmEntityFormView .cell .control {
  max-width: 550px;
  width: 100%;
  flex: 0 1 550px; /* prevents stretching if .control is treated as a flex item */
}
/* Form descriptions — align width with controls */
.sr-global .crmEntityFormView .cell > .description {
  max-width: 550px;
  margin-bottom: 1rem;
  width: 100%;
}

/* Ensure controls fill the constrained wrapper + enforce square corners */
.sr-global .crmEntityFormView .cell .control :is(
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  input[type="url"],
  input[type="date"],
  textarea,
  select,
  .form-control
) {
  border-radius: 0;
}

/* Keep cells from stretching in grid/flex layouts (retain working behaviour) */
.sr-global .crmEntityFormView .row .cell {
  flex: 0 0 auto;
}

/* ---- Error states ----  */
.sr-global .crmEntityFormView .input-validation-error,
.sr-global .crmEntityFormView input.input-validation-error,
.sr-global .crmEntityFormView textarea.input-validation-error,
.sr-global .crmEntityFormView select.input-validation-error {
  border-color: var(--pp-error-color);
}

/* Error text */
.sr-global .crmEntityFormView .field-validation-error,
.sr-global .crmEntityFormView .validators span {
  color:  var(--pp-error-color);
  font-size: 1rem;
  margin-top: .25rem;
  display: inline-block;
}

/* ---- Validation summary box (keep structure; BHFT-ish treatment) ---- */
.sr-global .crmEntityFormView .validation-summary,
.sr-global .crmEntityFormView .alert-danger,
.sr-global .crmEntityFormView .alert-error {
  background: #fff;                   /* BHFT keeps things clean */
  border: 2px solid var(--pp-error-color);
  color: #231f20;
  border-radius: 4px;
  padding: 12px 16px;
}

/* Links inside summary should look like links, but not “white rollover” */
.sr-global .crmEntityFormView .validation-summary a {
  color: #005eb8;
  text-decoration: underline;
}

/* ---- Radios/checkboxes: keep portal-specific behaviour ---- */
/* Suppress eager invalid chrome on initial load */
.sr-global .crmEntityFormView input[type="radio"]:required:invalid,
.sr-global .crmEntityFormView input[type="checkbox"]:required:invalid {
  outline: none;
  box-shadow: none;
  background: transparent;
}

/* Group-level error chrome for radios/checkboxes */
.sr-global .crmEntityFormView
.boolean-radio-cell:has(.validators span:not([style*="display:none"]))
.control .boolean-radio:has(input[type="radio"]:required:invalid) {
  outline: 2px solid var(--pp-error-color);
  outline-offset: 3px;
  border-radius: 0;
  background: #fff;
  padding: 8px 10px;
}

.sr-global .crmEntityFormView
.boolean-radio-cell:has(.validators span:not([style*="display:none"]))
.control:has(input[type="checkbox"]:required:invalid) {
  outline: 2px solid var(--pp-error-color);
  outline-offset: 3px;
  border-radius: 0;
  background: #fff;
  padding: 8px 10px;
}

/* Focus for radio/checkbox labels (keep visible focus affordance) */
.sr-global .crmEntityFormView :where(input[type="radio"], input[type="checkbox"]):focus-visible + label {
  outline: 4px solid #fae100;
  outline-offset: 2px;
  border-radius: 0;
}

/* -------------------------------------------------------------
   Validation: per-control error styling via aria-invalid="true"
   (Restores required-field outlines for inputs + selects + textareas)
   ------------------------------------------------------------- */

.sr-global .crmEntityFormView
  .control :is(
    input[aria-invalid="true"],
    select[aria-invalid="true"],
    textarea[aria-invalid="true"],
    .form-control[aria-invalid="true"]
  ) {
  border-color: var(--pp-error-color);
}

/* Optional: keep focus behaviour consistent even when errored */
.sr-global .crmEntityFormView
  .control :is(
    input[aria-invalid="true"],
    select[aria-invalid="true"],
    textarea[aria-invalid="true"],
    .form-control[aria-invalid="true"]
  ):focus,
.sr-global .crmEntityFormView
  .control :is(
    input[aria-invalid="true"],
    select[aria-invalid="true"],
    textarea[aria-invalid="true"],
    .form-control[aria-invalid="true"]
  ):focus-visible {
  outline: 4px solid #fae100;
  box-shadow: inset 0 0 0 2px;
}


/* -------------------------------------------------------------
   Inline error message (JS-created) - placement: ensure it appears UNDER the field
   ------------------------------------------------------------- */

.sr-global .crmEntityFormView .cell .control {
  display: block;
  float: none;
}

.sr-global .crmEntityFormView .sr-inline-error {
  display: block;
  clear: both;
  width: 100%;
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 700; 
  color: var(--pp-error-color);
}

/* -------------------------------------------------------------
   Radios: vertically centre options within the red error outline box
   ------------------------------------------------------------- */

/* Target the SAME wrapper you outline for radio-group errors */
.sr-global .crmEntityFormView
.boolean-radio-cell:has(.validators span:not([style*="display:none"]))
.control .boolean-radio:has(input[type="radio"]:required:invalid) {

  /* Keep existing error chrome (outline/background/padding) */
  /* Add vertical centring behaviour */
  display: flex;
  align-items: center;

  /* Make padding feel optically centred */
  padding-top: 10px;
  padding-bottom: 10px;
}

/* If the radios render as multiple inline items, ensure wrapping behaves */
.sr-global .crmEntityFormView
.boolean-radio-cell:has(.validators span:not([style*="display:none"]))
.control .boolean-radio:has(input[type="radio"]:required:invalid) .radio {

  display: inline-flex;
  align-items: center;
}

/* ------------------------------------------------------------- */
/* Checkbox fields – label inline next to checkbox               */
/* ------------------------------------------------------------- */

/* Make the checkbox cell a flex row */
#mainContent.sr-global .crmEntityFormView
td.cell.checkbox-cell:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Stop the theme from floating the two blocks into "columns" */
#mainContent.sr-global .crmEntityFormView td.cell.checkbox-cell:has(input[type="checkbox"]) > div.control,
#mainContent.sr-global .crmEntityFormView td.cell.checkbox-cell:has(input[type="checkbox"]) > div.table-inf {
  float: none;
  clear: none;
  width: auto;
  max-width: none;
}

/* Override generic .cell .control sizing *only* for checkbox rows */
#mainContent.sr-global .crmEntityFormView td.cell.checkbox-cell:has(input[type="checkbox"]) > div.control {
  flex: 0 0 auto;   /* do not consume 550px / 100% width */
  position: relative;
  margin: 0;
  padding: 0;
}

/* Label container sits immediately next to checkbox */
#mainContent.sr-global .crmEntityFormView td.cell.checkbox-cell:has(input[type="checkbox"]) > div.table-info {
  flex: 0 1 auto;
  margin: 0;
  padding: 0;       /* removes the theme's left padding on checkbox label blocks */
}

/* DOM order is table-info then control, so put checkbox first visually */
#mainContent.sr-global .crmEntityFormView td.cell.checkbox-cell:has(input[type="checkbox"]) > div.table-info { order: 2; }
#mainContent.sr-global .crmEntityFormView td.cell.checkbox-cell:has(input[type="checkbox"]) > div.control { order: 1; }

/* -------------------------------------------------------------------------------------------
Checkbox rows WITH a description block - Stack checkbox + label above the description
------------------------------------------------------------------------------------------- */

#mainContent.sr-global .crmEntityFormView td.cell.checkbox-cell:has(> div.description) {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "control info"
    "desc    desc";
  column-gap: 0.75rem;
  row-gap: 0.75rem;
  align-items: start;
}

/* map existing elements into grid areas */
#mainContent.sr-global .crmEntityFormView
td.cell.checkbox-cell:has(> div.description) > div.control {
  grid-area: control;
  order: unset;
}

#mainContent.sr-global .crmEntityFormView
td.cell.checkbox-cell:has(> div.description) > div.table-info {
  grid-area: info;
  order: unset;
}

#mainContent.sr-global .crmEntityFormView
td.cell.checkbox-cell:has(> div.description) > div.description {
  grid-area: desc;
  width: 100%;
  margin: 0;
}

/* Keep the required marker snug to the label */
#mainContent.sr-global .crmEntityFormView td.cell.checkbox-cell .validators {
  display: inline;
  margin-left: 0.25rem;
}

/* -------------------------------------------------------------------------------------------
Checkbox + label alignment stays fixed when error message shows
(checkbox aligns to label line, error occupies its own line)
------------------------------------------------------------------------------------------- */

#mainContent.sr-global .crmEntityFormView
td.cell.checkbox-cell:has(> div.description) {
  align-items: start; /* we will control alignment per-area */
}

/* Make table-info a 2-row stack: label-line, then error-line */
#mainContent.sr-global .crmEntityFormView
td.cell.checkbox-cell:has(> div.description) > div.table-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;        /* small separation between label and error */
  margin: 0;
  padding: 0;
}

/* Label line: ensure the label and required marker sit nicely */
#mainContent.sr-global .crmEntityFormView
td.cell.checkbox-cell:has(> div.description) > div.table-info > label.field-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.15rem 0 0;    /* Optical baseline alignment for checkbox label text */
  line-height: 1.4;    /* consistent optical alignment */
}

/* Validators should sit on the label line (asterisk), not create layout jump */
#mainContent.sr-global .crmEntityFormView
td.cell.checkbox-cell:has(> div.description) > div.table-info .validators {
  display: inline;
  margin: 0;
}

/* Align checkbox to the label line (top of the table-info stack),
   not to the combined height (label + error). */
#mainContent.sr-global .crmEntityFormView
td.cell.checkbox-cell:has(> div.description) > div.control {
  align-self: start;
  margin-top: 0.15rem; /* tiny optical nudge to match label cap height */
}

/* If validation message is injected as .sr-inline-error inside table-info,
   keep it as a second line without affecting label alignment. */

#mainContent.sr-global .crmEntityFormView
td.cell.checkbox-cell:has(> div.description) > div.table-info :is(.sr-inline-error, .field-validation-error, .validators span) {
  margin: 0;
  line-height: 1.4;
}

/* -------------------------------------------------------------
Checkbox + description: do NOT apply generic label→control spacing
(this layout is inline by design)
------------------------------------------------------------- */

#mainContent.sr-global .crmEntityFormView
td.cell.checkbox-cell:has(> div.description) > div.control {
  margin-top: 0; /* neutralise global table-info + control spacing */
}

/* ------------------------------------------------------------- */
/* NHS-style square checkbox (custom rendered)                   */
/* ------------------------------------------------------------- */
#mainContent.sr-global .crmEntityFormView td.cell.checkbox-cell:has(input[type="checkbox"]) input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
    box-sizing: border-box;
  display: inline-block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin: 0;
  vertical-align: middle;
  line-height: 0;
  border: 2px solid var(--sr-color-border);
  border-radius: 2px;
  background-color: #fff;
  position: relative;
  cursor: pointer;
}

/* Checked state */
#mainContent.sr-global .crmEntityFormView td.cell.checkbox-cell:has(input[type="checkbox"]) input[type="checkbox"]:checked {
  background-color: var(--sr-color-border);
  border-color: var(--sr-color-border);
}

/* Tick (positioned explicitly so it looks centred) */
#mainContent.sr-global .crmEntityFormView td.cell.checkbox-cell:has(input[type="checkbox"]) input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;

  /* The tick is visually best slightly right/down of centre */
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%) rotate(45deg);

  width: 7px;
  height: 11px;

  border: solid #fff;
  border-width: 0 2px 2px 0;
}

/* Focus (NHS-style high visibility focus) */
#mainContent.sr-global .crmEntityFormView td.cell.checkbox-cell:has(input[type="checkbox"]) input[type="checkbox"]:focus-visible {
  outline: 3px solid #ffd966;
  outline-offset: 2px;
}

/* -----------------------------------------------------------------
Checkbox (single required field case) If inline error exists, treat cell as errored
----------------------------------------------------------------- */

#mainContent.sr-global .crmEntityFormView
td.cell.checkbox-cell:has(.sr-inline-error) {
  position: relative;

  /* match NHS errored cell padding */
  padding-top: 12px;
  padding-right: 28px;
  padding-bottom: 20px;
  padding-left: 32px; /* gutter for red rule */
}

/* Left red error rule for checkbox single-error case */
#mainContent.sr-global .crmEntityFormView
td.cell.checkbox-cell:has(.sr-inline-error)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 5px;
  background: var(--pp-error-color);
}

/* --------------------------------------------------------------------
RADIOS — Defensive layout so options never collapse or misalign. 
Uses grid layout — do NOT reintroduce flex/float/padding-left
Works for initial load and for sr-has-error (required not completed)
-------------------------------------------------------------------- */

/* Ensure radio cell doesn't inherit checkbox/flex tricks */
#mainContent.sr-global .crmEntityFormView
td.cell.boolean-radio-cell > .control,
#mainContent.sr-global .crmEntityFormView
td.cell[role="radiogroup"] > .control {
  display: block;
  float: none;
  clear: both;
  width: 100%;
}

/* Force the boolean-radio wrapper to behave like a vertical list */
#mainContent.sr-global .crmEntityFormView
td.cell.boolean-radio-cell .boolean-radio,
#mainContent.sr-global .crmEntityFormView
td.cell[role="radiogroup"] .boolean-radio {
  display: grid;
  grid-template-columns: 20px 1fr; /* radio + label */
  column-gap: 10px;
  row-gap: 10px;
  align-items: start;
}

/* Place each radio input into column 1 */
#mainContent.sr-global .crmEntityFormView
td.cell.boolean-radio-cell .boolean-radio > input[type="radio"],
#mainContent.sr-global .crmEntityFormView
td.cell[role="radiogroup"] .boolean-radio > input[type="radio"] {
  grid-column: 1;
  margin: 0;
  position: relative;
  top: 0.18em; /* optical align with first line of label text */
}

/* Place each label into column 2 */
#mainContent.sr-global .crmEntityFormView
td.cell.boolean-radio-cell .boolean-radio > label,
#mainContent.sr-global .crmEntityFormView
td.cell[role="radiogroup"] .boolean-radio > label {
  grid-column: 2;
  margin: 0;
  line-height: 1.4;
}

/* -----------------------------------------------------------------
RADIOS — Error state should not distort layout
(Keep left red rule + inline error text, but don't box the options)
----------------------------------------------------------------- */

#mainContent.sr-global .crmEntityFormView
td.cell.boolean-radio-cell.sr-has-error > .control,
#mainContent.sr-global .crmEntityFormView
td.cell[role="radiogroup"].sr-has-error > .control {
  outline: none;
  border: 0;
  background: transparent;
  padding: 0;
}

/* If any rule is styling the boolean-radio wrapper itself on error, neutralise it */
#mainContent.sr-global .crmEntityFormView
td.cell.boolean-radio-cell.sr-has-error .boolean-radio,
#mainContent.sr-global .crmEntityFormView
td.cell[role="radiogroup"].sr-has-error .boolean-radio {
  outline: none;
  border: 0;
  background: transparent;
  padding: 0;
}

/* RADIOS — remove legacy padding once grid layout is applied */
#mainContent.sr-global .crmEntityFormView td.cell.boolean-radio-cell .boolean-radio > label,
#mainContent.sr-global .crmEntityFormView td.cell[role="radiogroup"] .boolean-radio > label {
  padding-left: 0;
}

/* ---------------------------------------------------------
RADIOS — Picklist (correct pairing + long-label safe)
Fixes option misalignment caused by <br> in Power Pages markup
--------------------------------------------------------- */

#mainContent.sr-global .crmEntityFormView
td.cell.picklist-cell .picklist.vertical {
  display: grid;
  grid-auto-flow: row;                 /* CRITICAL */
  grid-template-columns: 20px 1fr;
  row-gap: 6px;
  column-gap: 9px;
  align-items: start;
}

/* Radios always go in column 1 */
#mainContent.sr-global .crmEntityFormView
td.cell.picklist-cell .picklist.vertical > input[type="radio"] {
  grid-column: 1;
  margin: 0;
  position: relative;
  top: 0.18em;                         /* optical alignment */
}

/* Labels always go in column 2 */
#mainContent.sr-global .crmEntityFormView
td.cell.picklist-cell .picklist.vertical > label {
  grid-column: 2;
  margin: 0;
  line-height: 1.4;
}

/* Completely remove <br> from layout & grid */
#mainContent.sr-global .crmEntityFormView
td.cell.picklist-cell .picklist.vertical > br {
  display: none;
  grid-column: 1 / -1;
}

/* -----------------------------------------------------------------
   NHS error gutter + left red rule (override PP cell padding)
   ----------------------------------------------------------------- */

.sr-global .crmEntityFormView td.cell.sr-has-error,
.sr-global .crmEntityFormView .cell.sr-has-error {
  position: relative;

  /* Vertical rhythm matches NHS examples */
  padding-top: 12px;
  padding-right: 28px;
  padding-bottom: 20px;
  padding-left: 32px; /* gutter for the red rule */
}

.sr-global .crmEntityFormView td.cell.sr-has-error::before,
.sr-global .crmEntityFormView .cell.sr-has-error::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 5px;
  background: var(--pp-error-color);
}

/* -------------------------------------------------------------
   Enforce spacing above controls (Basic + Multistep)
   - Applies to standard label-above-input layouts
   - Excludes checkbox rows (inline label + control) and special checkbox+description rows
   ------------------------------------------------------------- */

/* Label/header → control (exclude checkbox cells) */
.sr-global .crmEntityFormView td.cell:not(.checkbox-cell) .table-info + .control,
.sr-global .crmEntityFormView .cell:not(.checkbox-cell) .table-info + .control {
  margin-top: 8px !important;
}

/* Error message → control */
.sr-global .crmEntityFormView td.cell .sr-inline-error + .control,
.sr-global .crmEntityFormView .cell .sr-inline-error + .control {
  margin-top: 8px !important;
}

/* Label → error message */
.sr-global .crmEntityFormView .sr-inline-error {
  margin-top: 4px;
}

/* -----------------------------------------------------------------
   Select dropdown chevron (NHS-style)
   ----------------------------------------------------------------- */

/* Fix select chevron alignment – remove PP float */

html[dir=ltr] .sr-global .crmEntityFormView .cell select {
  float: none !important;
}

/* Reset the <select> (behaviour‑only, no arrow)*/
.sr-global .crmEntityFormView select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: var(--sr-color-bg);
  padding-right: 40px; /* space for chevron */
}

/* Add the chevron via the .control wrapper */
.sr-global .crmEntityFormView .control {
  position: relative;
}

.sr-global .crmEntityFormView .control:has(select)::after {
  content: "";
  pointer-events: none;
  position: absolute;

  right: 14px;

  /* anchor to select height */
  top: 0;
  bottom: 0;
  margin: auto 0;

  width: 9px;
  height: 9px;

  border-right: 3px solid var(--sr-color-muted);
  border-bottom: 3px solid var(--sr-color-muted);
  transform: rotate(45deg);
}

/* ---------------------------------------------------------
   Multistep Progress Indicator — London Underground style
   --------------------------------------------------------- */

.sr-global div[id$="_ProgressIndicator"] {
  /* Tokens / knobs */
  --sr-track-color: var(--sr-color-muted);
  --sr-track-thickness: 3px;

  --sr-node-size: 21px;
  --sr-node-border: 3px;

  --sr-complete: var(--sr-color-primary);
  --sr-current: var(--sr-color-primary);

  --sr-upcoming-fill: var(--sr-track-color);
  --sr-upcoming-border: var(--sr-track-color);

  --sr-label-color: var(--sr-color-secondary);
  --sr-label-active: var(--sr-color-primary);

  --sr-node-row-top: 24px;
  --sr-label-top-pad: 44px;

  /* Option A: breathing room at ends */
  --sr-rail-pad: 24px;

  margin-bottom: 16px;
}

/* Layout row */
.sr-global div[id$="_ProgressIndicator"] > ol.progress.list-group.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  padding: 0 var(--sr-rail-pad);
  margin: 0;
  list-style: none;

  position: relative;
  background: transparent;
}

/* Remove any Bootstrap/PortalBasic strip styling */
.sr-global div[id$="_ProgressIndicator"] > ol.progress.list-group.top,
.sr-global div[id$="_ProgressIndicator"] > ol.progress.list-group.top > li.list-group-item {
  background: transparent;
  border: 0;
}

/* Connecting line (spans the whole padded rail) */
.sr-global div[id$="_ProgressIndicator"] > ol.progress.list-group.top::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--sr-node-row-top);
  height: var(--sr-track-thickness);
  background: var(--sr-track-color);
}

/* Step label blocks */
.sr-global div[id$="_ProgressIndicator"] > ol.progress.list-group.top > li.list-group-item {
  flex: 0 0 auto;
  margin: 0;

  padding: var(--sr-label-top-pad) 8px 0;
  text-align: center;

  color: var(--sr-label-color);
  font-weight: 600;
  line-height: 1.2;

  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nodes (default = upcoming) */
.sr-global div[id$="_ProgressIndicator"] > ol.progress.list-group.top > li.list-group-item::before {
  content: "";
  position: absolute;

  top: calc(var(--sr-node-row-top) - (var(--sr-node-size) / 2));
  left: 50%;
  transform: translateX(-50%);

  width: var(--sr-node-size);
  height: var(--sr-node-size);
  border-radius: 50%;
  box-sizing: border-box;

  background: var(--sr-upcoming-fill);
  border: var(--sr-node-border) solid transparent;
  z-index: 2;
}

/* Current step */
.sr-global div[id$="_ProgressIndicator"] > ol.progress.list-group.top > li.list-group-item.active {
  color: var(--sr-label-active);
  font-weight: 700;
}

.sr-global div[id$="_ProgressIndicator"] > ol.progress.list-group.top > li.list-group-item.active::before {
  background: var( --sr-color-bg);
  border-color: var(--sr-current);
  box-shadow: 0 0 0 3px rgba(0, 94, 184, 0.18);
}

/* Completed steps (Power Pages uses list-group-item-success) */
.sr-global div[id$="_ProgressIndicator"] > ol.progress.list-group.top > li.list-group-item.list-group-item-success::before {
  background: var(--sr-complete);
  border-color: var(--sr-complete);
}

/* Completed line segment behind the node */
.sr-global div[id$="_ProgressIndicator"] > ol.progress.list-group.top > li.list-group-item.list-group-item-success::after {
  content: "";
  position: absolute;
  top: var(--sr-node-row-top);
  left: 0;
  right: 50%;
  height: var(--sr-track-thickness);
  background: var(--sr-complete);
  opacity: 1;
  z-index: 1;
}

/* Ensure each step can position its children cleanly */
.sr-global div[id$="_ProgressIndicator"]
  > ol.progress.list-group.top
  > li.list-group-item {
  position: relative;
}

/* Completed node is filled; keep it filled (if not already) */
.sr-global div[id$="_ProgressIndicator"]
  > ol.progress.list-group.top
  > li.list-group-item.list-group-item-success::before {
  background: var(--sr-complete);
  border-color: var(--sr-complete);
}

/* Move the existing check icon from inline text flow into the node */
.sr-global div[id$="_ProgressIndicator"]
  > ol.progress.list-group.top
  > li.list-group-item.list-group-item-success
  > .fa-check,
.sr-global div[id$="_ProgressIndicator"]
  > ol.progress.list-group.top
  > li.list-group-item.list-group-item-success
  > .fa-solid.fa-check {
  position: absolute;

  /* centre it inside the node */
  left: 50%;
  top: calc(var(--sr-node-row-top) - (var(--sr-node-size) / 2));
  width: var(--sr-node-size);
  height: var(--sr-node-size);

  display: flex;
  align-items: center;
  justify-content: center;

  /* visual */
  color: #fff;
  font-size: 12px;        /* tweak if needed */
  line-height: 1;

  /* don't interfere with clicks or layout */
  pointer-events: none;
  margin: 0;
  padding: 0;
}

/* Remove any inline spacing the icon might have contributed */
.sr-global div[id$="_ProgressIndicator"]
  > ol.progress.list-group.top
  > li.list-group-item.list-group-item-success
  > .fa-check::before,
.sr-global div[id$="_ProgressIndicator"]
  > ol.progress.list-group.top
  > li.list-group-item.list-group-item-success
  > .fa-solid.fa-check::before {
  line-height: 1;
}

/* Completed step node stays filled */
.sr-global div[id$="_ProgressIndicator"]
  > ol.progress.list-group.top
  > li.list-group-item.list-group-item-success::before {
  background: var(--sr-complete);
  border-color: var(--sr-complete);
}

/* Reposition the existing check icon into the node */
.sr-global div[id$="_ProgressIndicator"]
  > ol.progress.list-group.top
  > li.list-group-item.list-group-item-success
  .fa-check,
.sr-global div[id$="_ProgressIndicator"]
  > ol.progress.list-group.top
  > li.list-group-item.list-group-item-success
  .fa-solid.fa-check {
  position: absolute;

  /* Same anchor as the node */
  top: calc(var(--sr-node-row-top) - (var(--sr-node-size) / 2));
  left: 50%;
  transform: translateX(-50%);

  /* Sit inside the node box */
  width: var(--sr-node-size);
  height: var(--sr-node-size);
  display: flex;
  align-items: center;
  justify-content: center;

  /* Make it visible */
  color: #fff;
  font-size: 12px;
  line-height: 1;

  /* CRITICAL: ensure it sits ABOVE the node pseudo-element (node is z-index:2) */
  z-index: 3;

  /* Don’t affect layout/clicks */
  pointer-events: none;
}

/* Defensive: if any rule adds margins to the icon */
.sr-global div[id$="_ProgressIndicator"]
  > ol.progress.list-group.top
  > li.list-group-item.list-group-item-success
  .fa-check {
  margin: 0;
}

/* Don’t draw half-line for the first step */
.sr-global div[id$="_ProgressIndicator"]
  > ol.progress.list-group.top
  > li.list-group-item:first-child::after {
  display: none;
}

/* ---------------------------------------------------------
   DESKTOP: track line should ALWAYS remain grey
   --------------------------------------------------------- */

.sr-global div[id$="_ProgressIndicator"]
  > ol.progress.list-group.top
  > li.list-group-item::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* ---------------------------------------------------------
   Progress Indicator — MOBILE (bullet list + vertical rail)
   --------------------------------------------------------- */

@media (max-width: 600px) {

  /* Turn OFF the desktop horizontal track line(s) on mobile */
  .sr-global div[id$="_ProgressIndicator"] > ol.progress.list-group.top::before,
  .sr-global div[id$="_ProgressIndicator"] > ol.progress.list-group.top::after {
    display: none;
    content: none;
  }

  /* Stack steps and set a consistent left rail padding (halo-safe) */
  .sr-global div[id$="_ProgressIndicator"] {
    --sr-node-size: 18px;   /* mobile */
    --sr-rail-pad: 24px;    /* rail breathing room */
    --sr-halo-pad: 9px;     /* halo breathing room */
  }

  .sr-global div[id$="_ProgressIndicator"] > ol.progress.list-group.top {
    display: block;
    position: relative;

    margin: 0 0 16px 0;
    padding: 0 0 0 var(--sr-halo-pad);
    list-style: none;
    background-color: transparent;

    /* Vertical rail as background image (won’t collapse to a dot) */
    background-image: linear-gradient(var(--sr-track-color), var(--sr-track-color));
    background-repeat: no-repeat;
    background-size: var(--sr-track-thickness) 100%;

    /* Align rail to node centres: railX = left padding + (nodeSize / 2)
    */
    background-position:
      calc(var(--sr-halo-pad) + (var(--sr-node-size) / 2) - 1px) 0;
  }

  /* Each step row: bullet + label */
  .sr-global div[id$="_ProgressIndicator"]
    > ol.progress.list-group.top
    > li.list-group-item {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 10px 0;
    margin: 0;
    border: 0;
    background: transparent;

    text-align: left;
    white-space: normal;
    overflow: visible;
    text-overflow: initial;

    position: relative;
  }

  /* Bullet node inline (override desktop absolute positioning) */
  .sr-global div[id$="_ProgressIndicator"]
    > ol.progress.list-group.top
    > li.list-group-item::before {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;

    width: var(--sr-node-size);
    height: var(--sr-node-size);
    flex: 0 0 var(--sr-node-size);

    z-index: 2; /* keep node above rail */
    margin: 0;
  }

  /* Ensure the DESKTOP horizontal track/overlays never render on mobile */
    .sr-global div[id$="_ProgressIndicator"] > ol.progress.list-group.top::before,
    .sr-global div[id$="_ProgressIndicator"] > ol.progress.list-group.top::after {
      content: none !important;
      display: none !important;
    }

  /* Remove Bootstrap list-group borders that can look like horizontal rules */
  .sr-global div[id$="_ProgressIndicator"]
    > ol.progress.list-group.top
    > li.list-group-item {
    border: 0 !important;
    box-shadow: none !important;
  }

  /* If the theme uses a separator via background-image on LI */
  .sr-global div[id$="_ProgressIndicator"]
    > ol.progress.list-group.top
    > li.list-group-item {
    background-image: none !important;
  }

  /* Also kill any per-step horizontal segments (older versions used li::after) */
  .sr-global div[id$="_ProgressIndicator"]
    > ol.progress.list-group.top
    > li.list-group-item::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* Completed check icon centred inside node */
  .sr-global div[id$="_ProgressIndicator"]
    > ol.progress.list-group.top
    > li.list-group-item.list-group-item-success
    .fa-check,
  .sr-global div[id$="_ProgressIndicator"]
    > ol.progress.list-group.top
    > li.list-group-item.list-group-item-success
    .fa-solid.fa-check {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

    width: var(--sr-node-size);
    height: var(--sr-node-size);

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 3;
    pointer-events: none;
    margin: 0;
  }
}




/* ============================================================================================================================================================
 4) CARDS / PANELS / POPOVERS
 ============================================================================================================================================================ */
.sr-global .panel,
.sr-global .modal-content,
.sr-global .popover-content {
  background: var(--sr-color-bg);
  color: var(--sr-color-secondary);
  border: 1px solid var(--sr-color-border);
  border-radius: var(--sr-radius-md);
  box-shadow: var(--sr-shadow-sm);
  font-family: var(--sr-font-sans);
}

/* -------------------------------------------------------------
   SR – CARE CARDS (NHS-aligned)
   Section 6: Cards / Panels / Popovers

   Markup:
     .sr-care-card
       .sr-care-card__header
         h2.sr-care-card__title
         span.nhsuk-card--care__arrow
       .sr-care-card__body
   ------------------------------------------------------------- */

/* ------------------------
   Base card (shared)
   ------------------------ */

.sr-global .sr-care-card {
  position: relative; /* anchor for pointer arrow */
  border: 1px solid var(--sr-color-border);
  font-family: var(--sr-font-sans);
  margin-block: var(--sr-space-8);
  background: transparent;
}

.sr-global .sr-care-card__header {
  position: relative; /* anchor for arrow */
  padding: var(--sr-space-5) var(--sr-space-6);
}

.sr-global .sr-care-card__title {
  margin: 0;
  font-weight: 700;
  line-height: var(--sr-line-height-normal);
}

.sr-global .sr-care-card__body {
  padding: var(--sr-space-6);
}

.sr-global .sr-care-card__list {
  margin: 0 0 var(--sr-space-4) 1.25em;
  padding: 0;
}

.sr-global .sr-care-card__action {
  margin: 0;
}

/* Keyboard focus within card */
.sr-global .sr-care-card :where(a, button, .btn):focus-visible {
  outline: 3px solid #ffbf47; /* NHS focus yellow */
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sr-global .sr-care-card,
  .sr-global .sr-care-card * {
    transition: none !important;
    animation: none !important;
  }
}

/* ------------------------
   NHS pointer diamond
   ------------------------ */

.sr-global .nhsuk-card--care__arrow {
  position: absolute;
  bottom: -0.68rem;
  left: 1.875rem;
  width: 1.25rem;
  height: 1.25rem;
  transform: rotate(45deg);
  background-color: var(--sr-cc-header-bg);
  pointer-events: none;
  z-index: 1;
}

@media (min-width: 40.0625em) {
  .sr-global .nhsuk-card--care__arrow {
    left: 2.375rem;
  }
}

/* ------------------------
   EMERGENCY care card: Red header + dark body
   ------------------------ */

.sr-global .sr-care-card--emergency .sr-care-card__header {
  background: var(--sr-color-danger);
  color: #fff;
  --sr-cc-header-bg: var(--sr-color-danger);
}

.sr-global .sr-care-card--emergency .sr-care-card__title {
  color: #fff;
}

.sr-global .sr-care-card--emergency .sr-care-card__body {
  background: var(--sr-color-secondary);
  color: #fff;
}

/* Force white text on dark body */
.sr-global .sr-care-card--emergency
.sr-care-card__body :is(p, li, strong, em, a) {
  color: #fff;
}

/* Links on dark background */
.sr-global .sr-care-card--emergency .sr-care-card__body a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.sr-global .sr-care-card--emergency .sr-care-card__body a:hover,
.sr-global .sr-care-card--emergency .sr-care-card__body a:focus {
  text-decoration: none;
}

/* ------------------------
   URGENT care card: Red header + light body
   ------------------------ */

.sr-global .sr-care-card--urgent .sr-care-card__header {
  background: var(--sr-color-danger);
  color: #fff;
  --sr-cc-header-bg: var(--sr-color-danger);
}

.sr-global .sr-care-card--urgent .sr-care-card__title {
  color: #fff;
}

.sr-global .sr-care-card--urgent .sr-care-card__body {
  background: var(--sr-color-bg);
  color: var(--sr-color-secondary);
}

/* ------------------------
   NON‑URGENT care card: Blue header + light body
   ------------------------ */

.sr-global .sr-care-card--nonurgent .sr-care-card__header {
  background: var(--sr-color-primary);
  color: #fff;
  --sr-cc-header-bg: var(--sr-color-primary);
}

.sr-global .sr-care-card--nonurgent .sr-care-card__title {
  color: #fff;
}

.sr-global .sr-care-card--nonurgent .sr-care-card__body {
  background: var(--sr-color-bg);
  color: var(--sr-color-secondary);
}

/* ------------------------
   Mobile spacing
   ------------------------ */

@media (max-width: 599px) {
  .sr-global .sr-care-card__header {
    padding: var(--sr-space-4) var(--sr-space-5);
  }
  .sr-global .sr-care-card__body {
    padding: var(--sr-space-5);
  }
}



/* ============================================================================================================================================================
 5) TABLES
 ============================================================================================================================================================ */
/* ... existing styles unchanged ... */



/* ============================================================================================================================================================
 6) RESPONSIVE TWEAKS
 ============================================================================================================================================================ */
@media (max-width: 991px) {
  .sr-global h1 { font-size: 28px; }
  .sr-global h2 { font-size: 24px; }
  .sr-global .navbar-brand { padding: 12px 15px; }
}



/* ============================================================================================================================================================
 7) HEADER & FOOTER OVERRIDES (outside content wrapper)
 ============================================================================================================================================================ */
.sr-global footer {
  background: var(--sr-color-surface);
  color: var(--sr-color-muted);
  font-family: var(--sr-font-sans);
  font-size: var(--sr-font-size-300);
  font-weight: 400; /* Roman footer text */
}

.sr-global-header.static-top.navbar-dark {
  font-family: var(--sr-font-sans); /* Frutiger in the header */
  background-color: var(--sr-color-primary);
  color: #fff;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/* site SVG logo styling/sizing (unchanged) */
.sr-global-header .logoSVG { height: 96px; width: auto; margin: 9px 0; }
.sr-global-header .siteTitle { color: #fff; }
.sr-global-header a { color: #fff; text-decoration: none; }
.sr-global-header a:hover, .sr-global-header a:focus { text-decoration: underline; }
.sr-global-header .navbar-nav>li>a,
.sr-global-header .navbar-nav>li.dropdown>a { color: #fff; }
.sr-global-header .navbar-nav>li>a:hover,
.sr-global-header .navbar-nav>li>a:focus { background-color: var(--sr-color-primary); color: #fff; }
.sr-global-header .navbar-toggler { border: 1px solid var(--sr-color-primary); background: transparent; }
.sr-global-header .navbar-toggler:hover { background: var(--sr-color-primary); }


/* ---------------------------------------------------------
   BHFT header
   --------------------------------------------------------- */

/* Element-scoped variables so they always exist */
.sr-global-header.navbar-dark.static-top {
  --bhft-logo-h: clamp(56px, 9vw, 96px);     /* logo height desktop/tablet */
  --bhft-gap: clamp(32px, 5vw, 64px);        /* space between logo and title */
  --bhft-title-nudge-em: 0.33em;             /* center-aligned nudge */
}

/* ---------- Tablet & desktop (>=600px) ---------- */
@media (min-width: 600px) {
  /* Stop the header from wrapping (beats inline flex-wrap:wrap) */
  .sr-global-header.navbar-dark.static-top { flex-wrap: nowrap !important; }

  /* The real row is the inner wrapper that contains SVG + H1 */
  .sr-global-header .navbar-brand.navbar-header .xrm-attribute-value {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;      /* center works well with this lock-up */
    gap: var(--bhft-gap);                 /* breathing room to the left of title */
    margin: 0; padding: 0;
  }

  /* Logo sizing/behavior */
  .sr-global-header .logoSVG {
    height: var(--bhft-logo-h);
    width: auto;
    display: inline-block;                /* participates in baseline if needed */
    vertical-align: baseline;
    margin: 0;
    flex: 0 0 auto;
  }

  /* Title */
  .sr-global-header .custom-sitetitle {
    font-family: "Frutiger W01",Arial,Helvetica,sans-serif;;
    font-weight: 600;
    color: #fff;
    line-height: calc(4px + 2ex);
    font-size: clamp(1.05rem, 1.1vw + 0.8rem, 1.6rem);

    /* one line + truncation under pressure */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;

    /* center-aligned row + optical nudge */
    position: relative;
    transform: translateY(var(--bhft-title-nudge-em));

    /* allow slight shrink when tight */
    flex: 0 1 auto;
    min-width: 0;
  }
}

/* ---------- Phones (<600px): stack ---------- */
@media (max-width: 599px) {
  .sr-global-header.navbar-dark.static-top {
    --bhft-logo-h: 48px;
    --bhft-gap: 12px;
    --bhft-title-nudge-em: 0em;          /* stacked; no nudge needed */
  }

  .sr-global-header .navbar-brand.navbar-header .xrm-attribute-value {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    row-gap: 8px;
  }

  .sr-global-header .logoSVG { height: var(--bhft-logo-h); }

  .sr-global-header .custom-sitetitle {
    transform: none;                      /* reset */
    font-size: clamp(1rem, 3.5vw, 1.25rem);
    max-width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
  }
}

/* --- Ensure no clipping on the masthead containers --- */
.sr-global-header.navbar-dark.static-top,
.sr-global-header .navbar-brand.navbar-header,
.sr-global-header .navbar-brand.navbar-header .xrm-attribute-value {
  overflow: visible !important;                  /* allow glyphs below baseline */
}

/* --- Give the inline row a touch of bottom breathing room --- */
@media (min-width: 600px) {
  .sr-global-header .navbar-brand.navbar-header .xrm-attribute-value {
    padding-bottom: clamp(2px, 0.25vw, 6px);     /* tiny safety buffer for descenders */
  }
}

/* --- Title line-height & nudge ( add safer line-height) --- */
@media (min-width: 600px) {
  .sr-global-header .custom-sitetitle {
    line-height: 1.3;
    transform: translateY(0.33em);               /* optical nudge */
  }
}

/* --- Phone layout: stacked; no nudge, comfortable line-height --- */
@media (max-width: 599px) {
  .sr-global-header .custom-sitetitle {
    line-height: 1.35;
    transform: none;
  }
}


/* -------------------------------------------------------------
   SR GLOBAL — FOOTER
   ------------------------------------------------------------- */

/* Base footer look & typography (BHFT) */
footer.sr-global-footer {
  background: #e8edee;
  color: #231f20;
  font-family: "Frutiger W01", Arial, Helvetica, sans-serif;
  font-weight: 700;
  padding: 1.5rem 0;
}

/* Ensure the PP wrapper inherits the same background */
footer.sr-global-footer .footer-bottom { background: #e8edee; }

/* Footer inner wrapper (our own layout container) */
footer.sr-global-footer .footer-links-wrapper {
  display: flex;
  flex-direction: column;     /* mobile: stacked */
  gap: 1rem;
  padding: 0 1rem;
}

/* Links list */
footer.sr-global-footer .footer-links {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;     /* mobile stack */
  gap: 0.5rem;
}

footer.sr-global-footer .footer-link-item a {
  color: #231f20;             /* BHFT footer links stay dark */
  text-decoration: none;
  font-weight: 700;
}

/* Hover/focus behaviour INSIDE the footer only (no white rollover, no focus box) */
footer.sr-global-footer .footer-link-item a:hover,
footer.sr-global-footer .footer-link-item a:focus,
footer.sr-global-footer .footer-link-item a:focus-visible {
  color: #231f20;             /* remain black */
  text-decoration: underline; /* BHFT hover cue */
  background: transparent;
  box-shadow: none;
}

/* Copyright */
footer.sr-global-footer .footer-copyright {
  margin: 0;
  font-size: 0.9rem;
  text-align: left;           /* mobile */
}
/* ensure copyright text stays BHFT black */

footer.sr-global-footer .footer-bottom p.footer-copyright,
footer.sr-global-footer p.footer-copyright {
  color: #231f20;
}

/* -------------------------------------------------------------
   Desktop layout (>=768px)
   Always two columns
   ------------------------------------------------------------- */
@media (min-width: 768px) {
  footer.sr-global-footer .footer-links-wrapper {
    flex-direction: row;               /* two columns */
    justify-content: space-between;
    align-items: center;
  }
  footer.sr-global-footer .footer-links {
    flex-direction: row;
    gap: 2rem;
  }
  footer.sr-global-footer .footer-copyright {
    text-align: right;
    margin-left: auto;
  }
}

/* -------------------------------------------------------------
   Neutralise NHS global focus visuals ONLY inside the footer
   ------------------------------------------------------------- */
footer.sr-global-footer *:focus,
footer.sr-global-footer *:focus-visible {
  background: transparent;
  box-shadow: none;
  color: #231f20;
}

/* -------------------------------------------------------------
   Bootstrap 5.2.2 container + grid overrides (footer scope only)
   Reason: Bootstrap sets .container max-width caps and .col- widths that
   otherwise restrict the footer to 75% (e.g., col-lg-9 at >=992px). We
   out-specific those rules and match their breakpoints.
   ------------------------------------------------------------- */

/* 1) Remove Bootstrap .container max-width caps in the footer */
footer.sr-global-footer .footer-bottom .container {
  max-width: none;   /* remove 540/720/960/1140/1320 caps */
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* 2) Override grid widths inside footer at all breakpoints via specificity */
footer.sr-global-footer .row > div[class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Bootstrap lg ≥ 992px  — this is where col-lg-9 is normally width:75% */
@media (min-width: 992px) {
  footer.sr-global-footer .row > div[class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Bootstrap xl ≥ 1200px */
@media (min-width: 1200px) {
  footer.sr-global-footer .row > div[class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Bootstrap xxl ≥ 1400px */
@media (min-width: 1400px) {
  footer.sr-global-footer .row > div[class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* DOB wrapper */
#custom_dob_wrapper{
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  font-family: var(--sr-font-sans) !important;
}

/* main label */
#custom_dob_wrapper .dob-main-label{
  font-family: "Frutiger W01", Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, calc(.1vw + 1rem), 1.1rem);
  font-weight: 400 !important;
  line-height: 1.25 !important;
  margin: 0 0 6px 0 !important;
  color: #231F20 !important;
}

/* required star */
#custom_dob_wrapper .dob-required{
  color: #d5281b !important;
}

/* hint text */
#custom_dob_wrapper .dob-hint{
  font-family: "Frutiger W01", Arial, Helvetica, sans-serif;
  font-size:  14px !important;
  line-height: 1.25 !important;
  margin: 0 0 12px 0 !important;
  color: #231F20 !important;
}

/* row */
#custom_dob_wrapper .dob-row{
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 28px !important;
  flex-wrap: nowrap !important;
}

/* each item */
#custom_dob_wrapper .dob-item{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  margin: 0 !important;
  font-family: var(--sr-font-sans) !important;
}

/* Day / Month / Year labels */
#custom_dob_wrapper .dob-item label{
  font-family: "Frutiger W01", Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, calc(.1vw + 1rem), 1.1rem);
  font-weight: 400 !important;
  line-height: 1.25px !important;
  margin: 0 0 6px 0 !important;
  color: #231F20 !important;
  margin-bottom: 18px !important;
  margin-top: 14px !important;
}

/* input boxes - match other fields */
#custom_dob_wrapper input.form-control{
  font-family: var(--sr-font-sans) !important;
  font-size: 16px !important;
  line-height: 1.25px !important;
  font-weight: 400 !important;
  color: #231F20 !important;
  background: #fff !important;

  display: block !important;
  margin: 0 !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 12px !important;

  border: 1.25 solid #231F20 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  outline: none !important;
}

/* focus style like other fields */
#custom_dob_wrapper input.form-control:focus{
  border: 4px solid #231f20 !important;
  outline: 4px solid #ffeb3b !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* widths */
#custom_dob_wrapper .dob-day input,
#custom_dob_wrapper .dob-month input{
  width: 80px !important;
}

#custom_dob_wrapper .dob-year input{
  width: 100px !important;
}

/* DOB inline error message */
#dob_inline_error {
  color: #d5281b !important;
  font-weight: 700 !important;
  font-size: clamp(1rem, calc(.1vw + 1rem), 1.1rem) !important;
  margin-top: 8px !important;
  font-family: "Frutiger W01", Arial, Helvetica, sans-serif !important;
}

/* Red border when DOB has error */
#custom_dob_wrapper.dob-has-error input.form-control {
  border: 2px solid #d5281b !important;
  box-shadow: none !important;
}

/* Focus + error style */
#custom_dob_wrapper.dob-has-error input.form-control:focus {
  border: 2px solid #231f20 !important;
  box-shadow: 0 0 0 4px #d5281b !important;
  outline: 4px solid #ffeb3b !important;
  outline-offset: 2px !important;
}