/*
=================================================================
  Gravity Forms — Confirmation Modal
  - Popup shown after a successful submission (src/js/gf-confirmation-modal.js).
  - Overlay/panel values intentionally mirror the waitlist popup
    (_events.css .cfc-waitlist-modal) so the two read as one component.
=================================================================
*/

/* Overlay (hidden until JS adds .is-active) */
.cfc-confirm-modal {
  display: none;
}

.cfc-confirm-modal.is-active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: fixed;
  inset: 0;
  z-index: 10000; /* one above the waitlist modal so it can sit over it if needed */
  overflow-y: auto;
  background: rgba(40, 71, 52, 0.7); /* Pacific Moss @ 70% */
  padding: var(--wp--preset--spacing--80);
}

/* Lock background scroll (also defined for the waitlist popup; harmless dupe). */
body.cfc-modal-open {
  overflow: hidden;
}

/* Panel */
.cfc-confirm-modal__panel {
  position: relative;
  flex: 0 0 auto;
  /* border-box so the panel's own padding stays INSIDE width:100% — otherwise
     content-box adds it on top and the panel overflows the overlay on mobile
     (losing the side margin and forcing horizontal scroll). */
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  margin: auto;
  padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
  text-align: center;
  background: var(--wp--preset--color--quaternary, #ede8e1);
  border-radius: 30px;
  animation: cfc-confirm-pop 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
}

/* Close (×) */
.cfc-confirm-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  line-height: 1;
  font-size: 1.75rem;
  color: var(--wp--preset--color--primary, #284734);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.cfc-confirm-modal__close:hover,
.cfc-confirm-modal__close:focus {
  background: rgba(40, 71, 52, 0.1);
}

/* Success icon */
.cfc-confirm-modal__icon {
  width: 65px;
  height: 65px;
  margin: 0.25em auto 1em;
}

.cfc-confirm-modal__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cfc-confirm-modal__icon-circle {
  stroke: var(--wp--preset--color--secondary, #228848);
  stroke-width: 3;
  stroke-dasharray: 151; /* ~2 * pi * r (r=24) */
  stroke-dashoffset: 151;
}

.cfc-confirm-modal__icon-check {
  stroke: var(--wp--preset--color--secondary, #228848);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}

/* Animate the draw when .is-drawn is toggled on (set by JS on open) */
.cfc-confirm-modal__icon.is-drawn .cfc-confirm-modal__icon-circle {
  animation: cfc-confirm-draw 0.45s ease-out forwards;
}

.cfc-confirm-modal__icon.is-drawn .cfc-confirm-modal__icon-check {
  animation: cfc-confirm-draw 0.3s 0.35s ease-out forwards;
}

/* Optional header (event title + date) — used by the waitlist popup */
.cfc-confirm-modal__header {
  margin-bottom: 1em;
}

.cfc-confirm-modal__title {
  margin: 0 0 0.25em;
  color: var(--wp--preset--color--primary, #284734);
  font-family: var(--wp--preset--font-family--lovechild, "Lovechild", serif);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.1;
}

.cfc-confirm-modal__meta {
  margin: 0;
  color: var(--wp--preset--color--primary, #284734);
  font-family: var(--wp--preset--font-family--gill-sans), "Gill Sans", sans-serif;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Confirmation message text */
.cfc-confirm-modal__body {
  color: var(--wp--preset--color--primary, #284734);
  font-family: var(--wp--preset--font-family--gill-sans), "Gill Sans", sans-serif;
  font-size: var(--wp--preset--font-size--medium-large);
  line-height: 1.4;
  /* Long links/words in the GF confirmation message must wrap, not stretch the
     panel past the viewport. */
  overflow-wrap: break-word;
}

.cfc-confirm-modal__body img {
  max-width: 100%;
  height: auto;
}

.cfc-confirm-modal__body .gform_confirmation_message {
  margin: 0;
  color: inherit;
}

.cfc-confirm-modal__body a {
  color: var(--wp--preset--color--secondary, #228848);
}

/* Done button — matches the form's primary button */
.cfc-confirm-modal__done {
  margin-top: 1.5em;
  padding: 1em 3em 0.7em;
  background-color: var(--wp--preset--color--primary, #284734);
  color: var(--wp--preset--color--tertiary, #e2e868);
  border: none;
  border-radius: 0.5em;
  font-family: var(--wp--preset--font-family--gill-sans), "Gill Sans", sans-serif;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

.cfc-confirm-modal__done:hover {
  background-color: var(--wp--preset--color--secondary, #228848);
}

.cfc-confirm-modal__done:active {
  transform: translateY(1px);
}

@keyframes cfc-confirm-pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cfc-confirm-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .cfc-confirm-modal.is-active {
    padding: var(--wp--preset--spacing--50);
  }

  .cfc-confirm-modal__panel {
    margin-block: 0;
    padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
    border-radius: 20px;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .cfc-confirm-modal__panel {
    animation: none;
  }

  .cfc-confirm-modal__icon.is-drawn .cfc-confirm-modal__icon-circle,
  .cfc-confirm-modal__icon.is-drawn .cfc-confirm-modal__icon-check {
    animation: none;
    stroke-dashoffset: 0;
  }
}