/* ==========================================================================
   membraPure – Kontaktseite · CSS-Variante für ELEMENTOR
   --------------------------------------------------------------------------
   Unterschied zur style.css: Elementor hängt CSS-Klassen an den Widget-
   WRAPPER (.elementor-element), nicht an das Element selbst. Deshalb sind hier
   alle Regeln auf Elementors DOM gemünzt.

   Einfügen unter:
   Elementor → Website-Einstellungen → Benutzerdefiniertes CSS   (Pro)
   oder Design → Customizer → Zusätzliches CSS                    (Free)

   Hintergrundbilder werden hier NICHT gesetzt – die kommen aus dem
   Elementor-Template (Container → Stil → Hintergrund).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  --mp-blue-800: #075274;
  --mp-blue-700: #0a6fa5;
  --mp-blue-600: #0083c1;
  --mp-blue-400: #58a9d8;
  --mp-blue-200: #a9dcef;
  --mp-blue-100: #c4e5ef;
  --mp-blue-050: #eaf6fb;

  --mp-lilac-600: #8f6ba1;
  --mp-lilac-500: #a68bb1;
  --mp-lilac-400: #b9a2c4;

  --mp-ink-900: #12222c;
  --mp-ink-700: #3d4d57;
  --mp-ink-500: #6b7a85;
  --mp-line:    #e3e9ee;
  --mp-surface: #ffffff;
  --mp-field:   #f4f6f8;

  --mp-font: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --mp-fs-h1:    clamp(2.75rem, 1.6rem + 5.2vw, 4.75rem);
  --mp-fs-lead:  clamp(1.125rem, 0.85rem + 1.2vw, 1.625rem);
  --mp-fs-h2:    clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --mp-fs-body:  1.0625rem;
  --mp-fs-small: 0.875rem;

  --mp-container: 1200px;
  --mp-gutter: 24px;
  --mp-gap: clamp(28px, 3.5vw, 56px);

  --mp-r-sm: 10px;
  --mp-r-md: 14px;
  --mp-r-lg: 24px;
  --mp-r-pill: 999px;

  --mp-shadow-card: 0 24px 60px -28px rgba(9, 56, 84, 0.42);
  --mp-shadow-soft: 0 12px 32px -18px rgba(9, 56, 84, 0.35);
  --mp-shadow-btn:  0 12px 26px -12px rgba(0, 131, 193, 0.75);

  --mp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --mp-dur: 0.35s;
}

/* --------------------------------------------------------------------------
   2. Grundlagen · Hilfsklassen
   -------------------------------------------------------------------------- */

/* Inhaltsbreite – auf Full-Width-Containern eingesetzt */
.mp-container {
  --width: 100%;
  max-width: var(--mp-container);
  margin-inline: auto;
  padding-inline: var(--mp-gutter);
}

/* Alle Texte der Seite auf die Marken-Typo ziehen */
.mp-hero, .mp-formsection, .mp-logos, .mp-contact, .mp-band {
  font-family: var(--mp-font);
}

/* Elementor-Widgets bringen eigene Margins mit – hier neutralisieren.
   Die Abstände steuern ausschließlich die Container-Gaps. */
.mp-hero .elementor-widget,
.mp-formsection .elementor-widget,
.mp-logos .elementor-widget,
.mp-contact .elementor-widget,
.mp-band .elementor-widget,
.mp-team .elementor-widget { margin-block-end: 0; }

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */
.mp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
}

.mp-hero__inner { max-width: 900px; }

/* Eyebrow-Pille – Klasse liegt auf dem Heading-Wrapper */
.mp-hero__eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  margin-inline: auto;
  margin-block-end: 20px;
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--mp-r-pill);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mp-hero__eyebrow .elementor-heading-title {
  color: #fff;
  font-size: var(--mp-fs-small);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.mp-hero__title .elementor-heading-title {
  color: #fff;
  font-size: var(--mp-fs-h1);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 24px rgba(6, 50, 78, 0.35);
}

.mp-hero__sub { margin-block-start: 14px; }
.mp-hero__sub .elementor-heading-title {
  display: block;
  max-width: 44ch;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.96);
  font-size: var(--mp-fs-lead);
  font-weight: 700;
  line-height: 1.35;
  text-shadow: 0 2px 18px rgba(6, 50, 78, 0.35);
}

/* --------------------------------------------------------------------------
   4. Sektionskopf
   -------------------------------------------------------------------------- */
.mp-section-head { text-align: center; }

.mp-section-head__row {
  --display: flex;
  align-items: center;
  justify-content: center;
}
.mp-section-head__row .elementor-widget { width: auto; margin-block-end: 0; }

.mp-section-head__title .elementor-heading-title {
  color: var(--mp-ink-900);
  font-size: var(--mp-fs-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.mp-section-head__text .elementor-widget-container,
.mp-section-head__text p {
  max-width: 58ch;
  margin-inline: auto;
  color: var(--mp-ink-500);
  font-size: var(--mp-fs-body);
  line-height: 1.65;
}
.mp-section-head__text p:last-child { margin-block-end: 0; }

/* --------------------------------------------------------------------------
   5. Formular-Raster
   -------------------------------------------------------------------------- */
.mp-formgrid {
  --display: grid;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--mp-gap);
  align-items: start;
}
.mp-formgrid > .e-con { --width: 100%; }

/* --- Bildkarte --- */
.mp-figure {
  position: relative;
  border-radius: var(--mp-r-lg);
  overflow: hidden;
  box-shadow: var(--mp-shadow-card);
  background: #fff;
}
.mp-figure .elementor-widget-image,
.mp-figure .elementor-widget-image .elementor-widget-container { margin: 0; line-height: 0; }
.mp-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.8s var(--mp-ease);
}
.mp-figure:hover img { transform: scale(1.045); }

/* Badge – Icon-Box-Widget, absolut positioniert */
.mp-figure__badge {
  z-index: 2;
  padding: 10px 16px;
  border-radius: var(--mp-r-pill);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--mp-shadow-soft);
}
.mp-figure__badge .elementor-icon-box-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
}
.mp-figure__badge .elementor-icon-box-icon { margin: 0 !important; }
.mp-figure__badge .elementor-icon { color: var(--mp-blue-600); font-size: 16px; }
.mp-figure__badge .elementor-icon-box-title,
.mp-figure__badge .elementor-icon-box-title > * {
  margin: 0;
  color: var(--mp-ink-900);
  font-size: var(--mp-fs-small);
  font-weight: 700;
  line-height: 1.2;
}

/* --- Formularkarte --- */
.mp-card {
  background: var(--mp-surface);
  border: 1px solid rgba(227, 233, 238, 0.9);
  border-radius: var(--mp-r-lg);
  box-shadow: var(--mp-shadow-card);
  padding: clamp(24px, 3vw, 40px);
}

/* --------------------------------------------------------------------------
   6. Elementor-Pro-Formular
   -------------------------------------------------------------------------- */
.mp-form .elementor-form-fields-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -9px;
}
.mp-form .elementor-field-group {
  position: relative;
  padding: 0 9px;
  margin-block-end: 18px;
}
.mp-form .elementor-field-group:last-of-type { margin-block-end: 0; }

.mp-form .elementor-field-group .elementor-field,
.mp-form .elementor-field-group .elementor-field-textual {
  width: 100%;
  padding: 26px 18px 12px;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-md);
  background: var(--mp-field);
  color: var(--mp-ink-900);
  font-family: var(--mp-font);
  font-size: 1rem;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color var(--mp-dur) var(--mp-ease),
              box-shadow var(--mp-dur) var(--mp-ease),
              background-color var(--mp-dur) var(--mp-ease);
}
.mp-form textarea.elementor-field-textual { min-height: 170px; resize: vertical; }

.mp-form .elementor-field-textual:focus {
  outline: none;
  background: #fff;
  border-color: var(--mp-blue-400);
  box-shadow: 0 0 0 4px rgba(0, 131, 193, 0.16);
}

/* Floating Labels – Elementor rendert das Label VOR dem Feld,
   daher :has(). Ohne :has()-Support bleiben normale Labels stehen. */
@supports selector(:has(*)) {
  .mp-form .elementor-field-textual::placeholder { color: transparent; }

  .mp-form .elementor-field-label {
    position: absolute;
    left: 27px;
    top: 19px;
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
    overflow: visible;
    margin: 0;
    color: var(--mp-ink-500);
    font-family: var(--mp-font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    transform-origin: left top;
    transition: transform 0.22s var(--mp-ease), color 0.22s var(--mp-ease);
  }

  .mp-form .elementor-field-group:has(.elementor-field-textual:focus) > .elementor-field-label,
  .mp-form .elementor-field-group:has(.elementor-field-textual:not(:placeholder-shown)) > .elementor-field-label {
    transform: translateY(-11px) scale(0.78);
    color: var(--mp-blue-700);
  }

  /* Zustimmungs- und HTML-Feld haben keine schwebenden Labels */
  .mp-form .elementor-field-type-acceptance .elementor-field-label,
  .mp-form .elementor-field-type-html .elementor-field-label { display: none; }
}

/* Zustimmung (DSGVO) */
.mp-form .elementor-field-type-acceptance .elementor-field-subgroup { width: 100%; }
.mp-form .elementor-field-type-acceptance .elementor-field-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}
.mp-form .elementor-field-type-acceptance input[type="checkbox"] {
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--mp-blue-600);
  cursor: pointer;
}
.mp-form .elementor-field-type-acceptance .elementor-field-option label {
  color: var(--mp-ink-500);
  font-size: var(--mp-fs-small);
  line-height: 1.55;
}
.mp-form .elementor-field-type-acceptance a { color: var(--mp-blue-700); }

/* Button links, Hinweistext rechts (Elementor rendert den Button zuletzt) */
.mp-form .elementor-field-type-submit { order: 1; align-self: center; }
.mp-form .elementor-field-type-html   { order: 2; align-self: center; }

.mp-form .elementor-button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  padding: 15px 30px;
  border: 0;
  border-radius: var(--mp-r-pill);
  background: var(--mp-blue-600);
  color: #fff;
  font-family: var(--mp-font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--mp-shadow-btn);
  transition: transform var(--mp-dur) var(--mp-ease),
              background-color var(--mp-dur) var(--mp-ease),
              box-shadow var(--mp-dur) var(--mp-ease);
}
.mp-form .elementor-button[type="submit"]:hover {
  background: var(--mp-blue-700);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(0, 131, 193, 0.85);
}
.mp-form .elementor-button[type="submit"] > span {
  display: flex;
  flex-direction: row-reverse; /* Icon rechts, Text links */
  align-items: center;
  gap: 10px;
}
.mp-form .elementor-button[type="submit"] .elementor-button-icon {
  margin: 0;
  transition: transform var(--mp-dur) var(--mp-ease);
}
.mp-form .elementor-button[type="submit"]:hover .elementor-button-icon { transform: translateX(4px); }

.mp-form__note,
.mp-form .elementor-field-type-html .mp-form__note {
  display: flex;
  gap: 10px;
  margin: 0;
  color: var(--mp-ink-500);
  font-size: var(--mp-fs-small);
  line-height: 1.5;
}
.mp-form__note svg { flex: none; margin-top: 2px; color: var(--mp-blue-400); }

/* --------------------------------------------------------------------------
   7. Siegel-Logos
   -------------------------------------------------------------------------- */
.mp-logos__label .elementor-heading-title {
  color: var(--mp-ink-500);
  font-size: var(--mp-fs-small);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mp-logos__grid {
  --display: grid;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
}
.mp-logos__grid .elementor-widget { margin-block-end: 0; }
.mp-logos__grid img {
  width: auto;
  max-height: 72px;
  margin-inline: auto;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter var(--mp-dur) var(--mp-ease), opacity var(--mp-dur) var(--mp-ease);
}
.mp-logos__grid img:hover { filter: grayscale(0); opacity: 1; }

/* --------------------------------------------------------------------------
   8. Kontaktdaten
   -------------------------------------------------------------------------- */
.mp-contact__grid {
  --display: grid;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--mp-gap);
  align-items: center;
}
.mp-contact__grid > .e-con { --width: 100%; }

.mp-contact__title .elementor-heading-title {
  color: var(--mp-ink-900);
  font-size: var(--mp-fs-h2);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.mp-contact__intro { margin-block-end: 14px !important; }
.mp-contact__intro p {
  max-width: 42ch;
  margin: 0;
  color: var(--mp-ink-700);
  font-size: var(--mp-fs-body);
  line-height: 1.65;
}

/* Info-Kachel = Icon-Box-Widget */
.mp-info {
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--mp-r-md);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform var(--mp-dur) var(--mp-ease),
              background-color var(--mp-dur) var(--mp-ease),
              box-shadow var(--mp-dur) var(--mp-ease);
}
.mp-info:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--mp-shadow-soft);
}
.mp-info .elementor-icon-box-wrapper {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: center;
  text-align: left;
}
.mp-info .elementor-icon-box-icon { margin: 0 !important; }
.mp-info .elementor-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--mp-blue-600);
  color: #fff;
  font-size: 20px;
}
.mp-info .elementor-icon svg { width: 20px; height: 20px; }
/* Font-Awesome-SVGs sind Flächen-Icons, Outline-Icons behalten ihre Kontur */
.mp-info .elementor-icon svg:not([stroke]) { fill: currentColor; }
.mp-info .elementor-icon-box-title,
.mp-info .elementor-icon-box-title > * {
  margin: 0;
  color: var(--mp-ink-500);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.mp-info .elementor-icon-box-description {
  margin: 2px 0 0;
  color: var(--mp-ink-900);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
}
.mp-info .elementor-icon-box-description a { color: inherit; text-decoration: none; }
.mp-info .elementor-icon-box-description a:hover { color: var(--mp-blue-700); }

/* Karte */
.mp-map {
  border-radius: var(--mp-r-lg);
  overflow: hidden;
  box-shadow: var(--mp-shadow-card);
  background: #eef2f4;
}
.mp-map .elementor-widget,
.mp-map iframe { margin: 0; display: block; width: 100%; border: 0; }
.mp-map iframe { height: clamp(320px, 34vw, 460px); filter: saturate(0.85); }

/* --------------------------------------------------------------------------
   9. Buttons (Button-Widget)
   -------------------------------------------------------------------------- */
.mp-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: 0;
  border-radius: var(--mp-r-pill);
  background: var(--mp-blue-600);
  color: #fff;
  font-family: var(--mp-font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--mp-shadow-btn);
  transition: transform var(--mp-dur) var(--mp-ease),
              background-color var(--mp-dur) var(--mp-ease),
              color var(--mp-dur) var(--mp-ease),
              box-shadow var(--mp-dur) var(--mp-ease);
}
.mp-btn .elementor-button:hover {
  background: var(--mp-blue-700);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(0, 131, 193, 0.85);
}
.mp-btn .elementor-button-content-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mp-btn .elementor-button-icon {
  margin: 0;
  transition: transform var(--mp-dur) var(--mp-ease);
}
.mp-btn .elementor-button:hover .elementor-button-icon { transform: translateX(4px); }

.mp-btn--ghost .elementor-button {
  border: 1.5px solid var(--mp-blue-600);
  background: transparent;
  color: var(--mp-blue-700);
  box-shadow: none;
}
.mp-btn--ghost .elementor-button:hover {
  background: var(--mp-blue-600);
  color: #fff;
  box-shadow: var(--mp-shadow-btn);
}

/* --------------------------------------------------------------------------
   10. Zitat-Band
   -------------------------------------------------------------------------- */
.mp-band { text-align: center; }
.mp-band__title .elementor-heading-title {
  color: #fff;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.375rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.mp-band__text p {
  max-width: 52ch;
  margin: 10px auto 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   11. Teamfoto
   -------------------------------------------------------------------------- */
.mp-team { line-height: 0; }
.mp-team .elementor-widget-image,
.mp-team .elementor-widget-container { margin: 0; }
.mp-team img {
  width: 100%;
  max-height: 660px;
  object-fit: cover;
  object-position: center top;
}

/* --------------------------------------------------------------------------
   12. Fokus & Reduced Motion
   -------------------------------------------------------------------------- */
.mp-formsection :focus-visible,
.mp-contact :focus-visible,
.mp-hero :focus-visible {
  outline: 3px solid var(--mp-blue-600);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .mp-figure img, .mp-info, .mp-btn .elementor-button,
  .mp-form .elementor-button[type="submit"] { transition: none !important; }
}

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .mp-formgrid,
  .mp-contact__grid { grid-template-columns: 1fr; }
  .mp-figure img { aspect-ratio: 16 / 9; }
  .mp-logos__grid { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
}

@media (max-width: 767px) {
  :root { --mp-gutter: 18px; }
  .mp-section-head__row { flex-direction: column; gap: 10px; }
  .mp-form .elementor-field-type-submit,
  .mp-form .elementor-field-type-html { width: 100%; }
  .mp-form .elementor-button[type="submit"] { width: 100%; justify-content: center; }
  .mp-btn .elementor-button { width: 100%; justify-content: center; }
  .mp-team img { max-height: 380px; }
}

@media (max-width: 480px) {
  .mp-logos__grid { grid-template-columns: repeat(2, 1fr); }
  .mp-info { padding: 14px 16px; }
  .mp-info .elementor-icon-box-wrapper { grid-template-columns: 40px 1fr; gap: 12px; }
  .mp-info .elementor-icon { width: 40px; height: 40px; }
}

/* ==========================================================================
   14. Formular als HTML-Widget (Variante ohne Elementor Pro)
   Wird nur wirksam, wenn das Formular als HTML-Widget eingesetzt ist.
   Stört die Pro-Variante nicht – andere Selektoren.
   ========================================================================== */
.mp-form-wrap .mp-form { display: grid; gap: 18px; }
.mp-form-wrap .mp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.mp-form-wrap .mp-field { position: relative; }

.mp-form-wrap .mp-field__input,
.mp-form-wrap .mp-field__textarea {
  width: 100%;
  padding: 26px 18px 12px;
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-r-md);
  background: var(--mp-field);
  color: var(--mp-ink-900);
  font-family: var(--mp-font);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--mp-dur) var(--mp-ease),
              box-shadow var(--mp-dur) var(--mp-ease),
              background-color var(--mp-dur) var(--mp-ease);
}
.mp-form-wrap .mp-field__textarea { min-height: 170px; resize: vertical; }
.mp-form-wrap .mp-field__input::placeholder,
.mp-form-wrap .mp-field__textarea::placeholder { color: transparent; }

.mp-form-wrap .mp-field__label {
  position: absolute;
  left: 19px;
  top: 19px;
  color: var(--mp-ink-500);
  font-size: 1rem;
  line-height: 1.4;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.22s var(--mp-ease), color 0.22s var(--mp-ease);
}
.mp-form-wrap .mp-field__input:not(:placeholder-shown) + .mp-field__label,
.mp-form-wrap .mp-field__input:focus + .mp-field__label,
.mp-form-wrap .mp-field__textarea:not(:placeholder-shown) + .mp-field__label,
.mp-form-wrap .mp-field__textarea:focus + .mp-field__label {
  transform: translateY(-11px) scale(0.78);
  color: var(--mp-blue-700);
}
.mp-form-wrap .mp-field__input:focus,
.mp-form-wrap .mp-field__textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--mp-blue-400);
  box-shadow: 0 0 0 4px rgba(0, 131, 193, 0.16);
}

.mp-form-wrap .mp-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  color: var(--mp-ink-500);
  font-size: var(--mp-fs-small);
  line-height: 1.55;
}
.mp-form-wrap .mp-consent input[type="checkbox"] {
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--mp-blue-600);
  cursor: pointer;
}

.mp-form-wrap .mp-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
  margin-top: 6px;
}

.mp-form-wrap .mp-btn-native {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: 0;
  border-radius: var(--mp-r-pill);
  background: var(--mp-blue-600);
  color: #fff;
  font-family: var(--mp-font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--mp-shadow-btn);
  transition: transform var(--mp-dur) var(--mp-ease),
              background-color var(--mp-dur) var(--mp-ease),
              box-shadow var(--mp-dur) var(--mp-ease);
}
.mp-form-wrap .mp-btn-native:hover {
  background: var(--mp-blue-700);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(0, 131, 193, 0.85);
}
.mp-form-wrap .mp-btn-native svg { transition: transform var(--mp-dur) var(--mp-ease); }
.mp-form-wrap .mp-btn-native:hover svg { transform: translateX(4px); }

.mp-form-wrap .mp-form__note { flex: 1 1 240px; min-width: 200px; }

@media (max-width: 767px) {
  .mp-form-wrap .mp-form__row { grid-template-columns: 1fr; }
  .mp-form-wrap .mp-form__actions { flex-direction: column; align-items: stretch; }
  .mp-form-wrap .mp-btn-native { width: 100%; justify-content: center; }
}