/* GPD Dark skin — droix-kb-resource-mngr .drx-* components re-skinned for gpdstore.net's dark
   theme (droix-themes/shoptimizer-child-theme-gpdstore). Uses gpdstore's own design tokens
   (assets/css/gpd-tokens.css: --lime-500, --teal-500, the --bg- / --fg- scales, --line-1) as the primary
   colour source with literal fallbacks so the KB resource/product widgets embedded in
   gpdstore's BetterDocs docs read as native gpdstore UI instead of the light DROIX skin, even
   on a page that doesn't happen to load gpd-tokens.css. Same component structure/radii as
   assets/css/skins/droix.css — only colour changes. Selected via the "Settings & Design"
   admin screen (`skin: gpd-dark`). */

.drx-product,
.drx-files,
.drx-gate {
	--droix-green: var(--lime-500, #b0cb1f);
	--droix-green-dark: var(--lime-600, #98b01a);
	--droix-green-text: var(--acc-ink, #06160f);
	--droix-teal: var(--teal-500, #2dd4bf);
	--droix-red-sale: var(--red-500, #ff5c5c);
	--drx-surface-0: var(--bg-2, #0a0a0a);
	--drx-surface-1: var(--surface-elev, #111111);
	--drx-fg-1: var(--fg-0, #f5f5f5);
	--drx-fg-3: var(--fg-secondary, #9aa1af);
	--drx-fg-4: var(--fg-tertiary, #767a80);
	--drx-stroke: var(--line-1, rgba(255, 255, 255, 0.08));
	background: var(--drx-surface-1);
	border-color: var(--drx-stroke);
	border-radius: 20px;
	color: var(--drx-fg-1);
}

/* ── Product widgets ─────────────────────────────────────────────── */

.drx-product {
	background: var(--drx-surface-1);
}

.drx-product__name {
	color: var(--drx-fg-1);
}

.drx-product__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	color: var(--droix-green);
}

.drx-product__was {
	font-size: 0.8em;
	font-weight: 400;
	color: var(--drx-fg-4);
	text-decoration: line-through;
}

.drx-product__price--sale {
	color: var(--droix-red-sale);
}

.drx-product__stock--instock {
	color: var(--droix-green);
}

.drx-product__stock--preorder {
	color: var(--droix-teal);
}

.drx-product__stock--oos {
	color: var(--droix-red-sale);
}

.drx-product__cta {
	background: var(--droix-green);
	color: var(--droix-green-text);
	border-radius: 16px;
	font-weight: 700;
	box-shadow: 0 8px 20px rgba(176, 203, 31, 0.25);
	transition: background 0.15s ease;
}

.drx-product__cta:hover {
	background: var(--droix-green-dark);
	color: var(--droix-green-text);
}

/* ── Resource rows ───────────────────────────────────────────────── */

.drx-files {
	background: var(--drx-surface-0);
}

.drx-files__title {
	color: var(--drx-fg-1);
}

.drx-res {
	background: var(--drx-surface-1);
	border-top-color: var(--drx-stroke);
	border-radius: 14px;
	padding: 12px 16px;
	margin-bottom: 8px;
}

.drx-res:last-child {
	margin-bottom: 0;
}

.drx-res__name {
	color: var(--drx-fg-1);
}

.drx-res__meta,
.drx-res__vmeta {
	color: var(--drx-fg-3);
}

.drx-res__badge[data-type="firmware"] {
	background: rgba(176, 203, 31, 0.15);
	color: var(--droix-green);
}

.drx-res__badge[data-type="bios"] {
	background: rgba(187, 61, 161, 0.2);
	color: #e29bd1;
}

.drx-res__badge[data-type="driver"],
.drx-res__badge[data-type="manual"] {
	background: rgba(255, 255, 255, 0.08);
	color: var(--drx-fg-1);
}

.drx-res__badge[data-type="os_image"] {
	background: rgba(255, 218, 68, 0.18);
	color: #ffda44;
}

.drx-res__badge[data-type="tool"] {
	background: rgba(255, 255, 255, 0.12);
	color: var(--drx-fg-1);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.drx-res a.drx-res__cta,
.drx-res__cta {
	background: var(--droix-green);
	color: var(--droix-green-text);
	border-radius: 16px;
	transition: background 0.15s ease;
}

.drx-res a.drx-res__cta:hover,
.drx-res__cta:hover {
	background: var(--droix-green-dark);
	color: var(--droix-green-text);
}

.drx-res a.drx-res__cta--ext,
.drx-res__cta--ext {
	background: transparent;
	color: var(--drx-fg-1);
	border: 1px solid var(--drx-stroke);
	box-shadow: none;
}

.drx-res a.drx-res__cta--ext:hover,
.drx-res__cta--ext:hover {
	background: rgba(255, 255, 255, 0.06);
}

.drx-res__cta--ext .drx-res__cta-icon {
	display: none;
}

.drx-res__cta-icon,
.drx-res__chevron {
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.drx-res__cta-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E");
}

.drx-res__chevron {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	transition: transform 0.15s ease;
}

.drx-res__versions[open] .drx-res__chevron {
	transform: rotate(180deg);
}

.drx-res__device {
	background: rgba(176, 203, 31, 0.15);
	color: var(--droix-green);
}

.drx-res__device:hover {
	background: rgba(176, 203, 31, 0.25);
}

.drx-res__guide {
	border-color: var(--drx-stroke);
	color: var(--drx-fg-1);
}

.drx-res__guide:hover {
	background: rgba(255, 255, 255, 0.06);
}

.drx-res__toggle {
	display: inline-flex;
	align-items: center;
	color: var(--drx-fg-3);
}

.drx-res__toggle:hover {
	color: var(--drx-fg-1);
}

.drx-res__version {
	background: var(--drx-surface-0);
	border-color: var(--drx-stroke);
}

.drx-res__vbadge {
	background: var(--droix-green);
	color: var(--droix-green-text);
}

.drx-res__vnum {
	display: inline-flex;
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(176, 203, 31, 0.15);
	color: var(--droix-green);
	font-size: 0.85em;
}

.drx-res__current {
	color: var(--droix-green);
}

.drx-res__vdl {
	background: transparent;
	border-color: var(--drx-stroke);
	color: var(--drx-fg-1);
}

.drx-res__vdl:hover {
	border-color: var(--droix-green);
	color: var(--droix-green);
}

.drx-res__rollback-note {
	color: var(--drx-fg-4);
}

.drx-res__notes {
	color: var(--drx-fg-3);
}

/* ── "Downloads for {device}" panel — one shade further back than the row cards so the
   panel itself still reads as a distinct surface against the page. ── */

.drx-files--panel {
	background: var(--drx-surface-0);
	border-color: var(--drx-stroke);
	border-radius: 30px;
	padding: 32px 36px;
}

.drx-files--panel .drx-files__title,
.drx-files--panel .drx-files__group-title {
	color: var(--drx-fg-1);
}

.drx-files--panel .drx-res {
	background: var(--drx-surface-1);
}

.drx-files--panel .drx-res__versions {
	background: rgba(255, 255, 255, 0.04);
	border: 0;
	border-radius: 14px;
	padding: 12px 16px;
}

/* ── Download gate modal ─────────────────────────────────────────── */

.drx-gate {
	background: rgba(0, 0, 0, 0.6);
}

.drx-gate__card {
	--drx-card-bg: var(--drx-surface-1);
	--drx-card-radius: 24px;
	--drx-card-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
	border: 1px solid var(--drx-stroke);
}

.drx-gate__badge {
	background: rgba(176, 203, 31, 0.15);
	color: var(--droix-green);
}

.drx-gate__close {
	color: var(--drx-fg-3);
}

.drx-gate__close:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--drx-fg-1);
}

.drx-gate__heading {
	color: var(--drx-fg-1);
}

.drx-gate__file {
	color: var(--drx-fg-3);
}

.drx-gate__filename {
	color: var(--drx-fg-1);
}

.drx-gate__tabs {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--drx-stroke);
}

.drx-gate__tab {
	color: var(--drx-fg-3);
}

.drx-gate__tab.is-active {
	background: var(--drx-surface-0);
	color: var(--drx-fg-1);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.drx-gate__label {
	color: var(--drx-fg-3);
}

.drx-gate__input {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--drx-stroke);
	color: var(--drx-fg-1);
}

.drx-gate__input:focus {
	outline: none;
	border-color: var(--droix-green);
}

.drx-gate__remember {
	color: var(--drx-fg-3);
}

.drx-gate__forgot {
	color: var(--droix-teal);
	text-decoration: none;
}

.drx-gate__forgot:hover {
	text-decoration: underline;
}

.drx-gate__cta {
	background: var(--droix-green);
	color: var(--droix-green-text);
}

.drx-gate__cta:hover {
	background: var(--droix-green-dark);
	box-shadow: 0 8px 20px rgba(176, 203, 31, 0.25);
}

.drx-gate__resend {
	color: var(--droix-teal);
	font-weight: 600;
}

.drx-gate__code {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--drx-stroke);
	color: var(--drx-fg-1);
}

.drx-gate__code:focus,
.drx-gate__code:not(:placeholder-shown) {
	outline: none;
	border-color: var(--droix-green);
	background: rgba(176, 203, 31, 0.12);
}

.drx-gate__error {
	color: var(--droix-red-sale);
}

.drx-gate__signup {
	border-top-color: var(--drx-stroke);
	color: var(--drx-fg-3);
}

.drx-gate__signup-link {
	color: var(--droix-teal);
}

.drx-gate__signup-link:hover {
	text-decoration: underline;
}

.drx-gate__check {
	background: var(--droix-green);
	color: var(--droix-green-text);
	box-shadow: 0 8px 20px rgba(176, 203, 31, 0.25);
}

.drx-gate__success-msg {
	color: var(--drx-fg-3);
}

/* ── Disclaimer step (0.26.0) ───────────────────────────────────────── */

.drx-gate__badge--warn {
	background: rgba(255, 176, 32, 0.15);
	color: #ffb020;
}

.drx-gate__disc-intro,
.drx-gate__disc-list {
	color: var(--drx-fg-2, var(--drx-fg-3));
}

.drx-gate__disc-list li::marker {
	color: #ffb020;
}

.drx-gate__disc-check {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--drx-stroke);
	color: var(--drx-fg-1);
}

.drx-gate__disc-check input {
	accent-color: var(--droix-green);
}

.drx-gate__cancel {
	color: var(--drx-fg-3);
}

.drx-gate__cancel:hover {
	color: var(--drx-fg-1);
}

.drx-gate__disc-fine {
	color: var(--drx-fg-3);
}

.drx-gate__disc-fine a {
	color: var(--droix-teal);
}