/* ==========================================================================
   REKO Raalte — mijn account
   --------------------------------------------------------------------------
   Markup: WooCommerce' myaccount-templates plus de core-override
   woocommerce/myaccount/form-login.php (login + registreren naast elkaar) en de
   inlogpopup uit inc/account-auth.php.

   De kolomkoppen van de besteltabel komen uit inc/shop.php
   (woocommerce_account_orders_columns) — inclusief de kolom order-actions, die
   op de oude site ontbrak waardoor klanten niet meer kunnen betalen/bekijken/
   annuleren.
   ========================================================================== */

.woocommerce-account {
	--reko-acc-line: var(--reko-line);
	--reko-acc-muted: #777777;
}

/* ==========================================================================
   1. Paginakop
   ========================================================================== */

.woocommerce-account .reko-entry__title,
.woocommerce-account .reko-entry__content > h1 {
	padding-bottom: 30px;
	font-family: var(--reko-font-heading);
	font-size: 50px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--reko-black);
}

@media (max-width: 767px) {
	.woocommerce-account .reko-entry__title,
	.woocommerce-account .reko-entry__content > h1 { font-size: 35px; }
}

/* ==========================================================================
   2. Navigatie + inhoud
   ========================================================================== */

.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	width: 100%;
	margin-bottom: 20px;
}

.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

@media (min-width: 981px) {
	.woocommerce-account .woocommerce-account,
	.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content { width: 100%; }

	.woocommerce-account .woocommerce {
		display: grid;
		grid-template-columns: 22.75% 73.25%;
		column-gap: 4%;
		align-items: start;
	}

	/* Meldingen mogen de twee kolommen niet verstoren. */
	.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }

	.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 0; }
}

/* Niet-ingelogd: het loginformulier vult de hele breedte (geen navigatie). */
.woocommerce-account.woocommerce-no-js .woocommerce,
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
	display: block;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--reko-acc-line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }

/* Navigatielinks in het groen (zoals gemeten). */
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 10px 0;
	font-family: var(--reko-font-body);
	font-size: 16px;
	color: var(--reko-green);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a[aria-current="page"] {
	color: var(--reko-black);
	text-decoration: none;
}

/* ==========================================================================
   3. Besteltabel
   ========================================================================== */

.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.shop_table {
	width: 100%;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
}

.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
	padding: 12px 10px;
	border: 0;
	border-bottom: 1px solid var(--reko-acc-line);
	font-family: var(--reko-font-body);
	font-size: 14px;
	text-align: left;
	vertical-align: middle;
}

.woocommerce-account table.shop_table thead th {
	background: var(--reko-surface-2);
	font-family: var(--reko-font-heading);
	font-size: 18px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--reko-black);
}

/* De actiekolom rechts, knoppen klein en naast elkaar. */
.woocommerce-account td.woocommerce-orders-table__cell-order-actions {
	text-align: right;
	white-space: nowrap;
}

.woocommerce-account td.woocommerce-orders-table__cell-order-actions a.button {
	display: inline-block;
	margin: 2px 0 2px 6px;
	padding: 2px 14px 0;
	font-family: var(--reko-font-heading);
	font-size: 16px;
	line-height: 1.7;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.woocommerce-account td.woocommerce-orders-table__cell-order-actions a.button {
		margin-left: 0;
		margin-right: 6px;
	}
}

/* ==========================================================================
   4. Formulieren (inloggen, registreren, adres, accountgegevens)
   Markup van het loginblok komt uit de core-override myaccount/form-login.php.
   ========================================================================== */

.woocommerce-account .woocommerce-form,
.woocommerce-account form.woocommerce-EditAccountForm,
.woocommerce-account form.woocommerce-address-fields {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

/*
 * De koppen van de accountformulieren, GESCOPED op .woocommerce.
 *
 * Hier stond `.woocommerce-account h3` (één class + één type). Dat is precies
 * even specifiek als `.reko-reviews__head h3` in layout.css, en pages/*.css
 * laadt ná layout.css — dus won deze regel en zakte de kop van de reviewband
 * ("Deze klanten gingen u voor!") op /mijn-account/ naar 24px. Gemeten:
 *
 *   live  @1512 64px   @980 50px   @767 40px   (h3 in et_pb_text_1_tb_footer)
 *   lokaal vóór 24px / 24px / 24px             (h3 in .reko-reviews__head)
 *
 * Met .woocommerce ervoor (twee classes + één type) kan de regel de reviewband
 * niet meer raken — die staat buiten div.woocommerce — en pakt layout.css zijn
 * eigen 64/50/40-ladder weer op. Een extra class in plaats van !important,
 * zodat de laadvolgorde niet meer meedoet.
 */
.woocommerce-account .woocommerce h2,
.woocommerce-account .woocommerce h3,
.woocommerce-account .woocommerce legend {
	font-family: var(--reko-font-heading);
	font-size: 40px;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	color: var(--reko-black);
}

.woocommerce-account .woocommerce h3,
.woocommerce-account .woocommerce legend { font-size: 24px; }

/*
 * Op tablet én telefoon is de formulierkop 30px en niet 40px. Twee bronnen:
 *
 *   live /mijn-account/ (uitgelogd), h2 "Registreren":
 *       @1512 40px/40px   @980 30px/30px   @767 30px/30px
 *   Figma, kop "Registreren" in het Login-frame:
 *       Liggende tablet 1024px  node 820:32287  ->  text-[30px], blok 122x36
 *       Mobiel 393px            node 966:14403  ->  text-[30px], blok 122x36
 *
 * Eén mediaquery volstaat dus; telefoon erft de tabletwaarde, net als live.
 */
@media (max-width: 980px) {
	.woocommerce-account .woocommerce h2 { font-size: 30px; }
}

.woocommerce-account .form-row,
.woocommerce-account p.form-row {
	margin: 0 0 16px;
	padding: 0;
}

/* Live meet het label van "E-mailadres" op /mijn-account/ zonder ondermarge
   (margin: 0px); de 4px die hier stond duwde het veld naar beneden. */
.woocommerce-account label {
	display: block;
	margin-bottom: 0;
	font-family: var(--reko-font-body);
	font-size: 14px;
	color: var(--reko-black);
}

.woocommerce-account .required { color: var(--reko-green); }

/* De eerste selector heeft bewust drie classes + twee types: woocommerce.css zet
   `.woocommerce form .form-row .input-text{border-radius:var(--wc-form-border-radius)}`
   en dat verslaat een kortere selector. */
.woocommerce-account .woocommerce form .form-row input.input-text,
.woocommerce-account .woocommerce form .form-row select,
.woocommerce-account .woocommerce form .form-row textarea,
.woocommerce-account input.input-text,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"],
.woocommerce-account select,
.woocommerce-account textarea {
	width: 100%;
	/* Gemeten op live /mijn-account/ (uitgelogd, e-mailveld van het
	   registratieblok): 58px hoog met padding 16px en regelhoogte 23,8px — de
	   doorgeërfde 1.7em van Divi op 14px. Met de 10px 12px die hier stond werd
	   het veld 40px. De tekstkleur is op live #999999, niet zwart. */
	padding: 16px;
	border: 1px solid var(--reko-field);
	border-radius: 0;
	background: var(--reko-white);
	font-family: var(--reko-font-body);
	font-size: 14px;
	line-height: 23.8px;
	color: #999999;
}

.woocommerce-account .woocommerce-form-login__rememberme,
.woocommerce-account .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--reko-font-body);
	font-size: 14px;
}

.woocommerce-account .woocommerce-form-login__rememberme input,
.woocommerce-account .woocommerce-form__input-checkbox { accent-color: var(--reko-green); }

.woocommerce-account .woocommerce-LostPassword a,
.woocommerce-account .woocommerce-privacy-policy-link { color: var(--reko-green); }

/* Registreer-/inlogknop. Live meet padding 3px 24px 0 en GEEN hoofdletters
   (text-transform: none) op button.woocommerce-form-register__submit; main.css
   geeft elke .button 35px zijruimte en uppercase. */
.woocommerce-account .woocommerce-form button.button,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account .woocommerce-form-login__submit {
	padding: 3px 24px 0;
	text-transform: none;
}

/* De twee kolommen van het core-loginformulier (inloggen | registreren). */
@media (min-width: 768px) {
	.woocommerce-account .woocommerce-form-login,
	.woocommerce-account .woocommerce-form-register { max-width: 100%; }

	.woocommerce-account .u-columns.col2-set {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 4%;
	}

	.woocommerce-account .u-columns.col2-set .col-1,
	.woocommerce-account .u-columns.col2-set .col-2 {
		float: none;
		width: 100%;
	}
}

/* ==========================================================================
   5. Inlogpopup van de core (inc/account-auth.php)
   De core-CSS geeft die velden en knop 2px radius; de huisstijl is hoekig.
   ========================================================================== */

.sellabees-popup__box,
.sellabees-login__field input,
.sellabees-login__btn {
	border-radius: 0;
}

.sellabees-login__field input,
.sellabees-login__btn,
.sellabees-login__register,
.sellabees-login__msg {
	font-family: var(--reko-font-body);
}

.sellabees-login__btn {
	font-family: var(--reko-font-heading);
	font-size: 20px;
	letter-spacing: 0;
}

.sellabees-popup__title {
	font-family: var(--reko-font-heading);
	text-transform: uppercase;
}

.sellabees-account-haslogin {
	margin-top: 16px;
	font-family: var(--reko-font-body);
	font-size: 14px;
}

.sellabees-account-haslogin a { color: var(--reko-green); }

/* ==========================================================================
   6. Meldingen
   ========================================================================== */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info {
	margin: 0 0 20px;
	padding: 15px 20px;
	border: 0;
	border-top: 3px solid var(--reko-green);
	border-radius: 0;
	background: var(--reko-surface-3);
	font-family: var(--reko-font-body);
	font-size: 14px;
	color: var(--reko-black);
}

.woocommerce-account .woocommerce-error { border-top-color: #d64545; }

/* Bestellingen-paginering. */
.woocommerce-account .woocommerce-pagination--without-numbers {
	display: flex;
	gap: 10px;
	margin-top: 20px;
	border: 0;
	text-align: left;
}