/**
 * Structural CSS for the Donation Tree Elementor widgets.
 *
 * This file intentionally contains almost no colors, fonts, or spacing
 * values — those all come from Elementor's own generated CSS, built from
 * each widget's Style-tab controls (see includes/elementor/widgets/*.php).
 * What's here is just enough layout skeleton (flex/grid, base sizing) for
 * every widget to look sensible with zero Style-tab changes, so dragging a
 * widget onto a page never produces broken/unstyled markup while someone
 * is still deciding how to design it.
 */

.dt-el-empty {
	padding: 1em;
	opacity: 0.7;
	font-style: italic;
}

/* Donation Tree */
.dt-el-tree-wrap {
	width: 100%;
}
.dt-el-tree {
	position: relative;
	width: 100%;
}
.dt-el-tree-canvas {
	width: 100%;
	line-height: 0;
}
.dt-el-tree-canvas .dt-tree-svg {
	display: block;
	width: 100%;
	height: auto;
}
.dt-el-tree .dt-popover {
	position: absolute;
	transform: translate(-50%, -100%);
	background: #fff;
	border-radius: 10px;
	padding: 8px 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	font-size: 13px;
	line-height: 1.4;
	pointer-events: none;
	z-index: 5;
	white-space: nowrap;
}
.dt-part-label {
	display: var(--dt-labels-display, block);
}

/* Donation Tree — Custom Background + Markers canvas */
.dt-el-garden-canvas {
	position: relative;
	width: 100%;
	min-height: calc(var(--dt-garden-base-h, 480px) + var(--dt-garden-extra-h, 0px));
	background-color: #dff0d8; /* only shows if no image/color control value is set */
	overflow: hidden;
	transition: min-height 0.3s ease;
	/* Deliberately NOT setting background-position/size/repeat here: once an
	   image is chosen, Elementor's own Style → Garden Background control
	   (a native Group_Control_Background bound to this same selector)
	   supplies those — including the Cover/Contain choice — so the admin's
	   pick is never fought by a hardcoded rule in this stylesheet. Height
	   across breakpoints is controlled entirely by the widget's own
	   responsive Height control (Style → Tree/Garden) — no fixed
	   aspect-ratio is imposed here, since forcing one onto a landscape
	   photo is what caused it to crop away most of the image on narrow
	   screens. */
}
.dt-el-garden-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.dt-el-sprout {
	position: absolute;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	cursor: default;
}
.dt-el-sprout:focus {
	outline: none;
}
.dt-el-sprout-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	line-height: 0;
	transition: transform 0.15s ease;
	flex-shrink: 0;
}
.dt-el-sprout-dot-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	font-size: 18px;
	color: inherit;
}
/* Font Awesome (<i>) and Elementor inline-SVG icons both need an explicit
   box — Elementor's .elementor-icon rules don't apply inside our markup, so
   without this SVGs render at 0×0 and look like "missing icons". */
.dt-el-sprout-dot-icon i,
.dt-el-sprout-dot-icon svg,
.dt-el-donor-icon i,
.dt-el-donor-icon svg,
.dt-el-status-icon i,
.dt-el-status-icon svg,
.dt-el-topdonor-icon i,
.dt-el-topdonor-icon svg,
.dt-el-impact-icon i,
.dt-el-impact-icon svg {
	display: block;
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
	fill: currentColor;
}
.dt-el-sprout-dot-text {
	/* Hidden on desktop/tablet — the icon alone fills the dot there, and
	   the full tag reads in .dt-el-sprout-label underneath instead. Shown
	   only at the mobile breakpoint below. */
	display: none;
}
.dt-el-sprout:hover .dt-el-sprout-dot,
.dt-el-sprout:focus .dt-el-sprout-dot {
	transform: scale(1.12);
}
.dt-el-sprout-label {
	display: var(--dt-labels-display, block);
	font-size: 11px;
	line-height: 1.3;
	background: #fff;
	padding: 2px 8px;
	border-radius: 20px;
	white-space: nowrap;
	max-width: 22vw;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dt-el-sprout-tooltip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: #222;
	color: #fff;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 6px;
	white-space: normal;
	max-width: 45vw;
	width: max-content;
	text-align: center;
	display: none;
	pointer-events: none;
	z-index: 5;
}
.dt-el-sprout:hover .dt-el-sprout-tooltip,
.dt-el-sprout:focus .dt-el-sprout-tooltip {
	display: block;
}

/* Small screens: shrink labels/tooltips so their text doesn't overflow the
   (now much narrower) canvas. Canvas height itself is intentionally left
   alone here — that's the widget's own responsive Height control's job. */
/* Three garden canvases render (one per device). Base/default state only —
   which one is actually shown at which width is decided by @media queries
   generated in PHP at runtime (see DT_Elementor::responsive_css()), NOT
   hardcoded here. That matters because Elementor's Tablet/Mobile breakpoint
   widths are configurable per-site (Elementor → Settings → Layout →
   Breakpoints, plus the optional "Additional Breakpoints" experiment) — a
   fixed 1024/767 here would silently stop matching the widget's own
   responsive Height control (which DOES follow the site's real breakpoints)
   the moment someone customizes them, showing the wrong device's canvas
   (and therefore the wrong saved marker positions) at a given width. If for
   any reason the dynamic CSS fails to load, these defaults keep the desktop
   canvas visible rather than showing nothing. */
.dt-el-garden-canvas--desktop {
	display: block;
}
.dt-el-garden-canvas--tablet,
.dt-el-garden-canvas--mobile {
	display: none;
}

/* Small screens: switch each marker to one compact circle — icon on top,
   sprout number inside it — instead of an icon circle plus a separate
   label pill stacked underneath, which is what was making markers run into
   each other when many sprouts share a narrow canvas. Combined with fewer
   auto-layout columns on mobile (see DT_Elementor_Data::auto_grid()), this
   gives each marker both less width and less height to occupy. The actual
   @media breakpoint for this lives in the dynamic CSS too (same reason as
   above) — see .dt-el-sprout-label / .dt-el-sprout-dot rules generated by
   DT_Elementor::responsive_css(). */

/* Donation Progress */
.dt-el-progress-head,
.dt-el-progress-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5em;
}
.dt-el-progress-head {
	margin-bottom: 0.5em;
}
.dt-el-progress-foot {
	margin-top: 0.5em;
}
.dt-el-progress-barwrap {
	position: relative;
	width: 100%;
	height: 14px;
	background: #e6e6e6;
	border-radius: 20px;
	overflow: hidden;
}
.dt-el-progress-bar {
	display: block;
	height: 100%;
	background: #4a8b52;
	border-radius: 20px;
}

/* This Month's Donors */
.dt-el-donors-heading {
	font-weight: 600;
	font-size: 1.1em;
}
.dt-el-donors {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.dt-el-donors--list {
	display: flex;
	flex-direction: column;
}
.dt-el-donor-item {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0.5em 0.75em;
	border-radius: 20px;
	background: #f3f3f3;
}
.dt-el-donor-icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	font-size: 1em;
	color: inherit;
}

/* Donation Journey */
.dt-el-journey-heading {
	font-weight: 600;
	font-size: 1.1em;
}
.dt-el-journey--card {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.dt-el-journey--list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.dt-el-journey--timeline {
	display: flex;
	flex-direction: column;
	gap: 16px;
	border-left: 3px solid #dfe3df;
	padding-left: 20px;
}
.dt-el-journey--timeline .dt-el-journey-item {
	position: relative;
}
.dt-el-journey-dot {
	position: absolute;
	left: -26px;
	top: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #4a8b52;
	border: 2px solid #fff;
}
.dt-el-journey-item {
	background: #fff;
	border-radius: 10px;
	padding: 16px;
}
.dt-el-journey-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	margin-bottom: 0.5em;
}
.dt-el-journey-badge {
	font-size: 0.7em;
	padding: 2px 10px;
	border-radius: 20px;
	background: #4a8b52;
	color: #fff;
	white-space: nowrap;
}
.dt-el-journey-stat,
.dt-el-journey-impact {
	font-size: 0.9em;
	margin-top: 0.35em;
}

/* Donation Month */
.dt-el-month {
	font-size: 1.15em;
	font-weight: 600;
}

/* Garden Status */
.dt-el-status-heading {
	font-weight: 600;
	font-size: 1.1em;
	text-align: center;
}
.dt-el-status {
	display: flex;
	align-items: center;
	gap: 0.5em;
}
.dt-el-status-icon {
	display: inline-flex;
	line-height: 0;
	font-size: 1.25em;
	color: inherit;
}

/* Top Donors */
.dt-el-topdonors-heading {
	font-weight: 600;
	font-size: 1.1em;
}
.dt-el-topdonors {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.dt-el-topdonor-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0.5em 0.75em;
	border-radius: 8px;
	background: #f3f3f3;
}
.dt-el-topdonor-icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	font-size: 1.1em;
	color: inherit;
}
.dt-el-topdonor-rank {
	font-weight: 700;
	opacity: 0.6;
	min-width: 1.6em;
}
.dt-el-topdonor-tag {
	flex: 1;
	font-weight: 600;
}
.dt-el-topdonor-count {
	font-size: 0.85em;
	opacity: 0.8;
}

/* Donation Impact */
.dt-el-impact-row {
	margin-bottom: 0.75em;
}
.dt-el-impact-row:last-child {
	margin-bottom: 0;
}
.dt-el-impact-heading-row {
	display: flex;
	align-items: center;
	margin-bottom: 0.25em;
}
.dt-el-impact-icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	margin-right: 8px;
	font-size: 1.1em;
	color: inherit;
}
.dt-el-impact-heading {
	font-weight: 600;
}
.dt-el-impact-value,
.dt-el-impact-description {
	line-height: 1.45;
}
.dt-el-impact-list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.dt-el-impact-list-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.dt-el-impact-foundation {
	font-weight: 600;
}

.dt-el-donate {
	display: block;
}
.dt-el-donate-heading {
	margin-bottom: 8px;
}
.dt-el-donate-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	background: #4a8b52;
	color: #fff;
	text-decoration: none;
	border-radius: 12px;
	font-weight: 600;
	line-height: 1.2;
	border: 0 solid transparent;
	box-sizing: border-box;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.dt-el-donate-btn:hover,
.dt-el-donate-btn:focus {
	color: #fff;
}
.dt-el-donate-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	color: inherit;
}
.dt-el-donate-icon i,
.dt-el-donate-icon svg {
	color: inherit;
	fill: currentColor;
	width: 1em;
	height: 1em;
}
.dt-el-donate-icon svg path {
	fill: currentColor;
}
.dt-el-donate-btn.dt-icon-right {
	flex-direction: row;
}

.dt-living-garden {
	position: relative;
	width: 100%;
	min-height: 360px;
	height: 560px;
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	border-radius: 24px;
	overflow: hidden;
}
.dt-living-plant {
	position: absolute;
	transform: translate(-50%, -85%);
	width: clamp(48px, 7vw, 88px);
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.dt-living-plant img {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 6px 8px rgba(0,0,0,.25));
	mix-blend-mode: multiply;
}
.dt-living-label {
	display: block;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0,0,0,.7);
	margin-top: -4px;
}
.dt-living-tip {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	background: rgba(20,16,12,.86);
	color: #fff;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 13px;
	white-space: nowrap;
	max-width: 92%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dt-leaders-list { list-style: none; margin: 0; padding: 0; }
.dt-leaders-list li {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid rgba(0,0,0,.08);
}
.dt-leaders-badge { font-weight: 600; }
@media (max-width: 782px) {
	.dt-living-garden { height: 420px; min-height: 320px; }
	.dt-living-plant { width: clamp(40px, 11vw, 64px); }
}
@media (max-width: 480px) {
	.dt-living-garden { height: 340px; }
	.dt-living-plant { width: clamp(34px, 14vw, 52px); }
}