/* Gamer Store Core: shared front-end building blocks.
   Colours come from the theme's CSS variables (set on html[data-theme]); fallbacks keep the plugin usable with any theme. */

.gsx, .gsx * { box-sizing: border-box; }

.gsx {
	--gsx-bg: var(--bg, #f6f6fa);
	--gsx-surface: var(--surface, #ffffff);
	--gsx-surface2: var(--surface2, #efeff6);
	--gsx-text: var(--text, #0c0c14);
	--gsx-muted: var(--muted, #5a5a6e);
	--gsx-border: var(--border, #e4e4ee);
	--gsx-primary: var(--primary, #5b3df5);
	--gsx-on-primary: var(--on-primary, #ffffff);
	--gsx-mint: var(--mint, #12b886);
	--gsx-on-mint: var(--on-mint, #032a1f);
	--gsx-coral: var(--coral, #ff5c6c);
	--gsx-on-coral: var(--on-coral, #2a0610);
	--gsx-amber: var(--amber, #e8b84a);
	--gsx-on-amber: var(--on-amber, #2a1d00);
	color: var(--gsx-text);
	font-family: inherit;
}

.gsx-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 26px; border-radius: 999px; border: 2px solid transparent;
	font: inherit; font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; line-height: 1;
	background: var(--gsx-primary); color: var(--gsx-on-primary);
}
.gsx-btn:hover { filter: brightness(1.06); }
.gsx-btn:disabled, .gsx-btn[aria-disabled="true"] { background: var(--gsx-surface2); color: var(--gsx-muted); cursor: not-allowed; filter: none; }
.gsx-btn--ghost { background: transparent; color: var(--gsx-primary); border-color: var(--gsx-primary); }
.gsx-btn--gold { background: var(--gsx-amber); color: var(--gsx-on-amber); }
.gsx-btn--block { display: flex; width: 100%; }
.gsx-btn--sm { min-height: 40px; padding: 0 18px; font-size: 14px; }

.gsx-card { background: var(--gsx-surface); border: 1px solid var(--gsx-border); border-radius: 20px; padding: 22px; }
.gsx-muted { color: var(--gsx-muted); }

.gsx-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.gsx-field label { font-weight: 700; font-size: 14px; }
.gsx-field input[type="text"], .gsx-field input[type="email"], .gsx-field input[type="number"], .gsx-field input[type="password"],
.gsx-field select, .gsx-field textarea {
	width: 100%; min-height: 48px; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--gsx-border);
	background: var(--gsx-bg); color: var(--gsx-text); font: inherit; font-size: 16px;
}
.gsx-field textarea { resize: vertical; }
.gsx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.gsx-notice { padding: 12px 16px; border-radius: 14px; background: var(--gsx-surface2); font-weight: 600; font-size: 14px; margin: 0 0 14px; }
.gsx-notice--error { border-left: 4px solid var(--gsx-coral); }
.gsx-notice--success { border-left: 4px solid var(--gsx-mint); }

.gsx-badge { display: inline-block; padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; letter-spacing: .6px; line-height: 1.2; text-transform: uppercase; }
.gsx-badge--hot { background: var(--gsx-coral); color: var(--gsx-on-coral); }
.gsx-badge--new { background: var(--gsx-mint); color: var(--gsx-on-mint); }
.gsx-badge--sale { background: var(--gsx-amber); color: var(--gsx-on-amber); }
.gsx-badge--rank { background: #16133a; color: #fff; }
.gsx-badge--custom { background: var(--gsx-primary); color: var(--gsx-on-primary); }

.gsx-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--gsx-border); background: var(--gsx-surface); font-size: 13px; font-weight: 600; }
.gsx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gsx-mint); display: inline-block; }

.gsx-countdown { display: flex; gap: 8px; max-width: 400px; }
.gsx-countdown__unit { flex: 1 1 0; text-align: center; padding: 10px 0; border-radius: 16px; background: var(--gsx-surface2); }
.gsx-countdown__num { display: block; font-weight: 700; font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.gsx-countdown__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--gsx-muted); }
.gsx-countdown__unit:last-child { background: var(--gsx-amber); color: var(--gsx-on-amber); }
.gsx-countdown__unit:last-child .gsx-countdown__label { color: inherit; }
.gsx-countdown.is-ended { opacity: .6; }