/*
 * Account: login/register and the profile dashboard.
 */

.account,
.auth {
	padding-block: 20px 28px;
}

/* ---- Greeting ----------------------------------------------------------- */

.acctgreet {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: 16px;
	margin-bottom: 16px;
}

.acctgreet__avatar {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--c-bg);
	color: var(--c-teal);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acctgreet__avatar svg {
	width: 28px;
	height: 28px;
}

.acctgreet__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.acctgreet__hi {
	font-size: var(--fs-15, 0.9375rem);
	font-weight: var(--fw-bold);
}

.acctgreet__sub {
	font-size: var(--fs-12);
	color: var(--c-text-muted);
}

/* ---- Account menu ------------------------------------------------------- */

.acctnav__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.acctnav__row a {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r);
	padding: 15px 16px;
	font-size: var(--fs-14);
	font-weight: var(--fw-medium);
	color: var(--c-text);
}

.acctnav__ic {
	flex: 0 0 auto;
	color: var(--c-text-dim);
	display: inline-flex;
}

.acctnav__ic svg {
	width: 22px;
	height: 22px;
}

.acctnav__label {
	flex: 1;
}

.acctnav__chev {
	flex: 0 0 auto;
	color: var(--c-text-dim);
}

.acctnav__chev svg {
	width: 18px;
	height: 18px;
}

.acctnav__row.is-active a {
	border-color: var(--c-teal);
}

.acctnav__row.woocommerce-MyAccount-navigation-link--customer-logout .acctnav__ic {
	color: var(--c-red);
}

/* ---- Endpoint content (orders, addresses) ------------------------------- */

.account .woocommerce-MyAccount-content {
	margin-bottom: 20px;
}

.account table.shop_table {
	width: 100%;
	border-collapse: collapse;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	overflow: hidden;
	font-size: var(--fs-13);
}

.account table.shop_table th,
.account table.shop_table td {
	padding: 12px 14px;
	text-align: start;
	border-bottom: 1px solid var(--c-line);
}

.account table.shop_table .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--c-teal);
	color: #fff;
	border-radius: var(--r-sm);
	padding: 6px 14px;
	font-size: var(--fs-12);
	font-weight: var(--fw-bold);
}

.account .woocommerce-Address {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: 16px;
	margin-bottom: 12px;
	font-size: var(--fs-13);
	line-height: 2;
}

.account .woocommerce-Address address {
	font-style: normal;
	color: var(--c-gray-600);
}

/* ---- Order detail (view-order / thankyou) ------------------------------- */

.orderd {
	padding-bottom: 8px;
}

.orderd__card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: 16px;
	margin-bottom: 14px;
}

.orderd__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	font-size: var(--fs-13);
}

.orderd__k {
	color: var(--c-text-muted);
}

.orderd__v {
	font-weight: var(--fw-medium);
	color: var(--c-text);
}

.orderd__title {
	font-size: var(--fs-15, 0.9375rem);
	font-weight: var(--fw-bold);
	margin-bottom: 12px;
}

.orderd__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--c-line);
}

.orderd__item:last-child {
	border-bottom: 0;
}

.orderd__thumb {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: var(--r);
	overflow: hidden;
	background: var(--c-bg);
	border: 1px solid var(--c-line);
}

.orderd__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

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

.orderd__itemname {
	font-size: var(--fs-13);
	font-weight: var(--fw-bold);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.orderd__itemqty {
	font-size: var(--fs-12);
	color: var(--c-text-muted);
}

.orderd__itemprice {
	flex: 0 0 auto;
	font-size: var(--fs-12);
	color: var(--c-text-muted);
	font-weight: var(--fw-regular);
	white-space: nowrap;
}

.orderd__totals .orderd__row--grand {
	border-top: 1px solid var(--c-line);
	margin-top: 6px;
	padding-top: 14px;
	font-size: var(--fs-16);
	font-weight: var(--fw-bold);
}

.orderd__totals .orderd__row--grand .orderd__v {
	color: var(--c-red);
	font-weight: var(--fw-heavy);
}

.orderd__reorder {
	width: 100%;
	margin-top: 4px;
}

/* ---- Order detail heading row and actions (Desktop - my orders- details) -- */

.orderd__top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

/* RTL: chevron-l points back towards the list, which sits to the right. */
.orderd__back {
	flex: none;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r);
	color: var(--c-text);
}

.orderd__back svg {
	width: 18px;
	height: 18px;
}

.orderd__status {
	margin-inline-start: auto;
	padding: 5px 14px;
	border-radius: var(--r-pill);
	font-size: var(--fs-12);
	background: #E7F8F4;
	color: #0E9384;
}

.orderd__status--cancelled,
.orderd__status--failed,
.orderd__status--refunded {
	background: #FDECEC;
	color: var(--c-red);
}

.orderd__status--pending,
.orderd__status--on-hold {
	background: #FFF4E5;
	color: #B45309;
}

.orderd__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.orderd__metacell {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	font-size: var(--fs-13);
}

.orderd__v--strong {
	font-weight: var(--fw-bold);
}

.orderd__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.orderd__invoice {
	width: 100%;
}

/* «کالاها (۳)»: the qty gets its own column between name and price. */
.orderd__itemqty {
	flex: none;
}

/* ---- My orders list ----------------------------------------------------- */

.myorders__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.myorder {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	overflow: hidden;
}

.myorder__link {
	display: block;
	padding: 14px 16px;
	color: inherit;
}

.myorder__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 6px;
}

.myorder__num {
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}

.myorder__status {
	font-size: var(--fs-10);
	font-weight: var(--fw-medium);
	padding: 4px 10px;
	border-radius: var(--r-pill);
	background: var(--c-bg);
	color: var(--c-gray-600);
	white-space: nowrap;
}

.myorder__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-12);
	color: var(--c-text-muted);
}

.myorder__dot {
	color: var(--c-gray-300);
}

.myorder__thumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 4px;
}

.myorder__thumb {
	width: 44px;
	height: 44px;
	border-radius: var(--r);
	border: 1px solid var(--c-line);
	background: var(--c-bg);
	overflow: hidden;
	flex: 0 0 auto;
}

.myorder__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.myorder__more {
	font-size: var(--fs-12);
	color: var(--c-text-muted);
}

.myorder__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--c-bg);
}

.myorder__total {
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	color: var(--c-red);
}

.myorder__chev {
	display: inline-flex;
	color: var(--c-gray-400);
}

.myorder__chev svg {
	width: 18px;
	height: 18px;
}

.myorder__actions {
	display: flex;
	gap: 8px;
	padding: 0 16px 14px;
}

.myorder__action {
	flex: 1;
	text-align: center;
	border: 1px solid var(--c-line);
	border-radius: var(--r);
	padding: 9px 12px;
	font-size: var(--fs-12);
	font-weight: var(--fw-bold);
	color: var(--c-gray-600);
}

.myorder__action--pay {
	background: var(--c-teal);
	border-color: var(--c-teal);
	color: #fff;
}

.myorder__action--cancel {
	color: var(--c-red);
	border-color: #F6D5D5;
}

.myorders__pager {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

.myorders__pager .btn {
	flex: 1;
}

.myorders__empty {
	text-align: center;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: 34px 20px;
}

.myorders__emptyic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--c-bg);
	color: var(--c-gray-300);
	margin-bottom: 14px;
}

.myorders__emptyic svg {
	width: 32px;
	height: 32px;
}

.myorders__emptytitle {
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	margin: 0 0 6px;
}

.myorders__emptysub {
	font-size: var(--fs-12);
	color: var(--c-text-muted);
	margin: 0 0 18px;
}

/* ---- My addresses ------------------------------------------------------- */

/* Delete / set-default run on admin-post.php, so their confirmation arrives as
   ?addr_msg= rather than through WooCommerce's notice stack. */
.myaddr__notice {
	background: #E8F4FF;
	border: 1px solid rgba(0, 122, 255, .25);
	border-radius: 12px;
	color: var(--c-blue);
	font-size: var(--fs-12);
	margin: 0 0 14px;
	padding: 10px 14px;
}

.myaddr__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.myaddr__lead {
	font-size: var(--fs-12);
	color: var(--c-text-muted);
	line-height: 1.9;
	margin: 0;
}

.myaddr__add {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding-inline: 16px;
	border-radius: 8px;
	background: #007AFF;
	color: #fff;
	font-size: var(--fs-14);
}

.myaddr__add:hover { background: #0063D1; }
.myaddr__add svg { width: 16px; height: 16px; }

.myaddr__grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.myaddr__card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: 16px;
	display: flex;
	flex-direction: column;
}

/* The default address is the one checkout uses, so it is outlined. */
.myaddr__card.is-default {
	border-color: var(--c-blue);
}

.myaddr__head {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 10px;
}

.myaddr__title {
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	margin: 0;
}

.myaddr__badge {
	margin-inline-start: auto;
	padding: 4px 12px;
	border-radius: var(--r-pill);
	background: #E7F8F4;
	color: #0E9384;
	font-size: var(--fs-11);
}

.myaddr__body {
	font-style: normal;
	font-size: var(--fs-13);
	line-height: 2;
	color: var(--c-gray-600);
	flex: 1;
}

.myaddr__phone {
	display: block;
	color: var(--c-gray-400);
	font-size: var(--fs-12);
}

.myaddr__actions {
	display: flex;
	gap: 10px;
	margin-top: 14px;
}

.myaddr__act {
	flex: 1;
	text-align: center;
	padding: 9px 8px;
	border-radius: var(--r);
	border: 1px solid var(--c-line);
	font-size: var(--fs-12);
	color: var(--c-text);
}

.myaddr__act--del {
	border-color: #F3B0B0;
	color: var(--c-red);
}

.myaddr__act--edit,
.myaddr__act--default {
	border-color: var(--c-teal);
	color: var(--c-teal-600);
}

/* ---- Saved-address picker on checkout ----------------------------------- */

.coaddr {
	margin-bottom: 18px;
}

.coaddr__title {
	font-size: var(--fs-14);
	font-weight: var(--fw-medium);
	margin: 0 0 10px;
}

.coaddr__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.coaddr__card {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--c-line);
	border-radius: var(--r);
	cursor: pointer;
}

.coaddr__card:has(input:checked) {
	border-color: var(--c-blue);
	background: #F5F9FF;
}

.coaddr__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.coaddr__name {
	font-size: var(--fs-13);
	font-weight: var(--fw-medium);
	color: var(--c-text);
}

.coaddr__line {
	font-size: var(--fs-12);
	color: var(--c-gray-600);
}

.coaddr__add {
	display: inline-block;
	margin-top: 10px;
	font-size: var(--fs-12);
	color: var(--c-blue);
}

/* ---- Edit account form -------------------------------------------------- */

.acctform__card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: 16px;
	margin-bottom: 14px;
}

.acctform__title {
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	margin: 0 0 14px;
}

.acctform__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.acctform__field {
	margin: 0 0 12px;
}

.acctform__field label {
	display: block;
	font-size: var(--fs-12);
	color: var(--c-text-muted);
	margin-bottom: 6px;
}

.acctform__field .required {
	color: var(--c-red);
	text-decoration: none;
}

.acctform__field input {
	width: 100%;
	min-height: 46px;
	padding: 10px 14px;
	background: var(--c-bg);
	border: 1px solid var(--c-line);
	border-radius: var(--r);
	font-family: inherit;
	font-size: var(--fs-13);
	color: var(--c-text);
}

.acctform__field input:focus {
	outline: none;
	border-color: var(--c-indigo);
}

.acctform__hint {
	display: block;
	margin-top: 6px;
	font-size: var(--fs-11);
	color: var(--c-text-dim);
	line-height: 1.8;
}

.acctform__submit {
	width: 100%;
}

/* ---- Order received / «Success Payment» -------------------------------- */

.thanks {
	padding-block: 24px 32px;
}

.thanks__hero {
	text-align: center;
	margin-bottom: 22px;
}

.thanks__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--c-teal-100);
	color: var(--c-teal-600);
	margin-bottom: 16px;
}

.thanks__badge svg {
	width: 42px;
	height: 42px;
}

.thanks__hero--failed .thanks__badge {
	background: #FDECEC;
	color: var(--c-red);
}

.thanks__title {
	font-size: var(--fs-18);
	font-weight: var(--fw-heavy);
	color: var(--c-ink);
	margin: 0 0 8px;
}

.thanks__sub {
	font-size: var(--fs-13);
	color: var(--c-text-muted);
	line-height: 1.9;
	margin: 0;
}

/* Order number sits under the headline in teal (Pay 4: 10/400 #14B8A6). */
.thanks__num {
	font-size: var(--fs-10);
	color: var(--c-teal);
	margin: 0;
}

/* ---- Order progress rail (Pay 4 / Pay 5) ------------------------------- */

.oprog {
	display: flex;
	gap: 0;
	margin: 0;
}

.oprog__step {
	flex: 1;
	/* A flex item's floor is its min-content width, and «تحویل سفارش» is wide
	   enough that four of them push the rail off a 390px screen. */
	min-width: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: center;
	font-size: var(--fs-10);
	color: #626C83;
}

.oprog__label {
	overflow-wrap: anywhere;
}

/* A line joins the dots; the outer steps only draw it on their inner side.
   RTL: the first step is the rightmost, so its connector runs left. */
.oprog__step::before {
	content: '';
	position: absolute;
	top: 8px;
	inset-inline: 0;
	height: 2px;
	background: #E2E6EE;
}

.oprog__step:first-child::before {
	inset-inline-start: 50%;
}

.oprog__step:last-child::before {
	inset-inline-end: 50%;
}

.oprog__dot {
	position: relative;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	margin-inline: auto;
	background: var(--c-surface);
	border: 2px solid #E2E6EE;
	display: flex;
	align-items: center;
	justify-content: center;
}

.oprog__step.is-done .oprog__dot {
	background: var(--c-teal);
	border-color: var(--c-teal);
}

/* Tick inside the reached steps. */
.oprog__step.is-done .oprog__dot::after {
	content: '';
	width: 4px;
	height: 7px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}

.oprog__step.is-done .oprog__label {
	color: #40444C;
}

/* Rail + ETA read as one white card (Pay 4 / Pay 5). */
.thanks__railcard {
	background: var(--c-surface);
	border-radius: var(--r-lg);
	padding: 16px 14px 12px;
	margin: 18px 0 14px;
}

/* The frame's secondary CTA is blue-on-white, not the neutral ghost. */
.thanks__actions .btn--ghost {
	color: var(--c-blue);
	border-color: var(--c-blue);
}

/* «جزئیات سفارش» over the order cards (Success Payment / order details). */
.orderd__heading {
	margin: 0 0 12px;
	font-size: var(--fs-14);
	font-weight: var(--fw-regular);
	color: var(--c-text);
}

/* Estimated arrival, on its own line under the rail inside the same card. */
.thanks__eta {
	margin: 14px 0 0;
	font-size: var(--fs-12);
	color: var(--c-text);
	text-align: center;
}

/* ---- «تایید با کد پیامکی» claim card ----------------------------------- */

.thanks__claim {
	background: var(--c-surface);
	border-radius: var(--r-lg);
	padding: 18px 16px;
	text-align: center;
	margin-bottom: 16px;
}

.thanks__claimtitle {
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	color: #40444C;
	margin: 0 0 8px;
}

.thanks__claimsub {
	font-size: var(--fs-10);
	color: #40444C;
	line-height: 1.9;
	margin: 0 0 14px;
}

.thanks__claimbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	color: var(--c-teal);
}

.thanks__sub b {
	color: var(--c-ink);
	font-weight: var(--fw-bold);
}

.thanks__lead {
	text-align: center;
	font-size: var(--fs-14);
	padding: 24px 0;
}

.thanks__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
}

.thanks .cheque-thanks {
	background: var(--c-indigo-50);
	color: var(--c-indigo-600);
	border-radius: var(--r);
	padding: 13px 15px;
	font-size: var(--fs-12);
	line-height: 1.9;
	margin-bottom: 16px;
	text-align: center;
}

/* ---- Add address (Figma 148:214) --------------------------------------- */

.addr {
	padding-block: 22px 32px;
}

.addr__title {
	font-size: var(--fs-16);
	font-weight: var(--fw-bold);
	color: var(--c-ink);
	margin: 0 0 20px;
}

.addr__notice {
	background: var(--c-teal-100);
	color: var(--c-teal-600);
	border-radius: var(--r);
	padding: 12px 14px;
	font-size: var(--fs-13);
	font-weight: var(--fw-medium);
	margin-bottom: 18px;
}

.addr__notice--warn {
	background: #FEF3F2;
	color: var(--c-red-ink);
}

.addr__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.addr__field {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.addr__label {
	font-size: var(--fs-12);
	font-weight: var(--fw-bold);
	color: var(--c-gray-600);
}

.addr__input {
	width: 100%;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r);
	padding: 11px 14px;
	font: inherit;
	font-size: var(--fs-13);
	color: var(--c-ink);
	transition: border-color .15s ease;
}

.addr__input::placeholder {
	color: var(--c-gray-300);
}

.addr__input:focus {
	outline: none;
	border-color: var(--c-indigo);
}

.addr__input--area {
	resize: vertical;
	min-height: 63px;
	line-height: 1.7;
}

.addr__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.addr__select {
	position: relative;
}

.addr__select select {
	appearance: none;
	-webkit-appearance: none;
	padding-inline-start: 34px;
}

.addr__chev {
	position: absolute;
	inset-inline-start: 12px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	color: var(--c-gray-400);
	pointer-events: none;
}

.addr__chev svg {
	width: 14px;
	height: 14px;
}

.addr__submit {
	margin-top: 6px;
	width: 100%;
	background: var(--c-indigo);
	color: #fff;
	border: 0;
	border-radius: var(--r);
	padding: 13px;
	font: inherit;
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	cursor: pointer;
	transition: background .15s ease;
}

.addr__submit:hover {
	background: var(--c-indigo-600);
}

/* ---- Dashboard: quick stats + latest orders ---------------------------- */

.acctstats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 16px 0;
}

.acctstat {
	background: var(--c-surface);
	border-radius: 8px;
	padding: 16px 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.acctstat__num {
	font-size: var(--fs-18);
	font-weight: var(--fw-bold);
	color: var(--c-teal-600);
	min-height: 26px;
	display: flex;
	align-items: center;
}

.acctstat__num svg {
	width: 24px;
	height: 24px;
}

.acctstat__label {
	font-size: var(--fs-12);
	color: var(--c-gray-600);
}

.acctorders {
	background: var(--c-surface);
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 16px;
}

.acctorders__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}

.acctorders__title {
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	color: #40444C;
	margin: 0;
}

.acctorders__all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--fs-12);
	color: var(--c-teal-600);
}

.acctorders__all svg {
	width: 14px;
	height: 14px;
}

.acctorder {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--c-bg);
	font-size: var(--fs-12);
	color: #40444C;
}

.acctorder__num {
	font-weight: var(--fw-bold);
	min-width: 64px;
}

.acctorder__date {
	color: var(--c-gray-500);
	flex: 1 1 auto;
}

.acctorder__status {
	font-size: var(--fs-10);
	font-weight: var(--fw-medium);
	padding: 3px 8px;
	border-radius: var(--r-pill);
	background: var(--c-bg);
	color: var(--c-gray-600);
}

.acctorder__status--processing { background: var(--c-teal-100); color: var(--c-teal-600); }
.acctorder__status--on-hold    { background: #FFEECE; color: #B97F00; }
.acctorder__status--completed  { background: var(--c-teal-100); color: var(--c-teal-600); }
.acctorder__status--cancelled  { background: #FDECEC; color: var(--c-red); }

.acctorder__total {
	font-weight: var(--fw-bold);
	white-space: nowrap;
}

.acctorder__total small {
	font-weight: var(--fw-regular);
	color: var(--c-gray-500);
}

.acctorder > svg {
	width: 14px;
	height: 14px;
	color: var(--c-gray-400);
	flex: 0 0 auto;
}

/* ---- Auth: sign in / sign up / code -------------------------------------
 * Frames: Code - Sign in, Confirm - Sign in, Sign up, Code- Sign up.
 * Fields and buttons are 343x40; field fill #F1F3F9; button #14B8A6;
 * code boxes 55 wide. Titles are 14/400 over a 12/400 line — not the heavy
 * hero type the old screen used.
 */

.auth {
	padding-block: 24px 32px;
}

.authtabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 26px;
}

.authtabs__tab {
	height: 40px;
	border-radius: var(--r);
	background: var(--c-surface);
	color: var(--c-teal);
	font-size: var(--fs-14);
	font-weight: var(--fw-medium);
	cursor: pointer;
}

.authtabs__tab.is-active {
	background: var(--c-teal);
	color: #fff;
}

.authstep[hidden] {
	display: none;
}

.auth__title {
	font-size: var(--fs-14);
	font-weight: var(--fw-medium);
	color: #40444C;
	text-align: center;
	margin: 0 0 8px;
}

.auth__sub {
	font-size: var(--fs-12);
	color: #40444C;
	text-align: center;
	line-height: 1.9;
	margin: 0 0 26px;
}

.auth__field {
	margin-bottom: 16px;
}

.auth__label {
	display: block;
	font-size: var(--fs-12);
	color: #40444C;
	margin-bottom: 8px;
	text-align: start;
}

.auth__input {
	width: 100%;
	height: 40px;
	padding-inline: 14px;
	background: #F1F3F9;
	/* A faint outline so the box reads as a field on the grey card. */
	border: 1px solid #D5DAE5;
	border-radius: var(--r);
	font: inherit;
	font-size: var(--fs-12);
	color: var(--c-ink);
	text-align: center;
}

/* Was #E2E6EE on the #F1F3F9 fill — practically invisible. */
.auth__input::placeholder {
	color: #8A93A8;
}

/* The phone fields are dir=ltr for the digits; the Persian hint should
   still read right-to-left until something is typed. */
.auth__input[dir="ltr"]:placeholder-shown {
	direction: rtl;
}

.auth__input:focus {
	outline: none;
	border-color: var(--c-teal);
	box-shadow: inset 0 0 0 1px var(--c-teal);
}

.auth__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px;
	border: 0;
	border-radius: var(--r);
	background: var(--c-teal);
	color: #fff;
	font: inherit;
	font-size: var(--fs-14);
	font-weight: var(--fw-medium);
	cursor: pointer;
}

.auth__btn:hover {
	background: var(--c-teal-600);
}

.auth__note {
	font-size: var(--fs-10);
	color: var(--c-text-muted);
	text-align: center;
	margin: 12px 0 0;
}

.auth__switch {
	text-align: center;
	margin-top: 22px;
	font-size: var(--fs-10);
	color: #626C83;
}

.auth__switch a {
	color: #007AFF;
	margin-inline-start: 4px;
}

/* ---- Code boxes --------------------------------------------------------- */

.authcode {
	display: flex;
	justify-content: center;
	gap: 7px;
	margin-bottom: 22px;
}

.authcode__box {
	width: 55px;
	height: 55px;
	border: 0;
	border-radius: var(--r);
	background: var(--c-surface);
	font: inherit;
	font-size: var(--fs-16);
	font-weight: var(--fw-medium);
	color: #40444C;
	text-align: center;
}

.authcode__box:focus {
	outline: none;
	box-shadow: inset 0 0 0 1.5px var(--c-teal);
}

.auth__resend {
	text-align: center;
	font-size: var(--fs-10);
	color: #40444C;
	margin: 0 0 22px;
}

.auth__resendbtn {
	background: none;
	border: 0;
	font: inherit;
	font-size: var(--fs-10);
	color: #007AFF;
	cursor: pointer;
}

/* ---- Greyed profile menu shown to guests -------------------------------- */

/* One card with hairline dividers, not four floating cards — 257:746 draws a
   single white block and rules between the rows. */
.authmenu {
	margin-top: 30px;
	background: var(--c-surface);
	border-radius: var(--r);
	overflow: hidden;
}

.authmenu__row {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 56px;
	padding-inline: 16px;
	font-size: var(--fs-12);
	color: #CCD2E0;
}

.authmenu__row + .authmenu__row {
	border-top: 1px solid var(--c-line);
}

/* Category glyph leads on the start side, padlock closes the end side. */
.authmenu__label {
	flex: 1 1 auto;
}

.authmenu__ic,
.authmenu__lock {
	flex: 0 0 auto;
	display: flex;
}

.authmenu__row svg {
	width: 16px;
	height: 16px;
	color: #CCD2E0;
}
/* WooCommerce's own stylesheet boxes `form.login` / `form.register` with a
   1px border and 20px of padding, which shrank these fields from 343 to 301.
   The auth screens supply their own frame. */
.auth .auth__form,
.auth form.login,
.auth form.register {
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
}

/* ---- Order tracking (Pay 5 / Desktop - Tracking) ------------------------ */

/* Pay 5 stacks: title, map, ETA, rail card, courier card, support link.
   The wrapper is transparent — each piece is its own card. */
.track {
	margin-bottom: 14px;
}

.track__title {
	font-size: var(--fs-16);
	font-weight: var(--fw-medium);
	color: #40444C;
	text-align: center;
	margin: 0 0 14px;
}

.track__map {
	border-radius: var(--r-lg);
	overflow: hidden;
	background: #EDF0F5;
	margin-bottom: 14px;
}

.track__map img {
	display: block;
	width: 100%;
	height: auto;
}

/* Without a courier map the slot still has to read as a panel, so it carries
   the destination address instead of being an empty grey box. */
.track__map.is-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 160px;
	padding: 20px 16px;
}

.track__mapic svg {
	width: 28px;
	height: 28px;
	color: #96A0B6;
}

.track__etacard {
	text-align: center;
	margin-bottom: 14px;
}

.track__etak {
	display: block;
	font-size: var(--fs-12);
	color: #40444C;
}

.track__etav {
	display: block;
	font-size: 20px;
	font-weight: var(--fw-medium);
	color: #96A0B6;
	margin-top: 4px;
}

.track__railcard {
	background: var(--c-surface);
	border-radius: var(--r-lg);
	padding: 14px 16px;
	margin-bottom: 14px;
}

.track__railcard .oprog {
	margin: 0;
}

.track__courier {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--c-surface);
	border-radius: var(--r-lg);
	padding: 12px 14px;
	margin-bottom: 12px;
}

.track__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.track__courierbody {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.track__ridername {
	font-size: var(--fs-14);
	font-weight: var(--fw-medium);
	color: #40444C;
}

.track__call {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: var(--r-md);
	background: var(--c-blue);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.track__call svg {
	width: 20px;
	height: 20px;
}

.track__addr {
	font-style: normal;
	font-size: var(--fs-12);
	line-height: 1.9;
	color: #40444C;
	text-align: center;
	margin: 0;
}

.track__plate {
	font-size: var(--fs-10);
	color: #626C83;
}

/* The compact summary and the standalone support button are desktop-only —
   mobile already carries both through the order card and the help line. */
.track__info,
.track__support {
	display: none;
}

.track__help {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: var(--fs-10);
	color: #626C83;
	margin: 14px 0 0;
}

.track__help a {
	color: #007AFF;
}

/* ---- «چک‌های من» account page ------------------------------------------ */

.mychq {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Due-soon banner above the grid. */
.mychq__due-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #E6F2FF;
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 16px;
	font-size: var(--fs-12);
	color: #40444C;
}

.mychq__due-ic {
	display: inline-flex;
	color: #007AFF;
}

.mychq__due-ic svg { width: 18px; height: 18px; }

.mychq__due-total {
	margin-inline-start: auto;
	font-weight: var(--fw-medium);
}

/* Each cheque is its own card; the grid is one column on mobile. */
.mychq__card {
	background: var(--c-surface);
	border: 1.5px solid transparent;
	border-radius: 8px;
	padding: 14px 16px;
}

.mychq__card.is-soon {
	border-color: var(--c-teal);
}

.mychq__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.mychq__card .mychq__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	font-size: var(--fs-12);
}

.mychq__k { color: #626C83; }
.mychq__v { color: #40444C; font-weight: var(--fw-medium); }

.mychq__status--soon {
	background: var(--c-teal-100);
	color: var(--c-teal-600);
}

.mychq__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--c-surface);
	border-radius: var(--r-lg);
	padding: 14px 16px;
}

.mychq__main {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.mychq__title {
	font-size: var(--fs-14);
	font-weight: var(--fw-medium);
	color: #40444C;
}

.mychq__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-10);
	color: #626C83;
}

.mychq__meta a {
	color: #007AFF;
}

.mychq__side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	flex: 0 0 auto;
}

.mychq__amount {
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	color: #40444C;
}

.mychq__status {
	font-size: var(--fs-10);
	font-weight: var(--fw-medium);
	padding: 3px 10px;
	border-radius: var(--r-pill);
	background: var(--c-bg);
	color: var(--c-gray-600);
	white-space: nowrap;
}

.mychq__status--cleared  { background: var(--c-teal-100); color: var(--c-teal-600); }
.mychq__status--received { background: #E6F2FF; color: #0041B9; }
.mychq__status--rejected { background: #FDECEC; color: var(--c-red); }
.mychq__status--awaiting { background: #FFEECE; color: #B97F00; }

/* ---- Order status filter (My orders frame) ------------------------------ */

.myorders__filters {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
	overflow-x: auto;
	scrollbar-width: none;
}

.myorders__filters::-webkit-scrollbar { display: none; }

.myorders__filter {
	flex: 0 0 auto;
	padding: 7px 16px;
	border-radius: var(--r);
	background: var(--c-surface);
	font-size: var(--fs-14);
	font-weight: var(--fw-regular);
	color: #40444C;
	cursor: pointer;
}

.myorders__filter.is-active {
	color: var(--c-teal);
}

.myorders__none {
	text-align: center;
	font-size: var(--fs-12);
	color: var(--c-text-muted);
	padding: 28px 0;
}

/* ---- Who is signed in, above the account rail --------------------------- */

.acctnav__who {
	display: none; /* desktop only — the frames show it in the right rail */
	align-items: center;
	gap: 12px;
	padding: 4px 8px 16px;
}

.acctnav__whoavatar {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--c-bg);
	color: var(--c-teal);
	display: flex;
	align-items: center;
	justify-content: center;
}

.acctnav__whoavatar svg { width: 22px; height: 22px; }

.acctnav__whotext {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.acctnav__whoname {
	font-size: var(--fs-14);
	color: #40444C;
}

.acctnav__whophone {
	font-size: var(--fs-12);
	color: #626C83;
}

/* ---- «پشتیبانی» screen -------------------------------------------------- */

.support__cards {
	display: grid;
	gap: 12px;
	margin-bottom: 26px;
}

.support__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--c-surface);
	border-radius: var(--r-lg);
	padding: 18px 16px;
	color: inherit;
}

.support__cardic {
	color: var(--c-teal);
	display: inline-flex;
	margin-bottom: 4px;
}

.support__cardic svg { width: 24px; height: 24px; }

.support__cardtitle {
	font-size: var(--fs-16);
	color: #40444C;
}

.support__cardnote {
	font-size: var(--fs-10);
	color: #40444C;
	line-height: 1.8;
}

.support__faqtitle,
.support__msgtitle {
	font-size: var(--fs-18);
	font-weight: var(--fw-regular);
	color: #40444C;
	margin: 0 0 14px;
}

/* FAQ and the message box each sit in their own white card. */
.support__faqcard,
.support__msg {
	display: block;
	margin-bottom: 16px;
}

.support__textarea {
	width: 100%;
	min-height: 110px;
	padding: 14px;
	background: var(--c-bg);
	border: 1px solid #E2E6EE;
	border-radius: 8px;
	font: inherit;
	font-size: var(--fs-13);
	line-height: 1.9;
	color: var(--c-ink);
	resize: vertical;
}

.support__textarea::placeholder {
	color: #CCD2E0;
}

.support__textarea:focus {
	outline: none;
	border-color: var(--c-teal);
}

.support__send {
	display: block;
	margin-top: 14px;
	margin-inline-start: auto;
	min-width: 120px;
	height: 40px;
	border: 0;
	border-radius: 8px;
	background: var(--c-teal);
	color: #fff;
	font: inherit;
	font-size: var(--fs-14);
	cursor: pointer;
}

.support__send:hover {
	background: var(--c-teal-600);
}

.support__sent {
	background: var(--c-teal-100);
	color: var(--c-teal-600);
	border-radius: var(--r);
	padding: 12px 14px;
	font-size: var(--fs-12);
	margin: 0 0 14px;
}

/* The desktop benefits panel has no counterpart in the mobile frames. */
.authside {
	display: none;
}

/* ---- Printing an order = the invoice ------------------------------------ */

@media print {
	.site-header,
	.site-footer,
	.bottomnav,
	.acctnav,
	.orderd__top .orderd__back,
	.orderd__actions,
	.woocommerce-notices-wrapper {
		display: none !important;
	}

	body {
		background: #fff;
	}

	.account {
		display: block !important;
	}

	.orderd__card {
		break-inside: avoid;
		box-shadow: none;
	}
}

/* ---- Add / edit address (Desktop - New Address, Adding Address) ---------- */

.addrform {
	background: var(--c-surface);
	border-radius: var(--r-lg);
	padding: 20px 18px 22px;
}

.addrform__top {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.addrform__title {
	flex: 1;
	margin: 0;
	font-size: var(--fs-16);
	font-weight: var(--fw-medium);
	color: var(--c-text);
}

.addrform__close {
	flex: none;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--c-line);
	border-radius: var(--r);
	color: var(--c-text);
}

.addrform__close svg {
	width: 18px;
	height: 18px;
}

.addrform__fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.addrform .form-row {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.addrform .form-row label {
	font-size: var(--fs-14);
	color: var(--c-text);
}

.addrform .form-row .required {
	color: var(--c-red);
	text-decoration: none;
}

.addrform .form-row input.input-text,
.addrform .form-row select,
.addrform .form-row .select2-selection {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--c-line);
	border-radius: var(--r);
	background: var(--c-surface);
	font: inherit;
	font-size: var(--fs-14);
	color: var(--c-text);
}

.addrform .form-row input.input-text::placeholder {
	color: var(--c-gray-300);
}

/*
 * The store sells to Iran only, so the country row carries no choice. It needs
 * !important because WooCommerce's address-i18n.js re-shows address rows with
 * an inline style after it has re-ordered them for the locale.
 */
.addrform #billing_country_field,
.addrform #shipping_country_field {
	display: none !important;
}

/* Same reason: core's .form-row-first/-last are 47%-wide floats, which the
   grid does not need and which shrink every field to half its cell. */
.addrform .form-row-first,
.addrform .form-row-last,
.addrform .form-row-wide {
	width: 100% !important;
	float: none !important;
}

.addrform__submit {
	margin: 24px 0 0;
}

.addrform__submit .btn {
	width: 100%;
	height: 48px;
}

/* The e-mail/password fallback is set apart from the frame's two fields so it
   reads as "only until SMS is wired up", not as part of the design. */
.auth__fallback {
	border-top: 1px dashed var(--c-line);
	margin-top: 6px;
	padding-top: 14px;
}

.auth__fallback .auth__note {
	margin: 0 0 12px;
}

/* ---- My orders: «سفارش فعال» strip + desktop-only row parts ----------- */

.myorders__active {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #E6F2FF;
	color: var(--c-blue);
	border-radius: var(--r-lg);
	padding: 12px 14px;
	margin-bottom: 14px;
	font-size: var(--fs-12);
}

.myorders__activeic {
	display: inline-flex;
	flex: 0 0 auto;
}

.myorders__activeic svg {
	width: 18px;
	height: 18px;
}

.myorders__activetxt {
	flex: 1;
	min-width: 0;
	color: var(--c-ink);
}

.myorders__activelink {
	flex: 0 0 auto;
	font-weight: var(--fw-bold);
	color: var(--c-blue);
}

/* The product-name line and the inline date exist for the desktop row only. */
.myorder__title,
.myorder__date--dt {
	display: none;
}

.myorder__id {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}


/* ---- Sign-in landing hero + step glyphs (257:746, 265:1266) ----------
 * The frames run avatar → greeting → tabs on the landing, and swap the
 * avatar for a device / check glyph once the flow moves to the code and
 * success steps, so the hero hides itself on those two.
 */
.authhero {
	text-align: center;
	margin-bottom: 24px;
}

.authhero__avatar,
.authstep__ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	margin-bottom: 14px;
}

.authhero__avatar svg,
.authstep__ic svg {
	width: 28px;
	height: 28px;
	color: var(--c-gray-700);
}

.authstep__ic {
	display: flex;
	margin-inline: auto;
}

.authstep__ic--ok {
	border-color: var(--c-teal);
}

.authstep__ic--ok svg {
	color: var(--c-teal);
}

.authhero__title {
	font-size: var(--fs-18);
	font-weight: var(--fw-bold);
	color: var(--c-gray-700);
	margin: 0 0 6px;
}

.authhero__sub {
	font-size: var(--fs-12);
	color: var(--c-text-muted);
	margin: 0;
}

/* Code and success own the screen — the landing greeting steps aside. */
.auth:has(.authstep[data-auth-step="code"]:not([hidden])) .authhero,
.auth:has(.authstep[data-auth-step="success"]:not([hidden])) .authhero,
.auth:has(.authstep[data-auth-step="code"]:not([hidden])) .authtabs,
.auth:has(.authstep[data-auth-step="success"]:not([hidden])) .authtabs {
	display: none;
}

.auth__title--ok {
	color: var(--c-teal);
}

/* Second CTA on the success screen: profile is solid, cart is outlined. */
.auth__btn--ghost {
	background: transparent;
	color: var(--c-teal);
	border: 1px solid var(--c-teal);
	margin-top: 10px;
}

.auth__btn--ghost:hover {
	background: rgba(20, 184, 166, 0.06);
}

/* ---- Controls digits injects that the frames do not have -------------
 * `wc_addNewUserNameInLogin` wraps our input in `.digcon`, drops an
 * absolutely-positioned +98 box over its top-left corner and forces
 * `padding-left:80px` on the field; `wooc_extra_login` adds a second
 * «ادامه دهید» button. The country box stays in the DOM so digits still
 * receives the value — every customer here dials +98 anyway.
 */
.auth .digcon {
	position: relative;
}

.auth .dig_wc_countrycodecontainer {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.auth .auth__input[style] {
	padding-left: 16px !important;
}

.auth .auth__form > button[onclick="return false"],
.auth .digits_login_via_otp,
.auth .dig_lrf_box .loginviasms {
	display: none !important;
}

/* Gateway errors sit right above the control that caused them. */
.auth__error {
	margin: 0 0 10px;
	font-size: var(--fs-12);
	font-weight: var(--fw-medium);
	color: var(--c-red);
	text-align: center;
}

.auth__btn[disabled] {
	opacity: 0.65;
	pointer-events: none;
}

/* While a code is being sent or checked the button locks and pulses, so a
 second tap cannot fire a second SMS. */
.auth__btn.is-busy {
	position: relative;
	cursor: progress;
	animation: auth-pulse 1.1s ease-in-out infinite;
}

@keyframes auth-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.62; }
}

@media (prefers-reduced-motion: reduce) {
	.auth__btn.is-busy { animation: none; opacity: 0.75; }
}

/* ---- Logout, now its own control under the rail ------------------------- */

/*
 * Rendered after the menu list (navigation.php) rather than as the last row of
 * it: the desktop frames put it outside the white card, and an <li> can never
 * leave that card by CSS alone. Mobile keeps it looking like the other rows.
 */
.acctnav__logout {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r);
	padding: 15px 16px;
	margin-top: 10px;
	font-size: var(--fs-14);
	font-weight: var(--fw-medium);
	color: var(--c-red);
}