/* Aanmeldblok — TIFA Shop Tools, module Aanmelding. */

.tshop-account-blok h2 {
	margin-top: 0;
}

/* Zonder JavaScript staan uitleg en formulier gewoon onder elkaar.
   Met JavaScript wisselt het blok tussen de twee stappen. */
.tshop-account-blok.tshop-js-aan .tshop-stap-formulier {
	display: none;
}

.tshop-account-blok.tshop-js-aan.is-open .tshop-stap-formulier {
	display: block;
}

.tshop-account-blok.tshop-js-aan.is-open .tshop-stap-uitleg {
	display: none;
}

.tshop-punten {
	list-style: none;
	margin: 1em 0 1.5em;
	padding: 0;
}

.tshop-punten li {
	position: relative;
	padding-left: 1.9em;
	margin-bottom: 0.6em;
}

/* Vinkje in de huisstijl. Kleur volgt de accentkleur van het thema als
   die als variabele beschikbaar is, met het TIFA-goud als terugval. */
/* Vinkje in de huisstijl: gevulde ronde schijf met een wit vinkje erin,
   zoals de opsomming op de accountpagina. De kleur volgt de accentkleur van
   het thema als die als variabele beschikbaar is, met het TIFA-goud als
   terugval. */
.tshop-punten li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.25em;
	height: 1.25em;
	border-radius: 50%;
	background: var( --tshop-accent, #b3933f );
}

.tshop-punten li::after {
	content: "";
	position: absolute;
	left: 0.45em;
	top: 0.42em;
	width: 0.3em;
	height: 0.6em;
	border: solid #fff;
	border-width: 0 0.14em 0.14em 0;
	transform: rotate( 45deg );
}

.tshop-knop-aanmelden {
	margin-top: 0.5em;
}

.tshop-klanttype {
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	margin: 0 0 1.5em;
	padding: 0.75em 1em 1em;
}

.tshop-klanttype legend {
	font-weight: 600;
	padding: 0 0.4em;
}

.tshop-keuze {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-right: 1.5em;
}

.tshop-keuze input {
	margin: 0;
}

.tshop-zakelijk[hidden] {
	display: none;
}

.tshop-aanmeldformulier h4 {
	margin: 1.5em 0 0.75em;
}

.tshop-huisnummer {
	display: flex;
	gap: 0.5em;
}

.tshop-huisnummer input:first-child {
	flex: 2 1 0;
}

.tshop-huisnummer input:last-child {
	flex: 1 1 0;
}

.tshop-hint {
	display: block;
	font-size: 0.85em;
	color: #666;
	margin-top: 0.25em;
}

.tshop-adresmelding,
.tshop-melding {
	margin: 0 0 1em;
	padding: 0.6em 0.8em;
	border-radius: 4px;
	background: #f3f4f6;
	font-size: 0.9em;
}

.tshop-adresmelding.is-goed,
.tshop-melding.is-goed {
	background: #e8f5ec;
}

.tshop-adresmelding.is-fout,
.tshop-adresmelding.is-kiezen,
.tshop-melding.is-fout {
	background: #fdf3e3;
}

.tshop-fouten {
	margin: 0 0 1.2em;
	padding: 0.8em 1em 0.8em 2.2em;
	background: #fdecea;
	border-left: 4px solid #c0392b;
	border-radius: 4px;
}

.tshop-fouten li {
	margin-bottom: 0.3em;
}

.tshop-versturen {
	margin-top: 1.5em;
}

.tshop-opnieuw {
	margin-top: 1em;
}

/* Vangveld voor invulrobots: onzichtbaar, maar niet display:none —
   dat wordt door een deel van de robots herkend en overgeslagen. */
.tshop-vangveld {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Twee kolommen: inloggen naast aanmelden. Onder de 780 px onder elkaar,
   met inloggen eerst — wie al klant is, is de grootste groep. */
.tshop-kolommen {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 3rem;
	align-items: start;
}

.tshop-toon-inloggen .tshop-kolommen,
.tshop-toon-aanmelden .tshop-kolommen {
	grid-template-columns: 1fr;
	max-width: 34rem;
}

@media (max-width: 780px) {
	.tshop-kolommen {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

.tshop-kolom-inloggen {
	background: #ececec;
	padding: 2.25rem 2rem;
}

/* De knoppen dragen dezelfde klassen als die van WooCommerce, zodat ze de
   stijl van het thema meepakken. Daarbovenop staat hier de kleur van de
   inlogknop op de accountpagina, zodat de twee pagina's er hetzelfde
   uitzien. Wil je een andere kleur, zet dan in je eigen CSS:

       .tshop-account-blok { --tshop-knop: #b3933f; --tshop-knop-tekst: #fff; }

   Dan hoef je niets in de plugin te wijzigen. */
.tshop-account-blok .button {
	background-color: var( --tshop-knop, #1d1d1b );
	color: var( --tshop-knop-tekst, #ffffff );
	border: none;
	cursor: pointer;
}

.tshop-account-blok .button:hover,
.tshop-account-blok .button:focus {
	background-color: var( --tshop-knop-hover, #333333 );
	color: var( --tshop-knop-tekst, #ffffff );
}

.tshop-onthoud {
	margin: 0 0 1em;
}

.tshop-onthoud label {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.tshop-vergeten {
	margin: 0.75em 0 0;
	font-size: 0.9em;
}


/* Zodra het formulier openklapt is dát de taak. Het inlogvak verdwijnt en
   het formulier krijgt de volle breedte; wie zich vergist heeft, gebruikt
   de link eronder om terug te gaan. Zonder JavaScript gebeurt dit niet en
   staan beide kolommen gewoon naast elkaar — dan is er ook niets weg te
   klappen. */
.tshop-account-blok.tshop-js-aan.is-open .tshop-kolommen {
	grid-template-columns: 1fr;
}

.tshop-account-blok.tshop-js-aan.is-open .tshop-kolom-inloggen {
	display: none;
}

.tshop-uitleg-afbeelding {
	margin: 0 0 1.5em;
}

.tshop-uitleg-afbeelding img {
	max-width: 100%;
	height: auto;
	display: block;
}

.tshop-terug {
	margin: 1.25em 0 0;
}

.tshop-knop-terug {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var( --tshop-accent, #b3933f );
	text-decoration: underline;
	cursor: pointer;
}

.tshop-privacy {
	margin: 1.5em 0 0;
	font-size: 0.9em;
	color: #555;
}