/*
 * Styling for what the account page renders through WooCommerce — the orders
 * table, invoice cards, the order-tracking form, the profile form and the
 * logout confirmation — measured off the Figma "dashboard" frames.
 *
 * The page itself (breadcrumb, mint sidebar, content column) is an Elementor
 * document and is styled there. The Elementor "My Account" widget's own
 * controls (Sections, Forms, Tables, Buttons) keep working: their selectors
 * are more specific than anything here.
 */

:root {
	--dk-red: #970100;
	--dk-red-dark: #650100;
	--dk-gold: #e4c082;
	--dk-gold-10: #f6ead5;
	--dk-green: #008959;
	--dk-navy: #2b4962;
	--dk-grey-light: #8c8c8c;
	--dk-placeholder: #adadad;
}

/* ── The widget fills its column, so the content box is 465px+ tall ────── */

.elementor-widget-woocommerce-my-account,
.elementor-widget-woocommerce-my-account > .elementor-widget-container,
.elementor-widget-woocommerce-my-account .e-my-account-tab,
.elementor-widget-woocommerce-my-account .e-my-account-tab > .woocommerce,
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content,
.elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content-wrapper {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	max-width: 100%;
}

/* The widget reserves a column for its navigation; the sidebar replaces it. */
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Our two endpoints (the widget does not know them, so they are keyed on the
   body class) and the custom dashboard get the same "Sections" frame the
   widget gives its own pages. */
.elementor-widget-woocommerce-my-account .e-my-account-tab__dashboard--custom .woocommerce .woocommerce-MyAccount-content-wrapper,
body.dk-ep-invoices .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content-wrapper,
body.dk-ep-order-tracking .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content-wrapper {
	background-color: var(--sections-background-color, #fff);
	border-color: var(--sections-border-color, #d5d8dc);
	border-radius: var(--sections-border-radius, 3px);
	border-style: var(--sections-border-type, solid);
	border-width: var(--sections-border-top-width, 1px) var(--sections-border-right-width, 1px) var(--sections-border-bottom-width, 1px) var(--sections-border-left-width, 1px);
}

/* The three designed sections carry their own measured spacing. */
.elementor-widget-woocommerce-my-account .e-my-account-tab__orders .woocommerce .woocommerce-MyAccount-content-wrapper,
body.dk-ep-invoices .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content-wrapper,
body.dk-ep-order-tracking .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content-wrapper {
	padding: 0;
}

.elementor-widget-woocommerce-my-account .woocommerce-notices-wrapper:empty {
	display: none;
}

.elementor-widget-woocommerce-my-account .woocommerce-message,
.elementor-widget-woocommerce-my-account .woocommerce-error,
.elementor-widget-woocommerce-my-account .woocommerce-info {
	margin: 0 0 16px;
	font-size: 14px;
}

.elementor-widget-woocommerce-my-account .woocommerce-message {
	border-top-color: var(--dk-green);
}

.elementor-widget-woocommerce-my-account .woocommerce-error {
	border-top-color: var(--dk-red);
}

/* ── Sidebar state (buttons are Elementor; the open section comes from PHP) */

.dk-account__logout a {
	cursor: pointer;
}

body.dk-ep-orders .elementor-widget-button.dk-nav-orders .elementor-button,
body.dk-ep-view-order .elementor-widget-button.dk-nav-orders .elementor-button,
body.dk-ep-invoices .elementor-widget-button.dk-nav-invoices .elementor-button,
body.dk-ep-order-tracking .elementor-widget-button.dk-nav-order-tracking .elementor-button {
	background-color: var(--dk-gold);
	color: var(--dk-navy);
}

/* ── Orders table ───────────────────────────────────────────────────────── */

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-orders__count-mobile {
	display: none;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders {
	flex: 1 1 auto;
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	margin: 0;
	border: 0;
}

.dk-orders__c-idx { width: 37px; }
.dk-orders__c-name { width: 29%; }
.dk-orders__c-date { width: 20.5%; }
.dk-orders__c-status { width: 20%; }

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders th {
	height: 56px;
	padding: 0 8px;
	border: 0;
	border-bottom: 1px solid var(--dk-navy);
	font-size: 20px;
	line-height: 31px;
	font-weight: 600;
	color: var(--tables-title-color, var(--dk-navy));
	text-align: center;
	background: transparent;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders th.dk-orders__name {
	padding: 0 4px 0 19px;
	text-align: start;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders th.dk-orders__name span + span {
	float: left;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders tbody tr:nth-child(n) td {
	height: 43px;
	padding: 0 12px;
	border: 0;
	border-bottom: 1px solid var(--dk-navy);
	font-size: 14px;
	line-height: 22px;
	font-weight: 400;
	color: var(--tables-items-color, var(--dk-navy));
	text-align: center;
	background: transparent;
	overflow-wrap: anywhere;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders tbody tr:nth-child(n) td.dk-orders__idx {
	padding: 0;
	font-size: 20px;
	line-height: 31px;
	font-weight: 600;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders th:nth-child(n + 2),
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders tbody tr:nth-child(n) td:nth-child(n + 2) {
	border-inline-start: 1px solid var(--dk-navy);
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders tbody tr:nth-child(n).dk-orders__empty td,
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders tbody tr:nth-child(n).dk-orders__fill td {
	border-bottom: 0;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders tbody tr:nth-child(n).dk-orders__empty td {
	border-inline-start: 0;
	height: 80px;
	color: var(--dk-grey-light);
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders tbody tr:nth-child(n).dk-orders__fill td {
	height: auto;
	padding: 0;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders a {
	color: var(--tables-links-normal-color, inherit);
	text-decoration: none;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders a:hover {
	color: var(--tables-links-hover-color, var(--dk-red));
}

.elementor-widget-woocommerce-my-account .woocommerce-pagination {
	display: flex;
	justify-content: center;
	gap: 16px;
	padding: 14px;
	border-top: 1px solid var(--dk-navy);
}

/* ── Invoices ───────────────────────────────────────────────────────────── */

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-invoices {
	padding: 16px 50px 24px 38px;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-invoices__count {
	margin: 0;
	font-size: 20px;
	line-height: 31px;
	font-weight: 600;
	color: var(--dk-navy);
	text-align: left;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-invoices__empty {
	margin: 24px 0 0;
	color: var(--dk-grey-light);
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-invoices__list {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 16px;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-invoice {
	width: 238px;
	max-width: 100%;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-invoice__card {
	min-height: 322px;
	padding: 23px 23px 20px;
	border: 1px solid var(--dk-green);
	border-radius: 35px;
	background: #fff;
	color: var(--dk-navy);
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-invoice__card dl {
	margin: 0;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-invoice__card dt {
	font-size: 20px;
	line-height: 31px;
	font-weight: 600;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-invoice__card dd {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 22px;
	overflow-wrap: anywhere;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-invoice__card dd:last-child {
	margin-bottom: 0;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-invoice a.dk-invoice__download {
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 161px;
	height: 38px;
	margin: 12px auto 0;
	border: 1px solid var(--dk-gold);
	border-radius: 12px;
	background: var(--dk-red);
	color: #fff;
	font-size: 16px;
	line-height: 25px;
	font-weight: 600;
	text-decoration: none;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-invoice a.dk-invoice__download:hover {
	background: var(--dk-red-dark);
	color: #fff;
}

/* ── Forms: tracking request and profile ────────────────────────────────── */

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-form {
	display: flex;
	flex-direction: column;
	gap: 23px;
	width: 533px;
	max-width: calc(100% - 112px);
	margin: 42px 56px 29px auto;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-field,
.elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .form-row {
	display: flex;
	float: none;
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 1px solid #000;
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-field:focus-within,
.elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .form-row:focus-within {
	border-color: var(--dk-green);
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-field label,
.elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .form-row > label {
	flex: none;
	display: flex;
	align-items: center;
	width: 214px;
	margin: -1px -1px -1px 0;
	padding: 0 12px;
	border: 1px solid var(--dk-navy);
	border-radius: 8px;
	background: var(--dk-gold);
	font-size: 17px;
	line-height: 27px;
	font-weight: 500;
	color: var(--dk-navy);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-field input,
.elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .form-row input.input-text {
	flex: 1;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0 17px;
	border: 0;
	border-radius: 0;
	outline: 0;
	box-shadow: none;
	background: transparent;
	font-family: inherit;
	font-size: 17px;
	line-height: 27px;
	font-weight: 500;
	color: var(--dk-navy);
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-field input::placeholder,
.elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm input::placeholder {
	color: var(--dk-placeholder);
}

.elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .form-row .password-input {
	flex: 1;
	display: flex;
	min-width: 0;
}

.elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .form-row .password-input input {
	width: 100%;
}

.elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .form-row .required {
	color: var(--dk-red);
	text-decoration: none;
}

.elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .form-row > span:not(.password-input),
.elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .clear {
	display: none;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-btn,
.elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 238px;
	height: 51px;
	margin: 0;
	padding: 0 24px;
	border: 1px solid var(--dk-gold);
	border-radius: 11px;
	background: var(--dk-red);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	line-height: 25px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-btn:hover,
.elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .woocommerce-Button:hover {
	background: var(--dk-red-dark);
	color: #fff;
}

.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-form .dk-btn {
	align-self: flex-end;
	margin-top: -4px;
}

.elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm {
	width: 533px;
	max-width: 100%;
}

.elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .form-row + .form-row {
	margin-top: 23px;
}

.elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm fieldset {
	margin: 32px 0 0;
	padding: 0;
	border: 0;
}

.elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm legend {
	margin-bottom: 16px;
	padding: 0;
	font-size: 20px;
	line-height: 31px;
	font-weight: 600;
	color: var(--dk-navy);
}

.elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .form-row:has(> .woocommerce-Button) {
	display: block;
	height: auto;
	margin-top: 19px;
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: visible;
	text-align: left;
}

/* Guests see the login form on its own, centred. */
.elementor-widget-woocommerce-my-account .woocommerce form.woocommerce-form-login {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}

/* ── Logout confirmation ────────────────────────────────────────────────── */

.dk-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(30px);
	backdrop-filter: blur(30px);
	font-family: Vazirmatn, 'IRAN Yekan', Tahoma, sans-serif;
}

.dk-modal[hidden] {
	display: none;
}

.dk-modal__box {
	position: relative;
	width: 570px;
	max-width: 100%;
	min-height: 236px;
	padding: 72px 39px 38px 41px;
	border-radius: 52px 9px 52px 9px;
	background: #fff;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.dk-modal .dk-modal__close {
	position: absolute;
	top: 29px;
	left: 36px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--dk-navy);
	cursor: pointer;
}

.dk-modal .dk-modal__title {
	margin: 0;
	font-family: inherit;
	font-size: 20px;
	line-height: 31px;
	font-weight: 700;
	color: var(--dk-navy);
	text-align: right;
}

.dk-modal__actions {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-top: 52px;
}

.dk-modal .dk-modal__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 232px;
	max-width: 48%;
	height: 43px;
	padding: 0 16px;
	border: 1px solid var(--dk-red);
	border-radius: 7px;
	font-family: inherit;
	font-size: 18px;
	line-height: 28px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.dk-modal .dk-modal__btn--outline {
	background: #fff;
	color: var(--dk-red);
}

.dk-modal .dk-modal__btn--solid {
	background: var(--dk-red);
	color: #fff;
}

.dk-modal .dk-modal__btn--solid:hover {
	background: var(--dk-red-dark);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-orders__count-mobile {
		display: block;
		margin: 16px 16px 0;
		font-size: 16px;
		font-weight: 600;
		color: var(--dk-navy);
	}

	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders thead,
	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders .dk-orders__fill,
	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders tbody tr:nth-child(n) td.dk-orders__idx {
		display: none;
	}

	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders,
	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders tbody,
	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders tr,
	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders tbody tr:nth-child(n) td {
		display: block;
		width: 100%;
	}

	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders tr {
		margin: 12px 16px;
		width: auto;
		border: 1px solid var(--dk-navy);
		border-radius: 12px;
		overflow: hidden;
	}

	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders tbody tr:nth-child(n) td,
	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders tbody tr:nth-child(n) td:nth-child(n + 2) {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		height: auto;
		padding: 8px 12px;
		border: 0;
		border-bottom: 1px solid var(--dk-gold-10);
		text-align: start;
	}

	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders tbody tr:nth-child(n) td:last-child {
		border-bottom: 0;
	}

	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders tbody tr:nth-child(n) td::before {
		content: attr(data-label);
		font-weight: 600;
		white-space: nowrap;
	}

	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders tbody tr:nth-child(n).dk-orders__empty td {
		justify-content: center;
	}

	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce table.dk-orders tbody tr:nth-child(n).dk-orders__empty td::before {
		content: none;
	}

	.elementor-widget-woocommerce-my-account .woocommerce-pagination {
		border-top: 0;
	}

	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-invoices {
		padding: 16px 16px 20px;
	}

	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-form {
		max-width: calc(100% - 32px);
		margin: 24px 16px 20px auto;
		gap: 16px;
	}

	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-field label,
	.elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .form-row > label {
		width: 42%;
		padding: 0 10px;
		font-size: 14px;
	}

	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-field input,
	.elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .form-row input.input-text {
		padding: 0 12px;
		font-size: 15px;
	}

	.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .dk-form .dk-btn,
	.elementor-widget-woocommerce-my-account .woocommerce-EditAccountForm .woocommerce-Button {
		width: 100%;
	}

	.dk-modal__box {
		padding: 64px 24px 28px;
	}

	.dk-modal .dk-modal__close {
		top: 22px;
		left: 24px;
	}

	.dk-modal .dk-modal__title {
		font-size: 18px;
		line-height: 28px;
	}

	.dk-modal__actions {
		flex-direction: column;
		gap: 12px;
		margin-top: 32px;
	}

	.dk-modal .dk-modal__btn {
		width: 100%;
		max-width: 100%;
	}
}