/* Shared Livewire consultation form on Contact and About. */
.form-card { position: relative; width: 608px; margin: 0 auto; padding: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; border-radius: 28px; background: var(--white); box-shadow: 0 8px 16px rgba(0,0,0,.04); }
.form-card .field { position: static; min-width: 0; grid-column: 1 / -1; }
.form-card .field--first, .form-card .field--last { grid-column: auto; }
.form-card .field__phone input { flex: 1; min-width: 0; width: 100%; height: 100%; outline: none; }
.form-card .field__phone:focus-within { outline: 2px solid var(--navy); outline-offset: 2px; }
.form-card .field__phone--invalid { border-color: #b42318; }
.form-card .field__textarea { min-height: 148px; resize: vertical; }
/* Project location and service: the phone number's searchable picker as a full-width field
   (Select2-style). Location shows the chosen flag and name, with a globe until a country is
   picked (and for "Multiple countries"); the service shows its name only. */
.field__picker { position: relative; }
.form-card .field__picker-trigger { gap: 12px; padding: 6.5px 22.5px 6.5px 6.5px; text-align: left; cursor: pointer; }
.form-card .field__picker-trigger--plain { padding-left: 22.5px; }
.field__picker-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.field__picker-value--placeholder { color: rgba(0,0,0,.44); }
.field__flag--icon { background: #f0f1f4; }
.field__flag--icon img { inset: 10px; width: 20px; height: 20px; }
.field__picker .country-menu { left: 0; right: 0; width: auto; max-width: none; }
.country-option__flag .country-option__icon { inset: 3px; width: 18px; height: 18px; }
.form-card__consent, .form-card__captcha, .form-card__error, .form-card .btn { grid-column: 1 / -1; }
.form-card__captcha .recaptcha { min-height: 78px; }   /* the checkbox's own height, so the form does not jump when it loads */
.form-card__captcha .field__error { margin-top: 8px; }
.form-card .consent { position: static; white-space: normal; }
.form-card .consent input { width: 20px; height: 20px; flex: none; accent-color: var(--navy); cursor: pointer; }
.form-card .consent label { cursor: pointer; }
.form-card .btn { position: static; width: 100%; }
.form-card .btn:disabled { cursor: wait; opacity: .65; }
.form-card [aria-invalid="true"] { border-color: #b42318; }
.field__error, .form-card__error { color: #b42318; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.form-card__consent .field__error { margin-top: 8px; }

/* With reCAPTCHA on, the privacy consent and the "I'm not a robot" box share a row on wider
   screens. Google's box is a fixed 304 × 78, so it is scaled to the 256px column. */
@media (min-width: 900px) {
  .form-card:has(.form-card__captcha) .form-card__consent { grid-column: 1; align-self: center; }
  .form-card__captcha { grid-column: 2; display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
  .form-card__captcha .recaptcha { width: 304px; min-height: 78px; margin: -6px 0; flex: none; transform: scale(.84); transform-origin: right center; }   /* margins drop the 12px the scale frees */
  .form-card__captcha .field__error { align-self: stretch; }
}
.form-card--success { display: block; min-height: 240px; }
.form-card--success h2 { font-size: 28px; line-height: 1.2; margin-bottom: 16px; }
.form-card--success p { font-size: 18px; line-height: 1.5; }
.form-card--success p + p { margin-top: 16px; }

@media (max-width: 899px) {
  .form-card { width: 370px; padding: 16px; grid-template-columns: minmax(0, 1fr); gap: 16px; border-radius: 24px; }   /* Figma mobile: 16px between fields */
  .form-card .btn { margin-top: 12px; }   /* consent → button = 44px (16 gap + 12 + 16 line) */
  .field__input { padding: 0 18.5px; }
  .form-card .field__picker-trigger { gap: 8px; padding: 4px 18.5px 4px 4px; }
  .form-card .field__picker-trigger--plain { padding-left: 18.5px; }
  .field__picker .field__flag { width: 32px; height: 32px; }
  .field__picker .field__flag--icon img { inset: 7px; width: 18px; height: 18px; }
  .field__textarea { padding: 14.5px 18.5px; border-radius: 16px; }
  .form-card .field__textarea { min-height: 112px; }
  .form-card .consent { font-size: 14px; }
  .form-card--success h2 { font-size: 24px; }
  .form-card--success p { font-size: 16px; }
}

/* Figma mobile form: plain phone field (no flag), labels handled in the template */
@media (max-width: 899px) {
  .field__phone .field__sep { display: none; }
  .field__phone { padding: 4px 18.5px 4px 4px; gap: 8px; }
  .field__phone .field__flag { width: 32px; height: 32px; }
  .field__phone .field__flag-code { font-size: 11px; }
  .field__country { gap: 6px; }
  .field__dial { font-size: 14px; }
  .country-menu { left: -4px; width: 300px; }
  .country-menu__list { max-height: 232px; }
  .country-option { padding: 9px 10px; }
  .field__label .desktop-only { display: none !important; }
  .field__label .mobile-only { display: inline !important; }
}