/* The homepage contact form's additions (website-contact.js): the phone box with the free scan's
   country picker, and the red box that explains a wrong answer under its own field.
   Dor, 28 October 2026: the phone number is required. 29 October 2026: no floating button,
   the form stays on the homepage only. Sizes and colours match the form's other boxes
   (website-trust.css). */

/* The phone box: the free scan's country picker (flag, code, list) and the number. */
.g13-phone-field{margin:16px 0}
.g13-phone-label{display:block;font-size:13px;font-weight:650}
.g13-phone{display:flex;gap:8px;align-items:stretch;margin-top:7px}
.g13-phone-country{position:relative;display:flex;align-items:center;gap:6px;flex-shrink:0;padding:0 10px 0 12px;border:1px solid #d8cce4;border-radius:10px;background:#fefcff;color:#261434;font-size:15px;font-weight:400;cursor:pointer}
.g13-phone-country:focus-within{outline:2px solid #a78bfa;border-color:#6d28d9}
.g13-phone-flag{display:flex;align-items:center;min-width:24px;font-size:18px;line-height:1}
.g13-phone-flag img{display:block;width:24px;height:17px;object-fit:contain;border-radius:2px}
.g13-phone-code{min-width:34px;font-variant-numeric:tabular-nums}
.g13-phone-caret{font-size:10px;color:#6b5b86}
.g13-phone-country select{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;font-size:16px}
.g13-phone input{flex:1 1 auto;width:auto!important;min-width:0;margin:0!important}

/* A wrong answer is explained under its own field, in the free scan's red box. */
.g13-field-error{display:block;margin:8px 0 0;padding:10px 12px;border:1px solid #fecaca;border-radius:10px;background:#fef2f2;color:#7f1d1d;font-size:13px;font-weight:400;line-height:1.45;letter-spacing:0}
.g13-field-error b{display:block;margin-bottom:1px;font-weight:700}
.g13-field-error[hidden]{display:none}
[data-g13-contact-form] input[aria-invalid="true"],[data-g13-contact-form] textarea[aria-invalid="true"]{border-color:#dc2626!important;background:#fff7f7!important}
[data-g13-contact-form] .g13-shake{animation:g13-shake .42s ease-in-out}
.g13-contact-result b{display:block}
@keyframes g13-shake{15%,85%{transform:translateX(-3px)}30%,70%{transform:translateX(3px)}50%{transform:translateX(-2px)}}
@media(prefers-reduced-motion:reduce){[data-g13-contact-form] .g13-shake{animation:none}}
