/* OGS cadeaubon: saldoblok [ogs_cadeaubon_saldo]. Selectors bewust specifiek: het thema
   (Hello Elementor) geeft button/input/h2 eigen randen, kleuren en marges.
   Geen container queries: container-type op het blok laat Chrome het Elementor-
   flexitem (kolomcontainer) ~150px te hoog maken. Breedte-afhankelijk gedrag
   loopt via grid auto-fit en flex-wrap. */
.ogs-saldo {
	--ogs-saldo-groen: #465C43;
	--ogs-saldo-titel: #22421E;
	--ogs-saldo-muted: #60735e;
	--ogs-saldo-rand: #eeeae7;
	--ogs-saldo-vlak: #faf9f8;
	width: 100%;
	margin: 0;
	scroll-margin-top: 140px;
	font-family: "Sohne", "Helvetica Neue", Arial, sans-serif;
	font-weight: 300;
	color: #3d3d3d;
	text-align: left;
}
.ogs-saldo[hidden],
.ogs-saldo [hidden] { display: none !important; }
.woocommerce div.product .ogs-saldo,
.single-product .ogs-saldo { margin-top: 32px; }

/* Twee kolommen (tekst | formulier) zodra er ruimte is voor 2 x 340px, anders onder elkaar. */
.ogs-saldo .ogs-saldo__kaart {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 16px 40px;
	align-items: start;
	background: var(--ogs-saldo-vlak);
	border: 1px solid var(--ogs-saldo-rand);
	border-radius: 20px;
	padding: 32px;
	box-sizing: border-box;
}
@media (max-width: 480px) {
	.ogs-saldo .ogs-saldo__kaart { padding: 24px 20px; }
}

.ogs-saldo .ogs-saldo__kop {
	margin: 0;
	padding: 0;
	font-family: "Sohne", "Helvetica Neue", Arial, sans-serif;
	font-weight: 300;
	font-size: 30px;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ogs-saldo-groen);
}
.ogs-saldo .ogs-saldo__serif {
	font-family: "FreightDispProBook-Italic", "FreightDispProBook", Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: 34px;
}
.ogs-saldo .ogs-saldo__sub {
	margin: 6px 0 0;
	padding: 0;
	font-size: 14px;
	line-height: 22px;
	color: var(--ogs-saldo-muted);
}

.ogs-saldo .ogs-saldo__label {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Invoer pakt de ruimte; wordt die smaller dan 180px, dan valt de knop eronder (volle breedte). */
.ogs-saldo .ogs-saldo__rij {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ogs-saldo .ogs-saldo__invoer {
	flex: 999 1 180px;
	min-width: 0;
	box-sizing: border-box;
	width: auto;
	height: 52px;
	margin: 0;
	padding: 0 16px;
	background: #fff;
	border: 1px solid var(--ogs-saldo-rand);
	border-radius: 10px;
	box-shadow: none;
	font-family: "Sohne", "Helvetica Neue", Arial, sans-serif;
	font-weight: 300;
	font-size: 16px; /* 16px voorkomt inzoomen op iOS */
	letter-spacing: .5px;
	color: #3d3d3d;
	outline: none;
}
.ogs-saldo .ogs-saldo__invoer::placeholder { color: #9a9a9a; opacity: 1; letter-spacing: 0; }
.ogs-saldo .ogs-saldo__invoer:focus { border-color: var(--ogs-saldo-groen); box-shadow: none; outline: none; }
.ogs-saldo .ogs-saldo__invoer[aria-invalid="true"] { border-color: #b4524a; }

/* Thema-knopregels (:is(button,[type=button],...):not(:disabled)) laden later en winnen
   bij gelijke specificiteit; daarom een trede zwaarder en de kernwaarden !important. */
.ogs-saldo .ogs-saldo__rij .ogs-saldo__knop,
.ogs-saldo .ogs-saldo__rij .ogs-saldo__knop:not(:disabled) {
	flex: 1 0 auto;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-align: center !important;
	box-sizing: border-box;
	height: 52px;
	min-height: 52px;
	margin: 0;
	padding: 0 22px !important;
	background-color: var(--ogs-saldo-groen) !important;
	border: 1px solid var(--ogs-saldo-groen) !important;
	border-radius: 10px !important;
	box-shadow: none;
	font-family: "Sohne", "Helvetica Neue", Arial, sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	color: #fff !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.ogs-saldo .ogs-saldo__rij .ogs-saldo__knop:not(:disabled):hover,
.ogs-saldo .ogs-saldo__rij .ogs-saldo__knop:not(:disabled):focus-visible {
	background-color: var(--ogs-saldo-titel) !important;
	border-color: var(--ogs-saldo-titel) !important;
	color: #fff !important;
	text-decoration: none;
}
.ogs-saldo .ogs-saldo__rij .ogs-saldo__knop:focus-visible { outline: 2px solid var(--ogs-saldo-groen); outline-offset: 2px; }
.ogs-saldo .ogs-saldo__rij .ogs-saldo__knop:disabled { cursor: progress; opacity: .85; }

.ogs-saldo .ogs-saldo__melding {
	margin: 12px 0 0;
	padding: 0;
	font-size: 14px;
	line-height: 22px;
	color: #9a4a42;
}

.ogs-saldo .ogs-saldo__uitkomst {
	margin-top: 14px;
	padding: 14px 20px;
	background: #fff;
	border: 1px solid var(--ogs-saldo-rand);
	border-radius: 20px;
}
.ogs-saldo .ogs-saldo__regel {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 5px 0;
	font-size: 14px;
	line-height: 22px;
	color: var(--ogs-saldo-muted);
}
.ogs-saldo .ogs-saldo__bedrag {
	font-weight: 500;
	font-size: 22px;
	line-height: 1.2;
	color: var(--ogs-saldo-titel);
	white-space: nowrap;
}
.ogs-saldo .ogs-saldo__datum { color: var(--ogs-saldo-titel); text-align: right; }

/* ---- Zonder eigen kop ------------------------------------------------------------------------
   Op /cadeaubon-saldo/ en in de popup van de veelgestelde vragen levert de omgeving de kop al.
   Dan valt de tekstkolom weg en zou het formulier de hele kaartbreedte pakken; een code is
   19 tekens, dus dat hoeft niet. */
.ogs-saldo.ogs-saldo--zonder-kop .ogs-saldo__formulier { max-width: 520px; }

/* ---- In de popup -----------------------------------------------------------------------------
   Het blok staat daar al in het antwoordvak van de widget. Zonder eigen vlak en rand blijft het
   bij één kaart met daarin het uitkomstvakje, in plaats van drie geneste vlakken in dezelfde
   kleur. Scheelt op mobiel bovendien 40px breedte, waardoor de uitkomstregel heel blijft. */
.ogs-saldo.ogs-saldo--popup .ogs-saldo__kaart {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
}
@media (max-width: 480px) {
	.ogs-saldo.ogs-saldo--popup .ogs-saldo__kaart { padding: 0; }
	/* In de smalle popup (270px) past "geldig tot en met  15 september 2028" niet naast elkaar.
	   Onder elkaar leest dat rustiger dan twee afgebroken regels. */
	.ogs-saldo.ogs-saldo--popup .ogs-saldo__regel { flex-direction: column; align-items: flex-start; gap: 2px; }
	.ogs-saldo.ogs-saldo--popup .ogs-saldo__datum { text-align: left; }
}

/* ---- Slotregel op /cadeaubon-saldo/ -----------------------------------------------------------
   Het thema kleurt een losse link in lopende tekst roze (#CC3366); de site zelf houdt inline
   links groen (#465C43, zie contact@ourgreenstory.com op de supportpagina). */
.elementor-widget.ogs-saldo-slotregel a {
	color: #465C43;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.elementor-widget.ogs-saldo-slotregel a:hover,
.elementor-widget.ogs-saldo-slotregel a:focus-visible { color: #22421E; }