/**
 * Craft Elementor Widgets - Cracking Chip
 *
 * Elementor's Style tab controls write --chip-* custom properties onto the
 * *outer* Elementor widget wrapper (an ancestor of .craft-chip-widget), which
 * this file's rules read via var(--chip-x, fallback) at the point of use.
 *
 * Do NOT declare --chip-* defaults on .craft-chip-widget itself (or any of
 * its own descendants) -- a value declared directly on an element always
 * wins over one inherited from an ancestor, regardless of selector order or
 * specificity, so it would silently swallow every value Elementor sets. Put
 * new defaults only in a var(--chip-x, <default>) fallback.
 */
.craft-chip-widget {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	/* Press-and-hold on touch (see bindEvents() in chip-widget.js) is easily
	   broken by iOS's long-press text-selection callout/magnifier, so suppress
	   it here rather than only on the image. touch-action: manipulation drops
	   the ~300ms tap delay and double-tap-zoom without blocking page scroll
	   that happens to start on the widget. */
	touch-action: manipulation;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

.craft-chip-widget:focus-visible {
	outline: 2px solid #0a84ff;
	outline-offset: 4px;
}

.craft-chip-widget__stage {
	position: relative;
	width: var(--chip-width, 400px);
	height: var(--chip-height, 400px);
	max-width: 100%;
}

.craft-chip-widget__source,
.craft-chip-widget__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.craft-chip-widget__source {
	transition: opacity 0.2s ease;
	user-select: none;
}

.craft-chip-widget__canvas {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, filter 0.5s ease-out;
	filter: drop-shadow(0 var(--chip-shadow-idle-y, 25px) var(--chip-shadow-idle-blur, 20px) var(--chip-shadow-idle-color, rgba(0, 0, 0, 0.65)));
}

.craft-chip-widget.is-js-ready .craft-chip-widget__source {
	opacity: 0;
}

.craft-chip-widget.is-js-ready .craft-chip-widget__canvas {
	opacity: 1;
}

.craft-chip-widget.is-cracked .craft-chip-widget__canvas {
	filter: drop-shadow(0 var(--chip-shadow-cracked-y, 5px) var(--chip-shadow-cracked-blur, 4px) var(--chip-shadow-cracked-color, rgba(0, 0, 0, 0.8)));
}

/* Title */

.craft-chip-widget__title {
	margin: 0;
	line-height: 1.2;
	/* Above/Below already sit centered in the flex column; horizontal offset
	   nudges sideways from that centered position via translateX. Vertical
	   offset for those two positions is handled as margin below instead,
	   since they're in normal flow, not absolutely positioned. */
	transform: translateX(var(--chip-title-offset-x, 0px)) rotate(var(--chip-title-rotate, 0deg));
}

.craft-chip-widget__title--above {
	margin-bottom: var(--chip-title-offset-y, 0px);
}

.craft-chip-widget__title--below {
	margin-top: var(--chip-title-offset-y, 0px);
}

.craft-chip-widget__title-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: var(--chip-title-align, flex-start);
	justify-content: center;
	padding: 12px;
	pointer-events: none;
	text-align: center;
}

.craft-chip-widget__title--overlay {
	/* Overlay is absolutely positioned, so both axes move via transform. */
	transform: translate(var(--chip-title-offset-x, 0px), var(--chip-title-offset-y, 0px)) rotate(var(--chip-title-rotate, 0deg));
}

/* Title image (SVG/PNG uploaded instead of plain text) */

.craft-chip-widget__title-image {
	width: var(--chip-title-svg-width, 260px);
	height: auto;
	display: block;
}

/* Popup (Chip Action: Popup) -- visibility is driven entirely by the same
   .is-cracked class the crack animation already toggles, so no extra JS is
   needed here beyond what bindEvents() already does. */

.craft-chip-widget__popup {
	position: absolute;
	z-index: 5;
	width: var(--chip-popup-width, 280px);
	min-height: var(--chip-popup-min-height, 0px);
	padding: var(--chip-popup-padding, 20px);
	background-color: var(--chip-popup-bg, #E63328);
	background-image: var(--chip-popup-bg-image, none);
	background-size: var(--chip-popup-bg-size, cover);
	background-position: var(--chip-popup-bg-position-x, 50%) var(--chip-popup-bg-position-y, 50%);
	background-repeat: no-repeat;
	border-radius: var(--chip-popup-radius, 12px);
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0.25s;
	/* Popup content is real informational text, unlike the decorative chip
	   itself, so re-enable normal touch/selection behavior the wrapper turns off. */
	touch-action: auto;
	-webkit-touch-callout: default;
	-webkit-user-select: text;
	user-select: text;
}

.craft-chip-widget.is-cracked .craft-chip-widget__popup {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Each position variant owns the full `transform` (positioning transform +
   rotation combined) since only one `transform` declaration can win per
   element -- see the same pattern for the title in the section above. */
.craft-chip-widget__popup--right {
	left: 100%;
	top: 50%;
	margin-left: var(--chip-popup-offset, 16px);
	transform: translateY(-50%) rotate(var(--chip-popup-rotate, 0deg));
}

.craft-chip-widget__popup--left {
	right: 100%;
	top: 50%;
	margin-right: var(--chip-popup-offset, 16px);
	transform: translateY(-50%) rotate(var(--chip-popup-rotate, 0deg));
}

.craft-chip-widget__popup--top {
	bottom: 100%;
	left: 50%;
	margin-bottom: var(--chip-popup-offset, 16px);
	transform: translateX(-50%) rotate(var(--chip-popup-rotate, 0deg));
}

.craft-chip-widget__popup--bottom {
	top: 100%;
	left: 50%;
	margin-top: var(--chip-popup-offset, 16px);
	transform: translateX(-50%) rotate(var(--chip-popup-rotate, 0deg));
}

.craft-chip-widget__popup-icon {
	position: absolute;
	top: var(--chip-popup-icon-top, -24px);
	right: var(--chip-popup-icon-right, 20px);
	width: var(--chip-popup-icon-size, 64px);
	height: auto;
	z-index: 1;
	pointer-events: none;
}

.craft-chip-widget__popup-title {
	margin: 0 0 8px;
	padding-bottom: var(--chip-popup-divider-spacing, 0px);
	/* 0px width border is invisible, so the divider is off by default. */
	border-bottom: var(--chip-popup-divider-width, 0px) var(--chip-popup-divider-style, solid) var(--chip-popup-divider-color, rgba(255, 255, 255, 0.6));
}

.craft-chip-widget__popup-content {
	margin: 0;
}

.craft-chip-widget__popup-content > *:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.craft-chip-widget__canvas,
	.craft-chip-widget__source,
	.craft-chip-widget__popup {
		transition-duration: 0.01ms !important;
	}
}