/* ==========================================================================
   data-next-address — the SDK-built address block
   --------------------------------------------------------------------------
   The SDK builds the fields a country collects, so the markup is not known in
   advance: a row holds one field in Germany and three in the US, and a field
   exists only where that country asks for it. Everything here is therefore
   written against what is stable — the hooks the SDK always emits — never
   against a field count or a nth-child position.

   Hooks the SDK emits:
     .next-address-row      + [data-next-address-row="0"]     one layout row
     .next-address-field    + [data-next-address-field="city"] one field wrapper
     .next-address-label                                       its <label>
     .next-address-control                                     its <input>/<select>
     .form-group            (also on the field wrapper — the SDK queries for it)

   The renderer puts the <label> *after* its control so `control + label` can
   reach it; `for`/`id` carries the pairing, so reading order is unaffected.

   The SDK also puts its own state classes on the control, the same ones a
   hand-written field gets: .next-error-field, .no-error, .next-focused.
   ========================================================================== */

.next-address-row {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  width: 100%;
}

.next-address-row + .next-address-row {
  margin-top: 1rem;
}

/* flex-basis, not a width: a row of three has to fit the same track as a row of
   one, and the SDK sets flex-grow from the country's own span when it has one.
   `relative` is what the floating label below is positioned against. */
.next-address-field {
  flex: 1 1 8rem;
  min-width: 0;
  position: relative;
}

/* --------------------------------------------------------------------------
   Floating label, in CSS only.

   The SDK's own floating labels run once from UIService.initialize() and look
   for a `.label-checkout` inside a `.form-group`. These fields are built after
   that has run, so they would never be picked up. Doing it in CSS sidesteps the
   timing entirely: the renderer always sets a placeholder (a single space when
   the country names none), which is what makes :placeholder-shown answer.
   -------------------------------------------------------------------------- */
.next-address-label {
  position: absolute;
  top: 0.45rem;
  left: 13px;
  z-index: 2;
  pointer-events: none;
  color: #6b6b6b;
  font-size: 0.7rem;
  line-height: 1;
  transition: opacity 0.12s, transform 0.12s;
}

/* Sits in the middle of an empty box; rises to the top once there is a value.
   A <select> always shows something, so its label stays risen. */
.next-address-control:placeholder-shown:not(:focus) + .next-address-label {
  opacity: 0;
  transform: translateY(0.55rem);
}

.next-address-hint {
  color: #6b6b6b;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   The control.

   These declarations are the ones .input-flds carries in next-core.css. The
   DRY alternative is to add .next-address-control to those selectors instead
   and delete this block — do that if the input look ever changes, so the two
   cannot drift.
   -------------------------------------------------------------------------- */
.next-address-control {
  /* Stated rather than inherited: width + padding + border overflow the row without it,
     and this block has to survive being dropped into a page that never set it. */
  box-sizing: border-box;
  width: 100%;
  height: 3rem;
  /* Room for the floating label above the value. */
  padding: 1rem 12px 0;
  font-size: 0.925rem;
  background-color: #fff;
  border: 1px solid #b9b9b9;
  border-radius: var(--radius--input);
  box-shadow: 0 0 0 1px #0000;
  transition: all 0.12s;
}

.next-address-control:hover {
  background-color: #fdfdfd;
}

/* `.next-focused` is the SDK's own, set alongside the real focus. Both are listed so the
   ring survives a browser that has moved focus elsewhere while the SDK still marks it. */
.next-address-control:focus,
.next-address-control.next-focused {
  border-color: var(--brand--color--primary);
  box-shadow: 0 0 0 1px var(--brand--color--primary-dark);
  outline: none;
}

/* The province select before a country has been chosen: the SDK disables it and parks it
   on "Select Country First". It has to read as waiting rather than as broken. */
.next-address-control:disabled {
  background-color: #f4f4f5;
  border-color: #d8d8d8;
  color: #8a8a8a;
  cursor: not-allowed;
}

.next-address-control:disabled + .next-address-label {
  color: #a0a0a0;
}

select.next-address-control {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23555'%3E%3Cpath d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 34px;
}

/* intl-tel-input wraps the phone control in its own element, which is inline-block and
   so does not fill the field. The flag it adds sits inside that wrapper. */
.next-address-field .iti {
  width: 100%;
}

/* The SDK writes this on a failed field, exactly as it does a hand-written one. */
.next-address-control.next-error-field {
  background-color: #fff;
  border-color: #c51a00;
  box-shadow: 0 0 0 1px #c51a00;
}

.next-address-control.next-error-field + .next-address-label {
  color: #c51a00;
}

/* The SDK writes the message into the field wrapper, below the control. */
.next-address-field .next-error-label {
  color: #c51a00;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Set by `location-field-visibility.ts` when a page asks for the address rows to stay
   collapsed. Declared here so the class does something wherever it lands. */
.next-location-hidden {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Per-field and per-country overrides.

   Reach a field by name rather than by position: which row it lands in, and
   how many fields share that row, is the country's decision.
   -------------------------------------------------------------------------- */

/* A postcode is short everywhere; let the fields beside it take the slack. */
[data-next-address-field='postal'],
[data-next-address-field='billing-postal'] {
  flex: 0 1 9rem;
}

/* The country select reads better on a line of its own. */
[data-next-address-field='country'],
[data-next-address-field='billing-country'] {
  flex-basis: 100%;
}

@media (max-width: 480px) {
  /* One field per line on a phone: a three-up row leaves each field too narrow
     to read its own label. */
  .next-address-field {
    flex-basis: 100%;
  }

  [data-next-address-field='postal'],
  [data-next-address-field='billing-postal'] {
    flex-basis: 100%;
  }
}

/* The block is empty until the layout arrives; reserve the space so the rest of
   the form does not jump when the fields appear. */
[data-next-address]:empty {
  min-height: 12rem;
}