/* ==========================================================================
   Kodelink theme × Kodelink NFC Shop — dark look.
   Loads after the plugin's kl-nfc.css. The plugin marks key rules !important,
   so these overrides use one extra level of specificity (body …) plus !important.
   ========================================================================== */

body .kl-nfc {
	--kl-ink: #FFFFFF;
	--kl-muted: #B9B6D6;
	--kl-line: rgba(255, 255, 255, 0.12);
	--kl-tint: rgba(255, 255, 255, 0.05);
	--kl-dark: #22D3B6;
	--kl-primary: #22D3B6;
	--kl-teal-d: #22D3B6;
	--kl-blue-d: #22A6F2;
	--kl-grad-btn: linear-gradient(100deg, #22D3B6, #22A6F2);
	--kl-head: 'Plus Jakarta Sans', system-ui, sans-serif;
	--kl-body: 'DM Sans', system-ui, sans-serif;
	--kl-radius: 22px;
	--kl-photo-bg: #F3F2F8; /* product photos have white backgrounds */
}

body .kl-nfc.kl-nfc-root { background: transparent !important; color: var(--kl-ink) !important; padding-bottom: 0; }
body .kl-nfc-shop { padding-top: 0; }
body .kl-nfc-pdp { padding: 24px 0 var(--kl-section-y, 96px); }

/* Buttons */
body .kl-nfc a.kl-nfc-btn, body .kl-nfc .kl-nfc-btn,
body .kl-nfc-pdp button.single_add_to_cart_button {
	color: #0B0A1F !important; border-radius: 999px !important; font-weight: 700 !important;
	transition: transform 0.3s, box-shadow 0.3s;
}
body .kl-nfc a.kl-nfc-btn:hover, body .kl-nfc-pdp button.single_add_to_cart_button:hover {
	transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(34, 211, 182, 0.7) !important;
}
body .kl-nfc .kl-nfc-btn--outline { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.25) !important; }

/* Grid cards */
body .kl-nfc-grid { gap: 20px; }
body .kl-nfc-product {
	background: rgba(255, 255, 255, 0.03); border: 1px solid var(--kl-line); border-radius: var(--kl-radius);
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.45s, box-shadow 0.45s;
}
body .kl-nfc-product:hover { transform: translateY(-6px); border-color: rgba(34, 211, 182, 0.5); box-shadow: 0 30px 60px -30px rgba(34, 166, 242, 0.55); }
body .kl-nfc-product--custom { border: 1px solid rgba(231, 180, 207, 0.6); background: linear-gradient(160deg, rgba(167, 139, 219, 0.16), rgba(34, 166, 242, 0.06)); }
body .kl-nfc-product__media, body .kl-nfc-pdp__stage, body .kl-nfc button.kl-nfc-thumb { background: var(--kl-photo-bg) !important; }
body .kl-nfc-product__media { margin: 10px 10px 0; border-radius: 16px; overflow: hidden; }
body .kl-nfc-badge { background: #0B0A1F; color: #fff; box-shadow: none; }
body .kl-nfc .kl-nfc-product__title { font-size: 17px !important; }
body .kl-nfc-product__price, body .kl-nfc-pdp__price { color: #22D3B6; }
body .kl-nfc-empty { color: var(--kl-muted); }

/* Product page */
body .kl-nfc a.kl-nfc-back { color: var(--kl-muted) !important; }
body .kl-nfc-pdp__stage { border-radius: var(--kl-radius); }
body .kl-nfc button.kl-nfc-thumb.is-active { border-color: #22D3B6 !important; }
body .kl-nfc a.kl-nfc-wa { color: #22D3B6 !important; }
body .kl-nfc-pdp__trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: #CFCCE8; }
body .kl-nfc-pdp__trust li { display: flex; gap: 10px; align-items: flex-start; }
body .kl-nfc-pdp__trust li::before {
	content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; background: #22D3B6;
	-webkit-mask: var(--kl-i-check) center / contain no-repeat; mask: var(--kl-i-check) center / contain no-repeat;
}
body .kl-nfc-desc { color: var(--kl-muted); }

/* Form controls inside the product form */
body .kl-nfc-pdp .quantity .qty,
body .kl-nfc-field input[type=text], body .kl-nfc-field input[type=url], body .kl-nfc-field input[type=tel],
body .kl-nfc-field input[type=password], body .kl-nfc-field select, body .kl-nfc-field textarea {
	background: rgba(255, 255, 255, 0.04) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 12px !important;
}
body .kl-nfc-field select { background-color: #17143A !important; }
body .kl-nfc-field input[type=file] { background: rgba(255, 255, 255, 0.03) !important; color: #fff !important; border-color: rgba(167, 139, 219, 0.6) !important; }
body .kl-nfc :is(input, select, textarea):focus { outline: none !important; border-color: #22D3B6 !important; box-shadow: 0 0 0 4px rgba(34, 211, 182, 0.18) !important; }

/* Option cards + boxes */
body .kl-nfc button.kl-nfc-option { background: rgba(255, 255, 255, 0.03) !important; color: #fff !important; border: 1px solid var(--kl-line) !important; }
body .kl-nfc button.kl-nfc-option.is-active { background: rgba(34, 211, 182, 0.08) !important; border-color: #22D3B6 !important; }
body .kl-nfc-option__radio { background: transparent; border-color: rgba(255, 255, 255, 0.4); }
body .kl-nfc-option.is-active .kl-nfc-option__radio { border-color: #22D3B6; }
body .kl-nfc-box { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--kl-line); }
body .kl-nfc-picked { background: rgba(255, 255, 255, 0.04); border-color: var(--kl-line); }
body .kl-nfc-error { background: rgba(231, 180, 207, 0.12); color: #F4CFE0; border: 1px solid rgba(231, 180, 207, 0.4); }

/* Design picker popup */
body .kl-nfc.kl-nfc-modal { background: #120F33; color: #fff; border: 1px solid var(--kl-line); }
body .kl-nfc button.kl-nfc-modal__close { background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; }
body .kl-nfc button.kl-nfc-design { background: rgba(255, 255, 255, 0.03) !important; color: #fff !important; border: 1px solid var(--kl-line) !important; }
body .kl-nfc button.kl-nfc-design.is-active { background: rgba(34, 211, 182, 0.08) !important; border-color: #22D3B6 !important; }

@media (max-width: 640px) {
	body .kl-nfc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	body .kl-nfc-product__media { margin: 6px 6px 0; }
}