/* Malduk Email Popup v1.1.0 — "mystery discount" design.
   Scoped to .mep-scope so nothing leaks into Divi; text colours carry !important
   because Divi forces inherited text colours. */

.mep-scope {
  --mep-river: #1f9e94;
  --mep-river-deep: #0e5f5a;
  --mep-stone: #e9e4d6;
  --mep-sun: #f4b544;
  --mep-ink: #0f1a17;
  --mep-glass: rgba(20, 34, 30, .86);
  --mep-line: rgba(255, 255, 255, .22);
  --mep-text: #ffffff;
  --mep-muted: rgba(255, 255, 255, .66);
  --mep-on: #3ccf72;
  --mep-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --mep-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-family: var(--mep-body) !important;
  color: var(--mep-text) !important;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.mep-scope *, .mep-scope *::before, .mep-scope *::after { box-sizing: border-box; }
.mep-scope [hidden] { display: none !important; }
.mep-scope p { margin: 0; padding: 0; }
.mep-scope button { font-family: var(--mep-body); text-transform: none; letter-spacing: normal; }
.mep-scope button::after, .mep-scope a.mep-cta::after { content: none !important; } /* Divi button arrows */
.mep-scope button:focus-visible, .mep-scope input:focus-visible, .mep-scope a:focus-visible { outline: 2px solid var(--mep-sun) !important; outline-offset: 2px; }

/* ---------- overlay ---------- */
#mep-root { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 16px; }
#mep-root[hidden] { display: none !important; }
#mep-root .mep-backdrop {
  position: absolute; inset: 0; background: rgba(8, 20, 18, .45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .3s ease;
}
#mep-root.mep-open .mep-backdrop { opacity: 1; }
html.mep-lock, html.mep-lock body { overflow: hidden !important; }

/* ---------- glass card ---------- */
#mep-root .mep-popup, .mep-inline {
  position: relative; width: min(100%, 440px);
  background: var(--mep-glass) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--mep-line); border-radius: 28px;
  padding: 28px 26px 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
#mep-root .mep-popup {
  max-height: calc(100vh - 32px); overflow-y: auto; outline: none;
  opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
#mep-root.mep-open .mep-popup { opacity: 1; transform: none; }
.mep-inline { margin: 24px auto !important; }

.mep-scope .mep-close {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12) !important; color: var(--mep-text) !important; cursor: pointer;
  display: grid; place-items: center; z-index: 2;
}
.mep-scope .mep-close:hover { background: rgba(255, 255, 255, .2) !important; }

/* ---------- type ---------- */
.mep-scope .mep-eyebrow {
  font-size: 11px !important; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  color: var(--mep-muted) !important; margin: 0 0 14px !important; padding-right: 40px !important;
}
.mep-scope .mep-h2 {
  font-family: var(--mep-display) !important; font-weight: 800 !important; font-size: 34px !important; line-height: 1 !important;
  text-transform: uppercase; color: var(--mep-text) !important; margin: 0 0 6px !important; text-wrap: balance;
}
.mep-scope .mep-sub { margin: 0 0 16px !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--mep-muted) !important; }

/* ---------- step 1: the choice ---------- */
.mep-scope .mep-choice { display: grid; gap: 14px; }
.mep-scope .mep-choice button {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  background: none !important; border: 0 !important; padding: 0 !important; margin: 0; cursor: pointer;
  color: var(--mep-text) !important; text-align: left;
}
.mep-scope .mep-word {
  font-family: var(--mep-display) !important; font-weight: 800 !important; font-size: clamp(38px, 11vw, 54px) !important;
  line-height: .92 !important; text-transform: uppercase; letter-spacing: .01em; color: var(--mep-text) !important;
}
.mep-scope .mep-stay .mep-word { color: rgba(255, 255, 255, .5) !important; }
.mep-scope .mep-box {
  flex: none; width: 72px; height: 72px; border: 2.5px solid #fff; border-radius: 16px;
  display: grid; place-items: center; transition: background .25s, border-color .25s;
}
.mep-scope .mep-box svg {
  width: 40px; height: 40px; stroke: var(--mep-ink); stroke-width: 4; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .35s ease .05s;
}
.mep-scope .mep-go.mep-checked .mep-box { background: var(--mep-sun); border-color: var(--mep-sun); }
.mep-scope .mep-go.mep-checked .mep-box svg { stroke-dashoffset: 0; }
.mep-scope .mep-stay:hover .mep-box { border-color: rgba(255, 255, 255, .4); }
.mep-scope .mep-go:hover .mep-box { background: rgba(244, 181, 68, .18); }
.mep-scope .mep-stay-msg { margin: 10px 0 0 !important; font-size: 13px !important; color: var(--mep-sun) !important; min-height: 1.2em; }
.mep-scope .mep-hint { margin: 8px 0 0 !important; font-size: 14px !important; line-height: 1.5 !important; color: var(--mep-muted) !important; }

/* ---------- step 2: toggles + form ---------- */
.mep-scope .mep-toggles { list-style: none !important; margin: 0 0 18px !important; padding: 0 !important; border-top: 1px solid var(--mep-line); }
.mep-scope .mep-toggles li {
  display: flex; align-items: center; justify-content: space-between; margin: 0 !important; padding: 11px 0 !important;
  border-bottom: 1px solid var(--mep-line); font-size: 17px !important; font-weight: 500; list-style: none !important;
  color: var(--mep-text) !important;
}
.mep-scope .mep-toggles li::before { content: none !important; }
.mep-scope .mep-toggles li span { color: var(--mep-text) !important; transition: color .2s; }
.mep-scope .mep-toggles li.mep-off span { color: rgba(255, 255, 255, .4) !important; }
.mep-scope .mep-sw {
  position: relative; flex: none; width: 52px; height: 30px; padding: 0 !important; margin: 0; border: 0 !important; border-radius: 30px;
  background: rgba(255, 255, 255, .18) !important; cursor: pointer; transition: background .2s;
}
.mep-scope .mep-sw::after {
  content: "" !important; display: block !important; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; transition: transform .2s; opacity: 1 !important; margin: 0 !important;
}
.mep-scope .mep-sw[aria-checked="true"] { background: var(--mep-on) !important; }
.mep-scope .mep-sw[aria-checked="true"]::after { transform: translateX(22px); }

.mep-scope .mep-form { display: grid; gap: 10px; margin: 0 !important; }
.mep-scope .mep-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mep-scope .mep-input {
  width: 100% !important; height: auto !important; margin: 0 !important; padding: 14px 16px !important;
  border-radius: 14px !important; border: 1px solid var(--mep-line) !important; box-shadow: none !important;
  background: rgba(255, 255, 255, .95) !important; color: var(--mep-ink) !important;
  font: 500 16px var(--mep-body) !important; /* 16px stops iOS zooming */
  -webkit-appearance: none; appearance: none;
}
.mep-scope .mep-input::placeholder { color: #6b7772 !important; opacity: 1; }
.mep-scope .mep-consent { display: flex; gap: 10px; align-items: flex-start; margin: 0 !important; cursor: pointer; }
.mep-scope .mep-consent input { flex: none; width: 16px; height: 16px; margin: 2px 0 0 !important; accent-color: var(--mep-sun); }
.mep-scope .mep-consent span { font-size: 12px !important; line-height: 1.45 !important; color: var(--mep-muted) !important; }
.mep-scope .mep-consent a { color: var(--mep-text) !important; text-decoration: underline !important; }
.mep-scope .mep-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.mep-scope .mep-err { font-size: 13px !important; color: #ffc2a8 !important; min-height: 1em; margin: 0 !important; }

.mep-scope .mep-cta {
  display: block; width: 100%; margin: 0 !important; border: 0 !important; border-radius: 14px !important; padding: 15px 18px !important;
  background: var(--mep-sun) !important; color: var(--mep-ink) !important; text-align: center; text-decoration: none !important;
  font: 800 20px/1.1 var(--mep-display) !important; letter-spacing: .04em !important; text-transform: uppercase !important;
  cursor: pointer; transition: filter .15s;
}
.mep-scope .mep-cta:hover { filter: brightness(1.05); }
.mep-scope .mep-cta:disabled { opacity: .7; cursor: wait; }
.mep-scope .mep-nothanks {
  justify-self: center; margin: 0 !important; padding: 6px !important; background: none !important; border: 0 !important;
  font: 13px var(--mep-body) !important; color: var(--mep-muted) !important; text-decoration: underline !important; cursor: pointer;
}

/* ---------- step 3: reveal ---------- */
.mep-scope .mep-s3 { text-align: center; }
.mep-scope .mep-s3 .mep-eyebrow { padding-right: 0 !important; }
.mep-scope .mep-ticket { position: relative; margin: 6px auto 18px; width: 100%; max-width: 300px; aspect-ratio: 1.5; perspective: 900px; }
.mep-scope .mep-face {
  position: absolute; inset: 0; border-radius: 20px; display: grid; place-items: center;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.mep-scope .mep-front {
  background: repeating-linear-gradient(135deg, var(--mep-river-deep) 0 14px, var(--mep-river) 14px 28px);
  font-family: var(--mep-display); font-size: 64px; font-weight: 800; color: #fff !important;
}
.mep-scope .mep-back { background: var(--mep-stone); transform: rotateY(180deg); align-content: center; gap: 2px; }
.mep-scope .mep-ticket.mep-flipped .mep-front { transform: rotateY(-180deg); }
.mep-scope .mep-ticket.mep-flipped .mep-back { transform: rotateY(0); }
.mep-scope .mep-pct { font-family: var(--mep-display) !important; font-weight: 800; font-size: 76px !important; line-height: .9 !important; color: var(--mep-river-deep) !important; }
.mep-scope .mep-pct-label { font-size: 13px !important; letter-spacing: .12em; text-transform: uppercase; color: #4c5b55 !important; }
.mep-scope .mep-code { display: flex; gap: 8px; justify-content: center; align-items: stretch; margin: 0 0 12px; }
.mep-scope .mep-code output {
  padding: 12px 16px; border: 1.5px dashed rgba(255, 255, 255, .55); border-radius: 12px;
  font: 600 18px ui-monospace, Menlo, monospace !important; letter-spacing: .08em; color: var(--mep-text) !important;
  -webkit-user-select: all; user-select: all;
}
.mep-scope .mep-copy {
  margin: 0 !important; border: 0 !important; border-radius: 12px !important; padding: 0 16px !important;
  background: #fff !important; color: var(--mep-ink) !important; font: 600 14px var(--mep-body) !important; cursor: pointer;
}
.mep-scope .mep-fine { font-size: 12px !important; line-height: 1.5 !important; color: var(--mep-muted) !important; margin: 0 0 14px !important; }

.mep-scope .mep-brand {
  display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 16px;
  font: 700 15px var(--mep-display) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--mep-muted) !important;
}
.mep-scope .mep-brand i { width: 8px; height: 8px; border-radius: 50%; background: var(--mep-river); display: inline-block; }

/* ---------- phones: slides up from the bottom ---------- */
@media (max-width: 640px) {
  #mep-root { place-items: end center; padding: 0; }
  #mep-root .mep-popup {
    width: 100%; max-height: 90vh; border-radius: 28px 28px 0 0; border-bottom: 0;
    padding: 24px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
  }
  #mep-root.mep-open .mep-popup { transform: none; }
  .mep-scope .mep-word { font-size: 42px !important; }
  .mep-scope .mep-box { width: 62px; height: 62px; }
  .mep-scope .mep-h2 { font-size: 30px !important; }
  .mep-scope .mep-toggles { margin-bottom: 14px !important; }
  .mep-scope .mep-toggles li { padding: 8px 0 !important; font-size: 16px !important; }
  .mep-scope .mep-brand { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .mep-scope *, #mep-root .mep-popup, #mep-root .mep-backdrop { transition: none !important; }
}

/* Multi-line labels on the choice step ("Stay|home") */
.mep-scope .mep-line { display: block; }
.mep-scope .mep-brand-logo img { display: block; height: 30px; width: auto; max-width: 160px; opacity: .9; }

/* =====================================================================
   THEME: Canyoning Cetina — matches canyoning-cetina.com
   Poppins 900 headings with sand italics, gold accent dot, navy glass,
   off-white pills, orange pill CTA.
   ===================================================================== */
.mep-theme-cetina {
  --c-ink: #1a1714;
  --c-off: #faf8f5;
  --c-cream: #f2ede6;
  --c-sand: #c4a882;
  --c-sand-dark: #8a7356;
  --c-gold: #d4a843;
  --c-orange: #e85d26;
  --c-orange-hover: #cf4c19;
  --c-navy: #0e2030;
  --c-river: #2d6a8a;

  --mep-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mep-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mep-glass: rgba(14, 32, 48, .82);
  --mep-line: rgba(250, 248, 245, .2);
  --mep-text: var(--c-off);
  --mep-muted: rgba(242, 237, 230, .72);
  --mep-on: var(--c-gold);
  --mep-sun: var(--c-gold);
  --mep-ink: var(--c-ink);
  --mep-stone: var(--c-cream);
  --mep-river: var(--c-river);
  --mep-river-deep: var(--c-navy);
}

#mep-root.mep-theme-cetina .mep-backdrop { background: rgba(14, 32, 48, .4); }
#mep-root.mep-theme-cetina .mep-popup,
.mep-theme-cetina.mep-inline {
  border: 1.5px solid rgba(250, 248, 245, .5);
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(14, 32, 48, .45);
}

/* eyebrow: sand, wide tracking, gold dot like the site's nav */
.mep-theme-cetina .mep-eyebrow {
  color: var(--c-sand) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .22em;
}
.mep-theme-cetina .mep-eyebrow::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 9px 2px 0; border-radius: 50%;
  background: var(--c-gold); vertical-align: middle;
}

/* step 1 words: Poppins 900, title case, second line of the right answer in sand italics */
.mep-theme-cetina .mep-word {
  font-family: var(--mep-display) !important; font-weight: 900 !important; text-transform: none !important;
  font-size: clamp(34px, 9.5vw, 46px) !important; line-height: 1 !important; letter-spacing: -.03em !important;
}
.mep-theme-cetina .mep-stay .mep-word { color: rgba(250, 248, 245, .42) !important; }
.mep-theme-cetina .mep-go .mep-line:last-child { font-style: italic; color: var(--c-sand) !important; padding-right: .08em; }
.mep-theme-cetina .mep-box { width: 66px; height: 66px; border: 2px solid var(--c-off); border-radius: 50%; }
.mep-theme-cetina .mep-go.mep-checked .mep-box { background: var(--c-gold); border-color: var(--c-gold); }
.mep-theme-cetina .mep-go:hover .mep-box { background: rgba(212, 168, 67, .2); }
.mep-theme-cetina .mep-stay-msg { color: var(--c-gold) !important; }

/* step 2 */
.mep-theme-cetina .mep-h2 {
  font-weight: 900 !important; text-transform: none !important; font-size: 30px !important;
  line-height: 1.05 !important; letter-spacing: -.025em !important;
}
.mep-theme-cetina .mep-toggles li { font-size: 15px !important; font-weight: 500 !important; }
.mep-theme-cetina .mep-input {
  border-radius: 999px !important; padding: 14px 20px !important; background: var(--c-off) !important;
  color: var(--c-ink) !important; font-family: var(--mep-body) !important; font-weight: 500 !important;
}
.mep-theme-cetina .mep-cta {
  border-radius: 999px !important; padding: 16px 22px !important;
  background: var(--c-orange) !important; color: var(--c-off) !important;
  font: 600 14px/1.2 var(--mep-body) !important; letter-spacing: .08em !important;
}
.mep-theme-cetina .mep-cta:hover { background: var(--c-orange-hover) !important; filter: none; }

/* step 3 */
.mep-theme-cetina .mep-ticket { border-radius: 24px; }
.mep-theme-cetina .mep-face { border-radius: 24px; }
.mep-theme-cetina .mep-front {
  background: repeating-linear-gradient(135deg, var(--c-navy) 0 14px, var(--c-river) 14px 28px);
  font-family: var(--mep-display) !important; font-weight: 900; font-style: italic; color: var(--c-sand) !important;
  border: 1.5px solid rgba(250, 248, 245, .35);
}
.mep-theme-cetina .mep-back { background: var(--c-cream); }
.mep-theme-cetina .mep-pct { font-weight: 900 !important; letter-spacing: -.04em; color: var(--c-ink) !important; font-size: 72px !important; }
.mep-theme-cetina .mep-pct-label { color: var(--c-sand-dark) !important; font-weight: 600; font-size: 12px !important; letter-spacing: .18em; }
.mep-theme-cetina .mep-code output {
  border-radius: 999px; padding: 12px 20px; border-color: rgba(250, 248, 245, .5);
  font: 700 17px var(--mep-body) !important; letter-spacing: .14em;
}
.mep-theme-cetina .mep-copy { border-radius: 999px !important; padding: 0 20px !important; background: var(--c-off) !important; font-family: var(--mep-body) !important; font-weight: 600 !important; text-transform: uppercase !important; font-size: 12px !important; letter-spacing: .08em !important; }

.mep-theme-cetina .mep-brand { font: 600 11px var(--mep-body) !important; letter-spacing: .24em; }
.mep-theme-cetina .mep-brand i { background: var(--c-gold); width: 6px; height: 6px; }

@media (max-width: 640px) {
  .mep-theme-cetina .mep-word { font-size: 36px !important; }
  .mep-theme-cetina .mep-box { width: 58px; height: 58px; }
  .mep-theme-cetina .mep-h2 { font-size: 26px !important; }
  #mep-root.mep-theme-cetina .mep-popup { border-bottom: 0; }
}