/* mw-mautic-forms — scoped styles (.mwmf-* only, never bleed into site). */

/* ---------- shared card / form ---------- */
.mwmf-card,
.mwmf-modal,
.mwmf-slidein {
  box-sizing: border-box;
  background: #eff4f7;
  color: #363940;
  border-radius: 10px;
  font-family: inherit;
  line-height: 1.45;
}
.mwmf-card *,
.mwmf-modal *,
.mwmf-slidein * { box-sizing: border-box; }

.mwmf-inline {
  border: 1px solid #d5e2ea;
  padding: 1.5rem 1.25rem;
  /* Generous clearance so the card never crowds a Mediavine in-content ad
     placed immediately above/below it (the pre-recipe zone is ad-dense).
     overflow:auto establishes a BFC so this margin can't collapse into an
     adjacent ad container. Revenue-safe: moves/removes no ad slot. */
  margin: 3.25rem 0;
  display: flow-root;
}

.mwmf-heading {
  margin: 0 0 .35rem;
  color: #024a73;
  font-size: 1.35rem;
  line-height: 1.25;
}
.mwmf-sub {
  margin: 0 0 1rem;
  color: #363940;
  font-size: 1rem;
}
/* small text: #818592 fails WCAG AA at these sizes -> #5d6469
   (6.01:1 on #fff, 5.43:1 on #eff4f7); large uses keep the brand grey */
.mwmf-optional { color: #5d6469; font-weight: normal; font-size: .85em; }

.mwmf-field { margin: 0 0 .75rem; }
.mwmf-label {
  display: block;
  margin: 0 0 .25rem;
  font-size: .9rem;
  font-weight: 600;
  color: #363940;
}
.mwmf-input {
  display: block;
  width: 100%;
  padding: .7rem .8rem;
  font-size: 1rem;
  color: #363940;
  background: #fff;
  border: 1px solid #b9c9d4;
  border-radius: 6px;
}
.mwmf-input:focus-visible {
  outline: 2px solid #024a73;
  outline-offset: 1px;
  border-color: #024a73;
}

.mwmf-btn {
  display: block;
  width: 100%;
  padding: .8rem 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: #024a73;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.mwmf-btn:hover { background: #036096; }
.mwmf-btn:focus-visible { outline: 2px solid #363940; outline-offset: 2px; }
.mwmf-btn[disabled] { opacity: .6; cursor: wait; }

.mwmf-privacy {
  margin: .75rem 0 0;
  font-size: .78rem;
  color: #5d6469; /* AA-passing small-text grey (see .mwmf-optional note) */
}
.mwmf-privacy a { color: #024a73; }

/* post-submit success region (sibling of the form; JS unhides it) */
.mwmf-success {
  margin: .5rem 0 0;
  color: #1e6b3a;
  font-weight: 600;
  font-size: 1.05rem;
}

/* client-side validation errors (aria-live) */
.mwmf-msg { margin: .5rem 0 0; font-size: .95rem; }
.mwmf-msg.mwmf-error { color: #a4262c; }
.mwmf-form.mwmf-done .mwmf-field,
.mwmf-form.mwmf-done .mwmf-btn { display: none; }
.mwmf-form.mwmf-done .mwmf-msg {
  color: #1e6b3a;
  font-weight: 600;
  font-size: 1.05rem;
}

.mwmf-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* honeypot (inline style is the primary guard; this is belt+suspenders) */
.mwmf-hp { position: absolute; left: -9999px; top: -9999px; }

/* ---------- dialog / modal ---------- */
dialog.mwmf-dialog {
  padding: 0;
  border: 0;
  border-radius: 12px;
  max-width: min(92vw, 460px);
  width: 100%;
  background: transparent;
}
dialog.mwmf-dialog::backdrop { background: rgba(20, 30, 38, .55); }

.mwmf-modal {
  position: relative;
  padding: 2rem 1.5rem 1.5rem;
  background: #fff;
  border-radius: 12px;
}
.mwmf-modal .mwmf-heading { font-size: 1.5rem; }

/* optional full-bleed hero banner (config image_url; explicit img dims
   prevent reflow, display height owned here) */
.mwmf-modal .mwmf-img {
  display: block;
  width: calc(100% + 3rem);
  max-width: none;
  height: 200px;
  margin: -2rem -1.5rem 1.25rem;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}
@media (max-width: 767px) {
  .mwmf-modal .mwmf-img { height: 150px; }
}
/* close button stays readable over a photo */
.mwmf-modal:has(.mwmf-img) .mwmf-close {
  color: #363940;
  background: rgba(255, 255, 255, .85);
}

.mwmf-close {
  position: absolute;
  top: .4rem;
  right: .4rem;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
  color: #818592;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.mwmf-close:hover { color: #363940; background: #eff4f7; }
.mwmf-close:focus-visible { outline: 2px solid #024a73; }

/* ---------- slide-in (desktop only; bottom-LEFT, never the adhesion zone) ---------- */
.mwmf-slidein {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 99999;
  width: 340px;
  max-width: calc(100vw - 2rem);
  padding: 1.5rem 1.25rem 1.25rem;
  background: #fff;
  border: 1px solid #d5e2ea;
  box-shadow: 0 6px 24px rgba(2, 74, 115, .18);
  transform: translateY(12px);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.mwmf-slidein.mwmf-open { transform: translateY(0); opacity: 1; }
@media (max-width: 767px) {
  .mwmf-slidein { display: none; } /* mobile: adhesion ads own the bottom */
}

@media (prefers-reduced-motion: reduce) {
  .mwmf-slidein { transition: none; }
}