/* =========================================================
   Move4PD Registration — Typeform-style stylesheet
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700;9..144,900&family=DM+Sans:wght@400;500;600&display=swap');

.m4pd-wrap {
    --green:       #1e9e5e;
    --gd:          #156b41;
    --gl:          #e8f7ef;
    --ac:          #f4a020;
    --bl:          #2563eb;
    --bll:         #eff6ff;
    --tx:          #1a1a2e;
    --mt:          #6b7280;
    --bd:          #e2e8f0;
    --bg:          #fafaf8;
    --wh:          #ffffff;
    --r:           14px;
    --rs:          8px;
    --tr:          0.22s cubic-bezier(.4,0,.2,1);
    font-family: 'DM Sans', system-ui, sans-serif;
    color: var(--tx);
    max-width: 700px;
    margin: 0 auto 60px;
    padding: 0 16px;
}

/* ── HERO ── */
.m4pd-hero {
    background: linear-gradient(135deg,#C445B4 0%,#C445B4 60%,#C445B4 100%);
    border-radius: var(--r);
    padding: 40px;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}
.m4pd-hero::before {
    content:'';position:absolute;top:-50px;right:-50px;
    width:200px;height:200px;background:rgba(255,255,255,.06);border-radius:50%
}
.m4pd-hero__badge {
    display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);
    font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    padding:5px 12px;border-radius:100px;margin-bottom:16px
}
.m4pd-hero__title {
    font-family:'Fraunces',Georgia,serif;font-size:clamp(1.8rem,5vw,2.8rem);
    font-weight:900;line-height:1.1;margin:0 0 6px;color:#fff
}
.m4pd-hero__hash { color:rgba(255,255,255,.5) }
.m4pd-hero__sub {
    display:block;font-size:clamp(.85rem,2.2vw,1rem);font-weight:400;
    color:rgba(255,255,255,.85);margin-top:4px;font-family:'DM Sans',sans-serif
}
.m4pd-hero__desc { font-size:14px;line-height:1.65;color:rgba(255,255,255,.9);max-width:480px;margin:12px 0 18px }
.m4pd-hero__desc strong { color:#fff }
.m4pd-hero__pills { display:flex;gap:8px;flex-wrap:wrap }
.m4pd-pill { font-size:11px;font-weight:500;padding:4px 12px;border-radius:100px }
.m4pd-pill--green { background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.25) }
.m4pd-pill--blue  { background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.20) }
.m4pd-pill--orange{ background:rgba(244,160,32,.25);color:#fff;border:1px solid rgba(244,160,32,.35) }

/* ── PROGRESS BAR ── */
.m4pd-progress-wrap {
    display:flex;align-items:center;gap:14px;
    margin-bottom:24px;
}
.m4pd-progress-bar {
    flex:1;height:6px;background:var(--bd);border-radius:100px;overflow:hidden
}
.m4pd-progress-fill {
    height:100%;background:linear-gradient(90deg,var(--green),#2ec37c);
    border-radius:100px;transition:width .4s ease;width:0%
}
.m4pd-progress-label {
    font-size:12px;font-weight:600;color:var(--mt);white-space:nowrap
}

/* ── QUESTION CARD ── */
/* All questions hidden by default — JS uses inline style to show/hide
   so this class is a fallback only */
.m4pd-wrap .m4pd-q {
    display:none !important;
    background:var(--wh);
    border:1px solid var(--bd);
    border-radius:var(--r);
    padding:40px 44px 36px;
    box-shadow:0 4px 24px rgba(30,158,94,.08);
}
/* JS sets display:block via inline style; this class is kept as backup */
.m4pd-wrap .m4pd-q--active {
    display:block !important;
    animation:qIn .3s ease both;
}

@keyframes qIn  { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes qOut { from{opacity:1;transform:translateY(0)}    to{opacity:0;transform:translateY(-12px)} }

.m4pd-q__num {
    font-size:12px;font-weight:700;color:var(--green);letter-spacing:.05em;
    text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:6px
}
.m4pd-q__arrow { font-size:14px }
.m4pd-q__title {
    font-family:'Fraunces',Georgia,serif;font-size:clamp(1.15rem,3vw,1.5rem);
    font-weight:700;line-height:1.3;color:var(--tx);margin:0 0 10px
}
.m4pd-q__hint  { font-size:13px;color:var(--mt);margin:0 0 20px;line-height:1.6 }
.m4pd-req      { color:var(--green) }
.m4pd-opt      { color:#888; font-size:.8em; font-weight:400; }

/* ── TEXT INPUT ── */
.m4pd-q__input {
    display:block;width:100%;box-sizing:border-box;
    padding:14px 16px;font-family:'DM Sans',sans-serif;font-size:16px;
    color:var(--tx);background:var(--bg);
    border:0;border-bottom:2px solid var(--bd);
    border-radius:0;outline:none;
    transition:border-color var(--tr),box-shadow var(--tr);
    margin-bottom:8px;
}
.m4pd-q__input:focus { border-bottom-color:var(--green);background:var(--wh) }
.m4pd-q__input::placeholder { color:#c0cad6 }
.m4pd-q__input--error { border-bottom-color:#ef4444 }
.m4pd-q__textarea { resize:vertical;min-height:120px;line-height:1.6;border:1.5px solid var(--bd);border-radius:var(--rs);padding:12px 14px }
.m4pd-q__textarea:focus { border-color:var(--green);background:var(--wh);border-bottom-color:var(--green) }
.m4pd-field-error { display:block;font-size:12px;font-weight:500;color:#dc2626;margin-top:4px }

/* ── CHOICE OPTIONS ── */
.m4pd-choices {
    display:flex;flex-direction:column;gap:10px;margin-bottom:28px
}
.m4pd-choices--wrap {
    flex-direction:row;flex-wrap:wrap;gap:10px
}
.m4pd-choice {
    display:flex;align-items:center;gap:12px;
    padding:13px 16px;border:1.5px solid var(--bd);border-radius:var(--rs);
    cursor:pointer;transition:border-color var(--tr),background var(--tr),box-shadow var(--tr);
    background:var(--bg);position:relative;user-select:none;
}
.m4pd-choice input { position:absolute;opacity:0;pointer-events:none }
.m4pd-choice__key {
    width:26px;height:26px;border-radius:5px;border:1.5px solid var(--bd);
    font-size:11px;font-weight:700;color:var(--mt);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    transition:border-color var(--tr),background var(--tr),color var(--tr)
}
.m4pd-choice__text {
    flex:1;font-size:15px;font-weight:500;color:var(--tx);
    display:flex;flex-direction:column;gap:2px;line-height:1.3
}
.m4pd-choice__text small { font-size:12px;font-weight:400;color:var(--mt) }
.m4pd-choice__check { font-size:14px;color:var(--green);opacity:0;transition:opacity var(--tr) }

.m4pd-choice:hover {
    border-color:var(--green);background:var(--gl)
}
.m4pd-choice--selected {
    border-color:var(--green);background:var(--gl);
    box-shadow:0 0 0 3px rgba(30,158,94,.12)
}
.m4pd-choice--selected .m4pd-choice__key {
    background:var(--green);border-color:var(--green);color:#fff
}
.m4pd-choice--selected .m4pd-choice__check { opacity:1 }

/* Compact chips for sizes */
.m4pd-choice--compact {
    padding:10px 14px;min-width:70px;justify-content:center;text-align:center;flex-direction:column;gap:4px
}
.m4pd-choice--compact .m4pd-choice__text { font-size:14px;font-weight:700;align-items:center }
.m4pd-choice--compact .m4pd-choice__key  { width:22px;height:22px;font-size:10px }

/* Multi-select checked state */
.m4pd-choice--multi.m4pd-choice--selected {
    border-color:var(--green);background:var(--gl)
}

/* ── NAV BUTTONS ── */
.m4pd-q__nav {
    display:flex;align-items:center;gap:12px;
    padding-top:20px;border-top:1px solid var(--bd);margin-top:4px
}
.m4pd-btn {
    font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;
    padding:11px 24px;border-radius:100px;border:none;cursor:pointer;
    transition:all var(--tr);display:inline-flex;align-items:center;gap:7px
}
.m4pd-btn--next,.m4pd-btn--submit {
    background:var(--green);color:#fff;
    box-shadow:0 4px 14px rgba(30,158,94,.3);margin-left:auto
}
.m4pd-btn--next:hover,.m4pd-btn--submit:hover {
    background:var(--gd);transform:translateY(-1px);box-shadow:0 6px 20px rgba(30,158,94,.4)
}
.m4pd-btn--prev {
    background:transparent;color:var(--mt);border:1.5px solid var(--bd);font-size:13px
}
.m4pd-btn--prev:hover { background:var(--bg);color:var(--tx);border-color:var(--mt) }
.m4pd-btn--submit { font-size:15px;padding:13px 32px }
.m4pd-btn:disabled { opacity:.55;pointer-events:none }

/* ── ENTER HINT ── */
.m4pd-enter-hint {
    font-size:12px;color:var(--mt);margin-top:10px;
    display:flex;align-items:center;gap:6px
}
.m4pd-enter-hint kbd {
    background:var(--bd);border-radius:4px;padding:2px 7px;font-size:11px;font-weight:600
}

/* ── MERCH CARD ── */
.m4pd-merch-card {
    position:relative;border:2px solid var(--ac);border-radius:var(--r);
    padding:22px;margin-bottom:16px;background:#fffbf0
}
.m4pd-merch-card__badge {
    position:absolute;top:-13px;right:18px;background:var(--ac);color:#fff;
    font-family:'Fraunces',Georgia,serif;font-weight:900;font-size:.9rem;
    padding:3px 14px;border-radius:100px
}
.m4pd-merch-card__title { font-family:'Fraunces',Georgia,serif;font-size:1rem;font-weight:700;margin:0 0 7px }
.m4pd-merch-card__desc  { font-size:13px;color:var(--mt);line-height:1.6;margin:0 0 12px }
.m4pd-merch-card__pay {
    font-size:12px;color:var(--tx);line-height:1.7;padding:10px;
    background:rgba(244,160,32,.1);border-radius:var(--rs);margin-bottom:14px
}
.m4pd-merch-card__pay a { color:var(--gd);font-weight:600 }
.m4pd-merch-card__check {
    display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500;cursor:pointer
}
.m4pd-merch-card__check input { accent-color:var(--green);width:17px;height:17px }

/* ── PARTICIPANT COUNTER ── */
.m4pd-participant-banner {
    background:linear-gradient(135deg,var(--gl) 0%,#f0fdf4 100%);
    border:2px solid var(--green);border-radius:var(--r);
    padding:20px 22px 14px;margin-bottom:16px
}
.m4pd-participant-banner__inner {
    display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap
}
.m4pd-participant-counter {
    display:flex;align-items:center;background:var(--wh);
    border:2px solid var(--green);border-radius:100px;overflow:hidden;
    box-shadow:0 2px 10px rgba(30,158,94,.15)
}
.m4pd-counter-btn {
    width:42px;height:42px;border:none;background:transparent;font-size:20px;
    font-weight:700;color:var(--green);cursor:pointer;
    transition:background var(--tr),color var(--tr);
    display:flex;align-items:center;justify-content:center
}
.m4pd-counter-btn:hover { background:var(--green);color:#fff }
.m4pd-counter-btn:disabled { opacity:.35;pointer-events:none }
.m4pd-counter-display {
    display:flex;flex-direction:column;align-items:center;padding:0 16px;min-width:80px;
    border-left:1px solid var(--gl);border-right:1px solid var(--gl)
}
.m4pd-counter-num { font-family:'Fraunces',Georgia,serif;font-size:1.7rem;font-weight:900;color:var(--gd);line-height:1 }
.m4pd-counter-lbl { font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mt);margin-top:2px }
.m4pd-participant-total { text-align:right }
.m4pd-total-label { display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mt);margin-bottom:3px }
.m4pd-total-amount { display:block;font-family:'Fraunces',Georgia,serif;font-size:1.6rem;font-weight:900;color:var(--gd);line-height:1 }
.m4pd-participant-hint { font-size:12px;color:var(--mt);margin:10px 0 0;line-height:1.5 }

/* ── NOTICE ── */
.m4pd-notice {
    background:var(--bll);border-left:4px solid var(--bl);border-radius:0 var(--rs) var(--rs) 0;
    padding:12px 14px;font-size:12px;color:var(--tx);line-height:1.6;
    margin-bottom:20px;display:flex;gap:9px
}
.m4pd-notice a { color:var(--bl);font-weight:600 }
.m4pd-notice__icon { font-size:15px;flex-shrink:0;margin-top:1px }

/* ── SUCCESS ── */
.m4pd-success {
    text-align:center;padding:60px 40px;background:var(--wh);
    border-radius:var(--r);border:1px solid var(--bd);
    box-shadow:0 12px 48px rgba(30,158,94,.15);
    animation:qIn .4s ease both
}
.m4pd-success__icon  { font-size:3.5rem;margin-bottom:14px }
.m4pd-success__title { font-family:'Fraunces',Georgia,serif;font-size:2rem;font-weight:900;color:var(--gd);margin:0 0 12px }
.m4pd-success__text  { font-size:15px;color:var(--mt);margin:0 0 24px;line-height:1.7 }
.m4pd-success__spinner {
    width:34px;height:34px;border:3px solid var(--gl);border-top-color:var(--green);
    border-radius:50%;animation:spin .8s linear infinite;margin:0 auto
}
@keyframes spin { to { transform:rotate(360deg) } }

/* ── DONATION ── */
.m4pd-donation { margin-top:28px }
.m4pd-donation__divider { height:1px;background:linear-gradient(90deg,transparent,var(--bd),transparent);margin-bottom:28px }
.m4pd-donation__heading { font-family:'Fraunces',Georgia,serif;font-size:1.3rem;font-weight:700;color:var(--tx);margin:0 0 12px }
.m4pd-donation__message { font-size:15px;color:var(--mt);line-height:1.7;max-width:480px;margin:0 auto 24px }
.m4pd-btn--donate {
    background:linear-gradient(135deg,#e74c6f,#c0392b);color:#fff;font-size:16px;
    padding:14px 40px;border-radius:100px;box-shadow:0 4px 18px rgba(231,76,111,.35);
    text-decoration:none;display:inline-flex;align-items:center;gap:8px;border:none;
    cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:600;
    transition:all var(--tr);margin-bottom:16px
}
.m4pd-btn--donate:hover { background:linear-gradient(135deg,#c0392b,#a93226);transform:translateY(-1px);color:#fff;text-decoration:none }
.m4pd-donation__skip { margin:0;font-size:13px }
.m4pd-donation__skip a { color:var(--mt);text-decoration:underline;text-underline-offset:3px }
.m4pd-donation__skip a:hover { color:var(--tx) }

/* ── ERROR ── */
.m4pd-error-msg {
    background:#fef2f2;border-left:4px solid #ef4444;border-radius:var(--rs);
    padding:14px 16px;font-size:14px;color:#7f1d1d;margin-top:16px;line-height:1.6
}

/* ── KEYBOARD HINT ── */
.m4pd-kb-hint {
    display:inline-flex;align-items:center;gap:6px;
    font-size:12px;color:var(--mt);margin-top:10px
}
.m4pd-kb-hint kbd {
    background:var(--bd);border-radius:4px;padding:2px 8px;
    font-size:11px;font-weight:700;color:var(--tx)
}

/* ── RESPONSIVE ── */
@media (max-width:600px) {
    .m4pd-hero   { padding:28px 22px 24px }
    .m4pd-q      { padding:28px 20px 24px }
    .m4pd-choices--wrap { flex-direction:column }
    .m4pd-choice--compact { min-width:auto;flex-direction:row }
    .m4pd-btn--submit { font-size:14px;padding:12px 22px }
    .m4pd-participant-banner__inner { justify-content:center }
    .m4pd-participant-total { text-align:center }
}