/* iOS-like UI tokens (forms / alerts / recaptcha helpers) */
:root {
  --ios-radius-lg: 16px;
  --ios-radius-md: 14px;
  --ios-radius-sm: 12px;
  --ios-blur: 18px;
  --ios-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  --ios-shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.12);
  --ios-border: rgba(255, 255, 255, 0.22);
  --ios-glass: rgba(255, 255, 255, 0.55);
  --ios-text: rgba(0, 0, 0, 0.82);
  --ios-red: #ff3b30;
  --ios-red-soft: rgba(255, 59, 48, 0.14);
}

.field-error {
  display: block;
  color: rgba(255, 59, 48, 0.92);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-top: 6px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.input-error {
  border-color: var(--ios-red) !important;
  box-shadow:
    0 0 0 4px var(--ios-red-soft),
    0 1px 0 rgba(255, 255, 255, 0.35) inset !important;
  border-radius: var(--ios-radius-sm) !important;
}

.alert-banner {
  position: relative;
  padding: 14px 48px 14px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ios-text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  border-radius: var(--ios-radius-lg);
  border: 1px solid var(--ios-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.28));
  backdrop-filter: blur(var(--ios-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--ios-blur)) saturate(1.25);
  box-shadow: var(--ios-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  animation: slideDown 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.alert-banner.alert-success {
  color: rgba(22, 101, 52, 0.92);
  background: linear-gradient(180deg, rgba(220, 252, 231, 0.72), rgba(187, 247, 208, 0.38));
  border-color: rgba(34, 197, 94, 0.28);
  box-shadow: var(--ios-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.alert-banner.alert-warning {
  color: rgba(113, 63, 18, 0.92);
  background: linear-gradient(180deg, rgba(254, 249, 195, 0.78), rgba(253, 230, 138, 0.42));
  border-color: rgba(234, 179, 8, 0.32);
  box-shadow: var(--ios-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.alert-banner.alert-info {
  color: rgba(12, 74, 110, 0.92);
  background: linear-gradient(180deg, rgba(224, 242, 254, 0.78), rgba(186, 230, 253, 0.42));
  border-color: rgba(56, 189, 248, 0.28);
  box-shadow: var(--ios-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* Default (error) banner — iOS “destructive” tint */
.alert-banner:not(.alert-success):not(.alert-warning):not(.alert-info) {
  color: rgba(127, 29, 29, 0.92);
  background: linear-gradient(180deg, rgba(254, 226, 226, 0.78), rgba(254, 202, 202, 0.42));
  border-color: rgba(248, 113, 113, 0.35);
}

.alert-banner-close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.45);
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.18s ease, background-color 0.18s ease, opacity 0.18s ease;
  opacity: 0.85;
}

.alert-banner-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.55);
  transform: translateY(-50%) scale(1.04);
}

.alert-banner-close:active {
  transform: translateY(-50%) scale(0.96);
}

.alert-banner.hiding {
  animation: slideUp 0.32s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 200px;
  }
  to {
    opacity: 0;
    transform: translateY(-12px) scale(0.985);
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

.g-recaptcha {
  transform: scale(0.6);
  transform-origin: 0 0;
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: var(--ios-radius-md);
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid var(--ios-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--ios-shadow-soft);
}

@media (prefers-reduced-motion: reduce) {
  .alert-banner,
  .alert-banner.hiding {
    animation: none !important;
  }
  .alert-banner-close {
    transition: none !important;
  }
}