/* Registration only: keep the surrounding login and checkout visual systems. */
[data-customer-registration] {
  --registration-danger: var(--bx-danger);
  --registration-text: var(--brox-auth-text, var(--ink));
  --registration-muted: var(--brox-auth-muted, var(--muted));
  --registration-focus: var(--brox-auth-gold, var(--focus));
  min-width: 0;
}
html[data-brox-theme="dark"] [data-customer-registration],
html.web-dark [data-customer-registration] {
  --registration-danger: var(--bx-danger);
}
[data-customer-registration] .customer-registration__password {
  position: relative;
  display: block;
  min-width: 0;
}
.customer-registration__password > input,
#checkoutRegisterForm .customer-registration__password > input {
  padding-right: 6rem;
}
[data-customer-registration] .customer-registration__toggle {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  transform: translateY(-50%);
  min-width: var(--bx-control-height);
  min-height: var(--bx-control-height);
  padding: 0 0.625rem;
  border: 0;
  border-radius: var(--bx-radius-sm);
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
[data-customer-registration] .customer-registration__toggle:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
[data-customer-registration] .customer-registration__toggle:active {
  background: color-mix(in srgb, currentColor 16%, transparent);
}
[data-customer-registration] :focus-visible {
  outline: 3px solid var(--registration-focus);
  outline-offset: 2px;
}
[data-customer-registration] p.brox-auth__help {
  margin: 0;
}
#reg input:not([type="hidden"]):not([type="checkbox"]),
#checkoutRegisterForm input:not([type="hidden"]):not([type="checkbox"]) {
  border-color: var(--brox-auth-control-line, color-mix(in srgb, var(--registration-text) 55%, transparent));
  caret-color: var(--registration-text);
}
#reg input::placeholder,
#checkoutRegisterForm input::placeholder {
  color: var(--registration-muted);
  opacity: 1;
}
#reg input:focus-visible,
#checkoutRegisterForm input:focus-visible {
  border-color: var(--registration-focus);
}
#reg input[aria-invalid="true"]:not([type="hidden"]),
#checkoutRegisterForm input[aria-invalid="true"]:not([type="hidden"]) {
  border-color: var(--registration-danger);
}
[data-customer-registration] .customer-registration__summary,
[data-customer-registration] .customer-registration__error {
  margin: 0;
  color: var(--registration-danger);
  font-size: 0.875rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
[data-customer-registration] .customer-registration__consent label {
  align-items: flex-start;
  min-height: var(--bx-control-height);
  cursor: pointer;
}
[data-customer-registration] .customer-registration__consent input {
  flex-shrink: 0;
  margin-top: 0.125rem;
}
[data-customer-registration] .customer-registration__consent a {
  color: var(--brox-auth-gold, inherit);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
[data-customer-registration] [hidden] {
  display: none !important;
}
[data-customer-registration] [type="submit"]:active:not(:disabled) {
  filter: brightness(0.92);
}
/* Only the account-creation panel uses this layout; login/delivery stay unchanged. */
#checkoutRegisterForm {
  align-items: start;
}
#checkoutRegisterForm > .inline-note,
#checkoutRegisterForm > .customer-registration__summary,
#checkoutRegisterForm > .customer-registration__consent,
#checkoutRegisterForm > [type="submit"] {
  grid-column: 1 / -1;
  margin: 0;
}
#checkoutRegisterForm > .field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#checkoutRegisterForm > .field > label {
  font-weight: 600;
}
#checkoutRegisterForm .field input {
  min-height: var(--bx-control-height);
}
#checkoutRegisterForm .field small {
  font-size: 0.875rem;
  line-height: 1.5;
}
@media (prefers-contrast: more) {
  #reg input:not([type="hidden"]),
  #checkoutRegisterForm input:not([type="hidden"]) {
    border-color: var(--registration-text);
  }
}
@media (prefers-reduced-motion: reduce) {
  #reg input,
  #reg button,
  #checkoutRegisterForm input,
  #checkoutRegisterForm button {
    transition: none;
  }
}