:root {
  --vg-auth-green: #0ba869;
  --vg-auth-green-dark: #078653;
  --vg-auth-green-soft: #eaf8f2;
  --vg-auth-text: #17211d;
  --vg-auth-muted: #66736d;
  --vg-auth-border: #dfe8e3;
  --vg-auth-danger: #d74949;
}

html.vg-auth-modal-open,
body.vg-auth-modal-open {
  overflow: hidden !important;
}

.vg-auth-modal,
.vg-auth-modal * {
  box-sizing: border-box;
}

.vg-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 130000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: inherit;
  color: var(--vg-auth-text);
}

.vg-auth-modal__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: rgba(15, 25, 21, .58);
  backdrop-filter: blur(5px);
  cursor: default;
}

.vg-auth-modal__dialog {
  position: relative;
  width: min(900px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 24px;
  box-shadow: 0 30px 90px rgba(8, 27, 19, .28);
  animation: vgAuthModalIn .24s ease-out both;
}

@keyframes vgAuthModalIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.vg-auth-modal__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px 12px;
}

.vg-auth-modal__eyebrow {
  margin-bottom: 3px;
  color: var(--vg-auth-green-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.vg-auth-modal__header h2 {
  margin: 0;
  color: var(--vg-auth-text);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 750;
}

.vg-auth-modal__close {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--vg-auth-border);
  border-radius: 14px;
  background: #fff;
  color: #33413a;
  cursor: pointer;
  transition: .18s ease;
}

.vg-auth-modal__close:hover,
.vg-auth-modal__close:focus-visible {
  border-color: #b8ccc1;
  background: #f4f9f6;
  color: var(--vg-auth-green-dark);
  outline: none;
}

.vg-auth-modal__close svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

.vg-auth-modal__tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 26px;
  padding: 4px;
  border-radius: 14px;
  background: #f1f5f3;
}

.vg-auth-modal__tab,
.vg-auth-switch button {
  appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.vg-auth-modal__tab {
  min-height: 42px;
  border-radius: 11px;
  background: transparent;
  color: #5d6963;
  font-size: 14px;
  font-weight: 700;
  transition: .18s ease;
}

.vg-auth-modal__tab.is-active {
  background: #fff;
  color: var(--vg-auth-green-dark);
  box-shadow: 0 6px 18px rgba(25, 53, 40, .09);
}

.vg-auth-modal__notice {
  margin: 14px 26px 0;
  padding: 12px 14px;
  border: 1px solid #f2caca;
  border-radius: 12px;
  background: #fff4f4;
  color: #9d2f2f;
  font-size: 13px;
  line-height: 1.45;
}

.vg-auth-modal__notice.is-success {
  border-color: #bfe8d4;
  background: #effaf5;
  color: #14764d;
}

.vg-auth-modal__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.vg-auth-panel {
  display: none;
  min-height: 420px;
}

.vg-auth-panel.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr);
}

.vg-auth-panel[data-vg-auth-panel="register"].is-active {
  display: block;
}

.vg-auth-panel__main {
  padding: 24px 26px 28px;
}

.vg-auth-panel__main--register {
  max-width: 760px;
  margin: 0 auto;
}

.vg-auth-panel__intro {
  margin-bottom: 20px;
}

.vg-auth-panel__intro h3 {
  margin: 0 0 5px;
  font-size: 20px;
  font-weight: 750;
}

.vg-auth-panel__intro p {
  margin: 0;
  color: var(--vg-auth-muted);
  font-size: 14px;
  line-height: 1.55;
}

.vg-auth-panel__aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.65), transparent 34%),
    linear-gradient(145deg, #e9f8f1 0%, #f6fbf8 100%);
  border-left: 1px solid #e3eee8;
}

.vg-auth-aside__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 17px;
  background: var(--vg-auth-green);
  color: #fff;
  box-shadow: 0 12px 24px rgba(11, 168, 105, .23);
}

.vg-auth-aside__icon svg,
.vg-auth-aside__secure svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vg-auth-panel__aside h3 {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.35;
}

.vg-auth-panel__aside ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vg-auth-panel__aside li {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  color: #405048;
  font-size: 13px;
  line-height: 1.4;
}

.vg-auth-panel__aside li > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--vg-auth-green-dark);
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(36, 67, 52, .08);
}

.vg-auth-aside__secure {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 25px;
  padding-top: 18px;
  border-top: 1px solid #d8e9df;
  color: #607068;
  font-size: 12px;
  line-height: 1.4;
}

.vg-auth-aside__secure svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--vg-auth-green-dark);
}

.vg-auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 16px;
}

.vg-auth-field {
  min-width: 0;
  margin-bottom: 16px;
  border: 0;
  padding: 0;
}

.vg-auth-grid .vg-auth-field {
  margin-bottom: 0;
}

.vg-auth-field label,
.vg-auth-field legend,
.vg-auth-field__label-row {
  color: #26332d;
  font-size: 13px;
  font-weight: 700;
}

.vg-auth-field label,
.vg-auth-field legend {
  display: block;
  margin: 0 0 7px;
}

.vg-auth-field label > span,
.vg-auth-field legend > span {
  color: var(--vg-auth-danger);
}

.vg-auth-field__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.vg-auth-field__label-row label {
  margin: 0;
}

.vg-auth-field__label-row a {
  color: var(--vg-auth-green-dark);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.vg-auth-input-wrap {
  position: relative;
}

.vg-auth-input-wrap > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 19px;
  height: 19px;
  transform: translateY(-50%);
  fill: none;
  stroke: #738079;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.vg-auth-modal input[type="text"],
.vg-auth-modal input[type="email"],
.vg-auth-modal input[type="tel"],
.vg-auth-modal input[type="password"],
.vg-auth-modal select,
.vg-auth-modal textarea {
  width: 100%;
  min-height: 48px;
  margin: 0;
  border: 1px solid var(--vg-auth-border);
  border-radius: 13px;
  background: #fbfdfc;
  color: var(--vg-auth-text);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.vg-auth-input-wrap input {
  padding: 0 46px 0 44px;
}

.vg-auth-modal select,
.vg-auth-modal textarea,
.vg-auth-custom-fields > .vg-auth-field > input {
  padding: 12px 14px;
}

.vg-auth-modal textarea {
  min-height: 90px;
  resize: vertical;
}

.vg-auth-modal input:focus,
.vg-auth-modal select:focus,
.vg-auth-modal textarea:focus {
  border-color: var(--vg-auth-green);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(11, 168, 105, .11);
}

.vg-auth-field.has-error input,
.vg-auth-field.has-error select,
.vg-auth-field.has-error textarea,
.vg-auth-check--terms.has-error {
  border-color: #e89b9b;
  box-shadow: 0 0 0 3px rgba(215, 73, 73, .08);
}

.vg-auth-field__hint {
  margin-top: 6px;
  color: #7b8781;
  font-size: 11px;
  line-height: 1.35;
}

.vg-auth-field__error {
  min-height: 0;
  margin-top: 5px;
  color: var(--vg-auth-danger);
  font-size: 11px;
  line-height: 1.35;
}

.vg-auth-password-toggle {
  position: absolute;
  right: 7px;
  top: 50%;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #738079;
  cursor: pointer;
}

.vg-auth-password-toggle:hover,
.vg-auth-password-toggle:focus-visible,
.vg-auth-password-toggle.is-active {
  background: #edf6f1;
  color: var(--vg-auth-green-dark);
  outline: none;
}

.vg-auth-password-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vg-auth-check {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  color: #4e5b55;
  font-size: 12px;
  line-height: 1.45;
  cursor: pointer;
}

.vg-auth-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.vg-auth-check__box {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  margin-top: -1px;
  border: 1.5px solid #b9c8c0;
  border-radius: 6px;
  background: #fff;
  transition: .16s ease;
}

.vg-auth-check__box--radio {
  border-radius: 50%;
}

.vg-auth-check input:checked + .vg-auth-check__box {
  border-color: var(--vg-auth-green);
  background: var(--vg-auth-green);
  box-shadow: inset 0 0 0 4px #fff;
}

.vg-auth-check:not(:has(.vg-auth-check__box--radio)) input:checked + .vg-auth-check__box {
  box-shadow: none;
  background:
    linear-gradient(135deg, transparent 46%, #fff 47% 55%, transparent 56%) 4px 8px/6px 6px no-repeat,
    linear-gradient(45deg, transparent 41%, #fff 42% 53%, transparent 54%) 9px 5px/8px 9px no-repeat,
    var(--vg-auth-green);
}

.vg-auth-check a {
  color: var(--vg-auth-green-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vg-auth-submit {
  width: 100%;
  min-height: 50px;
  margin-top: 19px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--vg-auth-green) 0%, #08b971 100%);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(11, 168, 105, .22);
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.vg-auth-submit:hover,
.vg-auth-submit:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 15px 28px rgba(11, 168, 105, .28);
  outline: none;
}

.vg-auth-submit:disabled,
.vg-auth-submit.is-loading {
  opacity: .62;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

.vg-auth-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  color: #748079;
  font-size: 12px;
}

.vg-auth-switch button {
  padding: 0;
  background: transparent;
  color: var(--vg-auth-green-dark);
  font-weight: 800;
}

.vg-auth-register-options {
  display: grid;
  gap: 11px;
  margin-top: 18px;
}

.vg-auth-custom-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 16px;
  margin-top: 16px;
}

.vg-auth-choice-list {
  display: grid;
  gap: 8px;
}

.vg-auth-captcha {
  margin-top: 18px;
}

.vg-auth-inline-warning {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #f0d6a6;
  border-radius: 12px;
  background: #fff9ed;
  color: #835f19;
  font-size: 12px;
  line-height: 1.45;
}

.vg-auth-inline-warning a {
  display: inline-block;
  margin-left: 4px;
  color: #6a4b0c;
  font-weight: 800;
}

@media (max-width: 767px) {
  .vg-auth-modal {
    /* iOS Safari moves the visual viewport when the keyboard opens.
       Keep the modal attached to the currently visible viewport instead
       of the layout viewport, so its top is not pushed above the screen. */
    top: var(--vg-auth-viewport-top, 0px);
    right: auto;
    bottom: auto;
    left: var(--vg-auth-viewport-left, 0px);
    width: var(--vg-auth-viewport-width, 100vw);
    height: var(--vg-auth-viewport-height, 100dvh);
    min-height: 0;
    align-items: flex-start;
    transform: translateZ(0);
    padding:
      calc(12px + env(safe-area-inset-top))
      10px
      calc(12px + env(safe-area-inset-bottom));
  }

  .vg-auth-modal__dialog {
    width: 100%;
    max-height: calc(
      var(--vg-auth-viewport-height, 100dvh)
      - 24px
      - env(safe-area-inset-top)
      - env(safe-area-inset-bottom)
    );
    border-radius: 20px;
  }

  .vg-auth-modal__header {
    padding: 14px 18px 9px;
  }

  /* Mobile: show only “Особистий кабінет”; hide the compact brand line. */
  .vg-auth-modal__eyebrow {
    display: none !important;
  }

  .vg-auth-modal__header h2 {
    font-size: 21px;
    line-height: 1.15;
  }

  .vg-auth-modal__close {
    flex-basis: 39px;
    width: 39px;
    height: 39px;
    border-radius: 12px;
  }

  .vg-auth-modal__tabs {
    margin: 0 18px;
  }

  .vg-auth-modal__notice {
    margin: 12px 18px 0;
  }

  .vg-auth-panel.is-active {
    display: block;
    min-height: 0;
  }

  .vg-auth-panel__main {
    padding: 20px 18px calc(26px + env(safe-area-inset-bottom));
  }

  .vg-auth-modal__content {
    scroll-padding-top: 12px;
    scroll-padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  .vg-auth-panel__aside {
    display: none;
  }

  .vg-auth-grid,
  .vg-auth-custom-fields {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .vg-auth-grid .vg-auth-field,
  .vg-auth-custom-fields .vg-auth-field {
    margin-bottom: 14px;
  }

  .vg-auth-panel__intro {
    margin-bottom: 17px;
  }

  .vg-auth-modal input[type="text"],
  .vg-auth-modal input[type="email"],
  .vg-auth-modal input[type="tel"],
  .vg-auth-modal input[type="password"],
  .vg-auth-modal select {
    min-height: 50px;
    font-size: 16px;
  }

  .vg-auth-submit {
    min-height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vg-auth-modal__dialog,
  .vg-auth-modal *,
  .vg-auth-modal *::before,
  .vg-auth-modal *::after {
    animation: none !important;
    transition: none !important;
  }
}