/* ============================================================================
   ALTCHA widget + form polish — brand-aligned (Pixels LA)
   Applies ui-ux-pro-max guidance: form labels, visible focus states,
   consistent spacing, brand color (#0a51a1), reduced-motion support.
   ============================================================================ */

/* --- Security-check wrapper (labelled captcha block) --- */
.security-check {
  clear: both;
  margin: 14px 0 18px;
}
.security-check > .security-check-label {
  display: block;
  margin-bottom: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #202020;
}
.security-check > .security-check-label sup {
  color: #ec0303;
  font-size: 16px;
}

/* --- Theme the ALTCHA widget itself (custom properties) --- */
altcha-widget,
.altcha {
  --altcha-color-base: #ffffff;
  --altcha-color-border: #d1d5db;
  --altcha-color-border-focus: #0a51a1;
  --altcha-color-text: #202020;
  --altcha-color-footer-bg: #f5f7fa;
  --altcha-color-error-text: #ec0303;
  --altcha-border-width: 1px;
  --altcha-border-radius: 8px;
  --altcha-max-width: 320px;

  display: block;
  width: 100%;
  max-width: 320px;
  font-family: 'Montserrat', sans-serif;
}

/* The widget's inner card: subtle brand-consistent shadow + smooth states */
.altcha {
  box-shadow: 0 1px 3px rgba(10, 81, 161, 0.08);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.altcha:hover {
  box-shadow: 0 2px 8px rgba(10, 81, 161, 0.14);
}
.altcha:focus-within {
  border-color: #0a51a1;
  box-shadow: 0 0 0 3px rgba(10, 81, 161, 0.20);
}

/* --- Accessible focus rings on form inputs (UX: visible focus states) --- */
form .form-control:focus {
  outline: none;
  border-color: #0a51a1;
  box-shadow: 0 0 0 3px rgba(10, 81, 161, 0.18);
}

/* --- cursor-pointer + hover on submit buttons (perceived quality) --- */
form input[type="submit"],
form button[type="submit"],
form .btn {
  cursor: pointer;
  transition: filter 150ms ease, transform 60ms ease;
}
form input[type="submit"]:hover,
form button[type="submit"]:hover,
form .btn:hover {
  filter: brightness(0.94);
}
form input[type="submit"]:active,
form button[type="submit"]:active {
  transform: translateY(1px);
}

/* --- index.php session-code form: widget must clear the floated input --- */
.middle-input .security-check,
.middle-input altcha-widget {
  clear: both;
  float: none;
  margin-top: 14px;
}

/* --- poweradmin dark login: keep the widget readable on the dark panel --- */
#login-form .security-check-label { color: #ffffff; }

/* --- Respect reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .altcha,
  form input[type="submit"],
  form button[type="submit"],
  form .btn {
    transition: none !important;
  }
}

/* --- Small screens: full-width captcha --- */
@media (max-width: 480px) {
  altcha-widget,
  .altcha { max-width: 100%; }
}