@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ==========================================================================
   EXHIBITOR PORTAL - visual system  v4
   Direction: hall wayfinding.
   - The whole top block (nav + hero) is one royal blue plane.
   - White type on it, ORANGE for every highlight.
   - Every control - text, select, file, date, textarea - is one width.
   Load this file LAST, after reset.css / layout.css.
   ========================================================================== */

:root {
  /* ---- Colour ----
     --royal* is the structural purple (header plane, current form, focus)
     --flare* is the magenta highlight (buttons, progress, urgency)     */
  --royal:        #5B21A8;
  --royal-dark:   #3C1372;
  --royal-bright: #7B32CF;
  --royal-deep:   #2C0E55;
  --royal-tint:   #F4EDFF;

  --flare:        #E8215B;
  --flare-bright: #FF3D77;
  --flare-deep:   #A8123F;
  --flare-tint:   #FFEFF4;
  --flare-on-blue:#FF9EBC;   /* magenta that stays legible on the purple plane */

  --ink:          #1A1040;   /* deep plum - footer, rail head, headings */
  --ink-soft:     #2E2158;
  --slate:        #625B7A;
  --slate-light:  #948DA8;
  --line:         #E7E2F0;
  --line-strong:  #CFC7E0;
  --canvas:       #F3F0F8;
  --surface:      #FFFFFF;
  --surface-sunk: #FAF8FC;

  /* Status & financial accents.
     The -ink variants are darkened so small text clears contrast on white;
     the pure values are used for dots, fills and bars where they can be bold. */
  --emerald:      #10B981;   /* available, confirmed, complete */
  --emerald-ink:  #047857;
  --emerald-tint: #E7F8F1;

  --amber:        #F59E0B;   /* pending, reserved, in progress */
  --amber-ink:    #92600A;
  --amber-tint:   #FFF6E5;

  --green:        var(--emerald-ink);
  --green-tint:   var(--emerald-tint);
  --red:          #C0261C;
  --red-tint:     #FDF0EF;

  /* ---- Type ---- */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Space & shape ---- */
  --rail-w: 356px;
  --gutter: 28px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --header-h: 58px;
  --field-h: 44px;          /* one height for every control */

  --shadow-sm: 0 1px 2px rgba(26,16,64,.06);
  --shadow-md: 0 10px 30px -16px rgba(26,16,64,.28), 0 2px 6px rgba(26,16,64,.05);
  --shadow-lg: 0 26px 60px -30px rgba(26,16,64,.5);
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ==========================================================================
   1. Base
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  background-color: var(--canvas);
  background-image:
    linear-gradient(to right, rgba(26,16,64,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,16,64,.028) 1px, transparent 1px);
  background-size: 44px 44px;
  background-attachment: fixed;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.background-container { display: none; }
.container-mobile { overflow: visible; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
}

a { color: var(--flare); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--flare-deep); }

:focus-visible { outline: 2px solid var(--flare); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--flare); color: #fff; }

/* ==========================================================================
   2. Header - deep royal, sticky, compact
   ========================================================================== */

.fHeader {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: linear-gradient(100deg, var(--royal-deep) 0%, var(--royal-dark) 60%, var(--royal) 100%);
  border-bottom: 1px solid rgba(255,255,255,.16);
  transition: box-shadow .25s var(--ease);
}
.exp-scrolled .fHeader { box-shadow: 0 12px 34px -20px rgba(26,16,64,.75); }

.fHeader .fheaderToptwo:empty,
.fHeader .region-headertop.empty { display: none; }

.fHeader .navbar-header > .wrap {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 24px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 20px;
  transition: height .25s var(--ease);
}
.exp-scrolled .fHeader .navbar-header > .wrap { height: 50px; }

.head-padding { display: none; }

/* --- Brand --- */
.exp-brand { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; }
.exp-brand-mark {
  width: 28px; height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: #fff;
  color: var(--flare);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
}
.exp-brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.exp-brand-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.exp-brand-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  white-space: nowrap;
}

/* --- Header progress strip --- */
.exp-head-status {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
}
.exp-head-status b { color: #fff; font-weight: 500; }
.exp-mini-bar {
  width: 68px; height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,.22);
  overflow: hidden;
}
.exp-mini-bar i {
  display: block; height: 100%; width: 0;
  background: var(--emerald);
  border-radius: 99px;
  transition: width 1s var(--ease);
}

/* --- Main menu --- */
nav[aria-label="Main Menu"] .fMenu {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav[aria-label="Main Menu"] .menu-item a {
  display: block;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.8);
  white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
nav[aria-label="Main Menu"] .menu-item a:hover { background: rgba(255,255,255,.16); color: #fff; }

/* primary action = orange, the header's highlight colour */
nav[aria-label="Main Menu"] .menu-item[data-nav="dashboard"] a,
nav[aria-label="Main Menu"] .menu-item[data-nav="login"] a {
  background: var(--flare);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 16px -8px rgba(232,33,91,.85);
}
nav[aria-label="Main Menu"] .menu-item[data-nav="dashboard"] a:hover,
nav[aria-label="Main Menu"] .menu-item[data-nav="login"] a:hover { background: var(--flare-bright); }

/* Nothing is hidden by default. If you want the logged-out state to show only
   Login, uncomment these:
body.no-user [data-nav="dashboard"],
body.no-user [data-nav="logout"],
body.no-user [data-nav="summary"] { display: none; }
body:not(.no-user) [data-nav="login"] { display: none; }
*/

/* pushes the menu right when there's no brand block */
.exp-spacer { flex: 1 1 auto; }

/* Fallback for the left of the bar when no brand is configured: your own page
   heading, small. Keeps the bar balanced and tells you where you are once the
   header is stuck to the top. */
.exp-head-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  min-width: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
}
.exp-head-title::before {
  content: "";
  flex: none;
  width: 14px; height: 3px;
  border-radius: 2px;
  background: var(--flare);
}
.exp-head-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exp-nav-toggle {
  display: none;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--r-sm);
  background: transparent;
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.exp-nav-toggle:hover { background: rgba(255,255,255,.14); }

/* ==========================================================================
   3. Hero - same royal plane, centred banner
   ========================================================================== */

.fPageTitle {
  position: relative;
  overflow: hidden;
  background: linear-gradient(112deg, var(--royal-deep) 0%, var(--royal-dark) 42%, var(--royal) 100%);
  color: #fff;
  padding: 40px 0 44px;
  margin-bottom: 26px;
}
.fPageTitle::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, rgba(232,33,91,.55) 0 32%, rgba(232,33,91,0) 62%),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 10px, transparent 10px 30px);
  pointer-events: none;
}
.fPageTitle::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--flare) 0 20%, rgba(255,255,255,.24) 20%);
}
.fPageTitle > .container { position: relative; z-index: 1; }

.exp-crumbs {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 12px;
}
.exp-crumbs a { color: rgba(255,255,255,.75); }
.exp-crumbs a:hover { color: #fff; }
.exp-crumbs span { margin: 0 7px; opacity: .5; }
.fPageTitle.is-center .exp-crumbs { text-align: center; }

.exp-hero { display: flex; align-items: center; gap: 20px; }

/* Centred banner (default). Nothing sits on one side, so nothing looks empty. */
.exp-hero.is-center { flex-direction: column; text-align: center; }
.exp-hero.is-center .exp-hero-body { max-width: 780px; min-width: 0; }
.exp-hero.is-center .exp-hero-plate { order: -1; margin: 0 0 4px; width: 62px; height: 62px; font-size: 31px; }
.exp-hero.is-center .exp-hero-meta { justify-content: center; }
.exp-hero.is-center .exp-hero-note { margin-left: auto; margin-right: auto; }

/* Left-aligned variant, letter anchored to the right edge */
.exp-hero.is-left { justify-content: space-between; flex-wrap: nowrap; }
.exp-hero.is-left .exp-hero-plate { order: 2; margin-left: auto; }

.exp-hero-plate {
  flex: none;
  width: 88px; height: 88px;
  display: grid;
  place-items: center;
  background: linear-gradient(155deg, var(--flare-bright), var(--flare));
  border-radius: 12px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.22) inset, 0 14px 34px -14px rgba(232,33,91,.85);
}

.exp-hero-body { min-width: 260px; flex: 1; }

.exp-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--flare-on-blue);
  margin-bottom: 5px;
}

.fPageTitle h1,
.fPageTitle #heading {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.06;
  letter-spacing: -.025em;
  color: #fff;
  margin: 0;
}

.exp-hero-note {
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.75);
  margin: 6px 0 0;
}

.exp-hero-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.exp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.09);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
}
.exp-chip b { font-weight: 600; color: #fff; }
.exp-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.exp-chip.is-due     { border-color: rgba(255,61,119,.6); background: rgba(232,33,91,.24); color: #FFD2AE; }
.exp-chip.is-overdue { border-color: rgba(255,140,130,.7); background: rgba(192,38,28,.3);   color: #FFC3BE; }
.exp-chip.is-filed   { border-color: rgba(120,235,185,.5); color: #9BF0C9; }

/* ==========================================================================
   4. Content grid
   ========================================================================== */

#fContent > .container { max-width: 1380px; padding-bottom: 72px; }

.fRegion[data-fphp-region^="page-"]:has(.f-module-user-form):has(.f-module-pages-menu),
.fRegion.exp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  gap: var(--gutter);
  align-items: start;
}
.fRegion.exp-layout > .f-module-user-form { grid-column: 1; grid-row: 1; min-width: 0; }
.fRegion.exp-layout > .f-module-pages-menu { grid-column: 2; grid-row: 1; }

/* ==========================================================================
   5. Form card
   ========================================================================== */

.f-module-user-form .fModuleContent {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

form.fForm { padding: 0; margin: 0; }

.exp-section { padding: 26px 32px 8px; border-top: 1px solid var(--line); }
.exp-section:first-of-type { border-top: 0; padding-top: 30px; }

.exp-section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.exp-section-head::before {
  content: "";
  width: 18px; height: 3px;
  flex: none;
  background: var(--flare);
  border-radius: 2px;
  transform: translateY(-3px);
}
.exp-section-head h2 {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink);
}
.exp-section-note { font-size: 12.5px; color: var(--slate-light); margin-left: auto; text-align: right; }

/* --- Field grid --- */
.exp-section-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 26px;
  align-items: start;
}
.exp-section-body[data-layout="single"] { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.exp-section-body > .form-item.exp-span { grid-column: 1 / -1; }

/* --- Rows: label above control.
       !important neutralises the template's legacy floated / fixed-width label
       rules, which were clipping longer labels. --- */
.fForm .form-item {
  display: block !important;
  float: none !important;
  width: auto !important;
  padding: 0 0 20px !important;
  margin: 0 !important;
  min-width: 0;
}
.fForm .form-item.d-none,
.fForm .form-item.hidden { display: none !important; }

.fForm .form-item > label {
  display: block !important;
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  text-align: left !important;
  overflow: visible !important;
  white-space: normal !important;
  padding: 0 0 7px !important;
  margin: 0 !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-soft);
}
.fForm .form-item > label .exp-req { color: var(--flare); margin-left: 3px; font-weight: 700; }

/* ==========================================================================
   5b. EVERY control, one width and one height
       Covers text, email, tel, url, number, password, search, date, time,
       datetime-local, month, week, colour, file, select and textarea -
       including input types the template doesn't set explicitly.
   ========================================================================== */

.fForm .form-item input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.fForm .form-item select,
.fForm .form-item textarea {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  min-height: var(--field-h);
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background-color: var(--surface-sunk);
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease);
}

/* Select: kill the OS widget, draw our own chevron so height matches exactly */
.fForm .form-item select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235A6280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.fForm .form-item select::-ms-expand { display: none; }

/* File: same box, with the browse button restyled inside it */
.fForm .form-item input[type="file"] {
  padding: 6px 10px 6px 6px;
  line-height: var(--field-h);
  cursor: pointer;
  font-size: 13.5px;
  color: var(--slate);
}
.fForm .form-item input[type="file"]::file-selector-button,
.fForm .form-item input[type="file"]::-webkit-file-upload-button {
  margin-right: 12px;
  padding: 8px 14px;
  border: 0;
  border-radius: 4px;
  background: var(--flare-tint);
  color: var(--flare-deep);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s var(--ease);
}
.fForm .form-item input[type="file"]:hover::file-selector-button { background: #EADCFF; }

/* Date / time: keep the picker icon but tone it to the palette */
.fForm .form-item input[type="date"],
.fForm .form-item input[type="time"],
.fForm .form-item input[type="datetime-local"],
.fForm .form-item input[type="month"] { cursor: pointer; }
.fForm .form-item input::-webkit-calendar-picker-indicator {
  opacity: .55;
  cursor: pointer;
  transition: opacity .16s var(--ease);
}
.fForm .form-item input:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* Textarea */
.fForm .form-item textarea { min-height: 92px; resize: vertical; }
.fForm .form-item textarea.exp-tall { min-height: 118px; }

/* Checkbox / radio are the one exception - they stay their own size */
.fForm .form-item input[type="checkbox"],
.fForm .form-item input[type="radio"] {
  width: 17px !important;
  height: 17px;
  min-height: 0;
  margin: 0 9px 0 0;
  padding: 0;
  accent-color: var(--flare);
  vertical-align: -3px;
  cursor: pointer;
}

.fForm input::placeholder, .fForm textarea::placeholder { color: var(--slate-light); }
.fForm .form-item input:hover, .fForm .form-item textarea:hover, .fForm .form-item select:hover { border-color: #B5AACB; }

.fForm .form-item input:focus,
.fForm .form-item textarea:focus,
.fForm .form-item select:focus {
  outline: none;
  background-color: var(--surface);
  border-color: var(--flare-bright);
  box-shadow: 0 0 0 3px rgba(232,33,91,.16);
}

.fForm input.exp-code { font-family: var(--mono); letter-spacing: .02em; }

/* --- Hint / counter / error --- */
.exp-hint { margin: 7px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--slate); }

/* The hint your upload script inserts after a file input */
.fForm .form-item .hint {
  display: block;
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--slate);
}
.fForm .form-item .hint-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--green-tint);
  box-shadow: inset 0 0 0 1px rgba(14,122,85,.22);
}
.fForm .form-item .hint-button::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.fForm .form-item .hint-button a {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--green);
}
.fForm .form-item .hint-button a:hover { color: #0A5C40; text-decoration: underline; }
.exp-counter { margin: 6px 0 0; text-align: right; font-family: var(--mono); font-size: 11px; color: var(--slate-light); }
.exp-counter.is-over { color: var(--flare-deep); }

.exp-error { display: none; margin: 7px 0 0; font-size: 12.5px; font-weight: 500; color: var(--red); }
.form-item.has-error .exp-error { display: block; }
.form-item.has-error .exp-hint { display: none; }
.form-item.has-error input,
.form-item.has-error select,
.form-item.has-error textarea { border-color: var(--red); background-color: var(--red-tint); }
.form-item.has-error input:focus,
.form-item.has-error textarea:focus { box-shadow: 0 0 0 3px rgba(192,38,28,.13); }

/* --- Action bar --- */
.fForm .form-item-type-buttons,
.fForm .buttons {
  position: sticky;
  bottom: 0;
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 16px 32px !important;
  margin: 8px 0 0 !important;
  background: rgba(255,255,255,.93);
  backdrop-filter: saturate(1.5) blur(10px);
  -webkit-backdrop-filter: saturate(1.5) blur(10px);
  border-top: 1px solid var(--line);
  z-index: 5;
}
.exp-save-note { font-size: 12.5px; color: var(--slate); margin: 0 auto 0 0; }

.fForm input[type="submit"] {
  order: 2;
  width: auto !important;
  min-height: 0;
  padding: 12px 28px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--flare);
  color: #fff;
  font-family: var(--body);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(232,33,91,.85);
  transition: transform .12s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.fForm input[type="submit"]:hover { background: var(--flare-bright); box-shadow: 0 14px 28px -12px rgba(232,33,91,.95); }
.fForm input[type="submit"]:active { transform: translateY(1px); }

#f-messages:not(:empty) {
  padding: 14px 18px;
  margin-bottom: 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  border-left: 3px solid var(--flare);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   6. Forms rail
   ========================================================================== */

.fRegion.exp-layout > .f-module-pages-menu {
  position: sticky;
  top: calc(var(--header-h) + 18px);
  align-self: start;
  max-height: calc(100vh - var(--header-h) - 36px);
  overflow: auto;
  scrollbar-width: none;
}
.fRegion.exp-layout > .f-module-pages-menu::-webkit-scrollbar { display: none; }
.exp-scrolled .fRegion.exp-layout > .f-module-pages-menu { top: 68px; }

.exp-rail {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.exp-rail-head { padding: 16px 20px 15px; background: var(--ink); color: #fff; }
.exp-rail-title {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 4px;
}
.exp-rail-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: rgba(255,255,255,.55); }
.exp-progress { margin-top: 13px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.16); overflow: hidden; }
.exp-progress span {
  display: block; height: 100%; width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--flare), var(--flare-bright));
  transition: width 1.1s var(--ease);
}

.exp-rail-scroll { position: relative; }
.exp-rail-scroll::after { display: none; }

/* The list is no longer its own scroll area - a nested scroller both
   truncated the rail and trapped the mouse wheel. The sticky column below
   scrolls instead, so the rail runs as tall as the viewport allows. */
nav[aria-label="Forms Menu"] .fMenu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: none;
  overflow: visible;
}
nav[aria-label="Forms Menu"] .menu-item + .menu-item { border-top: 1px solid var(--line); }

nav[aria-label="Forms Menu"] .menu-item > a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 11px 18px;
  color: var(--ink);
  transition: background .16s var(--ease);
}
nav[aria-label="Forms Menu"] .menu-item > a:hover { background: var(--surface-sunk); }
nav[aria-label="Forms Menu"] .menu-item-icon { display: none; }

.exp-plate {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--canvas);
  border: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--slate);
  transition: all .18s var(--ease);
}
.exp-item-body { min-width: 0; }
.exp-item-title { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; margin-bottom: 4px; }
.exp-item-title:last-child { margin-bottom: 0; }
nav[aria-label="Forms Menu"] .menu-item > a.exp-no-plate { grid-template-columns: minmax(0, 1fr); }
.exp-item-meta {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--slate-light);
}
.exp-status { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 4px; font-weight: 500; }
.exp-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.is-filed    .exp-status,
.is-complete .exp-status { background: var(--emerald-tint); color: var(--emerald-ink); }
.is-partial  .exp-status { background: var(--amber-tint);   color: var(--amber-ink); }
.is-due      .exp-status { background: var(--amber-tint);   color: var(--amber-ink); }
.is-empty    .exp-status,
.is-open     .exp-status { background: var(--canvas);       color: var(--slate); }
.is-overdue  .exp-status { background: var(--red-tint);     color: var(--red); }

/* the dot carries the pure value, the label the darkened one */
.is-filed .exp-status::before,
.is-complete .exp-status::before { background: var(--emerald); }
.is-partial .exp-status::before,
.is-due .exp-status::before { background: var(--amber); }

/* the dot fills in as the form fills in */
.is-empty .exp-status::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

.is-filed .exp-plate,
.is-complete .exp-plate { background: var(--emerald-tint); border-color: rgba(16,185,129,.4); color: var(--emerald-ink); }
.is-partial .exp-plate,
.is-due .exp-plate      { background: var(--amber-tint); border-color: rgba(245,158,11,.45); color: var(--amber-ink); }

/* a status change should be visible without being loud */
.exp-status, .exp-plate { transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }

nav[aria-label="Forms Menu"] .menu-item.selected > a {
  background: var(--flare-tint);
  box-shadow: inset 3px 0 0 var(--flare);
}
nav[aria-label="Forms Menu"] .menu-item.selected .exp-plate {
  background: var(--flare); border-color: var(--flare); color: #fff;
  box-shadow: 0 8px 18px -9px rgba(232,33,91,.85);
}
nav[aria-label="Forms Menu"] .menu-item.selected .exp-item-title { color: var(--flare-deep); }

.exp-rail-foot {
  position: relative;
  z-index: 1;
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-sunk);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--slate);
}
.exp-rail-foot a { font-weight: 600; word-break: break-word; }

.exp-rail-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border: 0;
  background: var(--surface);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.exp-rail-toggle span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--flare-deep);
}

/* --- Key dates --- */
.exp-dates {
  margin-top: 16px;
  padding: 18px 20px 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.exp-dates h2 {
  font-size: 12.5px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink); margin: 0 0 14px;
}
.exp-dates ol { list-style: none; margin: 0; padding: 0; }
.exp-dates li { position: relative; padding: 0 0 16px 22px; margin-left: 4px; border-left: 1px solid var(--line); }
.exp-dates li:last-child { border-left-color: transparent; padding-bottom: 14px; }
.exp-dates li::before {
  content: "";
  position: absolute; left: -5px; top: 4px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line-strong);
}
.exp-dates li.is-next::before { border-color: var(--flare); background: var(--flare); box-shadow: 0 0 0 3px var(--flare-tint); }
.exp-date-when {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--flare-deep); margin-bottom: 2px;
}
.exp-date-what { font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }

/* ==========================================================================
   7. Footer region
   The footer itself is a widget (sections/12-footer.html). This just clears
   the template's own shell so the widget controls its own background,
   width and padding.
   ========================================================================== */

#fFooter {
  background: none;
  padding: 0;
  color: inherit;
}
#fFooter .container {
  max-width: none;
  padding: 0;
}

/* ==========================================================================
   8. Scroll to top
   ========================================================================== */

#nav-up.nav-up {
  position: fixed; right: 24px; bottom: 24px; z-index: 900;
  width: 44px; height: 44px;
  display: grid !important; place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), background .18s var(--ease);
  animation: none !important;
}
.exp-scrolled #nav-up.nav-up { opacity: 1; transform: none; pointer-events: auto; }
#nav-up.nav-up:hover { background: var(--flare); color: #fff; border-color: var(--flare); }

/* ==========================================================================
   9. Motion
   ========================================================================== */

@keyframes exp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.exp-anim { animation: exp-rise .5s var(--ease) both; }
.exp-anim-1 { animation-delay: .05s; }
.exp-anim-2 { animation-delay: .13s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   10. Responsive
   ========================================================================== */

@media (max-width: 1240px) {
  :root { --rail-w: 318px; --gutter: 22px; }
  .exp-section { padding-left: 24px; padding-right: 24px; }
  .fForm .form-item-type-buttons, .fForm .buttons { padding-left: 24px !important; padding-right: 24px !important; }
  .exp-head-status { display: none; }
  .exp-hero-plate { width: 72px; height: 72px; font-size: 36px; }
}

@media (max-width: 991px) {
  .fRegion[data-fphp-region^="page-"]:has(.f-module-user-form):has(.f-module-pages-menu),
  .fRegion.exp-layout { grid-template-columns: minmax(0,1fr); }
  .fRegion.exp-layout > .f-module-user-form { grid-column: 1; grid-row: 2; }
  .fRegion.exp-layout > .f-module-pages-menu { grid-column: 1; grid-row: 1; position: static; margin-bottom: 4px; }

  .exp-rail-toggle { display: flex; }
  .exp-rail .exp-rail-head,
  .exp-rail .exp-rail-scroll,
  .exp-rail .exp-rail-foot { display: none; }
  .exp-rail.is-open .exp-rail-head,
  .exp-rail.is-open .exp-rail-scroll,
  .exp-rail.is-open .exp-rail-foot { display: block; }
  .exp-rail.is-open .exp-rail-toggle { border-bottom: 1px solid var(--line); }
  nav[aria-label="Forms Menu"] .fMenu { max-height: none; }
  .fRegion.exp-layout > .f-module-pages-menu { max-height: none; overflow: visible; }
  .exp-dates { display: none; }

  /* the mobile menu is handled in section 26 */
}

@media (max-width: 700px) {
  :root { --header-h: 54px; }
  body { background-size: 32px 32px; }
  .fHeader .navbar-header > .wrap { padding: 0 16px; }
  .fPageTitle { padding: 28px 0 32px; margin-bottom: 18px; }
  .exp-hero { gap: 14px; flex-wrap: wrap; }
  .exp-hero.is-center .exp-hero-plate { width: 48px; height: 48px; font-size: 24px; border-radius: 8px; }
  .exp-hero.is-left .exp-hero-plate { order: -1; margin-left: 0; width: 46px; height: 46px; font-size: 23px; border-radius: 8px; }
  .exp-hero-body { min-width: 0; flex: 1 1 100%; }
  .exp-head-title { font-size: 10.5px; letter-spacing: .1em; }
  .exp-head-title::before { display: none; }
  .exp-section { padding: 22px 16px 6px; }
  .exp-section:first-of-type { padding-top: 24px; }
  .exp-section-head { flex-wrap: wrap; }
  .exp-section-note { margin-left: 0; text-align: left; width: 100%; }
  .exp-section-body,
  .exp-section-body[data-layout="single"] { grid-template-columns: minmax(0,1fr); }
  .fForm .form-item-type-buttons, .fForm .buttons { padding: 14px 16px !important; flex-wrap: wrap; }
  .exp-save-note { width: 100%; margin: 0 0 8px; }
  .fForm input[type="submit"] { width: 100% !important; }
  #nav-up.nav-up { right: 14px; bottom: 14px; }
}

/* ==========================================================================
   11. Print
   ========================================================================== */

@media print {
  body { background: #fff; }
  .fHeader, #fFooter, #nav-up, .f-module-pages-menu, .fForm .buttons { display: none !important; }
  .fPageTitle { background: #fff; color: #000; padding: 0 0 16px; }
  .fPageTitle h1, .exp-hero-note, .exp-eyebrow { color: #000; }
  .f-module-user-form .fModuleContent { border: 0; box-shadow: none; }
}

/* ==========================================================================
   12. Status tags - reusable outside the forms rail
   For floorplans, stand lists, revenue tables, toasts.

   <span class="exp-tag exp-tag--available">Available</span>
   <span class="exp-tag exp-tag--reserved">Reserved - 12:04 left</span>
   <span class="exp-tag exp-tag--sold">Sold</span>
   ========================================================================== */

.exp-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.exp-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.exp-tag--available { background: var(--emerald-tint); color: var(--emerald-ink); }
.exp-tag--available::before { background: var(--emerald); }

.exp-tag--reserved  { background: var(--amber-tint); color: var(--amber-ink); }
.exp-tag--reserved::before { background: var(--amber); }

.exp-tag--sold      { background: var(--canvas); color: var(--slate); }
.exp-tag--sold::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

.exp-tag--overdue   { background: var(--red-tint); color: var(--red); }

/* Floorplan stand fills - apply to SVG paths or grid cells */
.exp-stand--available { fill: var(--emerald); background: var(--emerald); }
.exp-stand--available:hover { fill: #0EA372; background: #0EA372; cursor: pointer; }
.exp-stand--reserved  { fill: var(--amber); background: var(--amber); }
.exp-stand--sold      { fill: #C9C2D8; background: #C9C2D8; cursor: not-allowed; }
.exp-stand--mine      { fill: var(--flare); background: var(--flare); }

/* Money figures: confirmed vs pending */
.exp-figure { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.exp-figure--confirmed { color: var(--emerald-ink); }
.exp-figure--pending   { color: var(--amber-ink); }
.exp-figure-note {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-light);
  margin-top: 6px;
}

/* Toasts */
.exp-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--slate-light);
  box-shadow: var(--shadow-md);
  font-size: 14px;
}
.exp-toast--success { border-left-color: var(--emerald); }
.exp-toast--pending { border-left-color: var(--amber); }
.exp-toast--error   { border-left-color: var(--red); }

/* ==========================================================================
   13. Prehead - the thin utility row above the header
   Add class "prehead" to the CMS widget. Markup inside it uses
   .prehead-left and .prehead-social (see header-utility-row.html).

   Optional modifiers on the same element:
     prehead--bleed           run edge to edge out of a centred container
     prehead--hide-on-scroll  collapse once the page scrolls
     prehead--light           pale row instead of dark
   ========================================================================== */

.prehead {
  background: var(--ink);
  color: rgba(255,255,255,.7);
  font-family: var(--body);
  font-size: 12.5px;
  line-height: 1.5;
  position: relative;
  z-index: 1001;
}

/* only needed if the widget sits inside a fixed-width container */
.prehead--bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.prehead-inner {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.prehead ul { list-style: none; margin: 0; padding: 0; }
.prehead li { margin: 0; padding: 0; background: none; }

.prehead a {
  color: rgba(255,255,255,.74);
  text-decoration: none;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.prehead a:hover { color: #fff; text-decoration: none; }

/* --- left: contact details --- */
.prehead-left {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  min-width: 0;
}
.prehead-left li {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.prehead-left svg {
  width: 14px;
  height: 14px;
  flex: none;
  opacity: .65;
}
.prehead-left li:hover svg { opacity: 1; }

/* --- right: social icons --- */
.prehead-social {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.prehead-social a {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.09);
  color: rgba(255,255,255,.8);
}
.prehead-social svg { width: 14px; height: 14px; display: block; }
.prehead-social a:hover { background: var(--flare); color: #fff; }

/* --- optional: collapse once scrolled (needs the portal JS) --- */
.prehead--hide-on-scroll {
  overflow: hidden;
  max-height: 60px;
  transition: max-height .25s var(--ease), opacity .2s var(--ease);
}
.exp-scrolled .prehead--hide-on-scroll { max-height: 0; opacity: 0; }

/* --- optional: pale variant --- */
.prehead--light {
  background: var(--canvas);
  color: var(--slate);
  border-bottom: 1px solid var(--line);
}
.prehead--light a { color: var(--slate); }
.prehead--light a:hover { color: var(--flare); }
.prehead--light .prehead-social a { background: rgba(26,16,64,.06); color: var(--ink-soft); }
.prehead--light .prehead-social a:hover { background: var(--flare); color: #fff; }

/* --- responsive --- */
@media (max-width: 860px) {
  .prehead-left { gap: 18px; }
  .prehead-inner { padding: 6px 20px; }
}

@media (max-width: 620px) {
  .prehead-inner {
    justify-content: center;
    padding: 8px 16px;
    gap: 10px;
  }
  .prehead-left {
    justify-content: center;
    gap: 14px;
    font-size: 11.5px;
  }
  .prehead-social { display: none; }
  .exp-scrolled .prehead--hide-on-scroll { max-height: 0; }
}

/* --- prehead inside the template header region ---------------------------
   The widget renders as .fModule.prehead inside .navbar-header > .wrap,
   which is otherwise a fixed-height flex row. Neutralise that shell. */
.fHeader:has(.prehead) {
  background: none;
  border-bottom: 0;
  box-shadow: none;
}
.fHeader:has(.prehead) .navbar-header > .wrap {
  display: block;
  max-width: none;
  padding: 0;
  height: auto;
  min-height: 0;
}
.fHeader:has(.prehead) .fheaderToptwo { display: none; }
.fHeader:has(.prehead) .exp-head-title,
.fHeader:has(.prehead) .exp-spacer,
.fHeader:has(.prehead) .exp-nav-toggle { display: none; }
.prehead .f-module-content,
.prehead .fModuleContent { padding: 0; margin: 0; }

/* --- aliases for the earlier class names ---------------------------------
   Keeps an older paste working. Safe to ignore if your markup already uses
   prehead-inner / prehead-left / prehead-social. */
.sx-utility { background: var(--ink); color: rgba(255,255,255,.7); font-size: 12.5px; }
.sx-utility-inner {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.prehead .sx-utility { background: none; }
.sx-util-left,
.sx-util-social { list-style: none; margin: 0; padding: 0; }
.sx-util-left { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; min-width: 0; }
.sx-util-left li { display: flex; align-items: center; gap: 8px; white-space: nowrap; margin: 0; }
.sx-util-left svg { width: 14px; height: 14px; flex: none; opacity: .65; }
.sx-util-left li:hover svg { opacity: 1; }
.sx-util-social { display: flex; align-items: center; gap: 6px; flex: none; }
.sx-util-social li { margin: 0; }
.sx-util-social a {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.09);
  color: rgba(255,255,255,.8);
}
.sx-util-social svg { width: 14px; height: 14px; display: block; }
.sx-util-social a:hover { background: var(--flare); color: #fff; }
.sx-utility a { color: rgba(255,255,255,.74); text-decoration: none; transition: color .18s var(--ease); }
.sx-utility a:hover { color: #fff; }

@media (max-width: 620px) {
  .sx-utility-inner { justify-content: center; padding: 8px 16px; gap: 10px; }
  .sx-util-left { justify-content: center; gap: 14px; font-size: 11.5px; }
  .sx-util-social { display: none; }
}

/* ==========================================================================
   14. Mainnav - the menu widget below the prehead
   Add class "mainnav" to the navigation widget.
   Optional modifiers: mainnav--center, mainnav--right
   ========================================================================== */

.mainnav {
  background:
    linear-gradient(112deg, rgba(232,33,91,.9) 0 24%, rgba(232,33,91,0) 58%),
    linear-gradient(100deg, var(--royal-deep) 0%, var(--royal-dark) 55%, var(--royal) 100%);
  border-bottom: 1px solid rgba(255,255,255,.14);
  position: relative;
  z-index: 1000;
}
.mainnav .f-module-content,
.mainnav .fModuleContent {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 24px;
}
.mainnav nav { width: 100%; }

.mainnav .fMenu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 62px;
  justify-content: flex-end;
}
.mainnav--center .fMenu { justify-content: center; }
.mainnav--left   .fMenu { justify-content: flex-start; }

.mainnav .menu-item { margin: 0; padding: 0; background: none; position: relative; }
.mainnav .menu-item-icon { display: none; }

.mainnav .menu-item > a {
  display: block;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.mainnav .menu-item > a:hover { background: rgba(255,255,255,.14); color: #fff; }
.mainnav .menu-item.selected > a,
.mainnav .menu-item.active > a {
  background: rgba(255,255,255,.18);
  color: #fff;
  font-weight: 600;
}

/* --- dropdowns, if your menu nests a second level --- */
.mainnav .menu-item ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  z-index: 20;
}
.mainnav .menu-item:hover > ul,
.mainnav .menu-item:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.mainnav .menu-item ul .menu-item > a {
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 14px;
  white-space: normal;
}
.mainnav .menu-item ul .menu-item > a:hover { background: var(--flare-tint); color: var(--flare-deep); }

/* mobile behaviour lives in section 26 */

/* ==========================================================================
   15. Sticky header - prehead + mainnav travel together
   position:sticky fails if ANY ancestor has overflow hidden/auto/scroll,
   so those are cleared on the whole chain up to <body>.
   ========================================================================== */

html, body { overflow-x: clip; }

.container-mobile,
.fHeader,
.fHeader .navbar-header,
.fHeader .navbar-header > .wrap,
.fHeader .region-header { overflow: visible; }

.fHeader {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* the two widgets are inside the sticky header, so both travel with it */
.prehead,
.mainnav { position: relative; }

/* keep the prehead visible while stuck - drop the modifier from the widget
   markup, or override it here */
.prehead--stay,
.exp-scrolled .prehead--stay { max-height: none; opacity: 1; }

/* ==========================================================================
   16. Menu item classes - add these to individual items in the CMS
   ========================================================================== */

/* nav-push
   Put this on the FIRST item you want on the right. That item and everything
   after it move right; everything before it stays left. Use it on the first
   link if you want the whole menu right, or mid-menu to split the bar. */
.mainnav .menu-item.nav-push { margin-left: auto; }

/* nav-cta - filled magenta pill. For Register / Buy ticket. */
.mainnav .menu-item.nav-cta > a {
  background: var(--flare);
  color: #fff;
  font-weight: 600;
  padding: 11px 24px;
  margin-left: 8px;
  box-shadow: 0 10px 22px -12px rgba(232,33,91,.9);
}
.mainnav .menu-item.nav-cta > a:hover {
  background: var(--flare-bright);
  color: #fff;
  transform: translateY(-1px);
}

/* nav-cta-ghost - outlined pill. For the secondary action, e.g. Exhibit. */
.mainnav .menu-item.nav-cta-ghost > a {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
  color: #fff;
  font-weight: 600;
  padding: 11px 22px;
  margin-left: 8px;
}
.mainnav .menu-item.nav-cta-ghost > a:hover {
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}

/* nav-quiet - de-emphasised, for Login / account links */
.mainnav .menu-item.nav-quiet > a {
  color: rgba(255,255,255,.66);
  font-size: 13.5px;
  padding: 10px 12px;
}
.mainnav .menu-item.nav-quiet > a:hover { background: none; color: #fff; }

/* nav-logo - the brand item, sits left and stays biggest */
.mainnav .menu-item.nav-logo { margin-right: auto; }
.mainnav .menu-item.nav-logo > a {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.01em;
  color: #fff;
  padding: 8px 4px;
  border-radius: 8px;
}
.mainnav .menu-item.nav-logo > a:hover { background: none; }
.mainnav .menu-item.nav-logo img { max-height: 42px; width: auto; display: block; }

/* nav-divider - hairline before the item, to group account links off */
.mainnav .menu-item.nav-divider {
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.22);
}

.mainnav .menu-item > a { transition: background .18s var(--ease), color .18s var(--ease), transform .15s var(--ease), box-shadow .18s var(--ease); }

@media (max-width: 860px) {
  .mainnav .menu-item.nav-push { margin-left: 0; }
  .mainnav .menu-item.nav-logo { margin-right: 8px; }
  .mainnav .menu-item.nav-cta > a,
  .mainnav .menu-item.nav-cta-ghost > a { margin-left: 4px; padding: 9px 16px; }
  .mainnav .menu-item.nav-divider { margin-left: 4px; padding-left: 8px; }
}

/* ==========================================================================
   17. Page sections - the widget design system
   Add class "xhs" to any content widget, then paste one of the section
   markup files inside it. Tokens alias the portal palette, so changing a
   colour at the top of this file changes both the portal and the pages.
   ========================================================================== */

:root {
  --brand:        var(--flare);
  --brand-bright: var(--flare-bright);
  --brand-deep:   var(--flare-deep);
  --brand-tint:   var(--flare-tint);
  --violet:       var(--royal);
  --violet-dark:  var(--royal-dark);
  --violet-deep:  var(--royal-deep);
  --violet-tint:  var(--royal-tint);
  --grad:  linear-gradient(112deg, var(--royal-deep) 0%, var(--royal-dark) 44%, var(--royal) 100%);
  --grad2: linear-gradient(100deg, var(--flare) 0%, #B31C6E 50%, var(--royal) 100%);
  --xshadow: 0 18px 46px -24px rgba(26,16,64,.42), 0 2px 6px rgba(26,16,64,.05);
}

/* --- the widget shell: full bleed out of the template container --- */
.xhs {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: clip;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: left;
}
/* scoped to the CONTENT area - the footer widget also carries .xhs, and it
   must not strip the container on ordinary pages */
body:has(#fMatter .xhs) #fContent > .container { max-width: none !important; padding: 0 !important; }
body:has(#fMatter .xhs) #fMatter { padding: 0 !important; }
/* the hero replaces the page title band */
body:has(.xh-hero) .fPageTitle { display: none !important; }

.xhs *, .xhs *::before, .xhs *::after { box-sizing: border-box; }
.xhs h1, .xhs h2, .xhs h3, .xhs h4 {
  font-family: var(--display); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.08;
  color: var(--ink); margin: 0; padding: 0;
  text-transform: none; background: none;
}
.xhs p { margin: 0; padding: 0; }
.xhs ul, .xhs ol { margin: 0; padding: 0; list-style: none; }
.xhs li { margin: 0; padding: 0; background: none; }
.xhs img { max-width: 100%; display: block; }
.xhs a { color: var(--brand); text-decoration: none; background: none; }
.xhs blockquote { margin: 0; padding: 0; border: 0; }
.xhs dl, .xhs dd { margin: 0; }
.xhs input, .xhs button { font-family: var(--body); }

.xh-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.xh-section { padding: 96px 0; }
.xh-section.is-tight { padding: 72px 0; }
.xh-section.is-canvas { background: var(--canvas); }

/* --- shared --- */
.xh-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 16px;
}
.xh-eyebrow::before { content: ""; width: 20px; height: 2px; background: var(--brand); border-radius: 2px; }

.xh-head { max-width: 640px; margin-bottom: 52px; }
.xh-head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.xh-head.is-center .xh-eyebrow::before { display: none; }
.xh-head h2 { font-size: clamp(30px, 4vw, 46px); }
.xh-head h2 em { font-style: normal; color: var(--brand); }
.xh-head p { margin-top: 18px; font-size: 17px; color: var(--slate); }

.xhs a.xh-btn, .xhs button.xh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border: 0; border-radius: 999px;
  font-family: var(--body); font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.xhs a.xh-btn svg, .xhs button.xh-btn svg { width: 16px; height: 16px; flex: none; }
.xhs a.xh-btn-primary, .xhs button.xh-btn-primary {
  background: var(--brand); color: #fff; box-shadow: 0 14px 30px -14px rgba(232,33,91,.9);
}
.xhs a.xh-btn-primary:hover, .xhs button.xh-btn-primary:hover {
  background: var(--brand-bright); color: #fff; transform: translateY(-2px);
}
.xhs a.xh-btn-ghost {
  background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
.xhs a.xh-btn-ghost:hover { background: rgba(255,255,255,.22); color: #fff; transform: translateY(-2px); }
.xhs a.xh-btn-dark { background: var(--violet); color: #fff; box-shadow: 0 14px 30px -14px rgba(91,33,168,.8); }
.xhs a.xh-btn-dark:hover { background: var(--violet-dark); color: #fff; transform: translateY(-2px); }
.xhs a.xh-btn-soft { background: var(--canvas); color: var(--ink); }
.xhs a.xh-btn-soft:hover { background: var(--violet-tint); color: var(--violet); transform: translateY(-2px); }

/* button rows get their own breathing room */
.xh-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }

.xh-photo {
  position: relative;
  background-color: var(--violet-dark);
  background-image: var(--img, linear-gradient(140deg, #4B1A8F, #E8215B));
  background-size: cover; background-position: center;
  border-radius: 18px; overflow: hidden;
}

.xh-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.xh-reveal.is-in { opacity: 1; transform: none; }

/* --- hero --- */
.xh-hero {
  position: relative; display: flex; align-items: center;
  background-color: var(--violet-dark);
  background-image: var(--img, none);
  background-size: cover; background-position: center; overflow: hidden;
}
.xh-hero::before { content: ""; position: absolute; inset: 0; background: var(--grad); opacity: .9; }
.xh-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(118deg, rgba(232,33,91,.5) 0 30%, rgba(232,33,91,0) 62%),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 12px, transparent 12px 36px);
}
.xh-hero .xh-wrap { position: relative; z-index: 2; padding-top: 56px; padding-bottom: 76px; }
.xh-hero-inner { max-width: 760px; color: #fff; }
.xh-hero .xh-eyebrow { color: rgba(255,255,255,.9); margin-bottom: 14px; }
.xh-hero .xh-eyebrow::before { background: var(--brand-bright); }
.xhs .xh-hero h1 {
  font-size: clamp(38px, 5.6vw, 68px); font-weight: 900; color: #fff;
  margin-bottom: 22px; overflow-wrap: break-word;
}
.xhs .xh-hero h1 em { font-style: normal; color: var(--brand-bright); }
.xh-hero-sub { font-size: 18px; color: rgba(255,255,255,.84); max-width: 56ch; }
.xh-hero .xh-actions { margin-top: 34px; }

.xh-count { display: flex; gap: 10px; margin-top: 40px; flex-wrap: wrap; }
.xh-count div {
  min-width: 78px; padding: 13px 15px; border-radius: 12px; text-align: center;
  background: rgba(245,158,11,.16); box-shadow: inset 0 0 0 1px rgba(245,158,11,.45);
}
.xh-count b { display: block; font-family: var(--display); font-size: 26px; font-weight: 800; color: #FFD98A; line-height: 1; }
.xh-count span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }

.xh-hero-facts {
  display: flex; flex-wrap: wrap;
  margin-top: 88px; padding-top: 34px;
  border-top: 1px solid rgba(255,255,255,.24);
}
.xh-hero-facts li { padding-right: 44px; margin-right: 44px; border-right: 1px solid rgba(255,255,255,.2); }
.xh-hero-facts li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.xh-fact-k { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-bottom: 6px; }
.xh-fact-v { font-family: var(--display); font-weight: 700; font-size: 19px; color: #fff; }

/* --- stats --- */
.xh-stats { background: transparent; margin-top: -60px; position: relative; z-index: 5; }
.xh-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-radius: 20px; box-shadow: var(--xshadow); overflow: hidden; }
.xh-stat { padding: 36px 24px; text-align: center; border-right: 1px solid var(--line); }
.xh-stat:last-child { border-right: 0; }
.xh-stat b { display: block; font-family: var(--display); font-size: 42px; font-weight: 800; line-height: 1; margin-bottom: 10px; color: var(--brand); }
.xh-stat.is-confirmed b { color: var(--emerald-ink); }
.xh-stat.is-live b { color: var(--amber-ink); }
.xh-stat span { font-size: 14px; color: var(--slate); }

/* --- about --- */
.xh-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.xh-media-stack { position: relative; }
.xh-media-stack .xh-photo:first-of-type { aspect-ratio: 4/3; }
.xh-media-stack .xh-photo:last-of-type {
  position: absolute; right: -26px; bottom: -36px;
  width: 46%; aspect-ratio: 1/1; border: 6px solid #fff;
  --img: linear-gradient(140deg, #E8215B, #5B21A8);
}
.xh-badge {
  position: absolute; left: -20px; top: 26px; padding: 16px 20px; border-radius: 14px;
  background: var(--brand); color: #fff; box-shadow: 0 18px 36px -18px rgba(232,33,91,.9);
}
.xh-badge b { display: block; font-family: var(--display); font-size: 28px; font-weight: 800; line-height: 1; }
.xh-badge span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .92; }

.xh-lead { margin-top: 18px; font-size: 17px; color: var(--slate); }
.xh-check { margin: 30px 0 0; display: grid; gap: 14px; }
.xh-check li { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.xh-check li::before {
  content: ""; flex: none; margin-top: 5px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--emerald-tint); box-shadow: inset 0 0 0 2px var(--emerald);
}

/* --- cards --- */
.xh-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.xh-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.xh-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

.xh-card {
  padding: 34px 30px 32px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 18px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.xh-card:hover { transform: translateY(-6px); box-shadow: var(--xshadow); border-color: transparent; }
.xh-card-icon {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: var(--violet-tint); color: var(--violet); margin-bottom: 22px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.xh-card-icon svg { width: 26px; height: 26px; }
.xh-card:hover .xh-card-icon { background: var(--brand); color: #fff; }
.xh-card-num { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--brand); margin-bottom: 6px; }
.xh-card h3 { font-size: 20px; margin-bottom: 12px; }
.xh-card p { font-size: 14.5px; color: var(--slate); }
.xhs .xh-card-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 20px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand);
  transition: gap .2s var(--ease);
}
.xhs .xh-card-link:hover { gap: 12px; }

/* --- highlights --- */
.xh-highlight { position: relative; min-height: 320px; display: flex; align-items: flex-end; padding: 30px; border-radius: 18px; overflow: hidden; color: #fff; }
.xh-highlight::before {
  content: ""; position: absolute; inset: 0;
  background-color: var(--violet-dark);
  background-image: var(--img, linear-gradient(140deg, #3C1372, #E8215B));
  background-size: cover; background-position: center;
  transition: transform .6s var(--ease);
}
.xh-highlight::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,16,64,.94) 0%, rgba(26,16,64,.38) 55%, transparent 100%); }
.xh-highlight:hover::before { transform: scale(1.06); }
.xh-highlight-body { position: relative; z-index: 2; }
.xhs .xh-highlight h3 { font-size: 22px; color: #fff; margin-bottom: 8px; }
.xh-highlight p { font-size: 14px; color: rgba(255,255,255,.8); }
.xh-highlight-tag { display: inline-block; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; background: var(--brand); font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.xh-highlight.is-wide { grid-column: span 2; }

/* --- marquee --- */
.xh-marquee { overflow: hidden; position: relative; padding: 10px 0; }
.xh-marquee::before, .xh-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; }
.xh-marquee::before { left: 0; background: linear-gradient(to right, var(--canvas), transparent); }
.xh-marquee::after { right: 0; background: linear-gradient(to left, var(--canvas), transparent); }
.xh-marquee-track { display: flex; gap: 18px; width: max-content; animation: xh-slide 38s linear infinite; }
.xh-marquee:hover .xh-marquee-track { animation-play-state: paused; }
@keyframes xh-slide { to { transform: translateX(-50%); } }
.xh-logo-tile { width: 170px; height: 84px; flex: none; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--slate-light); letter-spacing: .04em; }

/* --- speakers --- */
.xh-speaker { text-align: center; }
.xh-speaker .xh-photo { aspect-ratio: 1/1; border-radius: 18px; margin-bottom: 18px; --img: linear-gradient(150deg, #5B21A8, #E8215B); }
.xh-speaker .xh-photo::after { content: attr(data-initials); position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 44px; font-weight: 800; color: rgba(255,255,255,.9); }
.xh-speaker-social { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: center; gap: 8px; padding: 14px; background: linear-gradient(to top, rgba(26,16,64,.88), transparent); transform: translateY(100%); transition: transform .3s var(--ease); }
.xh-speaker:hover .xh-speaker-social { transform: none; }
.xhs .xh-speaker-social a { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--violet); font-size: 11px; font-weight: 700; }
.xh-speaker h3 { font-size: 17px; margin-bottom: 4px; }
.xh-speaker > span { font-size: 13.5px; color: var(--slate); }

/* --- schedule --- */
.xh-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 34px; justify-content: center; }
.xh-tab { padding: 12px 24px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--slate); transition: all .2s var(--ease); }
.xh-tab b { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; font-weight: 500; opacity: .7; }
.xh-tab:hover { border-color: var(--brand); color: var(--brand); }
.xh-tab.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.xh-day { display: none; }
.xh-day.is-active { display: block; }
.xh-slot { display: grid; grid-template-columns: 150px 1fr auto; gap: 26px; align-items: center; padding: 22px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.xh-slot:hover { border-color: var(--brand); transform: translateX(4px); }
.xh-slot-time { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--brand); }
.xh-slot h3 { font-size: 18px; margin-bottom: 5px; }
.xh-slot p { font-size: 14px; color: var(--slate); }
.xh-slot-where { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-light); white-space: nowrap; }

/* --- venue --- */
.xh-venue { display: grid; grid-template-columns: 380px 1fr; border-radius: 20px; overflow: hidden; box-shadow: var(--xshadow); }
.xh-venue-info { padding: 46px 40px; background: var(--grad2); color: #fff; }
.xhs .xh-venue-info h3 { color: #fff; font-size: 24px; margin-bottom: 26px; }
.xh-venue-info dt { font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 5px; }
.xh-venue-info dd { margin: 0 0 24px; font-size: 15.5px; color: #fff; }
.xhs .xh-venue-info dd a { color: #fff; text-decoration: underline; }
.xh-venue-map { min-height: 440px; background: var(--canvas); }
.xh-venue-map iframe { width: 100%; height: 100%; min-height: 440px; border: 0; display: block; }

/* --- testimonials --- */
.xh-quote { position: relative; padding: 34px 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.xh-quote::before { content: "\201C"; position: absolute; top: 8px; right: 26px; font-family: var(--display); font-size: 84px; font-weight: 800; color: var(--brand); opacity: .14; line-height: 1; }
.xh-quote p { font-size: 16px; color: var(--ink-soft); }
.xh-stars { color: var(--amber); font-size: 13px; letter-spacing: 2px; margin-bottom: 16px; }
.xh-quote-by { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.xh-avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--grad2); color: #fff; font-family: var(--display); font-weight: 700; font-size: 16px; }
.xh-quote-by b { display: block; font-size: 14.5px; color: var(--ink); }
.xh-quote-by span { font-size: 13px; color: var(--slate); }

/* --- CTA --- */
.xh-cta { position: relative; overflow: hidden; background: var(--grad2); color: #fff; padding: 76px 0; }
.xh-cta::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 12px, transparent 12px 36px); }
.xh-cta .xh-wrap { position: relative; z-index: 2; display: flex; align-items: center; gap: 44px; flex-wrap: wrap; }
.xh-cta-body { flex: 1; min-width: 300px; }
.xhs .xh-cta h2 { color: #fff; font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 14px; }
.xh-cta p { color: rgba(255,255,255,.86); max-width: 52ch; }
.xh-cta .xh-actions { margin-top: 0; }
.xhs .xh-cta a.xh-btn-primary { background: #fff; color: var(--brand-deep); box-shadow: 0 14px 30px -14px rgba(0,0,0,.5); }
.xhs .xh-cta a.xh-btn-primary:hover { background: var(--brand-tint); color: var(--brand-deep); }
.xh-availability { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 6px 14px; border-radius: 999px; background: rgba(16,185,129,.2); box-shadow: inset 0 0 0 1px rgba(16,185,129,.55); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #7BEFC4; }
.xh-availability::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); }

/* --- footer --- */
.xh-footer { background: var(--ink); color: rgba(255,255,255,.6); padding: 72px 0 0; }
.xh-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 44px; padding-bottom: 52px; }
.xhs .xh-footer h4 { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 22px; }
.xh-footer p { font-size: 14.5px; }
.xh-footer li { margin-bottom: 12px; }
.xhs .xh-footer a { color: rgba(255,255,255,.64); font-size: 14.5px; }
.xhs .xh-footer a:hover { color: var(--brand-bright); }
.xh-flogo { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.xhs .xh-flogo { color: #fff; font-family: var(--display); font-weight: 800; font-size: 19px; }
.xh-flogo span { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--brand); font-family: var(--mono); font-size: 12.5px; color: #fff; }
.xh-fsocial { display: flex; gap: 8px; margin-top: 22px; }
.xhs .xh-fsocial a { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
.xhs .xh-fsocial a:hover { background: var(--brand); color: #fff; }
.xh-fsocial svg { width: 15px; height: 15px; }
.xh-subscribe { display: flex; gap: 8px; margin-top: 18px; }
.xh-subscribe input { flex: 1; min-width: 0; padding: 13px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07); color: #fff; font-size: 14px; }
.xh-subscribe input::placeholder { color: rgba(255,255,255,.45); }
.xh-subscribe input:focus { outline: none; border-color: var(--brand); background: rgba(255,255,255,.12); }
.xhs .xh-subscribe button.xh-btn { padding: 13px 22px; font-size: 14px; }
.xh-colophon { border-top: 1px solid rgba(255,255,255,.1); padding: 24px 0 30px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: rgba(255,255,255,.44); }

/* --- responsive --- */
@media (max-width: 1080px) {
  .xh-section { padding: 76px 0; }
  .xh-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .xh-split { gap: 44px; }
  .xh-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .xh-venue { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .xh-grid-3, .xh-grid-2, .xh-split { grid-template-columns: 1fr; }
  .xh-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .xh-stat:nth-child(2) { border-right: 0; }
  .xh-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .xh-highlight.is-wide { grid-column: span 1; }
  .xh-slot { grid-template-columns: 1fr; gap: 10px; }
  .xh-media-stack .xh-photo:last-of-type { right: 0; bottom: -24px; width: 40%; }
  .xh-badge { left: 0; }
  .xh-hero-facts { margin-top: 60px; }
}
@media (max-width: 620px) {
  .xh-wrap { padding: 0 18px; }
  .xh-section { padding: 60px 0; }
  .xh-hero .xh-wrap { padding-top: 40px; padding-bottom: 56px; }
  .xh-hero-facts { margin-top: 48px; }
  .xh-hero-facts li { border-right: 0; padding-right: 0; margin: 0 32px 18px 0; }
  .xh-stats-grid { grid-template-columns: 1fr; }
  .xh-stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .xh-stat:last-child { border-bottom: 0; }
  .xh-grid-4 { grid-template-columns: 1fr; }
  .xh-footer-grid { grid-template-columns: 1fr; }
  .xhs a.xh-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .xh-reveal { opacity: 1; transform: none; transition: none; }
  .xh-marquee-track { animation: none; }
}

/* ==========================================================================
   18. Footer hardening + footer navigation widget
   ========================================================================== */

/* The footer region wrapper shouldn't double up on the widget's own padding */
body:has(.xh-footer) #fFooter { background: none; padding: 0; }
body:has(.xh-footer) #fFooter .container { max-width: none; padding: 0; }

/* Any direct child of the footer behaves as the centred wrap, so the layout
   survives if the editor strips a class off an inner div. */
.xh-footer > * {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 28px;
  padding-right: 28px;
}
.xh-footer > .xh-wrap { padding-left: 28px; padding-right: 28px; }
.xh-footer .xh-wrap > * { padding-left: 0; padding-right: 0; }

.xh-fcol { min-width: 0; }
.xh-fcol p { margin-bottom: 0; }
.xh-fcol p + p { margin-top: 14px; }
.xh-footer ul { list-style: none; margin: 0; padding: 0; }

/* Font Awesome social icons */
.xh-fsocial { display: flex; gap: 8px; margin-top: 22px; }
.xh-footer .xh-fsocial a {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.82);
  font-size: 14px;
}
.xh-footer .xh-fsocial a:hover { background: var(--flare); color: #fff; }

/* the styles below repeat section 17 without the .xhs prefix, so the footer
   still renders correctly if the widget loses its class */
.xh-footer h4 { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin: 0 0 22px; }
.xh-footer a { color: rgba(255,255,255,.64); font-size: 14.5px; text-decoration: none; }
.xh-footer a:hover { color: var(--flare-bright); }
.xh-footer .xh-flogo { color: #fff; font-size: 19px; }

/* --------------------------------------------------------------------------
   footnav - a MENU widget placed in the footer.
   Give the navigation widget class "footnav", not "xhs".
   -------------------------------------------------------------------------- */

.footnav { background: var(--ink); }
.footnav .fModuleContent { padding-top: 0; padding-bottom: 0; }
.footnav .f-module-content,
.footnav .fModuleContent {
  width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px;
}
.footnav .fMenu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  list-style: none;
  margin: 0;
  padding: 20px 0;
}
/* hairline only when it follows the main footer, as a bottom bar */
.xhs + .footnav .fMenu { border-top: 1px solid rgba(255,255,255,.1); }
.footnav + .xhs .xh-footer { padding-top: 40px; }
.footnav .menu-item { margin: 0; padding: 0; background: none; }
.footnav .menu-item-icon { display: none; }
.footnav .menu-item > a {
  font-size: 14px;
  color: rgba(255,255,255,.64);
  text-decoration: none;
  transition: color .18s var(--ease);
}
.footnav .menu-item > a:hover,
.footnav .menu-item.selected > a { color: var(--flare-bright); }

@media (max-width: 620px) {
  .xh-footer > * { padding-left: 18px; padding-right: 18px; }
  .footnav .f-module-content, .footnav .fModuleContent { padding: 0 18px; }
  .footnav .fMenu { gap: 4px 18px; }
}

/* ==========================================================================
   19. Account forms - login, register, password reset
   fPHP renders these straight into #fMatter with no module wrapper, so they
   miss the card the exhibitor forms get. This gives them the same treatment.
   ========================================================================== */

#fMatter > form.fForm,
.exp-standalone-main > form.fForm {
  max-width: 880px;
  margin: 0 auto 72px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* narrower forms read better centred and tighter */
#fMatter > form#user-form-login,
#fMatter > form#user-form-forgot { max-width: 520px; }

/* fieldsets are structural here, not visual */
.fForm fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.fForm legend {
  display: block;
  width: 100%;
  padding: 0;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
/* fPHP emits <legend> </legend> - a single space - on unnamed fieldsets */
.fForm legend:not(:has(*)) { display: none; }
.fForm .f-fieldset-body { display: block; }

/* the template's own hint divs are usually empty (content sits in a comment) */
.fForm .form-item > .hint:has(> span:empty) { display: none; }
.fForm .form-item > .hint {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--slate);
}

/* --- action bar: secondary link left, primary button right --- */
.fForm .buttons { justify-content: flex-end; }
.fForm .buttons a {
  order: 1;
  margin-right: auto;
  padding: 12px 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--flare);
  text-decoration: none;
  transition: color .18s var(--ease);
}
.fForm .buttons a:hover { color: var(--flare-deep); text-decoration: underline; }

/* a second, non-primary submit sits between them */
.fForm .buttons input[type="submit"] + input[type="submit"] {
  order: 3;
  background: var(--canvas);
  color: var(--ink);
  box-shadow: none;
}
.fForm .buttons input[type="submit"] + input[type="submit"]:hover { background: var(--violet-tint); color: var(--violet); }

/* password fields get the mono treatment - easier to spot a typo */
.fForm input[type="password"] { font-family: var(--mono); letter-spacing: .04em; }

@media (max-width: 700px) {
  #fMatter > form.fForm { margin-bottom: 48px; border-radius: var(--r-md); }
  .fForm .buttons a { order: 3; margin: 6px 0 0; width: 100%; text-align: center; }
}

/* ==========================================================================
   20. Iconset - dashboard card menu
   Add class "iconset" to a menu widget whose items are: an optional <img>,
   a title link, and an optional nested <ul> of sub-links.

   Modifiers on the widget:
     iconset--2col     two columns instead of three
     iconset--4col     four columns
     iconset--compact  tighter cards, no icon tile
   ========================================================================== */

.iconset .fMenu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: stretch;
}

/* The row divides by item count, capped at three across.
   One item -> capped width. Two -> halves. Three or more -> thirds. */
.iconset .fMenu:has(> li:first-child:last-child) {
  grid-template-columns: minmax(0, 520px);
}
.iconset .fMenu:has(> li:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.iconset .fMenu:has(> li:nth-child(3)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* explicit overrides win, since they come later */
.iconset.iconset--2col .fMenu:has(> li) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.iconset.iconset--4col .fMenu:has(> li) { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- the card --- */
.iconset .fMenu > li {
  position: relative;
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 26px 24px 22px !important;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.iconset .fMenu > li:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
/* a magenta edge marks where you are */
.iconset .fMenu > li.selected,
.iconset .fMenu > li.active {
  border-color: var(--flare);
  box-shadow: 0 0 0 3px var(--flare-tint);
}
.iconset .fMenu > li > a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* The icon you assign in the CMS renders in .menu-item-icon - either as an
   <img>, a nested <i>, or a font-icon class on the span itself. All three
   get the same tile. Empty spans (no icon assigned) collapse. */
.iconset .fMenu > li > a > .menu-item-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--flare-tint);
  color: var(--flare-deep);
  font-size: 19px;
  line-height: 1;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.iconset .fMenu > li:hover > a > .menu-item-icon { background: var(--flare); color: #fff; }
.iconset .menu-item-icon:empty:not([class*="fa"]):not([style*="background"]) { display: none; }
.iconset .menu-item-icon img { width: 26px; height: 26px; object-fit: contain; margin: 0; padding: 0; background: none; }
.iconset .menu-item-icon i,
.iconset .menu-item-icon svg { font-size: 19px; width: 20px; height: 20px; line-height: 1; }
.iconset .fMenu > li > a > .menu-item-text { display: block; }

/* --- icon --- */
.iconset .fMenu > li > img,
.iconset .fMenu > li > a > img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  margin: 0 0 18px;
  padding: 9px;
  border-radius: 12px;
  background: var(--flare-tint);
  box-sizing: content-box;
  transition: background .25s var(--ease);
}
.iconset .fMenu > li:hover > img,
.iconset .fMenu > li:hover > a > img { background: var(--violet-tint); }

/* Font Awesome alternative to an image */
.iconset .fMenu > li > a > i,
.iconset .fMenu > li > i {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--flare-tint);
  color: var(--flare-deep);
  font-size: 19px;
}
.iconset .fMenu > li:hover > a > i { background: var(--flare); color: #fff; }

/* --- title --- */
.iconset .fMenu > li > a {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  transition: color .18s var(--ease);
}
.iconset .fMenu > li:hover > a { color: var(--flare); }

/* Cards with no sub-links become one big click target. Cards WITH sub-links
   don't, or the overlay would swallow them. */
.iconset .fMenu > li:not(:has(ul)) > a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
}
.iconset .fMenu > li:not(:has(ul)) { padding-bottom: 26px !important; }
.iconset .fMenu > li:not(:has(ul))::after {
  content: "\2192";
  position: absolute;
  top: 28px;
  right: 24px;
  font-family: var(--body);
  font-size: 18px;
  line-height: 1;
  color: var(--slate-light);
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.iconset .fMenu > li:not(:has(ul)):hover::after { color: var(--flare); transform: translateX(4px); }
.iconset .fMenu > li:not(:has(ul)) > a { padding-right: 28px; }

/* --- sub-links --- */
.iconset .fMenu ul {
  display: block;
  margin: 16px 0 0 !important;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.iconset .fMenu ul li {
  margin: 0 !important;
  padding: 0;
  list-style: none;
  text-align: left;
}
.iconset .fMenu ul li + li { border-top: 1px solid var(--surface-sunk); }
.iconset .fMenu ul a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
  text-decoration: none;
  transition: color .16s var(--ease), gap .16s var(--ease);
}
.iconset .fMenu ul a::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background .16s var(--ease);
}
.iconset .fMenu ul a:hover { color: var(--flare); gap: 12px; }
.iconset .fMenu ul a:hover::before { background: var(--flare); }
.iconset .fMenu ul li.selected > a { color: var(--flare-deep); font-weight: 600; }
.iconset .fMenu ul li.selected > a::before { background: var(--flare); }

/* --- compact --- */
.iconset--compact .fMenu > li { padding: 18px 20px !important; }
.iconset--compact .fMenu > li > img,
.iconset--compact .fMenu > li > a > img,
.iconset--compact .fMenu > li > a > i { display: none; }
.iconset--compact .fMenu > li > a { font-size: 15.5px; }

/* --- per-item accents: add these classes to individual menu items --- */
.iconset .fMenu > li.is-done > a > i,
.iconset .fMenu > li.is-done > img { background: var(--emerald-tint); color: var(--emerald-ink); }
.iconset .fMenu > li.is-due > a > i,
.iconset .fMenu > li.is-due > img { background: var(--amber-tint); color: var(--amber-ink); }
.iconset .fMenu > li.is-key { border-color: var(--flare); }

/* These repeat the counting selectors rather than using a shorter one:
   :has(> li:nth-child(3)) is more specific than :has(> li), so a simpler
   selector here would lose to it and the grid would stay at three across. */
@media (max-width: 1100px) {
  .iconset .fMenu:has(> li:first-child:last-child),
  .iconset .fMenu:has(> li:nth-child(2):last-child),
  .iconset .fMenu:has(> li:nth-child(3)),
  .iconset.iconset--2col .fMenu:has(> li),
  .iconset.iconset--4col .fMenu:has(> li) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .iconset .fMenu:has(> li:first-child:last-child),
  .iconset .fMenu:has(> li:nth-child(2):last-child),
  .iconset .fMenu:has(> li:nth-child(3)),
  .iconset.iconset--2col .fMenu:has(> li),
  .iconset.iconset--4col .fMenu:has(> li) { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .iconset .fMenu > li { padding: 20px 18px !important; }
  .iconset .fMenu > li:not(:has(ul))::after { top: 22px; right: 18px; }
}

/* ==========================================================================
   21. Icons on plates + the standalone forms rail
   ========================================================================== */

/* --- icon inside the letter plates --- */
.exp-plate.has-icon { font-size: 0; }
.exp-plate.has-icon i { font-size: 15px; line-height: 1; }
.exp-hero-plate.has-icon { font-size: 0; }
.exp-hero-plate.has-icon i { font-size: 32px; line-height: 1; }
.exp-hero.is-center .exp-hero-plate.has-icon i { font-size: 26px; }

/* --------------------------------------------------------------------------
   Standalone rail - for pages that can't host the menu widget.
   Add class "forms-rail" to the page body, or to an empty HTML widget on
   that page, and the rail is rebuilt beside the content.
   -------------------------------------------------------------------------- */

.exp-standalone-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  gap: var(--gutter);
  align-items: start;
}
.exp-standalone-main { min-width: 0; }
.exp-standalone-side {
  position: sticky;
  top: calc(var(--header-h) + 18px);
  align-self: start;
  max-height: calc(100vh - var(--header-h) - 36px);
  overflow: auto;
  scrollbar-width: none;
}
.exp-standalone-side::-webkit-scrollbar { display: none; }
.exp-scrolled .exp-standalone-side { top: 68px; }

/* beside the rail the column is already narrow, so the card fills it */
.exp-standalone-main > form.fForm { max-width: none; margin-left: 0; margin-right: 0; }
.exp-standalone-main > form.fForm .buttons { border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* an empty widget used only to carry the trigger class shouldn't take space */
.forms-rail:empty { display: none; }

@media (max-width: 991px) {
  .exp-standalone-layout { grid-template-columns: minmax(0, 1fr); }
  .exp-standalone-main { grid-row: 2; }
  .exp-standalone-side { grid-row: 1; position: static; margin-bottom: 4px; }
}

/* ==========================================================================
   22. Toasts
   expoToast('User found', 'success')
   types: success | pending | error | info
   ========================================================================== */

.exp-toast-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  max-width: min(380px, calc(100vw - 40px));
  pointer-events: none;
}

.exp-toast-stack .exp-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--slate-light);
  box-shadow: var(--shadow-lg);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}
.exp-toast-stack .exp-toast.is-in { opacity: 1; transform: none; }

.exp-toast i { flex: none; margin-top: 1px; font-size: 15px; }
.exp-toast--success { border-left-color: var(--emerald); }
.exp-toast--success i { color: var(--emerald-ink); }
.exp-toast--pending { border-left-color: var(--amber); }
.exp-toast--pending i { color: var(--amber-ink); }
.exp-toast--error   { border-left-color: var(--red); }
.exp-toast--error i { color: var(--red); }
.exp-toast--info    { border-left-color: var(--royal); }
.exp-toast--info i  { color: var(--royal); }

@media (max-width: 620px) {
  .exp-toast-stack { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

/* ==========================================================================
   23. Content pages - contacts, hours, plain tables
   Wrap page content in <div class="uc"> and use the classes below.
   ========================================================================== */

.uc { max-width: 1000px; }
.uc h2 {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 8px;
}
.uc h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 44px 0 20px;
}
.uc h3:first-of-type { margin-top: 8px; }
.uc h3::before {
  content: "";
  width: 18px; height: 3px;
  flex: none;
  background: var(--flare);
  border-radius: 2px;
}
.uc > p { font-size: 15.5px; color: var(--slate); margin: 0 0 18px; }

/* --- table --- */
.uc-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: 14.5px;
}
.uc-table thead th {
  padding: 13px 20px;
  text-align: left;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-light);
  white-space: nowrap;
}
.uc-table td {
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  vertical-align: middle;
}
.uc-table tbody tr:last-child td { border-bottom: 0; }
.uc-table tbody tr { transition: background .16s var(--ease); }
.uc-table tbody tr:hover { background: var(--surface-sunk); }

.uc-role {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.uc-table a { color: var(--flare); text-decoration: none; word-break: break-word; }
.uc-table a:hover { color: var(--flare-deep); text-decoration: underline; }
.uc-tel { font-family: var(--mono); font-size: 13.5px; white-space: nowrap; }

/* the 24/7 line should not read like the others */
.uc-table tr.is-urgent td {
  background: var(--red-tint);
  box-shadow: inset 3px 0 0 var(--red);
  color: var(--red);
}
.uc-table tr.is-urgent:hover td { background: var(--red-tint); }
.uc-table tr.is-urgent .uc-role { color: var(--red); }
.uc-table tr.is-urgent a { color: var(--red); font-weight: 700; }
.uc-note {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .8;
  margin-left: 8px;
}

/* --- opening hours --- */
.uc-hours {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.uc-hours li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.uc-hours span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-light);
}
.uc-hours b {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.uc-hours li.is-closed b { color: var(--slate-light); }
.uc-hours li.is-open b { color: var(--emerald-ink); }

/* --- table becomes cards on small screens --- */
@media (max-width: 760px) {
  .uc-table, .uc-table tbody, .uc-table tr, .uc-table td { display: block; width: 100%; }
  .uc-table thead { display: none; }
  .uc-table { border: 0; background: none; }
  .uc-table tr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-bottom: 12px;
    padding: 6px 0;
  }
  .uc-table td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 16px;
    border-bottom: 0;
    text-align: right;
  }
  .uc-table td::before {
    content: attr(data-label);
    flex: none;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--slate-light);
    text-align: left;
  }
  .uc-table td:empty { display: none; }
  .uc-table tr.is-urgent td { box-shadow: none; }
  .uc-table tr.is-urgent { border-color: var(--red); }
}

/* ==========================================================================
   24. Steprail - side navigation for the information pages
   Add class "steprail" to a menu widget placed in the page region, after
   the content widget. The region becomes two columns automatically.
   ========================================================================== */

.fRegion[data-fphp-region^="page-"]:has(> .steprail) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  gap: var(--gutter);
  align-items: start;
}
.fRegion[data-fphp-region^="page-"]:has(> .steprail) > .fModule:not(.steprail) { min-width: 0; }

.steprail {
  position: sticky;
  top: calc(var(--header-h) + 18px);
  align-self: start;
  max-height: calc(100vh - var(--header-h) - 36px);
  overflow: auto;
  scrollbar-width: none;
}
.steprail::-webkit-scrollbar { display: none; }

/* the content column's first heading has a top margin; cancel it so both
   columns start on the same line */
.fRegion[data-fphp-region^="page-"]:has(> .steprail) .uc > :first-child,
.fRegion[data-fphp-region^="page-"]:has(> .steprail) .uc h3:first-of-type { margin-top: 0; }
.exp-scrolled .steprail { top: 68px; }

.steprail .f-module-content,
.steprail .fModuleContent {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* widget title, if you set one in the CMS */
.steprail .f-module-title,
.steprail .fModuleTitle,
.steprail > .fModuleContent > h3 {
  margin: 0;
  padding: 16px 20px 15px;
  background: var(--ink);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #fff;
}

/* No inner scroll area. A nested scroller traps the wheel and makes the
   page feel stuck; the rail is short enough to show in full. If it ever
   outgrows the viewport it simply stops sticking, which is the better
   failure. */
.steprail .fMenu {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  max-height: none;
  overflow: visible;
}
.steprail .menu-item + .menu-item { border-top: 1px solid var(--line); }
.steprail .menu-item-icon { display: none; }

.steprail .menu-item > a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 11px 16px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.steprail .menu-item > a::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--canvas);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--slate);
  transition: all .18s var(--ease);
}
.steprail .menu-item > a:hover { background: var(--surface-sunk); color: var(--flare-deep); }

.steprail .menu-item.selected > a {
  background: var(--flare-tint);
  box-shadow: inset 3px 0 0 var(--flare);
  color: var(--flare-deep);
  font-weight: 600;
}
.steprail .menu-item.selected > a::before {
  background: var(--flare);
  border-color: var(--flare);
  color: #fff;
  box-shadow: 0 8px 18px -9px rgba(232,33,91,.9);
}

/* --------------------------------------------------------------------------
   Per-item classes. Add these to individual menu items in the CMS.
     is-key     pull one step out as the important one
     visited    already completed - emerald plate
     is-due     needs attention - amber plate
     is-muted   de-emphasised
   -------------------------------------------------------------------------- */

/* The class may land on the <li> or on the <a>, depending on which field
   the CMS writes it into - both are matched. */
.steprail .menu-item.is-key > a,
.steprail .menu-item > a.is-key {
  position: relative;
  background: var(--flare-tint);
  font-weight: 700;
  color: var(--flare-deep);
  box-shadow: inset 3px 0 0 var(--flare);
}
.steprail .menu-item.is-key > a::before,
.steprail .menu-item > a.is-key::before {
  background: var(--flare);
  border-color: var(--flare);
  color: #fff;
  box-shadow: 0 8px 18px -9px rgba(232,33,91,.9);
}

.steprail .menu-item.visited > a::before,
.steprail .menu-item > a.visited::before {
  background: var(--emerald-tint);
  border-color: rgba(16,185,129,.35);
  color: var(--emerald-ink);
}
.steprail .menu-item.is-due > a::before,
.steprail .menu-item > a.is-due::before {
  background: var(--amber-tint);
  border-color: rgba(245,158,11,.4);
  color: var(--amber-ink);
}
.steprail .menu-item.is-muted > a,
.steprail .menu-item > a.is-muted { color: var(--slate-light); }
.steprail .menu-item.is-muted > a::before,
.steprail .menu-item > a.is-muted::before { opacity: .6; }

@media (max-width: 991px) {
  .fRegion[data-fphp-region^="page-"]:has(> .steprail) { grid-template-columns: minmax(0, 1fr); }
  .fRegion[data-fphp-region^="page-"]:has(> .steprail) > .fModule:not(.steprail) { grid-row: 2; }
  .steprail { grid-row: 1; position: static; margin-bottom: 4px; }
  .steprail .fMenu { max-height: none; }
}

/* ==========================================================================
   25. Checkout - invoices, discount code, payment methods
   Scoped to the checkout view so nothing here leaks elsewhere.
   ========================================================================== */

body.view-checkout #fMatter > form.fForm {
  position: relative;
  max-width: 960px;
  margin: 0 auto 72px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
/* magenta edge so the card reads as the transaction, not just a table */
body.view-checkout #fMatter > form.fForm::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--flare) 0 30%, var(--royal) 100%);
  z-index: 2;
}

/* --- invoice table --- */
.f-table-invoice { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.f-table-invoice thead th {
  padding: 15px 24px;
  text-align: left;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-light);
  white-space: nowrap;
}
.f-table-invoice td { padding: 15px 24px; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.f-table-invoice .falr { text-align: right; }

/* invoice group header, with its include/exclude checkbox */
.f-table-invoice tr.f-table-subheading td {
  padding: 14px 24px;
  background: var(--violet-tint);
  border-bottom: 1px solid var(--line);
}
.fForm .f-table-subheading label {
  display: flex !important;
  align-items: center;
  gap: 11px;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--royal-deep);
  cursor: pointer;
}
.fForm .f-table-subheading label::before {
  content: "\f543";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 13px;
  color: var(--royal);
  opacity: .75;
}
.f-table-invoice .f-table-subheading input[type="checkbox"] {
  width: 17px !important;
  height: 17px;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none;
  accent-color: var(--royal);
  cursor: pointer;
}
.f-table-invoice .f-table-subheading a { color: var(--royal-deep); text-decoration: none; }
.f-table-invoice .f-table-subheading a:hover { text-decoration: underline; }

/* an unticked group drops back so it's clear it isn't being paid */
.f-table-invoice tr.f-table-subheading:has(input:not(:checked)) td { background: var(--canvas); }
.f-table-invoice tr.f-table-subheading:has(input:not(:checked)) label { color: var(--slate-light); }
.f-table-invoice tr.f-table-subheading:has(input:not(:checked)) label::before { color: var(--slate-light); }

/* line items */
.f-table-invoice .title { font-weight: 600; color: var(--ink); }
.f-table-invoice .description {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .03em;
  color: var(--slate-light);
}
.f-table-invoice .f-financial-amount { font-family: var(--mono); font-size: 13.5px; color: var(--ink); }
.f-table-invoice .f-financial-ccy { color: var(--slate-light); margin-right: 2px; }

/* totals */
.f-table-invoice tr.tr-total td {
  padding-top: 18px;
  padding-bottom: 18px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 0;
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
}
.f-table-invoice #f-table-charge td { color: var(--slate); font-weight: 500; }
.f-table-invoice #f-table-total td {
  background: var(--emerald-tint);
  border-top: 1px solid rgba(16,185,129,.3);
  font-size: 16px;
  letter-spacing: .01em;
}
.f-table-invoice #f-table-total .f-financial-amount {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  color: var(--emerald-ink);
}
.f-table-invoice #f-table-total .f-financial-ccy { color: var(--emerald-ink); font-size: 16px; }

/* --- discount code: one line, styled as a coupon strip --- */
body.view-checkout .discount-code {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  background:
    repeating-linear-gradient(-45deg, rgba(91,33,168,.03) 0 8px, transparent 8px 18px),
    var(--surface-sunk);
}
body.view-checkout .discount-code .form-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* the portal rules use !important on labels and inputs, so these must too */
body.view-checkout .discount-code label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  flex: none;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}
body.view-checkout .discount-code label::before {
  content: "\f02b";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  color: var(--flare);
}
body.view-checkout .discount-code input[type="text"] {
  display: block !important;
  flex: 1 1 auto;
  width: auto !important;
  min-width: 0;
  min-height: 46px;
  background: var(--surface);
  font-family: var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.view-checkout .discount-code input[type="text"]::placeholder { text-transform: none; letter-spacing: 0; }
body.view-checkout .discount-code input[type="submit"] {
  flex: none;
  width: auto !important;
  min-height: 46px;
  padding: 12px 26px;
  background: var(--royal);
  color: #fff;
  box-shadow: none;
  font-size: 14px;
}
body.view-checkout .discount-code input[type="submit"]:hover { background: var(--royal-bright); }

/* --- payment methods --- */
body.view-checkout .checks { padding: 0; }
.f-table-pmodes { width: 100%; border-collapse: collapse; }
.f-table-pmodes thead th {
  padding: 16px 24px;
  text-align: left;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-light);
}
.f-table-pmodes td {
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.f-table-pmodes tbody tr { transition: background .16s var(--ease); cursor: pointer; }
.f-table-pmodes tbody tr:hover { background: var(--surface-sunk); }
.f-table-pmodes input[type="radio"] {
  width: 18px !important;
  height: 18px;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: var(--flare);
  cursor: pointer;
}
.f-table-pmodes .list-item-heading {
  display: flex !important;
  align-items: center;
  gap: 11px;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.f-table-pmodes .list-item-heading::before {
  content: "\f09d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
  color: var(--slate-light);
  transition: color .16s var(--ease);
}
/* the chosen method */
.f-table-pmodes tbody tr:has(input:checked) { background: var(--flare-tint); }
.f-table-pmodes tbody tr:has(input:checked) td:first-child { box-shadow: inset 3px 0 0 var(--flare); }
.f-table-pmodes tbody tr:has(input:checked) .list-item-heading { color: var(--flare-deep); }
.f-table-pmodes tbody tr:has(input:checked) .list-item-heading::before { color: var(--flare); }

/* --- pay bar, pinned so the total and the button stay reachable --- */
body.view-checkout .buttons {
  position: sticky;
  bottom: 0;
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  padding: 18px 24px !important;
  margin: 0 !important;
  background: rgba(255,255,255,.93);
  backdrop-filter: saturate(1.5) blur(10px);
  -webkit-backdrop-filter: saturate(1.5) blur(10px);
  border-top: 1px solid var(--line);
  z-index: 3;
}
body.view-checkout .buttons input.f-button {
  min-width: 190px;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 600;
}

@media (max-width: 700px) {
  body.view-checkout #fMatter > form.fForm { margin-bottom: 48px; }
  .f-table-invoice thead th:nth-child(2),
  .f-table-invoice thead th:nth-child(3),
  .f-table-invoice tbody td:nth-child(2),
  .f-table-invoice tbody td:nth-child(3) { display: none; }
  .f-table-invoice td, .f-table-invoice thead th { padding-left: 16px; padding-right: 16px; }
  .f-table-pmodes td { padding-left: 16px; padding-right: 16px; }
  body.view-checkout .discount-code { padding: 16px; }
  body.view-checkout .discount-code .form-item { flex-wrap: wrap; }
  body.view-checkout .discount-code label { width: 100% !important; }
  body.view-checkout .discount-code input[type="text"] { flex: 1 1 60%; }
  body.view-checkout .buttons { padding: 14px 16px !important; }
  body.view-checkout .buttons input.f-button { width: 100%; }
}

/* ==========================================================================
   26. Mobile navigation
   The burger is injected by the portal JS into .mainnav. Three lines that
   morph into an X, and a panel that drops from the bar.
   ========================================================================== */

.mainnav { position: relative; }

.mnav-burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.12);
  cursor: pointer;
  transition: background .18s var(--ease);
}
.mnav-burger:hover { background: rgba(255,255,255,.2); }

/* three lines: the span is the middle, its pseudos are top and bottom */
.mnav-burger span,
.mnav-burger span::before,
.mnav-burger span::after {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transform: translateX(-50%);
  transition: transform .28s var(--ease), opacity .18s var(--ease), width .28s var(--ease);
}
.mnav-burger span { top: 50%; margin-top: -1px; }
.mnav-burger span::before,
.mnav-burger span::after { content: ""; left: 0; transform: none; }
.mnav-burger span::before { top: -7px; }
.mnav-burger span::after  { top: 7px; }

/* into an X */
.mainnav.is-open .mnav-burger span { background: transparent; }
.mainnav.is-open .mnav-burger span::before { transform: translateY(7px) rotate(45deg); }
.mainnav.is-open .mnav-burger span::after  { transform: translateY(-7px) rotate(-45deg); }

/* --- the panel --- */
@media (max-width: 900px) {
  .mnav-burger { display: block; }

  .mainnav .f-module-content,
  .mainnav .fModuleContent { padding: 0 16px; position: relative; }

  .mainnav .fMenu {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    z-index: 40;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    min-height: 0;
    padding: 10px 16px 18px;
    background: linear-gradient(160deg, var(--royal-dark) 0%, var(--royal-deep) 100%);
    border-bottom: 1px solid rgba(255,255,255,.16);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - var(--header-h) - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;

    /* collapsed */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .mainnav.is-open .fMenu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* the bar itself keeps its height with only the burger in it */
  .mainnav .fMenu { min-height: 0; }
  .mainnav .fModuleContent { min-height: 56px; display: flex; align-items: center; }

  .mainnav .menu-item { width: 100%; }
  .mainnav .menu-item > a {
    padding: 13px 14px;
    border-radius: 8px;
    font-size: 15px;
  }
  .mainnav .menu-item + .menu-item > a { border-top: 1px solid rgba(255,255,255,.07); border-radius: 8px; }

  /* the call-to-action items become full-width buttons at the end */
  .mainnav .menu-item.nav-cta,
  .mainnav .menu-item.nav-cta-ghost { margin-top: 8px; }
  .mainnav .menu-item.nav-cta > a,
  .mainnav .menu-item.nav-cta-ghost > a {
    margin-left: 0;
    text-align: center;
    padding: 13px 20px;
  }
  .mainnav .menu-item.nav-push,
  .mainnav .menu-item.nav-logo { margin: 0; }
  .mainnav .menu-item.nav-divider { border-left: 0; padding-left: 0; margin-left: 0; }

  /* nested menus open inline instead of on hover */
  .mainnav .menu-item ul {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 2px 0 2px 14px;
    padding: 4px;
    background: rgba(255,255,255,.06);
    border: 0;
    box-shadow: none;
  }
  .mainnav .menu-item ul .menu-item > a { color: rgba(255,255,255,.8); }
  .mainnav .menu-item ul .menu-item > a:hover { background: rgba(255,255,255,.12); color: #fff; }
}

/* The panel scrolls on its own. Locking body overflow turned <body> into a
   scroll container, which breaks the sticky header underneath it. */

/* ==========================================================================
   27. Responsive pass - things that only break on small screens
   ========================================================================== */

/* long addresses and emails must never force a sideways scroll */
.uc-table a, .xh-footer a, .prehead a { overflow-wrap: anywhere; }

/* any table that hasn't been given a mobile treatment can at least scroll */
@media (max-width: 760px) {
  .fForm .f-table:not(.f-table-invoice):not(.f-table-pmodes):not(.uc-table) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 700px) {
  /* the page title band was still using desktop rhythm */
  .fPageTitle { padding: 24px 0 26px; }
  .fPageTitle h1, .fPageTitle #heading { font-size: clamp(21px, 6vw, 28px); }
  .exp-hero-meta { gap: 6px; }
  .exp-chip { font-size: 10px; padding: 4px 9px; }

  /* content pages */
  .uc h3 { margin: 32px 0 16px; font-size: 12px; }
  .uc-hours { grid-template-columns: 1fr; }

  /* dashboard cards */
  .iconset .fMenu > li > a { font-size: 16px; }

  /* the steprail sits above the content, so it shouldn't be tall */
  .steprail .menu-item > a { padding: 12px 14px; }

  /* forms rail toggle needs a comfortable tap target */
  .exp-rail-toggle { min-height: 52px; }

  /* stop the fixed back-to-top button covering the sticky save bar */
  #nav-up.nav-up { bottom: 76px; }
}

@media (max-width: 420px) {
  .fHeader .navbar-header > .wrap { padding: 0 12px; }
  .prehead-inner { padding: 8px 12px; }
  .prehead-left { font-size: 11px; gap: 12px; }
  .exp-section { padding-left: 14px; padding-right: 14px; }
  .fForm .form-item-type-buttons, .fForm .buttons { padding-left: 14px !important; padding-right: 14px !important; }
  .xh-wrap { padding: 0 14px; }
}


/* ==========================================================================
   28. Field alignment across a row
   A label that wraps to two lines pushed its input below the one beside it.
   Each field becomes a column and its control takes the slack above, so the
   inputs sit on the same line whatever the labels do.
   ========================================================================== */

/* The rows must stretch, or there is no slack for the control to drop into
   and margin-top:auto below does nothing. Both grids previously used
   align-items:start, which is why the inputs stayed out of line. */
.exp-section-body,
.ff-grid,
.lr-grid { align-items: stretch !important; }

.exp-section-body > .form-item,
.ff-grid > .form-item,
.lr-grid > .form-item {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
}

.exp-section-body > .form-item > input:not([type="hidden"]),
.exp-section-body > .form-item > select,
.exp-section-body > .form-item > textarea,
.ff-grid > .form-item > input:not([type="hidden"]),
.ff-grid > .form-item > select,
.ff-grid > .form-item > textarea,
.lr-grid > .form-item > input:not([type="hidden"]),
.lr-grid > .form-item > select,
.lr-grid > .form-item > textarea { margin-top: auto; }

/* checkbox groups shouldn't be pushed to the bottom of a tall row */
.ff-grid > .form-item > .ff-options { margin-top: auto; }

/* hints and errors stay attached under the control rather than stretching */
.exp-section-body > .form-item > .exp-hint,
.exp-section-body > .form-item > .exp-error,
.exp-section-body > .form-item > .exp-counter,
.exp-section-body > .form-item > .hint,
.ff-grid > .form-item > .exp-hint,
.ff-grid > .form-item > .hint { margin-top: 7px; flex: none; }

/* ==========================================================================
   29. User / buyer listing + modal
   Styles fPHP's .f-list-users output as cards, and the modal the portal JS
   opens when a name is clicked.
   ========================================================================== */

/* --- search box (injected by the JS) --- */
.fl-search {
  position: relative;
  max-width: 420px;
  margin: 0 0 22px;
}
.fl-search input {
  width: 100%;
  min-height: 46px;
  padding: 12px 16px 12px 42px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--body);
  font-size: 14.5px;
  color: var(--ink);
}
.fl-search input:focus {
  outline: none;
  border-color: var(--flare);
  box-shadow: 0 0 0 3px rgba(232,33,91,.14);
}
.fl-search::before {
  content: "\f002";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--slate-light);
  pointer-events: none;
}
.fl-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-light);
  margin: 0 0 18px;
}

/* --- the grid --- */
.f-list-users {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

.f-list-users .f-list-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.f-list-users .f-list-item:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
.f-list-users .f-list-item.is-hidden { display: none; }

.f-list-users .f-list-item-container {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 20px 22px;
  align-items: start;
}

/* initials tile, filled in by the JS */
.fl-avatar {
  grid-row: 1 / span 2;
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--royal), var(--flare));
  color: #fff;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
}

.f-list-users .f-list-item-title { min-width: 0; }
.f-list-users .f-list-item-title a {
  display: inline-block;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
  transition: color .16s var(--ease);
}
.f-list-users .f-list-item:hover .f-list-item-title a { color: var(--flare); }

.f-list-users .f-list-item-subtitle {
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--slate);
}
.f-list-users .f-list-item-subtitle a { color: inherit; text-decoration: none; cursor: default; }

/* fPHP emits an empty teaser div - it would otherwise add a blank row */
.f-list-users .f-list-item-teaser-content:not(:has(.f-list-node-value:not(:empty))) { display: none; }
.f-list-users .f-list-item-teaser-content {
  grid-column: 2;
  font-size: 13px;
  color: var(--slate-light);
}

.fl-cta {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--flare);
  transition: gap .18s var(--ease);
}
.f-list-users .f-list-item:hover .fl-cta { gap: 11px; }

/* --- pagination --- */
.f-list-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 40px;
}
.f-list-filter a {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: all .16s var(--ease);
}
.f-list-filter a:hover { border-color: var(--flare); color: var(--flare); }
.f-list-filter a.selected {
  background: var(--flare);
  border-color: var(--flare);
  color: #fff;
  font-weight: 600;
}

/* --- empty state --- */
.fl-empty {
  padding: 44px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  color: var(--slate);
  font-size: 14.5px;
}

/* ==========================================================================
   30. Modal
   expModal.open(url) or expModal.open({ html, title })
   ========================================================================== */

.exp-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s var(--ease), visibility .24s;
}
.exp-modal.is-open { opacity: 1; visibility: visible; }

.exp-modal-veil {
  position: absolute;
  inset: 0;
  background: rgba(26,16,64,.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.exp-modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 40px 90px -30px rgba(26,16,64,.7);
  overflow: hidden;
  transform: translateY(14px) scale(.98);
  transition: transform .28s var(--ease);
}
.exp-modal.is-open .exp-modal-panel { transform: none; }

/* head */
.exp-modal-head {
  position: relative;
  flex: none;
  padding: 22px 60px 20px 26px;
  background: linear-gradient(112deg, var(--royal-deep) 0%, var(--royal-dark) 45%, var(--royal) 100%);
  color: #fff;
  overflow: hidden;
}
.exp-modal-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, rgba(232,33,91,.5) 0 30%, rgba(232,33,91,0) 64%),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 10px, transparent 10px 30px);
  pointer-events: none;
}
.exp-modal-eyebrow {
  position: relative;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--flare-on-blue);
  margin-bottom: 5px;
}
.exp-modal-title {
  position: relative;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}

.exp-modal-close {
  position: absolute;
  top: 18px; right: 18px;
  z-index: 2;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background .16s var(--ease), transform .16s var(--ease);
}
.exp-modal-close:hover { background: var(--flare); transform: rotate(90deg); }

/* body */
.exp-modal-body {
  flex: 1 1 auto;
  min-height: 120px;
  padding: 26px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.exp-modal-body h2, .exp-modal-body h3 { font-size: 15px; margin: 0 0 12px; }
.exp-modal-body p { margin: 0 0 12px; }
.exp-modal-body img { max-width: 100%; height: auto; border-radius: 10px; }
.exp-modal-body a { color: var(--flare); }

/* fPHP's own detail markup, tidied */
.exp-modal-body .f-node-field,
.exp-modal-body .f-list-item {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 6px 18px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.exp-modal-body .f-node-label,
.exp-modal-body .f-node-field > label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate-light);
}
.exp-modal-body .f-node-value { color: var(--ink); font-weight: 500; }

/* loading + error */
.exp-modal-loading {
  display: grid;
  place-items: center;
  gap: 14px;
  padding: 40px 0;
  color: var(--slate-light);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.exp-modal-spinner {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  border-top-color: var(--flare);
  animation: exp-spin .7s linear infinite;
}
@keyframes exp-spin { to { transform: rotate(360deg); } }

/* foot */
.exp-modal-foot {
  flex: none;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 26px;
  border-top: 1px solid var(--line);
  background: var(--surface-sunk);
}
.exp-modal-foot a,
.exp-modal-foot button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border: 0;
  border-radius: var(--r-sm);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.exp-modal-foot .is-ghost { background: var(--canvas); color: var(--ink); }
.exp-modal-foot .is-ghost:hover { background: var(--violet-tint); color: var(--royal); }
.exp-modal-foot .is-primary { background: var(--flare); color: #fff; }
.exp-modal-foot .is-primary:hover { background: var(--flare-bright); color: #fff; }

@media (max-width: 620px) {
  .exp-modal { padding: 0; align-items: flex-end; }
  .exp-modal-panel {
    max-width: none;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
  .exp-modal-body { padding: 20px; }
  .exp-modal-head { padding: 20px 56px 18px 20px; }
  .exp-modal-foot { padding: 14px 20px; }
  .exp-modal-body .f-node-field,
  .exp-modal-body .f-list-item { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .f-list-users { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   31. List toolbar - the module's own search and filters
   ========================================================================== */

.f-list-header { margin: 0 0 22px; }

.f-list-header form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.f-list-header-item { flex: 1 1 200px; min-width: 0; position: relative; }
.f-list-header-item-go { flex: 0 0 auto; }

.f-list-header input[type="text"],
.f-list-header input[type="search"],
.f-list-header select {
  width: 100%;
  min-height: 46px;
  padding: 12px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-sunk);
  font-family: var(--body);
  font-size: 14.5px;
  color: var(--ink);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.f-list-header input::placeholder { color: var(--slate-light); }
.f-list-header input:focus,
.f-list-header select:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--flare);
  box-shadow: 0 0 0 3px rgba(232,33,91,.14);
}

/* magnifier on the first search field */
.f-list-header-item-search:first-child input { padding-left: 42px; }
.f-list-header-item-search:first-child::before {
  content: "\f002";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--slate-light);
  pointer-events: none;
  z-index: 1;
}

/* the filter dropdown gets the same chevron as every other select */
.f-list-header select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23625B7A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
/* a filter that is actually set should look set */
.f-list-header select:not(:placeholder-shown),
.f-list-header select.is-set { border-color: var(--flare); color: var(--flare-deep); }

.f-list-header input[type="submit"] {
  min-height: 46px;
  padding: 12px 30px;
  border: 0;
  border-radius: 10px;
  background: var(--flare);
  color: #fff;
  font-family: var(--body);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(232,33,91,.85);
  transition: background .18s var(--ease), transform .12s var(--ease);
}
.f-list-header input[type="submit"]:hover { background: var(--flare-bright); }
.f-list-header input[type="submit"]:active { transform: translateY(1px); }

/* a clear-all link, added by the JS when a search or filter is active */
.fl-clear {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate-light);
  text-decoration: none;
  white-space: nowrap;
}
.fl-clear:hover { color: var(--flare); }

@media (max-width: 620px) {
  .f-list-header form { padding: 12px; gap: 8px; }
  .f-list-header-item { flex: 1 1 100%; }
  .f-list-header-item-go { flex: 1 1 100%; }
  .f-list-header input[type="submit"] { width: 100%; }
}

/* ==========================================================================
   32. Listing card + modal detail refinements
   ========================================================================== */

/* the whole card is the target now */
.f-list-users .f-list-item.is-clickable { cursor: pointer; }
.f-list-users .f-list-item.is-clickable:focus-visible {
  outline: 2px solid var(--flare);
  outline-offset: 3px;
}
.f-list-users .f-list-item-title a { pointer-events: none; }

/* only name, company and designation belong on the card */
.f-list-users .f-list-item-container > :not(.fl-avatar):not(.f-list-item-title):not(.f-list-item-subtitle):not(.f-list-item-teaser-content):not(.fl-cta) { display: none; }
.f-list-users .f-list-item-teaser-content ~ .f-list-item-teaser-content { display: none; }

.f-list-users .f-list-item-teaser-content {
  grid-column: 2;
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate-light);
  margin-top: 2px;
}
.f-list-users .f-list-item-teaser-content a { color: inherit; text-decoration: none; }

.fl-cta { font-size: 10px; letter-spacing: .09em; }

/* --- modal: the field grid --- */
.md-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.md-field {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: 12px;
  min-width: 0;
}
.md-field.is-wide { grid-column: 1 / -1; }
.md-field > i {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--flare-tint);
  color: var(--flare-deep);
  font-size: 12px;
}
.md-field-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.md-field-k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-light);
}
.md-field-v {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.md-field-v a { color: var(--flare); text-decoration: none; }
.md-field-v a:hover { text-decoration: underline; }

.md-raw { font-size: 14.5px; color: var(--ink-soft); }
.md-empty {
  padding: 28px 0;
  text-align: center;
  color: var(--slate-light);
  font-size: 14px;
}

/* --- modal: the meeting slot block --- */
.md-actions {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.md-actions h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
}
.md-actions h3::before {
  content: "";
  width: 16px; height: 3px;
  border-radius: 2px;
  background: var(--flare);
}
.md-actions form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.md-actions label {
  width: 100%;
  margin: 0 0 2px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-light);
}
.md-actions select,
.md-actions input[type="text"] {
  flex: 1 1 200px;
  min-width: 0;
  min-height: 46px;
  padding: 12px 40px 12px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background-color: var(--surface-sunk);
  font-family: var(--body);
  font-size: 14.5px;
  color: var(--ink);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23625B7A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.md-actions input[type="text"] { background-image: none; padding-right: 15px; }
.md-actions select:focus,
.md-actions input:focus {
  outline: none;
  background-color: var(--surface);
  border-color: var(--flare);
  box-shadow: 0 0 0 3px rgba(232,33,91,.14);
}
.md-actions input[type="submit"],
.md-actions button {
  flex: none;
  min-height: 46px;
  padding: 12px 26px;
  border: 0;
  border-radius: 10px;
  background: var(--flare);
  color: #fff;
  font-family: var(--body);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(232,33,91,.85);
  transition: background .18s var(--ease);
}
.md-actions input[type="submit"]:hover,
.md-actions button:hover { background: var(--flare-bright); }

@media (max-width: 620px) {
  .md-fields { grid-template-columns: minmax(0, 1fr); }
  .md-actions select, .md-actions input[type="submit"] { flex: 1 1 100%; }
}

/* ==========================================================================
   33. Buyer card + modal, final layout
   ========================================================================== */

/* The teaser holds every field with no labels. It's only hidden once the
   JS has run and rebuilt the card - otherwise the card would be blank.
   [data-exp-version] is set on <html> by the portal script. */
[data-exp-version] .f-list-users .f-list-item-teaser-content { display: none !important; }

.f-list-users .f-list-item-container {
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 2px 14px;
  padding: 20px 20px 16px;
}
/* no avatar means the JS hasn't run - don't hold a column open for it */
.f-list-users .f-list-item-container:not(:has(.fl-avatar)) {
  grid-template-columns: minmax(0, 1fr);
}
.f-list-users .f-list-item-container:not(:has(.fl-avatar)) > * { grid-column: 1 !important; }

.f-list-users .f-list-item-title a { font-size: 16.5px; }
.f-list-users .f-list-item-subtitle { font-size: 13.5px; color: var(--slate); }

.fl-role {
  grid-column: 2;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate-light);
  line-height: 1.4;
}

/* small social row on the card */
.fl-social {
  grid-column: 2;
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.fl-social a {
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--canvas);
  color: var(--slate);
  font-size: 11px;
  text-decoration: none;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.fl-social a:hover { background: var(--flare); color: #fff; }

/* the call to action is a full-width bar, so it never wraps awkwardly */
.fl-cta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--flare-tint);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--flare-deep);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.f-list-users .f-list-item:hover .fl-cta { background: var(--flare); color: #fff; gap: 10px; }
.fl-cta i { font-size: 11px; }

/* --- modal blocks --- */
.md-block { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.md-block:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.md-block h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
}
.md-block h3::before {
  content: "";
  width: 16px; height: 3px;
  border-radius: 2px;
  background: var(--flare);
}

/* values that are really a list of things */
.md-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.md-chip {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--violet-tint);
  color: var(--royal-deep);
  font-size: 12.5px;
  font-weight: 600;
}

/* social buttons in the modal */
.md-social { display: flex; flex-wrap: wrap; gap: 10px; }
.md-social a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  color: var(--slate);
  font-size: 15px;
  text-decoration: none;
  transition: all .18s var(--ease);
}
.md-social a:hover {
  background: var(--flare);
  border-color: var(--flare);
  color: #fff;
  transform: translateY(-2px);
}

.md-actions.is-loading .exp-modal-loading { padding: 16px 0; }

/* ==========================================================================
   34. Modal, final pass
   ========================================================================== */

/* head: the name leads, the company sits under it */
.exp-modal-head { padding: 24px 62px 22px 26px; }
.exp-modal-title { font-size: 24px; line-height: 1.15; }
.exp-modal-sub {
  position: relative;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.78);
}
.exp-modal-eyebrow { display: none; }

/* no footer unless something is put in it */
.exp-modal-foot:empty { display: none; }

/* one field per row reads better than a cramped two-up */
.md-fields { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.md-field { padding: 14px 16px; }
.md-field > i { width: 32px; height: 32px; font-size: 13px; }
.md-field-v { font-size: 15px; }

/* products of interest: one chip per value, not one long chip */
.md-chips { gap: 7px; }
.md-chip { font-size: 12.5px; padding: 5px 12px; }

/* social: even tiles, and a label so an unknown icon still reads */
.md-social { gap: 8px; }
.md-social a {
  width: 44px; height: 44px;
  font-size: 16px;
  color: var(--slate);
}
.md-social a:hover { color: #fff; }

/* --- the slot picker: select and button on one row, roughly two thirds --- */
.md-slot-label {
  display: block;
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-light);
}
.md-slot {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  align-items: stretch;
}
.md-actions form { display: block; }
.md-slot select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 12px 40px 12px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background-color: var(--surface-sunk);
  font-family: var(--body);
  font-size: 14.5px;
  color: var(--ink);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23625B7A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.md-slot select:focus {
  outline: none;
  background-color: var(--surface);
  border-color: var(--flare);
  box-shadow: 0 0 0 3px rgba(232,33,91,.14);
}
.md-slot input[type="submit"],
.md-slot button {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--flare);
  color: #fff;
  font-family: var(--body);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(232,33,91,.85);
  transition: background .18s var(--ease);
}
.md-slot input[type="submit"]:hover,
.md-slot button:hover { background: var(--flare-bright); }

@media (max-width: 620px) {
  .exp-modal-title { font-size: 20px; }
  .md-slot { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   35. Modal - rebuilt
   Rows rather than nested boxes, and a hard reset on anything the template
   stylesheet floats. layout.css floats every <label> to a fixed width and
   right-aligns it, which is what pushed the slot picker off screen.
   ========================================================================== */

.exp-modal * { float: none !important; }
.exp-modal label {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}
.exp-modal-panel { max-width: 640px; overflow-x: hidden; }
.exp-modal-body { padding: 0; }

/* --- head --- */
.exp-modal-head { padding: 26px 62px 24px 26px; }
.exp-modal-id { position: relative; display: flex; align-items: center; gap: 15px; }
.exp-modal-avatar {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}
.exp-modal-idtext { min-width: 0; }
.exp-modal-title { font-size: 22px; line-height: 1.2; }
.exp-modal-sub { margin-top: 3px; font-size: 13.5px; color: rgba(255,255,255,.8); }

/* --- detail rows --- */
.md-rows { border-bottom: 1px solid var(--line); }
.md-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 26px;
  border-top: 1px solid var(--line);
}
.md-row:first-child { border-top: 0; }
.md-row > i {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--flare-tint);
  color: var(--flare-deep);
  font-size: 13px;
}
.md-row.is-yes > i { background: var(--emerald-tint); color: var(--emerald-ink); }
.md-row.is-no  > i { background: var(--canvas); color: var(--slate-light); }
.md-row-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.md-row-k {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--slate-light);
}
.md-row-v {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.md-row-v a { color: var(--flare); }

.md-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.md-chip {
  padding: 4px 11px;
  border-radius: 6px;
  background: var(--violet-tint);
  color: var(--royal-deep);
  font-size: 13px;
  font-weight: 600;
}

/* --- blocks below the rows --- */
.md-block {
  margin: 0;
  padding: 22px 26px;
  border-top: 1px solid var(--line);
}
.md-block:first-child { border-top: 0; }
.md-block h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-light);
  margin: 0 0 14px;
}
.md-block h3::before { content: none; }

/* social as labelled pills, so an icon that fails still reads */
.md-social { display: flex; flex-wrap: wrap; gap: 8px; }
.md-social a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: auto; height: auto;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all .18s var(--ease);
}
.md-social a i { font-size: 14px; color: var(--slate); transition: color .18s var(--ease); }
.md-social a:hover {
  background: var(--flare);
  border-color: var(--flare);
  color: #fff;
  transform: none;
}
.md-social a:hover i { color: #fff; }

/* --- the meeting block, tinted so it reads as the action --- */
.md-actions {
  margin: 0;
  padding: 22px 26px 26px;
  border-top: 1px solid var(--line);
  background: var(--flare-tint);
}
.md-actions h3 { color: var(--flare-deep); }
.md-actions form { display: block; margin: 0; }

.md-slot-label {
  display: block !important;
  margin: 0 0 8px !important;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--flare-deep);
}
.md-slot {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  align-items: stretch;
  width: 100%;
}
.md-slot select {
  width: 100% !important;
  min-width: 0;
  min-height: 48px;
  margin: 0 !important;
  padding: 12px 40px 12px 15px !important;
  border: 1px solid rgba(232,33,91,.28);
  border-radius: 10px;
  background-color: #fff;
  font-family: var(--body);
  font-size: 14.5px;
  color: var(--ink);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23A8123F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
.md-slot select:focus {
  outline: none;
  border-color: var(--flare);
  box-shadow: 0 0 0 3px rgba(232,33,91,.18);
}
.md-slot input[type="submit"],
.md-slot button {
  width: 100% !important;
  min-height: 48px;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 0;
  border-radius: 10px;
  background: var(--flare);
  color: #fff;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(232,33,91,.9);
  transition: background .18s var(--ease);
}
.md-slot input[type="submit"]:hover,
.md-slot button:hover { background: var(--flare-bright); }

.md-empty { padding: 34px 26px; }
.md-actions.is-loading .exp-modal-loading { padding: 12px 0; }

@media (max-width: 620px) {
  .exp-modal-head { padding: 20px 56px 20px 20px; }
  .exp-modal-title { font-size: 19px; }
  .exp-modal-avatar { width: 44px; height: 44px; font-size: 15px; }
  .md-row, .md-block, .md-actions { padding-left: 20px; padding-right: 20px; }
  .md-slot { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
   MY SCANNED CONTACTS  -  add-on stylesheet
   Paste at the end of the global CSS.
   ========================================================================== */

/* The module prints .row on the list and col-* on each item. Those fight a
   grid, so they are neutralised and the grid does the work. */
.f-list-users.scanlist {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  margin: 0 0 28px !important;
}
.f-list-users.scanlist > .f-list-item[class*="col-"] {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.f-list-users.scanlist > .f-list-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.f-list-users.scanlist > .f-list-item:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
.f-list-users.scanlist > .f-list-item:focus-visible {
  outline: 2px solid var(--flare);
  outline-offset: 3px;
}
.f-list-users.scanlist .f-list-item-container {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 3px 14px;
  padding: 18px 18px 15px;
  align-items: start;
}

/* photo, or initials when there is none */
.sc-photo, .sc-initials {
  grid-row: 1 / span 2;
  width: 52px; height: 52px;
  border-radius: 14px;
  overflow: hidden;
}
.sc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-initials {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--royal), var(--flare));
  color: #fff;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
}

.f-list-users.scanlist .f-list-item-title { min-width: 0; align-self: end; }
.f-list-users.scanlist .f-list-item-title a {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
  pointer-events: none;
}
.f-list-users.scanlist .f-list-item-subtitle {
  min-width: 0;
  align-self: start;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--slate);
}
.f-list-users.scanlist .f-list-item-teaser-content { display: none; }

.sc-cta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 15px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--violet-tint);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--royal-deep);
  transition: background .18s var(--ease), color .18s var(--ease), gap .18s var(--ease);
}
.sc-cta i { font-size: 11px; }
.f-list-users.scanlist > .f-list-item:hover .sc-cta {
  background: var(--royal);
  color: #fff;
  gap: 11px;
}

/* --- export button, moved into the toolbar --- */
.sc-export {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 20px !important;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-sunk) !important;
  color: var(--ink) !important;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all .16s var(--ease);
}
.sc-export:hover {
  background: var(--emerald-tint) !important;
  border-color: var(--emerald);
  color: var(--emerald-ink) !important;
}
.sc-export i { font-size: 13px; }

/* --- modal: photo in the head, quick actions on top --- */
.exp-modal-avatar.has-photo { background: none; padding: 0; overflow: hidden; }
.exp-modal-avatar.has-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}

.sc-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 18px 26px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-sunk);
}
.sc-act {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all .16s var(--ease);
}
.sc-act:hover { border-color: var(--flare); color: var(--flare); }
.sc-act.is-primary {
  background: var(--flare);
  border-color: var(--flare);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(232,33,91,.85);
}
.sc-act.is-primary:hover { background: var(--flare-bright); color: #fff; }

.md-raw { padding: 22px 26px; font-size: 14.5px; color: var(--ink-soft); }

@media (max-width: 620px) {
  .f-list-users.scanlist { grid-template-columns: minmax(0, 1fr); }
  .sc-quick { padding: 16px 20px; }
  .sc-act { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================
   SCANNED CONTACTS  -  widget class: scanlist
   Styles the module's own markup, so the card is right even if the script
   never runs. The script only adds the button and the click.
   ========================================================================== */

/* anything the generic buyer-card code may have added */
.scanlist .fl-avatar,
.scanlist .fl-cta,
.scanlist .fl-role,
.scanlist .fl-social,
.scanlist .fl-search { display: none !important; }

/* fPHP prints .row on the list and col-* on each item; the grid replaces it */
.scanlist .f-list-users {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin: 0 0 26px !important;
}
.scanlist .f-list-users > .f-list-item {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.scanlist .f-list-users > .f-list-item:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
.scanlist .f-list-users > .f-list-item:focus-visible {
  outline: 2px solid var(--flare);
  outline-offset: 3px;
}

.scanlist .f-list-item-container {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 3px 14px;
  padding: 18px;
  align-items: center;
}

/* the scan photo, placed by the module itself */
.scanlist .f-list-item-teaser-image {
  grid-column: 1;
  grid-row: 1;
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--canvas);
}
.scanlist .f-list-item-teaser-image a { display: block; width: 100%; height: 100%; pointer-events: none; }
.scanlist .f-list-item-teaser-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* initials, added by the script when a contact has no photo */
.scanlist .sc-initials {
  grid-column: 1;
  grid-row: 1;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--royal), var(--flare));
  color: #fff;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 800;
}

/* The title anchor holds two spans: the name, then the company. */
.scanlist .f-list-item-title {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.scanlist .f-list-item-title a {
  display: block;
  text-decoration: none;
  pointer-events: none;
  min-width: 0;
}
.scanlist .f-list-item-title a span {
  display: block;
  overflow-wrap: anywhere;
}
.scanlist .f-list-item-title a span:first-child {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.scanlist .f-list-item-title a span:nth-child(n+2) {
  margin-top: 2px;
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--slate);
}

/* these two are empty on this list */
.scanlist .f-list-item-subtitle,
.scanlist .f-list-item-teaser-content { display: none !important; }

.scanlist .sc-cta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 15px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--violet-tint);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: var(--royal-deep);
  white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease), gap .18s var(--ease);
}
.scanlist .sc-cta i { font-size: 11px; }
.scanlist .f-list-users > .f-list-item:hover .sc-cta {
  background: var(--royal);
  color: #fff;
  gap: 11px;
}

/* --- export button, lifted into the search toolbar --- */
.sc-export {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 20px !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 10px !important;
  background: var(--surface-sunk) !important;
  color: var(--ink) !important;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  transition: all .16s var(--ease);
}
.sc-export:hover {
  background: var(--emerald-tint) !important;
  border-color: var(--emerald) !important;
  color: var(--emerald-ink) !important;
}
.sc-export i { font-size: 13px; }

@media (max-width: 620px) {
  .scanlist .f-list-users { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   36. Contact modal - round portrait and the field rows
   ========================================================================== */

/* --- alignment inside the contact modal --- */
.exp-modal.is-contact .exp-modal-title { line-height: 1.2; }
.exp-modal.is-contact .md-row { align-items: center; }
.exp-modal.is-contact .md-row-body { gap: 4px; }
.exp-modal.is-contact .md-rows { border-bottom: 0; }
.exp-modal.is-contact .md-row:first-child { border-top: 0; }

/* the head carries no avatar for a contact: the portrait is in the body */
.exp-modal.is-contact .exp-modal-avatar { display: none !important; }
.exp-modal.is-contact .exp-modal-id { gap: 0; }

.sc-hero {
  display: flex;
  justify-content: center;
  padding: 26px 26px 4px;
}
.sc-portrait {
  position: relative;
  display: block;
  width: 104px; height: 104px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--canvas);
  box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--line), 0 14px 30px -14px rgba(26,16,64,.5);
}
.sc-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* quick actions centre under the portrait */
.exp-modal.is-contact .sc-quick {
  justify-content: center;
  background: none;
  border-bottom: 1px solid var(--line);
  padding: 18px 26px 20px;
}

/* the raw fallback should still read as rows if it is ever used */
.md-raw { padding: 20px 26px; }
.md-raw label, .md-raw strong { display: block; font-size: 12px; color: var(--slate-light); }
     
     
     
     
     
     /* FORCE WEBAPP PAGE MENU TO DISPLAY */
.path-webapp-home- #fModule-66733,
.path-webapp-home- #fModule-66733 .fModuleContent,
.path-webapp-home- #fModule-66733 nav,
.path-webapp-home- #fModule-66733 ul.fMenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
}

.path-webapp-home- #fModule-66733 ul.fMenu {
    margin: 0 !important;
    padding: 20px !important;
    list-style: none !important;
    background: #fff !important;
}

.path-webapp-home- #fModule-66733 ul.fMenu > li {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    width: 100% !important;
    margin: 0 0 10px !important;
}

.path-webapp-home- #fModule-66733 ul.fMenu > li > a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 15px !important;
    background: #eee !important;
    color: #111 !important;
    text-decoration: none !important;
}

.path-webapp-home- #fModule-66733 .menu-item-text {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #111 !important;
}