/**
 * ELT Product Data Elementor Widget — Frontend Styles
 *
 * Most visual styling is handled directly by Elementor's style-panel controls
 * via scoped CSS selectors. This file provides sensible structural defaults so
 * the widget renders cleanly before any style-panel values are applied.
 *
 * Author: Hans-CM
 */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.elt-pdw-wrapper {
	display: block;
	box-sizing: border-box;
}

/* ── Text / HTML / Link output ───────────────────────────────────────────── */

.elt-pdw-value {
	display: block;
	box-sizing: border-box;
	word-break: break-word;
}

.elt-pdw-value a {
	color: inherit;
	text-decoration: underline;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.elt-pdw-value a:hover {
	opacity: 0.8;
}

/* Fallback text — slightly muted so it's visually distinguishable. */
.elt-pdw-fallback {
	opacity: 0.6;
	font-style: italic;
}

/* ── Image output ────────────────────────────────────────────────────────── */

.elt-pdw-image-wrapper {
	display: flex; /* alignment is driven by Elementor's justify-content selector */
	box-sizing: border-box;
}

.elt-pdw-image-wrapper img {
	display: block;
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
}

/* ── Editor-only notice ──────────────────────────────────────────────────── */

/* The inline styles on .elt-pdw-editor-notice handle display;
   hide it entirely on the frontend just in case. */
.elt-pdw-editor-notice {
	display: none;
}

.elementor-editor-active .elt-pdw-editor-notice {
	display: block;
}