/**
 * EKhanS Store Manager — v1.5.0 styles.
 *
 * Loaded after store.css. Holds the auth gate, the customer tracking view, and
 * the jersey typography corrections (kept here so store.css needs no edit).
 */

/* --------------------------------------------------- jersey typography fix */

.esm .esm-card__title,
.esm-card__title {
	color: #ffffff !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

.esm .esm-card__sizes,
.esm .esm-card__size,
.esm .esm-card__meta,
.esm .esm-chip,
.esm-card__sizes {
	color: #94a3b8 !important;
}

.esm .esm-card__price,
.esm .esm-card__price--sale,
.esm [data-esm-card-price] {
	color: #22c55e !important;
	font-weight: 800 !important;
}

.esm .esm-card__price--was,
.esm .esm-card__price del,
.esm del {
	color: #64748b !important;
	text-decoration: line-through;
	font-weight: 500 !important;
}

.esm .esm-card__badge,
.esm .esm-badge--stock {
	color: #94a3b8 !important;
}

/* ------------------------------------------------------------- auth gate */

body.esm-auth-open { overflow: hidden; }

.esm-auth {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: grid;
	place-items: center;
	padding: 20px;
	opacity: 0;
	transition: opacity 0.18s ease;
}

.esm-auth.is-in { opacity: 1; }

.esm-auth__scrim {
	position: absolute;
	inset: 0;
	background: rgba(4, 6, 10, 0.82);
	backdrop-filter: blur(6px);
}

.esm-auth__panel {
	position: relative;
	width: min(420px, 100%);
	padding: 30px 26px 24px;
	border: 1px solid #232a35;
	border-radius: 18px;
	background: #11141a;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
	transform: translateY(10px) scale(0.98);
	transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.esm-auth.is-in .esm-auth__panel { transform: none; }

.esm-auth__x {
	position: absolute;
	top: 10px;
	right: 12px;
	border: 0;
	background: none;
	color: #64748b;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.esm-auth__x:hover { color: #ffffff; }

.esm-auth__kicker {
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(250, 204, 21, 0.12);
	color: #facc15;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.esm-auth__title {
	margin: 0 0 8px;
	color: #ffffff;
	font-size: 22px;
	line-height: 1.25;
}

.esm-auth__copy {
	margin: 0 0 20px;
	color: #94a3b8;
	font-size: 14px;
	line-height: 1.55;
}

.esm-auth__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.esm-auth__btn {
	flex: 1 1 140px;
	padding: 13px 18px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.esm-auth__btn--gold {
	background: linear-gradient(180deg, #fde047, #f5b70a);
	color: #11141a;
}

.esm-auth__btn--ghost {
	border: 1px solid #2b3442;
	background: #161b22;
	color: #e2e8f0;
}

.esm-auth__btn:hover { filter: brightness(1.06); }

.esm-auth__foot {
	margin: 14px 0 0;
	color: #64748b;
	font-size: 12px;
}

/* ------------------------------------------------------- tracking view */

.esm-v15 {
	--esm-ink: #e2e8f0;
	--esm-mute: #94a3b8;
	--esm-line: #232a35;
	--esm-panel: #161b22;
	max-width: 760px;
	margin: 0 auto;
	color: var(--esm-ink);
	font-size: 15px;
}

.esm-v15 a { color: #facc15; }
.esm-v15 a:hover { color: #fde047; }

.esm-orders__title {
	margin: 0 0 4px;
	color: #ffffff;
	font-size: 26px;
}

.esm-orders__sub {
	margin: 0 0 18px;
	color: var(--esm-mute);
	font-size: 14px;
}

.esm-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 8px 4px 16px;
	border: 1px solid var(--esm-line);
	border-radius: 14px;
	background: #11141a;
}

.esm-search:focus-within { border-color: #facc15; }

.esm-search__hash {
	color: #facc15;
	font-size: 18px;
	font-weight: 800;
}

.esm-search__input {
	flex: 1;
	min-width: 0;
	padding: 12px 0;
	border: 0;
	background: none;
	color: #ffffff;
	font-size: 17px;
	font-weight: 600;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.esm-search__input::placeholder { color: #64748b; font-weight: 400; }
.esm-search__input::-webkit-search-cancel-button { display: none; }

.esm-search__clear {
	border: 0;
	border-radius: 10px;
	background: none;
	color: #64748b;
	font-size: 22px;
	line-height: 1;
	padding: 6px 10px;
	cursor: pointer;
}

.esm-search__clear:hover { color: #ffffff; background: #1c2230; }

.esm-orders__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
	transition: opacity 0.15s ease;
}

.esm-orders__list.is-loading { opacity: 0.45; }

.esm-empty {
	margin: 0;
	padding: 26px 18px;
	border: 1px dashed var(--esm-line);
	border-radius: 14px;
	color: var(--esm-mute);
	text-align: center;
}

.esm-card {
	border: 1px solid var(--esm-line);
	border-radius: 14px;
	background: var(--esm-panel);
	overflow: hidden;
}

.esm-card.is-open { border-color: #2f3a4b; }

.esm-card__top {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 14px 16px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.esm-card__top:hover { background: #1a2029; }

.esm-card__no {
	flex: 0 0 auto;
	min-width: 46px;
	padding: 8px 10px;
	border-radius: 10px;
	background: #11141a;
	color: #facc15;
	font-size: 15px;
	font-weight: 800;
	text-align: center;
}

.esm-card__main { flex: 1; min-width: 0; }

.esm-card__item {
	display: block;
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.esm-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	color: var(--esm-mute);
	font-size: 12.5px;
}

.esm-chip {
	padding: 2px 8px;
	border-radius: 999px;
	background: #1c2230;
	color: #cbd5e1;
}

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

.esm-card__amount {
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.esm-badge {
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.esm-badge--pending { background: rgba(250, 204, 21, 0.14); color: #facc15; }
.esm-badge--processing { background: rgba(56, 189, 248, 0.14); color: #38bdf8; }
.esm-badge--completed { background: rgba(34, 197, 94, 0.16); color: #22c55e; }
.esm-badge--cancelled { background: rgba(248, 113, 113, 0.14); color: #f87171; }

.esm-card__body {
	padding: 4px 16px 18px;
	border-top: 1px solid var(--esm-line);
}

/* 3-step timeline */

.esm-steps {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 0;
	margin: 20px 0 18px;
}

.esm-step {
	position: relative;
	padding-top: 22px;
	text-align: center;
	color: #64748b;
	font-size: 12.5px;
}

.esm-step::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 0;
	right: 0;
	height: 2px;
	background: #232a35;
}

.esm-step:first-child::before { left: 50%; }
.esm-step:last-child::before { right: 50%; }

.esm-step__dot {
	position: absolute;
	top: 0;
	left: 50%;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	border: 2px solid #2b3442;
	border-radius: 50%;
	background: #11141a;
}

.esm-step.is-done { color: #94a3b8; }
.esm-step.is-done::before { background: #22c55e; }
.esm-step.is-done .esm-step__dot { border-color: #22c55e; background: #22c55e; }

.esm-step.is-current { color: #ffffff; font-weight: 700; }
.esm-step.is-current::before { background: linear-gradient(90deg, #22c55e, #232a35); }
.esm-step.is-current .esm-step__dot {
	border-color: #facc15;
	background: #facc15;
	box-shadow: 0 0 0 5px rgba(250, 204, 21, 0.16);
}

.esm-step.is-cancelled { color: #f87171; font-weight: 700; }
.esm-step.is-cancelled::before { background: #f87171; }
.esm-step.is-cancelled .esm-step__dot { border-color: #f87171; background: #f87171; }

.esm-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 0;
}

.esm-facts dt {
	margin: 0 0 2px;
	color: #64748b;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.esm-facts dd { margin: 0; color: var(--esm-ink); font-size: 14px; }
.esm-facts code { color: #facc15; font-size: 13px; }

/* logged-out gate on the tracking page */

.esm-gate {
	padding: 32px 24px;
	border: 1px solid var(--esm-line);
	border-radius: 16px;
	background: var(--esm-panel);
	text-align: center;
}

.esm-gate__title { margin: 0 0 8px; color: #ffffff; font-size: 22px; }
.esm-gate__copy { margin: 0 0 20px; color: var(--esm-mute); }

.esm-gate__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.esm-gate .esm-btn {
	padding: 12px 22px;
	border-radius: 12px;
	font-weight: 700;
	text-decoration: none;
}

.esm-gate .esm-btn--gold { background: linear-gradient(180deg, #fde047, #f5b70a); color: #11141a; }
.esm-gate .esm-btn--ghost { border: 1px solid #2b3442; background: #11141a; color: #e2e8f0; }

/* header hamburger link */

.esm-nav-track {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.esm-nav-track__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #22c55e;
}

@media (max-width: 480px) {
	.esm-card__top { gap: 10px; padding: 12px; }
	.esm-card__no { min-width: 40px; padding: 7px 8px; font-size: 14px; }
	.esm-card__item { font-size: 14px; }
	.esm-orders__title { font-size: 22px; }
	.esm-step { font-size: 11.5px; }
}

.esm-stage {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 10px 12px;
	border: 1px solid #d8e6da;
	border-radius: 10px;
	background: #f3faf4;
	font-size: 14px;
}
.esm-stage__tag { font-weight: 600; color: #1d7a3f; }
.esm-stage__label { font-weight: 600; color: #14311f; }
.esm-stage__at { margin-left: auto; color: #6b7b70; font-size: 12px; }

.esm-pay {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 14px;
	padding: 12px;
	border: 1px solid #e6d9b8;
	border-radius: 10px;
	background: #fdf8ec;
}
.esm-pay__due { margin: 0; font-weight: 600; color: #6b4e00; }
.esm-pay__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.esm-pay__balance { margin: 0; font-size: 12px; color: #6b7b70; }
.esm-btn {
	appearance: none;
	border: 0;
	border-radius: 8px;
	padding: 11px 16px;
	min-height: 44px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.esm-btn--pay { background: #1d7a3f; color: #fff; }
.esm-btn--pay:hover { background: #145c2f; }
.esm-btn--wallet { background: #fff; color: #14311f; border: 1px solid #1d7a3f; }
.esm-btn--wallet:hover { background: #f3faf4; }
.esm-chip--due { background: #fdf0d5; color: #6b4e00; }
.esm-paynotice { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.esm-paynotice--ok { background: #f3faf4; border: 1px solid #d8e6da; color: #14311f; }
.esm-paynotice--warn { background: #fdf8ec; border: 1px solid #e6d9b8; color: #6b4e00; }

.esm-paycell { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.esm-paycell__none { color: #9aa6a0; }
.esm-btn--sm { padding: 8px 12px; min-height: 36px; font-size: 13px; white-space: nowrap; }