/*
 * Zareef Callback Requests: the "Request a call back" widget rendered by
 * [zcb_callback_form]. Built on the theme's design tokens, so it follows
 * light and dark mode. The theme already styles text/email inputs, textarea
 * and label; tel inputs and the select need parity here.
 */
.zcb { margin: 0 0 var(--space-6); }
.zcb .zcb__panel {
  margin-top: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* The option card (reuses the page's .contact-card look) sits above the open form; the "or" divider follows the form and separates it from the channel cards. */
.zcb__or {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  color: var(--text-faint);
  font: 500 var(--fs-300)/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.zcb__or::before,
.zcb__or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.zcb .zcb__card { border-color: var(--accent); }
.zcb .zcb__card:hover { border-color: var(--accent-hover); }
.zcb__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 34rem;
}
.zcb .zcb__field { margin: 0; }
.zcb__field--wide { grid-column: 1 / -1; }
.zcb input[type="tel"],
.zcb select {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.6em 0.8em;
}
.zcb select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4em;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6b80' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8em center;
  background-size: 1em;
  cursor: pointer;
}
.zcb select:invalid { color: var(--text-muted); }
.zcb input[type="tel"]:focus,
.zcb select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.zcb [aria-invalid="true"] { border-color: #b42318; }
.zcb button.btn { font-family: inherit; line-height: inherit; }
.zcb button.btn:disabled { opacity: 0.6; cursor: wait; }
.zcb button.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Honeypot: off-screen, not display:none, so naive bots still fill it. */
.zcb__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.zcb__error {
  display: block;
  margin-top: var(--space-1);
  font: 500 var(--fs-300)/1.4 var(--font-mono);
  color: #b42318;
}
.zcb__error:empty { display: none; }
.zcb .zcb__alert {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid #b42318;
  background: var(--bg-subtle);
  color: var(--text);
}
.zcb .zcb__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
}
.zcb__hint { font: 400 var(--fs-300)/1.4 var(--font-mono); color: var(--text-faint); }
.zcb__status { margin-top: var(--space-4); }
.zcb__status:empty { display: none; }
.zcb .zcb__done {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.zcb .zcb__noscript { color: var(--text-muted); }

/* Error red needs a lighter shade on dark surfaces. */
[data-theme="dark"] .zcb__error { color: #ff8a80; }
[data-theme="dark"] .zcb [aria-invalid="true"] { border-color: #ff8a80; }
[data-theme="dark"] .zcb .zcb__alert { border-left-color: #ff8a80; }