/* ==========================================================================
   Tesla Second-Hand Parts — Design Tokens
   ==========================================================================
   Design language: Japanese minimalism (MUJI / Kinto / quiet premium)
   - Refined typographic hierarchy (Noto Sans TC + Inter for Latin)
   - Hairline dividers, generous whitespace, no decorative shadows
   - SVG line icons only (no emoji as structural elements)
   - Constrained palette inherited from teslano1 paint simulator
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600&family=Inter:wght@400;500;600&display=swap');

:root {
	/* === Surfaces === */
	--tshp-bg: #fafaf9;
	--tshp-bg-alt: #f6f7f9;
	--tshp-surface: #ffffff;

	/* === Text === */
	--tshp-text: #18181b;
	--tshp-text-soft: #52525b;
	--tshp-text-muted: #71717a;
	--tshp-text-dim: #a1a1aa;

	/* === Border === */
	--tshp-border: #e7e5e4;
	--tshp-border-soft: #f4f4f5;
	--tshp-divider: #ececec;

	/* === Brand primary (CIS) — Tesla deep blue, used by all primary CTAs === */
	--tshp-primary: rgb(15, 76, 129);
	--tshp-primary-hover: rgb(11, 60, 103);
	--tshp-primary-soft: rgba(15, 76, 129, 0.10);

	/* === Accent (inherited from simulator) === */
	--tshp-accent: #0d6efd;
	--tshp-accent-hover: #0a58ca;
	--tshp-accent-soft: rgba(13, 110, 253, 0.08);

	/* === CTA — alias to brand primary (was yellow #f5b301; unified to brand blue) === */
	--tshp-cta-bg: var(--tshp-primary);
	--tshp-cta-hover: var(--tshp-primary-hover);

	/* === Status (refined, lower-saturation) === */
	--tshp-status-available: #16a34a;
	--tshp-status-sold: #a1a1aa;
	--tshp-status-expiring: #d97706;
	--tshp-status-expired: #71717a;
	--tshp-status-pending: #71717a;
	--tshp-status-rejected: #dc2626;

	/* === Radius === */
	--tshp-radius: 10px;
	--tshp-radius-sm: 6px;
	--tshp-radius-pill: 999px;

	/* === Shadow (used sparingly) === */
	--tshp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
	--tshp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
	--tshp-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10);

	/* === Motion === */
	--tshp-trans: 200ms cubic-bezier(0.4, 0, 0.2, 1);
	--tshp-trans-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

	/* === Typography === */
	--tshp-font-sans: 'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--tshp-font-cjk: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
}

/* ==========================================================================
   Page wrapper — defends against parent theme containers
   ========================================================================== */
.tshp-page {
	background: var(--tshp-bg);
	color: var(--tshp-text);
	font-family: var(--tshp-font-cjk);
	font-weight: 400;
	font-feature-settings: "palt" 1;
	letter-spacing: 0.01em;
	min-height: 60vh;
	padding: 48px 40px 96px;
	box-sizing: border-box;

	/* Span all parent grid columns + break out to viewport. */
	grid-column: 1 / -1;
	width: 100vw;
	max-width: 100vw;
	min-width: 0;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);

	/* Pull tight against parent theme's surrounding gap (header / footer). */
	margin-top: -40px;
	margin-bottom: -40px;
}
.tshp-page * { box-sizing: border-box; }

@media (max-width: 768px) {
	.tshp-page {
		padding: 24px 16px 64px;
		margin-top: -20px;
		margin-bottom: -20px;
	}
}

/* Theme chrome suppression on virtual routes */
body.tshp-virtual .wd-page-title,
body.tshp-virtual .page-title,
body.tshp-virtual .wd-titlebar,
body.tshp-virtual .titlebar,
body.tshp-virtual .wd-breadcrumbs:not(.tshp-breadcrumb),
body.tshp-virtual .breadcrumbs:not(.tshp-breadcrumb) {
	display: none !important;
}

/* ==========================================================================
   Typography helpers
   ========================================================================== */
.tshp-page h1,
.tshp-page h2,
.tshp-page h3,
.tshp-page h4 {
	font-family: var(--tshp-font-cjk);
	font-weight: 500;
	color: var(--tshp-text);
	letter-spacing: -0.01em;
	margin: 0;
}

/* Tabular numbers for prices, counts */
.tshp-num {
	font-family: var(--tshp-font-sans);
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   SVG icons (consistent stroke + sizing)
   ========================================================================== */
.tshp-icon {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: middle;
	stroke-width: 1.5;
}

/* ==========================================================================
   Buttons
   ==========================================================================
   Defensive selectors against parent themes (WoodMart) that style <button>
   elements with their own border-radius / background / box-shadow. We use
   `.tshp-page` ancestor + element-class combo selectors for sufficient
   specificity, and !important on the visual properties that themes
   commonly override.
*/
.tshp-page a.tshp-btn,
.tshp-page button.tshp-btn,
.tshp-page .tshp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: var(--tshp-radius) !important;
	font-family: inherit;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
	border: 1px solid transparent;
	background: var(--tshp-surface);
	color: var(--tshp-text);
	text-decoration: none;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none;
	transition: background var(--tshp-trans), border-color var(--tshp-trans), color var(--tshp-trans);
	white-space: nowrap;
	letter-spacing: 0.01em;
}
.tshp-page .tshp-btn:hover { background: var(--tshp-bg-alt); }

.tshp-page .tshp-btn:disabled,
.tshp-page .tshp-btn--disabled {
	opacity: 0.4 !important;
	cursor: not-allowed;
	pointer-events: none;
}

.tshp-page .tshp-btn--cta {
	background: var(--tshp-cta-bg) !important;
	color: #fff !important;
	font-weight: 600;
	border-color: transparent !important;
	padding: 14px 22px;
	box-shadow: 0 1px 2px rgba(15, 76, 129, 0.22) !important;
	text-shadow: none !important;
}
.tshp-page .tshp-btn--cta:hover {
	background: var(--tshp-cta-hover) !important;
	color: #fff !important;
	box-shadow: 0 4px 10px rgba(15, 76, 129, 0.28) !important;
}

.tshp-page .tshp-btn--primary {
	background: var(--tshp-accent) !important;
	color: #fff !important;
	border-color: transparent !important;
}
.tshp-page .tshp-btn--primary:hover { background: var(--tshp-accent-hover) !important; }

.tshp-page .tshp-btn--secondary {
	background: var(--tshp-surface) !important;
	border-color: var(--tshp-border) !important;
	color: var(--tshp-text) !important;
}
.tshp-page .tshp-btn--secondary:hover { border-color: var(--tshp-text) !important; }

.tshp-page .tshp-btn--ghost {
	background: transparent !important;
	border-color: transparent !important;
	color: var(--tshp-text-muted) !important;
}
.tshp-page .tshp-btn--ghost:hover { color: var(--tshp-text) !important; background: var(--tshp-bg-alt) !important; }

.tshp-page .tshp-btn--full { width: 100%; }
.tshp-page .tshp-btn--small { padding: 6px 12px; font-size: 12px; }

/* ==========================================================================
   Accessibility utility — visually hidden but focusable.
   Use INSTEAD of `hidden` attribute on form inputs that are visually replaced
   by a styled <label>: `hidden` removes the input from the tab order, this
   keeps it focusable so keyboard users can still operate the control.
   ========================================================================== */
.tshp-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
/* When a sr-only input gains focus, lift its label out so the keyboard user
   gets a visible focus ring on the visible control. */
.tshp-page .tshp-filter__pill:focus-within,
.tshp-page .tshp-filter__chip:focus-within,
.tshp-page .tshp-my__status:focus-within {
	outline: 2px solid var(--tshp-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   Status indicators (color dot + text, no emoji)
   ========================================================================== */
.tshp-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--tshp-radius-pill);
	font-size: 11px;
	font-weight: 500;
	color: var(--tshp-text-soft);
	background: var(--tshp-bg-alt);
	white-space: nowrap;
	letter-spacing: 0.02em;
}
.tshp-status-pill::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.8;
}
.tshp-status-pill--publish  { color: var(--tshp-status-available); background: rgba(22, 163, 74, 0.08); }
.tshp-status-pill--available { color: var(--tshp-status-available); background: rgba(22, 163, 74, 0.08); }
.tshp-status-pill--sold     { color: var(--tshp-status-sold); background: var(--tshp-bg-alt); }
.tshp-status-pill--expired  { color: var(--tshp-status-expired); background: var(--tshp-bg-alt); }
.tshp-status-pill--expiring { color: var(--tshp-status-expiring); background: rgba(217, 119, 6, 0.08); }
.tshp-status-pill--pending  { color: var(--tshp-status-pending); background: var(--tshp-bg-alt); }
.tshp-status-pill--rejected { color: var(--tshp-status-rejected); background: rgba(220, 38, 38, 0.08); }
.tshp-status-pill--draft    { color: var(--tshp-text-dim); background: var(--tshp-bg-alt); }

/* Tag chips — flat */
.tshp-tag-chip {
	display: inline-block;
	padding: 4px 10px;
	margin: 2px 4px 2px 0;
	font-size: 12px;
	color: var(--tshp-text-soft);
	background: transparent;
	border: 1px solid var(--tshp-border);
	border-radius: var(--tshp-radius-pill);
	text-decoration: none;
	transition: all var(--tshp-trans);
}
.tshp-tag-chip:hover {
	border-color: var(--tshp-text);
	color: var(--tshp-text);
}

.tshp-text-warn { color: var(--tshp-status-expiring); }
.tshp-text-danger { color: var(--tshp-status-rejected); }

/* ==========================================================================
   Empty state
   ========================================================================== */
.tshp-empty {
	text-align: center;
	padding: 80px 24px;
	background: transparent;
	border: 1px dashed var(--tshp-border);
	border-radius: var(--tshp-radius);
}
.tshp-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--tshp-bg-alt);
	color: var(--tshp-text-muted);
	margin-bottom: 20px;
}
.tshp-empty__title {
	font-size: 16px;
	font-weight: 500;
	margin: 0 0 6px;
	color: var(--tshp-text);
}
.tshp-empty__desc {
	color: var(--tshp-text-muted);
	font-size: 13px;
	margin: 0 0 24px;
	line-height: 1.6;
}

/* ==========================================================================
   Login gate
   ========================================================================== */
.tshp-login-gate { padding: 80px 16px; }
.tshp-login-gate__panel {
	max-width: 460px;
	margin: 0 auto;
	background: var(--tshp-surface);
	border: 1px solid var(--tshp-border);
	border-radius: var(--tshp-radius);
	padding: 40px 32px;
	text-align: center;
}
.tshp-login-gate__panel h2 {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 500;
}
.tshp-login-gate__panel p {
	color: var(--tshp-text-muted);
	margin: 0 0 28px;
	font-size: 14px;
	line-height: 1.6;
}

/* ==========================================================================
   Modal
   ========================================================================== */
.tshp-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(24, 24, 27, 0.4);
	backdrop-filter: blur(4px);
	padding: 20px;
	animation: tshp-fade-in 200ms ease;
}
.tshp-modal[hidden] { display: none; }
.tshp-modal__panel {
	background: var(--tshp-surface);
	border-radius: var(--tshp-radius);
	box-shadow: var(--tshp-shadow-lg);
	max-width: 520px;
	width: 100%;
	max-height: 90vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	animation: tshp-modal-in 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tshp-modal__header {
	padding: 20px 24px;
	border-bottom: 1px solid var(--tshp-border-soft);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.tshp-modal__title {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
}
.tshp-modal__close {
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--tshp-text-muted);
	padding: 4px;
	display: inline-flex;
	border-radius: var(--tshp-radius-sm);
	transition: all var(--tshp-trans);
}
.tshp-modal__close:hover { color: var(--tshp-text); background: var(--tshp-bg-alt); }
.tshp-modal__body {
	padding: 24px;
	overflow-y: auto;
	flex: 1;
	font-size: 14px;
	line-height: 1.7;
}
.tshp-modal__footer {
	padding: 14px 24px;
	background: var(--tshp-bg-alt);
	border-top: 1px solid var(--tshp-border-soft);
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
.tshp-modal__notice {
	margin-top: 18px;
	padding: 12px 14px;
	background: var(--tshp-bg-alt);
	border-left: 2px solid var(--tshp-status-expiring);
	border-radius: var(--tshp-radius-sm);
	font-size: 12px;
	color: var(--tshp-text-soft);
	line-height: 1.6;
}

@keyframes tshp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tshp-modal-in {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tshp-contact-info {
	background: var(--tshp-bg-alt);
	border-radius: var(--tshp-radius);
	padding: 16px 18px;
}
.tshp-contact-info__row {
	display: flex;
	gap: 12px;
	padding: 6px 0;
	font-size: 14px;
	align-items: center;
}
.tshp-contact-info__label {
	font-weight: 500;
	color: var(--tshp-text-muted);
	min-width: 80px;
	font-size: 13px;
}
.tshp-contact-info__value {
	color: var(--tshp-text);
	font-family: var(--tshp-font-sans);
}

/* ==========================================================================
   Report modal — reason picker
   ========================================================================== */
.tshp-report__reasons {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 18px;
}
.tshp-report__reason {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid var(--tshp-border);
	border-radius: var(--tshp-radius-sm);
	cursor: pointer;
	font-size: 13px;
	color: var(--tshp-text);
	transition: all var(--tshp-trans);
}
.tshp-report__reason:hover { border-color: var(--tshp-text-soft); }
.tshp-report__reason input { accent-color: var(--tshp-text); }
.tshp-report__reason:has(input:checked) {
	background: var(--tshp-bg-alt);
	border-color: var(--tshp-text);
}
.tshp-report__detail-label {
	display: block;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 500;
	color: var(--tshp-text);
	letter-spacing: 0.02em;
}

/* ==========================================================================
   Floating filter FAB (mobile)
   ========================================================================== */
.tshp-page .tshp-filter-fab {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 16px;
	z-index: 999;
	background: var(--tshp-text);
	color: #fff;
	border: 0;
	padding: 12px 18px;
	border-radius: var(--tshp-radius-pill);
	box-shadow: var(--tshp-shadow-lg);
	font-weight: 500;
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
	gap: 8px;
	align-items: center;
	letter-spacing: 0.04em;
}
.tshp-page .tshp-filter-fab .tshp-icon { width: 16px; height: 16px; }

@media (max-width: 1023px) {
	.tshp-page .tshp-filter-fab { display: inline-flex; }
}