
.lgv-btn,
.lgv-btn:link,
.lgv-btn:visited {
    display: inline-flex!important;
    align-items: center!important;
    justify-content: center!important;
    gap: 6px;                    /* Space between icon & text */
    padding: 10px 13px!important;
    margin-bottom: 10px;
    background: #3a3c41;         /* Dark grey (default) */
    color: #ffffff !important;   /* Win over the theme's own link colour */
    font-weight: 600!important;
    font-size: 15px!important;
    text-decoration: none!important;
    border-radius: 10px!important;
    line-height: 1!important;
    border: none!important;
    transition: background 0.25s ease, color 0.25s ease;
    width: auto!important;
    cursor: pointer!important;
}

/* Fix the giant SVG */
.lgv-btn svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    flex-shrink: 0;
    display: inline-block;
    fill: currentColor !important;  /* ensures icon follows text color */
    vertical-align: middle;
}

/* Hover state (lavender) */
.lgv-btn:hover {
    background: #b389bb;          /* Lavender */
    color: #ffffff !important;
}

.warn-box {
  display: block;
  width: 100%;
  background: #fff7d6;
  border-left: 4px solid #f0ad4e;
  padding: 12px 14px;
  margin-top: 8px;
  margin-bottom: 6px;
  border-radius: 4px;

  font-size: 0.9rem;
  line-height: 1.45;
  color: #856404;

  animation: warnFade 0.3s ease-out;
}

.warn-box strong {
  color: #b01717;
  font-weight: 600;
}
/* RC1 (John, 22 Oct 2026, review desk q-11: "the button formatting, login form"): the sign-in
   form as live (measured at 1440 and 390). The description 16px under the card's "Members Login"
   title and 16px above the email box, the button 16px under the box (the three had run
   together); the button in live's lavender (live's Elementor kit coloured every <button>; the
   rebuild has no kit, so it had fallen back to this file's charcoal), turning teal on hover as
   the site's purple buttons do. The words, the field and the icon are unchanged. Raleway, as the
   rest of the page (the browser's own font before). */
.amb-login-form > p {
    margin: 16px 0;
}

.amb-login-form > p:last-child {
    margin-bottom: 0;
}

.amb-login-form input[type="email"],
.amb-login-form input[type="text"] {
    font-family: inherit;
    font-size: 16px; /* no zoom on phones */
    line-height: normal;
    color: var(--lv-ink, #3a3c41);
    background-color: #fff;
}

.amb-login-form .lgv-btn {
    font-family: inherit;
}

button.lgv-btn {
    background: var(--lv-purple-text, #b389bb);
}

button.lgv-btn:hover,
button.lgv-btn:focus-visible {
    background: var(--lv-teal-text, #53c4ca);
}

button.lgv-btn:focus-visible {
    outline: 2px solid var(--lv-ink, #3a3c41);
    outline-offset: 2px;
}
