/**
 * Altus — Mijn Account, herbouw van de Claude Design-handoff "Altus
 * winkelwagen ontwerp" (scherm "5a Accountpagina"). Hergebruikt bewust
 * dezelfde opmaaktaal als de winkelwagen-/afreken-/bedankpagina
 * (.altus-cartpagina__titel, __afronden-knop e.a.) zodat het er als 1
 * geheel uitziet. Zie altus-myaccount-page.php voor de ACHTERGROND.
 */

body.woocommerce-account {
	color: var(--altus-navy, #223a80);
}

.altus-mijnaccount__titel {
	margin-bottom: 8px;
}

/* -------------------------------------------------------------- lay-out -- */
.altus-mijnaccount__grid {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

@media (max-width: 900px) {
	.altus-mijnaccount__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.altus-mijnaccount__inhoud {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

/* -------------------------------------------------------------- zijbalk -- */
.altus-mijnaccount__zijbalk {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.altus-mijnaccount__welkom {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 16px;
	border-bottom: 2px solid #e2e6ec;
}

.altus-mijnaccount__label {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	color: #6b7788;
}

.altus-mijnaccount__naam {
	font-size: 22px;
	font-weight: 800;
}

.altus-mijnaccount__email {
	font-size: 14px;
	color: #6b7788;
}

.altus-mijnaccount__tabs {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.altus-mijnaccount__tab {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 16px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 800;
	color: var(--altus-navy, #223a80);
	text-decoration: none;
	background: transparent;
}

.altus-mijnaccount__tab:hover {
	background: var(--altus-grijs, #f2f4f8);
}

.altus-mijnaccount__tab--actief {
	background: var(--altus-navy, #223a80);
	color: #fff;
}

.altus-mijnaccount__uitloggen {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 16px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--altus-navy, #223a80);
	text-decoration: none;
}

.altus-mijnaccount__uitloggen:hover {
	background: var(--altus-grijs, #f2f4f8);
}

@media (max-width: 900px) {
	.altus-mijnaccount__tabs {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.altus-mijnaccount__tab {
		border: 2px solid #e2e6ec;
	}

	.altus-mijnaccount__tab--actief {
		border-color: var(--altus-navy, #223a80);
	}
}

/* -------------------------------------------------------------- kaarten -- */
.altus-mijnaccount__kaart {
	display: flex;
	flex-direction: column;
	background: var(--altus-grijs, #f2f4f8);
	border-radius: 8px;
}

.altus-mijnaccount__kaart-kop {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 24px 24px 16px;
	border-bottom: 2px solid #e2e6ec;
}

.altus-mijnaccount__kaart-kop h3 {
	margin: 0;
	font-size: 22px;
}

.altus-mijnaccount__kaart-kop a {
	font-size: 14px;
	font-weight: 600;
	color: var(--altus-navy, #223a80);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.altus-mijnaccount__laatste-rij {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
	gap: 24px;
	align-items: end;
	padding: 20px 24px 24px;
}

@media (max-width: 700px) {
	.altus-mijnaccount__laatste-rij {
		grid-template-columns: 1fr 1fr;
	}
}

.altus-mijnaccount__laatste-veld {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 15px;
	font-weight: 600;
}

.altus-mijnaccount__laatste-veld span {
	font-size: 12px;
	font-weight: 400;
	color: #6b7788;
}

.altus-mijnaccount__laatste-veld--totaal strong {
	font-size: 22px;
	font-weight: 800;
	color: var(--altus-oranje, #ff6a00);
}

.altus-mijnaccount__laatste-veld--totaal span {
	color: var(--altus-oranje, #ff6a00);
}

.altus-mijnaccount__status {
	display: flex;
	align-items: center;
	gap: 6px;
}

.altus-mijnaccount__status-stip {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: none;
}

.altus-mijnaccount__bekijk-knop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 48px;
	padding: 0 16px;
	border-radius: 8px;
	background: var(--altus-groen, #5ac061);
	color: #fff;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
}

.altus-mijnaccount__bekijk-knop:hover {
	background: #4a9f53;
	color: #fff;
}

.altus-mijnaccount__tegels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 560px) {
	.altus-mijnaccount__tegels {
		grid-template-columns: 1fr;
	}
}

.altus-mijnaccount__tegel {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	border: 2px solid #e2e6ec;
	border-radius: 8px;
}

.altus-mijnaccount__tegel-kop {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.altus-mijnaccount__tegel-kop span {
	font-weight: 800;
	font-size: 17px;
}

.altus-mijnaccount__tegel-kop a {
	font-size: 14px;
	font-weight: 600;
	color: var(--altus-navy, #223a80);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.altus-mijnaccount__tegel address,
.altus-mijnaccount__adreskaart address {
	font-style: normal;
	font-size: 15px;
	line-height: 1.5;
}

.altus-mijnaccount__leeg {
	margin: 0;
	color: #6b7788;
}

.altus-mijnaccount__leeg-inline {
	color: #6b7788;
}

/* ---------------------------------------------------------- bestellingen -- */
.altus-mijnaccount__bestellingen {
	display: flex;
	flex-direction: column;
}

.altus-mijnaccount__bestellingen-kop,
.altus-mijnaccount__bestellingen-rij {
	display: grid;
	grid-template-columns: 110px 110px minmax(0, 1fr) 90px 120px auto;
	gap: 16px;
	align-items: center;
}

.altus-mijnaccount__bestellingen-kop {
	padding: 0 0 8px;
	border-bottom: 2px solid #e2e6ec;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6b7788;
}

.altus-mijnaccount__bestellingen-totaal-kop {
	text-align: right;
}

.altus-mijnaccount__bestellingen-rij {
	padding: 16px 0;
	border-bottom: 1px solid #e2e6ec;
	font-size: 15px;
}

.altus-mijnaccount__bestellingen-nr {
	font-weight: 800;
}

.altus-mijnaccount__bestellingen-artikels {
	color: var(--altus-navy, #223a80);
}

.altus-mijnaccount__bestellingen-totaal {
	text-align: right;
	font-weight: 800;
	white-space: nowrap;
}

.altus-mijnaccount__bestellingen-acties {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

.altus-mijnaccount__bestellingen-knop {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	border: 1px solid #e2e6ec;
	border-radius: 8px;
	font-weight: 800;
	font-size: 13px;
	color: var(--altus-navy, #223a80);
	text-decoration: none;
	white-space: nowrap;
}

.altus-mijnaccount__bestellingen-knop--order-again,
.altus-mijnaccount__bestellingen-knop--pay {
	border-color: var(--altus-groen, #5ac061);
	background: var(--altus-groen, #5ac061);
	color: #fff;
}

@media (max-width: 900px) {
	.altus-mijnaccount__bestellingen-kop {
		display: none;
	}

	.altus-mijnaccount__bestellingen-rij {
		grid-template-columns: 1fr;
		gap: 6px;
		padding: 16px;
		background: var(--altus-grijs, #f2f4f8);
		border-radius: 8px;
		border-bottom: none;
		margin-bottom: 8px;
	}

	.altus-mijnaccount__bestellingen-totaal {
		text-align: left;
	}

	.altus-mijnaccount__bestellingen-acties {
		justify-content: flex-start;
		margin-top: 4px;
	}
}

.altus-mijnaccount__paginering {
	display: flex;
	gap: 12px;
	margin-top: 16px;
}

.altus-mijnaccount__paginering a {
	padding: 10px 16px;
	border: 1px solid #e2e6ec;
	border-radius: 8px;
	font-weight: 800;
	font-size: 14px;
	color: var(--altus-navy, #223a80);
	text-decoration: none;
}

/* -------------------------------------------------------------- adressen -- */
.altus-mijnaccount__sectie-tekst {
	margin: 0;
	font-size: 15px;
	color: #6b7788;
}

.altus-mijnaccount__adressen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 700px) {
	.altus-mijnaccount__adressen {
		grid-template-columns: 1fr;
	}
}

.altus-mijnaccount__adreskaart {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	background: var(--altus-grijs, #f2f4f8);
	border-radius: 8px;
}

.altus-mijnaccount__adreskaart-kop {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 2px solid #e2e6ec;
}

.altus-mijnaccount__adreskaart-nr {
	font-size: 22px;
	font-weight: 800;
	color: var(--altus-navy, #223a80);
	line-height: 1;
}

.altus-mijnaccount__adreskaart-kop span:last-child {
	font-weight: 800;
	font-size: 18px;
}

.altus-mijnaccount__adreskaart-knop {
	align-self: flex-start;
	display: flex;
	align-items: center;
	padding: 10px 14px;
	border: 1px solid #e2e6ec;
	border-radius: 8px;
	font-weight: 800;
	font-size: 14px;
	color: var(--altus-navy, #223a80);
	text-decoration: none;
	background: #fff;
}

/* -------------------------------------------------------------- formuliervelden (adres + accountgegevens) -- */
.altus-mijnaccount__adresvelden {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	max-width: 720px;
}

.altus-mijnaccount__rij {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

@media (max-width: 560px) {
	.altus-mijnaccount__adresvelden,
	.altus-mijnaccount__rij {
		grid-template-columns: 1fr;
	}
}

.altus-mijnaccount__gegevensformulier,
.altus-mijnaccount__adresformulier {
	max-width: 720px;
}

.altus-mijnaccount__gegevensformulier .form-row,
.altus-mijnaccount__adresformulier .form-row,
.altus-mijnaccount__adresvelden .form-row {
	margin: 0 0 16px;
}

.altus-mijnaccount__gegevensformulier label,
.altus-mijnaccount__adresformulier label,
.altus-mijnaccount__adresvelden label,
.altus-mijnaccount__label {
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	color: #6b7788;
}

.altus-mijnaccount__gegevensformulier .required,
.altus-mijnaccount__adresformulier .required {
	color: var(--altus-oranje, #ff6a00);
	text-decoration: none;
}

.altus-mijnaccount__gegevensformulier input:not([type="hidden"]):not([type="radio"]),
.altus-mijnaccount__gegevensformulier select,
.altus-mijnaccount__adresformulier input:not([type="hidden"]):not([type="radio"]),
.altus-mijnaccount__adresformulier select,
.altus-mijnaccount__adresvelden input:not([type="hidden"]):not([type="radio"]),
.altus-mijnaccount__adresvelden select,
.altus-mijnaccount__input {
	width: 100%;
	height: 44px;
	padding: 0 12px;
	background: var(--altus-grijs, #f2f4f8);
	border: 1px solid #dde;
	border-radius: 8px;
	font-size: 15px;
	color: var(--altus-navy, #223a80);
	font-family: inherit;
}

.altus-mijnaccount__gegevensformulier input:focus,
.altus-mijnaccount__adresformulier input:focus,
.altus-mijnaccount__adresvelden input:focus {
	outline: none;
	border-color: var(--altus-navy, #223a80);
}

.altus-mijnaccount__gegevensformulier p.form-row.woocommerce-invalid input,
.altus-mijnaccount__adresformulier p.form-row.woocommerce-invalid input {
	border-color: var(--altus-oranje, #ff6a00);
}

.altus-mijnaccount__adresvelden .select2-container,
.altus-mijnaccount__adresvelden select {
	width: 100% !important;
}

/* ---------------------------------------------- accountgegevens: eigen velden -- */
.altus-mijnaccount__sectie-kop {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding-top: 24px;
	margin-bottom: 16px;
	border-top: 2px solid #e2e6ec;
}

.altus-mijnaccount__sectie-kop:first-child {
	padding-top: 0;
	border-top: 0;
}

.altus-mijnaccount__sectie-nr {
	font-size: 32px;
	font-weight: 800;
	color: var(--altus-navy, #223a80);
	line-height: 1;
}

.altus-mijnaccount__sectie-titel {
	font-size: 22px;
	font-weight: 800;
}

.altus-mijnaccount__veldgroep-label {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 8px;
}

.altus-mijnaccount__segment {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	max-width: 420px;
	margin-bottom: 16px;
	border: 2px solid var(--altus-navy, #223a80);
	border-radius: 8px;
	overflow: hidden;
}

.altus-mijnaccount__segment-knop {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 46px;
	padding: 12px 16px;
	box-sizing: border-box;
	font-weight: 800;
	font-size: 15px;
	color: var(--altus-navy, #223a80);
	cursor: pointer;
	text-align: center;
}

.altus-mijnaccount__segment-knop input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.altus-mijnaccount__segment-knop--actief {
	background: var(--altus-navy, #223a80);
	color: #fff;
}

.altus-mijnaccount__verborgen {
	display: none;
}

.altus-mijnaccount__opslaan-knop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 52px;
	padding: 0 20px;
	border: 0;
	border-radius: 8px;
	background: var(--altus-groen, #5ac061);
	color: #fff;
	font-weight: 800;
	font-size: 16px;
	cursor: pointer;
}

/* ------------------------------------------------------------------ uitgelogd --
   Wrapt WooCommerce's ECHTE [woocommerce_my_account]-uitvoer (login +
   registreren, incl. #customer_login/.u-columns/.col-1/.col-2 — WC's eigen
   klassen, hier enkel herstijld) — zie altus_account_uitgelogd_html() in
   altus-myaccount-page.php. */

.altus-mijnaccount-uitgelogd__kop {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
	font-size: 26px;
	font-weight: 800;
	color: var(--altus-navy, #223a80);
}

.altus-mijnaccount-uitgelogd #customer_login.u-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}

@media (max-width: 780px) {
	.altus-mijnaccount-uitgelogd #customer_login.u-columns {
		grid-template-columns: 1fr;
	}
}

.altus-mijnaccount-uitgelogd .col-1,
.altus-mijnaccount-uitgelogd .col-2 {
	padding: 24px;
	border: 1px solid #e2e6ec;
	border-radius: 12px;
}

/* WooCommerce's eigen adresvakken (facturatie/verzending naast elkaar) op het
   dashboard zelf ("Mijn Account" ingelogd) — los van de hierboven al
   afgehandelde uitgelogde login/registreer-kolommen. De echte oorzaak zit op
   de OUDER (.u-columns.col2-set): die is display:grid met een vaste
   grid-template-columns van 1 kolom (~300px), dus width:100% op de kolommen
   zelf hielp niets — 100% van een grid-item slaat op de eigen (al vaste)
   grid-kolombreedte, niet op de volle containerbreedte. Op mobiel (375px)
   liep dat kader daardoor net buiten het scherm (gevonden tijdens de mobiele
   controle van de hele site, 29/09/2026). */
@media (max-width: 700px) {
	.u-columns.col2-set {
		grid-template-columns: 1fr !important;
	}

	.u-column1,
	.u-column2 {
		width: 100% !important;
		float: none !important;
	}
}

.altus-mijnaccount-uitgelogd h2 {
	margin-top: 0;
	font-size: 20px;
	font-weight: 800;
	color: var(--altus-navy, #223a80);
}

.altus-mijnaccount-uitgelogd .form-row label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	color: #6b7788;
}

.altus-mijnaccount-uitgelogd .required {
	color: var(--altus-oranje, #ff6a00);
	text-decoration: none;
}

.altus-mijnaccount-uitgelogd input:not([type="checkbox"]):not([type="radio"]) {
	width: 100%;
	height: 44px;
	padding: 0 12px;
	background: var(--altus-grijs, #f2f4f8);
	border: 1px solid #dde;
	border-radius: 8px;
	font-size: 15px;
	color: var(--altus-navy, #223a80);
	font-family: inherit;
	box-sizing: border-box;
}

.altus-mijnaccount-uitgelogd input:focus {
	outline: none;
	border-color: var(--altus-navy, #223a80);
}

.altus-mijnaccount-uitgelogd .woocommerce-form-row--wide,
.altus-mijnaccount-uitgelogd .form-row {
	margin: 0 0 16px;
}

.altus-mijnaccount-uitgelogd button[type="submit"] {
	height: 48px;
	padding: 0 28px;
	border: 0;
	border-radius: 8px;
	background: var(--altus-oranje, #ff6a00);
	color: #fff;
	font-weight: 800;
	font-size: 15px;
	cursor: pointer;
}

.altus-mijnaccount-uitgelogd button[type="submit"]:hover {
	background: #e55f00;
}

.altus-mijnaccount-uitgelogd .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	font-size: 14px;
}

.altus-mijnaccount-uitgelogd .woocommerce-LostPassword {
	margin-top: 12px;
	font-size: 14px;
}

.altus-mijnaccount-uitgelogd__info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-top: 48px;
}

@media (max-width: 780px) {
	.altus-mijnaccount-uitgelogd__info-grid {
		grid-template-columns: 1fr;
	}
}

.altus-mijnaccount-uitgelogd__info-sub {
	font-weight: 700;
	margin-top: 0;
}

.altus-mijnaccount-uitgelogd__usps {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 40px;
	padding: 24px;
	background: #fdeee1;
	border-radius: 12px;
}

@media (max-width: 780px) {
	.altus-mijnaccount-uitgelogd__usps {
		grid-template-columns: 1fr;
	}
}

.altus-mijnaccount-uitgelogd__usp {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.altus-mijnaccount-uitgelogd__usp i {
	margin-top: 3px;
	font-size: 20px;
	color: var(--altus-navy, #223a80);
}

.altus-mijnaccount-uitgelogd__usp div {
	display: flex;
	flex-direction: column;
}

.altus-mijnaccount-uitgelogd__usp strong {
	color: var(--altus-navy, #223a80);
}

.altus-mijnaccount-uitgelogd__usp span {
	font-size: 13px;
	color: #6b7788;
}

.altus-mijnaccount__opslaan-knop:hover {
	background: #4a9f53;
}