/**
 * GDC Trust Signal Components
 *
 * BEM styles for the reusable trust signal components rendered by
 * includes/trust/trust-signal-components.php. Verification badges
 * (Tier 2 + Pro), insurance, all-inclusive, payment security, Founding
 * Guest, the guarantee callout block, and the review summary widget.
 *
 * Mobile-first: base rules target small viewports; min-width breakpoints
 * scale up for tablet and desktop. Tokens come from tokens.css — no
 * hardcoded colors. The badge bg/fg colors are supplied per-instance via
 * --gdc-badge-bg / --gdc-badge-fg inline style props emitted by
 * gdc_trust_signal_style().
 *
 * @package GDC
 * @since   1.0.0
 * @see     S4 §2 Identity Verification, S4 §3 Guarantee, S4 §4 Insurance,
 *          S4 §6 Reviews
 */

/* ==========================================================
   BADGE BASE
   ========================================================== */

.gdc-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--gdc-space-xs, 4px);
	padding: 4px 10px;
	border-radius: var(--gdc-radius-full, 9999px);
	font-family: var(--gdc-font-sans);
	font-size: var(--gdc-text-xs, 0.75rem);
	font-weight: var(--gdc-font-semibold, 600);
	line-height: var(--gdc-leading-snug, 1.2);
	letter-spacing: 0.01em;
	white-space: nowrap;
	background: var(--gdc-badge-bg, var(--gdc-bg-surface));
	color: var(--gdc-badge-fg, var(--gdc-text-primary));
	border: 1px solid var(--gdc-border-light);
}

@media (min-width: 768px) {
	.gdc-badge {
		font-size: var(--gdc-text-sm, 0.875rem);
		padding: 6px 12px;
	}
}

.gdc-badge--size-small {
	font-size: var(--gdc-text-xs, 0.75rem);
	padding: 2px 8px;
}

.gdc-badge--size-large {
	font-size: var(--gdc-text-sm, 0.875rem);
	padding: 8px 14px;
}

@media (min-width: 768px) {
	.gdc-badge--size-large {
		font-size: var(--gdc-text-base, 1rem);
		padding: 10px 16px;
	}
}

/* ==========================================================
   VERIFICATION TIER BADGES
   ========================================================== */

.gdc-badge--tier-1 {
	box-shadow: var(--gdc-shadow-sm);
}

.gdc-badge--tier-2 {
	box-shadow: var(--gdc-shadow-sm);
}

.gdc-badge--tier-3 {
	font-weight: var(--gdc-font-bold, 700);
	box-shadow: var(--gdc-shadow-md);
}

/* ==========================================================
   PRO BADGE (Tier 3 gold gradient)
   ========================================================== */

.gdc-badge--pro {
	background: linear-gradient(
		135deg,
		var(--gdc-badge-bg, var(--gdc-warning)) 0%,
		var(--gdc-warning) 100%
	);
	color: var(--gdc-badge-fg, var(--gdc-void));
	font-weight: var(--gdc-font-bold, 700);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	box-shadow: var(--gdc-shadow-glow-purple);
	border-color: transparent;
}

/* ==========================================================
   INSURANCE BADGE (DiveAssure)
   ========================================================== */

.gdc-badge--insurance {
	border-color: transparent;
	box-shadow: var(--gdc-shadow-sm);
}

/* ==========================================================
   ALL-INCLUSIVE BADGE
   ========================================================== */

.gdc-badge--all-inclusive {
	border-color: transparent;
	box-shadow: var(--gdc-shadow-sm);
}

/* ==========================================================
   PAYMENT SECURITY INDICATOR
   ========================================================== */

.gdc-badge--payment-security {
	border-color: var(--gdc-border-medium);
}

/* ==========================================================
   FOUNDING GUEST BADGE
   (note: .gdc-badge--founding lives in zone-9-trust.css; this is the
    distinct review-context variant emitted by gdc_founding_guest_badge().)
   ========================================================== */

.gdc-badge--founding-guest {
	font-weight: var(--gdc-font-bold, 700);
	letter-spacing: 0.02em;
	border-color: transparent;
	box-shadow: var(--gdc-shadow-sm);
}

/* ==========================================================
   GUARANTEE CALLOUT BLOCK
   ========================================================== */

.gdc-guarantee-callout {
	display: flex;
	flex-direction: column;
	gap: var(--gdc-space-2, 16px);
	padding: var(--gdc-space-3, 24px);
	border-radius: var(--gdc-radius-lg, 12px);
	background: var(--gdc-bg-surface);
	border: 1px solid var(--gdc-border-medium);
	color: var(--gdc-text-primary);
}

@media (min-width: 768px) {
	.gdc-guarantee-callout {
		padding: var(--gdc-space-4, 32px);
		gap: var(--gdc-space-3, 24px);
	}
}

.gdc-guarantee-callout__title {
	margin: 0;
	font-family: var(--gdc-font-heading);
	font-size: var(--gdc-text-2xl, 1.5rem);
	font-weight: var(--gdc-font-semibold, 600);
	line-height: var(--gdc-leading-tight, 1.05);
	color: var(--gdc-text-primary);
}

@media (min-width: 768px) {
	.gdc-guarantee-callout__title {
		font-size: var(--gdc-text-3xl, 1.75rem);
	}
}

.gdc-guarantee-callout__promises {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gdc-space-1, 8px);
}

.gdc-guarantee-callout__promise {
	position: relative;
	padding-left: var(--gdc-space-3, 24px);
	font-size: var(--gdc-text-sm, 0.875rem);
	line-height: var(--gdc-leading-relaxed, 1.7);
	color: var(--gdc-text-secondary);
}

@media (min-width: 768px) {
	.gdc-guarantee-callout__promise {
		font-size: var(--gdc-text-base, 1rem);
	}
}

.gdc-guarantee-callout__promise::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: var(--gdc-radius-full, 9999px);
	background: var(--gdc-accent-secondary);
}

.gdc-guarantee-callout__window {
	margin: 0;
	font-size: var(--gdc-text-sm, 0.875rem);
	color: var(--gdc-text-secondary);
}

.gdc-guarantee-callout__footer {
	margin: 0;
	padding-top: var(--gdc-space-2, 16px);
	border-top: 1px solid var(--gdc-border-light);
	font-size: var(--gdc-text-xs, 0.75rem);
	font-weight: var(--gdc-font-medium, 500);
	color: var(--gdc-text-muted);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* ==========================================================
   REVIEW SUMMARY WIDGET
   ========================================================== */

.gdc-review-summary {
	display: flex;
	flex-direction: column;
	gap: var(--gdc-space-3, 24px);
	padding: var(--gdc-space-3, 24px);
	border-radius: var(--gdc-radius-lg, 12px);
	background: var(--gdc-bg-surface);
	border: 1px solid var(--gdc-border-light);
	color: var(--gdc-text-primary);
}

@media (min-width: 768px) {
	.gdc-review-summary {
		padding: var(--gdc-space-4, 32px);
	}
}

.gdc-review-summary__aggregate {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--gdc-space-2, 16px);
}

.gdc-review-summary__score {
	font-family: var(--gdc-font-heading);
	font-size: var(--gdc-text-5xl, 2.5rem);
	font-weight: var(--gdc-font-semibold, 600);
	line-height: var(--gdc-leading-none, 1);
	color: var(--gdc-text-primary);
}

@media (min-width: 768px) {
	.gdc-review-summary__score {
		font-size: var(--gdc-text-6xl, 3rem);
	}
}

.gdc-review-summary__count {
	font-size: var(--gdc-text-sm, 0.875rem);
	color: var(--gdc-text-muted);
}

.gdc-review-summary__early {
	margin: 0;
	font-size: var(--gdc-text-sm, 0.875rem);
	font-style: italic;
	color: var(--gdc-text-secondary);
}

.gdc-review-summary__dimensions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gdc-space-2, 16px);
}

.gdc-review-summary__dimension {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"label score"
		"track track";
	column-gap: var(--gdc-space-2, 16px);
	row-gap: var(--gdc-space-xs, 4px);
	align-items: center;
}

@media (min-width: 640px) {
	.gdc-review-summary__dimension {
		grid-template-columns: 120px minmax(0, 1fr) auto;
		grid-template-areas: "label track score";
		column-gap: var(--gdc-space-3, 24px);
	}
}

.gdc-review-summary__dimension-label {
	grid-area: label;
	font-size: var(--gdc-text-sm, 0.875rem);
	font-weight: var(--gdc-font-medium, 500);
	color: var(--gdc-text-secondary);
}

.gdc-review-summary__dimension-track {
	grid-area: track;
	display: block;
	position: relative;
	height: 6px;
	border-radius: var(--gdc-radius-full, 9999px);
	background: var(--gdc-border-light);
	overflow: hidden;
}

.gdc-review-summary__dimension-bar {
	display: block;
	height: 100%;
	border-radius: var(--gdc-radius-full, 9999px);
	background: var(--gdc-accent-primary);
}

.gdc-review-summary__dimension-score {
	grid-area: score;
	font-variant-numeric: tabular-nums;
	font-size: var(--gdc-text-sm, 0.875rem);
	font-weight: var(--gdc-font-semibold, 600);
	color: var(--gdc-text-primary);
	justify-self: end;
}

/* ==========================================================
   REVIEW CARD — extensions used by gdc_review_card_template()
   (Base .gdc-review-card and its __header/__name/__date/__rating/__body/
    __verified rules live in zone-9-trust.css. Only the pieces the
    component renders that are NOT already styled there are added below.)
   ========================================================== */

.gdc-review-card__dimensions {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gdc-space-xs, 4px);
}

@media (min-width: 640px) {
	.gdc-review-card__dimensions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gdc-space-1, 8px) var(--gdc-space-3, 24px);
	}
}

.gdc-review-card__dimension {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--gdc-space-2, 16px);
	font-size: var(--gdc-text-xs, 0.75rem);
	color: var(--gdc-text-secondary);
}

.gdc-review-card__dimension-label {
	color: var(--gdc-text-secondary);
}

.gdc-review-card__dimension-score {
	font-variant-numeric: tabular-nums;
	font-weight: var(--gdc-font-semibold, 600);
	color: var(--gdc-text-primary);
}

.gdc-review-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gdc-space-2, 16px);
	flex-wrap: wrap;
	padding-top: var(--gdc-space-2, 16px);
	border-top: 1px solid var(--gdc-border-light);
	font-size: var(--gdc-text-xs, 0.75rem);
	color: var(--gdc-text-muted);
}