/* ==========================================================================
   PCGuide Neo — plugins.css
   Makes PCG Market / Tech Classifieds output follow the theme. Loaded after the
   plugins' own CSS. Every rule here only touches pcg-* markup.
   1. Full --pcg-* token set for dark and light (wins over plugin defaults)
   2. Layout fixes (overflow, step list, headings)
   3. Builder: account avatar, sign-in card, quantity box
   4. Shop signals, offer table, where-to-buy cards, WhatsApp buttons
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------
   PCG Market (tokens.css) and Tech Classifieds (pcg-listings.css) each define
   these, the classifieds one with html[data-theme="dark"]. Setting them on body
   (one level lower, higher specificity) makes the theme's values win, and the
   contrast-guard classes get the same full set. */
html[data-theme="dark"] body,
.pcgn-on-dark {
	--pcg-bg: #0B1733;
	--pcg-surface: #102047;
	--pcg-surface-alt: #08122A;
	--pcg-surface-2: #08122A;
	--pcg-border: rgba(110, 160, 255, .18);
	--pcg-border-strong: rgba(110, 160, 255, .32);
	--pcg-text: #E8EEFF;
	--pcg-text-muted: #A9B8D6;
	--pcg-text-faint: #8193B8;
	--pcg-muted: #A9B8D6;
	--pcg-primary: #2E7BFF;
	--pcg-primary-dark: #5B97FF;
	--pcg-primary-soft: rgba(46, 123, 255, .16);
	--pcg-success: #3CE08A;
	--pcg-success-soft: rgba(60, 224, 138, .13);
	--pcg-warn: #FFB547;
	--pcg-warn-soft: rgba(255, 181, 71, .14);
	--pcg-danger: #FF6B7A;
	--pcg-danger-soft: rgba(255, 107, 122, .14);
	--pcg-whatsapp: #25D366;
	--pcg-new: #3CE08A;
	--pcg-used: #FFB547;
	--pcg-refurb: #4CCBFF;
	--pcg-fresh: #3CE08A;
	--pcg-fresh-ok: #A9B8D6;
	--pcg-stale: #FFB547;
	--pcg-very-stale: #FF6B7A;
	--pcg-collected: #8193B8;
	--pcg-accent: #3CFF8F;
	--pcg-accent-text: #3CFF8F;
	--pcg-link: #3CFF8F;
	--pcg-price: #3CFF8F;
	--pcg-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
	--pcg-shadow: 0 6px 20px -8px rgba(0, 0, 0, .55);
	--pcg-shadow-lg: 0 20px 50px -20px rgba(0, 0, 0, .65);
}
html[data-theme="light"] body,
.pcgn-on-light {
	--pcg-bg: #FFFFFF;
	--pcg-surface: #F3F6FC;
	--pcg-surface-alt: #E6ECF7;
	--pcg-surface-2: #E6ECF7;
	--pcg-border: rgba(20, 50, 120, .14);
	--pcg-border-strong: rgba(20, 50, 120, .26);
	--pcg-text: #0A1430;
	--pcg-text-muted: #44547A;
	--pcg-text-faint: #5F6F93;
	--pcg-muted: #44547A;
	--pcg-primary: #1650DB;
	--pcg-primary-dark: #1240AF;
	--pcg-primary-soft: #E8F0FD;
	--pcg-success: #067A3C;
	--pcg-success-soft: #E3F5EA;
	--pcg-warn: #9A5F00;
	--pcg-warn-soft: #FDF3E2;
	--pcg-danger: #C2253A;
	--pcg-danger-soft: #FBEAEA;
	--pcg-whatsapp: #25D366;
	--pcg-new: #067A3C;
	--pcg-used: #9A5F00;
	--pcg-refurb: #1650DB;
	--pcg-fresh: #067A3C;
	--pcg-fresh-ok: #44547A;
	--pcg-stale: #9A5F00;
	--pcg-very-stale: #C2253A;
	--pcg-collected: #5F6F93;
	--pcg-accent: #2BE07A;
	--pcg-accent-text: #067A3C;
	--pcg-link: #067A3C;
	--pcg-price: #067A3C;
}

/* 2. Layout ------------------------------------------------------------------ */
/* Nothing may push the page wider than the phone (the side-to-side "play"). */
@supports (overflow: clip) {
	html, body { overflow-x: clip; }
}
img[class*="pcg-"], [class*="pcg-"] img { max-width: 100%; height: auto; }

/* Builder step list: the grid column grew to its widest row. */
.pcg-bsteps { grid-template-columns: minmax(0, 1fr) !important; }
.pcg-bstep { min-width: 0; max-width: 100%; }
.pcg-bstep__body { min-width: 0; overflow-wrap: anywhere; }
.pcg-bstep__head h2,
.pcgn-embed .pcg-bstep__head h2 { font-size: var(--pcg-fs-base, 16px) !important; margin: 0 !important; line-height: 1.3; font-family: var(--font-display); }

/* 3. Builder account bar, sign-in, quantity ---------------------------------- */
/* ".pcg-bacct__text span" in the plugin also hit the avatar (made it block + grey text). */
.pcg-bacct .pcg-bacct__avatar,
.pcg-bacct__text .pcg-bacct__avatar {
	display: inline-flex !important; align-items: center; justify-content: center;
	width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
	background: var(--pcg-primary, #2E7BFF); color: #fff !important;
	font: 700 15px/1 var(--font-display, sans-serif); text-align: center; text-transform: uppercase;
}
.pcg-bacct__text { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Google button: Google's own white style in both modes, always readable. */
.pcg-google,
.pcg-google:hover {
	background: #FFFFFF !important; color: #1F1F1F !important; border: 1px solid #DADCE0 !important;
	font-weight: 600;
}
.pcg-google:hover { box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.pcg-bsave, .pcg-auth { color: var(--pcg-text); }

/* Quantity box: the theme's 14px input padding left no room for the number. */
.pcg-qty { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.pcg-qty .pcg-qty__input,
input.pcg-qty__input {
	width: 64px !important; min-width: 64px; min-height: 40px; padding: 6px 8px !important;
	text-align: center; font-size: 16px; font-variant-numeric: tabular-nums;
}
[class*="pcg-"] input[type="number"] { padding-left: 10px; padding-right: 10px; min-width: 56px; }

/* 4. Shops: signals, offer table, where-to-buy -------------------------------- */
/* Signals were three pills each; now one quiet line: "1,013 products listed · Prices collected by us · …" */
.pcg-signals { display: block; margin-top: 4px; line-height: 1.45; }
.pcg-signal {
	display: inline !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
	background: none !important; box-shadow: none !important;
	font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0; text-transform: none;
	color: var(--pcg-text-faint) !important; white-space: normal;
}
.pcg-signal--good { color: var(--pcg-success) !important; }
.pcg-signal + .pcg-signal::before { content: " · "; color: var(--pcg-text-faint); }
.pcg-offer-table td > .pcg-signal { display: block !important; margin-top: 2px; }

/* Chips (New / Used) stay small pills */
.pcg-chip { white-space: nowrap; }

@media (max-width: 760px) {
	/* Offer table becomes stacked cards that fit the screen. */
	.pcg-offer-table, .pcg-offer-table tbody { display: block; width: 100%; }
	.pcg-offer-table tr { display: block; padding: 14px 0 !important; }
	.pcg-offer-table td {
		display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px;
		padding: 4px 0 !important; border: 0 !important; text-align: right; font-size: 15px;
	}
	.pcg-offer-table td::before { text-align: left; flex: 0 0 auto; font-size: 13px; }
	.pcg-offer-table td > * { min-width: 0; }
	/* Shop cell: name on top, signal + town underneath, no "Shop" label. */
	.pcg-offer-table td[data-label="Shop"] { display: block !important; text-align: left; padding-bottom: 6px !important; }
	.pcg-offer-table td[data-label="Shop"]::before { display: none; }
	.pcg-offer-table td[data-label="Shop"] strong { font-size: 17px; }
	.pcg-offer-table td[data-label="Shop"] br { display: none; }
	.pcg-offer-table td[data-label="Shop"] .pcg-muted { display: block; font-size: 13px; }
	.pcg-offer-table td[data-label="Price"] { font-size: 18px; font-weight: 700; }
	.pcg-offer-table .pcg-fresh { justify-content: flex-end; text-align: right; }
	/* Action cell: a big, centred WhatsApp button. */
	.pcg-offer-table td:last-child { display: block !important; padding-top: 10px !important; }
	.pcg-offer-table td:last-child::before { display: none; }
	.pcg-offer-table td:empty { display: none !important; }

	.pcg-wtb__shop { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: start; }
	.pcg-wtb__shop > .pcg-btn, .pcg-wtb__shop > a.pcg-btn--whatsapp { grid-column: 1 / -1; }
	.pcg-wtb__figure { text-align: right; }

	.pcg-offer-table .pcg-btn--whatsapp,
	.pcg-wtb__shop .pcg-btn--whatsapp,
	.pcg-btn--whatsapp.pcg-lead {
		display: flex !important; align-items: center; justify-content: center; gap: 8px;
		width: 100%; min-height: 52px; margin: 4px 0 0; padding: 0 18px !important;
		font-size: 17px !important; font-weight: 700; border-radius: 14px;
	}

	/* Saved-build table */
	.pcg-btable td { overflow-wrap: anywhere; }
}