/* =============================================================================
   /upload/ — SEND US YOUR FILES (2026-11-11)
   =============================================================================
   Sits on top of form-css-enquiry-native.css, which gives the band, the cream
   panel, the white card, the fields, the errors and the button. This adds only
   what that form doesn't have: the drop area, the list of chosen files and the
   progress while they send. Same palette, same rules: everything scoped under
   .cpu-form or prefixed cpu-, and no <p> inside, because phones force every
   <p> to 18px !important sitewide.

   Colours from the forms' palette: #B45309 amber, #123A52 navy links and
   button, #B08D63 field border, #FCFAF6 field fill, #148743 green for done,
   #8A2E12 errors, #767676 hints.
   ========================================================================== */

.cpu-intro {
  margin: 10px 0 2px 0;
  text-align: center;
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #032C2C;
}
.cpu-intro strong { font-weight: 700; }

.cpu-optional {
  font-weight: 400;
  color: #767676;
}

.cpu-nojs {
  max-width: 880px;
  margin: 0 auto 16px auto;
  padding: 14px 18px;
  background: #F6E4D6;
  border: 2px solid #8A2E12;
  border-radius: 10px;
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #8A2E12;
  text-align: center;
}


/* -- the drop area ------------------------------------------------------------
   One big target: the drawing, the words and a real label for the hidden file
   input. The input is hidden the accessible way (not display:none), so it can
   still take focus, and its focus ring is drawn on the label beside it.
   -------------------------------------------------------------------------- */
.cpu-drop {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px 22px;
  background: #FCFAF6;
  border: 2px dashed #B08D63;
  border-radius: 12px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.cpu-drop.is-over {
  background: #FFF4E6;
  border-color: #B45309;
  border-style: solid;
}
.cpu-drop.is-busy {
  opacity: 0.55;
}

.cpu-drop__art {
  flex: 0 0 210px;
  width: 210px;
  height: auto;
  display: block;
}

.cpu-drop__words {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Ubuntu', sans-serif;
}
.cpu-drop__big {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: #032C2C;
}
.cpu-drop__button {
  display: inline-block;
  margin: 4px 0;
  padding: 9px 18px;
  background: #123A52;
  color: #FFFFFF;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.cpu-drop__button:hover { filter: brightness(1.35); }
.cpu-drop.is-busy .cpu-drop__button { cursor: default; filter: none; }

.cpu-drop__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.cpu-drop__input:focus-visible + .cpu-drop__hint,
.cpu-drop__input:focus-visible ~ .cpu-drop__hint { color: #032C2C; }
.cpu-drop__words:focus-within .cpu-drop__button {
  outline: 3px solid rgba(180, 83, 9, 0.55);
  outline-offset: 2px;
}

.cpu-drop__hint {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: #767676;
}

/* One line per problem, when several files are turned away at once. */
#cpu-files-error { white-space: pre-line; }

.cpc-field--error .cpu-drop {
  border-color: #8A2E12;
  background: #FDF6F2;
}


/* -- the chosen files ---------------------------------------------------------- */
.cpu-list {
  margin: 10px 0 0 0;
  padding: 0;
  list-style: none;
  font-family: 'Ubuntu', sans-serif;
}
.cpu-list:empty { display: none; }

#contentWrapper .cpu-list li,
.cpu-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 4px 8px 10px;
  border-bottom: 1px solid #F0E6D8;
  font-size: 15px;
  line-height: 1.4;
  color: #37474F;
}
.cpu-list li:last-child { border-bottom: 0; }

.cpu-list__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.cpu-list__size {
  flex: none;
  color: #767676;
  white-space: nowrap;
}
.cpu-list__state {
  flex: none;
  min-width: 70px;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: #767676;
  white-space: nowrap;
}
.cpu-list__state:empty { display: none; }
.cpu-list li.is-sending .cpu-list__state { color: #B45309; }
.cpu-list li.is-done .cpu-list__state { color: #148743; }

.cpu-list__remove {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  color: #8A2E12;
  cursor: pointer;
}
.cpu-list__remove:hover,
.cpu-list__remove:focus-visible {
  background: #F6E4D6;
  border-color: #8A2E12;
  outline: none;
}

.cpu-total {
  margin: 6px 0 0 0;
  padding: 8px 10px 0 10px;
  border-top: 2px solid #E4D8C6;
  font-family: 'Ubuntu', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: #032C2C;
  text-align: right;
}
.cpu-total.is-over { color: #8A2E12; }


/* -- while sending ----------------------------------------------------------- */
.cpu-progress {
  margin: 22px 0 0 0;
  padding: 18px 20px;
  background: #F7F0E8;
  border-left: 4px solid #B45309;
  border-radius: 0 10px 10px 0;
  font-family: 'Ubuntu', sans-serif;
}
.cpu-progress[hidden] { display: none; }

.cpu-progress__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.cpu-progress__now {
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: #123A52;
  overflow-wrap: anywhere;
}
.cpu-progress__pct {
  flex: none;
  font-size: 22px;
  font-weight: 700;
  color: #B45309;
}

.cpu-progress__bar {
  display: block;
  width: 100%;
  height: 14px;
  margin: 10px 0 8px 0;
  border: 0;
  border-radius: 7px;
  background: #E4D8C6;
  overflow: hidden;
  -webkit-appearance: none;
          appearance: none;
}
.cpu-progress__bar::-webkit-progress-bar { background: #E4D8C6; border-radius: 7px; }
.cpu-progress__bar::-webkit-progress-value { background: #B45309; border-radius: 7px; transition: width 0.3s ease; }
.cpu-progress__bar::-moz-progress-bar { background: #B45309; border-radius: 7px; }

.cpu-progress__detail {
  min-height: 1.5em;
  font-size: 15px;
  line-height: 1.5;
  color: #37474F;
}
.cpu-progress__detail.is-problem { color: #8A2E12; font-weight: 700; }

.cpu-progress__keep {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: #767676;
}

.cpu-cancel {
  margin-top: 12px;
  padding: 7px 16px;
  background: #FFFFFF;
  border: 1px solid #B08D63;
  border-radius: 8px;
  font-family: 'Ubuntu', sans-serif;
  font-size: 15px;
  color: #032C2C;
  cursor: pointer;
}
.cpu-cancel:hover,
.cpu-cancel:focus-visible {
  border-color: #8A2E12;
  color: #8A2E12;
  outline: none;
}

/* For screen readers only: the progress, said now and then rather than on
   every tick. */
.cpu-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The fields can't be changed once the files start going. */
.cpu-form.is-busy .cpc-field__input,
.cpu-form.is-busy .cpc-field__textarea {
  background: #F4EFE8;
  color: #767676;
}


/* -- tablets and phones ------------------------------------------------------ */
@media only screen and (max-width: 900px) {
  .cpu-drop__art { flex-basis: 170px; width: 170px; }
}

@media only screen and (max-width: 700px) {
  .cpu-drop {
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px 18px 14px;
    text-align: center;
  }
  .cpu-drop__art { flex: none; width: 190px; }
  /* No dragging on a phone, so the button is the whole offer. */
  .cpu-drop__drag { display: none; }
  .cpu-drop__button {
    display: block;
    width: 100%;
    padding: 13px 18px;
    font-size: 18px;
  }
  /* Name and the remove button on the first line, size and progress under. */
  .cpu-list li { flex-wrap: wrap; row-gap: 2px; }
  .cpu-list__name { flex-basis: calc(100% - 42px); order: 0; }
  .cpu-list__remove { order: 1; }
  .cpu-list__size { order: 2; }
  .cpu-list__state { order: 3; min-width: 0; margin-left: auto; }
  .cpu-cancel { width: 100%; padding: 11px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cpu-drop,
  .cpu-drop__button { transition: none; }
  .cpu-progress__bar::-webkit-progress-value { transition: none; }
}