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

.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(239,68,68,0.16); color: #f87171; border: 1px solid rgba(239,68,68,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(239,68,68,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(245,166,35,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(245,166,35,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(245,166,35,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); }

/* 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(245,166,35,0.75); }

/* Uitgelichte (betaald gepromote) kaart: accent-rand + zachte gloed + zwevend lint (B01) */
.mp-card-feat {
    border-color: rgba(245,166,35,0.55);
    box-shadow: 0 0 0 1px rgba(245,166,35,0.22), 0 8px 24px rgba(245,166,35,0.10);
    background: linear-gradient(180deg, rgba(245,166,35,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(245,166,35,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-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; }
.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-own-chip {
    font-size: 0.68rem; color: rgba(255,255,255,0.6); border: 1px dashed rgba(255,255,255,0.3);
    border-radius: 999px; padding: 2px 8px;
}
.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); }
.mp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-tag {
    font-size: 0.72rem; color: rgba(255,255,255,0.72); background: rgba(255,255,255,0.06);
    border-radius: 6px; padding: 3px 8px;
}
.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(245,166,35,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(239,68,68,0.16); color: #f87171; border-color: rgba(239,68,68,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;
}
.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(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.3);
    border-radius: 11px; padding: 13px 15px;
}
.mp-reassure-ic { color: #4ADE80; 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; }

/* Bedrijfsprofiel (A04): het spiegel-blok toont je eigen bedrijf zoals een tegenpartij
   het ziet, de tegels vatten samen wat je met je keuzes beïnvloedt. */
.mp-mirror {
    display: flex; gap: 16px; align-items: flex-start; margin-bottom: 8px;
    background: linear-gradient(135deg, rgba(245,166,35,0.10), rgba(255,255,255,0.03));
    border: 1px solid rgba(245,166,35,0.28); border-radius: 16px; padding: 20px 22px;
}
.mp-mirror-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-mirror-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-mirror-meta { font-size: 0.8rem; color: rgba(255,255,255,0.55); margin-top: 3px; }
.mp-mirror-right { margin-left: auto; text-align: right; flex-shrink: 0; }
.mp-mirror-score { font-size: 1.35rem; font-weight: 800; color: var(--mud-palette-primary); line-height: 1.1; }

.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; }
.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); }
.mp-wizard-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
@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 {
    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-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: 8px; border-radius: 3px; background: rgba(255,255,255,0.1); }
.mp-slot-sold { background: rgba(255,255,255,0.35); }
.mp-slot-mine { background: var(--mud-palette-primary); }

/* Wizard controleer-stap (H04): groepen met bewerk-links */
.mp-grp { border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.mp-grp-h {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
    font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,0.85);
}
.mp-edit {
    background: none; border: none; cursor: pointer; font-family: inherit; font-size: 0.72rem;
    color: var(--mud-palette-primary); padding: 2px 4px; border-radius: 6px;
}
.mp-edit:hover { background: rgba(245,166,35,0.1); }
.mp-srow { display: flex; gap: 10px; padding: 3px 0; font-size: 0.82rem; }
.mp-srow-l { color: rgba(255,255,255,0.4); width: 130px; flex-shrink: 0; }
.mp-srow-v { color: rgba(255,255,255,0.88); font-weight: 600; }

/* Onboarding (A01): hero, sectie-koppen en genummerde spelregels */
.mp-hero {
    display: flex; gap: 16px; align-items: flex-start;
    background: linear-gradient(135deg, rgba(245,166,35,0.12), rgba(255,255,255,0.03));
    border: 1px solid rgba(245,166,35,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(245,166,35,0.14); border: 1px solid rgba(245,166,35,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(239,68,68,0.4); }
.mp-rule-danger .mp-rule-num { color: #f87171; border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,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(96,165,250,0.13); border: 1px solid rgba(96,165,250,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: #4ADE80; 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); }
.mp-escrow-amount { font-size: 1.7rem; font-weight: 700; color: rgba(255,255,255,0.94); line-height: 1.1; }
.mp-hold-badge {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.7rem; font-weight: 700;
    color: var(--mud-palette-primary); background: rgba(245,166,35,0.14); border: 1px solid rgba(245,166,35,0.4);
    border-radius: 20px; padding: 3px 10px;
}
.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;
}
.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-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: #4ADE80; background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,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: #4ADE80; flex-shrink: 0; font-weight: 700; }

.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(239,68,68,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); }
.mp-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* 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(74,222,128,0.35); background: rgba(74,222,128,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: #4ADE80; font-weight: 700; }
.mp-weekday-pop {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    padding-top: 6px; z-index: 40;
}

/* Voorpagina-banner-carrousel op de hub (gesponsorde plaatsingen) */
.mp-spotcar { margin-bottom: 16px; }
.mp-spotstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 12px; margin-bottom: 8px; }
@media (max-width: 560px) { .mp-spotstrip { grid-template-columns: 1fr; } }
.mp-spot {
    position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    border: 1px solid rgba(245,166,35,0.55); border-radius: 12px; cursor: pointer;
    background: linear-gradient(120deg, rgba(245,166,35,0.16), rgba(245,166,35,0.03) 55%, transparent), rgba(255,255,255,0.03);
    box-shadow: 0 0 0 1px rgba(245,166,35,0.18), 0 8px 24px rgba(245,166,35,0.08);
}
.mp-spot-mark {
    position: absolute; top: -9px; right: 14px; 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(245,166,35,0.35);
}
.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: 0.98rem; font-weight: 700; color: rgba(255,255,255,0.94); margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-spot-meta { font-size: 0.74rem; color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-spot-cta { flex-shrink: 0; }

/* De leegloop-balk: subtiel in rust, accent zodra de kijker op de strook staat (dan is 'ie
   gepauzeerd en dus informatie). De 8s hieronder is de wissel-klok van de carrousel. */
.mp-spotbar { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.06); overflow: hidden; }
.mp-spotbar-fill { height: 100%; border-radius: 2px; background: rgba(255,255,255,0.16); animation: mp-spot-drain 8s linear forwards; }
.mp-spotcar:hover .mp-spotbar-fill { background: rgba(245,166,35,0.75); }
.mp-spotbar-fill.mp-spotbar-paused { animation-play-state: paused; }
@keyframes mp-spot-drain { from { width: 100%; } to { width: 0; } }
.mp-spotcar-nav { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 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); }