/*
 * Autorespond Hub, extra layout on top of the design.
 *
 * ontwerp.css stays untouched so it can be synced from the Dutch theme.
 * Everything that only exists on the English site lives here, and this file
 * is enqueued last so it always wins.
 */

/* --------------------------------------------------------------------------
   1. The AI section: explanation on the left, a sample conversation on the right
   -------------------------------------------------------------------------- */
.ai-split{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:start}

.ai-uitleg .rijen{margin-bottom:26px}
.ai-uitleg .knoppen{display:flex;flex-wrap:wrap;gap:10px}

.ai-praat{background:var(--paneel);border:1px solid var(--rand);border-radius:var(--rl);padding:22px}

.ai-regel{
  border-radius:14px;padding:13px 16px;margin-bottom:10px;font-size:14.5px;line-height:1.55;
  max-width:92%;
}
.ai-regel.jij{
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  margin-left:auto;
}
.ai-regel.ai{background:var(--paneel2);border:1px solid var(--rand)}
.ai-regel.ai b{color:var(--accent)}

.ai-noot{font-size:12.5px;opacity:.72;margin:16px 0 0}

@media (max-width:900px){
  .ai-split{grid-template-columns:1fr;gap:26px}
  .ai-regel{max-width:100%}
}

/* --------------------------------------------------------------------------
   2. The sign-up form
   The form itself is a Fluent Forms form. These rules make it sit inside the
   dark panel of the design instead of bringing its own white box along.
   -------------------------------------------------------------------------- */
.rfform .fluentform{margin:0}
.rfform .fluentform .ff-el-group{margin-bottom:14px}
.rfform .fluentform .ff-el-input--label label{
  font-family:'Archivo',system-ui,sans-serif;font-size:13px;font-weight:600;
  color:var(--tekst);margin-bottom:6px
}
.rfform .fluentform input[type=text],
.rfform .fluentform input[type=email],
.rfform .fluentform input[type=url],
.rfform .fluentform input[type=tel],
.rfform .fluentform select,
.rfform .fluentform textarea{
  width:100%;background:var(--paneel2);color:var(--tekst);
  border:1px solid var(--rand2);border-radius:11px;padding:11px 13px;
  font-family:inherit;font-size:14.5px;box-shadow:none
}
.rfform .fluentform input:focus,
.rfform .fluentform select:focus,
.rfform .fluentform textarea:focus{
  border-color:var(--accent);outline:2px solid color-mix(in srgb, var(--accent) 28%, transparent);outline-offset:1px
}
.rfform .fluentform .ff-el-form-check-label{font-size:14px;line-height:1.5}
.rfform .fluentform .ff-btn-submit{
  width:100%;background:var(--accent);color:#fff;border:0;border-radius:12px;
  padding:14px 18px;font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:15px;cursor:pointer
}
.rfform .fluentform .ff-btn-submit:hover{background:var(--accent-h)}
.rfform .fluentform .ff-el-is-error input,
.rfform .fluentform .ff-el-is-error select,
.rfform .fluentform .ff-el-is-error textarea{border-color:#e5484d}
.rfform .fluentform .error-text,
.rfform .fluentform .text-danger{font-size:12.5px;color:#e5484d}
.rfform .ff-message-success{
  background:color-mix(in srgb, var(--groen) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--groen) 34%, transparent);
  border-radius:12px;padding:16px;color:var(--tekst)
}

/* --------------------------------------------------------------------------
   3. Comparison table on the pricing page
   -------------------------------------------------------------------------- */
.vgl{width:100%;border-collapse:collapse;font-size:14.5px}
.vgl th,.vgl td{padding:12px 14px;border-bottom:1px solid var(--rand);text-align:left;vertical-align:top}
.vgl thead th{
  font-family:'Archivo',system-ui,sans-serif;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;opacity:.7;border-bottom:1px solid var(--rand2)
}
.vgl td.ja,.vgl td.nee{text-align:center;width:130px}
.vgl td.ja svg{width:18px;height:18px;stroke:var(--groen);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.vgl td.nee{opacity:.4}
.vgl-wrap{overflow-x:auto;border:1px solid var(--rand);border-radius:var(--r);background:var(--paneel)}

/* --------------------------------------------------------------------------
   4. Small helpers
   -------------------------------------------------------------------------- */
.mid-knoppen{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.tekst-mid{text-align:center}