/* Currently Match — gedeelde stijlen voor hub, detail, wizard en beheer (donker thema). */

/* De kleur-spelregels van Match, gespiegeld aan MarketplaceColors.cs: blauw = lopend of
   vastgehouden, groen = afgerond of veilig, oranje = waarschuwing, rood = fout of geschil,
   grijs = neutraal; het merk-accent kleurt knoppen en bedragen. Tinten gaan via de
   rgb-varianten: rgba(var(--mp-green-rgb), 0.4). Eén plek aanpassen kleurt alles mee. */
:root {
    --mp-green: #66BB6A; --mp-green-rgb: 102,187,106;
    --mp-green-bright: #4ADE80; --mp-green-bright-rgb: 74,222,128;
    --mp-violet: #A78BFA; --mp-violet-rgb: 167,139,250;
    --mp-blue: #42A5F5; --mp-blue-rgb: 66,165,245;
    --mp-red: #EF5350; --mp-red-rgb: 239,83,80;
    --mp-orange: #FFA726; --mp-orange-rgb: 255,167,38;
    --mp-accent: #F5A623; --mp-accent-rgb: 245,166,35;
    --mp-gray: #9CA3AF; --mp-gray-rgb: 156,163,175;
    --mp-purple: #AB47BC; --mp-purple-rgb: 171,71,188;
}

.mp-page { max-width: 1180px; margin: 0 auto; padding: 20px 16px 60px; }
.mp-page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.mp-page-title { font-size: 1.35rem; font-weight: 700; color: rgba(255,255,255,0.94); margin-right: auto; }

.mp-btn-primary {
    background: var(--mud-palette-primary); color: #1a1a1a; border: none; border-radius: 8px;
    padding: 9px 16px; font-weight: 600; font-size: 0.85rem; cursor: pointer; font-family: inherit;
}
.mp-btn-primary:hover { filter: brightness(1.08); }
.mp-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.mp-btn-secondary {
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.82); border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px; padding: 9px 16px; font-size: 0.85rem; cursor: pointer; font-family: inherit;
}
.mp-btn-secondary:hover { background: rgba(255,255,255,0.1); }
.mp-btn-danger {
    background: rgba(var(--mp-red-rgb), 0.16); color: var(--mp-red); border: 1px solid rgba(var(--mp-red-rgb), 0.45);
    border-radius: 8px; padding: 9px 16px; font-weight: 600; font-size: 0.85rem; cursor: pointer; font-family: inherit;
}
.mp-btn-danger:hover { background: rgba(var(--mp-red-rgb), 0.26); }
.mp-btn-danger:disabled { opacity: 0.45; cursor: not-allowed; }
.mp-icon-btn {
    background: none; border: none; color: rgba(255,255,255,0.55); font-size: 1rem; cursor: pointer;
    padding: 4px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 6px;
}
.mp-icon-btn:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); }
.mp-icon-btn .mud-icon-root { color: inherit; }
/* Icoonknoppen die naast tekstknoppen staan hebben de accentkleur nodig, anders vallen ze weg. */
.mp-icon-btn-accent { color: var(--mud-palette-primary); }
.mp-icon-btn-accent:hover { color: var(--mud-palette-primary); background: rgba(var(--mp-accent-rgb), 0.14); }

/* De knoppenrij naast de paginatitel blijft één blok, zodat 'ie niet verspringt wanneer
   de tekst ernaast van lengte verandert. */
.mp-head-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
.mp-icon-badge {
    position: absolute; top: -2px; right: -4px; background: var(--mud-palette-primary); color: #1a1a1a;
    font-size: 0.62rem; font-weight: 700; border-radius: 999px; padding: 1px 5px; line-height: 1.3;
}

/* Binnenkomen van een pagina, gelijk aan de rest van het dashboard. */
@keyframes mp-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.mp-fade-in { animation: mp-fade-up 0.3s ease-out both; }

/* Intent/categorie-toggles op de hub */
.mp-seg { display: inline-flex; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 9px; overflow: hidden; }
.mp-seg button {
    background: none; border: none; color: rgba(255,255,255,0.6); padding: 8px 16px;
    font-size: 0.83rem; cursor: pointer; font-family: inherit;
}
.mp-seg button.mp-seg-active { background: rgba(var(--mp-accent-rgb), 0.14); color: var(--mud-palette-primary); font-weight: 600; }
/* Een keuzebalk over de volle breedte verdeelt z'n knoppen in gelijke stukken, zodat er rechts
   geen loze strook overblijft. */
.mp-seg-fill { display: flex; width: 100%; }
.mp-seg-fill button { flex: 1 1 0; min-width: 0; padding: 8px 6px; text-align: center; white-space: nowrap; }

/* Hub (B01): tagline, categorie-tabs met tellers, filterbalk met zoekveld en chips */
.mp-tagline { font-size: 0.85rem; color: rgba(255,255,255,0.5); margin-top: 2px; }
.mp-cats { display: flex; gap: 22px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 18px; }
.mp-cat {
    background: none; border: none; cursor: pointer; font-family: inherit; padding: 10px 2px;
    font-size: 0.88rem; font-weight: 600; color: rgba(255,255,255,0.55); border-bottom: 2px solid transparent;
}
.mp-cat.mp-cat-on { color: rgba(255,255,255,0.92); border-bottom-color: var(--mud-palette-primary); }
.mp-cat-n { font-size: 0.66rem; color: rgba(255,255,255,0.35); margin-left: 5px; }
.mp-filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.mp-search {
    flex: 1; min-width: 220px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 9px; padding: 8px 12px; display: flex; align-items: center; gap: 8px;
}
.mp-search input { background: none; border: none; outline: none; color: rgba(255,255,255,0.87); font-size: 0.82rem; width: 100%; font-family: inherit; }
.mp-fchip {
    display: inline-flex; align-items: center; gap: 7px; border-radius: 20px; padding: 7px 13px;
    font-size: 0.76rem; font-weight: 600; border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.55); cursor: pointer; background: rgba(255,255,255,0.05); font-family: inherit;
}
.mp-fchip.mp-fchip-on { border-color: var(--mud-palette-primary); color: rgba(255,255,255,0.87); background: rgba(var(--mp-accent-rgb), 0.14); }
.mp-fchip .mp-fchip-v { color: var(--mud-palette-primary); }
.mp-resline { color: rgba(255,255,255,0.55); font-size: 0.8rem; margin-bottom: 14px; }
.mp-resline b { color: rgba(255,255,255,0.9); }
/* Dezelfde hoogte als de gevulde regel, zodat de laadvlakken op de plek beginnen waar de
   kaarten straks staan. */
.mp-resline-empty::before { content: ""; display: inline-block; height: 1em; }

/* Kaart-grid */
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }

.mp-card {
    position: relative; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.mp-card-own { border-style: dashed; border-color: rgba(255,255,255,0.3); }
.mp-card-own.mp-card-link:hover { border-color: rgba(255,255,255,0.45); }
/* De hele kaart is de knop naar de plaatsing (B01), dus 'ie reageert ook als geheel. */
.mp-card-link { cursor: pointer; transition: border-color 0.12s ease; }
.mp-card-link:hover { border-color: rgba(255,255,255,0.28); }
.mp-card-link.mp-card-feat:hover { border-color: rgba(var(--mp-accent-rgb), 0.75); }

/* Uitgelichte (betaald gepromote) kaart: accent-rand + zachte gloed + zwevend lint (B01) */
.mp-card-feat {
    border-color: rgba(var(--mp-accent-rgb), 0.55);
    box-shadow: 0 0 0 1px rgba(var(--mp-accent-rgb), 0.22), 0 8px 24px rgba(var(--mp-accent-rgb), 0.10);
    background: linear-gradient(180deg, rgba(var(--mp-accent-rgb), 0.14), transparent 42%), rgba(255,255,255,0.035);
}
.mp-feat-badge {
    position: absolute; top: -9px; left: 16px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em;
    text-transform: uppercase; color: #1a1a1a; background: var(--mud-palette-primary);
    border-radius: 20px; padding: 3px 10px; box-shadow: 0 2px 8px rgba(var(--mp-accent-rgb), 0.35);
}
/* Spiegelbeeld van het Uitgelicht-lint: gedempt en gestreept in plaats van accent, zodat de
   twee naast elkaar kunnen staan zonder om aandacht te vechten. In de kop zou deze chip de
   prioriteit opzij duwen en daarmee het soort en de titel laten verspringen. */
.mp-own-ribbon {
    position: absolute; top: -9px; right: 14px; font-size: 0.6rem; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.75);
    background: #2b2b2b; border: 1px dashed rgba(255,255,255,0.35);
    border-radius: 20px; padding: 3px 10px; white-space: nowrap;
}
.mp-card-top { display: flex; align-items: flex-start; gap: 11px; }
.mp-type-ic {
    width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center;
    justify-content: center; font-size: 17px; flex-shrink: 0;
}
.mp-kind { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.mp-prio {
    margin-left: auto; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    border-radius: 20px; padding: 3px 9px; border: 1px solid; flex-shrink: 0;
}
.mp-tag-ic { font-size: 0.74rem; width: 14px; text-align: center; flex-shrink: 0; }
.mp-tag-dot { width: 8px; height: 8px; border-radius: 3px; display: inline-block; margin-right: 5px; }
.mp-rows { display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; }
.mp-row-item { display: flex; align-items: center; gap: 8px; }
.mp-row-lbl { color: rgba(255,255,255,0.35); width: 78px; flex-shrink: 0; }
/* Bredere opschriften voor samenvattingen ("Bezwaar tegen", "Als geleverd gemarkeerd"). */
.mp-rows-recap .mp-row-lbl { width: 110px; }
.mp-rows-wide .mp-row-lbl { width: 150px; }
.mp-row-val { color: rgba(255,255,255,0.9); font-weight: 600; }
/* Bedrag-accent, bruikbaar naast elke waarde-klasse: het accent moet winnen van de
   basiskleur van de regel waar 'ie op zit (kaartregel, specveld, wizard-samenvatting). */
.mp-price { color: var(--mud-palette-primary) !important; font-weight: 700; font-size: 0.9rem; }
.mp-anon { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mp-anon-av {
    width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.mp-lock { font-size: 0.6rem; color: rgba(255,255,255,0.35); font-weight: 600; }
.mp-licband {
    font-size: 0.6rem; font-weight: 700; color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; padding: 2px 8px;
    display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
}
.mp-stars { color: var(--mud-palette-primary); font-size: 0.74rem; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.mp-stars-cnt { color: rgba(255,255,255,0.35); font-weight: 600; }
.mp-status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; background: currentColor; }
.mp-card-head { display: flex; align-items: center; gap: 8px; }
.mp-status {
    font-size: 0.7rem; font-weight: 600; border: 1px solid; border-radius: 999px; padding: 2px 9px;
    text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap;
}
.mp-card-date { margin-left: auto; font-size: 0.72rem; color: rgba(255,255,255,0.4); }
.mp-card-title { font-size: 1rem; font-weight: 600; color: rgba(255,255,255,0.92); }
/* Zolang het titelveld leeg is staat er "Nog geen titel"; gedempt, zodat die regel niet leest
   als een echte titel. */
.mp-card-title-ph { color: rgba(255,255,255,0.35); font-weight: 500; }
.mp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-tag {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.72rem; color: rgba(255,255,255,0.72); background: rgba(255,255,255,0.06);
    border-radius: 6px; padding: 4px 9px;
}
.mp-tag-soft { background: rgba(255,255,255,0.035); color: rgba(255,255,255,0.5); }
/* Aanklikbare tag (specialisatie-keuze op het profiel): het icoon houdt z'n eigen
   categoriekleur, de accentrand markeert de selectie. */
.mp-tag-pick {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    border: 1px solid transparent; font-family: inherit; font-size: 0.72rem;
}
.mp-tag-pick:hover { background: rgba(255,255,255,0.1); }
.mp-tag-picked { border-color: var(--mud-palette-primary); color: rgba(255,255,255,0.92); background: rgba(var(--mp-accent-rgb), 0.14); }
.mp-amount { color: var(--mud-palette-primary); font-weight: 600; }
.mp-card-owner {
    border-top: 1px solid rgba(255,255,255,0.08); padding-top: 10px; margin-top: auto;
    display: flex; flex-direction: row; align-items: center; gap: 10px;
}
.mp-owner-name { font-size: 0.8rem; color: rgba(255,255,255,0.75); }
.mp-owner-meta { font-size: 0.72rem; color: rgba(255,255,255,0.45); }
.mp-card-btn {
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.82); border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px; padding: 8px 14px; font-size: 0.82rem; cursor: pointer; font-family: inherit;
}
.mp-card-btn-primary { background: var(--mud-palette-primary); color: #1a1a1a; border: none; font-weight: 600; }
/* Destructieve rij-actie: de rode variant op kaart-knop-formaat, zodat 'ie naast de
   overige rij-knoppen past zonder de waarschuwingskleur te verliezen. */
.mp-card-btn-danger {
    background: rgba(var(--mp-red-rgb), 0.16); color: var(--mp-red); border-color: rgba(var(--mp-red-rgb), 0.45); font-weight: 600;
}
.mp-card-btn:hover { filter: brightness(1.1); }

/* Lege staat */
.mp-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
    padding: 60px 24px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
}
/* Wat direct op een leegstaat volgt hoort niet tegen dat vlak aan te plakken. */
.mp-empty + * { margin-top: 14px; }
.mp-empty-icon { font-size: 2rem; }
.mp-empty-title { font-size: 1.05rem; font-weight: 600; color: rgba(255,255,255,0.9); }
.mp-empty-text { font-size: 0.85rem; color: rgba(255,255,255,0.55); max-width: 460px; }
.mp-empty-btn {
    margin-top: 8px; background: var(--mud-palette-primary); color: #1a1a1a; border: none;
    border-radius: 8px; padding: 9px 18px; font-weight: 600; font-size: 0.85rem; cursor: pointer; font-family: inherit;
}

/* Skeleton (S01). De glans loopt over het vlak heen zodat wachten leest als bezig zijn in
   plaats van als vastgelopen. De duur van die glans is afgestemd op de tijd dat een laadvlak
   minimaal blijft staan (MarketplaceCardSkeleton.MinimumVisibleMs): duurt de beweging langer
   dan dat venster, dan verdwijnt het vlak nog voordat er iets te zien was. */
.mp-skeleton {
    position: relative; overflow: hidden; border-radius: 12px; background: rgba(255,255,255,0.05);
    animation: mp-pulse 1.1s ease-in-out infinite;
}
/* De glans start per kaart een stukje verderop in de cyclus, zodat er meteen ergens beweging
   te zien is in plaats van dat alles tegelijk buiten beeld begint. Getrapt en niet willekeurig,
   want bij toeval kunnen kaarten op dezelfde stand uitkomen en is het effect weer weg. */
.mp-skeleton::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    animation: mp-sheen 0.8s ease-in-out infinite;
    animation-delay: var(--mp-sheen-delay, 0s);
}
@keyframes mp-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes mp-sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.mp-sk-line { border-radius: 6px; }
.mp-sk-pill { border-radius: 20px; }
.mp-sk-round { border-radius: 50%; }

/* Laadfout (S02): één kaart die uitlegt dat het aan onze kant ligt, met de geruststelling
   dat er niets van de gebruiker verloren is en één duidelijke vervolgstap. */
.mp-errcard {
    max-width: 560px; margin: 40px auto; text-align: center;
    background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px; padding: 32px 30px;
}
.mp-errcard-ic {
    width: 56px; height: 56px; border-radius: 14px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center; font-size: 26px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
}
.mp-errcard-h { font-size: 1.1rem; font-weight: 700; color: rgba(255,255,255,0.92); margin-bottom: 10px; }
.mp-errcard-p { font-size: 0.86rem; color: rgba(255,255,255,0.55); line-height: 1.5; margin-bottom: 10px; }
.mp-reassure {
    display: flex; align-items: flex-start; gap: 11px; text-align: left; margin: 18px 0;
    background: rgba(var(--mp-green-rgb), 0.08); border: 1px solid rgba(var(--mp-green-rgb), 0.3);
    border-radius: 11px; padding: 13px 15px;
}
.mp-reassure-ic { color: var(--mp-green-bright); flex-shrink: 0; font-weight: 700; }
.mp-reassure-tx { font-size: 0.82rem; color: rgba(255,255,255,0.6); }
.mp-reassure-tx b { color: rgba(255,255,255,0.9); }
.mp-errcard-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* De identiteitskaart: hoe een bedrijf overkomt bij iemand die de naam niet mag zien. Gedeeld
   door het bedrijfsprofiel en de reputatiepagina. De gloed hoort bij de plek waar de kaart de
   blikvanger is; als kop boven een langere pagina blijft 'ie rustig. */
.mp-idcard {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px; padding: 20px 22px; margin-bottom: 14px;
}
.mp-idcard-glow {
    background: linear-gradient(135deg, rgba(var(--mp-accent-rgb), 0.10), rgba(255,255,255,0.03));
    border-color: rgba(var(--mp-accent-rgb), 0.28);
}
.mp-idcard-top { display: flex; gap: 16px; align-items: flex-start; }
.mp-idcard-av {
    width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 24px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
}
.mp-idcard-name {
    font-size: 1.05rem; font-weight: 700; color: rgba(255,255,255,0.94);
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.mp-idcard-meta { font-size: 0.8rem; color: rgba(255,255,255,0.55); margin-top: 3px; }
.mp-idcard-right { margin-left: auto; text-align: right; flex-shrink: 0; }
.mp-idcard-score { font-size: 2rem; font-weight: 800; color: var(--mud-palette-primary); line-height: 1.05; }

.mp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.mp-stat { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 14px 16px; }
.mp-stat-n { font-size: 1.45rem; font-weight: 700; color: rgba(255,255,255,0.94); line-height: 1.15; }
.mp-stat-l { font-size: 0.72rem; color: rgba(255,255,255,0.45); margin-top: 2px; }
.mp-stat-link { color: var(--mud-palette-primary); font-size: 0.72rem; text-decoration: none; display: inline-block; margin-top: 6px; }
.mp-stat-link:hover { text-decoration: underline; }

/* Opslaan-actie onderaan het formulier, op een vaste plek. Een meelopende balk botst met de
   scroll-context van de applicatie-layout en schokt daardoor tijdens het scrollen. */
.mp-savebar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08);
}

/* Detail */
.mp-detail-panel {
    background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; padding: 18px; margin-bottom: 14px;
}
.mp-detail-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.42); margin-bottom: 4px; }
.mp-detail-value { font-size: 0.88rem; color: rgba(255,255,255,0.85); }
.mp-spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }

/* Specificatie als lijst: opschrift links, waarde rechts, één gegeven per regel. In kolommen
   naast elkaar moet je zoeken welk opschrift bij welke waarde hoort. */
.mp-speclist { display: grid; grid-template-columns: 150px 1fr; gap: 9px 12px; font-size: 0.84rem; }
.mp-spec-l { color: rgba(255,255,255,0.4); }
.mp-spec-v { color: rgba(255,255,255,0.9); font-weight: 600; }
.mp-spec-v.mp-price { color: var(--mud-palette-primary); font-weight: 700; }
.mp-spec-note { display: block; font-size: 0.76rem; font-weight: 400; color: rgba(255,255,255,0.45); margin-top: 2px; }
.mp-spec-v.mp-spec-ok { color: var(--mp-green-bright); }
/* Het bolletje voor een benodigdheid moet net zo opvallen als het vinkje voor een voorwaarde. */
.mp-reqlist-dot { color: var(--mp-blue); flex-shrink: 0; font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
@media (max-width: 560px) { .mp-speclist { grid-template-columns: 1fr; gap: 2px 0; } .mp-spec-v { margin-bottom: 7px; } }

/* Uitleg die je écht moet lezen voordat je doorklikt: een blok met rand, geen grijze voetnoot. */
.mp-hint-solid {
    font-size: 0.8rem; line-height: 1.5; color: rgba(255,255,255,0.62);
    background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; padding: 11px 13px; margin: 16px 0 14px;
}
.mp-hint-solid b { color: rgba(255,255,255,0.9); }

/* Wat de tegenpartij zelf schreef, herkenbaar als citaat en niet als onze eigen tekst. */
/* De vijf stappen van een deal: gelijke vlakken over de volle breedte, gedempt zolang ze
   niet bereikt zijn. */
.mp-dealsteps { display: flex; align-items: stretch; gap: 4px; margin: 2px 0 4px; }
.mp-dealstep {
    flex: 1; text-align: center; padding: 9px 5px; border-radius: 9px; font-size: 0.7rem;
    font-weight: 600; color: rgba(255,255,255,0.35); background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
}
.mp-dealstep-n {
    display: block; font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase;
    opacity: 0.75; margin-bottom: 3px;
}
.mp-dealstep-done {
    border-color: rgba(var(--mp-green-rgb), 0.4); background: rgba(var(--mp-green-rgb), 0.12);
    color: var(--mp-green);
}
.mp-dealstep-on {
    border-color: rgba(var(--mp-orange-rgb), 0.5); background: rgba(var(--mp-orange-rgb), 0.14);
    color: var(--mp-orange); font-weight: 800;
}
/* Bij wederzijds akkoord kleurt de actieve stap groen: dat is een bereikte overeenkomst,
   geen wachtstand. */
.mp-dealstep-on.mp-dealstep-agree {
    border-color: rgba(var(--mp-green-rgb), 0.5); background: rgba(var(--mp-green-rgb), 0.16); color: var(--mp-green);
}
.mp-steps-lbl { text-align: center; }
.mp-steps-hint { text-align: center; }
/* Knoppen onder elkaar: versturen boven, uitweg eronder. */
.mp-btn-stack { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }

/* Met wie je te maken hebt, op een eigen regel onder de kenmerken van de plaatsing. */
/* De naam van een tegenpartij waarmee je een lopende deal hebt: groen, want dat contact is vrij. */
.mp-tag-revealed { color: var(--mp-green-bright); border: 1px solid rgba(var(--mp-green-bright-rgb), 0.4); background: rgba(var(--mp-green-bright-rgb), 0.1); }

.mp-partyline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 7px; }

/* Een reden kiezen: het rondje links, de tekst ernaast, allebei links uitgelijnd. Een echt
   keuzerondje in plaats van een knop, want een knop centreert zijn inhoud. */
.mp-radio {
    display: flex; align-items: center; gap: 11px; width: 100%; cursor: pointer;
    text-align: left; padding: 10px 12px; border-radius: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.12);
    transition: border-color 0.12s ease, background 0.12s ease;
}
.mp-radio:hover { border-color: rgba(255,255,255,0.24); }
.mp-radio input { accent-color: var(--mp-red); width: 16px; height: 16px; flex-shrink: 0; margin: 0; }
.mp-radio-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; }
.mp-radio-title { font-size: 0.86rem; font-weight: 600; color: rgba(255,255,255,0.92); }
.mp-radio-text { font-size: 0.76rem; color: rgba(255,255,255,0.55); line-height: 1.4; }
.mp-radio-on { border-color: var(--mp-red); background: rgba(var(--mp-red-rgb), 0.1); }

.mp-quote {
    margin-top: 12px; padding: 11px 13px; font-size: 0.84rem; line-height: 1.5;
    color: rgba(255,255,255,0.78); white-space: pre-line; font-style: italic;
    background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.1);
    border-left: 3px solid var(--mp-accent);
    border-radius: 0 8px 8px 0;
}

/* Een knop die de hele breedte pakt, met de toelichting eronder gecentreerd. */
.mp-btn-block { display: flex; width: 100%; align-items: center; justify-content: center; gap: 7px; padding: 11px 16px; }
.mp-free-note { font-size: 0.74rem; color: rgba(255,255,255,0.4); text-align: center; margin-top: 9px; }

/* De waarschuwing over contactgegevens in het reactie-venster. */
.mp-pii-warn {
    display: flex; gap: 9px; align-items: flex-start; margin-top: 8px;
    font-size: 0.78rem; line-height: 1.45; color: rgba(255,255,255,0.72);
    background: rgba(var(--mp-accent-rgb), 0.08); border: 1px solid rgba(var(--mp-accent-rgb), 0.35);
    border-radius: 9px; padding: 9px 11px;
}
.mp-dim-row { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: rgba(255,255,255,0.7); }
.mp-dim-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.mp-dim-fill { height: 100%; background: var(--mud-palette-primary); }

/* Wizard */
.mp-wizard-steps { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.mp-wizard-step {
    display: flex; align-items: center; gap: 7px; font-size: 0.8rem; color: rgba(255,255,255,0.45);
    padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12);
}
.mp-wizard-step.mp-step-active { color: #1a1a1a; background: var(--mud-palette-primary); border-color: transparent; font-weight: 600; }
.mp-wizard-step.mp-step-done { color: var(--mud-palette-primary); border-color: var(--mud-palette-primary); }
/* De rechterkolom van de wizard blijft in beeld terwijl je de velden langsloopt: bovenaan de
   pagina staat 'ie gewoon op z'n plek, en zodra je erlangs scrollt loopt 'ie mee. */
/* Het voorbeeld plakt onder de balk bovenaan, niet onder de bovenkant van het scherm — anders
   schuift de kop eronder door. Past 'ie niet in beeld, dan is de kolom zelf scrollbaar, zodat de
   onderkant bereikbaar blijft. */
.mp-wizard-side {
    position: sticky;
    top: calc(var(--mud-appbar-height, 64px) + 16px);
    max-height: calc(100vh - var(--mud-appbar-height, 64px) - 32px);
    overflow-y: auto;
}

/* Een groep bij elkaar horende velden binnen een wizardstap. De lijn erboven scheidt de
   groepen zonder dat er kaders in kaders ontstaan. */
.mp-fgrp + .mp-fgrp { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.08); }
.mp-fgrp-h { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.mp-fgrp-ic {
    width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
}
.mp-fgrp-t { font-size: 0.88rem; font-weight: 700; color: rgba(255,255,255,0.92); }
.mp-fgrp-s { font-size: 0.76rem; color: rgba(255,255,255,0.35); margin-left: auto; text-align: right; }

/* Eén veld: het opschrift, eventueel een reden, en de invoer. */
.mp-field { margin-bottom: 16px; }
.mp-field:last-child { margin-bottom: 0; }
.mp-field-l { font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.85); margin-bottom: 6px; }
.mp-field-h { font-size: 0.76rem; color: rgba(255,255,255,0.55); margin: -3px 0 8px; max-width: 70ch; }
/* Boven uitlijnen, niet onder: twee velden met een even hoog opschrift laten hun invoer dan op
   dezelfde lijn beginnen, ook als het ene veld een extra regel uitleg heeft. */
.mp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 640px) { .mp-two { grid-template-columns: 1fr; } }

/* Een klein getal met min en plus. */
.mp-cnt { display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; overflow: hidden; }
.mp-cnt button {
    background: rgba(255,255,255,0.05); border: none; color: rgba(255,255,255,0.92);
    width: 34px; height: 36px; font-size: 1rem; cursor: pointer; font-family: inherit;
}
.mp-cnt button:disabled { opacity: 0.35; cursor: not-allowed; }
.mp-cnt input {
    width: 62px; height: 36px; text-align: center; background: none; border: none;
    border-left: 1px solid rgba(255,255,255,0.12); border-right: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.92); font-size: 0.9rem; font-family: inherit;
}
.mp-cnt input:focus { outline: none; }
.mp-cnt-unit { font-size: 0.8rem; color: rgba(255,255,255,0.55); margin-left: 9px; }

/* Een lijst losse regels met een tekentje ervoor. */
.mp-lines { display: flex; flex-direction: column; gap: 7px; }
.mp-line {
    display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 9px; padding: 6px 10px;
}
.mp-line-m {
    flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px; display: flex;
    align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 800;
}
.mp-line-ok { background: rgba(52,211,153,0.15); color: #34D399; border: 1px solid rgba(52,211,153,0.4); }
.mp-line-dot { background: rgba(var(--mp-blue-rgb), 0.15); color: var(--mp-blue); border: 1px solid rgba(var(--mp-blue-rgb), 0.4); }
.mp-line-t {
    flex: 1; min-width: 0; background: none; border: none; color: rgba(255,255,255,0.92);
    font-size: 0.83rem; font-family: inherit;
}
.mp-line-t:focus { outline: none; }
.mp-line-x { background: none; border: none; color: rgba(255,255,255,0.35); cursor: pointer; font-size: 0.9rem; font-family: inherit; }
.mp-line-x:hover { color: var(--mp-red); }
.mp-line-add {
    margin-top: 8px; width: 100%; background: none; border: 1px dashed rgba(255,255,255,0.12);
    border-radius: 8px; color: rgba(255,255,255,0.55); padding: 8px 12px; font-size: 0.79rem;
    cursor: pointer; font-family: inherit;
}
.mp-line-add:hover { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }

/* De voortgangsbalk van de wizard: welke stap, hoe die heet, en wat er hierna komt. */
.mp-wsteps { margin-bottom: 22px; }
.mp-wsteps-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; flex-wrap: wrap; }
.mp-wsteps-n { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mud-palette-primary); }
.mp-wsteps-h { font-size: 0.95rem; font-weight: 600; color: rgba(255,255,255,0.92); }
.mp-wsteps-next { margin-left: auto; font-size: 0.76rem; color: rgba(255,255,255,0.35); }
.mp-wsteps-track { display: flex; gap: 4px; }
.mp-wsteps-seg { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.09); }
.mp-wsteps-seg-on { background: var(--mud-palette-primary); }

/* De kop van een wizardstap: waar deze stap over gaat en waarom het uitmaakt. */
.mp-stephead { display: flex; align-items: flex-start; gap: 12px; }
.mp-stephead-ic {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--mp-accent-rgb), 0.14); border: 1px solid rgba(var(--mp-accent-rgb), 0.35);
}
.mp-stephead-h { font-size: 1.05rem; font-weight: 700; line-height: 1.25; color: rgba(255,255,255,0.94); }
.mp-stephead-sub { font-size: 0.82rem; color: rgba(255,255,255,0.55); margin-top: 3px; max-width: 62ch; }
.mp-stephead-n {
    margin-left: auto; flex-shrink: 0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 4px 10px;
}
.mp-stephead-div { border-top: 1px solid rgba(255,255,255,0.08); margin: 14px 0; }

/* Een vraag binnen een stap, met de reden eronder waarom het antwoord uitmaakt. */
.mp-wq + .mp-wq { margin-top: 20px; }
.mp-wq-h { font-size: 0.92rem; font-weight: 600; color: rgba(255,255,255,0.9); }
.mp-wq-sub { font-size: 0.78rem; color: rgba(255,255,255,0.55); margin: 2px 0 10px; }

/* Een voorbeeld onder een keuze: maakt concreet wat het woord betekent. */
.mp-choice-eg { font-size: 0.74rem; color: rgba(255,255,255,0.35); margin-top: 6px; font-style: italic; }

/* Tarief, eenheid en aantal op één regel: samen zijn ze één vraag. */
.mp-rate { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mp-rate-x { color: rgba(255,255,255,0.35); font-size: 0.95rem; }
.mp-money { display: inline-flex; align-items: stretch; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; overflow: hidden; }
.mp-money-cur {
    display: flex; align-items: center; padding: 0 12px; background: rgba(255,255,255,0.05);
    border-right: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.55); font-size: 0.9rem;
}
.mp-money input {
    border: none; background: none; color: rgba(255,255,255,0.92); font-size: 1.05rem; font-weight: 700;
    padding: 9px 12px; width: 150px; font-family: inherit;
}
.mp-money input:focus { outline: none; }

/* Het afrekenblok: hoe het geld loopt, wat er ingehouden wordt en wanneer. */
.mp-settle { border: 1px solid rgba(var(--mp-green-bright-rgb), 0.35); background: rgba(var(--mp-green-bright-rgb), 0.06); border-radius: 11px; padding: 14px 16px; }
.mp-settle-h { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 0.9rem; color: var(--mp-green-bright); }
.mp-settle-t { font-size: 0.81rem; color: rgba(255,255,255,0.7); margin-top: 7px; line-height: 1.55; }

.mp-sum { margin-top: 12px; border: 1px solid rgba(255,255,255,0.12); border-radius: 11px; overflow: hidden; }
.mp-sum-r { display: flex; align-items: baseline; gap: 10px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mp-sum-r:last-child { border-bottom: none; }
.mp-sum-l { font-size: 0.83rem; display: block; }
.mp-sum-s { font-size: 0.73rem; color: rgba(255,255,255,0.35); display: block; margin-top: 2px; }
.mp-sum-v { margin-left: auto; font-size: 0.9rem; font-weight: 700; white-space: nowrap; }
.mp-sum-pay .mp-sum-v { color: var(--mp-green-bright); }
.mp-sum-tot { background: rgba(var(--mp-accent-rgb), 0.09); }
.mp-sum-tot .mp-sum-v { color: var(--mud-palette-primary); font-size: 1.05rem; }

.mp-steps4 { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.mp-st4 { display: flex; gap: 11px; align-items: flex-start; }
.mp-st4-n {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center;
    justify-content: center; font-size: 0.72rem; font-weight: 800; background: rgba(var(--mp-accent-rgb), 0.16);
    color: var(--mud-palette-primary); border: 1px solid rgba(var(--mp-accent-rgb), 0.4);
}
.mp-st4-t { font-size: 0.81rem; color: rgba(255,255,255,0.72); line-height: 1.5; }

.mp-wizard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
/* Zonder deze ondergrens weigert een kolom smaller te worden dan z'n breedste kind en
   schuift 'ie over de zijkolom heen in plaats van te krimpen. */
.mp-wizard-grid > * { min-width: 0; }
@media (max-width: 900px) { .mp-wizard-grid { grid-template-columns: 1fr; } }
.mp-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mp-choice {
    display: block; width: 100%; box-sizing: border-box;
    background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
    padding: 18px; cursor: pointer; text-align: left; font-family: inherit; color: rgba(255,255,255,0.85);
}
.mp-choice.mp-choice-active { border-color: var(--mud-palette-primary); background: rgba(255,255,255,0.06); }
.mp-choice:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.mp-choice-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 5px; }
.mp-choice-text { font-size: 0.78rem; color: rgba(255,255,255,0.55); }
.mp-fee-box {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
    padding: 14px; display: flex; flex-direction: column; gap: 7px; font-size: 0.85rem; color: rgba(255,255,255,0.75);
}
.mp-fee-row { display: flex; justify-content: space-between; }
.mp-fee-total { font-weight: 700; color: rgba(255,255,255,0.92); border-top: 1px solid rgba(255,255,255,0.1); padding-top: 7px; }
.mp-hint { font-size: 0.76rem; color: rgba(255,255,255,0.45); margin-top: 4px; }

/* Bijlagen (listing-foto's/documenten, leverings- en geschil-bewijs) */
/* Promotie (J01): banner-slotbalk */
.mp-slotbar { display: flex; gap: 4px; margin-top: 10px; }
.mp-slot { flex: 1; height: 10px; border-radius: 3px; background: rgba(255,255,255,0.1); }
.mp-slot-sold { background: var(--mud-palette-primary); }
/* Je eigen lopende reservering: ook bezet, maar met een rand zodat 'ie opvalt tussen de rest. */
.mp-slot-mine { background: var(--mud-palette-primary); box-shadow: 0 0 0 2px rgba(255,255,255,0.6); }
/* De plek die je bij het reserveren zou krijgen: nog vrij, en van jou als je doorklikt. */
.mp-slot-next { background: var(--mp-green-bright); box-shadow: 0 0 0 1px rgba(var(--mp-green-bright-rgb), 0.45); }

/* Wizard controleer-stap (H04): één omkaderd blok per stap, met een eigen kop en bewerkknop.
   De scheidingslijnen tussen de regels maken van een lange opsomming een leesbare lijst. */
.mp-grp { border: 1px solid rgba(255,255,255,0.12); border-radius: 11px; margin-bottom: 12px; overflow: hidden; }
.mp-grp-h {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px;
    background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 0.83rem; font-weight: 600; color: rgba(255,255,255,0.9);
}
.mp-grp-ic {
    width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--mp-accent-rgb), 0.14); border: 1px solid rgba(var(--mp-accent-rgb), 0.3);
}
.mp-grp-b { padding: 6px 14px 12px; }
.mp-edit {
    margin-left: auto; background: none; border: 1px solid rgba(255,255,255,0.12); border-radius: 7px;
    cursor: pointer; font-family: inherit; font-size: 0.74rem; color: rgba(255,255,255,0.55); padding: 4px 10px;
}
.mp-edit:hover { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }
.mp-srow { display: flex; gap: 12px; padding: 7px 0; font-size: 0.83rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.mp-srow:last-child { border-bottom: none; }
.mp-srow-l { color: rgba(255,255,255,0.35); width: 180px; flex-shrink: 0; }
.mp-srow-v { color: rgba(255,255,255,0.88); font-weight: 600; flex: 1; min-width: 0; }
.mp-srow-v.mp-srow-ok { color: var(--mp-green-bright); }
.mp-srow-v.mp-srow-empty { color: rgba(255,255,255,0.35); font-weight: 400; font-style: italic; }
.mp-srow-list { margin: 0; padding-left: 16px; font-weight: 400; }
.mp-srow-list li { margin-bottom: 3px; }
.mp-terms {
    display: flex; gap: 11px; align-items: flex-start; cursor: pointer; margin-top: 6px;
    border: 1px solid rgba(var(--mp-accent-rgb), 0.4); background: rgba(var(--mp-accent-rgb), 0.07); border-radius: 11px;
    padding: 13px 15px; font-size: 0.82rem; color: rgba(255,255,255,0.78); line-height: 1.55;
}
.mp-terms .mp-linklike { font-size: inherit; }
.mp-terms input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--mud-palette-primary); flex-shrink: 0; }

/* Onboarding (A01): hero, sectie-koppen en genummerde spelregels */
.mp-hero {
    display: flex; gap: 16px; align-items: flex-start;
    background: linear-gradient(135deg, rgba(var(--mp-accent-rgb), 0.12), rgba(255,255,255,0.03));
    border: 1px solid rgba(var(--mp-accent-rgb), 0.3); border-radius: 16px; padding: 24px 26px; margin-bottom: 20px;
}
.mp-hero-ic {
    width: 52px; height: 52px; border-radius: 13px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 25px;
    background: rgba(var(--mp-accent-rgb), 0.14); border: 1px solid rgba(var(--mp-accent-rgb), 0.4);
}
.mp-hero h2 { margin: 0 0 6px; font-size: 1.2rem; font-weight: 700; color: rgba(255,255,255,0.94); }
.mp-hero p { margin: 0; font-size: 0.86rem; color: rgba(255,255,255,0.6); max-width: 560px; }
.mp-sect-h {
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(255,255,255,0.35); margin: 24px 4px 12px;
}

/* Elke spelregel is een eigen kaart, zodat 'ie op zichzelf leesbaar blijft. De
   nul-tolerantie-regel voert een rode rand: die ene regel heeft gevolgen voor je account. */
.mp-rules { display: flex; flex-direction: column; gap: 12px; }
.mp-rule {
    display: flex; gap: 15px; align-items: flex-start;
    background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 13px; padding: 16px 18px;
}
.mp-rule-num {
    width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    color: var(--mud-palette-primary); font-weight: 800; font-size: 0.9rem;
    display: flex; align-items: center; justify-content: center;
}
.mp-rule-danger { border-color: rgba(var(--mp-red-rgb), 0.4); }
.mp-rule-danger .mp-rule-num { color: var(--mp-red); border-color: rgba(var(--mp-red-rgb), 0.4); background: rgba(var(--mp-red-rgb), 0.13); }
.mp-rule-t { font-weight: 700; font-size: 0.94rem; color: rgba(255,255,255,0.9); display: flex; align-items: center; gap: 9px; }
.mp-rule-d { font-size: 0.82rem; color: rgba(255,255,255,0.55); margin-top: 4px; }

/* Koppel-blok (A01/A02): icoon, titel en status op één regel; de uitleg en de knop
   lijnen uit onder de titel in plaats van onder het icoon. */
.mp-payout-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.mp-payout-ic {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
    background: rgba(var(--mp-blue-rgb), 0.13); border: 1px solid rgba(var(--mp-blue-rgb), 0.35);
}
.mp-payout-title { font-size: 0.98rem; font-weight: 700; color: rgba(255,255,255,0.92); }
.mp-payout-body { margin-left: 50px; }

/* Bevestigingsregel onder een geslaagde koppeling: het vinkje en de bedrijfsnaam die de
   betaalpartner teruggaf, zodat zichtbaar is wélk account er hangt. */
.mp-acct {
    display: flex; align-items: flex-start; gap: 11px; margin-top: 14px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 11px; padding: 13px 15px;
}
.mp-acct-ic { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.mp-acct-name { font-size: 0.86rem; font-weight: 600; color: rgba(255,255,255,0.9); }
.mp-acct-note { font-size: 0.79rem; color: rgba(255,255,255,0.55); margin-top: 2px; }

/* Koppel-dialog (A03): geruststellingsblok, doorstuur-notitie en het blok dat vertelt
   welke stand je account na terugkomst kan hebben. */
.mp-safebox {
    display: flex; align-items: flex-start; gap: 11px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 11px; padding: 13px 15px; margin-bottom: 16px;
}
.mp-safebox-ic { font-size: 16px; color: var(--mp-green-bright); flex-shrink: 0; margin-top: 1px; }
.mp-safebox-text { font-size: 0.82rem; color: rgba(255,255,255,0.55); }
.mp-redirect { font-size: 0.78rem; color: rgba(255,255,255,0.35); text-align: center; margin: 12px 0 4px; }
.mp-afterbox {
    background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.16);
    border-radius: 11px; padding: 14px 15px; margin-top: 18px;
}
.mp-afterbox-h {
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: rgba(255,255,255,0.35); margin-bottom: 9px;
}
.mp-afterbox-intro { font-size: 0.8rem; color: rgba(255,255,255,0.55); margin-bottom: 10px; }
.mp-afterbox-row { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.mp-afterbox-row:last-child { margin-bottom: 0; }
.mp-afterbox-row > span:last-child { font-size: 0.79rem; color: rgba(255,255,255,0.55); }

/* Akkoord-vinkjes: het echte selectievakje blijft bedienbaar met toetsenbord en
   schermlezer, het zichtbare vierkant ernaast volgt de aangevinkte staat. */
.mp-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 8px 0; }
.mp-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.mp-check-box {
    width: 20px; height: 20px; border-radius: 6px; border: 2px solid rgba(255,255,255,0.35);
    flex-shrink: 0; margin-top: 1px; position: relative;
}
.mp-check input:checked + .mp-check-box { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary); }
.mp-check input:checked + .mp-check-box::after {
    content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 900; color: #1a1a1a;
}
.mp-check input:focus-visible + .mp-check-box { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.mp-check-text { font-size: 0.86rem; color: rgba(255,255,255,0.87); }

/* Afsluitende hoofdknop van een flow: volle breedte met de toelichting eronder. */
.mp-btn-big { width: 100%; padding: 13px 22px; font-size: 0.9rem; }
.mp-cta-hint { font-size: 0.78rem; color: rgba(255,255,255,0.55); margin-top: 10px; text-align: center; }

/* Deal (F01): twee-koloms indeling, escrow-schild en onthuld contact */
.mp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .mp-cols { grid-template-columns: 1fr; } }
.mp-escrow-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px; }
.mp-escrow-title { font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,0.92); }
.mp-escrow-sub { font-size: 0.76rem; color: rgba(255,255,255,0.5); }
/* Het aangehouden bedrag in het escrow-paneel: gecentreerd en wit, met daaronder het blauwe
   vastgehouden-chipje. Blauw is de kleur van "staat veilig vast"; het accent blijft voor wat
   er te ontvangen valt. */
.mp-escrow-top { text-align: center; padding: 2px 0 6px; }
.mp-escrow-amount { font-size: 2rem; font-weight: 800; color: rgba(255,255,255,0.94); line-height: 1.15; }
.mp-hold-badge {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.7rem; font-weight: 700;
    color: var(--mp-blue); background: rgba(var(--mp-blue-rgb), 0.13); border: 1px solid rgba(var(--mp-blue-rgb), 0.4);
    border-radius: 20px; padding: 4px 12px;
}
/* De slotregel van de verdeling: wat de ontvangende partij overhoudt, in het accent. */
.mp-fee-receive { color: var(--mud-palette-primary); font-weight: 800; }
.mp-infoline {
    display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 0.76rem;
    color: rgba(255,255,255,0.5); line-height: 1.45;
}
/* Uitleg die bij een bevestiging hoort: een blauw kader, zoals in het ontwerp. Een grijze regel
   leest als een voetnoot, en dit is de zin die het besluit toelicht. */
/* Waar een venster over gaat: leesbaar maar ondergeschikt aan de handeling in de kop erboven.
   Op volle titelgrootte duwt een lange klusnaam de rest van de kop uit beeld. */
.mp-dialog-subject {
    font-size: 0.92rem; font-weight: 600; color: rgba(255,255,255,0.9); line-height: 1.35;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.mp-infobox {
    display: flex; gap: 10px; align-items: flex-start; margin-top: 12px;
    font-size: 0.79rem; line-height: 1.5; color: rgba(255,255,255,0.72);
    background: rgba(var(--mp-blue-rgb), 0.08); border: 1px solid rgba(var(--mp-blue-rgb), 0.35);
    border-radius: 10px; padding: 11px 13px;
}
.mp-infobox b { color: rgba(255,255,255,0.92); }

.mp-secure-line { margin-top: 12px; text-align: center; font-size: 0.7rem; color: rgba(255,255,255,0.35); }
.mp-contact-grid { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; font-size: 0.85rem; margin-top: 10px; }
.mp-contact-grid .mp-contact-link { color: var(--mud-palette-primary); text-decoration: none; }
.mp-contact-link:hover { text-decoration: underline; }
.mp-contact-l { color: rgba(255,255,255,0.4); }
.mp-contact-grid .mp-contact-v { color: rgba(255,255,255,0.9); font-weight: 600; word-break: break-word; }
.mp-reveal-badge {
    display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700;
    color: var(--mp-green); background: rgba(var(--mp-green-rgb), 0.12); border: 1px solid rgba(var(--mp-green-rgb), 0.4);
    border-radius: 20px; padding: 3px 10px;
}

/* Voorwaarden/meeneemlijst met vinkjes (C01) */
.mp-reqlist { margin: 4px 0 0; padding: 0; list-style: none; }
.mp-reqlist li { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; line-height: 1.4; }
.mp-reqlist-ck { color: var(--mp-green-bright); flex-shrink: 0; font-weight: 700; }

/* Mockup-preview voor het host-team: de balk boven een voorbeeldscherm en de bladwijzer-tabel. */
.mp-preview-bar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 9px 16px; margin-bottom: 8px;
    background: #0d0d0d; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mp-preview-key {
    font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: #1a1a1a; background: var(--mud-palette-primary); border-radius: 6px; padding: 3px 9px;
}
.mp-preview-title { font-size: 0.85rem; color: rgba(255,255,255,0.82); }
.mp-preview-file { font-size: 0.72rem; color: rgba(255,255,255,0.35); }
.mp-preview-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.mp-preview-table th {
    text-align: left; padding: 6px 10px; font-size: 0.7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.4);
}
.mp-preview-table td { padding: 7px 10px; border-top: 1px solid rgba(255,255,255,0.06); }
.mp-preview-table tbody tr { cursor: pointer; }
.mp-preview-table tbody tr:hover { background: rgba(255,255,255,0.04); }
.mp-preview-table code { color: var(--mud-palette-primary); }

/* Bestanden kiezen in de wizard: het sleepvlak, de gekozen bestanden en de melding bij een
   bestand dat niet door de grenzen kwam. */
.mp-drop {
    border: 1px dashed rgba(255,255,255,0.18); border-radius: 10px; padding: 16px;
    text-align: center; font-size: 0.82rem; color: rgba(255,255,255,0.55);
    cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.mp-drop:hover, .mp-drop-over {
    border-color: var(--mud-palette-primary); background: rgba(var(--mp-accent-rgb), 0.07);
    color: rgba(255,255,255,0.82);
}
.mp-drop-rejected { color: var(--mp-red); margin-top: 6px; }
.mp-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.mp-thumb { width: 88px; }
.mp-thumb-img {
    position: relative; height: 62px; border-radius: 9px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04);
    display: flex; align-items: center; justify-content: center;
}
.mp-thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-thumb-doc { font-size: 1.4rem; }
.mp-thumb-x {
    position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 6px;
    border: none; cursor: pointer; font-size: 0.7rem; line-height: 1;
    background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.9);
}
.mp-thumb-x:hover { background: rgba(var(--mp-red-rgb), 0.85); }
.mp-thumb-nm {
    font-size: 0.66rem; color: rgba(255,255,255,0.55); margin-top: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-thumb-sz { font-size: 0.62rem; color: rgba(255,255,255,0.35); }
.mp-attach-failed { border-color: rgba(var(--mp-red-rgb), 0.4); background: rgba(var(--mp-red-rgb), 0.07); }

.mp-attach-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.mp-attach-thumb {
    position: relative; width: 110px; height: 110px; border-radius: 10px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04);
}
.mp-attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-attach-remove {
    position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: none;
    border-radius: 50%; background: rgba(0,0,0,0.6); color: rgba(255,255,255,0.85);
    font-size: 0.7rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mp-attach-remove:hover { background: rgba(var(--mp-red-rgb), 0.8); }
.mp-attach-doc {
    display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
}
.mp-attach-doc-icon { font-size: 1rem; }
.mp-attach-name { font-size: 0.82rem; color: rgba(255,255,255,0.82); word-break: break-all; }
a.mp-attach-name:hover { color: var(--mud-palette-primary); }

/* Mijn plaatsingen */
.mp-row {
    background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
    padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px;
}
.mp-row-main { flex: 1 1 260px; min-width: 0; }
.mp-row-title { font-weight: 600; font-size: 0.92rem; color: rgba(255,255,255,0.9); }
.mp-row-meta { font-size: 0.75rem; color: rgba(255,255,255,0.5); margin-top: 2px; }
.mp-row-counters { display: flex; gap: 12px; font-size: 0.78rem; color: rgba(255,255,255,0.65); }
/* Altijd een eigen onderste rij: met weinig knoppen zouden ze anders naast de
   status-chip blijven hangen en verspringt de kaartopbouw per regel. */
.mp-row-actions { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }

/* Agenda-weekbalk in de plaatsings-wizard (alleen-lezen; stipjes = tag-kleuren, tint = vulgraad) */
.mp-agendabar {
    margin-top: 14px; padding: 12px 14px; border-radius: 12px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.09);
}
.mp-agendabar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mp-agendabar-title { font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,0.75); }
.mp-agendabar-nav { display: flex; align-items: center; gap: 6px; }
.mp-agendabar-range { font-size: 0.75rem; color: rgba(255,255,255,0.55); min-width: 110px; text-align: center; }
.mp-weekbar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.mp-weekday {
    position: relative; text-align: center; padding: 8px 4px 7px; border-radius: 10px; cursor: default;
    border: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(to top, rgba(255,255,255,calc(0.03 + var(--fill, 0) * 0.10)) calc(var(--fill, 0) * 100%), rgba(255,255,255,0.02) calc(var(--fill, 0) * 100%));
}
.mp-weekday-free { border-color: rgba(var(--mp-green-bright-rgb), 0.35); background: rgba(var(--mp-green-bright-rgb), 0.06); }
.mp-weekday-name { font-size: 0.7rem; font-weight: 700; color: rgba(255,255,255,0.6); text-transform: capitalize; }
.mp-weekday-dots { display: flex; justify-content: center; align-items: center; gap: 3px; min-height: 12px; margin-top: 4px; }
.mp-weekday-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.mp-weekday-more { font-size: 0.6rem; color: rgba(255,255,255,0.45); }
.mp-weekday-label { font-size: 0.62rem; margin-top: 3px; color: rgba(255,255,255,0.5); white-space: nowrap; }
.mp-weekday-free .mp-weekday-label { color: var(--mp-green-bright); font-weight: 700; }
.mp-weekday-pop {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    padding-top: 6px; z-index: 40;
}

/* Een knop die als tekstlink leest: gebruikt waar een eigen actie binnen een aanklikbare rij
   staat, zodat de rij en de actie elk hun eigen bestemming houden zonder een tweede knop-vorm
   te introduceren. */
.mp-linklike {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--mud-palette-primary); font-size: 0.76rem; font-weight: 600; font-family: inherit;
}
.mp-linklike:hover { text-decoration: underline; }

/* Voorpagina-banner-carrousel op de hub (gesponsorde plaatsingen). Eén omlijst blok: de rand,
   de markering, de navigatie en de leegloop-balk gelden voor het geheel, en de twee banners
   erbinnen delen die omlijsting in plaats van elk een eigen kaartrand te voeren. Zo staat de
   duurste plek als één blok naast het resultatenraster en niet als twee losse kaarten die op
   resultaten lijken. */
.mp-spotcar {
    position: relative; overflow: hidden; border-radius: 14px;
    border: 1px solid rgba(var(--mp-accent-rgb), 0.55);
    background: linear-gradient(160deg, rgba(var(--mp-accent-rgb), 0.13), rgba(var(--mp-accent-rgb), 0.02) 60%, transparent), rgba(255,255,255,0.025);
    box-shadow: 0 0 0 1px rgba(var(--mp-accent-rgb), 0.18), 0 8px 24px rgba(var(--mp-accent-rgb), 0.08);
}
.mp-spotstage { position: relative; }
/* De scheiding draagt de ruimte onder het blok: gestippeld en nauwelijks zichtbaar, genoeg om
   het gekochte deel van de resultaten te scheiden zonder zelf op te vallen. */
.mp-spotcar-split { border-top: 1px dashed rgba(255,255,255,0.1); margin: 18px 0 16px; }
.mp-spotstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 14px; padding: 15px 16px 13px; }
@media (max-width: 760px) { .mp-spotstrip { grid-template-columns: 1fr; } }
.mp-spotstrip-nav { padding-bottom: 26px; }
/* Het vertrekkende paar ligt tijdens de overvloeiing over het nieuwe heen en vangt geen klikken. */
.mp-spotstrip-out { position: absolute; inset: 0; pointer-events: none; animation: mp-spot-out 380ms ease-in forwards; }
.mp-spotstrip-in > * { animation: mp-spot-in 480ms cubic-bezier(0.2,0.7,0.3,1) backwards; }
.mp-spotstrip-in > *:nth-child(2) { animation-delay: 90ms; }
@keyframes mp-spot-in {
    from { opacity: 0; transform: translateY(12px) scale(0.985); filter: blur(7px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes mp-spot-out {
    from { opacity: 1; transform: none; filter: blur(0); }
    to { opacity: 0; transform: translateY(-9px) scale(0.99); filter: blur(7px); }
}
@media (prefers-reduced-motion: reduce) {
    .mp-spotstrip-out { animation: none; opacity: 0; }
    .mp-spotstrip-in > * { animation: none; }
}
/* De banner zelf: geen eigen rand binnen de carrousel, alleen een scheidingslijn tussen de twee. */
.mp-spot { position: relative; display: flex; align-items: flex-start; gap: 13px; cursor: pointer; }
.mp-spot + .mp-spot { border-left: 1px solid rgba(255,255,255,0.12); padding-left: 14px; }
@media (max-width: 760px) { .mp-spot + .mp-spot { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 13px; } }
/* Los buiten de carrousel (het koop-voorbeeld op de promotiepagina) draagt 'ie de rand wel zelf. */
.mp-spot-framed {
    padding: 14px 16px; border: 1px solid rgba(var(--mp-accent-rgb), 0.55); border-radius: 12px;
    background: linear-gradient(120deg, rgba(var(--mp-accent-rgb), 0.16), rgba(var(--mp-accent-rgb), 0.03) 55%, transparent), rgba(255,255,255,0.03);
    box-shadow: 0 0 0 1px rgba(var(--mp-accent-rgb), 0.18), 0 8px 24px rgba(var(--mp-accent-rgb), 0.08);
}
.mp-spot-mark {
    position: absolute; top: 11px; right: 14px; z-index: 2; font-size: 0.6rem; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase; color: #1a1a1a;
    background: var(--mud-palette-primary); border-radius: 20px; padding: 3px 10px;
    box-shadow: 0 2px 8px rgba(var(--mp-accent-rgb), 0.35);
}
.mp-spot-framed .mp-spot-mark { top: -9px; }
.mp-spot-body { min-width: 0; flex: 1; }
.mp-spot-kind { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.mp-spot-title { font-size: 1.06rem; font-weight: 700; color: rgba(255,255,255,0.94); margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-spot-who { font-size: 0.76rem; color: rgba(255,255,255,0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-spot-sep { color: rgba(255,255,255,0.3); margin: 0 3px; }
.mp-spot-reviews { color: rgba(255,255,255,0.4); margin-left: 3px; }
.mp-spot-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mp-spot-fact {
    font-size: 0.71rem; color: rgba(255,255,255,0.55); padding: 2px 8px; border-radius: 7px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
}
.mp-spot-fact-price { color: var(--mud-palette-primary); background: rgba(var(--mp-accent-rgb), 0.09); border-color: rgba(var(--mp-accent-rgb), 0.35); }
.mp-spot-cta { flex-shrink: 0; align-self: center; }

/* De navigatie zit rechtsonder in het blok zelf en de leegloop-balk is de onderrand: samen
   gaan ze over de stand van nu, en geen van beide kost nog een eigen regel onder het blok. */
.mp-spotcar-nav { position: absolute; right: 14px; bottom: 9px; z-index: 2; display: flex; align-items: center; gap: 8px; }
.mp-spotcar-arrow {
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.15); border-radius: 50%;
    width: 26px; height: 26px; cursor: pointer; font-size: 0.85rem; line-height: 1;
}
.mp-spotcar-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.18); cursor: pointer; border: none; padding: 0; }
.mp-spotcar-dot-on { background: var(--mud-palette-primary); }

/* De leegloop-balk sluit de onderrand van het blok en draagt daarom de accentkleur: 'ie hoort
   bij de rand eromheen en niet bij de neutrale opmaak van de resultaten. Volle kleur zodra de
   kijker op het blok staat, want dan staat 'ie stil en is de stand af te lezen. De 8s hieronder
   is de wissel-klok van de carrousel. */
.mp-spotbar { height: 3px; background: rgba(255,255,255,0.07); overflow: hidden; }
.mp-spotbar-fill { height: 100%; background: rgba(var(--mp-accent-rgb), 0.7); animation: mp-spot-drain 8s linear forwards; }
.mp-spotcar:hover .mp-spotbar-fill { background: var(--mud-palette-primary); }
.mp-spotbar-fill.mp-spotbar-paused { animation-play-state: paused; }
@keyframes mp-spot-drain { from { width: 100%; } to { width: 0; } }

/* Bevestiging vlak na het versturen van een reactie (C03). Groen omdat er niets meer hoeft:
   het is een afgeronde stap, geen waarschuwing. */
/* Werkt zowel als los paneel als binnen een kaart: de eigen rand en binnenruimte staan hier,
   zodat het blok niet tegen zijn eigen randen aan loopt zonder mp-detail-panel eromheen. */
.mp-sent-panel {
    text-align: center; border: 1px solid rgba(var(--mp-green-rgb), 0.4); border-radius: 12px;
    background: rgba(var(--mp-green-rgb), 0.07); padding: 18px 20px;
}
.mp-sent-ic { font-size: 30px; line-height: 1; margin-bottom: 8px; }
.mp-sent-h { font-size: 1rem; font-weight: 700; color: rgba(255,255,255,0.92); margin-bottom: 6px; }
.mp-sent-p { font-size: 0.84rem; color: rgba(255,255,255,0.6); max-width: 46ch; margin: 0 auto; line-height: 1.5; }

/* Keuzekaartje met uitleg (K01): een reden kiezen zonder te raden wat 'ie dekt. */

/* Dagkeuze van de voorpagina-banner (J07): een week per keer, per dag de prijs en de reden. */
/* De pijlen flankeren de dagen en staan even hoog als de kaartjes: bladeren hoort bij de
   strook, niet erboven. */
.mp-daystrip { display: flex; align-items: stretch; gap: 10px; }
.mp-daystrip .mp-days { flex: 1; min-width: 0; }
.mp-daystep {
    flex-shrink: 0; width: 34px; border-radius: 10px; cursor: pointer; font-family: inherit;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.7); font-size: 17px; line-height: 1;
    transition: border-color 0.12s ease, color 0.12s ease;
}
.mp-daystep:hover:not(:disabled) { border-color: rgba(255,255,255,0.28); color: rgba(255,255,255,0.92); }
.mp-daystep:disabled { opacity: 0.3; cursor: default; }
.mp-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.mp-day {
    display: flex; flex-direction: column; gap: 4px; text-align: left; font-family: inherit;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px; padding: 12px 13px; cursor: pointer; color: rgba(255,255,255,0.92);
    transition: border-color 0.12s ease, background 0.12s ease;
}
.mp-day:hover { border-color: rgba(255,255,255,0.26); }
.mp-day-on { border-color: var(--mud-palette-primary); background: rgba(var(--mp-accent-rgb), 0.12); }
.mp-day-on .mp-day-p { color: var(--mud-palette-primary); }
.mp-day-off { opacity: 0.45; cursor: not-allowed; }
.mp-day-off .mp-day-p { color: rgba(255,255,255,0.35); }
.mp-day-d { font-size: 0.72rem; color: rgba(255,255,255,0.55); font-weight: 600; }
.mp-day-p { font-size: 1.02rem; font-weight: 700; }
.mp-day-f { font-size: 0.66rem; color: rgba(255,255,255,0.35); }

/* Reacties beheren (D01): de reactiekaarten in twee kolommen naast elkaar. */
.mp-resp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .mp-resp-grid { grid-template-columns: 1fr; } }

/* De handdruk-schermen (D04-D08): stepper bovenaan, daarna twee panelen naast elkaar. */
.mp-hs-cols { display: grid; grid-template-columns: 1fr 0.95fr; gap: 20px; align-items: start; margin-top: 16px; }
@media (max-width: 960px) { .mp-hs-cols { grid-template-columns: 1fr; } }

/* Paneel met een eigen kop: icoon, soort-opschrift en status boven een lijn, de inhoud in
   het lichaam eronder. */
.mp-panel { background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.mp-panel-head { padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 12px; }
.mp-panel-title { font-size: 1rem; font-weight: 700; line-height: 1.3; color: rgba(255,255,255,0.94); }
.mp-panel-body { padding: 18px; }

/* Het groene akkoord-blok (D07/D08): jullie zijn het eens. */
.mp-agree {
    background: linear-gradient(180deg, rgba(var(--mp-green-rgb), 0.12), transparent);
    border: 1px solid rgba(var(--mp-green-rgb), 0.4); border-radius: 12px; padding: 16px;
    text-align: center; margin-bottom: 14px;
}
.mp-agree-ic {
    width: 46px; height: 46px; border-radius: 50%; background: rgba(var(--mp-green-rgb), 0.16);
    border: 1px solid rgba(var(--mp-green-rgb), 0.4); display: flex; align-items: center;
    justify-content: center; font-size: 22px; margin: 0 auto 10px;
}
.mp-agree-t { font-size: 0.98rem; font-weight: 700; color: rgba(255,255,255,0.92); margin-bottom: 5px; }
.mp-agree-d { font-size: 0.8rem; color: rgba(255,255,255,0.55); line-height: 1.5; }

/* Wachtblok binnen het verbind-paneel (D08): de betaling is aan de tegenpartij. */
.mp-waitbox {
    background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px; padding: 15px; text-align: center; margin-bottom: 14px;
}
.mp-waitbox-ic {
    width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center;
    justify-content: center; font-size: 19px; margin: 0 auto 9px;
}
.mp-waitbox-t { font-size: 0.9rem; font-weight: 700; color: rgba(255,255,255,0.55); }
.mp-waitbox-d { font-size: 0.78rem; color: rgba(255,255,255,0.35); margin-top: 4px; line-height: 1.5; }

/* De geldverdeling van de deal in rijen; de slotregel draagt het bedrag dat er voor de
   kijker toe doet. */
.mp-feetable { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 13px 14px; margin-bottom: 14px; }
.mp-feetable-r { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.8rem; color: rgba(255,255,255,0.55); margin-bottom: 7px; }
.mp-feetable-r .mp-feetable-v { color: rgba(255,255,255,0.9); font-weight: 600; white-space: nowrap; }
.mp-feetable-tot { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 9px; margin-top: 2px; margin-bottom: 0; font-size: 0.88rem; color: rgba(255,255,255,0.75); }
.mp-feetable-tot .mp-feetable-v { color: var(--mud-palette-primary); font-weight: 800; }
.mp-feetable-tot.mp-feetable-receive .mp-feetable-v { color: var(--mp-green); }

/* De strook tussen de stappen (F04/F05): het vrijgave-moment is geen eigen stap. */
.mp-between {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: rgba(var(--mp-orange-rgb), 0.10); border: 1px solid rgba(var(--mp-orange-rgb), 0.4);
    border-radius: 10px; padding: 10px 14px; margin: 12px 0 14px;
    font-size: 0.84rem; font-weight: 600; color: rgba(255,255,255,0.88);
}
.mp-between-sub { margin-left: auto; font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.4); }

/* Toestand-blok in het linkerpaneel van de deal: icoon, kop en uitleg gecentreerd. */
.mp-statehero {
    text-align: center; background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 16px;
}
.mp-statehero-ic { font-size: 26px; line-height: 1; margin-bottom: 8px; }
.mp-statehero-t { font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,0.92); margin-bottom: 5px; }
.mp-statehero-d { font-size: 0.8rem; color: rgba(255,255,255,0.55); line-height: 1.5; }

/* De afgerond-variant van de held (F07/F13): groene gloed en het icoon in een cirkel. */
.mp-statehero-done {
    background: linear-gradient(180deg, rgba(var(--mp-green-rgb), 0.14), transparent);
    border-color: rgba(var(--mp-green-rgb), 0.4); padding: 20px 16px;
}
.mp-statehero-done .mp-statehero-ic {
    width: 52px; height: 52px; border-radius: 50%; background: rgba(var(--mp-green-rgb), 0.18);
    border: 1px solid rgba(var(--mp-green-rgb), 0.45); display: flex; align-items: center;
    justify-content: center; font-size: 25px; margin: 0 auto 11px;
}
.mp-statehero-done .mp-statehero-t { font-size: 1.05rem; font-weight: 800; }

/* De alarm-variant van de held (F15): rood, met het icoon in een cirkel. */
.mp-statehero-alert {
    background: linear-gradient(180deg, rgba(var(--mp-red-rgb), 0.13), transparent);
    border-color: rgba(var(--mp-red-rgb), 0.4); padding: 18px 16px;
}
.mp-statehero-alert .mp-statehero-ic {
    width: 48px; height: 48px; border-radius: 50%; background: rgba(var(--mp-red-rgb), 0.16);
    border: 1px solid rgba(var(--mp-red-rgb), 0.45); display: flex; align-items: center;
    justify-content: center; font-size: 23px; margin: 0 auto 10px;
}
.mp-statehero-alert .mp-statehero-t { font-size: 1.02rem; font-weight: 800; }

/* Het vrijgaveverzoek als centraal blok in het verzoek-paneel (F05). */
.mp-request {
    background: linear-gradient(180deg, rgba(var(--mp-orange-rgb), 0.12), transparent);
    border: 1px solid rgba(var(--mp-orange-rgb), 0.4); border-radius: 12px; padding: 16px;
    text-align: center;
}
.mp-request-ic {
    width: 46px; height: 46px; border-radius: 50%; background: rgba(var(--mp-orange-rgb), 0.16);
    border: 1px solid rgba(var(--mp-orange-rgb), 0.4); display: flex; align-items: center;
    justify-content: center; font-size: 22px; margin: 0 auto 10px;
}
.mp-request-t { font-size: 0.98rem; font-weight: 700; color: rgba(255,255,255,0.92); margin-bottom: 5px; }
.mp-request-d { font-size: 0.8rem; color: rgba(255,255,255,0.6); line-height: 1.5; }

/* De oranje tegenhanger van de blauwe infobox: een echte waarschuwing (F05). */
.mp-warnbox {
    display: flex; gap: 10px; align-items: flex-start; margin-top: 12px;
    font-size: 0.79rem; line-height: 1.5; color: rgba(255,255,255,0.72);
    background: rgba(var(--mp-orange-rgb), 0.09); border: 1px solid rgba(var(--mp-orange-rgb), 0.35);
    border-radius: 10px; padding: 11px 13px;
}
.mp-warnbox b { color: var(--mp-orange); }

/* De zijpad-strook onder de stappen (F08/F15): vanaf welke stap het aftakt, waar het nu
   staat, en waar het op uit kan komen. */
.mp-branch {
    display: flex; align-items: stretch; gap: 10px; margin: 0 0 14px; padding: 13px 15px;
    background: rgba(255,255,255,0.03); border: 1px dashed rgba(var(--mp-red-rgb), 0.45);
    border-radius: 11px;
}
.mp-branch-from {
    display: flex; align-items: center; font-size: 0.68rem; color: rgba(255,255,255,0.4);
    font-weight: 600; flex-shrink: 0; max-width: 76px;
}
.mp-branch-conn { display: flex; align-items: center; color: rgba(255,255,255,0.4); font-size: 0.9rem; flex-shrink: 0; }
.mp-branch-node {
    flex: 1; border-radius: 9px; padding: 9px 12px; font-size: 0.74rem; font-weight: 700;
    text-align: center; display: flex; flex-direction: column; justify-content: center;
    gap: 3px; color: var(--mp-red); border: 1px solid rgba(var(--mp-red-rgb), 0.55);
    background: rgba(var(--mp-red-rgb), 0.13);
}
.mp-branch-nn {
    font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 800;
    opacity: 0.8;
}
/* De afgesloten eindstaat (F11): geen rood alarm, alleen een neutrale markering. */
.mp-branch-end { border-color: rgba(255,255,255,0.16); }
.mp-branch-node-end {
    color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.05);
}
.mp-branch-outs { flex: 1.4; display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.mp-branch-out {
    font-size: 0.72rem; color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 7px 11px;
    display: flex; align-items: center; gap: 8px;
}
.mp-branch-ar { flex-shrink: 0; }
.mp-branch-desc { flex: 1.4; display: flex; align-items: center; font-size: 0.74rem; color: rgba(255,255,255,0.6); line-height: 1.5; }

/* Het annuleer-voorstel van de tegenpartij in het antwoord-venster (F14). */
.mp-proposal {
    background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px; padding: 15px; margin-bottom: 12px;
}
.mp-proposal-head { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.mp-proposal-ic {
    width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center;
    justify-content: center; font-size: 16px; background: rgba(var(--mp-orange-rgb), 0.13);
    border: 1px solid rgba(var(--mp-orange-rgb), 0.4); flex-shrink: 0;
}
.mp-proposal-t { display: block; font-size: 0.86rem; font-weight: 700; color: rgba(255,255,255,0.9); }
.mp-proposal-m { display: block; font-size: 0.72rem; color: rgba(255,255,255,0.4); }
.mp-proposal-reason {
    font-size: 0.82rem; color: rgba(255,255,255,0.65); font-style: italic; line-height: 1.5;
    background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.1);
    border-left: 3px solid var(--mp-orange); border-radius: 8px; padding: 11px 13px;
}

/* De dichte tegenkant van de dubbelblinde beoordeling (G01/G03): wat er al ligt blijft
   onleesbaar tot de kijker zelf heeft ingediend. */
.mp-blind {
    border: 1px dashed rgba(255,255,255,0.18); border-radius: 14px; padding: 26px 20px;
    text-align: center; background: rgba(255,255,255,0.02); margin-bottom: 14px;
}
.mp-blind-ic {
    width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.14); display: flex; align-items: center;
    justify-content: center; font-size: 22px; margin: 0 auto 12px;
}
.mp-blind-t { font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,0.92); margin-bottom: 6px; }
.mp-blind-d { font-size: 0.8rem; color: rgba(255,255,255,0.55); line-height: 1.5; max-width: 340px; margin: 0 auto; }
.mp-blind-ghost { filter: blur(3px); opacity: 0.45; margin: 18px auto 0; max-width: 260px; pointer-events: none; }
.mp-blind-stars { color: var(--mud-palette-primary); font-size: 1.1rem; letter-spacing: 4px; margin-bottom: 10px; }
.mp-blind-line { height: 9px; border-radius: 5px; background: rgba(255,255,255,0.22); margin: 7px auto; }
.mp-blind-pill {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 0.7rem;
    font-weight: 700; color: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.16);
    border-radius: 20px; padding: 4px 12px;
}

/* Betaalresultaat (E02-E04): een uitkomst-kop met de vinkcirkel boven het paneel. */
.mp-payres-hero {
    padding: 30px 24px 22px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(var(--mp-green-rgb), 0.12), transparent);
}
.mp-payres-hero h2 { font-size: 1.2rem; font-weight: 700; margin: 0 0 6px; color: rgba(255,255,255,0.94); }
.mp-payres-hero p { font-size: 0.85rem; color: rgba(255,255,255,0.55); margin: 0 auto; max-width: 460px; }
.mp-payres-hero-fail { background: linear-gradient(180deg, rgba(var(--mp-red-rgb), 0.10), transparent); }
.mp-payres-mark {
    width: 74px; height: 74px; border-radius: 50%; background: rgba(var(--mp-green-rgb), 0.16);
    border: 1px solid rgba(var(--mp-green-rgb), 0.45); display: flex; align-items: center;
    justify-content: center; font-size: 38px; color: var(--mp-green); margin: 0 auto 16px;
}
.mp-payres-mark-fail { background: rgba(var(--mp-red-rgb), 0.13); border-color: rgba(var(--mp-red-rgb), 0.45); color: var(--mp-red); }

/* De mildere uitkomsten: oranje voor een niet-afgeronde betaling (J03), blauw voor een
   nette blokkade (J05). Rood blijft voor echte fouten. */
.mp-payres-hero-warn { background: linear-gradient(180deg, rgba(var(--mp-orange-rgb), 0.12), transparent); }
.mp-payres-mark-warn { background: rgba(var(--mp-orange-rgb), 0.16); border-color: rgba(var(--mp-orange-rgb), 0.45); color: var(--mp-orange); font-size: 36px; }
.mp-payres-hero-info { background: linear-gradient(180deg, rgba(var(--mp-blue-rgb), 0.12), transparent); }
.mp-payres-mark-info { background: rgba(var(--mp-blue-rgb), 0.16); border-color: rgba(var(--mp-blue-rgb), 0.45); color: var(--mp-blue); font-size: 33px; }

/* Drie geruststellingen in één kader met scheidingslijnen (J03). */
.mp-reassurebox {
    background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 11px; padding: 14px 16px;
}
.mp-reassurebox-row {
    display: flex; align-items: flex-start; gap: 10px; font-size: 0.82rem;
    color: rgba(255,255,255,0.6); line-height: 1.45;
}
.mp-reassurebox-row + .mp-reassurebox-row { margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,0.08); }
.mp-reassurebox-ic { font-size: 17px; flex-shrink: 0; width: 22px; text-align: center; }
.mp-reassurebox-row b { color: rgba(255,255,255,0.9); }

/* Welke plaatsings-standen wel en niet gepromoot kunnen worden (J05): groen voor kan,
   neutraal grijs voor kan-niet. Dat is een regel, geen fout. */
.mp-statlist { display: flex; flex-direction: column; gap: 8px; }
.mp-stat {
    display: flex; align-items: center; gap: 10px; font-size: 0.82rem;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 9px; padding: 9px 12px;
    background: rgba(255,255,255,0.035);
}
.mp-stat-mk { width: 20px; text-align: center; flex-shrink: 0; font-weight: 700; color: rgba(255,255,255,0.35); }
.mp-stat-ok { border-color: rgba(var(--mp-green-rgb), 0.35); }
.mp-stat-ok .mp-stat-mk { color: var(--mp-green); }
.mp-stat-nm { font-weight: 600; color: rgba(255,255,255,0.9); }
.mp-stat-hint { color: rgba(255,255,255,0.35); font-size: 0.74rem; margin-left: auto; text-align: right; }

/* Groen vertrouwensblok: het vastgehouden bedrag, de uitbetaling of de veilige route. */
.mp-greenbox {
    background: linear-gradient(180deg, rgba(var(--mp-green-rgb), 0.10), transparent);
    border: 1px solid rgba(var(--mp-green-rgb), 0.35); border-radius: 12px; padding: 14px 16px;
    margin-bottom: 16px;
}
.mp-greenbox-badge {
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--mp-green); margin-bottom: 10px; display: flex; align-items: center; gap: 7px;
}
.mp-greenbox .mp-feetable-tot { border-top-color: rgba(var(--mp-green-rgb), 0.3); }

/* Doorzichtige knop voor de zijpaden ("Annuleren voorstellen", "Mijn akkoord intrekken"). */
.mp-btn-ghost {
    background: transparent; border: 1px solid transparent; color: rgba(255,255,255,0.55);
    border-radius: 9px; padding: 10px 16px; font-size: 0.82rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
}
.mp-btn-ghost:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.05); }

/* Wachten op de tegenpartij (D06): twee kanten naast elkaar, jouw kant afgevinkt. */
.mp-wait { display: flex; align-items: stretch; gap: 12px; }
.mp-wait-side {
    flex: 1; text-align: center; background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 14px 12px;
}
.mp-wait-side-ok {
    border-color: rgba(var(--mp-green-rgb), 0.45);
    background: linear-gradient(180deg, rgba(var(--mp-green-rgb), 0.10), transparent);
}
.mp-wait-side-ok .mp-wait-state { color: var(--mp-green); }
.mp-wait-who { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.35); }
.mp-wait-ic { font-size: 22px; line-height: 1; margin: 7px 0 5px; }
.mp-wait-state { font-size: 0.84rem; font-weight: 600; color: rgba(255,255,255,0.9); }
.mp-wait-note { font-size: 0.72rem; color: rgba(255,255,255,0.4); margin-top: 2px; }
.mp-wait-arrow { align-self: center; color: rgba(255,255,255,0.25); font-size: 18px; flex-shrink: 0; }
@media (max-width: 520px) { .mp-wait { flex-direction: column; } .mp-wait-arrow { transform: rotate(90deg); } }

/* Keuze-kop met de prijs ernaast, en de uitgelicht-perioden als losse prijskaartjes (J01). */
/* Niet te kiezen zolang de dag vol zit of de grens bereikt is. */
.mp-choice-off { opacity: 0.5; cursor: not-allowed; }
.mp-choice-head { display: flex; align-items: center; gap: 10px; }
.mp-choice-price { margin-left: auto; color: var(--mud-palette-primary); font-weight: 800; font-size: 1rem; white-space: nowrap; text-align: right; }
.mp-choice-price small { display: block; font-size: 0.62rem; color: rgba(255,255,255,0.35); font-weight: 600; }

/* Het rondje draagt de keuze. Zonder dat leest een kaart met een randje niet als gekozen,
   zeker niet zodra er meer dan een kaart oplicht. */
.mp-choice-radio {
    width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2);
    flex-shrink: 0; transition: border-color 0.12s ease, background 0.12s ease;
}
.mp-choice-active .mp-choice-radio {
    border-color: var(--mud-palette-primary);
    background: radial-gradient(circle at center, var(--mud-palette-primary) 0 5px, transparent 6px);
}

/* Alles onder de kop lijnt uit op de naam en niet op het rondje. */
.mp-choice-body { margin-left: 28px; }
.mp-periods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mp-period {
    display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-width: 92px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 9px; padding: 9px 14px; text-align: center;
}
.mp-period:hover { border-color: rgba(255,255,255,0.26); }
.mp-period-on { border-color: var(--mud-palette-primary); background: rgba(var(--mp-accent-rgb), 0.12); }
.mp-period-d { font-size: 0.72rem; color: rgba(255,255,255,0.55); }
.mp-period-p { font-size: 0.9rem; font-weight: 700; }
.mp-period-on .mp-period-p { color: var(--mud-palette-primary); }

/* Startdag van de uitgelichte plek: twee snelkeuzes en een datumveld (J09). */
.mp-starts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mp-quick {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 9px;
    padding: 8px 14px; cursor: pointer; font-size: 0.82rem; font-family: inherit; color: rgba(255,255,255,0.9);
}
.mp-quick:hover { border-color: rgba(255,255,255,0.26); }
.mp-quick-on { border-color: var(--mud-palette-primary); background: rgba(var(--mp-accent-rgb), 0.14); color: var(--mud-palette-primary); font-weight: 600; }
/* De uitkomst van begin plus duur: dát is wat je bij een reeks wilt controleren. */
.mp-range {
    margin-top: 11px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px; padding: 11px 13px; font-size: 0.83rem; color: rgba(255,255,255,0.75);
}
.mp-range b { color: var(--mud-palette-primary); font-weight: 700; }
.mp-range-warn { border-color: rgba(var(--mp-red-rgb), 0.45); background: rgba(var(--mp-red-rgb), 0.1); margin-top: 8px; }
.mp-range-warn b { color: var(--mp-red); }

/* De opschorting (K03/K04): rode strip boven de kaart, de wat-betekent-dit-lijst
   met vierkante icoontjes en scheidingslijnen, en het oranje bezwaarblok. */
.mp-suspend-strip { height: 4px; background: var(--mp-red); }
/* De volle rode kopband van de account-brede opschorting (K04): zwaarder dan het strookje
   van de Match-opschorting, want dit is de zwaarste maatregel die er is. */
.mp-suspend-band {
    display: flex; gap: 9px; align-items: center; justify-content: center;
    background: linear-gradient(180deg, rgba(var(--mp-red-rgb), 0.30), rgba(var(--mp-red-rgb), 0.10));
    border-bottom: 1px solid rgba(var(--mp-red-rgb), 0.45);
    padding: 10px 15px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--mp-red);
}
.mp-whatlist {
    background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 13px; padding: 2px 16px;
}
.mp-whatrow { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mp-whatrow:last-child { border-bottom: none; }
.mp-whatic {
    width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center;
    justify-content: center; font-size: 14px; flex-shrink: 0; margin-top: 1px;
}
.mp-whatic-stop { background: rgba(var(--mp-red-rgb), 0.13); border: 1px solid rgba(var(--mp-red-rgb), 0.35); color: var(--mp-red); }
.mp-whatic-ok { background: rgba(var(--mp-green-rgb), 0.13); border: 1px solid rgba(var(--mp-green-rgb), 0.35); color: var(--mp-green); }
.mp-whatic-info { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); }
.mp-whatic-warn { background: rgba(var(--mp-orange-rgb), 0.13); border: 1px solid rgba(var(--mp-orange-rgb), 0.35); }
.mp-what-t { font-size: 0.86rem; font-weight: 600; color: rgba(255,255,255,0.9); }
.mp-what-d { font-size: 0.78rem; color: rgba(255,255,255,0.55); margin-top: 2px; }
.mp-appealbox {
    background: linear-gradient(180deg, rgba(var(--mp-accent-rgb), 0.08), transparent);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 13px; padding: 18px; margin-top: 16px;
}
.mp-appealbox h3 { font-size: 0.98rem; font-weight: 700; margin: 0 0 6px; color: rgba(255,255,255,0.92); }
.mp-appealbox p { font-size: 0.82rem; color: rgba(255,255,255,0.6); margin: 0 0 14px; }

/* Het waarheids-vinkje in het bezwaarvenster (K05): een omkaderd blok dat oranje
   kleurt zodra het aan staat, zodat de verklaring niet als kleine lettertjes leest. */
.mp-confirm-check {
    display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
    background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 11px; padding: 12px 14px; margin-top: 12px;
}
.mp-confirm-check input { display: none; }
.mp-confirm-box {
    width: 19px; height: 19px; border-radius: 5px; border: 1.5px solid rgba(255,255,255,0.3);
    flex-shrink: 0; margin-top: 1px; position: relative;
}
.mp-confirm-on { border-color: rgba(var(--mp-accent-rgb), 0.5); background: rgba(var(--mp-accent-rgb), 0.08); }
.mp-confirm-on .mp-confirm-box { border-color: var(--mud-palette-primary); background: var(--mud-palette-primary); }
.mp-confirm-on .mp-confirm-box::after {
    content: "✓"; position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; font-size: 12px; font-weight: 800; color: #1a1a1a;
}
.mp-confirm-t { font-size: 0.8rem; color: rgba(255,255,255,0.85); }

/* De lege meldingen-inbox (I06): een getint icoonblok en het overzicht van de
   vier melding-soorten die hier landen. */
.mp-empty-icon-boxed {
    width: 76px; height: 76px; border-radius: 20px; border: 1px solid transparent;
    display: flex; align-items: center; justify-content: center; font-size: 36px; margin-bottom: 12px;
}
.mp-kinds {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px;
    max-width: 560px; width: 100%; text-align: left; margin-top: 14px;
}
@media (max-width: 640px) { .mp-kinds { grid-template-columns: 1fr; } }
.mp-kind-item {
    display: flex; align-items: flex-start; gap: 11px;
    background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 11px; padding: 12px 13px;
}
.mp-kind-ic {
    width: 34px; height: 34px; border-radius: 9px; border: 1px solid transparent;
    display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;
}
.mp-kind-t { font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,0.92); line-height: 1.3; }
.mp-kind-d { font-size: 0.74rem; color: rgba(255,255,255,0.55); margin-top: 2px; }

/* Het bezettingsbalkje onder een dagtegel (J07/J10): vulling = bezette plekken, rood bij vol. */
.mp-day-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1); overflow: hidden; margin-top: 3px; }
.mp-day-bar span { display: block; height: 100%; background: var(--mud-palette-primary); border-radius: 2px; }
.mp-day-bar .mp-day-bar-full { background: var(--mp-red); }

/* De balk boven de onthulde beoordelingen (G04, groen) en de verlopen-variant (G08, amber):
   één regel uitleg met een getint icoonblok. */
.mp-revealbar {
    display: flex; gap: 11px; align-items: center; margin-bottom: 16px;
    background: linear-gradient(180deg, rgba(var(--mp-green-rgb), 0.14), transparent);
    border: 1px solid rgba(var(--mp-green-rgb), 0.45); border-radius: 12px; padding: 13px 15px;
    font-size: 0.84rem; color: rgba(255,255,255,0.65); line-height: 1.5;
}
.mp-revealbar-ic {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex;
    align-items: center; justify-content: center; font-size: 18px;
    background: rgba(var(--mp-green-rgb), 0.16); border: 1px solid rgba(var(--mp-green-rgb), 0.4);
}
.mp-revealbar-expired {
    background: linear-gradient(180deg, rgba(var(--mp-orange-rgb), 0.13), transparent);
    border-color: rgba(var(--mp-orange-rgb), 0.45); align-items: flex-start;
}
.mp-revealbar-expired .mp-revealbar-ic { background: rgba(var(--mp-orange-rgb), 0.16); border-color: rgba(var(--mp-orange-rgb), 0.4); }

/* Het escrow-paneel kleurt met de geldstroom mee: blauw zolang het bedrag vastgehouden wordt
   (ook tijdens een geschil), groen zodra het is uitbetaald of terugbetaald. */
.mp-escrow-live { border-color: rgba(var(--mp-blue-rgb), 0.35); }
.mp-escrow-live > .mp-panel-head { background: linear-gradient(180deg, rgba(var(--mp-blue-rgb), 0.12), transparent); }
.mp-escrow-done { border-color: rgba(var(--mp-green-rgb), 0.35); }
.mp-escrow-done > .mp-panel-head { background: linear-gradient(180deg, rgba(var(--mp-green-rgb), 0.12), transparent); }

/* De twee mogelijke uitkomsten van een geschil (F08): vrijgave groen, terugboeking neutraal. */
.mp-outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
@media (max-width: 520px) { .mp-outcomes { grid-template-columns: 1fr; } }
.mp-outcomes .mp-outcome { margin-top: 0; }
.mp-outcome {
    border-radius: 11px; padding: 12px 13px; margin-top: 8px;
    font-size: 0.78rem; color: rgba(255,255,255,0.65); line-height: 1.5; border: 1px solid;
}
.mp-outcome-t { font-weight: 700; font-size: 0.82rem; margin-bottom: 3px; color: rgba(255,255,255,0.9); }
.mp-outcome-rel { border-color: rgba(var(--mp-green-rgb), 0.4); background: rgba(var(--mp-green-rgb), 0.09); }
.mp-outcome-rel .mp-outcome-t { color: var(--mp-green); }
.mp-outcome-ref { border-color: rgba(var(--mp-blue-rgb), 0.4); background: rgba(var(--mp-blue-rgb), 0.09); }
.mp-outcome-ref .mp-outcome-t { color: var(--mp-blue); }

/* Een uitkomst-kaart die zelf de actie is: de eigen rol klikt erop om het geschil zo te
   beëindigen (F08). */
.mp-outcome-btn {
    display: block; width: 100%; box-sizing: border-box; text-align: left;
    font-family: inherit; cursor: pointer;
}
.mp-outcome-btn:hover:not(:disabled) { filter: brightness(1.15); }
.mp-outcome-btn:disabled { opacity: 0.6; cursor: default; }

/* De groene slotregel onder een gepubliceerde eigen beoordeling (G08). */
.mp-pubstrip {
    margin-top: 12px; font-size: 0.78rem; color: var(--mp-green-bright);
    background: rgba(var(--mp-green-rgb), 0.08); border: 1px solid rgba(var(--mp-green-rgb), 0.3);
    border-radius: 9px; padding: 9px 12px;
}

/* De alternatieven op een volgelopen bannerdag (J04): aanklikbare rijen in de wat-lijst. */
.mp-altrow { cursor: pointer; }
.mp-altrow:hover .mp-what-t { color: var(--mud-palette-primary); }
.mp-alt-arrow { color: rgba(255,255,255,0.35); font-size: 1.15rem; align-self: center; flex-shrink: 0; }