/**
 * Elucio Theme – Mein Konto
 *
 * Figma: „Desktop - Account“ (164:805) · „Mobile-Account“ (164:1139)
 *   1. Dashboard (Begrüßung, Wartelisten-Box, Übersicht, Karten, Bestellung)
 *   2. Unterseiten (Bestellungen, Daten, Adressen, Zahlungsarten, Warteliste)
 */

.account-page {
	--acc-border: rgba(219, 209, 169, 0.8);

	/* WooCommerce-Formularfelder an das Figma-Feld angleichen */
	--wc-form-border-color:  var(--acc-border);
	--wc-form-border-radius: 0;
	--wc-form-color-background: transparent;
	--acc-pad:    clamp(1rem, 4.2vw, 3.75rem);

	width:          min(100% - 2 * var(--acc-pad), 1320px);
	margin-inline:  auto;
	padding-top:    clamp(3rem, 6vw, 7.125rem);
	padding-bottom: clamp(4rem, 6vw, 6.625rem);
	color:          var(--color-dark);
}

.account-page .woocommerce {
	width: 100%;
}

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

/* =========================================================================
   1. Dashboard
========================================================================= */

.account__top {
	display:         flex;
	align-items:     flex-start;
	justify-content: space-between;
	gap:             32px;
	margin-bottom:   clamp(2.5rem, 2.6vw, 3rem);
}

.account-welcome {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            12px;
	max-width:      495px;
	padding-top:    20px;
}

.account-welcome__kicker {
	font-family:    var(--font-body);
	font-weight:    500;
	font-size:      0.875rem;
	line-height:    1;
	letter-spacing: 0.107em;
	text-transform: uppercase;
}

.account-welcome__name {
	font-family: var(--font-headline);
	font-weight: 400;
	font-size:   clamp(3rem, 2vw + 2rem, 4rem);
	line-height: 1.125;
	color:       var(--color-gray);
}

.account-welcome__text {
	max-width:   299px;
	margin-top:  12px;
	font-family: var(--font-headline);
	font-size:   0.875rem;
	line-height: 22px;
}

.account-welcome__logout {
	margin-top:            4px;
	font-family:           var(--font-body);
	font-size:             0.75rem;
	letter-spacing:        0.1em;
	text-transform:        uppercase;
	text-decoration:       underline;
	text-underline-offset: 4px;
	color:                 var(--color-gray);
	transition:            color 0.2s ease;
}

.account-welcome__logout:hover,
.account-welcome__logout:focus-visible {
	color: var(--color-gold);
}

/* „You are on the list“ (Figma 164:1083) */
.account-list {
	position:       relative;
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	flex:           0 0 287px;
	padding:        24px;
	border:         1px solid var(--color-sand);
}

.account-list__icon {
	position: absolute;
	top:      22px;
	right:    23px;
	width:    12px;
	height:   17px;
}

.account-list__title,
.account__label,
.account-card__title {
	font-family:    var(--font-body);
	font-weight:    600;
	font-size:      0.75rem;
	line-height:    16.8px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color:          var(--color-dark);
}

.account-list__text {
	max-width:     230px;
	margin:        12px 0 36px;
	font-family:   var(--font-headline);
	font-size:     0.875rem;
	line-height:   22px;
}

/* Abschnitte */
.account__section + .account__section {
	margin-top: 56px;
}

.account__label {
	margin-bottom: 18px;
}

/* Übersicht (Figma „Account Info Grid 3“) */
.account-stats {
	display:               grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding:               49px 1px;
	border:                1px solid var(--color-sand);
}

.account-stat {
	position:       relative;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
}

.account-stat + .account-stat::before {
	content:    '';
	position:   absolute;
	left:       0;
	top:        28px;
	width:      1px;
	height:     117px;
	background: var(--color-sand);
}

.account-stat__icon {
	width:         auto;
	height:        40px;
	margin-bottom: 24px;
}

.account-stat__label {
	font-family:    var(--font-body);
	font-weight:    500;
	font-size:      1rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.account-stat__value {
	margin:         12px 0 32px;
	font-family:    var(--font-headline);
	font-size:      2rem;
	line-height:    40px;
	letter-spacing: 0.03em;
}

.account-stat .text-link {
	margin-top: auto;
}

/* Karten (Figma „Account Details“) */
.account-cards {
	display:        flex;
	flex-direction: column;
	gap:            20px;
	margin-top:     48px;
}

.account-card,
.account-order__head {
	display:     flex;
	align-items: center;
	gap:         20px;
}

.account-card {
	min-height: 122px;
	padding:    20px 40px;
	border:     1px solid var(--acc-border);
}

.account-card__icon {
	flex:            0 0 71px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	height:          72px;
}

.account-card__icon img {
	max-height: 41px;
	width:      auto;
}

.account-card__copy {
	flex:      1 1 auto;
	min-width: 0;
}

.account-card__text,
.account-order__date {
	max-width:   255px;
	margin-top:  10px;
	font-family: var(--font-headline);
	font-size:   0.875rem;
	line-height: 22px;
}

.account-order__date {
	color: var(--color-gray);
}

.account-card__cta {
	flex: 0 0 auto;
}

/* Aktuelle Bestellung (Figma „Order + Delivery“) */
.account-order {
	display:        flex;
	flex-direction: column;
	gap:            40px;
	padding:        24px 40px 40px;
	border:         1px solid var(--acc-border);
}

.order-steps {
	--step-gap: clamp(1.5rem, 6.9vw, 6.1875rem);

	display:               grid;
	grid-template-columns: repeat(4, minmax(0, 200px));
	justify-content:       center;
	gap:                   var(--step-gap);
	counter-reset:         none;
}

.order-step {
	position:       relative;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
}

/* Verbindungslinie vom vorherigen Punkt zu diesem Punkt */
.order-step + .order-step::before {
	content:    '';
	position:   absolute;
	top:        12px;
	right:      calc(50% + 12px);
	width:      calc(100% + var(--step-gap) - 24px);
	height:     1px;
	background: var(--color-sand);
}

.order-step.is-done + .order-step.is-done::before {
	background: var(--color-gold);
}

.order-step__dot {
	width:      24px;
	height:     24px;
	margin-bottom: 20px;
	background: url('../images/account/step-empty.svg') no-repeat center / 24px 24px;
}

.order-step.is-done .order-step__dot {
	background-image: url('../images/account/check.svg');
}

.order-step__label {
	font-family:    var(--font-body);
	font-size:      0.875rem;
	line-height:    16.8px;
	letter-spacing: 0.128em;
	color:          var(--color-gray);
}

.order-step.is-done .order-step__label {
	font-weight: 600;
	color:       var(--color-dark);
}

.order-step__date {
	margin-top:  8px;
	font-family: var(--font-headline);
	font-size:   0.875rem;
	line-height: 22px;
	color:       var(--color-gray);
}

/* =========================================================================
   2. Unterseiten
========================================================================= */

.account-sub__head {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            24px;
	margin-bottom:  clamp(2rem, 3vw, 3rem);
}

.account-sub__back {
	display:        inline-flex;
	align-items:    center;
	gap:            14px;
	font-family:    var(--font-body);
	font-size:      0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--color-gold);
}

.account-sub__back::before {
	content:    '';
	width:      22px;
	height:     10px;
	background: url('../images/account/arrow.svg') no-repeat center / contain;
	transform:  scaleX(-1);
	transition: transform 0.2s ease;
}

.account-sub__back:hover::before,
.account-sub__back:focus-visible::before {
	transform: scaleX(-1) translateX(4px);
}

.account-sub__title {
	font-family:    var(--font-headline);
	font-weight:    400;
	font-size:      clamp(2rem, 1.5vw + 1.5rem, 3rem);
	line-height:    1.15;
	text-transform: uppercase;
	color:          var(--color-gray);
}

.account-sub {
	font-family: var(--font-body);
	font-size:   0.9375rem;
	line-height: 1.6;
}

.account-sub h2,
.account-sub h3,
.account-sub legend {
	margin-bottom:  16px;
	font-family:    var(--font-body);
	font-weight:    600;
	font-size:      0.75rem;
	line-height:    16.8px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color:          var(--color-dark);
}

.account-sub p + p,
.account-sub p + form,
.account-sub table + p {
	margin-top: 1em;
}

.account-sub a:not(.button):not(.account-sub__back) {
	text-decoration:       underline;
	text-underline-offset: 3px;
}

.account-sub fieldset {
	margin-top: 32px;
	padding:    24px;
	border:     1px solid var(--acc-border);
}

.account-sub .form-row {
	display:        flex;
	flex-direction: column;
	gap:            10px;
	margin-bottom:  24px;
}

.account-sub label {
	font-family:    var(--font-body);
	font-weight:    600;
	font-size:      0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color:          var(--color-gold);
}

.account-sub em,
.account-sub .description {
	font-family:    var(--font-body);
	font-size:      0.75rem;
	font-style:     normal;
	letter-spacing: 0.04em;
	color:          var(--color-gray);
}

.account-sub input.input-text,
.account-sub input[type="text"],
.account-sub input[type="email"],
.account-sub input[type="tel"],
.account-sub input[type="password"],
.account-sub select,
.account-sub textarea {
	width:          100%;
	min-height:     56px;
	padding:        16px 20px;
	border:         1px solid var(--acc-border);
	border-radius:  0;
	background:     transparent;
	font-family:    var(--font-body);
	font-size:      0.875rem;
	letter-spacing: 0.05em;
	color:          var(--color-dark);
}

.account-sub input:focus,
.account-sub select:focus,
.account-sub textarea:focus {
	outline:      none;
	border-color: var(--color-sand);
	background:   rgba(255, 255, 255, 0.6);
}

.account-sub .button,
.account-sub button[type="submit"] {
	display:        inline-flex;
	align-items:    center;
	justify-content: center;
	min-height:     50px;
	padding:        14px 36px;
	border:         1px solid var(--color-dark);
	border-radius:  0;
	background:     var(--color-dark);
	font-family:    var(--font-body);
	font-size:      0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color:          var(--color-white);
	cursor:         pointer;
	transition:     background-color 0.2s ease, color 0.2s ease;
}

.account-sub .button:hover,
.account-sub .button:focus-visible,
.account-sub button[type="submit"]:hover,
.account-sub button[type="submit"]:focus-visible {
	background: transparent;
	color:      var(--color-dark);
}

.account-sub table {
	width:           100%;
	border-collapse: collapse;
	border:          1px solid var(--acc-border);
}

.account-sub th,
.account-sub td {
	padding:       16px 20px;
	border-bottom: 1px solid var(--acc-border);
	text-align:    left;
	vertical-align: middle;
}

.account-sub thead th {
	font-weight:    600;
	font-size:      0.75rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.account-sub .woocommerce-Addresses {
	display:               grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap:                   24px;
	margin-top:            24px;
}

.account-sub .woocommerce-Address {
	padding: 24px;
	border:  1px solid var(--acc-border);
}

.account-sub .woocommerce-Address address {
	margin-top:  12px;
	font-family: var(--font-headline);
	font-style:  normal;
	line-height: 1.7;
}

.account-sub .woocommerce-info,
.account-sub .woocommerce-message,
.account-sub .woocommerce-error {
	margin-bottom: 24px;
	padding:       16px 20px;
	border:        1px solid var(--acc-border);
	background:    rgba(219, 209, 169, 0.1);
	list-style:    none;
}

/* =========================================================================
   Responsive (Figma „Mobile-Account“)
========================================================================= */
@media (max-width: 900px) {

	.account__top {
		flex-direction: column;
	}

	.account-list {
		flex-basis: auto;
		width:      100%;
	}

	.account-stats {
		grid-template-columns: 1fr;
		gap:                   0;
		padding:               0;
		border:                0;
	}

	.account-stat {
		padding: 40px 20px;
		border:  1px solid var(--color-sand);
	}

	.account-stat + .account-stat {
		margin-top: 20px;
	}

	.account-stat + .account-stat::before {
		display: none;
	}

	.account-card,
	.account-order__head {
		flex-direction: column;
		gap:            12px;
		padding:        28px 20px;
		text-align:     center;
	}

	.account-order__head {
		padding: 0;
	}

	.account-card__icon {
		flex-basis: auto;
		height:     48px;
	}

	.account-card__text,
	.account-order__date {
		margin-inline: auto;
	}

	.account-card__cta {
		margin-top: 12px;
	}

	.account-order {
		padding: 28px 20px 36px;
	}

	/* Lieferstufen untereinander */
	.order-steps {
		--step-gap: 48px;

		grid-template-columns: 1fr;
	}

	.order-step + .order-step::before {
		top:    calc(-1 * var(--step-gap) + 4px);
		right:  auto;
		left:   50%;
		width:  1px;
		height: calc(var(--step-gap) - 8px);
	}

	.order-step__dot {
		margin-bottom: 12px;
	}

	.account-sub .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}

	.account-sub table.shop_table_responsive thead {
		display: none;
	}
}