/* Raysor Technologies public form Liquid Glass primitives.
   Shared by public intake and support/payment-adjacent forms. This layer owns
   adaptive field geometry, validation/busy feedback, touch sizing, and
   accessibility fallbacks without changing submission or provider behavior. */

.public-form-surface {
  --form-control-min: 54px;
  --form-control-radius: 18px;
  --form-field-gap: clamp(14px, 2vw, 22px);
  --form-panel-gap: clamp(18px, 2.8vw, 34px);
  --form-edge: rgba(211, 235, 252, .18);
  --form-edge-focus: rgba(213, 239, 255, .62);
  --form-invalid: #ff9b9b;
  --form-success: #9ee8c0;
  --form-surface: rgba(3, 11, 19, .74);
  --form-surface-focus: rgba(5, 16, 27, .90);
}

.public-form-surface :is(.form-shell, .support-grid, .field-grid, .tier-grid) {
  min-width: 0;
}

.public-form-surface :is(.form-panel, .info-panel, .support-card) {
  min-width: 0;
  container-type: inline-size;
}

.public-form-surface .field,
.public-form-surface .amount-entry,
.public-form-surface .check-row,
.public-form-surface .turnstile-slot,
.public-form-surface .form-status {
  min-width: 0;
  max-width: 100%;
}

.public-form-surface .field {
  display: grid;
  gap: 8px;
  align-content: start;
}

.public-form-surface .field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--form-field-gap);
}

.public-form-surface .field > label {
  width: fit-content;
  max-width: 100%;
  color: #edf8ff;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.012em;
}

.public-form-surface :is(input:not([type="checkbox"]):not([type="hidden"]), select, textarea) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-inline-size: 0;
  min-height: var(--form-control-min);
  padding: 13px 15px;
  border: 1px solid var(--form-edge);
  border-radius: var(--form-control-radius);
  color: #f5fbff;
  caret-color: #dff3ff;
  background:
    linear-gradient(145deg, rgba(255,255,255,.042), transparent 42%),
    var(--form-surface);
  box-shadow:
    inset 0 1px rgba(255,255,255,.055),
    0 12px 30px rgba(0,0,0,.15);
  transition:
    border-color 170ms ease,
    background 170ms ease,
    box-shadow 190ms ease,
    transform 190ms cubic-bezier(.2,.8,.2,1);
}

.public-form-surface textarea {
  min-height: clamp(150px, 24vh, 240px);
  resize: vertical;
}

.public-form-surface :is(input, select, textarea)::placeholder {
  color: #7990a2;
  opacity: 1;
}

.public-form-surface :is(input:not([type="checkbox"]), select, textarea):focus-visible,
.public-form-surface .amount-entry:focus-within {
  outline: 0;
  border-color: var(--form-edge-focus);
  background: var(--form-surface-focus);
  box-shadow:
    0 0 0 4px rgba(118, 182, 226, .15),
    0 18px 42px rgba(0,0,0,.22),
    inset 0 1px rgba(255,255,255,.085);
}

.public-form-surface :is(input, select, textarea)[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--form-invalid) 72%, transparent);
  box-shadow:
    0 0 0 4px rgba(255, 117, 117, .11),
    inset 0 1px rgba(255,255,255,.05);
}

.public-form-surface .field-error {
  min-height: 1.15em;
  color: var(--form-invalid);
  font-size: .86rem;
  line-height: 1.35;
}

.public-form-surface .form-status {
  min-height: 1.5em;
  margin: 0;
  padding: 0;
  color: #b8cada;
  line-height: 1.45;
}

.public-form-surface .form-status.success { color: var(--form-success); }
.public-form-surface .form-status.error { color: var(--form-invalid); }

.public-form-surface form[aria-busy="true"] :is(input, select, textarea, .tier-button, .check-row) {
  opacity: .72;
}

.public-form-surface form[aria-busy="true"] .button[type="submit"] {
  cursor: progress;
  overflow: hidden;
  position: relative;
}

.public-form-surface form[aria-busy="true"] .button[type="submit"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.16) 47%, transparent 68%);
  transform: translateX(-120%);
  animation: raysor-form-busy 1.15s ease-in-out infinite;
}

.public-form-surface .amount-entry {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--form-control-min);
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 6px;
  padding-inline: 15px 8px;
  border: 1px solid var(--form-edge);
  border-radius: var(--form-control-radius);
  background: var(--form-surface);
}

.public-form-surface .amount-entry > span {
  color: #d9efff;
  font-weight: 720;
}

.public-form-surface .amount-entry > input {
  min-height: calc(var(--form-control-min) - 2px);
  padding-inline: 4px 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.public-form-surface .amount-entry > input:focus-visible {
  box-shadow: none;
}

.public-form-surface .check-row {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 22px minmax(0,1fr);
  gap: 12px;
  align-items: start;
  min-height: 52px;
  padding: 13px 14px;
  border: 1px solid rgba(211,235,252,.12);
  border-radius: 17px;
  background: rgba(214, 238, 255, .035);
}

.public-form-surface .check-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: #b8e4ff;
}

.public-form-surface .check-row:focus-within {
  border-color: var(--form-edge-focus);
  box-shadow: 0 0 0 4px rgba(118, 182, 226, .13);
}

.public-form-surface .tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 92px), 1fr));
  gap: 10px;
}

.public-form-surface :is(.button, .tier-button) {
  min-width: 0;
  max-width: 100%;
}

.public-form-surface .button[type="submit"] {
  width: fit-content;
  max-width: 100%;
  min-height: var(--form-control-min);
  padding-inline: clamp(18px, 3vw, 28px);
  text-align: center;
  white-space: normal;
}

.public-form-surface .turnstile-slot {
  overflow: hidden;
}

@keyframes raysor-form-busy {
  to { transform: translateX(120%); }
}

@container (max-width: 620px) {
  .public-form-surface .field-grid {
    grid-template-columns: minmax(0,1fr);
  }

  .public-form-surface .button[type="submit"] {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .public-form-surface .support-grid {
    grid-template-columns: minmax(0,1fr);
  }
}

@media (hover: none), (pointer: coarse) {
  .public-form-surface {
    --form-control-min: 56px;
  }

  .public-form-surface .check-row {
    min-height: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-form-surface *,
  .public-form-surface *::before,
  .public-form-surface *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .public-form-surface :is(input:not([type="checkbox"]):not([type="hidden"]), select, textarea, .amount-entry, .check-row) {
    background: #09131e;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  .public-form-surface :is(input:not([type="checkbox"]):not([type="hidden"]), select, textarea, .amount-entry, .check-row) {
    color: CanvasText;
    border: 1px solid CanvasText;
    background: Canvas;
    box-shadow: none;
  }

  .public-form-surface :is(input, select, textarea):focus-visible,
  .public-form-surface .amount-entry:focus-within,
  .public-form-surface .check-row:focus-within {
    outline: 3px solid Highlight;
    outline-offset: 3px;
    box-shadow: none;
  }

  .public-form-surface .field-error,
  .public-form-surface .form-status.error {
    color: CanvasText;
  }
}