/* Demo request form (includes/js/app-shell/demo-form.php). Loaded by footer2.php so the form is styled on every page, including pages that do not load vyrox-redesign.css. Same rules as section 5.6 of vyrox-redesign.css. */
.vx-demoform {
  padding: clamp(56px, 8vw, 88px) 5% clamp(56px, 8vw, 80px);
  background: var(--vx-surface-tint, #f4f8fd);
  border-top: 1px solid var(--vx-line, rgba(15, 39, 64, 0.1));
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Several page templates set text-align:center on a mobile ancestor, which
     centred the field labels and left the tick list with its marker on the far
     left and its text in the middle. State the alignment rather than inherit it. */
  text-align: left;
}
.vx-demoform *,
.vx-demoform *::before { text-align: inherit; }
.vx-demoform__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  grid-template-areas: 'intro form';
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.vx-demoform__intro { grid-area: intro; }
.vx-demoform__form  { grid-area: form; }
.vx-demoform__notice {
  grid-area: form;
  align-self: start;
}

.vx-demoform__eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vx-accent, #0071e3);
}
.vx-demoform__title {
  margin: 0 0 16px;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--vx-ink, #0f2740);
  text-wrap: balance;
}
.vx-demoform__lede {
  margin: 0 0 22px;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--vx-ink-body, #33506e);
  max-width: 42ch;
}
.vx-demoform__points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vx-demoform__points li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--vx-ink-muted, #587290);
}
.vx-demoform__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--vx-accent, #0071e3);
  border-bottom: 2px solid var(--vx-accent, #0071e3);
  transform: rotate(-45deg);
}

/* Result message from the previous submission. */
.vx-demoform__notice {
  margin: 0 0 18px;
  padding: 14px 18px;
  border-radius: var(--radius-md, 14px);
  font-size: 15px;
  line-height: 1.55;
  border: 1px solid transparent;
}
.vx-demoform__notice:focus { outline: 2px solid var(--vx-accent, #0071e3); outline-offset: 2px; }
.vx-demoform__notice--ok {
  background: rgba(10, 125, 79, 0.09);
  border-color: rgba(10, 125, 79, 0.28);
  color: #0a5c3c;
}
.vx-demoform__notice--err {
  background: rgba(165, 39, 32, 0.08);
  border-color: rgba(165, 39, 32, 0.26);
  color: #8d241d;
}

.vx-demoform__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.vx-demoform__field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.vx-demoform__field--wide { grid-column: 1 / -1; }
.vx-demoform__field label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vx-ink, #0f2740);
  letter-spacing: 0.005em;
}
.vx-demoform__field label span { color: var(--vx-accent, #0071e3); }
.vx-demoform__field input,
.vx-demoform__field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  font: inherit;
  font-size: 16px; /* 16px prevents iOS Safari zooming the page on focus */
  line-height: 1.4;
  color: var(--vx-ink, #0f2740);
  background: #ffffff;
  border: 1px solid var(--vx-line, rgba(15, 39, 64, 0.1));
  border-radius: var(--radius-sm, 8px);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.vx-demoform__field textarea { resize: vertical; min-height: 92px; }
.vx-demoform__field input::placeholder,
.vx-demoform__field textarea::placeholder { color: #9bacbd; }
.vx-demoform__field input:hover,
.vx-demoform__field textarea:hover { border-color: rgba(15, 39, 64, 0.24); }
.vx-demoform__field input:focus,
.vx-demoform__field textarea:focus {
  outline: none;
  border-color: var(--vx-accent, #0071e3);
  box-shadow: 0 0 0 3px var(--vx-accent-soft, rgba(0, 113, 227, 0.1));
}
/* Keyboard users still get the global ring; it must not double up with the
   focus shadow above. */
.vx-demoform__field input:focus-visible,
.vx-demoform__field textarea:focus-visible { outline: none !important; }

/* Honeypot: removed from view and from the accessibility tree, but NOT with
   display:none, which some bots detect and skip. */
.vx-demoform__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.vx-demoform__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 20px;
}
.vx-demoform__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background: var(--vx-accent, #0071e3);
  border: 0;
  border-radius: var(--radius-pill, 980px);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.vx-demoform__submit:hover { background: var(--vx-accent-deep, #0a58b0); }
.vx-demoform__submit:active { transform: translateY(1px); }
.vx-demoform__fineprint {
  margin: 0;
  flex: 1 1 260px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--vx-ink-muted, #587290);
}
.vx-demoform__fineprint a {
  color: var(--vx-accent, #0071e3);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 860px) {
  .vx-demoform__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'intro' 'form';
  }
  .vx-demoform__notice { grid-area: auto; }
  .vx-demoform__grid { grid-template-columns: minmax(0, 1fr); }
  .vx-demoform__submit { width: 100%; }
  .vx-demoform__fineprint { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .vx-demoform__submit,
  .vx-demoform__field input,
  .vx-demoform__field textarea { transition: none; }
}

/* WhatsApp-only enquiry card (replaces the email form, 2026-11-12). */
.vx-demoform__wa {
  grid-area: form;
  align-self: center;
  background: #fff;
  border: 1px solid rgba(15, 39, 64, 0.12);
  border-radius: 16px;
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.vx-demoform__wa-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: #0f2740; }
.vx-demoform__wa-text { margin: 0; color: #4a6078; line-height: 1.55; }
.vx-demoform .vx-demoform__submit--wa {
  display: inline-flex; align-items: center; gap: 10px;
  background: #25d366; color: #fff !important; text-decoration: none !important;
  margin-top: 4px;
}
.vx-demoform .vx-demoform__submit--wa:hover { background: #1ebe5b; }
.vx-demoform__wa .vx-demoform__fineprint { margin: 0; flex: none; text-decoration: none; }
@media (max-width: 860px) {
  .vx-demoform__wa { grid-area: auto; }
  .vx-demoform .vx-demoform__submit--wa { width: 100%; justify-content: center; }
}