/*
 * EltaierTech contact form - styles for what contact-form.js adds to <form data-contact-form>:
 * the captcha, inline field errors, the status message, the busy button and the
 * no-JavaScript note. The page keeps styling its own fields and button.
 *
 * Load AFTER vendor/altcha-3.2.4/altcha.css (this file re-themes that widget).
 * Colours follow the site tokens and fall back to the same values when a token is missing.
 */
[data-contact-form] {
  --cf-bg: var(--bg-2, #141419);
  --cf-panel: var(--panel, #1C1C22);
  --cf-border: var(--border, #33333C);
  --cf-text: var(--text, #F2F2F5);
  --cf-muted: #9A9AA6;
  --cf-accent: var(--violet, #8B4DF7);
  --cf-accent-soft: var(--lilac, #BBA4FF);
  --cf-danger: #FF9AAE;
  --cf-radius: 12px;
}

/* ---------- honeypot: present for bots, absent for people and assistive tech ---------- */
.cf-hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------- no-JavaScript note ----------
   Put it inside <noscript> (see INTEGRATION.md) so it exists only when scripting is off.
   For a bare note, the media query hides it as soon as the stylesheet loads - it must not
   tell a visitor whose scripts are merely still loading to "turn JavaScript on". */
@media (scripting: enabled) {
  :not(noscript) > [data-contact-nojs] { display: none !important; }
}
[data-contact-form] noscript { display: block; }

/* ---------- "the form could not load" note ----------
   For when JavaScript is ON but contact-form.js never runs (blocked, failed download, an
   error in the page). The script removes the note the moment it starts; until then it stays
   out of the way, and it appears only after 10 seconds - so a visitor on a slow connection is
   not told something is broken while it is still loading. CSS only, because it must work
   exactly when the script does not. (`hidden` keeps it out if this stylesheet fails too.)
   `visibility: hidden` while collapsed keeps it out of the accessibility tree too, so a
   screen reader does not read "could not load" while the form is still loading. */
@media (scripting: enabled) {
  [data-contact-form]:not(.cf-ready):not([data-cf-state]) .cf-loadnote[hidden] {
    display: block;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    animation: cf-show-loadnote 0s linear 10s forwards;
  }
}
@keyframes cf-show-loadnote {
  to { visibility: visible; max-height: 20em; padding-top: 14px; padding-bottom: 14px; border-width: 1px; }
}
.cf-nojs, .cf-loadnote {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  background: var(--cf-bg);
  color: var(--cf-muted);
  font-size: .92rem;
  line-height: 1.5;
}

/* ---------- inline field errors ---------- */
.cf-field-error {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--cf-danger);
  font-size: .88rem;
  line-height: 1.4;
}
.cf-field-error[hidden] { display: none; }
.cf-field-error::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FF9AAE' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M8 4.75v3.75M8 11v.25'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-contact-form] input[aria-invalid="true"],
[data-contact-form] textarea[aria-invalid="true"] {
  border-color: rgba(255, 154, 174, .75);
  box-shadow: 0 0 0 4px rgba(255, 110, 140, .14);
}

/* ---------- character count under the message (appears near the limit) ---------- */
.cf-counter {
  margin: 0;
  color: var(--cf-muted);
  font-size: .82rem;
  line-height: 1.4;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cf-counter[hidden] { display: none; }
.cf-counter[data-over] { color: var(--cf-danger); }

/* ---------- fields while the enquiry is on its way (read-only, see setPhase) ---------- */
[data-contact-form][data-cf-state="verifying"] input[readonly],
[data-contact-form][data-cf-state="sending"] input[readonly],
[data-contact-form][data-cf-state="verifying"] textarea[readonly],
[data-contact-form][data-cf-state="sending"] textarea[readonly] {
  opacity: .72;
  cursor: progress;
}

/* ---------- captcha (ALTCHA) themed to the dark violet site ---------- */
.cf-captcha { display: block; min-height: 78px; }
.cf-captcha:empty { display: none; }   /* JavaScript off or still loading: no widget, so no gap either */
.cf-captcha altcha-widget {
  display: block;
  color-scheme: dark;
  font: inherit;

  --altcha-max-width: 100%;
  --altcha-padding: 16px;   /* one length only: the widget uses it inside calc() */
  --altcha-border-width: 1px;
  --altcha-border-radius: var(--cf-radius);
  --altcha-border-color: var(--cf-border);
  --altcha-color-base: rgba(16, 16, 20, .7);
  --altcha-color-base-content: var(--cf-text);
  --altcha-color-neutral: #4A4A58;
  --altcha-color-neutral-content: var(--cf-muted);
  --altcha-color-primary: var(--cf-accent);
  --altcha-color-primary-content: #FFFFFF;
  --altcha-color-success: var(--cf-accent);
  --altcha-color-success-content: #FFFFFF;
  --altcha-color-error: #4A1626;
  --altcha-color-error-content: #FFD3DB;
  --altcha-checkbox-size: 24px;
  --altcha-checkbox-border-width: 1.5px;
  --altcha-checkbox-border-radius: 7px;
  --altcha-checkbox-border-color: #5C5C6B;
  --altcha-checkbox-outline-color: var(--cf-accent-soft);
  --altcha-checkbox-outline-offset: 3px;
  --altcha-input-background-color: var(--cf-panel);
  --altcha-spinner-color: var(--cf-accent-soft);
  --altcha-shadow: drop-shadow(0 14px 30px rgba(0, 0, 0, .55));
  --altcha-transition-duration: .35s;
  --altcha-z-index: 40;
  --altcha-z-index-popover: 41;
}
.cf-captcha .altcha-main {
  gap: 6px;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.cf-captcha .altcha-main:hover { border-color: #4A4A58; }
.cf-captcha .altcha:focus-within .altcha-main {
  border-color: var(--cf-accent-soft);
  box-shadow: 0 0 0 4px rgba(139, 77, 247, .25);
}
.cf-captcha .altcha-checkbox-wrap { gap: 12px; }
.cf-captcha .altcha-checkbox-wrap label {
  font-size: .98rem;
  font-weight: 500;
  color: var(--cf-text);
  cursor: pointer;
}
.cf-captcha .altcha-checkbox input:hover { border-color: var(--cf-accent-soft); }
/* The widget draws its tick as an <svg> laid over the middle of the checkbox (invisible until checked) and does
   not let clicks through it; a click in the middle of the box then lands on the tick, not on the checkbox. */
.cf-captcha .altcha-checkbox svg { pointer-events: none; }
.cf-captcha .altcha-spinner { border-width: 2px; opacity: 1; }
.cf-captcha .altcha-logo { color: var(--cf-accent-soft); opacity: .8; }
.cf-captcha .altcha-footer { font-size: .72rem; color: var(--cf-muted); opacity: 1; letter-spacing: .01em; }
.cf-captcha .altcha-footer a { color: var(--cf-accent-soft); }
.cf-captcha .altcha-footer a:hover { color: #FFFFFF; text-decoration: underline; }

.cf-captcha .altcha[data-state="verifying"] .altcha-main {
  border-color: rgba(187, 164, 255, .45);
}
.cf-captcha .altcha[data-state="verified"] .altcha-main {
  border-color: rgba(139, 77, 247, .7);
  background-color: rgba(139, 77, 247, .10);
  box-shadow: 0 0 0 1px rgba(139, 77, 247, .18) inset, 0 12px 32px -18px rgba(139, 77, 247, .9);
}
/* Only a real failure is marked. "expired" (the check simply went stale while the visitor
   was still writing) looks like the untouched box: pressing Send runs a fresh check, so
   there is nothing for the visitor to fix and nothing to be alarmed about. */
.cf-captcha .altcha[data-state="error"] .altcha-main {
  border-color: rgba(255, 154, 174, .6);
}
/* The widget's own floating error bubble is not shown: it would sit on top of the status
   message below, which says the same thing (and is announced to screen readers). The pink
   border above marks the captcha itself. */
.cf-captcha .altcha-popover[data-variant="error"] { display: none; }
/* The widget keeps its answer in <input type="hidden" name="altcha">, a direct child of
   .altcha-main - and the vendored stylesheet gives every such child display:flex, which
   overrides the browser's display:none for hidden inputs. WebKit then puts it in the Tab
   order: one press of Tab with nothing visibly focused. Put it back to not rendered. */
.cf-captcha .altcha-main > input[type="hidden"] { display: none; }

/* ---------- status message (aria-live) ---------- */
.cf-status {
  display: none;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  background: rgba(16, 16, 20, .7);
  color: var(--cf-text);
  font-size: .95rem;
  line-height: 1.45;
  outline: none;
}
.cf-status[data-kind] { display: flex; }
.cf-status:focus-visible { box-shadow: 0 0 0 4px rgba(139, 77, 247, .25); }
.cf-status__text { margin: 0; }
.cf-status__icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: center / contain no-repeat;
}
.cf-status[data-kind="info"] { color: #D5D5DE; }
.cf-status[data-kind="info"] .cf-status__icon {
  border: 2px solid var(--cf-accent-soft);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: cf-spin .7s linear infinite;
}
.cf-status[data-kind="success"] {
  border-color: rgba(139, 77, 247, .6);
  background: linear-gradient(135deg, rgba(139, 77, 247, .20), rgba(91, 140, 255, .08));
  box-shadow: 0 16px 40px -24px rgba(139, 77, 247, .9);
}
.cf-status[data-kind="success"] .cf-status__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' fill='%238B4DF7'/%3E%3Cpath d='M6 10.4l2.6 2.6L14 7.4' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cf-status[data-kind="error"] {
  border-color: rgba(255, 154, 174, .5);
  background: rgba(255, 110, 140, .08);
  color: #FFD3DB;
}
.cf-status[data-kind="error"] .cf-status__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23FF9AAE' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='8.2'/%3E%3Cpath d='M10 6v4.6M10 13.6v.2'/%3E%3C/svg%3E");
}

/* ---------- submit button while busy ---------- */
.cf-spinner {
  display: none;
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .9);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: cf-spin .7s linear infinite;
}
[data-contact-form][data-cf-state="verifying"] .cf-spinner,
[data-contact-form][data-cf-state="sending"] .cf-spinner { display: inline-block; }
[data-contact-form][data-cf-state="verifying"] button[type="submit"] > svg,
[data-contact-form][data-cf-state="sending"] button[type="submit"] > svg { display: none; }
/* While busy the button keeps focus and is marked aria-disabled (see setPhase). */
[data-contact-form] button[type="submit"][aria-disabled="true"],
[data-contact-form] button[type="submit"]:disabled {
  cursor: progress;
  opacity: .78;
  transform: none;
}
[data-contact-form]:not(.cf-ready) button[type="submit"]:disabled { cursor: not-allowed; opacity: .5; }

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

@media (prefers-reduced-motion: reduce) {
  .cf-spinner,
  .cf-status[data-kind="info"] .cf-status__icon { animation-duration: 2.4s; }
  .cf-captcha .altcha-main { transition: none; }
  .cf-captcha altcha-widget { --altcha-transition-duration: 0s; }
}