/* ==========================================================================
   Google Tools theme overrides (g-tools.lolarchiver.com)
   Loaded LAST so it retints the shared TikTok-derived styles toward the
   Google palette (blue / red / yellow / green). Layout is intentionally
   identical to the other keyword tools; only the accent colors change.
   ========================================================================== */

:root {
	--g-blue: #4285F4;
	--g-red: #EA4335;
	--g-yellow: #FBBC05;
	--g-green: #34A853;
	--g-blue-dark: #1a73e8;
	--g-grad: linear-gradient(95deg, #4285F4 0%, #34A853 35%, #FBBC05 68%, #EA4335 100%);
	--g-grad-soft: linear-gradient(95deg, rgba(66,133,244,.12) 0%, rgba(52,168,83,.12) 50%, rgba(234,67,53,.12) 100%);
}

/* ---- Hero ---- */
.tt-hero-highlight {
	background: linear-gradient(90deg, #4285F4 0%, #34A853 50%, #EA4335 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.tt-hero-title {
	background: linear-gradient(90deg, #4285F4 0%, #EA4335 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #1a73e8; /* fallback */
}

/* ---- Stats banner ---- */
.tt-stat {
	border-color: rgba(66, 133, 244, 0.18);
	box-shadow: 0 10px 24px rgba(26, 115, 232, 0.08);
}
.tt-beacon {
	background: linear-gradient(135deg, #4285F4 0%, #34A853 100%);
	box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.45);
}

/* ---- Primary / search button (solid Google blue, not multicolor) ---- */
.btn-primary,
#ksSearchBtn.btn-primary {
	background-image: none !important;
	background-color: #1a73e8 !important;
	border: none;
	color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
#ksSearchBtn.btn-primary:hover,
#ksSearchBtn.btn-primary:focus {
	background-image: none !important;
	background-color: #1669d6 !important;
	box-shadow: 0 6px 18px rgba(26, 115, 232, 0.38);
	color: #fff;
}
.btn-primary:disabled { filter: grayscale(0.25) brightness(0.98); }

/* ---- Hero title: "digital footprint" sweep effect (osint), blue tones ----
   Black text, then a blue gradient bar sweeps left->right while the text is
   revealed in white in sync. Plays once and keeps the end state. */
.tt-hero .digital-footprint {
	position: relative;
	display: inline-block;
	font-style: normal;
	padding: 4px 10px;
	border-radius: 4px;
	color: #202124;          /* start near-black */
	background: none;         /* gradient comes from ::before */
	isolation: isolate;
	overflow: hidden;
}
.tt-hero .digital-footprint::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(166deg, #1c2f59, #5e728d);
	box-shadow: 0 4.5px 14px -3px rgba(0, 0, 0, 0.3);
	border-radius: 4px;
	transform-origin: left;
	transform: scaleX(0);
	animation: df-sweep 1.6s ease-in-out both;
	will-change: transform;
	z-index: 0;
}
.tt-hero .digital-footprint::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	padding: 4px 10px;
	color: #fff;
	clip-path: inset(0 100% 0 0);
	animation: df-reveal 1.6s ease-in-out both;
	will-change: clip-path;
	z-index: 1;
}
@keyframes df-sweep { to { transform: scaleX(1); } }
@keyframes df-reveal { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
	.tt-hero .digital-footprint::before { transform: scaleX(1); animation: none; }
	.tt-hero .digital-footprint::after  { clip-path: inset(0 0 0 0); animation: none; }
}

/* "How to search" outline button */
.btn-outline-primary,
.ks-help-btn {
	color: #1a73e8;
	border-color: rgba(26, 115, 232, 0.55);
}
.btn-outline-primary:hover,
.ks-help-btn:hover {
	background-color: #1a73e8;
	border-color: #1a73e8;
	color: #fff;
}

/* ---- Result tabs: animated Google-gradient OUTLINE (no filled background) ----
   The active pill keeps a clean white interior; only its border becomes the
   Google gradient, slowly flowing through blue -> green -> yellow -> red. */
.ks-tabs .nav-link {
	color: rgba(15, 23, 42, 0.70);
	border: 2px solid rgba(15, 23, 42, 0.12);
	transition: color .15s ease, box-shadow .15s ease;
}
.ks-tabs .nav-link.active {
	color: #202124 !important;
	font-weight: 700;
	border: 2px solid transparent !important;
	background-image:
		linear-gradient(#ffffff, #ffffff),
		linear-gradient(90deg, #4285F4, #34A853, #FBBC05, #EA4335, #4285F4);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	-webkit-background-clip: padding-box, border-box;
	background-repeat: no-repeat;
	background-size: 100% 100%, 220% 100%;
	box-shadow: 0 4px 14px rgba(26, 115, 232, 0.16);
	animation: gTabFlow 24s ease-in-out infinite alternate;
}
.ks-tabs .nav-link.active .badge {
	background-color: rgba(15, 23, 42, 0.10) !important;
	color: rgba(15, 23, 42, 0.80) !important;
}
@keyframes gTabFlow {
	from { background-position: 0 0, 0% 0; }
	to   { background-position: 0 0, 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.ks-tabs .nav-link.active { animation: none; }
}
.ks-tabs .nav-link:focus,
.ks-tabs .nav-link:focus-visible,
.ks-tabs .nav-link:active,
.ks-tabs .nav-link.active:focus,
.ks-tabs .nav-link.active:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}
.ks-tabs .nav-link.active:focus,
.ks-tabs .nav-link.active:focus-visible,
.ks-tabs .nav-link.active:active {
	box-shadow: 0 4px 14px rgba(26, 115, 232, 0.16) !important;
}

/* ---- Search-term highlight in results ---- */
.ks-mark {
	background: rgba(66, 133, 244, 0.22);
	color: inherit;
	border-radius: 3px;
	padding: 0 1px;
}

/* ---- Filter accents ---- */
.ks-filter-title { color: #1a73e8; }

/* Active sidebar link for Google -- blue tones (override the shared red) */
#sidebar-menu .gray-link.active,
.btn-toggle-nav .active { color: #1a73e8 !important; }
/* shared sidebars.css uses a red underline + pink hover; retint to Google blue */
.gray-link.active {
	border-bottom: 1px solid #1a73e8 !important;
	color: #1a73e8 !important;
}
.gray-link:hover, .gray-link:focus,
.btn-toggle-nav a:hover, .btn-toggle-nav a:focus {
	background-color: #e8f0fe !important;
	color: #1a73e8 !important;
}

/* ---- Totals ---- */
.tt-metric-value { color: #1a73e8; }

/* ---- Clickable Google card link icon ---- */
.google-link-icon { transition: filter 0.2s ease-in-out; }
.google-link-icon:hover { filter: opacity(0.7); }

/* ---- Review rating stars ---- */
.g-ks-stat-rating .tt-ks-stat-value {
	color: #f9ab00;
	letter-spacing: 1px;
	font-size: 14px;
}

/* ---- Owner reply callout (under a review body) ---- */
.g-owner-reply {
	margin-top: 10px;
	padding: 8px 12px;
	background: #f1f8f4;
	border: 1px solid #cdeBd6;
	border-left: 3px solid #34A853;
	border-radius: 10px;
	color: #14261b;
	font-size: 13px;
	line-height: 1.45;
}
.g-owner-reply-label {
	font-weight: 700;
	color: #1e8e3e;
	margin-right: 4px;
}

/* ---- Place address line ---- */
.g-place-addr {
	margin-top: 4px;
	color: #5f6368;
	font-size: 13px;
}

/* ---- Profile contributor stat chips ---- */
.g-ks-stat-reviews .tt-ks-stat-value,
.g-ks-stat-ratings .tt-ks-stat-value,
.g-ks-stat-photos .tt-ks-stat-value,
.g-ks-stat-points .tt-ks-stat-value { color: #1a73e8; }

/* ---- Credits strip: Google gradient outline + neutral chips ---- */
.credits-strip { --cs-accent: 214 82% 51%; }

.credits-strip .cs-icon {
	box-sizing: border-box;
	border: 2px solid transparent;
	outline: none;
	border-radius: 7px;
	background:
		linear-gradient(#2b2740, #2b2740) padding-box,
		linear-gradient(120deg, #4285F4, #34A853, #FBBC05, #EA4335) border-box;
}
.credits-strip .cs-icon svg path { fill: #ffffff !important; }
.credits-strip .cs-icon svg circle { fill: rgba(255,255,255,0.20) !important; stroke: #ffffff !important; }

.credits-strip .cs-badge {
	background: #333 !important;
	border: 1px solid rgb(233 233 233 / 18%) !important;
	color: white !important;
}
.credits-strip .cs-bar {
	background: linear-gradient(90deg, #4285F4, #34A853, #FBBC05) !important;
}