/**
 * Theme-customisable design tokens.
 *
 * These fallbacks apply when no theme has been detected. On plugin pages the
 * Theming class injects a matching `<style id="my-account-plugin-theme-vars">`
 * block into wp_head that overrides any of these from the active theme's
 * customizer settings, so the account area inherits the site's brand colours
 * and font automatically.
 */
.map-account,
.map-route,
.map-form {
	--map-primary: #2c3e50;
	--map-primary-hover: #22303d;
	--map-accent: #1a4ed8;
	--map-text: #333333;
	--map-surface: #ffffff;
	--map-muted: #f4f4f7;
	--map-border: #e0e0e0;
	--map-radius: 6px;
	--map-font-family: inherit;
	--map-on-primary: #ffffff;
}

.map-account,
.map-route,
.map-form {
	font-family: var(--map-font-family, inherit);
}

.my-account-plugin-content {
	margin: 1.5rem 0;
	padding: 1rem;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
}

.my-account-plugin-content h2 {
	margin-top: 0;
}

.map-success {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	color: #0a6b2e;
	background-color: #e6f6ec;
	border: 1px solid #a6e0bc;
	border-radius: 4px;
}

.map-error {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	color: #8a1f1f;
	background-color: #fbeaea;
	border: 1px solid #e7b3b3;
	border-radius: 4px;
}

/* Email verification routes (verify-email + pending). */
.map-route {
	max-width: 32rem;
	margin: 2rem auto;
}

.map-route h1 {
	text-align: center;
}

.map-route__hint {
	color: #555;
	font-size: 0.9em;
}

.map-route__alt {
	margin-top: 1.25rem;
}

/* Pending verification page. */
.map-pending__email {
	white-space: nowrap;
}

.map-pending__resend {
	margin: 1.5rem 0;
	padding: 1rem;
	background-color: #f7f7f7;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
}

.map-pending__resend-btn[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

.map-pending__countdown {
	margin: 0.75rem 0 0;
	color: #555;
	font-size: 0.9em;
	font-variant-numeric: tabular-nums;
}

/* Shared AJAX message states (reused by registration + resend). */
.map-form__messages.is-error p {
	margin: 0 0 0.5rem;
	color: #a00;
}

.map-form__messages.is-success p {
	margin: 0 0 0.5rem;
	color: #0a6b2e;
}

/* ==========================================================================
   My Account dashboard: sidebar layout, navigation, cards, sections.
   ========================================================================== */
.map-account {
	display: flex;
	gap: 2rem;
	max-width: 60rem;
	margin: 2rem auto;
	align-items: flex-start;
}

.map-account__sidebar {
	flex: 0 0 14rem;
}

.map-account__content {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}

/* Navigation. */
.map-account-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	overflow: hidden;
}

.map-account-nav__item+.map-account-nav__item {
	border-top: 1px solid #f0f0f0;
}

.map-account-nav__item--logout {
	border-top: 1px solid #e0e0e0;
}

.map-account-nav__link {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.75rem 1rem;
	color: #333 !important;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.map-account-nav__link:hover,
.map-account-nav__link:focus {
	background-color: #f7f7f7;
}

.map-account-nav__item.is-active .map-account-nav__link {
	background-color: var(--map-muted, #f0f4ff);
	color: #fc0 !important;
	font-weight: 600;
	box-shadow: inset 3px 0 0 #fc0;
}

.map-account-nav__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	font-size: 20px;
	line-height: 20px;
}

.map-account-nav__label {
	flex: 1 1 auto;
}

.map-account-nav__badge {
	flex: 0 0 auto;
	min-width: 1.25rem;
	padding: 0 0.375rem;
	font-size: 0.75rem;
	line-height: 1.25rem;
	text-align: center;
	color: #fff;
	background-color: #d63638;
	border-radius: 999px;
	font-variant-numeric: tabular-nums;
}

/* Section headers. */
.map-section__header {
	margin-bottom: 1.5rem;
}

.map-section__title {
	margin: 0 0 25px 0;
	font-size: 40px;
}

.map-section__subtitle {
	margin: 0;
	color: #555;
}

/* Dashboard cards. */
.map-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.map-card {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1.25rem;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	background-color: #fff;
}

.map-card__value {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.map-card__label {
	color: #555;
	font-size: 0.875rem;
}

/* Buttons. */
.map-button {
	display: block;
	background: var(--black);
	padding: 15px 30px;
	border: none;
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 16px;
	text-transform: uppercase;
	text-align: center;
	color: #fff !important;
	transition: all 0.2s, transform 0.064s;
	cursor: pointer;
	text-decoration: none;
	margin-top: 25px;
	border-radius: var(--map-radius, 4px);
}

.map-button:hover,
.map-button:focus {
	background: var(--yellow);
	color: var(--black);
}

/* Orders table. */
.map-orders {
	width: 100%;
	border-collapse: collapse;
}

.map-orders th,
.map-orders td {
	padding: 0.625rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid #f0f0f0;
}
.map-orders th.col-last {
	display: none;
}
.map-orders:not(.map-order-items) tr.map-orders__row,
.map-orders:not(.map-order-items) thead tr {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	width: auto;
	min-width: 100%;
}

.map-orders__actions {
	grid-row: 2 / 3;
	grid-column: 1 / 4;
	justify-content: center;
}


.map-order-status {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	font-size: 0.8125rem;
	border-radius: 999px;
	background-color: #f0f0f0;
}

/* Coloured status badges. */
.map-order-status--pending {
	color: #8a5800;
	background-color: #fdf1d6;
}

.map-order-status--on-hold {
	color: #6b4e00;
	background-color: #fbeec0;
}

.map-order-status--processing {
	color: #0b4c8c;
	background-color: #d9ecff;
}

.map-order-status--completed {
	color: #0a6b2e;
	background-color: #e6f6ec;
}

.map-order-status--cancelled,
.map-order-status--failed {
	color: #8a1f1f;
	background-color: #fbeaea;
}

.map-order-status--refunded {
	color: #4a4a4a;
	background-color: #ececec;
}

/* Button variants used in the orders area. */
.map-button--ghost {
	background-color: #1d1d1b;
	border: 1px solid #c3d0f5;
	padding: 0.35rem 0.75rem;
	font-size: 0.875rem;
	font-weight: 400 !important;
	margin-top: 0;
}

.map-button--ghost:hover,
.map-button--ghost:focus {
	color: #1d1d1b !important;
	background-color: #fc0;
	border: 1px solid #fc0;
}

.map-button--danger {
	color: #fff;
	background-color: #d63638;
	border: 1px solid #d63638;
	padding: 0.35rem 0.75rem;
	font-size: 0.875rem;
	cursor: pointer;
}

.map-button--danger:hover,
.map-button--danger:focus {
	color: #fff;
	background-color: #b32d2e;
}

.map-orders__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

/* Orders messages banner (reused by list + detail). */
.map-orders__messages:empty {
	display: none;
}

.map-orders__messages {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border-radius: 4px;
}

.map-orders__messages.is-error {
	color: #8a1f1f;
	background-color: #fbeaea;
	border: 1px solid #e7b3b3;
}

.map-orders__messages.is-success {
	color: #0a6b2e;
	background-color: #e6f6ec;
	border: 1px solid #a6e0bc;
}

/* Pagination. */
.map-orders__pagination {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.25rem;
}

.map-pagination__status {
	color: #555;
	font-size: 0.875rem;
}

.map-pagination__next {
	margin-left: auto;
}

/* Empty state. */
.map-orders-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1.5rem;
	border: 1px dashed #d0d0d0;
	border-radius: 6px;
	background-color: #fafafa;
}

/* Order-detail view. */
.map-order-detail__back {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
}

.map-order-detail__section {
	margin-bottom: 1.75rem;
}

.map-order-detail__heading {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
}

.map-order-detail__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.5rem;
}

.map-order-items tfoot th,
.map-order-items tfoot td {
	font-weight: 600;
	border-top: 2px solid #e6e6e6;
}

.map-order-detail__meta {
	margin: 0.25rem 0;
}

.map-order-detail__meta-label {
	font-weight: 600;
	margin-right: 0.25rem;
}

.map-order-tracking {
	list-style: none;
	margin: 0;
	padding: 0;
}

.map-order-tracking__item {
	display: flex;
	gap: 0.5rem;
	padding: 0.25rem 0;
}

.map-order-tracking__carrier {
	font-weight: 600;
}

.map-order-detail__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
}

/* Profile + addresses. */
.map-profile__row {
	display: flex;
	gap: 1rem;
	padding: 0.625rem 0;
	border-bottom: 1px solid #f0f0f0;
}

.map-profile__row dt {
	flex: 0 0 8rem;
	font-weight: 600;
	margin: 0;
}

.map-profile__row dd {
	margin: 0;
}

.map-addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.5rem;
}

.map-address__title {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
}

.map-empty {
	color: #555;
}

/* Responsive: stack the sidebar above content on narrow screens. */
@media (max-width: 640px) {
	.map-account {
		flex-direction: column;
	}

	.map-account__sidebar {
		flex-basis: auto;
		width: 100%;
	}
}

/* ==========================================================================
   Account forms: shared field styling + profile editor.
   ========================================================================== */

/* Generic form rows (used by the profile editor and other account forms). */
.map-form__row {
	margin: 0 0 1.25rem;
}

.map-form__row label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
}

.map-form__row input[type="text"],
.map-form__row input[type="email"],
.map-form__row input[type="password"] {
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: normal;
	padding: .5em;
	display: block;
	background-color: #fff;
	border: var(--wc-form-border-width) solid var(--wc-form-border-color);
	border-radius: var(--wc-form-border-radius);
	color: #000;
	width: 100%;
	margin: 0;
	line-height: normal;
	height: auto;
	min-height: 45px;
}

.map-form__row input[type="text"]:focus,
.map-form__row input[type="email"]:focus,
.map-form__row input[type="password"]:focus {
	border-color: #000;
}


.map-form__row input[readonly] {
	background-color: #f1f1f1;
	color: #666;
	cursor: default;
}

.map-form__hint {
	display: block;
	margin-top: 0.35rem;
	color: #666;
	font-size: 0.85em;
}

.map-form__field-error {
	display: block;
	margin-top: 0.35rem;
	color: #a00;
	font-size: 0.85em;
}

.map-form__row--invalid input {
	border-color: #a00 !important;
	box-shadow: 0 0 0 1px #a00;
}

.map-form__submit {
	display: block;
	background: var(--black);
	padding: 15px 30px;
	border: none;
	font-family: var(--font-family);
	font-weight: 400;
	font-size: 16px;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	transition: all 0.2s, transform 0.064s;
	cursor: pointer;
	text-decoration: none;
	margin-top: 25px;
	border-radius: var(--map-radius, 4px);
}

.map-form__submit:hover,
.map-form__submit:focus {
	background: var(--yellow);
	color: var(--black);
}

.map-form__submit[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Grouped sections within the profile form. */
.map-form__fieldset {
	margin: 0 0 1.75rem;
	padding: 1.25rem;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
}

.map-form__legend {
	padding: 0 0.5rem;
	font-weight: 700;
	font-size: 1.05rem;
}

/* In-form notice (e.g. pending email-change banner). */
.map-form__notice {
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	color: #7a5d00;
	background-color: #fdf6e3;
	border: 1px solid #ecd9a0;
	border-radius: 4px;
}

/* Inline email-availability badge (debounced check). */
.map-form__availability {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.85em;
	min-height: 1.2em;
}

.map-form__availability.is-checking {
	color: #666;
}

.map-form__availability.is-available {
	color: #0a6b2e;
}

.map-form__availability.is-taken,
.map-form__availability.is-invalid {
	color: #8a1f1f;
}

/* The success banner rendered on email-change confirmation reuses
   .map-form__messages.is-success; give it a little breathing room here. */
.map-section__header+.map-form__messages.is-success {
	margin-bottom: 1.25rem;
}

/* ==========================================================================
   Header login / account button (MyAccount\HeaderWidget).

   Rendered site-wide (nav menu, shortcode, or the my_account_header_button
   action), so it can appear outside the .map-account / .map-form scope where
   the Theming class injects its CSS variables. Each var() therefore carries a
   baked-in fallback: the button looks right everywhere, and still picks up the
   theme's palette on plugin pages.
   ========================================================================== */
.map-header-btn {
	display: flex;
	width: fit-content;
	align-items: center;
	margin-left: auto;
	margin-top: 20px;
	margin-right: 20px;
	gap: 0.5em;
	max-width: 100%;
	padding: 0.4em 0.9em;
	border-radius: 999px;
	background-color: #ffcc00;
	color: #000000;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.header__container .map-header-btn {
	display: none;
}

.map-header-btn__icon svg {
	width: 20px;
	height: 20px;
}

.map-header-btn:hover,
.map-header-btn:focus {
	text-decoration: none;
}

.map-header-btn:hover svg,
.map-header-btn:focus svg {
	filter: invert(1);
}

.map-header-btn:focus-visible {
	outline: 2px solid var(--map-primary, #2c3e50);
	outline-offset: 2px;
}

/* Logged-out "Увійти" — solid primary pill for a clear call to action. */

.map-header-btn--login:hover,
.map-header-btn--login:focus {
	background-color: #000000;
	color: #ffffff;
}

/* Logged-in "Мій кабінет" — outlined pill so the avatar reads as the accent. */
.map-header-btn--account {
	padding-left: 0.4em;
}

/* The avatar: a small circle holding the first letter of the display name. */
.map-header-btn__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background-color: var(--map-primary, #2c3e50);
	color: var(--map-on-primary, #ffffff);
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

/* When injected into a nav menu, strip default list styling from the wrapper. */
.map-header-menu-item {
	display: flex;
	align-items: center;
}

.map-header-menu-item>.map-header-btn {
	margin: 0;
}

@media screen and (min-width: 500px) {

	.map-orders:not(.map-order-items) tr.map-orders__row,
	.map-orders:not(.map-order-items) thead tr {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.map-orders__actions {
		grid-row: auto;
		grid-column: auto;
		justify-content: center;
	}

	.map-orders th.col-last {
		display: block;
	}
}

@media screen and (min-width: 1024px) {
	.header__container .map-header-btn {
		display: flex;
		padding: 5px 10px;
		margin: 0;
	}


}