/* DROIX skin — design-system-token styling for the plugin's .drx-* components, per the
   kb-design handoff (Downloads-for-device panel ~L739-805, Gate modal ~L175-283,
   `_ds/.../colors_and_type.css`). Selected via the "Settings & Design" admin screen
   (`skin: droix`, the default). `skin: inherit` skips this file entirely so a client site's own
   theme (e.g. gpdstore/BetterDocs) styles the structural markup itself. */

.drx-product,
.drx-files,
.drx-gate {
	--droix-green: #b0cb1f;
	--droix-green-dark: #74a401;
	--droix-green-text: #1b2400;
	--droix-purple: #bb3da1;
	--droix-red-sale: #d80027;
	--droix-dark-panel: #11182c;
	--drx-fg-1: #0b0b0b;
	--drx-fg-3: #484848;
	--drx-fg-4: #666;
	--drx-fg-muted: #999;
	--drx-stroke: #eee;
	border-color: var(--drx-stroke);
	border-radius: 20px;
	color: var(--drx-fg-1);
}

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

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

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

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

/* On-sale price: overrides the purple base above (drx-product__price--sale is added
   alongside drx-product__price only when a struck-through "was" price exists). */
.drx-product__price--sale {
	color: var(--droix-red-sale);
}

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

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

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

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

.drx-res__badge[data-type="firmware"] {
	background: #f3f8dc;
	color: #4e6f01;
}

.drx-res__badge[data-type="bios"] {
	background: #f6e4f1;
	color: #bb3da1;
}

.drx-res__badge[data-type="driver"],
.drx-res__badge[data-type="manual"] {
	background: #f6f8fa;
	color: #484848;
}

.drx-res__badge[data-type="os_image"] {
	background: #ffda44;
	color: #3b3200;
}

.drx-res__badge[data-type="tool"] {
	background: #11182c;
	color: #fff;
}

.drx-res a.drx-res__cta,
.drx-res__cta {
	background: var(--droix-green);
	color: #fff;
	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: #fff;
}

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

.drx-res a.drx-res__cta--ext:hover,
.drx-res__cta--ext:hover {
	background: #f6f8fa;
	color: var(--drx-fg-1);
}

.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: #f3f8dc;
	color: #4e6f01;
}

.drx-res__device:hover {
	background: #e9f2c4;
}

.drx-res__guide:hover {
	background: #f6f8fa;
}

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

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

.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: #f3f8dc;
	color: #4e6f01;
	font-size: 0.85em;
}

.drx-res__current {
	color: #4e6f01;
}

.drx-res__vdl {
	background: #fff;
	border-color: #d9d9d9;
	color: var(--drx-fg-3);
}

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

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

/* ── "Downloads for {device}" dark panel (dkr_device_downloads()) ──────────── */

.drx-files--panel {
	background: var(--droix-dark-panel);
	border-color: transparent;
	border-radius: 30px;
	padding: 32px 36px;
}

.drx-files--panel .drx-files__title,
.drx-files--panel .drx-files__group-title {
	color: #fff;
}

.drx-files--panel .drx-res {
	background: #fff;
	color: var(--drx-fg-1);
	border-top: 0;
	border-radius: 18px;
	padding: 16px 20px;
	margin-bottom: 10px;
}

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

.drx-files--panel .drx-res__versions {
	background: #f8f8f8;
	border: 0;
	border-radius: 14px;
	padding: 12px 16px;
}

/* ── Download gate modal (dkr_gate_modal()) ─────────────────────────────────── */

.drx-gate__card {
	--drx-card-bg: #fff;
	--drx-card-radius: 24px;
}

.drx-gate__badge {
	background: #f3f8dc;
	color: #4e6f01;
}

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

.drx-gate__close:hover {
	background: #f6f8fa;
	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: #f6f8fa;
	border: 1px solid #f0f0f0;
}

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

.drx-gate__tab.is-active {
	background: #fff;
	color: var(--drx-fg-1);
	box-shadow: 0 1px 3px rgba(17, 24, 39, 0.15);
}

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

.drx-gate__input {
	border: 1px solid #d9d9d9;
	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: #4e6f01;
	text-decoration: none;
}

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

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

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

.drx-gate__resend {
	color: #4e6f01;
	font-weight: 600;
}

.drx-gate__code {
	border: 1px solid #d9d9d9;
	color: var(--drx-fg-1);
}

.drx-gate__code:focus,
.drx-gate__code:not(:placeholder-shown) {
	outline: none;
	border-color: var(--droix-green);
	background: #f3f8dc;
}

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

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

.drx-gate__signup-link {
	color: #4e6f01;
}

.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.35);
}

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