/**
 * Devgraphix Elementor Addons — "Trustpilot Rating" widget.
 *
 * Ported from the project's trustpilot-widgets.css design source. A manual
 * Trustpilot-style trust badge in three layouts: a landscape summary card
 * (280x220), a portrait summary card (240x260) and a slim micro bar.
 *
 * The first block below (".dgx-tp" base, stars, logo, card) is the SHARED
 * Trustpilot core — kept byte-identical with trustpilot-reviews.css so either
 * widget renders correctly on its own (per-widget CSS is self-contained, the
 * plugin's convention). Stars are coloured tiles with a white glyph, filled
 * left-to-right by the rating via a hard-stop gradient (half stars render
 * exactly). Resolved star colour is set inline (--dgx-tp-auto-color); an
 * optional Style override (--dgx-tp-user-star-color) wins via the var() chain.
 * Brand green #219653, empty track #d9d9d9. Roboto is a fallback only — never
 * enqueued (typography comes from Elementor controls).
 */

/* ======================================================================== */
/* SHARED TRUSTPILOT CORE (identical in trustpilot-reviews.css)             */
/* ======================================================================== */
.dgx-tp {
	box-sizing: border-box;
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	color: #000;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.dgx-tp *,
.dgx-tp *::before,
.dgx-tp *::after {
	box-sizing: border-box;
}

a.dgx-tp,
a.dgx-tp:hover,
a.dgx-tp:focus {
	text-decoration: none;
	color: inherit;
}

/* ---- Stars ---- */
.dgx-tp-stars {
	--dgx-tp-star-size: 20px;
	--dgx-tp-star-gap: 2px;
	--dgx-tp-star-color: var(--dgx-tp-user-star-color, var(--dgx-tp-auto-color, #219653));
	--dgx-tp-star-empty: var(--dgx-tp-user-star-empty, #d9d9d9);
	display: inline-flex;
	gap: var(--dgx-tp-star-gap);
	vertical-align: middle;
}

.dgx-tp-stars--lg {
	--dgx-tp-star-size: 40px;
	--dgx-tp-star-gap: 8px;
}

.dgx-tp-star {
	width: var(--dgx-tp-star-size);
	height: var(--dgx-tp-star-size);
	/* Pad relative to the tile, NOT a % (which resolves against the row width
	   and balloons the tile once there are several stars). */
	padding: calc(var(--dgx-tp-star-size, 20px) * 0.15);
	flex: 0 0 auto;
	min-width: 0;
	background-image: linear-gradient(
		to right,
		var(--dgx-tp-star-color) var(--dgx-tp-fill, 0%),
		var(--dgx-tp-star-empty) var(--dgx-tp-fill, 0%)
	);
}

.dgx-tp-star__svg {
	display: block;
	width: 100%;
	height: 100%;
}

.dgx-tp-star__svg path {
	fill: #ffffff;
}

/* ---- Logo ---- */
.dgx-tp-logo {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--dgx-tp-logo-size, 16px);
	font-weight: 700;
	color: #000;
	white-space: nowrap;
	line-height: 1;
}

.dgx-tp-logo__star {
	height: 1.5em;
	width: 1.563em;
	fill: #219653;
	flex: 0 0 auto;
}

.dgx-tp-logo__name {
	font-weight: inherit;
	color: #000;
}

.dgx-tp-logo--sm {
	--dgx-tp-logo-size: 12px;
	font-weight: 700;
}

.dgx-tp-logo--sm .dgx-tp-logo__star {
	height: 1.08em;
	width: 1.166em;
}

.dgx-tp-logo--md {
	--dgx-tp-logo-size: 16px;
	font-weight: 500;
}

.dgx-tp-logo--lg {
	--dgx-tp-logo-size: 20px;
	font-weight: 700;
}

/* ---- Card ---- */
.dgx-tp-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 100%;
	background: #fff;
	box-shadow:
		0 2px 4px rgba(7, 4, 146, 0.1),
		0 24px 60px rgba(6, 47, 125, 0.05),
		0 12px 24px rgba(27, 59, 119, 0.05);
	padding: 20px;
}

.dgx-tp-card--summary {
	align-items: center;
	text-align: center;
	justify-content: center;
}

.dgx-tp-card--landscape {
	width: 280px;
	min-height: 220px;
	justify-content: center;
}

.dgx-tp-card--portrait {
	width: 240px;
	min-height: 260px;
	justify-content: center;
}

.dgx-tp-card__title {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 26px;
}

.dgx-tp-card__based {
	margin: 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 22px;
}

.dgx-tp-card__based b {
	font-weight: 700;
}

/* ======================================================================== */
/* RATING WIDGET SPECIFICS                                                  */
/* ======================================================================== */

/* Position the whole badge inside the widget box (Alignment control sets
   --dgx-tp-align on {{WRAPPER}}, which inherits to the container and badge). */
.elementor-widget-dgx-trustpilot-rating .elementor-widget-container {
	display: flex;
	justify-content: var(--dgx-tp-align, center);
}

/* Let the Alignment control drive the summary card's cross-axis alignment. */
.elementor-widget-dgx-trustpilot-rating .dgx-tp-card--summary {
	align-items: var(--dgx-tp-align, center);
}

/* Per-layout gap (the Gap control overrides --dgx-tp-gap). */
.dgx-tp-card {
	gap: var(--dgx-tp-gap, 8px);
}

/* Rating word / count are style hooks; card sizes come from the core above. */
.dgx-tp-rating__count {
	color: #000;
}

/* ---- Micro bar ---- */
.dgx-tp-micro {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: var(--dgx-tp-align, center);
	gap: var(--dgx-tp-gap, 13px);
	font-size: 12px;
	line-height: 26px;
	white-space: nowrap;
}

.dgx-tp-micro .dgx-tp-rating__label {
	font-size: 12px;
	font-weight: 700;
}

.dgx-tp-micro .dgx-tp-rating__count {
	font-size: 12px;
	font-weight: 400;
	line-height: 26px;
}