/*
 * Shared form styling for /product/download/* pages.
 * Mirrors the Invicti PLP/DAST landing form (Webflow) palette:
 *
 *   font:    Circularxxweb, Arial, sans-serif
 *   input:   bg #fff, ink #101820, border 1px #fff, radius 4px,
 *            padding 6.4px 32px 6.4px 16px, 16px/400
 *   submit:  bg #4BD783 (green), ink #101820, radius 8px,
 *            padding 8px 24px, 16/700
 *   surface: dark #101820 card; transparent on already-dark backgrounds
 *   gaps:    12px between fields
 *
 * Inputs use placeholders as their labels (like PLP/DAST), with
 * .invd-field__label kept as visually-hidden text for screen readers.
 */

:root {
  --invd-ink:        #101820;
  --invd-white:      #ffffff;
  --invd-muted:      #b6b9bf;
  --invd-accent:     #4bd783;
  --invd-accent-hi:  #3cc372;

  --invd-input-bg:   #ffffff;
  --invd-input-ink:  #101820;
  --invd-input-bd:   #ffffff;

  --invd-error-bg:   #fdecec;
  --invd-error-fg:   #92211a;
  --invd-error-bd:   #f3b6b1;
  --invd-success-bg: #e6f7ee;
  --invd-success-fg: #0a6b3b;
  --invd-success-bd: #a7e0c1;

  --invd-radius-input: 4px;
  --invd-radius-card:  12px;
  --invd-radius-btn:   8px;

  --invd-font:       'Circularxxweb', Arial, Helvetica, sans-serif;
}

.invd-page * { box-sizing: border-box; }

/* Hidden attribute must always win (spinner, alert, etc.) */
.invd-page [hidden] { display: none !important; }

body.invd-page {
  margin: 0;
  background: #faf9f7;
  color: var(--invd-ink);
  font-family: var(--invd-font);
  font-size: 16px;
  line-height: 1.39;
  -webkit-font-smoothing: antialiased;
}

.invd-page a { color: var(--invd-ink); }
.invd-page a:hover { text-decoration: underline; }

.invd-container {
  max-width: 560px;
  margin: 0 auto;
  padding: 4rem 1.25rem 4rem;
}

.invd-header { margin-bottom: 2.5rem; }
.invd-header h1 {
  font: 700 30px/1.2 var(--invd-font);
  margin: 0 0 0.5rem;
  color: var(--invd-ink);
}
.invd-lead { margin: 0; color: #4a5060; font-size: 16px; }

/* Form card — purple gradient, matches PLP/DAST */
.invd-form-card {
  background: linear-gradient(162deg, #cc8bdb 0%, #422991 100%);
  color: var(--invd-white);
  border-radius: var(--invd-radius-card);
  padding: 32px;
}

.invd-form-card h2 {
  font: 700 30px/1.24 var(--invd-font);
  margin: 0;
  color: var(--invd-white);
  text-align: center;
}

.invd-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.invd-field { display: block; }

/* Visually-hidden label kept for accessibility; PLP/DAST uses the
 * placeholder itself as the visible label. */
.invd-field__label {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.invd-field input,
.invd-field select {
  width: 100%;
  background: var(--invd-input-bg);
  color: var(--invd-input-ink);
  border: 1px solid var(--invd-input-bd);
  border-radius: var(--invd-radius-input);
  padding: 6.4px 32px 6.4px 16px;
  font: 400 16px/1.5 var(--invd-font);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.invd-field input::placeholder { color: #8a8f99; opacity: 1; }

.invd-field input:focus,
.invd-field select:focus {
  outline: none;
  border-color: var(--invd-accent);
  box-shadow: 0 0 0 2px rgba(75, 215, 131, 0.35);
}

.invd-field input:invalid:not(:placeholder-shown) {
  border-color: var(--invd-error-bd);
  box-shadow: 0 0 0 2px rgba(146, 33, 26, 0.15);
}

.invd-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23101820' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* Placeholder option appears greyed-out like an input placeholder. */
.invd-field select:has(option[value=""]:checked) { color: #8a8f99; }
.invd-field select option { color: var(--invd-input-ink); }
.invd-field select option[value=""] { color: #8a8f99; }

.invd-actions {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.invd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--invd-accent);
  color: var(--invd-input-ink);
  border: 1px solid var(--invd-accent);
  border-radius: var(--invd-radius-btn);
  padding: 8px 24px;
  font: 700 16px/1.39 var(--invd-font);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.invd-btn:hover:not([disabled]) {
  background: var(--invd-accent-hi);
  border-color: var(--invd-accent-hi);
}

.invd-btn[disabled] { opacity: 0.7; cursor: progress; }

.invd-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: invd-spin 0.7s linear infinite;
}

@keyframes invd-spin { to { transform: rotate(360deg); } }

.invd-note {
  margin: 0;
  font-size: 10px;
  line-height: 1.4;
  color: var(--invd-white);
  text-align: center;
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
}
.invd-note a { color: var(--invd-white); text-decoration: underline; }

.invd-alert {
  padding: 0.75rem 1rem;
  border-radius: var(--invd-radius-input);
  font-size: 14px;
  border: 1px solid var(--invd-error-bd);
  background: var(--invd-error-bg);
  color: var(--invd-error-fg);
}
.invd-alert[data-type='success'] {
  background: var(--invd-success-bg);
  color: var(--invd-success-fg);
  border-color: var(--invd-success-bd);
}

.invd-previous {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.invd-previous summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: var(--invd-white);
}
.invd-previous__list { list-style: none; padding: 0.75rem 0 0; margin: 0; }
.invd-previous__list li + li { margin-top: 0.4rem; }

.invd-previous__btn {
  background: none;
  border: none;
  padding: 0.35rem 0;
  color: var(--invd-accent);
  cursor: pointer;
  font: 400 14px/1.5 var(--invd-font);
}
.invd-previous__btn:hover { text-decoration: underline; }