/* ===============================================================
   AANMELDEN EN INLOGGEN ALS KAPPER

   Eigen bestand, en niet achteraan style.css. LiteSpeed voegt
   stylesheets samen en levert het samengevoegde bestand onder
   dezelfde naam uit. Een regel die je onderaan style.css bijzet
   bereikt daardoor wel een nieuwe bezoeker en niet iemand die hier
   vorige week ook was. Dit bestand wordt ingeladen met filemtime
   als versie, dus elke wijziging krijgt vanzelf een nieuw adres.

   Wordt alleen ingeladen op /kapper/, /kapper/inloggen/ en
   /mijn-account/. Zie hoofdstuk 20 in functions.php.

   Knopkleur staat hier niet. De knoppen dragen de klassen
   .button.primary en .button.is-outline van het thema, zodat koper
   op één plek blijft staan: de thema-instelling.
   =============================================================== */

.hs-aanmeld,
.hs-inlog,
#content .account-login-inner {
	/* Koper en zand alleen als accent: randen, focus, kleine vlakken. */
	--hs-koper: #9A6432;
	--hs-zand:  #C9A96E;

	max-width: 34rem;
	margin: 0 auto 2.4rem;
	padding: 1.9rem 1.8rem 2rem;
	background: var(--card, #fff);
	border: 1px solid var(--line, rgba(20, 17, 14, .11));
	border-left: 2px solid var(--hs-koper);
	border-radius: 2px;
}

/* De registratiekolom ernaast op /mijn-account/ hoort even hoog te
   beginnen als het inlogvak, anders staat er een trapje. */
#content .account-container {
	padding: 0;
	border: 0;
	background: none;
}

/* ---------------------------------------------------------------
   Koppen en uitleg
   --------------------------------------------------------------- */

.hs-aanmeld-kop,
.hs-inlog-kop,
#content .account-login-inner h2 {
	margin: 0 0 .35rem;
	font-family: var(--disp, "Syne", system-ui, sans-serif);
	font-weight: 700;
	font-size: 1.45rem;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--text, #14110E);
}

.hs-aanmeld-uitleg,
.hs-inlog-uitleg {
	margin: 0 0 1.4rem;
	max-width: 42ch;
	font-size: .94rem;
	line-height: 1.55;
	color: var(--text-2, #4A443D);
}

/* ---------------------------------------------------------------
   Labels en velden

   Het label is hier hetzelfde kleine hoofdletterlabel als elders op
   de site, zodat het formulier naast een productpagina thuishoort
   en niet als los eiland leest.
   --------------------------------------------------------------- */

.hs-aanmeld-label,
.hs-inlog-label,
#content .account-login-inner label[for="username"],
#content .account-login-inner label[for="password"] {
	display: block;
	margin: 0 0 .35rem;
	font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--muted, #7C746A);
}

.hs-aanmeld-veld,
.hs-inlog-veld,
#content .account-login-inner .input-text {
	width: 100%;
	margin: 0 0 1rem;
	padding: .7rem .85rem;
	font-family: inherit;
	font-size: .96rem;
	color: var(--text, #14110E);
	background: #fff;
	border: 1px solid var(--line, rgba(20, 17, 14, .11));
	border-radius: 2px;
	box-shadow: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.hs-aanmeld-veld:focus,
.hs-inlog-veld:focus,
#content .account-login-inner .input-text:focus {
	outline: 0;
	border-color: var(--hs-koper);
	box-shadow: 0 0 0 3px rgba(201, 169, 110, .32);
}

textarea.hs-aanmeld-veld {
	min-height: 4.5rem;
	resize: vertical;
}

/* ---------------------------------------------------------------
   Btw-nummer met de knop Ophalen ernaast
   --------------------------------------------------------------- */

/* stretch, zodat de knop even hoog wordt als het veld ernaast. Een vaste
   hoogte hier zou uit de pas lopen zodra de knop van het thema verandert. */
.hs-aanmeld-rij {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: stretch;
}

.hs-aanmeld-rij .hs-aanmeld-veld {
	flex: 1 1 12rem;
	margin-bottom: 0;
}

.hs-aanmeld-rij .hs-aanmeld-knop {
	flex: 0 0 auto;
	margin: 0;
	line-height: 1;
}

.hs-aanmeld-hint {
	margin: .5rem 0 1.2rem;
	font-size: .84rem;
	color: var(--muted, #7C746A);
}

/* ---------------------------------------------------------------
   Wat het opzoeken teruggaf

   Zand als vlak voor een vondst, een rode rand voor een afwijzing.
   De tekst blijft in beide gevallen gewoon leesbaar donker: rood op
   rood is een melding die je moet ontcijferen.
   --------------------------------------------------------------- */

.hs-aanmeld-gevonden {
	margin: 0 0 1.2rem;
	padding: .8rem .95rem;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--text, #14110E);
	background: rgba(201, 169, 110, .14);
	border: 1px solid rgba(154, 100, 50, .3);
	border-radius: 2px;
}

.hs-aanmeld-gevonden.hs-aanmeld-fout {
	background: rgba(178, 46, 38, .07);
	border-color: rgba(178, 46, 38, .38);
}

/* ---------------------------------------------------------------
   Het blok met de overige velden

   Klapt dicht zolang het btw-nummer nog niet opgezocht is. De lijn
   ervoor maakt zichtbaar dat er iets bij is gekomen.
   --------------------------------------------------------------- */

.hs-aanmeld-rest {
	margin: 0 0 .6rem;
	padding: 1.2rem 0 0;
	border-top: 1px solid var(--line-2, rgba(20, 17, 14, .06));
}

.hs-aanmeld-rest[hidden] {
	display: none;
}

/* ---------------------------------------------------------------
   Knoppen

   Alleen breedte en ruimte. De kleur komt van .button.primary.
   --------------------------------------------------------------- */

.hs-aanmeld-knop-hoofd,
.hs-inlog-knop,
#content .account-login-inner .woocommerce-form-login__submit {
	width: 100%;
	margin: .4rem 0 0;
}

/* ---------------------------------------------------------------
   Meldingen en losse regels
   --------------------------------------------------------------- */

.hs-aanmeld .woocommerce-error,
.hs-inlog .woocommerce-error,
#content .account-login-inner .woocommerce-error {
	margin: 0 0 1.2rem;
	padding: .8rem .95rem;
	font-size: .9rem;
	list-style: none;
	background: rgba(178, 46, 38, .07);
	border: 1px solid rgba(178, 46, 38, .38);
	border-radius: 2px;
	color: var(--text, #14110E);
}

.hs-inlog-gelukt,
.hs-inlog-let-op {
	max-width: 34rem;
	margin: 0 auto 1.2rem;
	padding: .85rem 1rem;
	font-size: .93rem;
	line-height: 1.55;
	background: rgba(201, 169, 110, .14);
	border-left: 2px solid var(--hs-koper);
	border-radius: 2px;
	color: var(--text-2, #4A443D);
}

#content .account-login-inner .woocommerce-form-login__rememberme {
	display: block;
	margin: 0 0 .8rem;
	font-size: .9rem;
	color: var(--text-2, #4A443D);
}

#content .account-login-inner .lost_password {
	margin: 1rem 0 0;
	font-size: .88rem;
}

#content .account-login-inner .lost_password a {
	color: var(--hs-koper);
	border-bottom: 1px solid rgba(154, 100, 50, .35);
}

/* De regel naar het aanmeldformulier staat ook op de winkelwagen en
   de productpagina, en dus niet hier: die staat in hs-shop.css, dat
   overal meekomt. */

/* ---------------------------------------------------------------
   Klein scherm
   --------------------------------------------------------------- */

@media (max-width: 549px) {

	.hs-aanmeld,
	.hs-inlog,
	#content .account-login-inner {
		padding: 1.4rem 1.15rem 1.5rem;
	}

	.hs-aanmeld-kop,
	.hs-inlog-kop,
	#content .account-login-inner h2 {
		font-size: 1.28rem;
	}

	.hs-aanmeld-rij .hs-aanmeld-knop {
		width: 100%;
	}
}