/* ==========================================================================
   Instagram Tools theme overrides (ig-tools.lolarchiver.com)
   Loaded LAST so it retints the shared TikTok-derived styles toward the
   Instagram pink -> magenta -> purple palette. Layout is intentionally
   identical to the TikTok tool; only the accent colors change.
   ========================================================================== */

:root {
	--ig-pink: #e1306c;
	--ig-magenta: #c13584;
	--ig-purple: #833ab4;
	--ig-red: #fd5949;
	--ig-orange: #f77737;
	--ig-grad: linear-gradient(95deg, #fd5949 0%, #e1306c 45%, #c13584 70%, #833ab4 100%);
	--ig-grad-soft: linear-gradient(95deg, rgba(253,89,73,.12) 0%, rgba(225,48,108,.14) 50%, rgba(131,58,180,.14) 100%);
}

/* ---- Hero ---- */
.tt-hero-highlight {
	background: linear-gradient(90deg, #e1306c 0%, #c13584 50%, #833ab4 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.tt-hero-title {
	background: linear-gradient(90deg, #e1306c 0%, #833ab4 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #962fbf; /* fallback */
}

/* ---- Stats banner ---- */
.tt-stat {
	border-color: rgba(225, 48, 108, 0.18);
	box-shadow: 0 10px 24px rgba(131, 58, 180, 0.08);
}
.tt-beacon {
	background: linear-gradient(135deg, #e1306c 0%, #833ab4 100%);
	box-shadow: 0 0 0 0 rgba(225, 48, 108, 0.45);
}

/* ---- Primary / search button ---- */
.btn-primary,
#ksSearchBtn.btn-primary {
	background-image: var(--ig-grad);
	background-color: #d6249f;
	border: none;
	color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
#ksSearchBtn.btn-primary:hover,
#ksSearchBtn.btn-primary:focus {
	background-image: var(--ig-grad);
	filter: brightness(1.06);
	box-shadow: 0 6px 18px rgba(214, 36, 159, 0.38);
	color: #fff;
}
.btn-primary:disabled { filter: grayscale(0.25) brightness(0.98); }

/* "How to search" outline button */
.btn-outline-primary,
.ks-help-btn {
	color: #c13584;
	border-color: rgba(193, 53, 132, 0.55);
}
.btn-outline-primary:hover,
.ks-help-btn:hover {
	background-color: #c13584;
	border-color: #c13584;
	color: #fff;
}

/* ---- Result tabs: animated Instagram-gradient OUTLINE (no filled background) ----
   The active pill keeps a clean white interior; only its border becomes the IG
   gradient, slowly flowing through yellow -> orange -> pink -> purple. We give
   inactive pills the same 2px border width so switching tabs never shifts layout. */
.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: #262626 !important;
	font-weight: 700;
	border: 2px solid transparent !important;
	background-image:
		linear-gradient(#ffffff, #ffffff),
		linear-gradient(90deg, #feda75, #f58529, #dd2a7b, #8134af, #515bd4);
	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(131, 58, 180, 0.16);
	/* ease-in-out + alternate = the gradient gently sweeps one way then back,
	   so it's very slow and there is NO hard loop/cut-off (it never wraps). */
	animation: igTabFlow 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 igTabFlow {
	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; }
}

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

/* ---- Filter accents ---- */
/* The Filters toggle button keeps its original styling (no colored text). */
.ks-filter-title { color: #a23a7e; }

/* Active sidebar link for Instagram */
#sidebar-menu .gray-link.active,
.btn-toggle-nav .active { color: #c13584 !important; }

/* ---- Hours / distribution bars use the metric icon colors; nudge totals ---- */
.tt-metric-value { color: #962fbf; }

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

/* ---- Credits strip: de-pinked. The $ chip gets the same IG gradient outline as
        the tabs (with a white $ on a dark interior so it stays visible); the credits
        digit box becomes a neutral white chip; the progress bar uses the IG gradient.
        --cs-accent only drives the faint corner glow + spinner now -> soft purple. ---- */
.credits-strip { --cs-accent: 280 50% 48%; }

.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, #feda75, #f58529, #dd2a7b, #8134af, #515bd4) border-box;
}
/* keep the dollar sign + its circle white (visible on the dark chip interior) */
.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 digit box -> white/neutral (no pink), with a readable dark digit */
.credits-strip .cs-badge {
	background: #ffffff !important;
	border: 1px solid rgba(15, 23, 42, 0.18) !important;
	color: hsl(222 15% 22%) !important;
}
/* progress bar -> Instagram gradient instead of flat magenta */
.credits-strip .cs-bar {
	background: linear-gradient(90deg, #feda75, #dd2a7b, #8134af) !important;
}