/* ============================================================
   MyGloow 2.0 — designsysteem klantomgeving
   Zelfde vormentaal als de website: donkere hero met paarse gloed,
   beige body, witte cards (2.4rem radius), pill-buttons.
   Diepte via kleurvlakken en font-gewicht, geen schaduwen.
   ============================================================ */

.mg-main {
    /* main{overflow:hidden} breekt position:sticky — hier opheffen */
    overflow: visible;
    overflow-x: clip;

    --mg-text:    #141013;
    --mg-muted:   #55555f;
    --mg-faint:   #8a8a94;
    --mg-body:    #f8f4f0;             /* beige, zoals site-secties */
    --mg-card:    #ffffff;
    --mg-border:  rgba(4, 1, 31, .12); /* zelfde als review_v2 borders */
    --mg-divider: #efeae4;
    --mg-dark:    #020117;             /* var(--dark2) van de site */
    --mg-accent:  #5753c0;
    --mg-accent-deep: #00034e;
    --mg-accent-soft: #f2f1ff;
    --mg-purple:  #cdcbff;
    --mg-ok-bg:   #e7f7ee;
    --mg-ok-fg:   #0f5b2a;
    --mg-warn-bg: #fff3df;
    --mg-warn-fg: #8a5a00;
    --mg-err-bg:  #fdeaea;
    --mg-err-fg:  #a3232b;
}

/* ---------- Hero: merkfoto met LICHTE beige sluier (homepage-taal, geen donker vlak) ---------- */
.mg-hero {
    position: relative;
    overflow: hidden;
    background: var(--mg-body);
    padding: 5rem 0 3.4rem;
}
.mg-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    filter: none;
}
/* Beige sluier links (leesbaarheid donkere tekst), naar rechts doorschijnend met paarse zweem */
.mg-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg, rgba(248, 244, 240, .98) 35%, rgba(248, 244, 240, .9) 65%, rgba(205, 203, 255, .5) 100%);
    pointer-events: none;
}
/* Mobiel: tekst beslaat de volle breedte, dus een stevigere sluier over het geheel */
@media (max-width: 767px) {
    .mg-hero::before {
        background: linear-gradient(160deg, rgba(248, 244, 240, .97) 0%, rgba(248, 244, 240, .92) 55%, rgba(205, 203, 255, .6) 100%);
    }
}
.mg-hero .container { position: relative; z-index: 2; }

.mg-hero__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.6rem;
}
.mg-hero__eyebrow {
    display: inline-block;
    color: var(--mg-accent);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}
.mg-hero__title {
    color: var(--mg-text);
    font-family: var(--font-brand);
    font-size: clamp(2.6rem, 6vw, 3.8rem);
    font-weight: 700;
    line-height: 1.12;
    margin: 0;
    overflow-wrap: break-word;
}
.mg-hero__sub {
    color: var(--mg-muted);
    font-size: 1.5rem;
    line-height: 1.7;
    margin: 1.2rem 0 0;
    max-width: 62ch;
}
.mg-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--mg-accent);
    font-size: 1.35rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 1.6rem;
    min-height: 4.4rem;
}
.mg-back:hover { color: var(--mg-accent-deep); text-decoration: underline; }
.mg-back .material-symbols-outlined { font-size: 1.8rem; }

/* Navigatie in de hero (desktop) */
.mg-nav {
    display: none;
    gap: .8rem;
    flex-wrap: wrap;
    margin-top: 2.8rem;
}
@media (min-width: 992px) {
    .mg-nav { display: flex; }
}
.mg-nav__link {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    height: 4.6rem;
    padding: 0 2.2rem;
    border-radius: 10rem;
    border: 1px solid rgba(4, 1, 31, .22);
    color: var(--mg-text);
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    transition: .25s;
}
.mg-nav__link .material-symbols-outlined { font-size: 1.9rem; }
.mg-nav__link:hover { background: var(--mg-accent-soft); color: var(--mg-text); }
.mg-nav__link[aria-current="page"] {
    background: var(--mg-purple);
    border-color: var(--mg-purple);
    color: var(--mg-dark);
}

/* ---------- Body: beige vlak met witte cards ---------- */
.mg-body {
    background: var(--mg-body);
    padding: 4rem 0 7rem;
}
@media (max-width: 991px) {
    .mg-body {
        padding-bottom: calc(10rem + env(safe-area-inset-bottom, 0rem));
    }
}

/* ---------- Navigatie: mobiele tab-balk (app-gevoel) ---------- */
.mg-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    background: #fff;
    border-top: 1px solid var(--mg-border, rgba(4, 1, 31, .12));
    padding-bottom: env(safe-area-inset-bottom, 0rem);
}
@media (min-width: 992px) {
    .mg-tabbar { display: none; }
}
.mg-tabbar__link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    min-height: 5.6rem;
    padding: .6rem .2rem;
    color: #55555f;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: .02em;
}
.mg-tabbar__link .material-symbols-outlined {
    font-size: 2.3rem;
    line-height: 1;
}
.mg-tabbar__link[aria-current="page"] { color: var(--mg-accent-deep); }
.mg-tabbar__link[aria-current="page"] .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

/* ---------- Cards (zelfde taal als review_v2) ---------- */
.mg-card {
    background: var(--mg-card);
    border: 1px solid var(--mg-border);
    border-radius: 2.4rem;
    padding: 2.6rem;
    margin-bottom: 2rem;
}
@media (max-width: 575px) {
    .mg-card { padding: 2rem 1.8rem; border-radius: 2rem; }
}
/* Accent = zelfde vlak als de paarse hero-kaart op de homepage (.online_apointment_box):
   vol merk-paars #cdcbff, geen zichtbare rand, donkere tekst. */
.mg-card--accent {
    background: var(--mg-purple);
    border-color: var(--mg-purple);
}
.mg-card--accent .mg-card__eyebrow { color: var(--mg-accent-deep); }
.mg-card--accent .mg-card__sub,
.mg-card--accent .mg-progress__label { color: #33304a; }
.mg-card--accent .mg-login-perks .material-symbols-outlined { color: var(--mg-accent-deep); }
/* Paarse knop op paars vlak is onzichtbaar: op de accent-kaart wordt primary donker,
   zoals de donkere knop in de hero-kaart. */
.mg-card--accent .mg-btn--primary { background: var(--mg-accent-deep); color: #fff; }
.mg-card--accent .mg-btn--primary:hover { background: var(--mg-dark); color: #fff; }
.mg-card--accent .mg-btn--dark:hover { background: #fff; color: var(--mg-text); }
.mg-card--accent .mg-btn--outline { border-color: rgba(4, 1, 31, .35); }

.mg-card__eyebrow {
    display: inline-block;
    color: var(--mg-accent);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: .8rem;
}
.mg-card__title {
    font-family: var(--font-brand);
    font-size: 2rem;
    font-weight: 700;
    color: var(--mg-text);
    margin: 0 0 .6rem;
    line-height: 1.25;
}
.mg-card__sub {
    font-size: 1.45rem;
    color: var(--mg-muted);
    line-height: 1.65;
    margin: 0;
}

.mg-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}
@media (min-width: 768px) {
    .mg-grid--2 { grid-template-columns: 1fr 1fr; }
    .mg-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.mg-grid > .mg-card { margin-bottom: 0; }
/* Kolom-wrappers in de grid: laatste kaart erin niet dubbel laten spatiëren met de grid-gap */
.mg-grid > div > .mg-card:last-child { margin-bottom: 0; }

/* ---------- Rijen (tappable lijsten binnen een card) ---------- */
.mg-rows { display: flex; flex-direction: column; }
.mg-row {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 1.6rem .2rem;
    border-bottom: 1px solid var(--mg-divider);
    color: var(--mg-text);
    text-decoration: none;
    min-height: 4.4rem;
}
.mg-rows > .mg-row:last-child { border-bottom: none; padding-bottom: .4rem; }
.mg-rows > .mg-row:first-child { padding-top: .4rem; }
a.mg-row { transition: .2s; }
a.mg-row:hover { background: #fdfcfa; }
a.mg-row:hover .mg-row__title { color: var(--mg-accent-deep); }
.mg-row__icon {
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 1.4rem;
    background: var(--mg-accent-soft);
    color: var(--mg-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mg-row__icon .material-symbols-outlined { font-size: 2.2rem; }
.mg-row__body { flex: 1; min-width: 0; }
.mg-row__title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    overflow-wrap: break-word;
}
.mg-row__meta {
    display: block;
    font-size: 1.3rem;
    color: var(--mg-muted);
    line-height: 1.5;
    margin: .2rem 0 0;
}
.mg-row__end {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-shrink: 0;
    text-align: right;
}
.mg-row__chev { color: var(--mg-faint); font-size: 2rem !important; }

/* ---------- Badges ---------- */
.mg-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem 1.2rem;
    border-radius: 10rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    max-width: 100%;
}
.mg-badge--ok   { background: var(--mg-ok-bg);   color: var(--mg-ok-fg); }
.mg-badge--warn { background: var(--mg-warn-bg); color: var(--mg-warn-fg); }
.mg-badge--err  { background: var(--mg-err-bg);  color: var(--mg-err-fg); }
.mg-badge--done { background: var(--mg-accent-soft); color: var(--mg-accent-deep); }
.mg-badge--off  { background: #ecebe8; color: #4a4a55; }

/* ---------- Sessie-bolletjes (traject) met Gloow-swirl ---------- */
.mg-dots {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    margin: 1.4rem 0 .4rem;
}
.mg-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: #eee9e2;
    border: .2rem solid #ddd6cc;
    color: #c4bcb0;
    flex-shrink: 0;
}
.mg-dot svg { width: 1.7rem; height: 1.7rem; display: block; }
.mg-dot--done    { background: #73da8e; border-color: #4cc06d; color: #0f5b2a; }
.mg-dot--planned { background: var(--mg-purple); border-color: #aca9f0; color: #01034f; }
.mg-dot--err     { background: #f0a2a7; border-color: #d24b4b; color: #7c161c; }
.mg-dots__label {
    font-size: 1.3rem;
    color: var(--mg-muted);
    font-weight: 600;
    margin: .2rem 0 0;
}

/* ---------- Voortgang (percentages, bv. profiel) ---------- */
.mg-progress { margin: 1.4rem 0 .6rem; }
.mg-progress__bar {
    height: .9rem;
    border-radius: 10rem;
    background: var(--mg-divider);
    overflow: hidden;
}
.mg-card--accent .mg-progress__bar { background: rgba(255, 255, 255, .55); }
.mg-card--accent .mg-progress__fill { background: var(--mg-accent-deep); }
.mg-progress__fill {
    height: 100%;
    border-radius: 10rem;
    background: var(--mg-accent);
    transition: width .3s ease;
}
.mg-progress__label {
    font-size: 1.3rem;
    color: var(--mg-muted);
    margin-top: .7rem;
    font-weight: 600;
}

/* ---------- Knoppen (zelfde vorm als site .button) ---------- */
.mg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    height: 5rem;
    padding: 0 3rem;
    border-radius: 10rem;
    border: 1px solid transparent;
    font-family: var(--font-ui);
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    width: fit-content;
    transition: .25s;
}
.mg-btn--primary { background: var(--mg-purple); color: var(--mg-text); }
.mg-btn--primary:hover { background: var(--mg-accent-deep); color: #fff; }
.mg-btn--dark { background: var(--mg-accent-deep); color: #fff; }
.mg-btn--dark:hover { background: var(--mg-purple); color: var(--mg-text); }
.mg-btn--outline {
    background: transparent;
    border-color: rgba(4, 1, 31, .25);
    color: var(--mg-text);
}
.mg-btn--outline:hover { border-color: var(--mg-accent-deep); background: var(--mg-accent-deep); color: #fff; }
.mg-btn--danger { background: transparent; border-color: #e5b9bc; color: var(--mg-err-fg); }
.mg-btn--danger:hover { background: var(--mg-err-bg); border-color: var(--mg-err-fg); color: var(--mg-err-fg); }
.mg-btn--danger-solid { background: #c73840; color: #fff; }
.mg-btn--danger-solid:hover { background: #a3232b; color: #fff; }
.mg-btn--block { width: 100%; }
.mg-btn--sm { height: 4.4rem; padding: 0 2.2rem; font-size: 1.35rem; }
.mg-btn[disabled], .mg-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.mg-btn .material-symbols-outlined { font-size: 1.9rem; }

/* ---------- Formulieren ---------- */
.mg-field { margin-bottom: 1.8rem; }
.mg-label {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--mg-text);
    margin-bottom: .7rem;
}
.mg-input, .mg-select, .mg-textarea {
    width: 100%;
    min-height: 5rem;
    padding: 1.2rem 1.6rem;
    border: 1px solid rgba(4, 1, 31, .22);
    border-radius: 1.4rem;
    background: #fff;
    color: var(--mg-text);
    font-family: var(--font-ui);
    font-size: 1.6rem; /* >=16px: voorkomt inzoomen op iOS */
    line-height: 1.4;
}
.mg-textarea { min-height: 10rem; resize: vertical; }
.mg-input:focus, .mg-select:focus, .mg-textarea:focus {
    outline: none;
    border-color: var(--mg-accent);
    box-shadow: 0 0 0 .3rem rgba(87, 83, 192, .18);
}
.mg-hint {
    font-size: 1.3rem;
    color: var(--mg-muted);
    margin-top: .6rem;
    line-height: 1.55;
}
.mg-hint a { color: var(--mg-accent); font-weight: 600; }
.mg-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1.8rem;
}
@media (min-width: 640px) {
    .mg-form-grid--2 { grid-template-columns: 1fr 1fr; }
}

/* Toggle (notificatievoorkeuren) */
.mg-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--mg-divider);
}
.mg-toggle-row:last-child { border-bottom: none; }
.mg-toggle-row__title { font-size: 1.45rem; font-weight: 700; margin: 0; }
.mg-toggle-row__sub { font-size: 1.3rem; color: var(--mg-muted); margin: .2rem 0 0; line-height: 1.5; }
.mg-switch {
    position: relative;
    display: inline-block;
    width: 5.2rem;
    height: 3.2rem;
    flex-shrink: 0;
}
.mg-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.mg-switch__track {
    position: absolute;
    inset: 0;
    border-radius: 10rem;
    background: #d4d3de;
    transition: background .15s;
    pointer-events: none;
}
.mg-switch__track::after {
    content: "";
    position: absolute;
    top: .4rem;
    left: .4rem;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}
.mg-switch input:checked + .mg-switch__track { background: var(--mg-accent); }
.mg-switch input:checked + .mg-switch__track::after { transform: translateX(2rem); }
.mg-switch input:focus-visible + .mg-switch__track {
    box-shadow: 0 0 0 .3rem rgba(87, 83, 192, .3);
}

/* ---------- Meldingen ---------- */
.mg-alert {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.5rem 1.8rem;
    border-radius: 1.6rem;
    font-size: 1.4rem;
    line-height: 1.55;
    margin-bottom: 2rem;
}
.mg-alert a { font-weight: 700; color: inherit; text-decoration: underline; }
.mg-alert .material-symbols-outlined { font-size: 2rem; flex-shrink: 0; margin-top: .1rem; }
.mg-alert--success { background: var(--mg-ok-bg); color: var(--mg-ok-fg); }
.mg-alert--error   { background: var(--mg-err-bg); color: var(--mg-err-fg); }
.mg-alert--warn    { background: var(--mg-warn-bg); color: var(--mg-warn-fg); }
.mg-alert--info    { background: var(--mg-accent-soft); color: var(--mg-accent-deep); }

/* Bestaande sessie-alerts (showAlert) binnen MyGloow dezelfde look geven */
.mg-body .alert { border: none; border-radius: 1.6rem; font-size: 1.4rem; }
.mg-body .alert-danger { background: var(--mg-err-bg); color: var(--mg-err-fg); }
.mg-body .alert-success { background: var(--mg-ok-bg); color: var(--mg-ok-fg); }

/* ---------- Lege staat ---------- */
.mg-empty {
    text-align: center;
    padding: 4rem 2rem;
}
.mg-empty .material-symbols-outlined {
    font-size: 4.2rem;
    color: var(--mg-faint);
    display: block;
    margin: 0 auto 1.2rem;
}
.mg-empty__title { font-family: var(--font-brand); font-size: 1.8rem; font-weight: 700; margin: 0 0 .5rem; }
.mg-empty__sub { font-size: 1.4rem; color: var(--mg-muted); margin: 0 0 2rem; }
.mg-empty .mg-btn { margin: 0 auto; }

/* ---------- Definitielijstjes (samenvattingen) ---------- */
.mg-facts { margin: 0; }
.mg-facts__row {
    display: flex;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--mg-divider);
    font-size: 1.4rem;
}
.mg-facts__row:last-child { border-bottom: none; }
.mg-facts__label { color: var(--mg-muted); }
.mg-facts__value { font-weight: 700; text-align: right; overflow-wrap: anywhere; }
/* Waarde met statuslabel erachter (bijv. de datum van een gemiste sessie) */
.mg-facts__value--with-badge {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .8rem;
}
.mg-facts__value--with-badge .mg-badge { white-space: nowrap; }
.mg-facts__row--total { font-size: 1.5rem; }
.mg-facts__row--total .mg-facts__value { color: var(--mg-accent-deep); }

/* ---------- Skeleton (AJAX laden) ---------- */
.mg-skel {
    border-radius: 1.6rem;
    background: linear-gradient(90deg, #f1ede8 25%, #f9f6f2 50%, #f1ede8 75%);
    background-size: 200% 100%;
    animation: mgSkel 1.2s ease-in-out infinite;
    min-height: 5rem;
    margin-bottom: 1rem;
}
@keyframes mgSkel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .mg-skel { animation: none; }
    .mg-progress__fill, .mg-btn, .mg-nav__link,
    .mg-switch__track, .mg-switch__track::after, a.mg-row { transition: none; }
}

/* ---------- Focus (WCAG) ---------- */
.mg-main a:focus-visible,
.mg-main button:focus-visible,
.mg-tabbar a:focus-visible {
    outline: .25rem solid var(--mg-accent);
    outline-offset: .2rem;
    border-radius: .6rem;
}
.mg-hero a:focus-visible {
    outline-color: var(--mg-purple);
}

/* ---------- Prominente activatiekaart ---------- */
/* ---------- Prio-melding bovenaan (bv. profiel compleet maken) ----------
   Success-tint zodat hij zich onderscheidt van de paarse/witte cards. */
.mg-notice {
    display: flex;
    gap: 1.6rem;
    align-items: center;
    background: var(--mg-ok-bg);
    border-radius: 2.4rem;
    padding: 1.8rem 2.2rem;
    margin-bottom: 2rem;
}
.mg-notice__icon {
    flex-shrink: 0;
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    background: #c7ecd6;
    color: var(--mg-ok-fg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mg-notice__icon .material-symbols-outlined { font-size: 2.4rem; }
.mg-notice__body { flex: 1; min-width: 0; }
.mg-notice__title {
    font-family: var(--font-brand);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--mg-text);
    margin: 0 0 .6rem;
}
.mg-notice .mg-progress { margin: 0; max-width: 32rem; }
.mg-notice .mg-progress__bar { background: rgba(255, 255, 255, .95); }
.mg-notice .mg-progress__fill { background: var(--mg-ok-fg); }
.mg-notice .mg-progress__label { margin-top: .5rem; font-size: 1.25rem; color: var(--mg-ok-fg); }
.mg-notice__cta { flex-shrink: 0; }
/* Knop in de melding volgt de meldingskleur */
.mg-notice__cta .mg-btn { background: var(--mg-ok-fg); color: #fff; }
.mg-notice__cta .mg-btn:hover { background: #0a4520; color: #fff; }
@media (max-width: 575px) {
    .mg-notice { flex-wrap: wrap; padding: 1.8rem; }
    .mg-notice__icon { display: none; }
    .mg-notice__cta, .mg-notice__cta .mg-btn { width: 100%; }
}

/* ---------- Compacte snelkoppelingen bovenaan ----------
   Alleen mobiel/tablet: op desktop dekt de hero-navigatie dezelfde bestemmingen.
   Horizontaal scrollbaar, chips lopen door tot de schermrand. */
.mg-quick {
    display: flex;
    gap: .8rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -2rem 2rem;
    padding: 0 2rem;
}
.mg-quick::-webkit-scrollbar { display: none; }
/* Fade aan de rechterrand maakt duidelijk dat er meer chips zijn; verdwijnt aan het einde */
.mg-quick:not(.mg-quick--end) {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 6rem), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 6rem), transparent 100%);
}
.mg-quick__link { flex-shrink: 0; white-space: nowrap; }
@media (min-width: 992px) {
    .mg-quick { display: none; }
}
.mg-quick__link {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    min-height: 4.4rem;
    padding: 0 1.6rem;
    border-radius: 10rem;
    background: #fff;
    border: 1px solid var(--mg-border);
    color: var(--mg-text);
    font-size: 1.35rem;
    font-weight: 600;
    text-decoration: none;
    transition: .2s;
}
.mg-quick__link .material-symbols-outlined { font-size: 1.8rem; color: var(--mg-accent); }
.mg-quick__link:hover { border-color: var(--mg-accent-deep); background: var(--mg-accent-soft); color: var(--mg-text); }

.mg-activate {
    display: flex;
    gap: 1.6rem;
    align-items: flex-start;
    background: var(--mg-accent-deep);
    border-radius: 2.4rem;
    padding: 2.2rem 2.4rem;
    margin-bottom: 2rem;
    color: #fff;
}
.mg-activate__icon {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    background: var(--mg-purple);
    color: var(--mg-accent-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mg-activate__icon .material-symbols-outlined { font-size: 2.6rem; }
.mg-activate__title {
    font-family: var(--font-brand);
    font-size: 1.9rem;
    font-weight: 700;
    margin: 0 0 .4rem;
    color: #fff;
}
.mg-activate__text {
    font-size: 1.4rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .85);
    margin: 0 0 1.4rem;
}
@media (max-width: 575px) {
    .mg-activate { flex-direction: column; padding: 2rem 1.8rem; }
}

/* ---------- Afgeronde (gearchiveerde) boekingen ---------- */
.mg-card--archived {
    position: relative;
    background: #ede8e1;
    border: .2rem dashed #cfc5b8;
}
.mg-card--archived::after {
    content: "Afgerond";
    position: absolute;
    top: 1.6rem;
    right: 1.6rem;
    background: #dcd4c9;
    color: #5f584e;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .5rem 1.2rem;
    border-radius: 10rem;
}
.mg-card--archived .mg-card__eyebrow { color: #9a9184; }
.mg-card--archived .mg-card__title { color: #6b6b74; }
.mg-card--archived .mg-card__sub,
.mg-card--archived .mg-facts__label,
.mg-card--archived .mg-facts__value,
.mg-card--archived .mg-dots__label { color: #8a8a94; }
.mg-card--archived .mg-facts__row { border-bottom-color: #ded7cd; }
.mg-card--archived .mg-thumb { background: #dcd4c9; }
.mg-card--archived .mg-thumb img { filter: grayscale(1); opacity: .75; }
.mg-card--archived .mg-dot--done { background: #b9c9be; border-color: #a3b3a8; color: #6a7a6f; }
.mg-archive-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-brand);
    font-size: 2rem;
    font-weight: 700;
    color: var(--mg-muted);
    margin: 3.4rem 0 1.6rem;
}
.mg-archive-heading .material-symbols-outlined { color: var(--mg-faint); }

/* ---------- Boekingskaart met thumbnail ---------- */
.mg-thumb {
    width: 9rem;
    height: 9rem;
    border-radius: 1.6rem;
    overflow: hidden;
    background: var(--mg-accent-soft);
    flex-shrink: 0;
}
.mg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: none;
}
@media (max-width: 420px) {
    .mg-thumb { width: 7rem; height: 7rem; border-radius: 1.2rem; }
}

/* ---------- Sessie-rij iconen in statuskleur ---------- */
.mg-row__icon--done    { background: #e7f7ee; color: #1d9b4e; }
.mg-row__icon--planned { background: var(--mg-accent-soft); color: var(--mg-accent); }
.mg-row__icon--err     { background: var(--mg-err-bg); color: #d24b4b; }
.mg-row__icon--open    { background: #f0ece6; color: #a89f92; }

/* ---------- Sessierijen (boekingsdetail) ----------
   Vaste opbouw: rechts een kolom met bovenaan het statuslabel en daaronder de
   actieknop. Elke sessierij heeft dezelfde structuur, ook de nog-lege sessies,
   zodat "Inplannen" en "Opties bekijken" altijd op dezelfde plek staan en niet
   verspringen door de lengte of aanwezigheid van het statuslabel. */
.mg-row--session { flex-wrap: wrap; }
.mg-row--session .mg-row__end {
    flex-direction: column;
    align-items: flex-end;
    gap: .7rem;
    margin-left: auto;
    /* Mag krimpen in een smalle kaart: de knoppen wikkelen dan onder elkaar
       in plaats van de sessietekst weg te drukken. */
    flex-shrink: 1;
    min-width: 0;
}
.mg-row--session .mg-row__body { flex: 1 1 12rem; }
/* Statuslabel blijft op een regel: afbreken maakt de rijhoogte per sessie anders. */
.mg-row--session .mg-row__end .mg-badge { white-space: nowrap; }
.mg-row__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .8rem;
}
@media (max-width: 575px) {
    /* Smal scherm: de rechterkolom past niet naast de tekst, dus onder de sessie
       uitlijnen op de tekst (icoonbreedte 4.6rem + rij-gap 1.4rem). */
    .mg-row--session { row-gap: 1.1rem; }
    .mg-row--session .mg-row__end {
        flex-basis: 100%;
        align-items: flex-start;
        padding-left: 6rem;
    }
    .mg-row__actions { justify-content: flex-start; width: 100%; }
}
@media (max-width: 420px) {
    .mg-row--session .mg-row__end {
        padding-left: 0;
        align-items: stretch;
    }
    .mg-row--session .mg-row__end .mg-badge { white-space: normal; align-self: flex-start; }
    .mg-row__actions .mg-btn { flex: 1 1 auto; }
}

/* ---------- Modals (annuleren, inplannen, verzetten) ---------- */
.mg-modal .modal-dialog { max-width: 52rem; }
.mg-modal .modal-content {
    border: none;
    border-radius: 2.4rem;
    padding: .8rem .4rem;
}
.mg-modal .modal-header {
    border: none;
    align-items: flex-start;
    padding: 2rem 2.2rem .4rem;
}
.mg-modal .modal-title {
    font-family: var(--font-brand);
    font-size: 2rem;
    font-weight: 700;
    color: var(--mg-text);
    line-height: 1.25;
}
.mg-modal .btn-close {
    margin: 0 0 0 auto;
    padding: 1.1rem;
}
.mg-modal .modal-body { padding: 1rem 2.2rem 1.4rem; }
.mg-modal .modal-footer { border: none; padding: 0 2.2rem 2rem; }

/* Formulieren binnen de modals (ook de bestaande inplan/verzet-inhoud) */
.mg-modal label,
.mg-modal .form-label {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--mg-text);
    margin-bottom: .6rem;
}
.mg-modal .form-control,
.mg-modal .form-select {
    width: 100%;
    min-height: 4.8rem;
    padding: 1.1rem 4rem 1.1rem 1.4rem;
    border: 1px solid rgba(4, 1, 31, .22);
    border-radius: 1.4rem;
    background-color: #fff;
    color: var(--mg-text);
    font-family: var(--font-ui);
    font-size: 1.5rem;
    line-height: 1.4;
}
.mg-modal .form-control { padding-right: 1.4rem; }
.mg-modal .form-control:focus,
.mg-modal .form-select:focus {
    outline: none;
    border-color: var(--mg-accent);
    box-shadow: 0 0 0 .3rem rgba(87, 83, 192, .18);
}
.mg-modal .form-control[readonly] {
    background: var(--mg-accent-soft);
    border-color: transparent;
    color: var(--mg-accent-deep);
    font-weight: 600;
}
.mg-modal .mb-3 { margin-bottom: 1.6rem !important; }
.mg-modal h6 {
    font-family: var(--font-brand);
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: .4rem;
}
.mg-modal .text-muted {
    font-size: 1.35rem;
    color: var(--mg-muted) !important;
    line-height: 1.55;
}
.mg-modal .alert {
    border: none;
    border-radius: 1.6rem;
    font-size: 1.4rem;
}
.mg-modal .alert-danger { background: var(--mg-err-bg); color: var(--mg-err-fg); }

/* Verzend-knoppen uit de geladen inhoud (class .button) in mg-stijl */
.mg-modal .modal-body .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    width: 100%;
    height: 5rem;
    padding: 0 3rem;
    border: none;
    border-radius: 10rem;
    background: var(--mg-accent-deep);
    color: #fff;
    font-family: var(--font-ui);
    font-size: 1.45rem;
    font-weight: 700;
    cursor: pointer;
    transition: .25s;
}
.mg-modal .modal-body .button:hover { background: var(--mg-purple); color: var(--mg-text); }

/* ---------- Zwevende widgets vs. mobiele tab-balk ---------- */
@media (max-width: 991px) {
    /* Scroll-naar-boven is overbodig naast de tab-balk en viel erachter weg */
    body:has(.mg-tabbar) .back-to-top {
        display: none !important;
    }
    /* Weglot floating switcher (o.a. in de app, waar de header verborgen is):
       optillen zodat hij niet met de tab-balk botst */
    body:has(.mg-tabbar) .country-selector,
    body:has(.mg-tabbar) .weglot-container.wg-default {
        bottom: calc(7.2rem + env(safe-area-inset-bottom, 0rem)) !important;
    }
}

/* ---------- Klein grut ---------- */
.mg-divider { border: none; border-top: 1px solid var(--mg-divider); margin: 2rem 0; }
.mg-muted { color: var(--mg-muted); }
.mg-strong { font-weight: 700; }
.mg-mt-0 { margin-top: 0; }
.mg-mb-0 { margin-bottom: 0; }