/* ===========================================================================
 * OGACE graph-layer UI — merged from OGACE v110007 into OGA Tourism Core.
 *
 * The OGACE PHP modules (inc/ogace-*.php) render markup with ogace-* classes
 * but shipped without stylesheets (their old functions.php enqueued a dozen
 * CSS/JS files that were never in the package). This single file styles those
 * classes using the base theme's design tokens (assets/css/tokens.css) so the
 * G-layer badges, 5-Pillars showcase, membership tiers, AI widget and
 * connectors panel look like part of the theme instead of unstyled blocks.
 *
 * G-layer accent colours come from the modules themselves (teal / gold /
 * purple / violet / green); everything structural uses --oga-* tokens.
 * =========================================================================== */

:root {
	--ogace-g0: #5ec3c0; /* Geo-Spatial       */
	--ogace-g1: #c9a227; /* Human Contribution */
	--ogace-g2: #a855f7; /* AI Cognitive       */
	--ogace-g3: #9333ea; /* Economic           */
	--ogace-g4: #76b900; /* Autonomous         */
}

/* ── Shared card + button primitives ─────────────────────────────────── */
.ogace-g-card {
	background: var(--oga-bg);
	border: 1px solid var(--oga-border);
	border-radius: var(--oga-radius-lg);
	padding: var(--oga-space-md);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.ogace-g-card h3 { margin-top: 0; }

.ogace-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 18px;
	border: 1px solid var(--oga-blue);
	border-radius: var(--oga-radius);
	background: var(--oga-blue);
	color: #fff;
	font: inherit;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: filter .15s ease;
}
.ogace-btn:hover { filter: brightness(1.08); text-decoration: none; }
.ogace-btn-secondary { background: transparent; color: var(--oga-blue); }
.ogace-btn-sm { padding: 6px 12px; font-size: 13px; }

/* ── G-layer badges + navigation ─────────────────────────────────────── */
.ogace-g-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--oga-bg-soft);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
}
.ogace-g-badge-g0 { border-left: 4px solid var(--ogace-g0); }
.ogace-g-badge-g1 { border-left: 4px solid var(--ogace-g1); }
.ogace-g-badge-g2 { border-left: 4px solid var(--ogace-g2); }
.ogace-g-badge-g3 { border-left: 4px solid var(--ogace-g3); }
.ogace-g-badge-g4 { border-left: 4px solid var(--ogace-g4); }

.ogace-g-card-g0 { border-top: 4px solid var(--ogace-g0); }
.ogace-g-card-g1 { border-top: 4px solid var(--ogace-g1); }
.ogace-g-card-g2 { border-top: 4px solid var(--ogace-g2); }
.ogace-g-card-g3 { border-top: 4px solid var(--ogace-g3); }
.ogace-g-card-g4 { border-top: 4px solid var(--ogace-g4); }

.ogace-g-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oga-space-xs);
	margin: var(--oga-space-md) 0;
}
.ogace-g-nav-item {
	padding: 6px 14px;
	border: 1px solid var(--oga-border);
	border-radius: 999px;
	background: var(--oga-bg);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}
.ogace-g-nav-item.active { background: var(--oga-blue); color: #fff; border-color: var(--oga-blue); }

/* ── 5 Pillars showcase (front page, wp_footer) ──────────────────────── */
.ogace-pillars-section {
	max-width: 1120px;
	margin: var(--oga-space-xl) auto;
	padding: 0 var(--oga-space-md);
	text-align: center;
}
.ogace-pillars-section h2 { margin-bottom: var(--oga-space-lg); }
.ogace-pillars-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--oga-space-md);
}
.ogace-pillar-card {
	background: var(--oga-bg);
	border: 1px solid var(--oga-border);
	border-top: 4px solid var(--oga-blue); /* overridden inline per-pillar */
	border-radius: var(--oga-radius-lg);
	padding: var(--oga-space-md);
}
.ogace-pillar-icon { font-size: 34px; line-height: 1; margin-bottom: var(--oga-space-xs); }
.ogace-pillar-card h3 { margin: var(--oga-space-xs) 0; }
.ogace-pillar-card p { color: var(--oga-ink-muted); margin: 0; font-size: 14px; }
.ogace-pillar-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}

/* ── G3 membership tiers ─────────────────────────────────────────────── */
.ogace-tier-selector { margin: var(--oga-space-lg) 0; }
.ogace-tier-title { text-align: center; }
.ogace-tier-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--oga-space-md);
	margin-top: var(--oga-space-md);
}
.ogace-tier-card {
	border: 1px solid var(--oga-border);
	border-radius: var(--oga-radius-lg);
	padding: var(--oga-space-md);
	text-align: center;
	background: var(--oga-bg);
}
.ogace-tier-card h4 { margin: 0 0 var(--oga-space-xs); }
.ogace-tier-price { font-size: 22px; font-weight: 700; color: var(--oga-blue); }
.ogace-tier-commission { color: var(--ogace-g3); font-weight: 600; margin: 4px 0 var(--oga-space-sm); }
.ogace-tier-features { list-style: none; margin: 0 0 var(--oga-space-sm); padding: 0; text-align: left; }
.ogace-tier-features li { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: 14px; }
.ogace-checkmark { color: var(--ogace-g4); font-weight: 700; }

/* ── Tour card (G3 monetization renderer) ────────────────────────────── */
.ogace-tour-card { overflow: hidden; padding: 0; }
.ogace-tour-image { position: relative; }
.ogace-tour-image img { display: block; width: 100%; height: auto; }
.ogace-tour-image .ogace-g-badge { position: absolute; top: 10px; left: 10px; background: rgba(255, 255, 255, .92); }
.ogace-tour-content { padding: var(--oga-space-md); }
.ogace-tour-title { margin: 0 0 var(--oga-space-xs); }
.ogace-tour-meta { color: var(--oga-ink-muted); font-size: 14px; display: flex; gap: 8px; align-items: center; }
.ogace-tour-rating { display: flex; align-items: center; gap: 6px; margin: var(--oga-space-xs) 0; }
.ogace-tour-price { display: flex; flex-direction: column; margin: var(--oga-space-sm) 0; }
.ogace-price-label { font-size: 12px; color: var(--oga-ink-muted); }
.ogace-price-value { font-size: 20px; font-weight: 700; color: var(--oga-blue); }
.ogace-tour-actions { display: flex; gap: var(--oga-space-xs); }
.ogace-star { color: var(--oga-border); font-size: 16px; }
.ogace-star.filled { color: var(--ogace-g1); }

/* AI dynamic-pricing indicator appended to WooCommerce prices */
.ogace-dynamic-price { font-size: 12px; font-weight: 600; margin-left: 4px; }
.ogace-dynamic-price-up { color: var(--oga-red); }
.ogace-dynamic-price-down { color: var(--ogace-g4); }

/* ── G2 AI recommendations widget (single product, wp_footer) ────────── */
.ogace-ai-recommendations { margin: var(--oga-space-lg) auto; max-width: 1120px; }
.ogace-ai-header { display: flex; align-items: center; justify-content: space-between; gap: var(--oga-space-sm); }
.ogace-ai-header h3 { margin: 0; }
.ogace-ai-badge {
	font-size: 12px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(168, 85, 247, .12);
	color: var(--ogace-g2);
}
.ogace-ai-content { margin: var(--oga-space-sm) 0; color: var(--oga-ink-muted); }
.ogace-ai-loader {
	width: 22px; height: 22px;
	border: 3px solid var(--oga-border);
	border-top-color: var(--ogace-g2);
	border-radius: 50%;
	animation: ogace-spin .8s linear infinite;
}
@keyframes ogace-spin { to { transform: rotate(360deg); } }
.ogace-ai-actions { display: flex; gap: var(--oga-space-xs); }

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
	.ogace-ai-loader { animation: none; }
	.ogace-btn { transition: none; }
}