/* ---------------------------------------------------------------------------
   EKhanS Theme — component layer

   Loaded on every page, after style.css (tokens, reset, header, footer).
   Everything here is a reusable presentational component. No page-specific
   rules; those live in dashboard.css or in the template itself.

   Colour discipline, restated because it is easy to break:
     --ek-accent  green  = safe / money moves forward / primary action
     --ek-timer1  amber  = Timer 1, seller response. Nothing else.
     --ek-timer2  blue   = Timer 2, buyer completion. Nothing else.
     --ek-danger  red    = failure, dispute, destructive action
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Surfaces
   --------------------------------------------------------------------------- */

.ek-card {
	background: var(--ek-surface);
	border: 1px solid var(--ek-border);
	border-radius: var(--ek-radius);
	overflow: hidden;
}

.ek-card--interactive {
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.ek-card--interactive:hover {
	border-color: var(--ek-border-strong);
	transform: translateY(-2px);
}

.ek-panel {
	background: var(--ek-surface);
	border: 1px solid var(--ek-border);
	border-radius: var(--ek-radius);
	padding: 18px;
}

.ek-panel--flush { padding: 0; }
.ek-panel--tight { padding: 14px; }

.ek-panel__head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 14px;
}

.ek-panel__title {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.ek-panel__meta {
	margin: 0;
	color: var(--ek-text-3);
	font-size: 13px;
}

.ek-divider {
	height: 1px;
	margin: 16px 0;
	background: var(--ek-border);
	border: 0;
}

.ek-eyebrow {
	margin: 0 0 6px;
	color: var(--ek-text-4);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

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

.ek-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--ek-tap);
	padding: 0 20px;
	border: 1px solid transparent;
	border-radius: var(--ek-radius-sm);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.ek-btn:hover { text-decoration: none; }

.ek-btn--primary {
	background: var(--ek-accent);
	color: var(--ek-accent-ink);
}

.ek-btn--primary:hover,
.ek-btn--primary:focus {
	background: var(--ek-accent-hover);
	color: var(--ek-accent-ink);
}

.ek-btn--secondary {
	background: var(--ek-surface-2);
	border-color: var(--ek-border);
	color: var(--ek-text);
}

.ek-btn--secondary:hover,
.ek-btn--secondary:focus {
	background: var(--ek-surface-3);
	border-color: var(--ek-border-strong);
	color: var(--ek-text);
}

.ek-btn--ghost {
	background: transparent;
	border-color: var(--ek-border);
	color: var(--ek-text-2);
}

.ek-btn--ghost:hover,
.ek-btn--ghost:focus {
	border-color: var(--ek-border-strong);
	color: var(--ek-text);
}

.ek-btn--danger {
	background: transparent;
	border-color: var(--ek-danger-line);
	color: var(--ek-danger-text);
}

.ek-btn--danger:hover,
.ek-btn--danger:focus {
	background: var(--ek-danger-soft);
	color: var(--ek-danger-text);
}

.ek-btn--sm {
	min-height: 40px;
	padding: 0 14px;
	font-size: 13.5px;
}

.ek-btn--lg {
	min-height: 54px;
	padding: 0 26px;
	font-size: 16px;
}

.ek-btn--block { width: 100%; }

.ek-btn[disabled],
.ek-btn.is-busy {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

.ek-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ek-btn-row--stack { flex-direction: column; }

@media (min-width: 640px) {
	.ek-btn-row--stack { flex-direction: row; }
}

/* ---------------------------------------------------------------------------
   Badges and chips
   --------------------------------------------------------------------------- */

.ek-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border: 1px solid var(--ek-border);
	border-radius: 999px;
	background: var(--ek-surface-2);
	color: var(--ek-text-2);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ek-badge--active,
.ek-badge--completed {
	background: var(--ek-accent-soft);
	border-color: var(--ek-accent-line);
	color: var(--ek-accent);
}

.ek-badge--pending {
	background: var(--ek-timer1-soft);
	border-color: var(--ek-timer1-line);
	color: var(--ek-timer1-text);
}

.ek-badge--held {
	background: var(--ek-timer2-soft);
	border-color: var(--ek-timer2-line);
	color: var(--ek-timer2-text);
}

.ek-badge--disputed,
.ek-badge--failed {
	background: var(--ek-danger-soft);
	border-color: var(--ek-danger-line);
	color: var(--ek-danger-text);
}

.ek-chip {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 12px;
	background: var(--ek-surface-2);
	border: 1px solid var(--ek-border);
	border-radius: 999px;
	color: var(--ek-text-3);
	font-size: 12.5px;
	white-space: nowrap;
}

.ek-chip--attr { text-transform: none; }

.ek-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

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

.ek-notice {
	display: flex;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--ek-border);
	border-left-width: 3px;
	border-radius: var(--ek-radius-sm);
	background: var(--ek-surface);
	font-size: 14px;
}

.ek-notice__title {
	margin: 0 0 4px;
	font-weight: 600;
	font-size: 14.5px;
}

.ek-notice__body {
	margin: 0;
	color: var(--ek-text-3);
}

.ek-notice--info {
	border-left-color: var(--ek-timer2);
	background: var(--ek-timer2-soft);
}

.ek-notice--ok {
	border-left-color: var(--ek-accent);
	background: var(--ek-accent-soft);
}

.ek-notice--warn {
	border-left-color: var(--ek-timer1);
	background: var(--ek-timer1-soft);
}

.ek-notice--error {
	border-left-color: var(--ek-danger);
	background: var(--ek-danger-soft);
}

/* ---------------------------------------------------------------------------
   Timers

   Timer 1 (amber) is the seller-response clock on a purchase request: no money
   has moved. Timer 2 (blue) is the buyer-completion clock on an order: funds
   are held. The two are never the same colour, and the label always says which
   one it is, so a screenshot alone is unambiguous.
   --------------------------------------------------------------------------- */

.ek-timer {
	padding: 12px 14px;
	border: 1px solid var(--ek-border);
	border-left-width: 3px;
	border-radius: var(--ek-radius-sm);
	background: var(--ek-surface-2);
}

.ek-timer__label {
	margin: 0 0 2px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.ek-timer__value {
	margin: 0;
	font-family: var(--ek-font-mono);
	font-size: 1.5rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	color: var(--ek-text);
}

.ek-timer__note {
	margin: 6px 0 0;
	color: var(--ek-text-3);
	font-size: 12.5px;
}

.ek-timer--seller {
	border-color: var(--ek-timer1-line);
	border-left-color: var(--ek-timer1);
	background: var(--ek-timer1-soft);
}

.ek-timer--seller .ek-timer__label { color: var(--ek-timer1-text); }

.ek-timer--buyer {
	border-color: var(--ek-timer2-line);
	border-left-color: var(--ek-timer2);
	background: var(--ek-timer2-soft);
}

.ek-timer--buyer .ek-timer__label { color: var(--ek-timer2-text); }

.ek-timer.is-expired .ek-timer__value {
	color: var(--ek-danger-text);
	font-size: 1.1rem;
}

.ek-timer-inline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ek-font-mono);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.ek-timer-inline--seller { color: var(--ek-timer1-text); }
.ek-timer-inline--buyer { color: var(--ek-timer2-text); }

.ek-timer-inline::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Money
   --------------------------------------------------------------------------- */

.ek-price {
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--ek-text);
}

.ek-price--lg { font-size: 1.9rem; }
.ek-price--accent { color: var(--ek-accent); }

.ek-price-note {
	margin: 4px 0 0;
	color: var(--ek-text-3);
	font-size: 12.5px;
}

.ek-money-rows {
	display: grid;
	gap: 10px;
	margin: 0;
}

.ek-money-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.ek-money-row__label {
	color: var(--ek-text-3);
	font-size: 14px;
}

.ek-money-row__value {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ek-money-row--total {
	padding-top: 12px;
	border-top: 1px solid var(--ek-border);
}

.ek-money-row--total .ek-money-row__label {
	color: var(--ek-text);
	font-weight: 600;
	font-size: 15px;
}

.ek-money-row--total .ek-money-row__value {
	font-size: 1.3rem;
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Listing card
   --------------------------------------------------------------------------- */

.ek-listing-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ek-listing-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--ek-surface-2);
}

.ek-listing-card__media .ek-media-placeholder {
	position: absolute;
	inset: 0;
	border: 0;
	border-radius: 0;
}

.ek-listing-card__thumb {
	position: absolute;
	inset: 0;
	display: block;
}

.ek-listing-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ek-listing-card__count {
	position: absolute;
	bottom: 8px;
	right: 8px;
	z-index: 1;
	min-width: 24px;
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.62);
	color: #fff;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* Listing gallery — single listing page. */

.ek-listing__hero {
	margin: 0;
	overflow: hidden;
	border-radius: var(--ek-radius, 10px);
	background: var(--ek-surface-2);
	aspect-ratio: 16 / 10;
}

.ek-listing__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ek-listing__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.ek-listing__thumb {
	width: 76px;
	height: 56px;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: 8px;
	background: var(--ek-surface-2);
	cursor: pointer;
}

.ek-listing__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ek-listing__thumb.is-on {
	border-color: var(--ek-accent, currentColor);
}

/* Listing screenshot uploader — seller form. */

.ek-uploader__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.ek-uploader__item {
	position: relative;
	width: 96px;
	height: 72px;
	overflow: hidden;
	border-radius: 8px;
	background: var(--ek-surface-2);
}

.ek-uploader__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ek-uploader__remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.68);
	color: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.ek-uploader__actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

[data-ek-uploader-status].is-error {
	color: var(--ek-danger, #b3261e);
}

/* Header buy/sell mode switch. */

.ek-mode-switch {
	display: inline-flex;
	padding: 3px;
	gap: 2px;
	border-radius: 999px;
	background: var(--ek-surface-2);
}

.ek-mode-switch__opt {
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
}

.ek-mode-switch__opt.is-on {
	background: var(--ek-surface, #fff);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Seller delivery: send saved details vs type a message. */

.ek-delivery-choice {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Operator message in the order conversation. */

.ek-msg--operator {
	border-left: 3px solid var(--ek-accent, #4a5568);
	background: var(--ek-surface-2);
}

.ek-msg--operator .ek-msg__who {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 11px;
}

/* Operator release/refund panel. */

.ek-decision-actions {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ek-listing-card__flag {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
}

.ek-listing-card__fav {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 1;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	background: rgba(10, 11, 14, 0.72);
	border: 1px solid var(--ek-border);
	border-radius: 50%;
	color: var(--ek-text-3);
	font-size: 15px;
	cursor: pointer;
}

.ek-listing-card__fav.is-on { color: var(--ek-accent); border-color: var(--ek-accent-line); }

.ek-listing-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	flex: 1;
}

.ek-listing-card__title {
	margin: 0;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
}

.ek-listing-card__title a { color: var(--ek-text); }
.ek-listing-card__title a:hover { color: var(--ek-accent); text-decoration: none; }

.ek-listing-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	color: var(--ek-text-4);
	font-size: 12.5px;
}

.ek-listing-card__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 4px;
}

.ek-media-placeholder {
	display: grid;
	place-items: center;
	min-height: 120px;
	border: 1px dashed var(--ek-border-strong);
	border-radius: var(--ek-radius-sm);
	background:
		repeating-linear-gradient(
			135deg,
			transparent 0 10px,
			rgba(255, 255, 255, 0.022) 10px 20px
		),
		var(--ek-surface-2);
	color: var(--ek-text-4);
	font-family: var(--ek-font-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-align: center;
	padding: 12px;
}

/* ---------------------------------------------------------------------------
   Filters and search
   --------------------------------------------------------------------------- */

.ek-filters {
	display: grid;
	gap: 12px;
	padding: 14px;
	background: var(--ek-surface);
	border: 1px solid var(--ek-border);
	border-radius: var(--ek-radius);
}

.ek-filters__row {
	display: grid;
	gap: 12px;
}

.ek-filters__actions {
	display: flex;
	gap: 10px;
}

.ek-filters__actions .ek-btn { flex: 1; }

.ek-filters__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	color: var(--ek-text-3);
	font-size: 13.5px;
}

@media (min-width: 640px) {
	.ek-filters__row { grid-template-columns: 2fr 1fr 1fr; align-items: end; }
	.ek-filters__actions .ek-btn { flex: 0 0 auto; }
}

/* ---------------------------------------------------------------------------
   Fields
   --------------------------------------------------------------------------- */

.ek-field { display: grid; gap: 6px; }

.ek-field__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ek-text-2);
}

.ek-field__required { color: var(--ek-danger-text); }

.ek-field__help {
	margin: 0;
	color: var(--ek-text-4);
	font-size: 12.5px;
}

.ek-input {
	width: 100%;
	min-height: var(--ek-tap);
	padding: 0 14px;
	background: var(--ek-surface-2);
	border: 1px solid var(--ek-border);
	border-radius: var(--ek-radius-sm);
	color: var(--ek-text);
	font-family: inherit;
	font-size: 15px;
}

.ek-input::placeholder { color: var(--ek-text-4); }

.ek-input:focus {
	border-color: var(--ek-accent-line);
	outline: none;
	box-shadow: 0 0 0 3px var(--ek-accent-soft);
}

.ek-input--area {
	min-height: 110px;
	padding: 12px 14px;
	line-height: 1.5;
	resize: vertical;
}

.ek-input--select {
	appearance: none;
	padding-right: 34px;
	background-image: linear-gradient(45deg, transparent 50%, var(--ek-text-3) 50%),
		linear-gradient(135deg, var(--ek-text-3) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.ek-input--search { padding-right: 42px; }

.ek-form { display: grid; gap: 14px; }

.ek-form__status {
	margin: 0;
	font-size: 13.5px;
	color: var(--ek-text-3);
}

.ek-form__status.is-error { color: var(--ek-danger-text); }
.ek-form__status.is-ok { color: var(--ek-accent); }

/* ---------------------------------------------------------------------------
   Modal — Buy now → confirm purchase
   --------------------------------------------------------------------------- */

.ek-modal {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: none;
	align-items: flex-end;
	justify-content: center;
	padding: 0;
}

.ek-modal.is-open { display: flex; }

.ek-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 5, 7, 0.78);
	backdrop-filter: blur(3px);
	border: 0;
	padding: 0;
	cursor: pointer;
}

.ek-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 460px;
	max-height: 92vh;
	overflow-y: auto;
	background: var(--ek-surface);
	border: 1px solid var(--ek-border-strong);
	border-radius: var(--ek-radius-lg) var(--ek-radius-lg) 0 0;
	padding: 20px;
}

.ek-modal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;
}

.ek-modal__title {
	margin: 0;
	font-size: 1.15rem;
}

.ek-modal__close {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	background: var(--ek-surface-2);
	border: 1px solid var(--ek-border);
	border-radius: var(--ek-radius-sm);
	color: var(--ek-text-2);
	font-size: 16px;
	cursor: pointer;
}

.ek-modal__foot {
	display: grid;
	gap: 10px;
	margin-top: 18px;
}

@media (min-width: 640px) {
	.ek-modal { align-items: center; padding: 20px; }
	.ek-modal__dialog { border-radius: var(--ek-radius-lg); }
	.ek-modal__foot { grid-template-columns: 1fr auto; align-items: center; }
	.ek-modal__foot .ek-btn--ghost { order: -1; }
}

/* ---------------------------------------------------------------------------
   Order chat
   --------------------------------------------------------------------------- */

.ek-chat {
	display: flex;
	flex-direction: column;
	min-height: 320px;
}

.ek-chat__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-height: 460px;
	overflow-y: auto;
	padding: 16px;
	scroll-behavior: auto;
}

.ek-chat__day {
	align-self: center;
	color: var(--ek-text-4);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ek-msg {
	max-width: 82%;
	padding: 10px 13px;
	border: 1px solid var(--ek-border);
	border-radius: 14px;
	background: var(--ek-surface-2);
	font-size: 14.5px;
	align-self: flex-start;
	border-bottom-left-radius: 4px;
}

.ek-msg--out {
	align-self: flex-end;
	background: var(--ek-accent-soft);
	border-color: var(--ek-accent-line);
	border-bottom-left-radius: 14px;
	border-bottom-right-radius: 4px;
}

.ek-msg--system {
	align-self: center;
	max-width: 100%;
	background: transparent;
	border: 0;
	color: var(--ek-text-4);
	font-size: 12.5px;
	text-align: center;
}

.ek-msg__who {
	margin: 0 0 3px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ek-text-4);
}

.ek-msg--out .ek-msg__who { color: var(--ek-accent); }

.ek-msg__body {
	margin: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	color: var(--ek-text);
}

.ek-msg__body--removed { color: var(--ek-text-4); font-style: italic; }

.ek-msg__foot {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 5px 0 0;
	color: var(--ek-text-4);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

.ek-msg__files {
	display: grid;
	gap: 8px;
	margin-top: 8px;
}

.ek-msg__file {
	display: block;
	border: 1px solid var(--ek-border);
	border-radius: var(--ek-radius-sm);
	overflow: hidden;
	background: var(--ek-surface-3);
}

.ek-msg__file img { width: 100%; display: block; }

.ek-msg__file-name {
	display: block;
	padding: 6px 9px;
	color: var(--ek-text-3);
	font-family: var(--ek-font-mono);
	font-size: 11px;
	overflow-wrap: anywhere;
}

.ek-chat__composer {
	border-top: 1px solid var(--ek-border);
	padding: 12px;
	background: var(--ek-surface);
	display: grid;
	gap: 10px;
}

.ek-chat__composer-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.ek-chat__input {
	flex: 1;
	min-height: var(--ek-tap);
	max-height: 140px;
	padding: 12px 14px;
	background: var(--ek-surface-2);
	border: 1px solid var(--ek-border);
	border-radius: var(--ek-radius-sm);
	color: var(--ek-text);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.45;
	resize: none;
}

.ek-chat__attach,
.ek-chat__send {
	flex-shrink: 0;
	width: var(--ek-tap);
	height: var(--ek-tap);
	display: grid;
	place-items: center;
	border-radius: var(--ek-radius-sm);
	cursor: pointer;
	font-size: 17px;
}

.ek-chat__attach {
	background: var(--ek-surface-2);
	border: 1px solid var(--ek-border);
	color: var(--ek-text-2);
}

.ek-chat__attach:hover { border-color: var(--ek-border-strong); color: var(--ek-text); }

.ek-chat__send {
	background: var(--ek-accent);
	border: 0;
	color: var(--ek-accent-ink);
	font-weight: 700;
}

.ek-chat__send[disabled] { opacity: 0.5; cursor: not-allowed; }

.ek-chat__file-input { display: none; }

.ek-attach-preview {
	display: none;
	gap: 10px;
	align-items: center;
	padding: 8px;
	background: var(--ek-surface-2);
	border: 1px solid var(--ek-border);
	border-radius: var(--ek-radius-sm);
}

.ek-attach-preview.is-active { display: flex; }

.ek-attach-preview__thumb {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	object-fit: cover;
	border-radius: 6px;
	background: var(--ek-surface-3);
}

.ek-attach-preview__info {
	flex: 1;
	min-width: 0;
	font-size: 12.5px;
	color: var(--ek-text-2);
}

.ek-attach-preview__name {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ek-attach-preview__size { color: var(--ek-text-4); font-size: 11.5px; }

.ek-attach-preview__remove {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	background: transparent;
	border: 1px solid var(--ek-border);
	border-radius: 6px;
	color: var(--ek-text-3);
	cursor: pointer;
}

.ek-chat__status {
	margin: 0;
	min-height: 1em;
	font-size: 12.5px;
	color: var(--ek-text-4);
}

.ek-chat__status.is-error { color: var(--ek-danger-text); }

/* ---------------------------------------------------------------------------
   Timeline
   --------------------------------------------------------------------------- */

.ek-timeline {
	list-style: none;
	margin: 0;
	padding: 0 0 0 20px;
	display: grid;
	gap: 16px;
	border-left: 1px solid var(--ek-border);
}

.ek-timeline__item { position: relative; }

.ek-timeline__item::before {
	content: '';
	position: absolute;
	left: -25px;
	top: 5px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ek-surface-3);
	border: 1px solid var(--ek-border-strong);
}

.ek-timeline__item--escrow::before { background: var(--ek-timer2); border-color: var(--ek-timer2); }
.ek-timeline__item--delivery::before { background: var(--ek-accent); border-color: var(--ek-accent); }
.ek-timeline__item--dispute::before { background: var(--ek-danger); border-color: var(--ek-danger); }

.ek-timeline__label { margin: 0; font-size: 14px; font-weight: 600; }

.ek-timeline__meta {
	margin: 2px 0 0;
	color: var(--ek-text-4);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Lists, tables, pagination
   --------------------------------------------------------------------------- */

.ek-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}

.ek-list > li { border-bottom: 1px solid var(--ek-border); }
.ek-list > li:last-child { border-bottom: 0; }

.ek-list__link {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	min-height: var(--ek-tap);
	color: var(--ek-text);
}

.ek-list__link:hover { background: var(--ek-surface-2); text-decoration: none; color: var(--ek-text); }

.ek-table-wrap { overflow-x: auto; }

.ek-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.ek-table th,
.ek-table td {
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid var(--ek-border);
	white-space: nowrap;
}

.ek-table th {
	color: var(--ek-text-4);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ek-table td.ek-num { text-align: right; font-variant-numeric: tabular-nums; }
.ek-table tr:last-child td { border-bottom: 0; }

.ek-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 24px;
}

.ek-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	background: var(--ek-surface);
	border: 1px solid var(--ek-border);
	border-radius: var(--ek-radius-sm);
	color: var(--ek-text-2);
	font-size: 14px;
}

.ek-pagination__link:hover { border-color: var(--ek-border-strong); color: var(--ek-text); text-decoration: none; }

.ek-pagination__link.is-current {
	background: var(--ek-surface-3);
	border-color: var(--ek-border-strong);
	color: var(--ek-text);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Empty, loading, error states
   --------------------------------------------------------------------------- */

.ek-empty {
	display: grid;
	gap: 10px;
	justify-items: center;
	text-align: center;
	padding: 40px 20px;
	background: var(--ek-surface);
	border: 1px dashed var(--ek-border-strong);
	border-radius: var(--ek-radius);
}

.ek-empty__mark {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid var(--ek-border-strong);
	border-radius: 50%;
	color: var(--ek-text-4);
	font-size: 18px;
}

.ek-empty__title { margin: 0; font-size: 1.05rem; }

.ek-empty__body {
	margin: 0;
	max-width: 44ch;
	color: var(--ek-text-3);
	font-size: 14px;
}

.ek-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid var(--ek-border-strong);
	border-top-color: var(--ek-accent);
	border-radius: 50%;
	animation: ek-spin 0.7s linear infinite;
}

@keyframes ek-spin { to { transform: rotate(360deg); } }

.ek-loading {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	padding: 28px;
	color: var(--ek-text-3);
	font-size: 13.5px;
}

.ek-skeleton {
	background: linear-gradient(90deg, var(--ek-surface-2) 25%, var(--ek-surface-3) 50%, var(--ek-surface-2) 75%);
	background-size: 200% 100%;
	animation: ek-shimmer 1.4s linear infinite;
	border-radius: 6px;
}

@keyframes ek-shimmer { to { background-position: -200% 0; } }

/* ---------------------------------------------------------------------------
   Hero (homepage)
   --------------------------------------------------------------------------- */

.ek-hero {
	padding: 32px 0 8px;
	display: grid;
	gap: 18px;
}

.ek-hero__title {
	margin: 0;
	font-size: 2rem;
	line-height: 1.12;
	letter-spacing: -0.03em;
}

.ek-hero__lede {
	margin: 0;
	max-width: 52ch;
	color: var(--ek-text-2);
	font-size: 16px;
}

.ek-hero__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.ek-hero__points li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	color: var(--ek-text-3);
	font-size: 14px;
}

.ek-hero__points li::before {
	content: '';
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	margin-top: 8px;
	border-radius: 50%;
	background: var(--ek-accent);
}

.ek-steps {
	display: grid;
	gap: 12px;
	counter-reset: ek-step;
}

.ek-step {
	display: grid;
	gap: 6px;
	padding: 16px;
	background: var(--ek-surface);
	border: 1px solid var(--ek-border);
	border-radius: var(--ek-radius);
}

.ek-step__n {
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ek-surface-3);
	color: var(--ek-text-3);
	font-family: var(--ek-font-mono);
	font-size: 12px;
}

.ek-step__title { margin: 0; font-size: 15px; font-weight: 600; }
.ek-step__body { margin: 0; color: var(--ek-text-3); font-size: 13.5px; }

.ek-section-head {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 14px;
}

.ek-section-head h2 { margin: 0; font-size: 1.15rem; }

@media (min-width: 640px) {
	.ek-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 860px) {
	.ek-hero { padding: 44px 0 16px; }
	.ek-hero__title { font-size: 2.7rem; }
	.ek-hero__inner { display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; align-items: center; }
}

/* ---------------------------------------------------------------------------
   Single listing
   --------------------------------------------------------------------------- */

.ek-listing { display: grid; gap: 18px; }

.ek-listing__gallery { display: grid; gap: 10px; }

.ek-listing__buybox { display: grid; gap: 14px; }

.ek-listing__desc {
	color: var(--ek-text-2);
	font-size: 15px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.ek-attrs {
	display: grid;
	gap: 0;
	margin: 0;
}

.ek-attrs__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--ek-border);
	font-size: 14px;
}

.ek-attrs__row:last-child { border-bottom: 0; }
.ek-attrs__key { color: var(--ek-text-3); }
.ek-attrs__val { color: var(--ek-text); font-weight: 500; text-align: right; }

.ek-seller-box {
	display: flex;
	gap: 12px;
	align-items: center;
}

.ek-seller-box__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ek-surface-3);
	flex-shrink: 0;
}

.ek-seller-box__name { margin: 0; font-weight: 600; font-size: 14.5px; }
.ek-seller-box__meta { margin: 0; color: var(--ek-text-4); font-size: 12.5px; }

@media (min-width: 860px) {
	.ek-listing { grid-template-columns: 1.6fr 1fr; align-items: start; }
	.ek-listing__buybox { position: sticky; top: 78px; }
}

/* ---------------------------------------------------------------------------
   Seller request card

   The seller's answer to "is this account still available?". Given its own
   block rather than reusing .ek-order-row because it is a decision, not a list
   item: the question, the clock, the money and two buttons.
   --------------------------------------------------------------------------- */

.ek-request-card {
	display: grid;
	gap: 14px;
	padding: 18px;
	background: var(--ek-surface);
	border: 1px solid var(--ek-border);
	border-radius: var(--ek-radius);
}

.ek-request-card--live {
	border-color: var(--ek-timer1-line);
	box-shadow: inset 3px 0 0 var(--ek-timer1);
}

.ek-request-card__head {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-start;
	justify-content: space-between;
}

.ek-request-card__ask {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.45;
	color: var(--ek-text);
	text-wrap: pretty;
}

.ek-request-card__money {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-end;
	justify-content: space-between;
	padding: 14px;
	background: var(--ek-surface-2);
	border: 1px solid var(--ek-border);
	border-radius: var(--ek-radius-sm);
}

.ek-request-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	color: var(--ek-text-4);
	font-size: 12.5px;
}

.ek-request-card__actions {
	display: grid;
	gap: 10px;
}

.ek-request-card__actions .ek-form { gap: 0; }

.ek-reject__panel {
	margin-top: 10px;
	padding: 14px;
	background: var(--ek-surface-2);
	border: 1px solid var(--ek-border);
	border-radius: var(--ek-radius-sm);
}

.ek-reject__panel[hidden] { display: none; }

@media (min-width: 640px) {
	.ek-request-card__actions { grid-template-columns: 1fr 1fr; align-items: start; }
	.ek-request-card__actions .ek-reject { grid-column: 2; }
}

/* ---------------------------------------------------------------------------
   Inline actions — the small state changes on a listing row
   --------------------------------------------------------------------------- */

.ek-inline-action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.ek-inline-action__status {
	font-size: 12px;
	color: var(--ek-text-4);
}

.ek-inline-action__status.is-error { color: var(--ek-danger-text); }
.ek-inline-action__status.is-ok { color: var(--ek-accent); }

.ek-chip.is-on {
	background: var(--ek-surface-3);
	border-color: var(--ek-border-strong);
	color: var(--ek-text);
	font-weight: 600;
	text-decoration: none;
}

a.ek-chip:hover { border-color: var(--ek-border-strong); color: var(--ek-text); text-decoration: none; }

/* ---------------------------------------------------------------------------
   Disclosure
   --------------------------------------------------------------------------- */

.ek-details { margin-top: 4px; }

.ek-details__summary {
	cursor: pointer;
	padding: 10px 0;
	color: var(--ek-text-2);
	font-size: 14px;
	font-weight: 600;
}

.ek-details__summary:hover { color: var(--ek-text); }
.ek-details[open] .ek-details__summary { color: var(--ek-text); }

/* ---------------------------------------------------------------------------
   Credentials block (buyer, after delivery)
   --------------------------------------------------------------------------- */

.ek-creds {
	display: grid;
	gap: 10px;
	padding: 16px;
	background: var(--ek-surface-2);
	border: 1px solid var(--ek-accent-line);
	border-radius: var(--ek-radius);
}

.ek-creds__row {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	background: var(--ek-bg);
	border: 1px solid var(--ek-border);
	border-radius: var(--ek-radius-sm);
}

.ek-creds__key { color: var(--ek-text-4); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; }
.ek-creds__val { font-family: var(--ek-font-mono); font-size: 14px; overflow-wrap: anywhere; }

.ek-copy {
	flex-shrink: 0;
	min-height: 36px;
	padding: 0 10px;
	background: var(--ek-surface-3);
	border: 1px solid var(--ek-border);
	border-radius: 6px;
	color: var(--ek-text-2);
	font-size: 12px;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Auth, facts, splits and money rows — added with the account pages
   --------------------------------------------------------------------------- */

.ek-auth {
	display: grid;
	justify-items: center;
	padding: 24px 0 48px;
}

.ek-auth__card {
	display: grid;
	gap: 18px;
	width: 100%;
	max-width: 420px;
	padding: 24px;
}

.ek-auth__head { display: grid; gap: 6px; }
.ek-auth__title { margin: 0; font-size: 1.5rem; letter-spacing: -0.01em; }

.ek-auth__intro {
	margin: 0;
	color: var(--ek-text-3);
	font-size: 14px;
}

.ek-auth__body { display: grid; gap: 14px; }

.ek-auth__aside {
	margin: 0;
	color: var(--ek-text-4);
	font-size: 12.5px;
	line-height: 1.6;
}

.ek-auth__foot {
	padding-top: 16px;
	border-top: 1px solid var(--ek-border);
	color: var(--ek-text-3);
	font-size: 13.5px;
}

.ek-auth__foot p { margin: 0; }

/* wp_login_form() emits its own markup, so the theme meets it there. */
#ek-login-form { display: grid; gap: 14px; }
#ek-login-form p { margin: 0; display: grid; gap: 6px; }

#ek-login-form label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ek-text-2);
}

#ek-login-form .input,
#ek-login-form input[type="text"],
#ek-login-form input[type="password"] {
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	background: var(--ek-surface-2);
	border: 1px solid var(--ek-border);
	border-radius: 10px;
	color: var(--ek-text);
	font: inherit;
	font-size: 15px;
}

#ek-login-form .input:focus,
#ek-login-form input[type="text"]:focus,
#ek-login-form input[type="password"]:focus {
	outline: 2px solid var(--ek-accent);
	outline-offset: 1px;
	border-color: var(--ek-accent-line);
}

#ek-login-form .login-remember label {
	display: flex;
	gap: 8px;
	align-items: center;
	font-weight: 400;
	color: var(--ek-text-3);
}

#ek-login-form .login-remember input { margin: 0; }

#ek-login-form .submit input[type="submit"] {
	width: 100%;
	min-height: 48px;
	padding: 0 20px;
	background: var(--ek-accent);
	border: 1px solid transparent;
	border-radius: 10px;
	color: var(--ek-accent-ink);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

#ek-login-form .submit input[type="submit"]:hover { filter: brightness(1.06); }

/* --- Choice rows -------------------------------------------------------- */

.ek-field--choice {
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
}

.ek-field--choice legend { padding: 0; margin-bottom: 4px; }

.ek-choice {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 12px 14px;
	background: var(--ek-surface-2);
	border: 1px solid var(--ek-border);
	border-radius: 10px;
	cursor: pointer;
}

.ek-choice:hover { border-color: var(--ek-border-strong); }
.ek-choice input { margin: 3px 0 0; flex-shrink: 0; }
.ek-choice input:checked ~ span .ek-choice__title { color: var(--ek-accent); }
.ek-choice:has(input:checked) { border-color: var(--ek-accent-line); background: var(--ek-accent-soft); }

.ek-choice > span { display: grid; gap: 2px; }
.ek-choice__title { font-size: 14px; font-weight: 600; }
.ek-choice__note { color: var(--ek-text-3); font-size: 12.5px; line-height: 1.5; }

.ek-choice--inline { margin: 0; }

/* --- Fact lists --------------------------------------------------------- */

.ek-facts {
	display: grid;
	gap: 0;
	margin: 0;
}

.ek-facts__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	justify-content: space-between;
	align-items: baseline;
	padding: 11px 0;
	border-bottom: 1px solid var(--ek-border);
}

.ek-facts__row:last-child { border-bottom: 0; }

.ek-facts dt {
	margin: 0;
	color: var(--ek-text-4);
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.ek-facts dd {
	margin: 0;
	font-size: 14.5px;
	text-align: right;
	overflow-wrap: anywhere;
}

/* --- Profile header ----------------------------------------------------- */

.ek-profile { display: grid; gap: 16px; }

.ek-profile__avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 1px solid var(--ek-border);
	background: var(--ek-surface-2);
}

/* --- Two-column split --------------------------------------------------- */

.ek-split {
	display: grid;
	gap: 18px;
	align-items: start;
}

@media (min-width: 860px) {
	.ek-split { grid-template-columns: 1.5fr 1fr; }
}

/* --- Transaction rows --------------------------------------------------- */

.ek-txn__label { display: block; font-size: 14px; font-weight: 600; }

.ek-txn__note {
	display: block;
	margin-top: 2px;
	color: var(--ek-text-3);
	font-size: 12.5px;
}

.ek-txn__bucket {
	color: var(--ek-text-4);
	font-family: var(--ek-font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
}

.ek-txn__amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.ek-txn__amount.is-in { color: var(--ek-accent); }
.ek-txn__amount.is-out { color: var(--ek-text-2); }

/* --- List meta ---------------------------------------------------------- */

.ek-list__meta {
	margin-left: auto;
	color: var(--ek-text-4);
	font-size: 12.5px;
	text-align: right;
}

/* --- Money row emphasis ------------------------------------------------- */

.ek-money-row--total {
	padding-top: 10px;
	border-top: 1px solid var(--ek-border);
	font-weight: 600;
}

.ek-dispute__details {
	display: block;
	color: var(--ek-text-2);
	font-size: 13.5px;
	line-height: 1.6;
	white-space: pre-line;
}

/* ---------------------------------------------------------------------------
   Authentication additions
   Registration, email verification and Google sign-in. The Google button is
   the one place in this theme that does not use the accent colour: Google's
   brand guidance requires their mark on white or their own blue, and a green
   Google button reads as a phishing page.
   --------------------------------------------------------------------------- */

.ek-field--invalid .ek-input {
	border-color: var(--ek-danger-line);
	background: var(--ek-danger-soft);
}

.ek-field--invalid .ek-input:focus {
	border-color: var(--ek-danger);
	box-shadow: 0 0 0 3px var(--ek-danger-soft);
}

.ek-field__error {
	margin: 0;
	color: var(--ek-danger-text);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
}

/* --- Google button ------------------------------------------------------- */

.ek-btn--google {
	gap: 10px;
	background: var(--ek-surface);
	border-color: var(--ek-border-strong);
	color: var(--ek-text);
	font-weight: 600;
}

.ek-btn--google:hover,
.ek-btn--google:focus {
	background: var(--ek-surface-2);
	border-color: var(--ek-text-4);
	color: var(--ek-text);
}

.ek-btn__glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* --- "or" divider ------------------------------------------------------- */

.ek-auth__divider {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--ek-text-4);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ek-auth__divider::before,
.ek-auth__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--ek-border);
}

/* --- Resend block on the log-in page ------------------------------------ */

.ek-auth__resend {
	display: grid;
	gap: 12px;
	margin-top: 4px;
	padding-top: 18px;
	border-top: 1px solid var(--ek-border);
}

.ek-auth__subtitle {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.005em;
}