/**
 * Card-specific presentation.
 *
 * Colours come from whichever of the two design systems is present, with a
 * fallback so this plugin still looks deliberate under another theme.
 */

/* --------------------------------------------------------------------------
 * Condition and grading badges
 *
 * Condition is colour-coded on a deliberate ramp — green for Near Mint through
 * to red for Damaged — so a buyer scanning a grid reads it without stopping.
 * ----------------------------------------------------------------------- */

.tcgsf-badge--condition,
.tcgmp-badge--condition {
	background: #17845a;
	color: #fff;
}

/* The theme renders `tcgsf-badge--{class}`, and our class is
   "condition condition--{slug}", so the ramp is keyed off the second class. */
.condition--near-mint         { background: #17845a; color: #fff; }
.condition--lightly-played    { background: #4f8a2f; color: #fff; }
.condition--moderately-played { background: #a87a10; color: #fff; }
.condition--heavily-played    { background: #b5611b; color: #fff; }
.condition--damaged           { background: #b21127; color: #fff; }

/* A graded card leads with its grade; gold reads as "this one is special". */
.tcgsf-badge--graded,
.tcgmp-badge--graded {
	background: linear-gradient( 135deg, #c8951f, #e9bd58 );
	color: #2e2100;
	letter-spacing: 0.03em;
}

/* --------------------------------------------------------------------------
 * Card details on the product page
 * ----------------------------------------------------------------------- */

.tcgc-summary {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
	gap: 10px 20px;
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid var( --tcgsf-border, #dfe3ef );
	border-radius: var( --tcgsf-radius, 12px );
	background: var( --tcgsf-surface-alt, #f7f9fc );
}

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

.tcgc-summary dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --tcgsf-muted, #636980 );
}

.tcgc-summary dd {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var( --tcgsf-ink, #131a3a );
}

/* --------------------------------------------------------------------------
 * Listing form
 * ----------------------------------------------------------------------- */

.tcgc-fields .tcgmp-field-row > .tcgmp-field {
	flex: 1 1 150px;
}

/* --------------------------------------------------------------------------
 * Bulk upload
 * ----------------------------------------------------------------------- */

.tcgc-import-result {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var( --tcgmp-border, #dfe3ef );
}

.tcgc-import-result__summary {
	margin: 0 0 12px;
	font-weight: 600;
	color: var( --tcgmp-ink, #131a3a );
}

.tcgc-import-result__errors-title {
	margin: 16px 0 6px;
	font-weight: 600;
	color: var( --tcgmp-danger, #b21127 );
}

.tcgc-import-result__errors {
	margin: 0;
	padding-left: 20px;
	font-size: 14px;
	color: var( --tcgmp-danger, #b21127 );
}

.tcgc-import-result__errors li { padding: 2px 0; }

.tcgc-import-result table { margin-top: 8px; }

/* ---- Seller guide ---- */
.tcgc-guide__lede{font-size:1.05em;margin:0 0 1.2em}
.tcgc-guide h2{margin-top:2em;padding-bottom:.3em;border-bottom:2px solid var(--tcgsf-border,#e3e3e3)}
.tcgc-guide__toc{background:var(--tcgsf-surface-alt,#f6f7f9);padding:14px 22px;border-radius:8px;margin:1.2em 0}
.tcgc-guide__toc ol{margin:0;padding-left:1.2em}
.tcgc-guide__table{width:100%;border-collapse:collapse;margin:1em 0}
.tcgc-guide__table th,.tcgc-guide__table td{padding:10px 12px;border:1px solid var(--tcgsf-border,#e3e3e3);text-align:left;vertical-align:top}
.tcgc-guide__table th{width:30%;background:var(--tcgsf-surface-alt,#f6f7f9);font-weight:600}
.tcgc-guide__table--fees td:last-child{text-align:right;white-space:nowrap}
.tcgc-guide__note{padding:12px 16px;border-left:4px solid var(--tcgsf-primary,#206464);background:var(--tcgsf-surface-alt,#f6f7f9);border-radius:0 8px 8px 0}
.tcgc-guide__steps li{margin-bottom:.5em}
.tcgc-guide__alert{padding:16px 20px;border-radius:8px;margin:0 0 1.5em;border:1px solid}
.tcgc-guide__alert--warn{background:#fff7e6;border-color:#e3c37a;color:#4a3608}
.tcgc-guide__alert h2{margin:0 0 .5em;border:none;padding:0;font-size:1.15em}
.tcgc-guide__alert ul{margin:.4em 0 .9em}
:root[data-tcgsf-theme='dark'] .tcgc-guide__alert--warn{background:#3a2f12;border-color:#7a6432;color:#f3e5c2}
@media(max-width:640px){.tcgc-guide__table th{width:auto}}
.tcgc-guide__table th,.tcgc-guide__table td{color:var(--tcgsf-ink,#24242c)}
.tcgc-guide__note,.tcgc-guide__toc{color:var(--tcgsf-ink,#24242c)}

/* ---- Bulk upload, three steps ---- */
.tcgc-import { display: flex; flex-direction: column; gap: 16px; }
.tcgc-import__step { padding: 20px 22px 22px; }
.tcgc-import__head { margin: 0 0 14px; }
.tcgc-import__head h3 { margin: 0 0 4px; font-size: 1.08em; display: flex; align-items: center; gap: 10px; }
.tcgc-import__head p { margin: 0; color: var( --tcgmp-muted, #62626e ); font-size: .92em; }
.tcgc-import__num { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; background: var( --tcgmp-primary, #206464 ); color: #fff; font-size: .8em; font-weight: 700; }
.tcgc-import__apps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; font-size: .85em; color: var( --tcgmp-muted, #62626e ); }
.tcgc-import__apps em { font-style: normal; padding: 2px 9px; border-radius: 999px; background: var( --tcgmp-surface-alt, #f2f4f8 ); color: var( --tcgmp-ink, #131a3a ); }
.tcgc-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px; border: 2px dashed var( --tcgmp-border, #dfe3ef ); border-radius: var( --tcgmp-radius, 12px ); text-align: center; cursor: pointer; color: var( --tcgmp-muted, #62626e ); transition: border-color .15s, background .15s; }
.tcgc-drop:hover, .tcgc-drop:focus, .tcgc-drop.is-over { border-color: var( --tcgmp-primary, #206464 ); background: var( --tcgmp-primary-soft, #e3f1f0 ); outline: none; }
.tcgc-drop strong { color: var( --tcgmp-primary, #206464 ); font-size: 1.05em; }
.tcgc-drop__icon { font-size: 1.8em; line-height: 1; }
.tcgc-import__paste { margin: 12px 0 0; }
.tcgc-import__paste summary { cursor: pointer; font-weight: 600; color: var( --tcgmp-primary, #206464 ); }
.tcgc-import__paste textarea { width: 100%; margin-top: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
.tcgc-import__defaults { margin: 18px 0 0; padding: 14px 16px; border-radius: 10px; background: var( --tcgmp-surface-alt, #f7f8fa ); }
.tcgc-import__defaults-title { margin: 0 0 10px; font-weight: 600; font-size: .92em; }
.tcgc-import__defaults-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 80px; gap: 10px; }
.tcgc-import__defaults-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .82em; font-weight: 600; color: var( --tcgmp-muted, #62626e ); }
.tcgc-import__defaults-grid select, .tcgc-import__defaults-grid input { font-weight: 400; font-size: 14px; }
.tcgc-import__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 0; }
.tcgc-import__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.tcgc-import__summary p { flex-basis: 100%; margin: 4px 0 0; }
.tcgc-import__notice { color: #a3520b; font-weight: 600; }
.tcgc-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: .85em; }
.tcgc-pill--ok { background: #dff3e9; color: #0f6b3f; }
.tcgc-pill--warn { background: #fdf0d5; color: #8a4b08; }
.tcgc-pill--skip { background: #fbe1e3; color: #9b1424; }
.tcgc-import__mapping details { margin: 0 0 12px; font-size: .9em; }
.tcgc-import__mapping summary { cursor: pointer; font-weight: 600; }
.tcgc-import__mapping ul { columns: 2; margin: 8px 0; padding-left: 18px; }
.tcgc-import__filter { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; font-size: .9em; }
.tcgc-import__filter label { cursor: pointer; white-space: nowrap; }
.tcgc-import__table-wrap { overflow-x: auto; max-height: 560px; overflow-y: auto; border: 1px solid var( --tcgmp-border, #dfe3ef ); border-radius: 10px; }
.tcgc-import__table { margin: 0; min-width: 760px; font-size: .88em; }
.tcgc-import__table thead th { position: sticky; top: 0; background: var( --tcgmp-surface, #fff ); z-index: 1; }
/* The row number and the card name stay put while the rest scrolls sideways
   (the table is 760px wide; phones see ~350px of it). Backgrounds are set
   so the moving cells slide underneath, and the row-state tints below still
   win because they come later with the same specificity. */
.tcgc-import__table th:nth-child( 1 ), .tcgc-import__table td:nth-child( 1 ) { position: sticky; left: 0; width: 44px; min-width: 44px; background: var( --tcgmp-surface, #fff ); z-index: 2; }
.tcgc-import__table th:nth-child( 2 ), .tcgc-import__table td:nth-child( 2 ) { position: sticky; left: 44px; min-width: 150px; max-width: 200px; background: var( --tcgmp-surface, #fff ); z-index: 2; }
.tcgc-import__table thead th:nth-child( 1 ), .tcgc-import__table thead th:nth-child( 2 ) { z-index: 3; }
.tcgc-import__table td:nth-child( 2 ) strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcgc-import__table th:nth-child( 2 )::after, .tcgc-import__table td:nth-child( 2 )::after { content: ''; position: absolute; top: 0; bottom: 0; right: -1px; width: 1px; background: var( --tcgmp-border, #dfe3ef ); }
.tcgc-import__table-wrap.is-scrolled th:nth-child( 2 )::after, .tcgc-import__table-wrap.is-scrolled td:nth-child( 2 )::after { width: 12px; right: -12px; background: linear-gradient( to right, rgba( 0, 0, 0, .12 ), rgba( 0, 0, 0, 0 ) ); }
.tcgc-import__table tr.is-skip td { background: #fff5f6; color: var( --tcgmp-muted, #62626e ); }
.tcgc-import__table tr.is-warn td { background: #fffbf0; }
.tcgc-import__table tr.is-skip td:nth-child( -n+2 ) { background: #fff5f6; }
.tcgc-import__table tr.is-warn td:nth-child( -n+2 ) { background: #fffbf0; }
.tcgc-import__table .tcgc-details { color: var( --tcgmp-muted, #62626e ); }
.tcgc-import__table .tcgc-msg { max-width: 260px; font-size: .9em; }
.tcgc-flag--warn { color: #8a4b08; }
.tcgc-flag--skip { color: #9b1424; font-weight: 600; }
.tcgc-unknown { color: #8a4b08; border-bottom: 1px dotted currentColor; }
.tcgc-muted { color: var( --tcgmp-muted, #62626e ); }
.tcgc-cond { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var( --tcgmp-surface-alt, #f2f4f8 ); font-weight: 700; font-size: .85em; }
.tcgc-progress { height: 10px; border-radius: 999px; background: var( --tcgmp-surface-alt, #eef0f5 ); overflow: hidden; margin: 6px 0 14px; }
.tcgc-progress__bar { height: 100%; width: 0; background: var( --tcgmp-primary, #206464 ); transition: width .3s; }
.tcgc-import__columns h3 { margin: 0 0 6px; font-size: 1.02em; }
.tcgc-import__dl { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; margin: 12px 0 0; font-size: .9em; }
.tcgc-import__dl dt { font-weight: 600; }
.tcgc-import__dl dd { margin: 0; color: var( --tcgmp-muted, #62626e ); }
.tcgc-import__undo-notice p { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tcgmp-btn--danger { color: #9b1424; border-color: #f2c4c9; }
@media ( max-width: 900px ) {
	.tcgc-import__defaults-grid { grid-template-columns: 1fr 1fr; }
	/* 16px controls stop iOS zooming on focus. */
	.tcgc-import__defaults-grid select, .tcgc-import__defaults-grid input, .tcgc-import__paste textarea { font-size: 16px; }
	.tcgc-drop { padding: 22px 12px; }
	.tcgc-import__step { padding: 16px 16px 18px; }
	.tcgc-import__mapping ul { columns: 1; }
	.tcgc-import__dl { grid-template-columns: 1fr; gap: 2px 0; }
	.tcgc-import__dl dd { margin-bottom: 8px; }
	/* Help text reads at 14px+ on phones. */
	.tcgc-import__apps, .tcgc-import__defaults-grid label, .tcgc-import__head p, .tcgc-import__dl, .tcgc-import__filter, .tcgc-import__mapping details { font-size: 14px; }
	.tcgc-import__table { font-size: 14px; }
}
/* dashboard.css turns every .tcgmp-table into its own scroll box under 700px;
   the preview keeps its wrapper as the scroll box so the sticky header and
   sticky Card column keep working. */
@media ( max-width: 700px ) {
	.tcgmp-dash .tcgc-import__table-wrap .tcgc-import__table { display: table; overflow: visible; }
}