/* ==========================================================================
   Vantage Point Acupuncture - contact form stylesheet
   Loaded ONLY by contact/index.html, after all the other stylesheets.
   Every selector below is namespaced with .vp-form or .vp-modal so nothing
   here can affect any other page or any other part of this page.
   Safe to edit. Do not add general site styles to this file.
   ========================================================================== */

.vp-form {
  --vp-blue: #0b3d91;
  --vp-blue-dark: #082d6b;
  --vp-ink: #2b2b2b;
  --vp-muted: #6b7280;
  --vp-line: #d7dde6;
  --vp-line-strong: #b9c3d1;
  --vp-error: #b3261e;
  --vp-error-bg: #fdf3f2;

  font-family: var(--font-ppneuemontreal, "ppNeueMontreal", sans-serif);
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.vp-form *,
.vp-form *::before,
.vp-form *::after {
  box-sizing: border-box;
}

/* ----- Rows ---------------------------------------------------------------
   auto-fit means the split rows collapse to one column based on how much
   room the white card actually has, not on the viewport width. That is what
   keeps it correct when the card is only half the page on desktop. */
.vp-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  width: 100%;
  min-width: 0;
}

.vp-form__row--split {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.vp-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

/* ----- Labels ------------------------------------------------------------- */
.vp-form label.vp-form__label {
  display: block;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--vp-ink);
  overflow-wrap: break-word;
}

.vp-form__req {
  color: var(--vp-blue);
  margin-left: 2px;
}

/* ----- Inputs, selects, textarea ------------------------------------------ */
.vp-form .vp-form__control {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 16px; /* 16px stops iOS Safari zooming in on focus */
  line-height: 1.4;
  color: var(--vp-ink);
  background-color: #fff;
  border: 1px solid var(--vp-line);
  border-radius: 8px;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.vp-form textarea.vp-form__control {
  min-height: 130px;
  resize: vertical;
  overflow: auto;
}

.vp-form .vp-form__control::placeholder {
  color: #9aa3af;
  opacity: 1;
}

.vp-form .vp-form__control:hover:not(:focus) {
  border-color: var(--vp-line-strong);
}

.vp-form .vp-form__control:focus,
.vp-form .vp-form__control:focus-visible {
  border-color: var(--vp-blue);
  box-shadow: 0 0 0 3px rgba(11, 61, 145, 0.14);
}

/* Select needs its own arrow once appearance is removed. */
.vp-form select.vp-form__control {
  padding-right: 42px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230b3d91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  cursor: pointer;
  text-overflow: ellipsis;
}

.vp-form select.vp-form__control::-ms-expand {
  display: none;
}

/* ----- Error state -------------------------------------------------------- */
.vp-form .vp-form__control.is-invalid {
  border-color: var(--vp-error);
  background-color: var(--vp-error-bg);
}

.vp-form .vp-form__control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.14);
}

.vp-form__error {
  display: none;
  font-size: 13px;
  line-height: 1.4;
  color: var(--vp-error);
  overflow-wrap: break-word;
  word-break: break-word;
}

.vp-form__error.is-visible {
  display: block;
}

/* ----- Preferred contact method (radio pills) ----------------------------- */
.vp-form__fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vp-form__legend {
  display: block;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--vp-ink);
}

.vp-form__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.vp-form label.vp-form__choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 18px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 400;
  color: var(--vp-ink);
  background-color: #fff;
  border: 1px solid var(--vp-line);
  border-radius: 999px;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
}

.vp-form__choice input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  border: 1px solid var(--vp-line-strong);
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
}

.vp-form__choice input[type="radio"]:checked {
  border-color: var(--vp-blue);
  border-width: 5px;
}

.vp-form__choice:has(input[type="radio"]:checked) {
  border-color: var(--vp-blue);
  background-color: rgba(11, 61, 145, 0.06);
}

/* Fallback for browsers without :has - JS mirrors the state onto the label. */
.vp-form label.vp-form__choice.is-selected {
  border-color: var(--vp-blue);
  background-color: rgba(11, 61, 145, 0.06);
}

.vp-form__choice input[type="radio"]:focus-visible {
  outline: 2px solid var(--vp-blue);
  outline-offset: 2px;
}

/* ----- Privacy consent ---------------------------------------------------- */
.vp-form__consent {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.vp-form label.vp-form__consent-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--vp-muted);
  cursor: pointer;
  min-width: 0;
  overflow-wrap: break-word;
}

.vp-form__consent-box {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  padding: 0;
  border: 1px solid var(--vp-line-strong);
  border-radius: 5px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.vp-form__consent-box:checked {
  background-color: var(--vp-blue);
  border-color: var(--vp-blue);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

.vp-form__consent-box:focus-visible {
  outline: 2px solid var(--vp-blue);
  outline-offset: 2px;
}

.vp-form__consent-box.is-invalid {
  border-color: var(--vp-error);
}

.vp-form__consent-text a {
  color: var(--vp-blue);
  text-decoration: underline;
}

/* ----- Honeypot -----------------------------------------------------------
   Kept out of sight and out of the accessibility tree, but still a real
   field so that automated scripts fill it in. It is not type="hidden",
   because some bots skip hidden inputs. It is not display:none inside a
   labelled group either, so browser autofill has nothing to attach to. */
.vp-form__hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ----- Submit -------------------------------------------------------------
   Matches the pill button that was already on this page. */
.vp-form__submit {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 52px;
  margin: 6px 0 0;
  padding: 14px 24px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
  background-color: var(--vp-blue);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    opacity 0.2s ease;
}

.vp-form__submit:hover {
  background-color: var(--vp-blue-dark);
}

.vp-form__submit:focus-visible {
  outline: 2px solid var(--vp-blue-dark);
  outline-offset: 3px;
}

.vp-form__submit[disabled] {
  opacity: 0.72;
  cursor: not-allowed;
}

/* ----- Form-level status message ------------------------------------------ */
.vp-form__status {
  display: none;
  margin: 0;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.45;
  border-radius: 8px;
  overflow-wrap: break-word;
}

.vp-form__status.is-visible {
  display: block;
}

.vp-form__status--error {
  color: var(--vp-error);
  background-color: var(--vp-error-bg);
  border: 1px solid rgba(179, 38, 30, 0.25);
}

.vp-form__status a {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
  white-space: nowrap;
}

/* ==========================================================================
   Success modal
   ========================================================================== */

.vp-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: var(--font-ppneuemontreal, "ppNeueMontreal", sans-serif);
  background-color: rgba(15, 23, 42, 0.55);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.vp-modal.is-open {
  display: flex;
}

.vp-modal *,
.vp-modal *::before,
.vp-modal *::after {
  box-sizing: border-box;
}

.vp-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding: 32px 24px 28px;
  text-align: center;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.vp-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #6b7280;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  line-height: 0;
}

.vp-modal__close:hover {
  color: #0b3d91;
  background-color: rgba(11, 61, 145, 0.07);
}

.vp-modal__close:focus-visible {
  outline: 2px solid #0b3d91;
  outline-offset: 2px;
}

.vp-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  color: #0b3d91;
  background-color: rgba(11, 61, 145, 0.1);
  border-radius: 50%;
}

.vp-modal__title {
  margin: 0 0 10px;
  font-family: inherit;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  color: #2b2b2b;
  letter-spacing: normal;
}

.vp-modal__text {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.55;
  color: #6b7280;
  overflow-wrap: break-word;
}

.vp-modal__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  width: 100%;
}

.vp-modal__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 13px 18px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.vp-modal__btn--primary,
.vp-modal a.vp-modal__btn--primary {
  color: #fff !important;
  background-color: #0b3d91;
}

.vp-modal__btn--primary:hover {
  background-color: #082d6b;
}

.vp-modal__btn--secondary,
.vp-modal a.vp-modal__btn--secondary {
  color: #4d3634 !important;
  background-color: #ffcdb2;
}

.vp-modal__btn--secondary:hover {
  background-color: #f7bb9b;
}

.vp-modal__btn:focus-visible {
  outline: 2px solid #082d6b;
  outline-offset: 3px;
}

@media (max-width: 359px) {
  .vp-modal__dialog {
    padding: 26px 16px 22px;
  }
  .vp-modal__title {
    font-size: 23px;
  }
  .vp-modal__actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vp-form .vp-form__control,
  .vp-form__submit,
  .vp-modal__btn,
  .vp-form label.vp-form__choice,
  .vp-form__consent-box {
    transition: none;
  }
}