/**
 * WooCommerce – My Account (/fiokom/: the [woocommerce_my_account] shortcode
 * in the regular `page` template). Loaded only on the account page, see
 * inc/woocommerce.php. Field look, classic notices, order status badges:
 * common.css.
 *
 * Logged out: a narrow login card. Logged in: navigation as a vertical list
 * of rounded items next to the content (wrapping row on small screens).
 * WooCommerce's classic sheets reach (0,3,1) on these elements; every
 * override matches or exceeds that and loads after them.
 */

.woocommerce-account {
	--woo-account-width: var(--container-content);
	--woo-account-nav-width: 15rem;
}

.woocommerce-account.logged-in {
	--woo-account-width: var(--container-wide);
}

/* The page title, the intro and the account area share one left edge. */
.woocommerce-account .dubianna-page-header > .wp-block-post-title,
.woocommerce-account .dubianna-account-intro,
.woocommerce-account main .woocommerce {
	max-inline-size: var(--woo-account-width);
}

.woocommerce-account .dubianna-account-intro {
	color: var(--color-text-subtle);
}

.woocommerce-account main .woocommerce {
	margin-block: var(--space-lg) var(--space-2xl);
}

/* Section headings inside the shortcode output (h2/h3 of WooCommerce). */
.woocommerce-account main .woocommerce :is(h2, h3) {
	margin-block: 0 var(--space-sm);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
}

.woocommerce-account main .woocommerce a:not(.button, .wp-element-button) {
	color: var(--color-gold);
	text-underline-offset: 0.2em;
}

.woocommerce-account main .woocommerce a:not(.button, .wp-element-button):hover {
	color: var(--color-text);
}

/* -------------------------------------------------------------------------
 * Logged out: login and lost-password forms as a card
 * ---------------------------------------------------------------------- */

.woocommerce-account .woocommerce form:is(.woocommerce-form-login, .woocommerce-ResetPassword) {
	max-inline-size: 32rem;
	margin: 0;
	padding: var(--space-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface);
}

.woocommerce-account .woocommerce form:is(.woocommerce-form-login, .woocommerce-ResetPassword) > p:first-child {
	margin-block-start: 0;
}

.woocommerce-account .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {
	display: flex;
	margin-block-end: var(--space-sm);
}

.woocommerce-account .woocommerce .woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-account .woocommerce .woocommerce-ResetPassword .woocommerce-Button {
	display: block;
	float: none;
	inline-size: 100%;
	margin: 0;
}

.woocommerce-account .woocommerce .woocommerce-LostPassword {
	margin-block: var(--space-sm) 0;
	font-size: var(--fs-small);
}

/* -------------------------------------------------------------------------
 * Logged in: navigation
 * ---------------------------------------------------------------------- */

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation {
	float: none;
	inline-size: auto;
	margin-block-end: var(--space-lg);
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	min-block-size: 2.75rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text-subtle);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a:hover {
	border-color: var(--color-border-strong);
	background-color: var(--color-surface);
	color: var(--color-text);
	text-decoration: none;
}

/* Current item: gold border, filled surface, bold text – not colour alone. */
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a[aria-current="page"] {
	border-color: var(--color-gold);
	background-color: var(--color-surface);
	color: var(--color-text);
	font-weight: 700;
	text-decoration: none;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li a:focus-visible {
	outline: var(--woo-focus-ring);
	outline-offset: var(--woo-focus-offset);
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation-link--customer-logout a {
	border-style: dashed;
	color: var(--color-text-muted);
	font-weight: 400;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-content {
	float: none;
	inline-size: auto;
	min-inline-size: 0;
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-content > :first-child {
	margin-block-start: 0;
}

@media (min-width: 782px) {
	.woocommerce-account main .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		display: grid;
		grid-template-columns: var(--woo-account-nav-width) minmax(0, 1fr);
		gap: var(--space-xl);
		align-items: start;
	}

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

	.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-block-start: var(--space-sm);
	}
}

/* -------------------------------------------------------------------------
 * Tables (orders, order details, downloads)
 * ---------------------------------------------------------------------- */

.woocommerce-account .woocommerce table.shop_table {
	inline-size: 100%;
	margin: 0 0 var(--space-lg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	border-collapse: separate;
	border-spacing: 0;
	background-color: var(--color-surface);
	color: var(--color-text);
	font-size: var(--fs-small);
}

.woocommerce-account .woocommerce table.shop_table :is(th, td) {
	padding: var(--space-sm) var(--space-md);
	border-color: var(--color-border);
	line-height: 1.5;
	vertical-align: middle;
}

.woocommerce-account .woocommerce table.shop_table thead th {
	color: var(--color-text-muted);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
}

.woocommerce-account .woocommerce table.shop_table :is(tbody th, tfoot th, tfoot td) {
	border-block-start: 1px solid var(--color-border);
}

.woocommerce-account .woocommerce table.shop_table tfoot tr:last-child :is(th, td) {
	color: var(--color-text);
	font-size: var(--fs-body);
}

/* Row actions: compact outline buttons instead of full primary buttons. */
.woocommerce-account .woocommerce table.shop_table :is(.woocommerce-orders-table__cell-order-actions, .order-actions) .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.75rem;
	margin: 0.125rem 0.25rem 0.125rem 0;
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-gold);
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--color-text);
	font-size: var(--fs-small);
	font-weight: 700;
}

.woocommerce-account .woocommerce table.shop_table :is(.woocommerce-orders-table__cell-order-actions, .order-actions) .button:hover {
	background-color: var(--color-gold-tint);
	color: var(--color-text);
}

@media (max-width: 781px) {
	.woocommerce-account .woocommerce table.shop_table_responsive tr {
		padding-block: var(--space-2xs);
		border-block-start: 1px solid var(--color-border);
	}

	.woocommerce-account .woocommerce table.shop_table_responsive tbody tr:first-child {
		border-block-start: 0;
	}

	.woocommerce-account .woocommerce table.shop_table_responsive tr td {
		border: 0;
		background-color: transparent;
	}

	.woocommerce-account .woocommerce table.shop_table_responsive tr td::before {
		color: var(--color-text-muted);
		font-weight: 600;
	}
}

/* "Order #123 … is currently <mark>Teljesítve</mark>" */
.woocommerce-account .woocommerce .woocommerce-MyAccount-content mark {
	background-color: transparent;
	color: var(--color-text);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Addresses (billing only: digital programs have no shipping)
 * ---------------------------------------------------------------------- */

.woocommerce-account .woocommerce :is(.woocommerce-Addresses, .addresses).col2-set {
	display: grid;
	gap: var(--space-md);
}

.woocommerce-account .woocommerce :is(.woocommerce-Addresses, .addresses).col2-set::before,
.woocommerce-account .woocommerce :is(.woocommerce-Addresses, .addresses).col2-set::after {
	display: none;
}

.woocommerce-account .woocommerce :is(.woocommerce-Addresses, .addresses) :is(.col-1, .col-2) {
	float: none;
	inline-size: auto;
}

.woocommerce-account .woocommerce :is(.woocommerce-Address, .woocommerce-customer-details) address {
	inline-size: 100%;
	box-sizing: border-box;
	padding: var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface);
	color: var(--color-text-subtle);
	font-style: normal;
	line-height: 1.6;
}

.woocommerce-account .woocommerce .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2xs) var(--space-sm);
	margin-block-end: var(--space-xs);
}

.woocommerce-account .woocommerce .woocommerce-Address-title .edit {
	display: inline;
	margin: 0;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Country select (select2) on the dark surfaces
 * ---------------------------------------------------------------------- */

.woocommerce-account .woocommerce .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	min-block-size: var(--woo-field-height);
	border: 1px solid var(--woo-field-border);
	border-radius: var(--woo-field-radius);
	background-color: var(--woo-field-bg);
}

.woocommerce-account .woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 2.75rem 0 1rem;
	color: var(--color-text);
	font-size: var(--fs-body);
	line-height: 1.5;
}

.woocommerce-account .woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
	inset-block-start: 0;
	inset-inline-end: 1rem;
	block-size: 100%;
}

.woocommerce-account .woocommerce .select2-container .select2-selection--single .select2-selection__arrow b {
	background: var(--color-text);
	-webkit-mask: url("../../icons/expand-more.svg") center / 1.25rem no-repeat;
	mask: url("../../icons/expand-more.svg") center / 1.25rem no-repeat;
}

.woocommerce-account .woocommerce .select2-container--focus .select2-selection--single,
.woocommerce-account .woocommerce .select2-container--open .select2-selection--single {
	border-color: var(--color-gold);
	outline: var(--woo-focus-ring);
	outline-offset: var(--woo-focus-offset);
}

/* The dropdown is appended to <body>, outside .woocommerce. */
.woocommerce-account .select2-dropdown {
	border-color: var(--woo-field-border);
	background-color: var(--woo-field-bg);
	color: var(--color-text);
}

.woocommerce-account .select2-search--dropdown .select2-search__field {
	min-block-size: 2.75rem;
	border: 1px solid var(--woo-field-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-background);
	color: var(--color-text);
	font-size: var(--fs-body);
}

.woocommerce-account .select2-container--default .select2-results__option[aria-selected="true"],
.woocommerce-account .select2-container--default .select2-results__option[data-selected="true"] {
	background-color: var(--color-surface);
	color: var(--color-text);
	font-weight: 700;
}

.woocommerce-account .select2-container--default .select2-results__option--highlighted[aria-selected],
.woocommerce-account .select2-container--default .select2-results__option--highlighted[data-selected] {
	background-color: var(--color-gold-strong);
	color: var(--color-light);
}