/* ==========================================================================
   V20 — woocommerce.css
   Dark/neon theming for WooCommerce pages (My account, login, register,
   addresses, orders, order-received, notices). Overrides Woo core CSS.
   Loaded after Woo defaults so plain overrides win.
   ========================================================================== */

.woocommerce,
.woocommerce-account .woocommerce,
.woocommerce-page {
	color: #e5e7eb;
}

/* ---- Headings ---- */
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce-MyAccount-content h2,
.woocommerce-account .entry-title,
.woocommerce-order-details h2,
.woocommerce-column__title {
	color: #fff;
	font-weight: 700;
}

/* ==========================================================================
   Forms & inputs
   ========================================================================== */
.woocommerce form .form-row label,
.woocommerce-form__label,
.woocommerce form .form-row,
.woocommerce-account label {
	color: #cbd5e1;
}

.woocommerce .required,
.woocommerce .required-field {
	color: var(--v20-neon);
	border: 0;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-Input,
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.woocommerce .select2-container .select2-selection,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="tel"],
.woocommerce-account input[type="password"] {
	width: 100%;
	padding: .8rem .9rem;
	color: #fff;
	background: #16181d;
	border: 1px solid var(--v20-border);
	border-radius: 8px;
	line-height: 1.3;
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-Input:focus,
.woocommerce input.input-text:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
	outline: none;
	border-color: var(--v20-neon);
	box-shadow: 0 0 0 3px rgba(0, 255, 136, .15);
}

.woocommerce input::placeholder,
.woocommerce textarea::placeholder {
	color: #6b7280;
}

/* Keep autofilled fields dark. text-fill-color needs !important — Chrome
   forces the glyph colour on autofill harder than the background. */
.woocommerce input:-webkit-autofill,
.woocommerce input:-webkit-autofill:hover,
.woocommerce input:-webkit-autofill:focus,
.woocommerce input:-webkit-autofill:active {
	-webkit-text-fill-color: #fff !important;
	-webkit-box-shadow: 0 0 0 1000px #16181d inset;
	caret-color: #fff;
}

/* Password reveal eye + inline show/hide. */
.woocommerce-password-hint {
	color: #9ca3af;
}
.woocommerce form .password-input {
	width: 100%;
}
/* WooCommerce's show/hide eye is a hardcoded black SVG background image
   (fill #111111). Override both icon states with a neon-filled version. */
.woocommerce .show-password-input::before {
	background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%2300ff88"/></svg>') !important;
}
.woocommerce .show-password-input.display-password::before {
	background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%2300ff88"/></svg>') !important;
}

/* Remember-me / checkbox rows. */
.woocommerce-form-login__rememberme,
.woocommerce form .form-row .woocommerce-form__input-checkbox {
	color: #cbd5e1;
}
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"] {
	accent-color: var(--v20-neon);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button,
.woocommerce-account button.button,
.woocommerce #payment #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .8rem 1.6rem;
	color: #000;
	background-color: var(--v20-neon);
	border: none;
	border-radius: 8px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .3s ease, box-shadow .3s ease, color .3s ease;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover,
.woocommerce #payment #place_order:hover {
	color: #000;
	background-color: #fff;
	box-shadow: 0 0 15px var(--v20-neon);
}

/* Secondary / outline buttons (e.g. "Cancel", view order). */
.woocommerce a.button.wc-forward,
.woocommerce-MyAccount-content .button.view {
	background-color: transparent;
	color: var(--v20-neon);
	border: 1px solid var(--v20-neon);
}
.woocommerce a.button.wc-forward:hover,
.woocommerce-MyAccount-content .button.view:hover {
	background-color: var(--v20-neon);
	color: #000;
	box-shadow: none;
}

/* ==========================================================================
   Login / register card wrappers
   ========================================================================== */
.woocommerce-account .u-columns,
.woocommerce .col2-set {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
}
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
	flex: 1 1 300px;
	float: none;
	width: auto;
}

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register,
.woocommerce form.woocommerce-ResetPassword,
.woocommerce-account .woocommerce-EditAccountForm {
	padding: 2rem;
	background: var(--v20-card-bg);
	border: 1px solid var(--v20-border);
	border-radius: 12px;
}

/* Lost/reset password form — 60% width, left aligned (full width on mobile). */
.woocommerce-account:not(.logged-in) .woocommerce > form.woocommerce-ResetPassword {
	flex: 0 1 60%;
	width: 60%;
	max-width: 100%;
	align-self: flex-start;
	margin-top: 0;
}

@media (max-width: 767px) {
	.woocommerce-account:not(.logged-in) .woocommerce > form.woocommerce-ResetPassword {
		flex-basis: 100%;
		width: 100%;
	}
}

.woocommerce form.woocommerce-ResetPassword .v20-reset-intro {
	margin: 0 0 1.5rem;
	color: #9ca3af;
	line-height: 1.6;
}

/* The intro's forced line break is desktop/tablet only — let it wrap
   naturally on mobile. */
@media (max-width: 767px) {
	.v20-reset-br {
		display: none;
	}
}

.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
	margin-top: .5rem;
}

/* Edit-account / edit-address save buttons need a little breathing room.
   Block-level flex (content width) so the top margin actually renders — an
   inline-flex button ignores vertical margins for layout. */
.woocommerce button[name="save_account_details"],
.woocommerce button[name="save_address"] {
	display: flex;
	width: fit-content;
	margin-top: 10px;
}

.woocommerce-LostPassword a {
	color: var(--v20-neon);
}

/* ==========================================================================
   Edit-address — billing + shipping forms on one styled page
   ========================================================================== */
.v20-address-intro {
	margin: 0 0 1.5rem;
	color: #9ca3af;
}

.v20-address-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.v20-address-card {
	padding: 1.75rem;
	background: var(--v20-card-bg);
	border: 1px solid var(--v20-border);
	border-radius: 12px;
}

.v20-address-card__head {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--v20-border);
}

.v20-address-card__bullet {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #00ff88;
}

.v20-address-card__title {
	margin: 0;
	color: #fff;
	font-size: 1.15rem;
	font-weight: 700;
}

/* ==========================================================================
   Login page — promo panel filling the space beside the login form
   ========================================================================== */
/* Keep the login form to a sensible width; promo takes the rest. */
.woocommerce-account:not(.logged-in) .woocommerce > form.login {
	flex: 0 1 440px;
	align-self: flex-start;
	margin-top: 0;   /* drop WooCommerce's default 2em top margin */
}

/* The account page title reads "Mijn account" and the form carries its own
   "Inloggen" heading, so hide any WooCommerce "Login" heading if present. */
.woocommerce-account:not(.logged-in) .woocommerce > h2 {
	display: none;
}

/* ---- Login form: title + neon divider (mirrors page-register.php) ---- */
.v20-login-form__title {
	margin: 0 0 .75rem;
	color: #fff;
	font-weight: 700;
	font-size: clamp(1.5rem, 3vw, 2rem);
}

.v20-login-form__divider {
	display: block;
	width: 120px;
	height: 3px;
	margin: 0 0 2rem;
	border-radius: 3px;
	background: linear-gradient(90deg, #00ff88 0%, rgba(0, 255, 136, 0) 100%);
	box-shadow: 0 0 12px rgba(0, 255, 136, .6);
}

/* ---- Login form: floating-label fields (mirrors the register inputs) ---- */
.v20-login-field {
	position: relative;
	margin-bottom: 1.25rem;
}

/* Scoped .woocommerce .v20-login-form input.v20-login-input (0,3,1) so the
   floating-label padding beats WooCommerce's generic account input rule
   (.woocommerce-account input[type="password"], 0,2,1) which would otherwise
   force symmetric .8rem padding and drop the label to the vertical centre. */
.woocommerce .v20-login-form input.v20-login-input {
	width: 100%;
	padding: 1.35rem .9rem .55rem;
	color: #fff;
	background: #16181d;
	border: 1px solid var(--v20-border);
	border-radius: 8px;
	font-size: 1rem;
	line-height: 1.2;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.woocommerce .v20-login-form input.v20-login-input:focus {
	outline: none;
	border-color: var(--v20-neon);
	box-shadow: 0 0 0 3px rgba(0, 255, 136, .15);
}

.woocommerce .v20-login-form input.v20-login-input::placeholder {
	color: transparent;
}

/* Keep autofilled fields dark. The selector must match the padding rule's
   specificity (0,4,1) — otherwise the neon focus box-shadow above overrides the
   inset that masks Chrome's white autofill background (turning the field white
   with black text the moment a saved username is clicked). The :focus variant
   layers the neon ring on top of the masking inset so focus still reads. */
.woocommerce .v20-login-form input.v20-login-input:-webkit-autofill,
.woocommerce .v20-login-form input.v20-login-input:-webkit-autofill:hover,
.woocommerce .v20-login-form input.v20-login-input:-webkit-autofill:active {
	-webkit-text-fill-color: #fff !important;
	-webkit-box-shadow: 0 0 0 1000px #16181d inset;
	caret-color: #fff;
}
.woocommerce .v20-login-form input.v20-login-input:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff !important;
	-webkit-box-shadow: 0 0 0 1000px #16181d inset, 0 0 0 3px rgba(0, 255, 136, .15);
	caret-color: #fff;
}

.v20-login-label {
	position: absolute;
	top: .95rem;
	left: .95rem;
	color: #9ca3af;
	font-size: 1rem;
	pointer-events: none;
	transform-origin: left top;
	transition: transform .15s ease, color .15s ease;
}

/* Raise the label when the field is focused or filled. */
.v20-login-input:focus + .v20-login-label,
.v20-login-input:not(:placeholder-shown) + .v20-login-label {
	transform: translateY(-.7rem) scale(.75);
	color: var(--v20-neon);
}

/* ---- Remember-me + forgot-password row ---- */
.v20-login-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: 1.25rem;
}

.v20-login-row .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	color: #cbd5e1;
	font-size: .9rem;
}

/* Fine-tune the label's baseline against the checkbox on desktop/tablet only
   (matches the register newsletter line). */
@media (min-width: 768px) {
	.v20-login-row .woocommerce-form-login__rememberme span {
		margin-top: 2.2px;
	}
}

.v20-login-forgot {
	color: var(--v20-neon);
	font-size: .9rem;
	font-weight: 600;
	transition: color .2s ease;
}
.v20-login-forgot:hover {
	color: #fff;
}

/* ---- Submit: full-width, white by default with a neon glow, solid neon on
   hover (mirrors the register button). `button.` on the selector keeps it
   ahead of the generic .woocommerce button.button rules. ---- */
.woocommerce button.v20-login-submit {
	width: 100%;
	margin-top: .5rem;
	padding: 1rem;
	background-color: #fff;
	box-shadow: 0 0 16px rgba(0, 255, 136, .45);
}
.woocommerce button.v20-login-submit:hover {
	background-color: var(--v20-neon);
	box-shadow: 0 0 11px var(--v20-neon);
}

.login-promo {
	flex: 1 1 340px;
	align-self: center;
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	min-width: 0;
}

.login-promo__title {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 10px 0 1rem;
	padding-left: .5rem;   /* standard left inset (desktop / tablet) */
	color: #fff;
	font-weight: 700;
	font-size: 1.15rem;
}

.login-promo__title::before {
	content: "";
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #00ff88;
}

/* Mobile: center the bullet + title, drop the left inset. */
@media (max-width: 767px) {
	.login-promo__title {
		justify-content: center;
		padding-left: 0;
	}
}

.login-promo__title .text-neon {
	color: #00ff88;
}

.login-promo__list {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

/* Blog variant of the side-card: no price column, date under the title. */
.login-promo .side-card--post .side-card__media {
	background: #16181d;
}
.login-promo .side-card--post .side-card__range {
	color: #9ca3af;
}

/* Keep the promo card price right-aligned. On mobile the hero's stacked
   override turns .side-card__price into a space-between flex row, which
   left-aligns a lone price — force it back to the right. */
.login-promo .side-card__price {
	justify-content: flex-end;
	text-align: right;
}

@media (max-width: 767px) {
	.woocommerce-account:not(.logged-in) .woocommerce > form.login,
	.login-promo {
		flex-basis: 100%;
	}
}

/* ==========================================================================
   My Account — navigation + content
   ========================================================================== */
.woocommerce-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	align-items: flex-start;
}

.woocommerce-MyAccount-navigation {
	flex: 0 0 240px;
	width: auto;
	float: none;
	background: var(--v20-card-bg);
	border: 1px solid var(--v20-border);
	border-radius: 12px;
	overflow: hidden;
}

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

.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--v20-border);
}
.woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: .85rem 1.25rem;
	color: #cbd5e1;
	font-weight: 600;
	transition: background-color .2s ease, color .2s ease;
}

.woocommerce-MyAccount-navigation li a:hover {
	color: var(--v20-neon);
	background: rgba(255, 255, 255, .03);
}

.woocommerce-MyAccount-navigation li.is-active a {
	color: #000;
	background: var(--v20-neon);
}

.woocommerce-MyAccount-content {
	flex: 1 1 420px;
	min-width: 0;
}

.woocommerce-MyAccount-content a:not(.button) {
	color: var(--v20-neon);
}

.woocommerce-MyAccount-content mark {
	background: transparent;
	color: var(--v20-neon);
}

/* ==========================================================================
   Tables (orders, addresses, downloads)
   ========================================================================== */
.woocommerce table.shop_table,
.woocommerce-MyAccount-content table {
	border: 1px solid var(--v20-border);
	border-collapse: separate;
	border-radius: 10px;
	background: var(--v20-card-bg);
	color: #e5e7eb;
	overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-top: 1px solid var(--v20-border);
	padding: .9rem 1rem;
}

.woocommerce table.shop_table thead th {
	border-top: 0;
	color: #fff;
	background: rgba(255, 255, 255, .03);
}

.woocommerce table.shop_table tbody tr:hover td {
	background: rgba(255, 255, 255, .02);
}

.woocommerce .woocommerce-Address,
.woocommerce address {
	color: #cbd5e1;
	border: 1px solid var(--v20-border);
	border-radius: 10px;
	padding: 1.25rem;
	background: var(--v20-card-bg);
	font-style: normal;
}

/* ==========================================================================
   Notices (message / info / error)
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem 1rem 3rem;
	color: #e5e7eb;
	background: var(--v20-card-bg);
	border: 1px solid var(--v20-border);
	border-left: 3px solid var(--v20-neon);
	border-radius: 8px;
	list-style: none;
}

.woocommerce-error {
	border-left-color: #f87171;
	color: #fecaca;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--v20-neon);
}
.woocommerce-error::before {
	color: #f87171;
}

.woocommerce-message a.button,
.woocommerce-info a.button {
	background: transparent;
	color: var(--v20-neon);
	border: 1px solid var(--v20-neon);
	padding: .35rem .9rem;
}

/* WooCommerce prints notices as a direct child of the .woocommerce flex
   container (on the login page it's fired before the form). Without this the
   notice becomes a flex column beside the form and shoves the layout sideways —
   force it to take the whole row and sit on top. */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
	flex: 0 0 100%;
	width: 100%;
	order: -1;
	margin: 0;
}

/* When there's no notice the wrapper is empty — collapse it so it doesn't
   leave a phantom gap-row above the form. */
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper:empty {
	display: none;
}

/* ==========================================================================
   Empty state (no orders yet, etc.) — branded card, replaces the woo notice
   ========================================================================== */
.v20-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: .6rem;
	padding: 3rem 1.5rem;
	background: var(--v20-card-bg);
	border: 1px solid var(--v20-border);
	border-radius: 12px;
}

.v20-empty-state__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: .5rem;
	border-radius: 50%;
	color: var(--v20-neon);
	background: rgba(0, 255, 136, .1);
	border: 1px solid rgba(0, 255, 136, .3);
}

.v20-empty-state__icon svg {
	width: 32px;
	height: 32px;
	fill: currentColor;
}

.v20-empty-state__title {
	margin: 0;
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
}

.v20-empty-state__text {
	margin: 0;
	max-width: 380px;
	color: #9ca3af;
	font-size: .95rem;
	line-height: 1.6;
}

/* a.v20-empty-state__btn (0,2,1) beats .woocommerce-MyAccount-content
   a:not(.button) (0,2,1) via later source order, so the dark text wins. */
.v20-empty-state a.v20-empty-state__btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: .75rem;
	padding: 11px 24px;
	color: #05140d;
	background: var(--v20-neon);
	border-radius: 8px;
	font-weight: 700;
	transition: background .2s ease, box-shadow .2s ease;
}

.v20-empty-state__btn:hover {
	background: #00e67a;
	box-shadow: 0 0 16px rgba(0, 255, 136, .45);
}

@media (max-width: 480px) {
	.v20-empty-state {
		padding: 2.25rem 1.25rem;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 767px) {
	.woocommerce-account .woocommerce {
		flex-direction: column;
		gap: 1rem;
	}
	.woocommerce-MyAccount-navigation {
		flex-basis: auto;
		width: 100%;
	}
	/* In column direction the 420px basis becomes a height floor → huge
	   bottom gap. Let the content size to its actual height instead. */
	.woocommerce-MyAccount-content {
		flex: 1 1 auto;
	}
}

/* ==========================================================================
   WooCommerce Checkout / Cart BLOCKS (Gutenberg .wc-block-* components)
   The block checkout ships its own (light) styles — override to dark/neon.
   ========================================================================== */
.wc-block-checkout,
.wp-block-woocommerce-checkout,
.wc-block-cart {
	color: #fff;
}

/* ---- Step / section titles ---- */
.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wc-block-components-checkout-step__heading,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	color: #fff !important;
}

.wc-block-components-checkout-step__description,
.wc-block-components-checkout-step__heading-content {
	color: #9ca3af !important;
}

/* ---- Inputs / selects / textareas ---- */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-textarea,
.wc-block-components-select select,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-combobox-control input,
.wc-block-components-address-form input,
.wc-block-components-quantity-selector__input {
	background: #16181d !important;
	color: #fff !important;
	border: 1px solid var(--v20-border) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus,
.wc-block-components-select select:focus,
.wc-block-components-combobox-control input:focus,
.wc-block-components-address-form input:focus {
	border-color: var(--v20-neon) !important;
	box-shadow: 0 0 0 2px rgba(0, 255, 136, .15) !important;
	outline: none !important;
}

/* Floating labels + helper text */
.wc-block-components-text-input label,
.wc-block-components-combobox-control label,
.wc-block-components-checkout-step label,
.wc-block-components-select__label {
	color: #9ca3af !important;
}

/* Raised (active) floating label */
.wc-block-components-text-input.is-active label {
	color: var(--v20-neon) !important;
}

/* Country / dropdown chevron area */
.wc-blocks-components-select__container,
.wc-block-components-combobox {
	background: transparent !important;
}
.wc-block-components-combobox-control .components-form-token-field__input {
	background: transparent !important;
	color: #fff !important;
}
.wc-block-components-form .wc-block-components-text-input input::placeholder {
	color: #6b7280 !important;
}

/* ---- Buttons: Place Order + generic ---- */
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout-actions-block .wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-button.contained {
	background: var(--v20-neon) !important;
	color: #000 !important;
	border: none !important;
	border-radius: 8px !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: .3px;
	transition: background-color .3s ease, box-shadow .3s ease;
}

.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-checkout-actions-block .wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-button.contained:hover {
	background: #fff !important;
	color: #000 !important;
	box-shadow: 0 0 15px var(--v20-neon) !important;
}

/* ---- Order summary / sidebar ---- */
/* Only the outer sidebar is the card; inner blocks stay transparent to avoid
   a box-in-a-box (double container). */
.wc-block-components-sidebar,
.wc-block-cart__sidebar .wc-block-components-sidebar {
	background: var(--v20-card-bg);
	border: 1px solid var(--v20-border);
	border-radius: 12px;
}

/* Stacked (mobile/tablet) checkout: drop the duplicate "Besteloverzicht".
   Whenever WooCommerce stacks the layout it renders the full summary INLINE at
   the bottom of the form *and* the sidebar summary as a collapsible drawer at
   the TOP — two Besteloverzicht blocks. In the side-by-side layout (.is-large)
   the sidebar is the *only* summary (the inline one is hidden), so it must stay.
   Hide the sidebar drawer only when stacked, keeping the bottom inline one.
   (Plaats bestelling lives in the main column, so nothing else is lost.)

   Belt and suspenders: the .is-large class is JS-applied, and the stacked->
   side-by-side switch sits around 745-752px viewport. The media query guards
   every wider viewport so the sidebar is never hidden on desktop (no flash
   while the block hydrates); the :not(.is-large) guard means that even inside
   the query we never hide when WooCommerce has gone side-by-side. */
@media (max-width: 745px) {
	.wc-block-checkout:not(.is-large) .wc-block-checkout__sidebar {
		display: none;
	}
}

.wp-block-woocommerce-checkout-order-summary-block {
	background: transparent;
	border: 0;
}

.wc-block-components-order-summary-item__individual-price,
.wc-block-components-order-summary-item__description,
.wc-block-components-product-metadata,
.wc-block-components-totals-item__label {
	color: #cbd5e1 !important;
}

.wc-block-components-order-summary-item__total-price,
.wc-block-components-totals-item__value,
.wc-block-components-product-price,
.wc-block-components-product-name {
	color: #fff !important;
}

.wc-block-components-totals-item,
.wc-block-components-order-summary__content .wc-block-components-order-summary-item {
	border-color: var(--v20-border) !important;
}

/* Grand total in neon */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--v20-neon) !important;
}

/* Dividers/panels */
.wc-block-components-panel,
.wc-block-components-totals-wrapper {
	border-color: var(--v20-border) !important;
}
.wc-block-components-panel__button {
	color: #fff !important;
}

/* ---- Notices ---- */
.wc-block-components-notice-banner {
	background: var(--v20-card-bg) !important;
	color: #e5e7eb !important;
	border-radius: 8px !important;
}
.wc-block-components-notice-banner.is-error {
	border-left: 3px solid #f87171 !important;
}
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success {
	border-left: 3px solid var(--v20-neon) !important;
}

/* Links + checkboxes */
.wc-block-checkout a,
.wc-block-cart a {
	color: var(--v20-neon);
}
.wc-block-components-checkbox .wc-block-components-checkbox__input {
	accent-color: var(--v20-neon);
}

/* Cart block table */
.wc-block-cart-items,
.wc-block-cart__totals-title {
	color: #e5e7eb;
}
.wc-block-cart-item__wrap,
.wc-block-cart-items__row {
	border-color: var(--v20-border) !important;
}

/* Neon divider under checkout section headings — same shape as the contact
   page's .section-divider (132px) but in neon (#00ff88) instead of white.
   Covers: Contact information, Billing address, Payment options (step titles)
   and Order summary (sidebar title). */
/* Shrink each title to its text so the divider below matches its length. */
.wc-block-components-checkout-step__title,
.wc-block-components-checkout-order-summary__title-text {
	width: fit-content;
}

.wc-block-components-checkout-step__title::after,
.wc-block-components-checkout-order-summary__title-text::after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	margin-top: .6rem;
	background: #00ff88;
	border-radius: 2px;
	box-shadow: 0 0 8px rgba(0, 255, 136, .5);
}

/* Order-summary quantity badge — neon. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
	background: #00ff88;
}

/* Quantity badge number — dark for contrast on the neon badge. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
	color: #000;
}

/* ==========================================================================
   My Account — Verlanglijst (wishlist) tab
   ========================================================================== */

.v20-wishlist__empty {
	color: #9ca3af;
}

.v20-wishlist__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

@media (max-width: 782px) {
	.v20-wishlist__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.v20-wishlist__grid {
		grid-template-columns: 1fr;
	}
}

/* Each item reuses the shop .model-card; a remove button overlays the corner. */
.v20-wl-item {
	position: relative;
}

.v20-wl-remove {
	position: absolute;
	top: .5rem;
	right: .5rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: #fff;
	background: rgba(0, 0, 0, .6);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 50%;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease;
}

.v20-wl-remove:hover {
	background: rgba(220, 38, 38, .85);
	border-color: rgba(248, 113, 113, .6);
}

/* My Account page container — breathing room top & bottom.
   The "My account" title lives outside .entry-content, so top margin goes on
   the title and bottom margin on the content. */
.woocommerce-account .entry-title {
	margin-top: 20px;
	font-size: 1.5rem;   /* 25% smaller than the default 2rem (32px → 24px) */
}

/* ---- Account page header (title + neon divider + logout button) ---- */
.v20-account-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 20px 0 2rem;
	padding-inline: .5rem;   /* standard edge inset (title left, logout right) */
}

.v20-account-head .entry-title {
	margin: 0;
}

.v20-account-head .entry-title a {
	color: inherit;
	text-decoration: none;
	transition: color .2s ease;
}

.v20-account-head .entry-title a:hover {
	color: var(--v20-neon);
}

.v20-account-head__divider {
	display: block;
	width: 120px;
	height: 3px;
	margin-top: .75rem;
	border-radius: 3px;
	background: linear-gradient(90deg, #00ff88 0%, rgba(0, 255, 136, 0) 100%);
	box-shadow: 0 0 12px rgba(0, 255, 136, .6);
}

/* Checkout page title — match the account "Mijn account" heading so the page
   title reads the same across the site: same size/spacing plus the neon divider.
   The checkout title is a bare <h1 class="entry-title"> (rendered by index.php,
   no wrapper), so the divider is drawn with ::after instead of a markup span. */
.woocommerce-checkout .entry-title {
	margin: 20px 0 2rem;
	padding-inline: .5rem;
	font-size: 1.5rem;
}

.woocommerce-checkout .entry-title::after {
	content: "";
	display: block;
	width: 120px;
	height: 3px;
	margin-top: .75rem;
	border-radius: 3px;
	background: linear-gradient(90deg, #00ff88 0%, rgba(0, 255, 136, 0) 100%);
	box-shadow: 0 0 12px rgba(0, 255, 136, .6);
}

/* Drop the 24px top padding WooCommerce's block checkout.css puts on the whole
   checkout (.wp-block-woocommerce-checkout) — overridden here rather than in the
   plugin file so it survives updates. Body-class qualifier wins on specificity
   regardless of stylesheet order. */
.woocommerce-checkout .wp-block-woocommerce-checkout {
	padding-top: 0;
}

.btn.v20-account-logout {
	align-self: center;
	gap: .45rem;
	padding: 9px 18px;
	font-size: .85rem;
	color: #00ff88;
	border-color: rgba(0, 255, 136, .55);
}

.btn.v20-account-logout:hover {
	color: #05140d;
	background: #00ff88;
	border-color: #00ff88;
	box-shadow: 0 0 16px rgba(0, 255, 136, .45);
}

.v20-account-logout svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

@media (max-width: 480px) {
	.v20-account-logout {
		align-self: flex-start;
	}
}

/* Dashboard time-of-day greeting (replaces the default WooCommerce copy). */
.v20-account-greeting {
	margin: 0 0 1.5rem;
	font-size: 1.35rem;
	font-weight: 600;
	color: #fff;
}

.v20-account-greeting strong {
	color: #00ff88;
	font-weight: 700;
}

/* Descriptive variant (e.g. the wishlist intro) — muted, not a bold greeting. */
.v20-account-greeting--desc {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #9ca3af;
}

/* The greeting shows inside the dashboard content on desktop; on mobile it
   moves above the nav (the copy rendered in index.php between header and nav). */
.v20-account-greeting--mobile {
	display: none;
}

@media (max-width: 767px) {
	.v20-account-greeting--mobile {
		display: block;
		padding-top: 10px;     /* gap under the divider */
		padding-left: .5rem;   /* align with the .entry-title (.v20-account-head inset) */
		margin-bottom: 10px;
	}

	.woocommerce-MyAccount-content .v20-account-greeting {
		display: none;
	}

	/* The wishlist "empty" text is shown above the nav on mobile, so hide the
	   copy the wishlist JS renders below (avoids the duplicate). */
	.v20-wishlist__empty {
		display: none;
	}
}
.woocommerce-account .entry-content {
	margin-bottom: 50px;
}

@media (max-width: 767px) {
	.woocommerce-account .entry-content {
		margin-top: -30px;
	}
}

/* Adressen page: 10px gap between the Factuuradres & Verzendadres blocks. */
.woocommerce-account .woocommerce-Addresses {
	gap: 10px;
}