/* ==========================================================================
   HelpGent — "Contact" template styles (loaded after common.css)
   The dark title band (.phero.phero--title, common.css), then one card: an
   optional note, the query-type select and the chosen FormGent form.
   FormGent's own variables are pointed at the shared tokens.
   ========================================================================== */

/* ── page + card ────────────────────────────────────────────────────────── */
.contact__body{padding:56px 0 var(--pad-lg);background:var(--tint)}
.contact__card{max-width:760px;margin:0 auto;padding:40px 44px;display:grid;gap:24px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.contact__note{padding:14px 16px;border-radius:var(--radius);background:var(--accent-soft);font-size:15px;line-height:1.6;color:var(--text)}
.contact__note a{color:var(--accent);font-weight:500;text-decoration:underline;text-underline-offset:2px}

/* query type: the site's select (as on checkout) */
.contact__type{display:grid;gap:8px}
.contact__label{font-size:15px;font-weight:500;line-height:1.4;color:var(--text)}
.contact__select{position:relative}
.contact__input{width:100%;height:50px;padding:0 44px 0 16px;appearance:none;-webkit-appearance:none;cursor:pointer;
  font-family:var(--font);font-size:16px;color:var(--text);background:var(--white);
  border:1px solid var(--line-2);border-radius:var(--radius);transition:border-color var(--t-ui),box-shadow var(--t-ui)}
.contact__input:hover{border-color:var(--text-3)}
.contact__input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.contact__chev{position:absolute;right:16px;top:50%;translate:0 -50%;color:var(--text-2);pointer-events:none}

.contact__form[hidden]{display:none}
.contact__reply{display:flex;align-items:center;justify-content:center;gap:8px;padding-top:20px;border-top:1px solid var(--line);
  font-size:14px;color:var(--text-2);text-align:center}
.contact__reply svg{flex:none;color:var(--accent)}

/* ── FormGent, in the site design ───────────────────────────────────────── */
/* its per-form variables (.formgent-form-<id>), pointed at the tokens */
.contact .formgent-form{
  --formgent-form-background-color:transparent;
  --formgent-form-padding-desktop:0;
  --formgent-form-padding-tablet:0;
  --formgent-form-padding-mobile:0;
  --formgent-form-border-radius:0;
  --formgent-field-vertical-spacing-desktop:22px;
  --formgent-field-vertical-spacing-tablet:22px;
  --formgent-field-vertical-spacing-mobile:20px;
  --formgent-field-background-color:var(--white);
  --formgent-field-background-color-hover:var(--white);
  --formgent-field-placeholder-color:var(--text-3);
  --formgent-field-label-color:var(--text);
  --formgent-field-description-color:var(--text-2);
  --formgent-field-error-message-color:#C4373C;
  --formgent-field-input-color:var(--text);
  --formgent-field-border:1px solid var(--line-2);
  --formgent-field-border-radius:var(--radius);
  --formgent-fixed-btn-bg-color:var(--accent);
  --formgent-fixed-btn-border-color:var(--accent);
  --formgent-fixed-btn-text-color:#fff;
  font-family:var(--font);
}
.contact .formgent-form :is(input,textarea,select,button,label){font-family:var(--font)}
.contact .formgent-form label{font-size:15px;font-weight:500;line-height:1.4;color:var(--text)}
.contact .formgent-field-required{color:#E5484D}
.contact .formgent-field-sub-label{font-size:13.5px;line-height:1.5;color:var(--text-2)}
.contact .formgent-field-single__input{min-height:50px;font-size:16px;color:var(--text);
  transition:border-color var(--t-ui),box-shadow var(--t-ui)}
.contact .formgent-field-single__input--textarea{min-height:160px;line-height:1.6}
.contact .formgent-field-single__input:hover{border-color:var(--text-3)}
.contact .formgent-field-single__input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}

/* submit: the site's filled button, full width */
.contact .formgent-field-single--button.formgent-show-button{justify-content:stretch}
.contact .formgent-btn.formgent-btn-default{width:100%;min-height:54px;padding:16px 24px;border:1px solid var(--accent);border-radius:var(--radius);
  background:var(--accent);color:#fff;font-size:16px;font-weight:500;cursor:pointer;transition:background var(--t-ui),border-color var(--t-ui)}
.contact .formgent-btn.formgent-btn-default:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.contact .formgent-btn.formgent-btn-default:focus-visible{outline:none;box-shadow:var(--ring)}

/* thank-you message after sending */
.contact .formgent-notices{padding:8px 0;color:var(--text)}
.contact .formgent-notices :is(h3,p){font-family:var(--font);color:var(--text)}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:767px){
  .contact__body{padding:28px 0 var(--pad)}
  .contact__card{padding:24px 20px;gap:20px}
}