.vg-modal{position:fixed;inset:0;display:none;z-index:10000}
.vg-modal.is-open{display:block}
.vg-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.vg-modal__dialog{position:relative;max-width:520px;margin:5vh auto;background:#fff;border-radius:16px;padding:20px 20px 24px}
.vg-modal__title{font-size:22px;margin:6px 0 12px}
.vg-modal__close{position:absolute;top:8px;right:10px;background:transparent;border:0;font-size:26px;line-height:1;cursor:pointer}
.vg-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vg-grid .vg-field:nth-child(1){grid-column:1/-1}
.vg-field{display:flex;flex-direction:column}
.vg-field span{font-size:13px;color:#666;margin-bottom:4px}
.vg-field input{height:44px;border:1px solid #e5e7eb;border-radius:12px;padding:0 12px}
.vg-check{grid-column:1/-1;display:flex;align-items:center;gap:8px}
.vg-modal__actions{margin-top:12px;text-align:center}
/* 1) Шрифт */
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@400;700&display=swap');

/* 2) Базові стилі модалки */
#vgAddressModal .vg-modal__dialog{
  font-family: "Balsamiq Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* 3) Сітка форми */
#vgAddressModal .vg-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px; /* з макета */
}

/* 4) Поля вводу/селект згідно макета */
#vgAddressModal .vg-field input,
#vgAddressModal .vg-field select,
#vgAddressModal .vg-field textarea{
  width:440px;              /* макет */
  max-width:100%;           /* щоб не ламало на мобільному */
  height:56px;              /* макет */
  padding:16px 16px 16px 20px; /* макет */
  border:1px solid #DCE7C0; /* делікатна зелена рамка, піджени якщо треба */
  border-radius:20px;       /* макет */
  background:#fff;
  font:400 18px/1 "Balsamiq Sans", inherit; /* вага, розмір, line-height 100% */
  letter-spacing:0.04em;    /* 4% ≈ 0.04em у CSS */
  color:#1b1b1b;
  outline:none;
  box-sizing:border-box;
}

/* label підпис над інпутом (якщо є) */
#vgAddressModal .vg-field > span{
  display:block;
  margin:0 0 6px;
  font:400 14px/1 "Balsamiq Sans", inherit;
  opacity:.85;
}

/* 5) Фокус/hover стан */
#vgAddressModal .vg-field input:focus,
#vgAddressModal .vg-field select:focus,
#vgAddressModal .vg-field textarea:focus{
  border-color:#9ED32A;
  box-shadow:0 0 0 3px rgba(158,211,42,.25);
}

/* 6) Placeholder */
#vgAddressModal ::placeholder{
  color:#9AA39B;
  opacity:1;
  letter-spacing:0.04em;
}

/* 7) Чекбокс “За замовчуванням” */
#vgAddressModal .vg-check{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:10px;
  font:400 16px/1 "Balsamiq Sans", inherit;
  letter-spacing:0.04em;
}

/* 8) Кнопка збереження (під зелений стиль сайту) */
#vgAddressModal .vg-modal__actions .button{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:200px; height:56px;
  padding:0 24px;
  border-radius:28px;
  border:2px solid #000;          /* чорний контур як у скрінах */
  background:#A6D83E;             /* зелений бренд — піджени код */
  color:#000;
  font:700 18px/1 "Balsamiq Sans", inherit;
  letter-spacing:0.04em;
  cursor:pointer;
  transition:transform .05s ease, box-shadow .2s ease, background-color .2s ease;
}
#vgAddressModal .vg-modal__actions .button:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}
#vgAddressModal .vg-modal__actions .button:active{
  transform:translateY(0);
}

/* 9) Мобільні правки */
@media (max-width:560px){
  #vgAddressModal .vg-grid{ grid-template-columns: 1fr; }
  #vgAddressModal .vg-field input,
  #vgAddressModal .vg-field select,
  #vgAddressModal .vg-field textarea{
    width:100%; /* повна ширина на мобільному */
  }
}