/**
 * GForm Section Summary — gform-section-summary.css
 * Versie: 4.1
 * Auteur: COMMAR (commar.nl)
 *
 * ─────────────────────────────────────────────────────────────
 * EIGEN STYLING — overschrijf in je eigen style.css:
 *
 * .gss-badge            — badge als geheel
 * .gss-badge__check     — vinkje
 * .gss-badge__text      — tekst incl. prefix en prijs
 * .gss-badge__prefix    — "Jouw keuze:"
 * .gss-badge__name      — gekozen optie
 * .gss-badge__price     — prijs
 * .gss-i18n             — verborgen vertaalbare teksten (niet stylen)
 * ─────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════
   GEDEELD
══════════════════════════════════════════════════════════════ */

.gform_wrapper [role="button"][aria-expanded] {
	position: relative !important;
}

/* ══════════════════════════════════════════════════════════════
   BADGE — terughoudende stijl, geen achtergrond
══════════════════════════════════════════════════════════════ */

.gss-badge {
	/* Positionering: absoluut rechts, naast het pijltje */
	position: absolute;
	top: 50%;
	right: 40px;
	left: auto;
	bottom: auto;
	transform: translateY(-50%);

	/* Geen achtergrond, geen rand — puur tekst */
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	background: none !important;
	border: none !important;
	border-radius: 0;
	box-shadow: none;

	/* Typografie */
	font-size: 0.88em;
	font-weight: 400;
	color: inherit;
	white-space: nowrap;
	max-width: calc(100% - 220px);
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	box-sizing: border-box;

	animation: gss-badge-in 0.15s ease-out both;
}

/* Vinkje: zelfde groen als de lijstjes (--ec-list-icon-color) */
.gss-badge__check {
	color: #8bd296;
	color: var(--ec-list-icon-color, #8bd296);
	font-weight: 700;
	flex-shrink: 0;
	font-size: 1em;
}

.gss-badge__text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: inherit;
}

/* Reset: voorkom dat thema-hover de tekst wit kleurt */
.gss-badge,
.gss-badge:hover,
[role="button"] .gss-badge,
[role="button"]:hover .gss-badge,
[role="button"]:focus .gss-badge,
.gsection .gss-badge,
.gsection:hover .gss-badge,
.collapsible-sections-field .gss-badge,
.collapsible-sections-field:hover .gss-badge {
	background: none !important;
	border-color: transparent !important;
}

/* Kleur van de sectie bepaalt de tekstkleur (open=donker, ingevouwen=anders) */
.gform_wrapper [role="button"][aria-expanded="false"] .gss-badge {
	color: inherit;
}

@keyframes gss-badge-in {
	from { opacity: 0; transform: translateY(-50%) translateX(4px); }
	to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* ══════════════════════════════════════════════════════════════
   MOBIEL — .gss-mobile op <body> gezet door JS (≤600px)
══════════════════════════════════════════════════════════════ */

body.gss-mobile .gform_wrapper [role="button"][aria-expanded],
body.gss-mobile .gform_wrapper [role="button"][aria-expanded="false"] {
	padding-bottom: 36px !important;
	min-height: 36px !important;
}

body.gss-mobile .gss-badge {
	position: absolute !important;
	top: auto !important;
	bottom: 8px !important;
	left: 10px !important;
	right: 40px !important;      /* pijltje-ruimte vrijhouden */
	transform: none !important;

	display: block !important;
	width: auto !important;
	max-width: none !important;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	font-size: 0.82em !important;
	animation: gss-badge-in-mobile 0.15s ease-out both !important;
}

body.gss-mobile .gss-badge .gss-badge__text {
	display: inline !important;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	word-break: break-word;
}

@keyframes gss-badge-in-mobile {
	from { opacity: 0; }
	to   { opacity: 1; }
}