/* ==========================================================================
   Western National FNOL — application styles
   --------------------------------------------------------------------------
   A ground-up rewrite of the Razor/Bootstrap/Propeller front end in plain CSS.
   No framework: the grid work is CSS grid and flexbox, and every colour, size
   and spacing value is a token declared in theme.css.

   Contents
     1.  Reset and base
     2.  Utilities
     3.  Chrome — header, footer, logo
     4.  Fluid layout (login, submitted, info pages)
     5.  Login
     6.  Landing
     7.  Claim layout (brand panel + form panel)
     8.  Wizard tabs
     9.  Form controls
     10. Repeatable rows
     11. Document upload
     12. Review and declaration
     13. Buttons
     14. Responsive
   ========================================================================== */

/* -----------------------------------------------------------------------
   1. Reset and base
   ----------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* `hidden` must win over any display rule (e.g. .declaration__item's flex). */
[hidden] { display: none !important; }

body {
  margin: 0;
  background-color: var(--surface-page);
  color: var(--colour-body-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 12px; font-weight: 400; line-height: 1.2; }
h1 { font-size: 43px; }
h2 { font-size: 32px; }
h3 { font-size: 21px; }
h4 { font-size: 18px; }
h5 { font-size: 20px; font-weight: 300; }

p { margin: 0 0 10px; }

a {
  color: var(--colour-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: var(--colour-primary); }

img { max-width: 100%; border: 0; }

button { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--colour-accent);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------
   2. Utilities
   ----------------------------------------------------------------------- */

.white        { color: var(--colour-secondary); }
.white:hover  { color: var(--colour-secondary); }
.muted        { color: var(--colour-mid-grey); }
.small        { font-size: 12px; }
.verysmall    { font-size: 11px; }
.light        { font-weight: 300; }
.thick-txt    { font-weight: 600; }
.text-center  { text-align: center; }
.text-danger  { color: var(--colour-error); }
.mt-30        { margin-top: 30px; }
.mb-30        { margin-bottom: 30px; }
.is-hidden    { display: none !important; }

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

.breadcrumbs {
  font-size: 11px;
  color: var(--colour-mid-grey);
  margin-bottom: 45px;
}
.breadcrumbs a {
  color: var(--colour-mid-grey);
  text-decoration: underline;
}

/* -----------------------------------------------------------------------
   3. Chrome — header, footer, logo
   ----------------------------------------------------------------------- */

.header {
  padding: var(--header-padding);
  height: var(--header-height);
}

.navbar-brand {
  display: inline-block;
  padding: 15px;
}

.logo-white { width: var(--logo-width); height: auto; display: block; }

.footer {
  margin-top: auto;
  text-align: center;
  padding-bottom: 20px;
}
.footer .small { line-height: 1.6; }

/* -----------------------------------------------------------------------
   4. Fluid layout — full-bleed hero behind centred content
   ----------------------------------------------------------------------- */

/* The wrapper is exactly the viewport and scrolls; the 734px floor belongs on
   the grid inside it, otherwise a short window pushes the footer out of reach
   with nothing able to scroll to it. */
.fluid-wrapper {
  position: fixed;
  inset: 0;          /* fills the window; 100vw would add the scrollbar's width */
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: var(--image-hero);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  overflow-y: auto;
}

.grid-wrapper {
  display: grid;
  grid-template-columns:
    minmax(var(--gutter-min), 1fr)
    minmax(auto, var(--content-measure))
    minmax(var(--gutter-min), 1fr);
  grid-template-rows: var(--header-height) auto;
  height: 100%;
  min-height: 734px;
  width: 100%;
}

.grid-wrapper > .header { grid-column: 1 / 4; }

.content-wrapper {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--colour-secondary);
}

/* -----------------------------------------------------------------------
   5. Login
   ----------------------------------------------------------------------- */

.login--content { text-align: center; }

.login--head {
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 1.37px;
  margin: 20px 0 24px;
  color: var(--colour-secondary);
}

.login--txt {
  font-size: 14px;
  margin: 0 0 10px;
  color: var(--colour-secondary);
}

.icon-container {
  position: relative;
  height: 300px;
  width: 650px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.usertype {
  height: 223px;
  width: 200px;
  margin: 0 30px;
  z-index: 1;
  color: var(--colour-secondary);
  font-size: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
  background: none;
  border: 0;
  padding: 0;
}

.usertype p { padding-top: 20px; margin-bottom: -20px; }

.usertype .icon {
  font-size: 55px;
  padding-top: 10px;
}

.icon-item {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid var(--colour-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
}

.icon-item:hover,
.icon-item.active {
  background-color: var(--colour-primary-soft);
  border-color: transparent;
  color: var(--colour-secondary);
  cursor: pointer;
}
.icon-item.active { cursor: default; }

/* the de-selected user type shrinks into the top-right corner */
.usertype.non-active {
  position: absolute;
  top: 46px;
  right: 0;
  opacity: 0.7;
  z-index: 0;
  transform: scale(0.5);
  cursor: pointer;
}

.back {
  display: none;
  padding: 20px;
  font-size: 24px;
  color: var(--colour-secondary);
  background: none;
  border: 0;
}
.back.non-active {
  display: block;
  position: absolute;
  top: 115px;
  left: 90px;
  cursor: pointer;
}

.login--form { display: none; }
.login--form.active {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.login--form-items {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-left: 20px;
}

.login--form-items > input {
  width: 190px;
  padding: 3px 5px;
  border: none;
  border-radius: var(--radius-sm);
  background-color: var(--colour-secondary);
  opacity: 0.9;
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--colour-body-text);
}
.login--form-items > input.error { border: solid 1px var(--colour-error); }
/* Live shows no focus ring on the mobile / OTP box. */
.login--form-items > input:focus,
.login--form-items > input:focus-visible { outline: none; }

.login-mobile-input,
.login-otp-input { display: none; }
.login-mobile-input.active,
.login-otp-input.active { display: inline-block; }

/* hide the number spinners so the field matches the original */
.login--form-items input[type="number"]::-webkit-outer-spin-button,
.login--form-items input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.login--form-items input[type="number"] { -moz-appearance: textfield; }

.login-submit {
  width: 25px;
  height: 25px;
  padding: 10px;
  margin-left: 10px;
  border: none;
  background-color: transparent;
  background-image: var(--image-arrow);
  background-repeat: no-repeat;
  background-position: 50%;
  cursor: pointer;
}

.login-submit.loading {
  background-image: none !important;
  border-radius: 50% !important;
  border-left: 2px solid var(--colour-secondary) !important;
  border-right: 2px solid transparent !important;
  border-top: 2px solid transparent !important;
  border-bottom: 2px solid transparent !important;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.error-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0 0;
  position: relative;
  min-height: 28px;
}
.error-container span { color: var(--colour-error); font-size: 12px; }

/* Live's login error: a solid red pill with a small pointer above it. */
.error-container span.active-error {
  background: #f90909;
  padding: 4px 12px;
  margin-bottom: 20px;
  position: relative;
  text-align: center;
  font-weight: bold;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #ffffff;
}
.error-container span.active-error::before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: red;
  position: absolute;
  top: -6px;
  left: 14px;
  border-left: 5px solid red;
  border-top: 5px solid red;
  border-bottom: 8px solid transparent;
  border-right: 8px solid transparent;
  transform: rotate(45deg);
  z-index: -1;
}

.not-received { display: none; padding: 24px; }
.not-received.active { display: block; }
.not-received a { cursor: pointer; text-decoration: underline; }

/* Phones, as the live theme's max-width: 480px login rules: a narrower
   column, smaller circles, and the back arrow and de-selected type pulled in
   so nothing runs past the screen edge. */
@media (max-width: 480px) {
  .grid-wrapper:has(> .header.--login) {
    grid-template-columns: minmax(1.2rem, 1fr) minmax(0, 34ch) minmax(1.2rem, 1fr);
    grid-template-rows: 110px auto;
  }
  .header.--login { padding: 10px 0 0 20px; height: 110px; }

  .login--head { font-size: 32px; }
  .login--txt { overflow-wrap: anywhere; }

  .icon-container { width: 100%; height: 300px; }
  .icon-item { border-width: 2px; height: auto; aspect-ratio: 1; flex: none; }

  .usertype {
    margin: 0 20px;
    font-size: 18px;
    height: 145px;
    width: 122px;
  }
  .usertype .icon { font-size: 33px; padding-top: 6px; }

  .back.non-active { top: 105px; left: -20px; }
  .usertype.non-active { top: 75px; right: -30px; }

  .login--form-items { margin-left: 0; }
}

/* -----------------------------------------------------------------------
   6. Landing — three columns and the icon drill-down
   -----------------------------------------------------------------------
   Views/Home/Index.cshtml: a white welcome column, the claim menu over the
   road photograph, and the make-a-call column. Each column is a full
   viewport tall; the middle one scrolls on its own when the menu is open. */

.home {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 100vh;
}

/* Top-right logout. A dark translucent pill so it reads over the call photo
   on desktop and over the white welcome column once the columns stack. */
.home__signout {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.55);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.home__signout:hover,
.home__signout:focus-visible { background: rgba(20, 20, 20, 0.8); }
.home__signout:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.home__signout svg { flex: none; }

.home__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  padding: 50px 40px 21px 50px;
  background: var(--surface-page);
}

.home__logo { width: var(--logo-width); height: auto; display: block; }

.intro-header {
  font-size: 27px;
  font-weight: 600;
  color: #414244;
  line-height: 1.3;
  max-width: 27ch;
  margin: 0;
}

.home__footer { font-family: Arial, sans-serif; line-height: 1.1; }
.home__links { font-size: 12px; font-weight: 600; color: #4f5252; line-height: 19px; margin: 0 0 20px; }
.home__links a { color: #414042; text-decoration: none; }
.home__links a:hover { text-decoration: underline; }
.home__fsp { font-size: 10px; color: #9b9b9b; margin: 0 0 20px; }

.home__middle,
.home__right {
  height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--colour-secondary);
  background-color: var(--colour-primary);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.home__middle {
  background-image: var(--image-landing-menu);
  overflow-y: auto;
  scrollbar-width: none;
  padding: 0 20px 40px 0;
}
.home__middle::-webkit-scrollbar { width: 0; }

/* Centre the menu while it fits; once it grows past the viewport the auto
   margins collapse and the column scrolls from the top. */
.home__intro { margin-top: auto; padding: 0 0 10px 60px; }
.home__menu  { margin-bottom: auto; }

.home__right {
  background-image: var(--image-landing-call);
  justify-content: center;
  padding: 70px 40px 21px 50px;
}

/* Natural size, left edge flush with the heading below it. */
.home__claims-icon { display: block; width: 33px; height: 41px; margin-bottom: 20px; }
.home__tenant-logo { width: 90px; margin-bottom: 30px; }

.home__heading {
  font-size: 26px;
  font-weight: 500;
  color: var(--colour-secondary);
  margin: 12px 0 8px;
}

.home__intro p,
.home__right p {
  font-size: 13px;
  letter-spacing: 0.5px;
  line-height: 1.7;
  max-width: 52ch;
  margin: 0;
}

.home__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  color: var(--colour-secondary);
  font-size: 28px;
  font-weight: 500;
  text-decoration: none;
}

.home__empty { padding: 20px 0 0 60px; font-size: 14px; }

/* The rows keep the original's left offsets (lvl1pos / lvl2apos / lvl3pos),
   which line each smaller row up roughly under the centre of the larger. */
.menu-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.menu-row--lvl1 { padding: 10px 10px 10px 45px; }
.menu-row--lvl2 { padding: 30px 10px 30px 70px; }
.menu-row--lvl3 { padding: 15px 10px 10px 92px; }

.icon-wrapper {
  text-align: center;
  margin: 0 15px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--colour-secondary);
  font: inherit;
}

.icon-wrapper.size-lvl1 { width: 140px; }
.icon-wrapper.size-lvl2 { width: 100px; }
.icon-wrapper.size-lvl3 { width: 60px; }

.icon-wrapper p {
  color: var(--colour-secondary);
  line-height: 1.2em;
  text-align: center;
  margin: 6px 0 0;
}
.icon-wrapper.size-lvl1 p { font-size: 15px; }
.icon-wrapper.size-lvl2 p { font-size: 14px; }
.icon-wrapper.size-lvl3 p { font-size: 12px; }

.icon-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: solid 2px var(--colour-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
}

.icon-wrapper:hover .icon-frame,
.icon-wrapper:focus-visible .icon-frame,
.icon-wrapper.chosen .icon-frame {
  background-color: var(--colour-primary-soft);
  border-color: transparent;
}
.icon-wrapper:focus-visible { outline: 2px solid var(--colour-secondary); outline-offset: 4px; border-radius: 4px; }

.icon-frame--content { line-height: 0.6em; color: var(--colour-secondary); }
.icon-wrapper.size-lvl1 .icon-frame--content { font-size: 30px; }
.icon-wrapper.size-lvl2 .icon-frame--content { font-size: 25px; }
.icon-wrapper.size-lvl3 .icon-frame--content { font-size: 20px; }

/* Original breakpoint: tiles shrink on narrower desktops. */
@media (max-width: 1480px) {
  .icon-wrapper { margin: 0 10px; }
  .icon-wrapper.size-lvl1 { width: 100px; }
  .icon-wrapper.size-lvl2 { width: 70px; }
  .icon-wrapper.size-lvl3 { width: 50px; }
  .menu-row--lvl2 { padding: 4px 10px 8px 60px; }
  .menu-row--lvl3 { padding: 0 10px 10px 70px; }
}

/* Tablet and phone: the three columns stack. */
@media (max-width: 991px) {
  .home { grid-template-columns: 1fr; }
  .home__left { height: auto; padding: 32px 16px 24px; gap: 28px; }
  .home__middle { height: auto; min-height: 70vh; padding: 40px 16px 40px 0; }
  .home__intro { padding-left: 16px; }
  .home__right { height: auto; padding: 48px 16px; }
  .menu-row--lvl1 { padding-left: 1px; }
  .menu-row--lvl2 { padding-left: 21px; }
  .menu-row--lvl3 { padding-left: 33px; }
}

/* Short or zoomed windows: tighten the menu so the whole open path, clipboard
   included, fits without the column scrolling. */
@media (max-height: 800px) and (min-width: 992px) {
  .home__middle { padding-bottom: 12px; }
  .home__intro { padding-top: 12px; }
  .home__claims-icon { width: 27px; height: 33px; margin-bottom: 8px; }
  .home__heading { margin: 6px 0 6px; }
  .icon-wrapper.size-lvl1 { width: 100px; }
  .icon-wrapper.size-lvl2 { width: 70px; }
  .icon-wrapper.size-lvl3 { width: 50px; }
  .menu-row--lvl1 { padding: 6px 10px 6px 45px; }
  .menu-row--lvl2 { padding: 10px 10px 10px 60px; }
  .menu-row--lvl3 { padding: 4px 10px 6px 70px; }
}

@media (max-width: 480px) {
  .home__phone { font-size: 24px; }
  .menu-row--lvl2 { padding-top: 20px; padding-bottom: 12px; }
}

/* -----------------------------------------------------------------------
   7. Claim layout — brand panel beside the form
   ----------------------------------------------------------------------- */

/* The brand panel and step rail hold still; only the form column scrolls,
   which is what the original achieved with its m-view / m-scroll pair. */
.claim-layout {
  display: grid;
  grid-template-columns: 4fr 8fr;
  height: 100vh;
  overflow: hidden;
}

/* As .mainLeftCol: logo, title and footer spread with space-between, so the
   title sits in the vertical middle, all three on the same 50px left edge. */
.brand-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 50px 40px 20px 50px;
  color: var(--colour-secondary);
  height: 100vh;
  overflow-y: auto;
}

.brand-panel .navbar-brand { padding: 0; align-self: flex-start; }

.brand-panel__title { padding-right: 48px; }
.brand-panel__title h5 {
  font-size: 25px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--colour-secondary);
  margin: 0 0 8px;
}
.brand-panel__title h1 {
  font-size: 58px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--colour-secondary);
  margin: 0;
}

.brand-panel__foot { line-height: 1.5; }
.brand-panel__foot a { color: var(--colour-secondary); text-decoration: none; font-size: 13px; }
.brand-panel__foot a:hover { text-decoration: underline; }
.brand-panel__legal { display: block; margin-top: 20px; padding-bottom: 20px; font-size: 10px; }

@media (max-width: 1400px) and (orientation: landscape) {
  .brand-panel__title h5 { font-size: 20px; }
  .brand-panel__title h1 { font-size: 43px; }
}

.form-panel {
  display: grid;
  grid-template-columns: 5fr 7fr;
  background-color: var(--surface-page);
  height: 100vh;
  overflow: hidden;
}

/* -----------------------------------------------------------------------
   8. Wizard tabs — the numbered step list
   ----------------------------------------------------------------------- */

.form-tabs-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
  border-right: 1px solid var(--border-subtle);
  height: 100vh;
  overflow-y: auto;
}

.intro-text { padding: 0 50px 30px; }
.intro-text__icon { display: block; width: 27px; height: 34px; }
.intro-text h3 { font-weight: 700; margin-top: 30px; font-size: 18px; }
.intro-text p  { font-size: 13px; color: var(--colour-muted-text); }

.form-tabs { list-style: none; margin: 0; padding: 0; }

.form-tabs li { position: relative; }

.form-tabs button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 50px 16px 50px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--colour-body-text);
}

.form-tabs li.active > button { background-color: var(--colour-neutral); }

.form-tabs button::after {
  content: "";
  position: absolute;
  right: 15%;
  top: 50%;
  width: 13px;
  height: 13px;
  padding: 3px;
  border: solid var(--colour-light-grey);
  border-width: 0 1px 1px 0;
  transform: translateY(-50%) rotate(-45deg);
}
.form-tabs li.active > button::after { border-color: var(--colour-primary); }

/* span.tab-number on the live theme: an outlined circle, grey until it is the
   current step, then a 2px dark ring with a dark number. Never filled. */
.tab-number {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--colour-light-grey);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  color: var(--colour-light-grey);
}

.form-tabs li.active .tab-number {
  border: 2px solid var(--colour-primary);
  color: var(--colour-primary);
}

/* Live's .nav.nav-tabs li: a #f4f0ec line under every step. A step not yet
   unlocked is disabled, as the original's tabs were. */
.form-tabs li { border-bottom: 1px solid var(--colour-neutral); }
.form-tabs button[disabled] { cursor: default; opacity: 0.6; }

.tab-label { font-size: 15px; line-height: 1.3; }

/* -----------------------------------------------------------------------
   9. Form controls
   ----------------------------------------------------------------------- */

.form-col {
  padding: 40px 45px 60px;
  background-color: var(--surface-sunken);
  height: 100vh;
  overflow-y: auto;
}

.step-panel { display: none; }
.step-panel.active { display: block; }

.card {
  background-color: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  margin-bottom: 30px;
}
.card__body { padding: 24px 22px 8px; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}
.field-grid .field--full { grid-column: 1 / -1; }

.field { position: relative; margin-bottom: 26px; }

.field label.control-label {
  display: block;
  font-size: 15px;
  color: var(--colour-muted-text);
  margin-bottom: 4px;
}
/* The live portal puts the asterisk in front of the label. */
.field .req { color: var(--colour-error); margin-right: 4px; }

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="number"],
.field input[type="date"],
.field input[type="datetime-local"],
.field input[type="time"],
.field select,
.field textarea {
  width: 100%;
  padding: 6px 2px;
  font-family: var(--font-primary);
  font-size: 16px;
  color: var(--colour-body-text);
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--colour-light-grey);
  border-radius: 0;
  transition: border-color 0.2s ease;
}

.field textarea { min-height: 84px; resize: vertical; }

/* "Use business address" tick box above a copied address. */
.field--copy { margin-bottom: 18px; }

.field select {
  appearance: none;
  background-image: url("../assets/images/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px;
  padding-right: 20px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom: 2px solid var(--colour-primary);
  padding-bottom: 5px;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-bottom-color: var(--colour-error); }

/* As live's span.small.text-danger under a field: Bootstrap's #a94442 at 85%. */
.field__error {
  display: block;
  min-height: 14px;
  margin-top: 4px;
  font-size: 85%;
  color: #a94442;
}

/* Floating label (Propeller, as live): in the box while it is empty, above
   it on focus or once filled. #4F5252 at 14px, as live's label. */
.field--float {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 18px;
}
/* Empty, the label and the box share one grid cell, so a long label that
   wraps on a narrow screen grows the cell instead of being cut off or
   spilling out of the box. It sits on the box's line, or at the top of a
   textarea. The hint and error fall into the rows below. */
.field--float > label.control-label,
.field--float > input,
.field--float > textarea { grid-row: 1; grid-column: 1; }
.field--float > label.control-label {
  align-self: end;
  margin: 0 0 8px 2px;
  font-size: 14px;
  color: #4f5252;
  pointer-events: none;
  transition: font-size 0.2s ease;
}
.field--float:has(textarea) > label.control-label { align-self: start; margin-top: 8px; }
/* Up, the label takes its own row above the box. One line (16px + 2px) is
   the 18px padding it replaces, so a short label does not jump. */
.field--float:focus-within,
.field--float.is-filled { padding-top: 0; }
.field--float:focus-within > label.control-label,
.field--float.is-filled > label.control-label {
  align-self: auto;
  margin: 0 0 2px 2px;
  font-size: 12px;
  line-height: 16px;
}
.field--float:focus-within > input,
.field--float:focus-within > textarea,
.field--float.is-filled > input,
.field--float.is-filled > textarea { grid-row: 2; }

.field__hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--colour-mid-grey);
}

/* radio and checkbox groups */
.choice-group { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 4px; }

.choice {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  cursor: pointer;
}
.choice input { accent-color: var(--colour-primary); width: 16px; height: 16px; }

.fieldset-legend {
  font-size: 15px;
  color: var(--colour-muted-text);
  margin-bottom: 6px;
}

.section-title {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 600;
  color: var(--colour-primary);
}

.step-head { margin-bottom: 20px; }
.step-head h3 { font-size: 26px; }

/* -----------------------------------------------------------------------
   10. Repeatable rows — third parties, witnesses, items, accessories
   ----------------------------------------------------------------------- */

.repeatable__row {
  position: relative;
  padding: 18px 18px 0;
  margin-bottom: 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--surface-page);
}

.repeatable__row-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--colour-mid-grey);
  margin-bottom: 12px;
}

.repeatable__remove {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: 0;
  color: var(--colour-mid-grey);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.repeatable__remove:hover { color: var(--colour-error); }

.repeatable__empty {
  font-size: 12px;
  color: var(--colour-mid-grey);
  padding: 8px 0 14px;
}

/* -----------------------------------------------------------------------
   11. Document upload
   ----------------------------------------------------------------------- */

.upload {
  border: 1px dashed var(--colour-light-grey);
  border-radius: var(--radius-md);
  padding: 26px 20px;
  text-align: center;
  background-color: var(--surface-page);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.upload.is-dragover {
  border-color: var(--colour-primary);
  background-color: var(--colour-neutral);
}
.upload .icon { font-size: 30px; color: var(--colour-primary); }
.upload p { font-size: 13px; color: var(--colour-muted-text); margin: 10px 0 14px; }

.upload__list { list-style: none; margin: 16px 0 0; padding: 0; text-align: left; }
.upload__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background-color: var(--colour-neutral);
  margin-bottom: 6px;
  font-size: 12px;
}
.upload__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload__size { color: var(--colour-mid-grey); flex: 0 0 auto; }

/* one labelled button per document type, files listed underneath */
.upload-groups { list-style: none; margin: 16px 0 0; padding: 0; }
/* relative: anchors the visually-hidden file input here. Without it the input
   is placed against the page wrapper, far below the scrolled form, and the
   focus it gets back after the file dialog scrolls the whole page off. */
.upload-group { position: relative; margin-bottom: 14px; }
/* Live's upload-btn: borderless, left-aligned #424342 text, 16px, with the
   icon font's upload mark ("B") in a thin circle on the left; once the type
   has a file the circle fills dark with the tick (","). */
.btn.upload-group__button {
  position: relative;
  display: flex;
  justify-content: flex-start;
  width: 100%;
  max-width: 300px;
  height: auto;
  min-width: 0;
  padding: 8px 22px 8px 52px;
  border: 0;
  background: transparent;
  color: var(--colour-dark-grey);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.33;
  white-space: normal;
  text-align: left;
}
.btn.upload-group__button::before {
  position: absolute;
  left: 8px;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #666666;
  border-radius: 50%;
  font-size: 14px;
}
.btn.upload-group__button.is-active::before {
  content: "\2c";
  background: var(--colour-primary);
  border-color: var(--colour-primary);
  color: #ffffff;
}
.upload-group .upload__list { margin-top: 8px; }

/* "Before you begin!" modal on the claim form, as live's Bootstrap modal:
   600px, 6px corners and shadow; .modal-body.custom 20/50 padding with a
   centred .popup-header (20x25 icon, 30px title); 18px bold sub-heading,
   16px text; a centred footer with a top rule and both buttons primary. */
.modal {
  max-width: 600px;
  width: calc(100% - 20px);
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  color: var(--colour-body-text);
  background-color: var(--colour-secondary);
}
.modal::backdrop { background-color: rgba(0, 0, 0, 0.5); }
.modal__body { padding: 20px 50px; }
.modal__head { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
.modal__head img { width: 20px; height: 25px; }
.modal__head h2 { margin: 10px 0 0; font-size: 30px; color: var(--colour-body-text); }
.modal__sub { font-weight: bold; margin-bottom: 10px; font-size: 18px; }
.modal p, .modal li { font-size: 16px; line-height: 1.5; }
.modal ul { padding-left: 20px; }
.modal__foot {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 15px;
  border-top: 1px solid #e5e5e5;
}

/* -----------------------------------------------------------------------
   12. Review and declaration
   ----------------------------------------------------------------------- */

/* Live's review tabs (.review.nav-tabs .submit-tab-buttons): a 51px circle
   with the step number and a short label under it. The active tab has a dark
   ring; "Accept & Proceed" ticks them all (filled dark, white tick). */
.review-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 30px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.review-tab button {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.review-tab__circle {
  width: 51px;
  height: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--colour-light-grey);
  border-radius: 50%;
  color: var(--colour-light-grey);
  transition: all 0.3s ease;
}
.review-tab__number { font-size: 21px; font-weight: 700; line-height: 1; }
.review-tab__tick { display: none; }
.review-tab__tick::before { font-family: "global-choices-infographic"; content: "\2c"; font-size: 15px; }
.review-tab__label {
  margin-top: 7px;
  padding-bottom: 6px;
  border-bottom: 3px solid transparent;
  font-size: 11px;
  line-height: 1.1em;
  color: var(--colour-mid-grey);
  text-align: center;
}
.review-tab button:hover .review-tab__circle { border-color: var(--colour-primary); color: var(--colour-primary); }

/* The section on screen: dark ring and number, bold label with a bar under
   it, so it is clear which summary is showing. */
.review-tab.active .review-tab__circle { border-color: var(--colour-primary); color: var(--colour-primary); }
.review-tab.active .review-tab__label {
  color: var(--colour-primary);
  font-weight: 700;
  border-bottom-color: var(--colour-primary);
}

/* After "Accept & Proceed" every tab is ticked (filled dark, white tick);
   the one on screen keeps an outer ring as well as the bold, underlined label. */
.review-tab.ticked .review-tab__circle { background-color: var(--colour-primary); border-color: var(--colour-primary); color: #ffffff; }
.review-tab.ticked .review-tab__label { color: var(--colour-primary); }
.review-tab.ticked .review-tab__number { display: none; }
.review-tab.ticked .review-tab__tick { display: block; }
.review-tab.ticked.active .review-tab__circle { box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--colour-primary); }
.review-tab button[disabled] { cursor: default; opacity: 0.5; }
.review-tab button[disabled]:hover .review-tab__circle { border-color: var(--colour-light-grey); color: var(--colour-light-grey); }

#reviewBody { padding-top: 18px; }
.review__buttons { padding-top: 10px; }

/* Live's .btn-primary-black ("Accept & Proceed"). */
.btn-primary-black {
  background-color: #414042;
  border-color: #414042;
  color: #ffffff;
}
.btn-primary-black:hover,
.btn-primary-black:focus {
  background-color: #ffffff;
  border-color: #424342;
  color: #424342;
}

/* Declaration, Broker - Declaration and Privacy policy: Bootstrap panels. */
.declaration__panel {
  border: 1px solid #dddddd;
  border-radius: 4px;
  margin: 18px 0 0;
}
.declaration__title {
  margin: 0;
  padding: 10px 15px;
  font-size: 16px;
  color: #333333;
  background-color: #f5f5f5;
  border-bottom: 1px solid #dddddd;
  border-radius: 3px 3px 0 0;
}
.declaration__panel .declaration__item { padding: 15px 15px 0; margin-bottom: 0; }
.declaration__panel .field__error { padding: 0 15px 12px 41px; }

.review__section { margin-bottom: 10px; }

.review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.review__head h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--colour-primary); }

.review__edit {
  background: none;
  border: 0;
  color: var(--colour-accent);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.review__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 0;
  padding: 14px 0 4px;
}
.review__list div { margin-bottom: 14px; }
.review__list dt { font-size: 11px; color: var(--colour-mid-grey); margin-bottom: 2px; }
.review__list dd { margin: 0; font-size: 13px; word-break: break-word; }
.review__list dd:empty::after { content: "—"; color: var(--colour-light-grey); }

.declaration {
  border-top: 1px solid var(--border-subtle);
  padding-top: 20px;
  margin-top: 10px;
}
.declaration__item { display: flex; gap: 10px; margin-bottom: 20px; }
.declaration__item input { margin-top: 3px; accent-color: var(--colour-primary); width: 16px; height: 16px; }
.declaration__item p { font-size: 12px; color: var(--colour-muted-text); margin: 0; }

/* -----------------------------------------------------------------------
   13. Buttons
   ----------------------------------------------------------------------- */

.button-pane {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
}
.button-pane .btn { min-width: 174px; }

/* As the live theme's .btn: square, 61px tall, at least 174px wide, normal
   case. Primary and secondary are white with a 2px outline and fill with
   the outline colour on hover and focus. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 61px;
  min-width: 174px;
  padding: 0 26px;
  border: 2px solid transparent;
  border-radius: 0;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
  background-color: var(--colour-secondary);
  border-color: var(--colour-primary);
  color: var(--colour-primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--colour-primary);
  color: var(--colour-secondary);
}

.btn-secondary {
  background-color: var(--colour-secondary);
  border-color: var(--colour-dark-grey);
  color: var(--colour-dark-grey);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--colour-dark-grey);
  color: var(--colour-secondary);
}

.btn-ghost {
  background-color: transparent;
  border-color: var(--colour-light-grey);
  color: var(--colour-dark-grey);
}
.btn-ghost:hover { border-color: var(--colour-primary); color: var(--colour-primary); }

.btn[disabled] { opacity: 0.3; cursor: default; pointer-events: none; }

.btn-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--colour-accent);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* submitted / confirmation panel, as live's .submitted-wrapper,
   .submittedBodyContainer and .submitted-text: its own photograph, and the
   message in a 3px white outlined box. */
.fluid-wrapper--submitted {
  background-image: url("../assets/images/submitted-banner-web.png");
  background-position: center center;
}
.submitted-panel {
  width: 50vw;
  max-width: 843px;
  padding: 60px 25px;
  border: 3px solid var(--colour-secondary);
  text-align: center;
  color: var(--colour-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.submitted-panel h4 { font-size: 32px; margin: 18px 0 0; color: var(--colour-secondary); }
.submitted-panel p  { font-size: 13px; padding-top: 10px; margin: 0; }
.submitted-panel .btn { margin-top: 5%; }
.submitted-panel h3 { font-size: 37px; margin: 18px 0 0; color: var(--colour-secondary); }
.submitted-panel p.error { font-size: 15px; }

/* Live's .error-wrapper (the 404 page): its own photograph per screen size. */
.fluid-wrapper--error {
  background-color: #b9b9b9;
  background-image: url("../assets/images/error-404-banner-desktop.png");
}
@media (max-width: 1200px) {
  .fluid-wrapper--error { background-image: url("../assets/images/error-404-banner-tablet.png"); }
}
@media (max-width: 767px) {
  .fluid-wrapper--error { background-image: url("../assets/images/error-404-banner-mobile.png"); }
}
.submitted-panel .icon { font-size: 46px; }
@media (max-width: 1400px) {
  .submitted-panel { width: 74vw; padding: 30px 25px; }
  .submitted-panel h4 { font-size: 24px; }
  .submitted-panel h3 { font-size: 36px; }
}
/* Live's .finish-button: white, black 16px/600, square, 130 x 53. */
.submitted-panel .btn-primary {
  height: 53px;
  min-width: 0;
  width: 130px;
  padding: 0;
  border: 0;
  background-color: #ffffff;
  color: #000000;
  font-size: 16px;
}

/* static info pages (terms), as live's .disclaimer-overide page: its own
   photograph (web/tablet/phone), then the same outlined box as the
   submitted page with white text straight on the photo. The page scrolls,
   not the box. */
.fluid-wrapper--terms {
  background-color: #b9b9b9;
  background-image: url("../assets/images/disclaimer-page-web.png");
  background-position: center center;
}
@media (max-width: 1024px) {
  .fluid-wrapper--terms { background-image: url("../assets/images/disclaimer-page-tablet.png"); }
}
@media (max-width: 480px) {
  .fluid-wrapper--terms { background-image: url("../assets/images/disclaimer-page-mobile.png"); }
}
.fluid-wrapper--terms .grid-wrapper { height: auto; }
.fluid-wrapper--terms .content-wrapper { justify-content: flex-start; }
.fluid-wrapper--terms .footer { margin-top: 30px; }
.fluid-wrapper--terms .footer a { color: var(--colour-secondary); }

.prose-panel {
  width: 50vw;
  max-width: 843px;
  padding: 60px 25px;
  border: 3px solid var(--colour-secondary);
  color: var(--colour-secondary);
}
.prose-panel__icon { display: block; margin: 0 auto; }
.prose-panel h3 {
  color: var(--colour-secondary);
  font-size: 37px;
  font-weight: 400;
  text-align: center;
  margin: 18px 0 20px;
}
.prose-panel h4 { font-size: 13px; font-weight: 400; margin: 1.4em 0 0; color: var(--colour-secondary); }
.prose-panel p, .prose-panel li { font-size: 13px; line-height: 1.6; margin: 0; }
.prose-panel .prose-panel__lead { font-size: 16px; text-align: center; margin-bottom: 20px; }
.prose-panel a { color: var(--colour-secondary); font-weight: 700; text-decoration: underline; }
.prose-panel__actions { text-align: center; margin-top: 26px; }
/* "Go Home" is live's .finish-button. */
.prose-panel .prose-panel__actions .btn {
  height: 53px;
  min-width: 0;
  width: 130px;
  padding: 0;
  border: 0;
  background-color: #ffffff;
  color: #000000;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
@media (max-width: 1400px) {
  .prose-panel { width: 74vw; padding: 30px 25px; }
  .prose-panel h3 { font-size: 36px; }
}

/* -----------------------------------------------------------------------
   14. Responsive
   ----------------------------------------------------------------------- */

@media (max-width: 1100px) {
  /* Below this width the page scrolls as one document again. */
  .claim-layout { grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible; }
  .brand-panel { height: auto; min-height: 240px; padding: 24px 28px; overflow: visible; }
  .brand-panel__title h1 { font-size: 30px; }
  .form-panel { grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible; }
  .form-col { height: auto; overflow: visible; }
  .form-tabs-col {
    height: auto;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
    padding: 24px 0;
  }
  .form-tabs { display: flex; overflow-x: auto; }
  .form-tabs li { flex: 0 0 auto; }
  .form-tabs button { padding: 12px 22px; }
  .form-tabs button::after { display: none; }
  .intro-text { padding: 0 22px 20px; }
}

@media (max-width: 880px) {
  .field-grid { grid-template-columns: 1fr; }
  .review__list { grid-template-columns: 1fr; }
  .form-col { padding: 24px 20px 48px; }
  .button-pane { flex-direction: column-reverse; }
  .button-pane .btn { width: 100%; }
}

/* Phones: the popup's two buttons share the width instead of forcing a
   sideways scroll, and all four review tabs fit on one row. */
@media (max-width: 480px) {
  .modal__body { padding: 16px 20px; }
  .modal__head h2 { font-size: 24px; }
  .modal__foot { gap: 12px; }
  .modal__foot .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; }
  .review-tabs { gap: 0 6px; justify-content: space-between; }
  .review-tab button { width: 64px; }
  .review-tab__circle { width: 44px; height: 44px; }
  .review-tab__number { font-size: 18px; }
}

/* Live's .header at 1400px and narrower: 100px tall, 20/80/40/30 padding. */
@media (max-width: 1400px) {
  :root { --header-height: 100px; --header-padding: 20px 80px 40px 30px; }
}

/* Short windows — most laptops give a viewport under 700px once the browser
   chrome is accounted for. Tighten the vertical rhythm so the login still
   fits, footer included, instead of relying on the wrapper scrolling. */
@media (max-height: 800px) and (min-width: 761px) {
  :root { --header-height: 110px; --header-padding: 26px 80px 26px 35px; }

  .grid-wrapper { min-height: 0; }

  .login--head { font-size: 32px; margin: 8px 0 14px; }
  .login--txt  { margin-bottom: 4px; }

  .icon-container { height: 236px; }
  .usertype { height: 186px; width: 168px; font-size: 18px; }
  .usertype .icon { font-size: 46px; }
  .usertype p { padding-top: 14px; }
  .usertype.non-active { top: 30px; }
  .back.non-active { top: 88px; left: 60px; }

  .footer { padding-bottom: 12px; }
}

@media (max-width: 760px) {
  :root { --header-height: 110px; --header-padding: 20px 20px 20px 12px; }

  .fluid-wrapper { position: relative; height: auto; min-height: 100vh; }
  .grid-wrapper { grid-template-columns: 16px 1fr 16px; min-height: 100vh; height: auto; }
  .content-wrapper { padding-bottom: 32px; }

  .login--head { font-size: 30px; }
  .icon-container { width: 100%; height: auto; padding: 10px 0 24px; }
  .usertype { margin: 0 10px; width: 150px; height: 173px; font-size: 17px; }
  .usertype .icon { font-size: 42px; }
  .usertype.non-active { position: static; transform: scale(0.75); }
  .back.non-active { position: static; margin-bottom: 8px; }

  .prose-panel { padding: 22px 20px; max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}