/* Scoped to authentication forms, including the shared Next AuthShell. */
body [data-imagora-auth-panel] {
  --auth-control-border: rgba(174, 164, 150, .26);
  --auth-control-focus-border: rgba(217, 136, 74, .72);
  --auth-control-focus-ring: rgba(217, 136, 74, .12);
  border-radius: 16px;
}

html.light [data-imagora-auth-panel] {
  --auth-control-border: rgba(94, 86, 76, .23);
  --auth-control-focus-border: rgba(183, 105, 48, .62);
  --auth-control-focus-ring: rgba(183, 105, 48, .10);
}

[data-imagora-auth-panel] :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"]),
[data-imagora-auth-panel] button {
  border-radius: 10px;
  transition: border-color .16s ease, box-shadow .16s ease;
}

[data-imagora-auth-panel] :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"]):not([aria-invalid="true"]) {
  border-color: var(--auth-control-border);
}

[data-imagora-auth-panel] :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"]):not([aria-invalid="true"]):focus {
  border-color: var(--auth-control-focus-border);
  box-shadow: 0 0 0 3px var(--auth-control-focus-ring);
}

[data-imagora-auth-panel] button:focus-visible {
  box-shadow: 0 0 0 3px var(--auth-control-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  [data-imagora-auth-panel] :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"]),
  [data-imagora-auth-panel] button {
    transition: none;
  }
}
/* Registration agreement: the native checkbox remains keyboard accessible while the custom box mirrors its state. */
[data-imagora-auth-panel] label:has(input[name="agree"]) { cursor: pointer; user-select: none; position: relative; }
[data-imagora-auth-panel] label:has(input[name="agree"]) input[name="agree"] {
  position: relative !important;
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  margin: 2px 0 0 !important;
  opacity: 1 !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: normal !important;
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  border-radius: 2px;
  accent-color: var(--amber);
  cursor: pointer;
  pointer-events: auto !important;
  z-index: 2;
}
[data-imagora-auth-panel] input[name="agree"] + span[aria-hidden="true"] { display: none; }
