/*
 * Pakje Gemist Core – basisstijl voor de dynamische blokken.
 * Gebruikt de presets van het actieve thema waar beschikbaar, met veilige fallbacks,
 * zodat de blokken ook leesbaar en toegankelijk zijn met een ander thema.
 */
.pgm {
	--pgm-fg: var(--wp--preset--color--contrast, #182d42);
	--pgm-bg: var(--wp--preset--color--base, #ffffff);
	--pgm-muted: var(--wp--preset--color--muted, #4e5a6b);
	--pgm-border: var(--wp--preset--color--border, #d9d3e6);
	--pgm-primary: var(--wp--preset--color--primary, #52368d);
	--pgm-primary-strong: var(--wp--preset--color--primary-strong, #3e2870);
	--pgm-on-primary: var(--wp--preset--color--on-primary, #ffffff);
	--pgm-surface: var(--wp--preset--color--surface, #f4f2f9);
	--pgm-accent: var(--wp--preset--color--accent, #f05121);
	--pgm-accent-text: var(--wp--preset--color--accent-text, #b23c0f);
	--pgm-error: var(--wp--preset--color--error, #a4161a);
	--pgm-success: var(--wp--preset--color--success, #1d6b3a);
	--pgm-warning: var(--wp--preset--color--warning, #8a5a00);
	--pgm-radius: 14px;
	--pgm-shadow: 0 1px 2px rgb(24 45 66 / 8%), 0 8px 24px -12px rgb(82 54 141 / 28%);
	color: var(--pgm-fg);
	max-width: 46rem;
	margin-inline: auto;
}
.pgm *, .pgm *::before, .pgm *::after { box-sizing: border-box; }
/* Het hidden-attribuut wint altijd, ook van grid/flex in componenten. */
.pgm [hidden] { display: none !important; }
.pgm-title { margin-block: 0 1rem; }
.pgm-form { display: grid; gap: 1rem; margin-block-end: 1.5rem; }
.pgm-form--inline { margin-block: 1rem 0; }
.pgm-field { display: grid; gap: .35rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.pgm-field > label, .pgm-field > legend { font-weight: 600; }
.pgm-help { color: var(--pgm-muted); font-size: .95em; margin: 0; }
.pgm input[type="text"], .pgm input[type="email"], .pgm input[type="url"], .pgm input[type="date"], .pgm input[type="tel"], .pgm input[type="time"], .pgm input[type="number"], .pgm input[type="file"], .pgm select, .pgm textarea {
	width: 100%; font: inherit; font-size: max(1rem, 16px); color: var(--pgm-fg); background: var(--pgm-bg);
	border: 2px solid var(--pgm-border); border-radius: 8px; padding: .7rem .8rem; min-height: 48px;
}
.pgm input[aria-invalid="true"] { border-color: var(--pgm-error); }
.pgm :focus-visible { outline: 3px solid var(--pgm-primary); outline-offset: 2px; }
/* Programmatische focus op meldingen/resultaten (tabindex=-1): subtiel, maar wel zichtbaar. */
.pgm [tabindex="-1"]:focus { outline: 2px dotted var(--pgm-primary); outline-offset: 4px; }
.pgm-choice { display: flex; align-items: center; gap: .6rem; min-height: 44px; }
.pgm-choice input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--pgm-primary); }
.pgm-button {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .7rem 1.4rem;
	font: inherit; font-weight: 600; border-radius: 999px; border: 2px solid var(--pgm-primary);
	background: var(--pgm-primary); color: var(--pgm-on-primary); cursor: pointer; text-decoration: none;
	justify-self: start;
}
.pgm-button:hover { background: var(--pgm-primary-strong); border-color: var(--pgm-primary-strong); }
.pgm-button--secondary { background: transparent; color: var(--pgm-primary); }
.pgm-button--secondary:hover { background: var(--pgm-surface); color: var(--pgm-primary-strong); }
.pgm-form[aria-busy="true"] .pgm-button { opacity: .7; cursor: progress; }
.pgm-notice { border-radius: var(--pgm-radius); padding: .9rem 1rem; margin-block: 1rem; background: var(--pgm-surface); border-inline-start: 5px solid var(--pgm-primary); }
.pgm-notice--error { border-color: var(--pgm-error); }
.pgm-notice--success { border-color: var(--pgm-success); }
.pgm-result { border: 1px solid var(--pgm-border); border-radius: var(--pgm-radius); padding: 1.25rem; background: var(--pgm-bg); }
.pgm-result__title { margin-block: 0 .5rem; overflow-wrap: anywhere; }
.pgm-status { margin: 0 0 .5rem; }
.pgm-status__label, .pgm-badge {
	display: inline-block; font-weight: 700; padding: .3rem .8rem; border-radius: 999px;
	background: var(--pgm-surface); border: 2px solid var(--pgm-primary); color: var(--pgm-fg);
}
.pgm-status--delivered .pgm-status__label, .pgm-badge--completed { border-color: var(--pgm-success); }
.pgm-status--exception .pgm-status__label, .pgm-badge--rejected, .pgm-badge--failed { border-color: var(--pgm-error); }
.pgm-status--delivery_attempted .pgm-status__label, .pgm-badge--more_information_required { border-color: var(--pgm-warning); }
.pgm-meta { color: var(--pgm-muted); margin: 0 0 .5rem; }
.pgm-timeline { list-style: none; margin: .5rem 0 0; padding: 0 0 0 1.25rem; border-inline-start: 3px solid var(--pgm-border); }
.pgm-timeline__item { position: relative; padding: 0 0 1rem .5rem; display: grid; gap: .15rem; }
.pgm-timeline__item::before { content: ""; position: absolute; inset-inline-start: -1.85rem; top: .35rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--pgm-primary); border: 3px solid var(--pgm-bg); }
.pgm-timeline__label { font-weight: 600; }
.pgm-timeline time { color: var(--pgm-muted); font-size: .95em; }
.pgm-timeline__message { margin: .25rem 0 0; padding: .6rem .8rem; background: var(--pgm-surface); border-radius: 8px; }
.pgm-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 1rem; }
.pgm-dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; }
.pgm-dl dt { font-weight: 600; }
.pgm-dl dd { margin: 0; }
.pgm-details { padding: .8rem 1rem; background: var(--pgm-surface); border-radius: 8px; overflow-wrap: anywhere; }
.pgm-table-wrap { overflow-x: auto; }
.pgm-table { width: 100%; border-collapse: collapse; }
.pgm-table th, .pgm-table td { text-align: start; padding: .6rem .5rem; border-bottom: 1px solid var(--pgm-border); }
/* Thuisbezorging */
.pgm-lead { font-size: 1.1em; margin-block: 0 1.5rem; }
.pgm-subtitle { margin-block: 2rem .5rem; }
.pgm-card { border: 1px solid var(--pgm-border); border-radius: var(--pgm-radius); padding: 1.25rem; background: var(--pgm-bg); margin-block: 1rem; }
.pgm-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.pgm-slots { gap: 1rem; }
.pgm-slots__day { display: grid; gap: .25rem; padding: .75rem 1rem; border: 1px solid var(--pgm-border); border-radius: var(--pgm-radius); }
.pgm-slots__date { font-weight: 700; margin: 0 0 .25rem; }
.pgm-slot label { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; font-variant-numeric: tabular-nums; }
.pgm-slot__left { color: var(--pgm-muted); font-size: .9em; }
.pgm-price { background: var(--pgm-surface); border-radius: var(--pgm-radius); padding: 1rem 1.25rem; }
.pgm-price__title { font-weight: 700; margin: 0 0 .5rem; }
.pgm-pricetable { width: 100%; border-collapse: collapse; margin-block: .5rem; font-variant-numeric: tabular-nums; }
.pgm-pricetable th { text-align: start; font-weight: 400; padding: .25rem 0; }
.pgm-pricetable td { text-align: end; padding: .25rem 0; }
.pgm-pricetable__total th, .pgm-pricetable__total td { font-weight: 700; border-top: 2px solid var(--pgm-border); padding-top: .5rem; }
.pgm-tabs { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-block: 1rem; padding-block-end: .75rem; border-bottom: 1px solid var(--pgm-border); }
.pgm-tabs a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.pgm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pgm-list__item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; padding: .75rem 1rem; border: 1px solid var(--pgm-border); border-radius: var(--pgm-radius); }
.pgm-list__item > div { min-width: 0; flex: 1 1 16rem; overflow-wrap: anywhere; }
.pgm-list__item p { margin-block: 0 .25rem; }
.pgm-stops { list-style: none; counter-reset: stop; margin: 0; padding: 0; display: grid; gap: .75rem; }
.pgm-stop { counter-increment: stop; position: relative; padding: 1rem 1rem 1rem 3.25rem; border: 1px solid var(--pgm-border); border-radius: var(--pgm-radius); }
.pgm-stop::before { content: counter(stop); position: absolute; inset-inline-start: 1rem; top: 1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--pgm-primary); color: var(--pgm-on-primary); display: grid; place-items: center; font-weight: 700; font-size: .9em; }
/* Afgehandelde stops: rustiger door achtergrond en stippelrand, niet door doorzichtigheid (contrast blijft AA). */
.pgm-stop--delivered, .pgm-stop--failed { background: var(--pgm-surface); border-style: dashed; }
.pgm-stop__head { margin: 0 0 .25rem; display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.pgm-stop__address { font-size: 1.1em; margin: .5rem 0; }
.pgm-fail { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pgm-fail select { width: auto; }
.pgm-badge--confirmed, .pgm-badge--delivered, .pgm-badge--available { border-color: var(--pgm-success); }
.pgm-badge--expired, .pgm-badge--not_eligible, .pgm-badge--conflict { border-color: var(--pgm-error); }
.pgm-badge--pending_payment, .pgm-badge--reported, .pgm-badge--handed_over { border-color: var(--pgm-warning); }
/* ================================================================ 0.4.0 – app-onderdelen */
.pgm-app { max-width: 52rem; }
.pgm-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pgm-notice--warning { border-color: var(--pgm-warning); }
.pgm-empty { padding: 1.5rem; text-align: center; background: var(--pgm-surface); border-radius: var(--pgm-radius); }
.pgm-back { margin: 0 0 .5rem; }
.pgm-points { padding-inline-start: 1.25rem; display: grid; gap: .35rem; }
.pgm-points li::marker { color: var(--pgm-accent); }
.pgm-linkbutton { background: none; border: 0; padding: .25rem 0; font: inherit; color: var(--pgm-accent-text); text-decoration: underline; cursor: pointer; justify-self: start; min-height: 44px; }
.pgm-card--quiet { background: var(--pgm-surface); border-color: transparent; }
.pgm-card__title { margin: 0 0 .5rem; font-size: 1.1em; }
.pgm-title--section { margin-block-start: 3rem; padding-block-start: 1.5rem; border-top: 1px solid var(--pgm-border); }

/* Statuschips: tekst draagt de betekenis, de kleur ondersteunt. */
.pgm-chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 700; line-height: 1; padding: .4rem .7rem; border-radius: 999px; background: var(--pgm-surface); color: var(--pgm-fg); white-space: nowrap; }
.pgm-chip::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--pgm-primary); flex: none; }
.pgm-chip--open::before, .pgm-chip--pending::before, .pgm-chip--announced::before { background: var(--pgm-warning); }
.pgm-chip--accepted::before, .pgm-chip--picked_up::before, .pgm-chip--in_transit::before, .pgm-chip--collected::before, .pgm-chip--at_hub::before { background: var(--pgm-primary); }
.pgm-chip--completed::before, .pgm-chip--delivered::before, .pgm-chip--handed_to_carrier::before, .pgm-chip--returned_to_customer::before { background: var(--pgm-success); }
.pgm-chip--cancelled::before, .pgm-chip--failed::before { background: var(--pgm-error); }

/* Kop met saldo */
.pgm-app__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-block-end: 1.25rem; }
.pgm-app__head .pgm-title { margin: 0; }
.pgm-balance { display: grid; gap: .1rem; padding: 1rem 1.25rem; min-width: 14rem; border-radius: var(--pgm-radius); background: var(--pgm-primary); color: var(--pgm-on-primary); text-decoration: none; position: relative; overflow: hidden; }
a.pgm-balance:hover { background: var(--pgm-primary-strong); }
a.pgm-balance:focus-visible { outline-color: var(--pgm-fg); }
.pgm-balance__label { font-size: .875rem; opacity: .9; }
.pgm-balance__amount { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pgm-balance__sub { font-size: .875rem; opacity: .9; }
.pgm-balance__link { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-top: .25rem; }
/* Snelheidsstrepen uit het logo: het ene herkenbare merkaccent. */
.pgm-balance::after { content: ""; position: absolute; inset-inline-end: -1rem; top: 1rem; width: 6rem; height: 3rem; opacity: .9; pointer-events: none;
	background:
		linear-gradient(var(--pgm-accent), var(--pgm-accent)) 1.5rem 0 / 4.5rem .45rem no-repeat,
		linear-gradient(var(--pgm-accent), var(--pgm-accent)) 0 1rem / 5rem .45rem no-repeat,
		linear-gradient(var(--pgm-accent), var(--pgm-accent)) 2.5rem 2rem / 3.5rem .45rem no-repeat; }
.pgm-balance--hero { padding: 1.5rem; }
.pgm-balance--hero .pgm-balance__amount { font-size: clamp(2.25rem, 6vw, 3rem); }

/* Gesegmenteerde navigatie en filters */
.pgm-segmented { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; background: var(--pgm-surface); border-radius: 999px; margin-block-end: 1.5rem; }
.pgm-segmented a { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .5rem 1.1rem; border-radius: 999px; font-weight: 700; text-decoration: none; color: var(--pgm-fg); }
.pgm-segmented a[aria-current] { background: var(--pgm-bg); color: var(--pgm-primary); box-shadow: var(--pgm-shadow); }
.pgm-count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: var(--pgm-accent-text); color: #fff; font-size: .8rem; }
.pgm-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 1rem; }
.pgm-filters a { min-height: 40px; display: inline-flex; align-items: center; padding: .35rem .9rem; border: 1px solid var(--pgm-border); border-radius: 999px; text-decoration: none; color: var(--pgm-fg); }
.pgm-filters a[aria-current] { border-color: var(--pgm-primary); background: var(--pgm-primary); color: var(--pgm-on-primary); }

/* Stappen van het opdrachtformulier (een echte volgorde) */
.pgm-stepper { counter-reset: pgm-step; list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: 0; margin: 0 0 1.25rem; }
.pgm-stepper li { counter-increment: pgm-step; display: flex; align-items: center; gap: .5rem; }
.pgm-stepper li::before { content: counter(pgm-step); width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; background: var(--pgm-primary); color: var(--pgm-on-primary); font-weight: 700; font-size: .9rem; }
.pgm-stepper a { font-weight: 700; color: var(--pgm-fg); }
.pgm-order-form { counter-reset: pgm-fs; gap: 1.5rem; }
.pgm-step { counter-increment: pgm-fs; border: 1px solid var(--pgm-border); border-radius: var(--pgm-radius); padding: 1.25rem; margin: 0; display: grid; gap: 1rem; min-width: 0; background: var(--pgm-bg); scroll-margin-top: 1rem; }
.pgm-step__title { font-size: 1.2em; font-weight: 700; padding: 0 .25rem; display: flex; align-items: center; gap: .6rem; }
.pgm-order-form .pgm-step__title::before { content: counter(pgm-fs); width: 1.75rem; height: 1.75rem; display: inline-grid; place-items: center; border-radius: 50%; background: var(--pgm-primary); color: var(--pgm-on-primary); font-size: .9rem; }
.pgm-field__label { font-weight: 600; }

/* Keuzes als tegels, chips en schakelaar (native radio's, zichtbare focus) */
.pgm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; }
.pgm-tile { position: relative; }
.pgm-tile input, .pgm-chips input, .pgm-toggle input, .pgm-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pgm-tile label { display: grid; gap: .25rem; height: 100%; padding: .9rem 1rem; border: 2px solid var(--pgm-border); border-radius: var(--pgm-radius); cursor: pointer; background: var(--pgm-bg); }
.pgm-tile__title { font-weight: 700; }
.pgm-tile__meta { color: var(--pgm-muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.pgm-tile input:checked + label { border-color: var(--pgm-primary); box-shadow: inset 0 0 0 1px var(--pgm-primary); background: var(--pgm-surface); }
.pgm-tile input:focus-visible + label, .pgm-chips input:focus-visible + label, .pgm-toggle input:focus-visible + label, .pgm-stars input:focus-visible + label { outline: 3px solid var(--pgm-primary); outline-offset: 2px; }
.pgm-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.pgm-chips label { min-height: 44px; display: inline-flex; align-items: center; padding: .4rem 1rem; border: 2px solid var(--pgm-border); border-radius: 999px; cursor: pointer; font-weight: 600; }
.pgm-chips input:checked + label { border-color: var(--pgm-primary); background: var(--pgm-primary); color: var(--pgm-on-primary); }
.pgm-toggle { display: inline-flex; padding: .25rem; border-radius: 999px; background: var(--pgm-surface); }
.pgm-toggle label { min-height: 44px; display: inline-flex; align-items: center; padding: .4rem 1.25rem; border-radius: 999px; cursor: pointer; font-weight: 700; }
.pgm-toggle input:checked + label { background: var(--pgm-primary); color: var(--pgm-on-primary); }
.pgm-paywith { padding: .75rem 1rem; border: 1px solid var(--pgm-border); border-radius: var(--pgm-radius); background: var(--pgm-bg); }

/* Bezorgadressen */
.pgm-stoplist { display: grid; gap: 1rem; }
.pgm-stopfields { border: 0; border-inline-start: 4px solid var(--pgm-accent); padding: .25rem 0 .25rem 1rem; margin: 0; display: grid; gap: .75rem; min-width: 0; }
.pgm-stopfields legend { font-weight: 700; padding: 0; margin-bottom: .25rem; }
.pgm-row--address { grid-template-columns: minmax(0, 3fr) minmax(6rem, 1fr); }
.pgm-disclosure { border: 1px solid var(--pgm-border); border-radius: var(--pgm-radius); padding: .25rem 1rem; }
.pgm-disclosure > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; color: var(--pgm-primary); }
.pgm-disclosure[open] { padding-bottom: 1rem; }
.pgm-actions--sticky { position: sticky; bottom: 0; z-index: 2; padding: .75rem 0; background: linear-gradient(transparent, var(--pgm-bg) 30%); }

/* Opdrachtenlijst als kaarten */
.pgm-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.pgm-ordercard { position: relative; display: grid; gap: .6rem; padding: 1rem 1.25rem; border: 1px solid var(--pgm-border); border-radius: var(--pgm-radius); background: var(--pgm-bg); box-shadow: var(--pgm-shadow); }
.pgm-ordercard:hover { border-color: var(--pgm-primary); }
.pgm-ordercard__top { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.pgm-ordercard__id { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pgm-fg); }
.pgm-ordercard__meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0; color: var(--pgm-muted); font-size: .95em; }
.pgm-ordercard__price { margin-inline-start: auto; color: var(--pgm-fg); font-weight: 700; font-variant-numeric: tabular-nums; }
.pgm-ordercard__more { justify-self: start; font-weight: 700; }
.pgm-route-mini { display: grid; gap: .35rem; padding-inline-start: 1.25rem; position: relative; }
.pgm-route-mini p { margin: 0; position: relative; }
.pgm-route-mini p::before { content: ""; position: absolute; inset-inline-start: -1.25rem; top: .45em; width: .6rem; height: .6rem; border-radius: 50%; border: 2px solid var(--pgm-primary); background: var(--pgm-bg); }
.pgm-route-mini__to::before { background: var(--pgm-accent) !important; border-color: var(--pgm-accent) !important; }
.pgm-route-mini::before { content: ""; position: absolute; inset-inline-start: .28rem; top: .9em; bottom: .9em; border-inline-start: 2px dotted var(--pgm-border); }

/* Verloop van een opdracht */
.pgm-order__head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.pgm-order__head .pgm-title { margin: 0; }
.pgm-track { list-style: none; margin: 1.25rem 0; padding: 0 0 0 1.75rem; border-inline-start: 3px solid var(--pgm-border); display: grid; gap: 1rem; }
.pgm-track__item { position: relative; }
.pgm-track__item p { margin: 0 0 .2rem; }
.pgm-track__item::before { content: ""; position: absolute; inset-inline-start: -2.4rem; top: .2rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--pgm-bg); border: 3px solid var(--pgm-border); }
.pgm-track__item.is-done::before { background: var(--pgm-success); border-color: var(--pgm-success); }
.pgm-track__item.is-failed::before { background: var(--pgm-error); border-color: var(--pgm-error); }
.pgm-track__item--pickup::before { border-color: var(--pgm-primary); }
.pgm-track__label { font-weight: 700; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pgm-order--courier { border: 1px solid var(--pgm-border); border-radius: var(--pgm-radius); padding: 1.25rem; margin-block: 1rem; display: grid; gap: .75rem; box-shadow: var(--pgm-shadow); }
.pgm-order__title { margin: 0; font-size: 1.15em; }
.pgm-leg { padding: .75rem 1rem; border-radius: var(--pgm-radius); background: var(--pgm-surface); }
.pgm-leg__label { font-weight: 700; margin: 0 0 .25rem; color: var(--pgm-primary); }
.pgm-flag { margin: .5rem 0; padding: .5rem .75rem; border-radius: 8px; background: var(--pgm-surface); border-inline-start: 4px solid var(--pgm-accent); font-weight: 600; }

/* Bezorgcode voor de ontvanger */
.pgm-code { margin-block: 1rem; padding: 1.25rem; border-radius: var(--pgm-radius); border: 2px dashed var(--pgm-primary); background: var(--pgm-surface); text-align: center; }
.pgm-code__label { margin: 0; font-weight: 700; }
.pgm-code__digits { margin: .25rem 0 .5rem; font-size: clamp(2.25rem, 9vw, 3rem); font-weight: 700; letter-spacing: .25em; font-variant-numeric: tabular-nums; color: var(--pgm-primary); }
.pgm-input--code { font-size: 1.5rem !important; letter-spacing: .3em; font-variant-numeric: tabular-nums; max-width: 10rem; }
.pgm-pod { padding: 1rem; border-radius: var(--pgm-radius); background: var(--pgm-surface); margin-block: .75rem; }
.pgm-pod input[type="text"], .pgm-pod input[type="file"] { background: var(--pgm-bg); }

/* Sterren: rechts-naar-links opgebouwd zodat :checked ~ label de lagere sterren kleurt. */
.pgm-stars__set { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .25rem; }
.pgm-stars label { width: 44px; height: 44px; cursor: pointer; display: grid; place-items: center; }
.pgm-stars label::before { content: ""; width: 32px; height: 32px; background: var(--pgm-border); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.pgm-stars input:checked ~ label::before, .pgm-stars label:hover::before, .pgm-stars label:hover ~ label::before { background: var(--pgm-accent); }

/* Portemonnee */
.pgm-wallet__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: start; }
.pgm-wallet__grid .pgm-card { margin: 0; }
.pgm-amount { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.pgm-amount--in { color: var(--pgm-success); }
.pgm-amount--out { color: var(--pgm-fg); }
.pgm-table caption { text-align: start; font-weight: 700; padding-bottom: .5rem; }
.pgm-table--ledger td:nth-child(3), .pgm-table--ledger td:nth-child(4), .pgm-table--ledger th:nth-child(3), .pgm-table--ledger th:nth-child(4) { text-align: end; }
.pgm-choice--terms { align-items: flex-start; }
.pgm-choice--terms input { margin-top: .2rem; }

/* 0.5.0: Mijn Pakje Gemist, dashboards per rol, labels, machtiging */
.pgm-staff, .pgm-account { max-width: 60rem; }
.pgm-chip--created::before, .pgm-chip--submitted::before, .pgm-chip--received::before { background: var(--pgm-warning); }
.pgm-chip--approved::before, .pgm-chip--scheduled::before, .pgm-chip--planned::before, .pgm-chip--out_for_delivery::before { background: var(--pgm-primary); }
.pgm-chip--rejected::before, .pgm-chip--expired::before { background: var(--pgm-error); }
.pgm-segmented--wide { display: flex; border-radius: var(--pgm-radius); }
.pgm-segmented--wide a { border-radius: 10px; }
.pgm-howto { margin: 0 0 1.5rem; padding-inline-start: 1.25rem; display: grid; gap: .5rem; }
.pgm-tilenav { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem; }
.pgm-tilenav a { display: grid; gap: .3rem; height: 100%; padding: 1rem 1.15rem; border: 1px solid var(--pgm-border); border-inline-start: 4px solid var(--pgm-primary); border-radius: var(--pgm-radius); background: var(--pgm-bg); color: var(--pgm-fg); text-decoration: none; }
.pgm-tilenav a:hover { border-color: var(--pgm-primary); }
.pgm-tilenav__title { font-weight: 700; color: var(--pgm-primary); }
.pgm-tilenav__meta { color: var(--pgm-muted); font-size: .92em; }
.pgm-tilenav--stats a { border-inline-start-color: var(--pgm-accent); }
.pgm-tilenav__value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pgm-code__digits--small { font-size: clamp(1.4rem, 5vw, 1.9rem); letter-spacing: .08em; }
.pgm-actions--center { justify-content: center; }
.pgm-copy { margin-top: .4rem; font-family: inherit; font-size: .9rem !important; }
.pgm-input--scan { font-size: 1.4rem !important; letter-spacing: .06em; font-variant-numeric: tabular-nums; text-transform: uppercase; }
.pgm-form--compact { gap: .6rem; margin: 0; flex: 1 1 16rem; padding: .9rem; border-radius: var(--pgm-radius); background: var(--pgm-surface); }
.pgm-mask, .pgm-signature { display: grid; gap: .5rem; justify-items: start; }
.pgm-mask__canvas, .pgm-signature__canvas { width: 100%; max-width: 36rem; height: auto; border: 2px solid var(--pgm-border); border-radius: 8px; background: #fff; touch-action: none; cursor: crosshair; }
.pgm-signature__canvas { aspect-ratio: 20 / 7; }
.pgm-routehead { display: grid; gap: .25rem; padding: .75rem 1rem; border-radius: var(--pgm-radius); background: var(--pgm-surface); margin-block-end: .75rem; }
.pgm-routehead .pgm-actions { margin-block-start: .25rem; }
.pgm-actions > .pgm-form--inline { margin: 0; }
.pgm-actions { align-items: center; }

@media (max-width: 600px) {
	.pgm-row--address { grid-template-columns: 1fr; }
	.pgm-app__head { flex-direction: column; }
	.pgm-balance { width: 100%; }
	.pgm-segmented { display: flex; }
	.pgm-segmented a { flex: 1; justify-content: center; }
	.pgm-actions--sticky { margin-inline: -1rem; padding-inline: 1rem; }
	.pgm-actions--sticky .pgm-button { flex: 1; }
}
@media (max-width: 480px) {
	.pgm-dl { grid-template-columns: 1fr; }
	.pgm-button { width: 100%; }
	.pgm-table thead { display: none; }
	.pgm-table tr { display: grid; padding: .5rem 0; border-bottom: 1px solid var(--pgm-border); }
	.pgm-table td { border: 0; padding: .15rem 0; }
	.pgm-table td::before { content: attr(data-label) ": "; font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) { .pgm * { transition: none !important; animation: none !important; } }
.pgm-tile, .pgm-chips, .pgm-toggle, .pgm-stars__set { position: relative; }
/* 0.7.0: machtiging voor een derde */
details.pgm-details { margin-block: 1rem; }
details.pgm-details > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.pgm-row--dims { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.pgm-declaration { padding: .9rem 1rem; border: 1px solid var(--pgm-border); border-radius: 8px; background: var(--pgm-bg); line-height: 1.55; }
.pgm-dlg-card { border-top: 6px solid var(--pgm-success); }
.pgm-dlg-card--invalid { border-top-color: var(--pgm-error); }
.pgm-dlg-card .pgm-dl { margin-block: .75rem 1rem; }
.pgm-chip--active::before { background: var(--pgm-success); }
.pgm-chip--revoked::before { background: var(--pgm-muted); }
@media (max-width: 480px) { .pgm-dl { grid-template-columns: 1fr; } .pgm-dl dd { margin-bottom: .4rem; } }

/* 0.6.0: tabbladen op de telefoon horizontaal scrollbaar in plaats van op meerdere regels */
@media (max-width: 700px) {
	.pgm-segmented--wide { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
	.pgm-segmented--wide a { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
}

/* ================================================================ 0.9.1 – klantdashboard Mijn Pakje Gemist
 * Zijmenu met iconen, kerncijfers, snelle acties en een banner, op een transparante kaart met routes.
 * Alle selectors beginnen met .pgm-dash, zodat ze niet botsen met het thema of andere onderdelen.
 */
.pgm.pgm-app.pgm-dash {
	--pgm-dash-ink: #22164a;
	--pgm-dash-card: #ffffff;
	--pgm-dash-radius: 18px;
	--pgm-dash-shadow: 0 1px 2px rgb(34 22 74 / 6%), 0 12px 32px -16px rgb(82 54 141 / 30%);
	--pgm-dash-violet: #6d4fc2;
	max-width: var(--wp--style--global--wide-size, 76rem);
	width: 100%;
	margin-inline: auto;
	color: var(--pgm-fg);
	font-size: 1rem; /* vaste maat: het dashboard is een werkomgeving, ook bij een thema met grote broodtekst */
	line-height: 1.5;
}
/* Het blok heeft een eigen paginatitel; de titel van het thema is daarnaast dubbel. */
body:has(.pgm-dash) :is(.wp-block-post-title, .entry-title) { display: none; }

/* Kaart met routes: vast, transparant en decoratief achter het dashboard. */
body:has(.pgm-dash) { isolation: isolate; }
body:has(.pgm-dash)::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: url("../images/achtergrond-kaart.jpg");
	background-image: image-set(url("../images/achtergrond-kaart.webp") type("image/webp"), url("../images/achtergrond-kaart.jpg") type("image/jpeg"));
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: var(--pgm-kaart-sterkte, .16);
}
@media (max-width: 600px) {
	body:has(.pgm-dash)::before {
		background-image: url("../images/achtergrond-kaart.jpg");
		background-image: image-set(url("../images/achtergrond-kaart-480.webp") type("image/webp"), url("../images/achtergrond-kaart.jpg") type("image/jpeg"));
		opacity: var(--pgm-kaart-sterkte-mobiel, .12);
	}
}
@media (forced-colors: active), print {
	body:has(.pgm-dash)::before { content: none; }
}

/* Kop */
.pgm-dash__head { margin-block-end: 1.75rem; }
.pgm-dash .pgm-dash__title { margin: 0 0 .4rem; color: var(--pgm-dash-ink); font-size: clamp(1.9rem, 1.35rem + 1.6vw, 2.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.pgm-dash .pgm-dash__greeting { margin: 0 0 .25rem; color: var(--pgm-dash-ink); font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight: 700; }
.pgm-dash .pgm-dash__intro { margin: 0; color: var(--pgm-muted); }

/* Opbouw */
.pgm-dash__body { display: grid; gap: 1.25rem; align-items: start; }
.pgm-dash__body > * { min-width: 0; }
.pgm-dash__main { display: grid; gap: 1.25rem; min-width: 0; }
.pgm-dash__main > .pgm-notice { margin: 0; }
@media (min-width: 960px) {
	.pgm-dash__body { grid-template-columns: 15.5rem minmax(0, 1fr); }
	.pgm-dash__nav { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 1rem); }
}

/* Iconen */
.pgm-dash .pgm-icon { width: 1.35rem; height: 1.35rem; flex: none; }
.pgm-dash .pgm-icon--sm { width: 1.05rem; height: 1.05rem; }
.pgm-dash .pgm-tone--orange { background: #fde8de; color: #c2410c; }
.pgm-dash .pgm-tone--violet { background: #efe9fb; color: var(--pgm-dash-violet); }
.pgm-dash .pgm-tone--blue { background: #e4eefc; color: #2459b8; }
.pgm-dash .pgm-tone--green { background: #e1f3e7; color: #1d7a45; }

/* Zijmenu */
.pgm-dash__nav { background: var(--pgm-dash-card); border-radius: var(--pgm-dash-radius); box-shadow: var(--pgm-dash-shadow); padding: .6rem; }
.pgm-dash__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.pgm-dash .pgm-dash__nav a {
	display: flex; align-items: center; gap: .85rem; min-height: 46px; padding: .55rem .9rem; border-radius: 12px;
	color: var(--pgm-fg); text-decoration: none; font-weight: 500; line-height: 1.25;
}
.pgm-dash .pgm-dash__nav a .pgm-icon { color: var(--pgm-muted); }
.pgm-dash .pgm-dash__nav a:hover { background: var(--pgm-surface); color: var(--pgm-primary-strong); }
.pgm-dash .pgm-dash__nav a:hover .pgm-icon { color: var(--pgm-primary); }
.pgm-dash .pgm-dash__nav a[aria-current="page"] { background: var(--pgm-primary); color: var(--pgm-on-primary); font-weight: 600; box-shadow: 0 6px 16px -8px rgb(82 54 141 / 70%); }
.pgm-dash .pgm-dash__nav a[aria-current="page"] .pgm-icon { color: var(--pgm-on-primary); }
@media (max-width: 959px) {
	/* Telefoon en tablet: één rij die horizontaal schuift, met een vervaging aan de rand. */
	.pgm-dash__nav { padding: .4rem; margin-inline: -.25rem; }
	.pgm-dash__nav ul {
		display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; gap: .3rem;
		mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
	}
	.pgm-dash__nav ul::-webkit-scrollbar { display: none; }
	.pgm-dash__nav li { flex: none; scroll-snap-align: start; }
	.pgm-dash__nav li:last-child { padding-inline-end: 1.5rem; }
	.pgm-dash .pgm-dash__nav a { white-space: nowrap; gap: .5rem; padding: .5rem .85rem; }
}

/* Kerncijfers */
.pgm-dash__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); gap: 1.25rem; }
.pgm-stat {
	display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
	background: var(--pgm-dash-card); border-radius: var(--pgm-dash-radius); box-shadow: var(--pgm-dash-shadow); padding: 1.35rem 1.4rem;
}
.pgm-dash .pgm-stat__label { margin: 0; font-weight: 600; }
.pgm-dash .pgm-stat__value { margin: .3rem 0 .7rem; font-size: 2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--pgm-dash-ink); }
.pgm-dash .pgm-stat__link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; white-space: nowrap; color: var(--pgm-primary); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 2px; }
.pgm-dash .pgm-stat__link:hover { color: var(--pgm-primary-strong); }
.pgm-stat__icon { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; flex: none; }
.pgm-stat__icon .pgm-icon { width: 1.7rem; height: 1.7rem; }
.pgm-stat--balance { background: linear-gradient(135deg, #5b3ba8 0%, #3e2870 100%); color: #fff; }
.pgm-dash .pgm-stat--balance .pgm-stat__label, .pgm-dash .pgm-stat--balance .pgm-stat__value { color: #fff; }
.pgm-stat--balance .pgm-stat__icon { background: rgb(255 255 255 / 14%); color: #fff; }

/* Oranje knop met witte tekst: #D73D0F (4,6:1), hover #C6380D (5,3:1) */
.pgm-dash .pgm-dash__cta {
	display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: .7rem 1.4rem; border-radius: 999px;
	background: #d73d0f; color: #fff; font-weight: 700; text-decoration: none; line-height: 1.2;
	box-shadow: 0 8px 18px -10px rgb(215 61 15 / 70%);
}
.pgm-dash .pgm-dash__cta:hover { background: #c6380d; color: #fff; }
.pgm-dash .pgm-dash__cta--sm { min-height: 44px; padding: .5rem 1.1rem; font-size: .95rem; }

/* Kaarten en panelen */
.pgm-dash__card, .pgm-dash__panel { background: var(--pgm-dash-card); border-radius: var(--pgm-dash-radius); box-shadow: var(--pgm-dash-shadow); padding: clamp(1.1rem, .8rem + 1.2vw, 1.75rem); }
.pgm-dash .pgm-dash__cardtitle { margin: 0 0 .25rem; color: var(--pgm-dash-ink); font-size: 1.35rem; font-weight: 800; }
.pgm-dash .pgm-dash__sub { margin: 0 0 1.25rem; color: var(--pgm-muted); }
.pgm-dash .pgm-dash__paneltitle { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.25rem; color: var(--pgm-dash-ink); font-size: 1.4rem; font-weight: 800; }
.pgm-dash .pgm-dash__paneltitle-icon { width: 1.6rem; height: 1.6rem; color: var(--pgm-primary); }
.pgm-dash__panel > .pgm-subtitle:first-of-type { margin-block-start: 0; }
.pgm-dash .pgm-dash__empty { margin: 0 0 .5rem; padding: 1rem 1.1rem; border-radius: 12px; background: var(--pgm-surface); }

/* Snelle acties */
.pgm-dash__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: .9rem; }
.pgm-dash .pgm-dash__tile {
	position: relative; display: flex; flex-direction: column; align-items: flex-start; height: 100%; min-height: 11.5rem;
	padding: 1.1rem 1.1rem 1.1rem; border: 1px solid var(--pgm-border); border-radius: 14px; background: var(--pgm-dash-card);
	color: var(--pgm-fg); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pgm-dash .pgm-dash__tile:hover { border-color: var(--pgm-primary); box-shadow: var(--pgm-dash-shadow); transform: translateY(-2px); }
.pgm-dash__tileicon { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; margin-block-end: 1rem; }
.pgm-dash__tileicon .pgm-icon { width: 1.5rem; height: 1.5rem; }
.pgm-dash__tiletitle { font-weight: 700; color: var(--pgm-dash-ink); margin-block-end: .3rem; }
.pgm-dash__tilemeta { color: var(--pgm-muted); font-size: .93rem; line-height: 1.45; padding-inline-end: 2.75rem; }
.pgm-dash__go { position: absolute; inset-inline-end: .9rem; inset-block-end: .9rem; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--pgm-surface); color: var(--pgm-dash-ink); }
.pgm-dash .pgm-dash__tile:hover .pgm-dash__go { background: var(--pgm-primary); color: var(--pgm-on-primary); }

/* Banner */
.pgm-dash__promo {
	display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 1rem; overflow: hidden;
	border-radius: var(--pgm-dash-radius); background: linear-gradient(115deg, #f1ecfd 0%, #e4dafb 100%); padding: 1.75rem 0 0 2rem;
	box-shadow: var(--pgm-dash-shadow);
}
.pgm-dash__promotext { padding-block-end: 1.75rem; }
.pgm-dash .pgm-dash__eyebrow { margin: 0 0 .35rem; color: var(--pgm-primary-strong); font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pgm-dash .pgm-dash__promotitle { margin: 0 0 .5rem; color: var(--pgm-dash-ink); font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem); font-weight: 800; line-height: 1.2; }
.pgm-dash__promotext > p:not([class]) { margin: 0 0 1.25rem; color: #3f3a55; max-width: 32rem; }
.pgm-dash__art { display: block; width: 100%; max-width: 380px; height: auto; align-self: end; justify-self: end; font-family: inherit; }
@media (max-width: 720px) {
	.pgm-dash__promo { grid-template-columns: 1fr; padding: 1.4rem 1.25rem 0; }
	.pgm-dash__art { max-width: 300px; justify-self: center; }
}

@media (max-width: 600px) {
	.pgm-dash__stats { grid-template-columns: 1fr 1fr; gap: .75rem; }
	.pgm-stat--balance { grid-column: 1 / -1; }
	.pgm-stat:not(.pgm-stat--balance) { flex-direction: column-reverse; gap: .6rem; padding: 1rem; }
	.pgm-stat:not(.pgm-stat--balance) .pgm-stat__icon { width: 2.6rem; height: 2.6rem; }
	.pgm-stat:not(.pgm-stat--balance) .pgm-stat__icon .pgm-icon { width: 1.3rem; height: 1.3rem; }
	.pgm-dash .pgm-stat__value { font-size: 1.7rem; margin-block-end: .35rem; }
	.pgm-dash .pgm-stat__link { white-space: normal; font-size: .92rem; }
	.pgm-dash__tiles { grid-template-columns: 1fr 1fr; gap: .65rem; }
	.pgm-dash .pgm-dash__tile { min-height: 0; padding: .9rem .9rem 3.4rem; }
	.pgm-dash__tileicon { width: 2.6rem; height: 2.6rem; margin-block-end: .7rem; }
	.pgm-dash__tilemeta { padding-inline-end: 0; font-size: .88rem; }
	.pgm-dash__go { width: 2rem; height: 2rem; inset-inline-end: .7rem; inset-block-end: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
	.pgm-dash .pgm-dash__tile:hover { transform: none; }
}

/* ================================================================ 0.11.0 – nieuwsbrief en tarieven */
.pgm-nb { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.pgm-nb__title { margin: 0; font-size: 1.25rem; }
.pgm-nb__text { margin: 0; }
.pgm-nb__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pgm-nb__row { display: flex; align-items: stretch; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #d9d3e6; overflow: hidden; }
.pgm-nb__row:focus-within { box-shadow: 0 0 0 3px #52368d; }
.pgm-nb__email { flex: 1; min-width: 0; min-height: 52px; border: 0; padding: .75rem 1rem; font: inherit; font-size: max(1rem, 16px); color: #182d42; background: transparent; }
.pgm-nb__email:focus { outline: none; }
.pgm-nb__button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 52px; min-height: 52px; border: 0; padding: 0 1rem; background: #d73d0f; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.pgm-nb__button:hover { background: #c6380d; }
.pgm-nb__button:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.pgm-nb__button--wide { border-radius: 999px; padding: .75rem 1.5rem; }
.pgm-nb__consent { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; font-size: .9rem; line-height: 1.45; }
.pgm-nb__consent input { width: 1.2rem; height: 1.2rem; margin: .15rem 0 0; accent-color: #52368d; }
.pgm-nb__msg { margin: 0; padding: .7rem .9rem; border-radius: 10px; font-weight: 600; }
.pgm-nb__msg--success { background: #e1f3e7; color: #14532d; }
.pgm-nb__msg--error { background: #fde8e4; color: #8a1c0d; }
.pgm-tariffs__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.pgm-tariffs__card { display: grid; align-content: start; gap: .6rem; padding: 1.25rem; border: 1px solid var(--pgm-border); border-radius: var(--pgm-radius); background: var(--pgm-bg); }
.pgm-tariffs__title { margin: 0; font-size: 1.1rem; }
.pgm-tariffs__price { margin: 0; font-size: 1.6rem; font-weight: 800; color: var(--pgm-primary-strong); font-variant-numeric: tabular-nums; }
.pgm-tariffs__card .pgm-button { justify-self: start; }