/* UAEPC — the one contact block. Name, WhatsApp, e-mail, in that order, on
 * every form the site has: quote, sell-to-us, pallet bid, download gate and
 * checkout. Five pages used to carry five wordings and five field orders.
 *
 * v2 is locked against the page it sits in. v1 named its classes `uc-*` and
 * assumed that was enough; it was not. The sell page carries
 * `.s-form label { color:#ffc966 }` at 0,1,1, which beat `.uc-l` at 0,1,0 and
 * painted the labels gold, and `.s-form input[type="text"]` at 0,2,1, which
 * beat even `.uc .uc-i` and made the fields white-on-transparent.
 *
 * So each class is written twice: `.uc .uc-i.uc-i` is 0,3,0 and holds against
 * the element-inside-a-class rules pages actually write. It looks odd and it is
 * deliberate — a component mounted into five pages cannot depend on all five
 * choosing not to reach into it. An id-scoped page rule would still win; if one
 * ever appears, fix that page rather than escalating here.
 *
 * Light only — the owner's rule. The sell page gets a white card on it rather
 * than a second stylesheet that can drift.
 *
 * /static is served with a 30-day cache, so this file is versioned by NAME.
 * Never edit it in place after release: ship v3 and repoint.
 */

.uc, .uc * { box-sizing: border-box; }

.uc {
  font-family: inherit;
  color: #0a0e1a;
  text-align: start;
}

/* The heading is optional: the quote form already numbers its own sections and
 * a second title there would just repeat itself. Pages that need it ask for it. */
.uc .uc-ttl.uc-ttl {
  font-size: 16px;
  font-weight: 800;
  color: #0a0e1a;
  margin: 0 0 5px;
  text-align: start;
}
.uc .uc-lead.uc-lead {
  font-size: 12.5px;
  color: #5f6368;
  line-height: 1.75;
  margin: 0 0 16px;
  text-align: start;
}

.uc .uc-f { margin-bottom: 14px; }
.uc .uc-f:last-child { margin-bottom: 0; }

.uc .uc-l.uc-l {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #0a0e1a;
  margin-bottom: 6px;
  letter-spacing: normal;
  text-transform: none;
}
.uc .uc-req.uc-req { color: #b91c1c; }

.uc .uc-i.uc-i {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 400;
  border: 1.5px solid #e8eaed;
  border-radius: 10px;
  background: #f8f9fb;
  color: #0a0e1a;
  outline: none;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.uc .uc-i.uc-i:focus {
  border-color: #f5a623;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(245, 166, 35, .12);
}
/* A phone number and an address are read left to right in every language. */
.uc .uc-i.uc-i.uc-ltr { direction: ltr; text-align: left; }
.uc .uc-i.uc-i[disabled] { background: #f1f3f6; color: #5f6368; cursor: not-allowed; }
.uc .uc-i.uc-i::placeholder { color: #9ca3af; opacity: 1; }

.uc .uc-i.uc-i.uc-bad { border-color: #b91c1c; background: #fef7f7; }
.uc .uc-i.uc-i.uc-bad:focus { box-shadow: 0 0 0 4px rgba(185, 28, 28, .10); }

.uc .uc-hint.uc-hint {
  font-size: 11.5px;
  color: #9ca3af;
  margin-top: 5px;
  text-align: start;
}

/* The error line only takes space once it has something to say. */
.uc .uc-e.uc-e {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #b91c1c;
  margin-top: 6px;
  text-align: start;
}
.uc .uc-e.uc-e.uc-on { display: flex; }
.uc .uc-e.uc-e i {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 50%;
  background: #b91c1c;
  color: #fff;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  line-height: 14px;
  text-align: center;
}

/* Shown on the field the visitor just proved by receiving a code there. */
.uc .uc-lock.uc-lock {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  color: #15803d;
  background: #dcfce7;
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

.uc .uc-note.uc-note {
  font-size: 11.5px;
  color: #5f6368;
  line-height: 1.7;
  background: #f8f9fb;
  border: 1px solid #eceff3;
  border-radius: 10px;
  padding: 11px 13px;
  margin-top: 2px;
  text-align: start;
}

/* On a dark page the block keeps its own white card so it stays legible.
 * The class sits on the same element as .uc, hence .uc.uc-card. */
.uc.uc-card {
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 14px;
  padding: 20px 20px 18px;
}

@media (max-width: 480px) {
  .uc .uc-i.uc-i { padding: 10px 12px; }
  .uc .uc-l.uc-l { font-size: 12px; }
  .uc.uc-card { padding: 16px 14px 14px; border-radius: 12px; }
}