/*
 * Maxi Expo - Panel klienta
 *
 * Layout is Flexbox only, per the project design rules. Visible UI elements
 * (list bullets, separators) are real HTML nodes, never ::before / ::after.
 * Typography is inherited from the theme so the panel matches the rest of the
 * site without redeclaring a font stack.
 */

:root {
	--mxcp-ink: #0b1739;
	--mxcp-ink-soft: #16213f;
	--mxcp-muted: #5b6b85;
	--mxcp-blue: #1f5fff;
	--mxcp-blue-dark: #1348d6;
	--mxcp-dark: #0f1f3d;
	--mxcp-line: #e5ecf5;
	--mxcp-field: #f5f8fc;
	--mxcp-soft: #f2f6fb;
	--mxcp-white: #ffffff;

	--mxcp-done-bg: #e4f6ea;
	--mxcp-done-ink: #14804a;
	--mxcp-wait-bg: #fdf1d6;
	--mxcp-wait-ink: #8a6100;
	--mxcp-progress-bg: #e7efff;
	--mxcp-progress-ink: #2f5fd0;
	--mxcp-muted-bg: #eef1f6;
	--mxcp-muted-ink: #5b6b85;
	--mxcp-error-bg: #fdeaea;
	--mxcp-error-ink: #a71d1d;

	--mxcp-radius: 18px;
	--mxcp-radius-sm: 12px;
	--mxcp-radius-pill: 999px;
	--mxcp-gap: 24px;
	--mxcp-gap-sm: 14px;
	--mxcp-pad: 28px;
}

/* ---------- Shell ---------- */

.mxcp-panel {
	display: flex;
	flex-direction: column;
	gap: var(--mxcp-gap);
	min-width: 0;
}

.mxcp-panel__title {
	margin: 0;
	color: var(--mxcp-ink);
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.15;
}

.mxcp-panel__subtitle {
	margin: 8px 0 0;
	color: var(--mxcp-ink);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.015em;
}

.mxcp-panel__lead {
	margin: -8px 0 0;
	color: var(--mxcp-muted);
	font-size: 16px;
	line-height: 1.6;
}

.mxcp-card {
	display: flex;
	flex-direction: column;
	gap: var(--mxcp-gap-sm);
	padding: var(--mxcp-pad);
	border: 1px solid var(--mxcp-line);
	border-radius: var(--mxcp-radius);
	background: var(--mxcp-white);
	box-sizing: border-box;
}

.mxcp-footnote {
	margin: 0;
	color: var(--mxcp-muted);
	font-size: 15px;
	line-height: 1.6;
}

/* ---------- Navigation ---------- */

.mxcp-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
}

.mxcp-nav__label {
	min-width: 0;
}

.mxcp-nav__count {
	flex: 0 0 auto;
	color: var(--mxcp-muted);
	font-size: 14px;
	font-weight: 600;
}

.woocommerce-MyAccount-navigation li.is-active .mxcp-nav__count {
	color: inherit;
	opacity: .75;
}

/* ---------- Tiles ---------- */

.mxcp-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mxcp-gap-sm);
}

.mxcp-tile {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 220px;
	min-width: 0;
	padding: 22px 24px;
	border: 1px solid var(--mxcp-line);
	border-radius: var(--mxcp-radius);
	background: var(--mxcp-white);
	box-sizing: border-box;
}

.mxcp-tile__label {
	color: var(--mxcp-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.mxcp-tile__value {
	color: var(--mxcp-ink);
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
}

.mxcp-tile__note {
	color: var(--mxcp-muted);
	font-size: 14px;
	line-height: 1.5;
}

/* ---------- Orders ---------- */

.mxcp-order-list {
	display: flex;
	flex-direction: column;
	gap: var(--mxcp-gap-sm);
}

.mxcp-order {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
	padding: 22px 26px;
	border: 1px solid var(--mxcp-line);
	border-radius: var(--mxcp-radius);
	background: var(--mxcp-white);
	box-sizing: border-box;
}

.mxcp-order__id {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 170px;
	min-width: 0;
}

.mxcp-order__number {
	color: var(--mxcp-ink);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.mxcp-order__date {
	color: var(--mxcp-muted);
	font-size: 14px;
}

.mxcp-order__items {
	flex: 1 1 150px;
	min-width: 0;
	color: var(--mxcp-muted);
	font-size: 14px;
	line-height: 1.45;
}

.mxcp-order__total {
	flex: 0 1 auto;
	color: var(--mxcp-ink);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.mxcp-order__status {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

.mxcp-order__action {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

.mxcp-pager {
	display: flex;
	gap: 12px;
}

/* ---------- Badges ---------- */

.mxcp-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 16px;
	border-radius: var(--mxcp-radius-pill);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.mxcp-badge--done {
	background: var(--mxcp-done-bg);
	color: var(--mxcp-done-ink);
}

.mxcp-badge--wait {
	background: var(--mxcp-wait-bg);
	color: var(--mxcp-wait-ink);
}

.mxcp-badge--progress {
	background: var(--mxcp-progress-bg);
	color: var(--mxcp-progress-ink);
}

.mxcp-badge--muted {
	background: var(--mxcp-muted-bg);
	color: var(--mxcp-muted-ink);
}

/* ---------- Buttons ---------- */

.mxcp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border: 1px solid transparent;
	border-radius: var(--mxcp-radius-pill);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.mxcp-button--primary {
	background: var(--mxcp-blue);
	color: var(--mxcp-white);
}

.mxcp-button--primary:hover,
.mxcp-button--primary:focus {
	background: var(--mxcp-blue-dark);
	color: var(--mxcp-white);
}

.mxcp-button--dark {
	background: var(--mxcp-dark);
	color: var(--mxcp-white);
}

.mxcp-button--dark:hover,
.mxcp-button--dark:focus {
	background: var(--mxcp-ink);
	color: var(--mxcp-white);
}

.mxcp-button--ghost {
	border-color: var(--mxcp-line);
	background: var(--mxcp-white);
	color: var(--mxcp-ink);
}

.mxcp-button--ghost:hover,
.mxcp-button--ghost:focus {
	border-color: var(--mxcp-blue);
	color: var(--mxcp-blue);
}

/* ---------- Forms ---------- */

.mxcp-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mxcp-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.mxcp-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.mxcp-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 0 0 auto;
	min-width: 0;
}

/* Only inside a horizontal row does flex-basis mean width. In the vertical
   login form the same shorthand would set a 240px height on every field. */
.mxcp-form__row > .mxcp-field {
	flex: 1 1 240px;
}

.mxcp-field__label {
	color: var(--mxcp-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.mxcp-field__input {
	width: 100%;
	padding: 15px 18px;
	border: 1px solid var(--mxcp-line);
	border-radius: var(--mxcp-radius-sm);
	background: var(--mxcp-field);
	color: var(--mxcp-ink);
	font-size: 16px;
	line-height: 1.4;
	box-sizing: border-box;
	transition: border-color .18s ease, background-color .18s ease;
}

.mxcp-field__input:focus {
	border-color: var(--mxcp-blue);
	background: var(--mxcp-white);
	outline: none;
}

.mxcp-check {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}

.mxcp-check__input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 1px solid var(--mxcp-line);
	border-radius: 6px;
	accent-color: var(--mxcp-blue);
}

.mxcp-check__text {
	color: var(--mxcp-muted);
	font-size: 15px;
	line-height: 1.5;
}

/* ---------- Notices ---------- */

.mxcp-notice {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 20px;
	border-radius: var(--mxcp-radius-sm);
}

.mxcp-notice--success {
	background: var(--mxcp-done-bg);
	color: var(--mxcp-done-ink);
}

.mxcp-notice--error {
	background: var(--mxcp-error-bg);
	color: var(--mxcp-error-ink);
}

.mxcp-notice__line {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

/* ---------- Files ---------- */

.mxcp-files {
	gap: 0;
	padding: 8px 26px;
}

.mxcp-file {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	padding: 22px 0;
	border-top: 1px solid var(--mxcp-line);
}

.mxcp-file:first-child {
	border-top: 0;
}

.mxcp-file__main {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1 1 240px;
	min-width: 0;
}

.mxcp-file__name {
	color: var(--mxcp-ink);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -.01em;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.mxcp-file__name:hover {
	color: var(--mxcp-blue);
}

.mxcp-file__meta {
	color: var(--mxcp-muted);
	font-size: 14px;
}

.mxcp-file__note {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--mxcp-error-bg);
	color: var(--mxcp-error-ink);
	font-size: 14px;
	line-height: 1.5;
}

.mxcp-file__side {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 16px;
}

.mxcp-file__remove {
	color: var(--mxcp-muted);
	font-size: 14px;
	text-decoration: underline;
}

.mxcp-file__remove:hover {
	color: var(--mxcp-error-ink);
}

.mxcp-upload__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.mxcp-upload__input {
	flex: 1 1 260px;
	padding: 12px 14px;
}

.mxcp-upload__hint {
	margin: 0;
	color: var(--mxcp-muted);
	font-size: 14px;
	line-height: 1.55;
}

.mxcp-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: var(--mxcp-pad);
	border: 1px solid var(--mxcp-line);
	border-radius: var(--mxcp-radius);
	background: var(--mxcp-soft);
}

.mxcp-empty__text {
	margin: 0;
	color: var(--mxcp-muted);
	font-size: 16px;
	line-height: 1.6;
}

/* ---------- Login ---------- */

.mxcp-login {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 28px;
	width: 100%;
}

.mxcp-login__col {
	display: flex;
	flex-direction: column;
	gap: 20px;
	flex: 1 1 380px;
	min-width: 0;
	padding: 34px;
	border: 1px solid var(--mxcp-line);
	border-radius: var(--mxcp-radius);
	background: var(--mxcp-white);
	box-sizing: border-box;
}

.mxcp-login__col--soft {
	border-color: transparent;
	background: var(--mxcp-soft);
}

.mxcp-login__title {
	margin: 0;
	color: var(--mxcp-ink);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -.015em;
}

.mxcp-login__help {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	color: var(--mxcp-muted);
	font-size: 14px;
}

.mxcp-login__help-link {
	color: var(--mxcp-blue);
	text-decoration: underline;
}

.mxcp-login__help-text {
	color: var(--mxcp-muted);
}

.mxcp-login__note {
	margin: 0;
	color: var(--mxcp-muted);
	font-size: 14px;
	line-height: 1.55;
}

.mxcp-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mxcp-list__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mxcp-list__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-top: 8px;
	border-radius: 50%;
	background: var(--mxcp-blue);
}

.mxcp-list__text {
	color: var(--mxcp-ink-soft);
	font-size: 16px;
	line-height: 1.55;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.mxcp-panel__title {
		font-size: 30px;
	}

	.mxcp-order__items {
		flex-basis: 100%;
	}
}

@media (max-width: 780px) {
	:root {
		--mxcp-pad: 22px;
		--mxcp-gap: 20px;
	}

	.mxcp-panel__title {
		font-size: 26px;
	}

	.mxcp-tile {
		flex-basis: 100%;
	}

	.mxcp-order {
		align-items: flex-start;
		flex-direction: column;
		gap: 14px;
	}

	.mxcp-order__action,
	.mxcp-order__action .mxcp-button {
		width: 100%;
	}

	.mxcp-login__col {
		flex-basis: 100%;
		padding: 24px;
	}

	.mxcp-file {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* ---------- Neutralising the surrounding theme ---------- */

/*
 * The store builder styles bare WooCommerce login and register forms as cards
 * (border, 20px padding, 34px vertical margin). Our own card wrapper already
 * provides that, so the inner form has to be stripped back. Forms that are
 * themselves the card (.mxcp-card.mxcp-form) keep their padding.
 */
.mxcp-account .mxcp-form:not(.mxcp-card) {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* Site-wide .button rules repaint every submit blue and force display:block. */
.mxcp-account .mxcp-button {
	display: inline-flex !important;
	width: auto !important;
	border-radius: var(--mxcp-radius-pill) !important;
	font-size: 15px !important;
	line-height: 1 !important;
}

.mxcp-account .mxcp-button--primary {
	background: var(--mxcp-blue) !important;
	color: var(--mxcp-white) !important;
}

.mxcp-account .mxcp-button--dark {
	background: var(--mxcp-dark) !important;
	color: var(--mxcp-white) !important;
}

.mxcp-account .mxcp-button--ghost {
	border: 1px solid var(--mxcp-line) !important;
	background: var(--mxcp-white) !important;
	color: var(--mxcp-ink) !important;
}

.mxcp-account .mxcp-button--ghost:hover,
.mxcp-account .mxcp-button--ghost:focus {
	border-color: var(--mxcp-blue) !important;
	color: var(--mxcp-blue) !important;
}

/* Inputs: the theme sets its own min-height and white background. */
.mxcp-account .mxcp-field__input {
	min-height: 0 !important;
	background: var(--mxcp-field) !important;
}

.mxcp-account .mxcp-field__input:focus {
	background: var(--mxcp-white) !important;
}

/* Registration privacy notice injected by WooCommerce. */
.mxcp-account .mxcp-login .woocommerce-privacy-policy-text p {
	margin: 0;
	color: var(--mxcp-muted);
	font-size: 14px;
	line-height: 1.55;
}

/* ---------- Removing duplicated chrome ---------- */

/*
 * frontend-commerce-account.js injects a header with the active menu label and
 * a generic lead sentence at the top of the content column. Each of our screens
 * already prints its own title, so the injected one is a duplicate. It is
 * hidden rather than unhooked because it is created in JavaScript after our
 * markup is on the page.
 */
.mxcp-account .mxsb-account-section-heading {
	display: none !important;
}

/* The store builder greets the customer above the layout; the dashboard does it
   again inside the panel, where the design puts it. */
.mxcp-account .mxsb-account-intro__welcome {
	display: none !important;
}

/* Active navigation item: the builder paints the row navy but leaves the label
   navy too, which renders it invisible. */
.mxcp-account .woocommerce-MyAccount-navigation li.is-active .mxcp-nav__link,
.mxcp-account .woocommerce-MyAccount-navigation li.is-active .mxcp-nav__label {
	color: #ffffff !important;
}