/* Shared field focus, loaded after the theme and login component styles. */
.phone.next-ui-theme {
  --field-border-color: #dbdbdb;
  --field-focus-color: #0056f5;
  --field-focus-accent: var(--field-focus-color);
  --field-focus-halo: rgb(0 86 245 / 10%);
  --field-focus-shadow: 0 0 0 3px var(--field-focus-halo);
}

/* Keep resting input borders soft; focused fields use the accent below. */
.phone.next-ui-theme :is(.field > div, .invoice-field > div, .search-field,
  .otp-input-wrap, .card-auth-expiry-control, .device-pin-fields input,
  .returning-login-step .field > div, .card-auth-sheet .field > div,
  .card-auth-sheet .card-auth-expiry-control):not(:focus-within),
.phone.next-ui-theme #login-step-returning .field > div:not(:focus-within),
.phone.next-ui-theme #new-financial-form .annual-activity-field > div:not(:focus-within) {
  border-color: var(--field-border-color);
}

.phone.next-ui-theme :is(.field > div, .invoice-field > div, .search-field,
  .otp-input-wrap, .card-auth-expiry-control, .device-pin-fields input,
  .amount-entry > div) {
  transition: border-color 160ms ease, box-shadow 160ms ease,
    background-color 160ms ease;
}

/* A thin brand-blue boundary and soft halo preserve the control geometry.
 * Include component scopes to win over the existing theme focus rules. */
.phone.next-ui-theme :is(.field > div, .invoice-field > div, .search-field,
  .otp-input-wrap, .card-auth-expiry-control, .returning-login-step .field > div,
  .card-auth-sheet .field > div, .card-auth-sheet .card-auth-expiry-control):focus-within,
.phone.next-ui-theme #login-step-returning .field > div:focus-within,
.phone.next-ui-theme #new-financial-form .annual-activity-field > div:focus-within {
  border-color: var(--field-focus-color);
  background: var(--biz-surface, var(--modern-surface));
  box-shadow: var(--field-focus-shadow);
  outline: none;
}

/* Borderless amount controls and standalone PIN inputs need their own ring. */
.phone.next-ui-theme .amount-entry > div:focus-within,
.phone.next-ui-theme.app-theme-refined .amount-entry > div:focus-within {
  border-radius: var(--biz-radius-control, 16px);
  box-shadow: inset 0 0 0 1px var(--field-focus-color),
    var(--field-focus-shadow);
}
.phone.next-ui-theme .device-pin-fields input:is(:focus, :focus-visible) {
  border-color: var(--field-focus-color);
  box-shadow: var(--field-focus-shadow) !important;
  outline: none !important;
}

/* Only the rounded container draws a ring; inner actions keep keyboard focus. */
.phone.next-ui-theme :is(.field > div, .invoice-field > div, .search-field,
  .otp-input-wrap, .card-auth-expiry-control, .amount-entry > div)
  :is(input, select, textarea):is(:focus, :focus-visible) {
  outline: none !important;
  box-shadow: none !important;
  caret-color: var(--field-focus-accent);
}

.phone.next-ui-theme :is(.field > div, .invoice-field > div, .search-field,
  .returning-login-step .field > div) > svg:first-child {
  transition: color 160ms ease;
}
.phone.next-ui-theme :is(.field > div, .invoice-field > div, .search-field,
  .returning-login-step .field > div):focus-within > svg:first-child,
.phone.next-ui-theme #login-step-returning .field > div:focus-within > svg:first-child,
.phone.next-ui-theme #new-financial-form .annual-activity-field > div:focus-within > svg:first-child {
  color: var(--field-focus-accent);
}

@media (prefers-reduced-motion: reduce) {
  .phone.next-ui-theme :is(.field > div, .invoice-field > div, .search-field,
    .otp-input-wrap, .card-auth-expiry-control, .device-pin-fields input,
    .amount-entry > div, .returning-login-step .field > div),
  .phone.next-ui-theme :is(.field > div, .invoice-field > div, .search-field,
    .returning-login-step .field > div) > svg:first-child {
    transition: none;
  }
}

/* System high-contrast modes can discard shadows, so retain a real outline. */
@media (forced-colors: active) {
  .phone.next-ui-theme :is(.field > div, .invoice-field > div, .search-field,
    .otp-input-wrap, .card-auth-expiry-control, .device-pin-fields input,
    .amount-entry > div):focus-within,
  .phone.next-ui-theme #login-step-returning .field > div:focus-within,
  .phone.next-ui-theme #new-financial-form .annual-activity-field > div:focus-within {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }
}