/* ================================================
   MealPreperia Quiz – Stylesheet v3.1
   Alle Farben per CSS-Variable — steuerbar über
   wp_add_inline_style aus dem Dashboard.
   ================================================ */

/* Fallback-Variablen (werden durch Inline-CSS überschrieben) */
.mpq-wrapper {
    --mpq-bg:            #FAF7F2;
    --mpq-primary:       #dd566c;
    --mpq-btn:           #7ed957;
    --mpq-selected:      #b2e993;
    --mpq-option-border: #E8E4DC;
    --mpq-option-bg:     #FAF7F2;
    --mpq-card-bg:       #ffffff;
    --mpq-text:          #1A1A18;
    --mpq-muted:         #7A7670;
    --mpq-soft:          #F0EBE1;
    --mpq-shadow:        0 8px 40px rgba(26,26,24,0.10);
    --mpq-font-heading:  var(--wp--preset--font-family--heading, serif);
    --mpq-font-body:     var(--wp--preset--font-family--body, sans-serif);

    background:   var(--mpq-bg) !important;
    color:        var(--mpq-text) !important;
    font-family:  var(--mpq-font-body) !important;
    display:      flex !important;
    flex-direction: column !important;
    align-items:  center !important;
    padding:      48px 16px 80px !important;
    box-sizing:   border-box !important;
    width:        100% !important;
}

.mpq-wrapper *, .mpq-wrapper *::before, .mpq-wrapper *::after {
    box-sizing: border-box;
}

/* ── Header — Reset gegen Theme ── */
.mpq-wrapper #mpqHeader {
    text-align:    center !important;
    margin-bottom: 40px !important;
    max-width:     560px !important;
    width:         100% !important;
    background:    none !important;
    padding:       0 !important;
    border:        none !important;
}
.mpq-wrapper .mpq-label {
    display:         inline-block !important;
    font-size:       11px !important;
    font-weight:     600 !important;
    letter-spacing:  0.18em !important;
    text-transform:  uppercase !important;
    color:           var(--mpq-muted) !important;
    margin-bottom:   14px !important;
    background:      none !important;
}
.mpq-wrapper #mpqHeader h2 {
    font-family:   var(--mpq-font-heading) !important;
    font-size:     clamp(28px, 5vw, 46px) !important;
    font-weight:   900 !important;
    line-height:   1.15 !important;
    margin:        0 0 14px 0 !important;
    padding:       0 !important;
    border:        none !important;
    background:    none !important;
    color:         var(--mpq-text) !important;
    text-align:    center !important;
}
.mpq-wrapper #mpqHeader h2 em {
    font-style: italic !important;
    color:      var(--mpq-primary) !important;
    background: none !important;
}
.mpq-wrapper #mpqHeader p {
    font-size:   16px !important;
    color:       var(--mpq-muted) !important;
    line-height: 1.65 !important;
    font-weight: 300 !important;
    margin:      0 !important;
    padding:     0 !important;
    background:  none !important;
}

/* ── Fortschritt ── */
.mpq-wrapper .mpq-progress-wrap {
    width:         100% !important;
    max-width:     560px !important;
    margin-bottom: 28px !important;
}
.mpq-wrapper .mpq-progress-meta {
    display:         flex !important;
    justify-content: space-between !important;
    font-size:       12px !important;
    font-weight:     500 !important;
    color:           var(--mpq-muted) !important;
    margin-bottom:   8px !important;
}
.mpq-wrapper .mpq-progress-bar {
    height:        4px !important;
    background:    var(--mpq-soft) !important;
    border-radius: 99px !important;
    overflow:      hidden !important;
}
.mpq-wrapper .mpq-progress-fill {
    height:        100% !important;
    background:    var(--mpq-primary) !important;
    border-radius: 99px !important;
    transition:    width 0.5s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── Karte ── */
.mpq-wrapper .mpq-card {
    background:    var(--mpq-card-bg) !important;
    border-radius: 4px !important;
    box-shadow:    var(--mpq-shadow) !important;
    padding:       36px 32px !important;
    max-width:     560px !important;
    width:         100% !important;
    animation:     mpqFadeUp 0.35s ease;
    border:        none !important;
}
@keyframes mpqFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mpq-wrapper .mpq-q-num {
    font-size:      11px !important;
    font-weight:    600 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color:          var(--mpq-muted) !important;
    margin-bottom:  10px !important;
    display:        block !important;
    background:     none !important;
}
.mpq-wrapper .mpq-q-text {
    font-family:   var(--mpq-font-heading) !important;
    font-size:     clamp(17px, 3vw, 21px) !important;
    font-weight:   700 !important;
    line-height:   1.4 !important;
    margin:        0 0 24px 0 !important;
    padding:       0 !important;
    border:        none !important;
    background:    none !important;
    color:         var(--mpq-text) !important;
}

/* ── Antworten ── */
.mpq-wrapper .mpq-options {
    display:        flex !important;
    flex-direction: column !important;
    gap:            10px !important;
}
.mpq-wrapper .mpq-option {
    padding:       14px 16px !important;
    border:        1.5px solid var(--mpq-option-border) !important;
    border-radius: 4px !important;
    cursor:        pointer !important;
    font-family:   var(--mpq-font-body) !important;
    font-size:     14px !important;
    line-height:   1.55 !important;
    font-weight:   400 !important;
    background:    var(--mpq-option-bg) !important;
    text-align:    left !important;
    width:         100% !important;
    color:         var(--mpq-text) !important;
    transition:    border-color 0.15s, background 0.15s, transform 0.15s !important;
    display:       block !important;
}
.mpq-wrapper .mpq-option:hover {
    border-color: var(--mpq-primary) !important;
    background:   #fff !important;
    transform:    translateY(-1px) !important;
}
.mpq-wrapper .mpq-option.selected {
    border-color: #7ed957 !important;
    background:   var(--mpq-selected) !important;
    color:        var(--mpq-text) !important;
}

/* ── Weiter-Button ── */
.mpq-wrapper .mpq-btn-next {
    margin-top:    24px !important;
    width:         100% !important;
    padding:       15px !important;
    background:    var(--mpq-btn) !important;
    color:         var(--mpq-text) !important;
    border:        none !important;
    border-radius: 4px !important;
    font-family:   var(--mpq-font-body) !important;
    font-size:     15px !important;
    font-weight:   700 !important;
    cursor:        pointer !important;
    transition:    all 0.2s ease !important;
    opacity:       0 !important;
    pointer-events: none !important;
    transform:     translateY(6px) !important;
    display:       block !important;
}
.mpq-wrapper .mpq-btn-next.visible {
    opacity:        1 !important;
    pointer-events: all !important;
    transform:      translateY(0) !important;
}
.mpq-wrapper .mpq-btn-next:hover {
    filter:     brightness(0.92) !important;
    transform:  translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15) !important;
}

/* ── Übergangsseite ── */
.mpq-wrapper .mpq-transition-card {
    background:    var(--mpq-card-bg) !important;
    border-radius: 4px !important;
    box-shadow:    var(--mpq-shadow) !important;
    padding:       52px 32px !important;
    max-width:     560px !important;
    width:         100% !important;
    text-align:    center !important;
    border-top:    5px solid var(--mpq-primary) !important;
    animation:     mpqFadeUp 0.35s ease;
}
.mpq-wrapper .mpq-transition-icon {
    width:          50px !important;
    height:         50px !important;
    border-radius:  50% !important;
    background:     var(--mpq-primary) !important;
    color:          #fff !important;
    font-size:      22px !important;
    display:        flex !important;
    align-items:    center !important;
    justify-content: center !important;
    margin:         0 auto 18px !important;
}
.mpq-wrapper .mpq-transition-label {
    font-size:      11px !important;
    font-weight:    700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color:          var(--mpq-muted) !important;
    margin-bottom:  10px !important;
    display:        block !important;
}
.mpq-wrapper .mpq-transition-sub {
    font-size:     14px !important;
    color:         var(--mpq-muted) !important;
    margin-bottom: 24px !important;
    font-weight:   300 !important;
}
.mpq-wrapper .mpq-transition-bar {
    height:        4px !important;
    background:    var(--mpq-soft) !important;
    border-radius: 99px !important;
    overflow:      hidden !important;
    max-width:     180px !important;
    margin:        0 auto !important;
}
.mpq-wrapper .mpq-transition-fill {
    height:        100% !important;
    background:    var(--mpq-primary) !important;
    border-radius: 99px !important;
    width:         0% !important;
    animation:     mpqLoad 2.3s cubic-bezier(0.4,0,0.2,1) forwards !important;
}
@keyframes mpqLoad {
    from { width: 0%; }
    to   { width: 100%; }
}

/* ── Neustart ── */
.mpq-wrapper .mpq-restart {
    display:           block !important;
    text-align:        center !important;
    margin-top:        18px !important;
    font-size:         13px !important;
    color:             var(--mpq-muted) !important;
    cursor:            pointer !important;
    text-decoration:   underline !important;
    text-underline-offset: 3px !important;
    background:        none !important;
    border:            none !important;
    font-family:       var(--mpq-font-body) !important;
    width:             100% !important;
}
.mpq-wrapper .mpq-restart:hover { color: var(--mpq-text) !important; }

@media (max-width: 480px) {
    .mpq-wrapper .mpq-card,
    .mpq-wrapper .mpq-transition-card { padding: 24px 18px !important; }
}