/* ==========================================================================
   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%; }

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;
  width: 100vw;
  height: 100vh;
  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); }

.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; }

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

/* -----------------------------------------------------------------------
   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);
}

/* A finished step keeps the outlined circle but swaps its number for a tick,
   and says so under the label. */
.form-tabs li.done .tab-number {
  border-color: var(--colour-primary);
  color: var(--colour-primary);
  font-size: 0;
}
.form-tabs li.done .tab-number::before {
  content: "";
  width: 6px;
  height: 11px;
  margin-top: -3px;
  border: solid var(--colour-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

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

.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); }

.field__error {
  display: block;
  min-height: 14px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--colour-error);
}

.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; }
.upload-group__button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  justify-content: flex-start;
}
.upload-group__button.is-active { border-color: var(--colour-primary); color: var(--colour-primary); }
.upload-group__button .icon { font-size: 20px; }
.upload-group .upload__list { margin-top: 8px; }

/* "Before you begin!" modal on the claim form */
.modal {
  max-width: 480px;
  width: calc(100% - 32px);
  padding: 28px 30px 24px;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--colour-body-text);
  background-color: var(--colour-secondary);
}
.modal::backdrop { background-color: rgba(0, 0, 0, 0.5); }
.modal__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.modal__head h2 { margin: 0; font-size: 26px; color: var(--colour-primary); }
.modal__sub { font-weight: 600; color: var(--colour-primary); }
.modal p, .modal li { font-size: 14px; line-height: 1.6; }
.modal ul { padding-left: 20px; }
.modal__foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }

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

.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: 160px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

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

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

.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 */
.submitted-panel {
  max-width: 620px;
  text-align: center;
  color: var(--colour-secondary);
}
.submitted-panel .icon { font-size: 46px; }
.submitted-panel h4 { font-size: 22px; margin: 18px 0 14px; color: var(--colour-secondary); }
.submitted-panel p  { font-size: 14px; line-height: 1.7; margin-bottom: 26px; }
.submitted-panel .btn-primary {
  background-color: var(--colour-secondary);
  border-color: var(--colour-secondary);
  color: var(--colour-primary);
}
.submitted-panel .btn-primary:hover {
  background-color: transparent;
  color: var(--colour-secondary);
}

/* static info pages (terms) */
.prose-panel {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-md);
  padding: 34px 38px;
  max-height: 62vh;
  overflow-y: auto;
  color: var(--colour-body-text);
  width: 100%;
}
.prose-panel h3 { color: var(--colour-primary); }
.prose-panel p, .prose-panel li { font-size: 13px; line-height: 1.7; }

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

@media (max-width: 1100px) {
  /* Below this width the page scrolls as one document again. */
  .claim-layout { grid-template-columns: 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: 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%; }
}

/* 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;
  }
}