/* MT Optin — popup + inline form. Every look value comes from --mto-* variables set per form. */

.mto-root, .mto-root * { box-sizing: border-box; }
.mto-root[hidden] { display: none !important; }

/* ── Popup shell ─────────────────────────────────────────────────────── */
.mto-popup {
  position: fixed; inset: 0; z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.mto-overlay {
  position: absolute; inset: 0;
  background: var(--mto-overlay_bg, rgba(15,23,42,0.25));
  -webkit-backdrop-filter: blur(var(--mto-overlay_blur, 6px));
  backdrop-filter: blur(var(--mto-overlay_blur, 6px));
  opacity: 0; transition: opacity .3s ease;
}
.mto-popup.mto-open .mto-overlay { opacity: 1; }

/* ── Card (shared by popup + inline) ─────────────────────────────────── */
.mto-card {
  position: relative;
  width: 100%;
  max-width: var(--mto-card_width, 520px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: var(--mto-card_padding, 32px);
  background: var(--mto-card_bg, rgba(255,255,255,0.6));
  -webkit-backdrop-filter: blur(var(--mto-card_blur, 18px)) saturate(160%);
  backdrop-filter: blur(var(--mto-card_blur, 18px)) saturate(160%);
  border: var(--mto-card_border_width, 1px) solid var(--mto-card_border_color, rgba(255,255,255,0.75));
  border-radius: var(--mto-card_radius, 20px);
  box-shadow: var(--mto-card_shadow, 0 20px 60px rgba(0,0,255,0.15));
  font-family: var(--mto-body_font, inherit);
  font-weight: var(--mto-body_weight, 400);
  color: var(--mto-desc_color, #374151);
  text-align: left;
}

/* Open animations (always run — no reduced-motion branch by design). */
.mto-popup .mto-card { transition: opacity .35s ease, transform .35s cubic-bezier(.2,.9,.3,1.2); opacity: 0; }
.mto-anim-zoom .mto-card  { transform: scale(.88); }
.mto-anim-slide .mto-card { transform: translateY(40px); }
.mto-anim-fade .mto-card  { transform: none; }
.mto-popup.mto-open .mto-card { opacity: 1; transform: none; }

.mto-close {
  position: absolute; top: 10px; right: 12px;
  width: 36px; height: 36px; padding: 0; margin: 0;
  border: 0; background: transparent; cursor: pointer;
  color: var(--mto-close_color, #374151);
  font-size: var(--mto-close_size, 22px); line-height: 1; font-family: inherit;
  border-radius: 50%;
  transition: background .2s ease, transform .2s ease;
}
.mto-close:hover { background: rgba(0,0,0,0.06); transform: rotate(90deg); }

/* ── Inline (shortcode) ──────────────────────────────────────────────── */
.mto-inline { display: flex; margin: 24px 0; }
.mto-inline .mto-card { max-width: var(--mto-inline_width, 520px); max-height: none; overflow: visible; }
.mto-align-left   { justify-content: flex-start; }
.mto-align-center { justify-content: center; }
.mto-align-right  { justify-content: flex-end; }
.mto-nocard .mto-card {
  background: transparent; border: 0; box-shadow: none; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ── Text ────────────────────────────────────────────────────────────── */
.mto-root .mto-headline {
  margin: 0 0 8px; padding: 0 28px;
  font-family: var(--mto-head_font, inherit);
  font-weight: var(--mto-head_weight, 700);
  font-size: var(--mto-head_size, 28px);
  line-height: 1.25;
  color: var(--mto-head_color, #0000FF);
  text-align: var(--mto-head_align, center);
  text-transform: none; letter-spacing: normal;
}
.mto-inline .mto-headline { padding: 0; }
.mto-root .mto-desc {
  margin: 0 0 20px;
  font-size: var(--mto-desc_size, 16px);
  line-height: 1.55;
  color: var(--mto-desc_color, #374151);
  text-align: var(--mto-desc_align, center);
}
.mto-root .mto-note {
  margin: 12px 0 0;
  font-size: var(--mto-note_size, 13px);
  font-style: var(--mto-note_style, normal);
  color: var(--mto-note_color, #6b7280);
  text-align: center;
}

/* ── Fields ──────────────────────────────────────────────────────────── */
.mto-fields { display: grid; gap: 10px; }
.mto-field { margin: 0; }
.mto-label {
  display: block; margin: 0 0 4px;
  font-size: 14px; font-weight: 600;
  color: var(--mto-label_color, #374151);
}
.mto-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.mto-root .mto-field input {
  display: block; width: 100%; max-width: 100%; margin: 0;
  padding: var(--mto-in_padding, 12px);
  font-family: var(--mto-body_font, inherit);
  font-weight: var(--mto-body_weight, 400);
  font-size: var(--mto-in_size, 16px);
  line-height: 1.3;
  color: var(--mto-in_text, #111827);
  background: var(--mto-in_bg, rgba(255,255,255,0.7));
  border: 1px solid var(--mto-in_border, rgba(0,0,255,0.18));
  border-radius: var(--mto-in_radius, 12px);
  box-shadow: none; outline: none; height: auto;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mto-root .mto-field input::placeholder { color: var(--mto-in_placeholder, #6b7280); opacity: 1; }
.mto-root .mto-field input:focus {
  border-color: var(--mto-in_focus, #0000FF);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mto-in_focus, #0000FF) 18%, transparent);
}
.mto-root .mto-field input[aria-invalid="true"] { border-color: var(--mto-error_color, #d1003f); }

/* Honeypot: off-screen, never display:none (some bots skip hidden fields). */
.mto-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ── Button ──────────────────────────────────────────────────────────── */
.mto-root .mto-btn {
  display: block;
  width: var(--mto-btn_width, 100%);
  margin: 14px auto 0;
  padding: 14px 28px;
  font-family: var(--mto-body_font, inherit);
  font-size: var(--mto-btn_size, 16px);
  font-weight: var(--mto-btn_weight, 700);
  text-transform: var(--mto-btn_transform, none);
  letter-spacing: normal; line-height: 1.2;
  color: var(--mto-btn_text, #fff);
  background: var(--mto-btn_bg, #0000FF);
  border: 0;
  border-radius: var(--mto-btn_radius, 12px);
  box-shadow: 0 8px 24px var(--mto-btn_glow_color, rgba(0,0,255,0.35));
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.mto-root .mto-btn:hover, .mto-root .mto-btn:focus-visible {
  background: var(--mto-btn_hover_bg, #3333FF);
  color: var(--mto-btn_hover_text, #fff);
  transform: translateY(-1px);
}
.mto-root .mto-btn:disabled { opacity: .7; cursor: wait; transform: none; }
.mto-btn.mto-busy::after {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: mto-spin .7s linear infinite;
}
@keyframes mto-spin { to { transform: rotate(360deg); } }

/* ── Messages ────────────────────────────────────────────────────────── */
.mto-msg:empty { display: none; }
.mto-msg { margin: 12px 0 0; font-size: 14px; text-align: center; }
.mto-msg.mto-error { color: var(--mto-error_color, #d1003f); }
.mto-done {
  padding: 24px 8px; text-align: center;
  font-size: var(--mto-desc_size, 16px);
  font-weight: 600;
  color: var(--mto-success_color, #0a7d32);
}
.mto-done::before {
  content: "✓"; display: block; margin: 0 auto 10px;
  width: 48px; height: 48px; line-height: 48px; border-radius: 50%;
  background: color-mix(in srgb, var(--mto-success_color, #0a7d32) 14%, transparent);
  font-size: 24px;
}

@media (max-width: 480px) {
  .mto-root .mto-headline { font-size: calc(var(--mto-head_size, 28px) * .85); }
  .mto-card { padding: calc(var(--mto-card_padding, 32px) * .75); }
}

/* Inline forms: a non-full-width button and the thank-you follow the chosen alignment. */
.mto-align-left .mto-btn  { margin-left: 0; }
.mto-align-right .mto-btn { margin-right: 0; }
.mto-align-left .mto-done  { text-align: left; padding-left: 0; }
.mto-align-right .mto-done { text-align: right; padding-right: 0; }
.mto-align-left .mto-done::before  { margin-left: 0; }
.mto-align-right .mto-done::before { margin-right: 0; }
.mto-align-left .mto-msg  { text-align: left; }
.mto-align-right .mto-msg { text-align: right; }