/**
 * ToolsFountain AI YouTube Tags Generator — frontend styling.
 *
 * Design notes (for future maintainers):
 * - Type uses the visitor's system font stack rather than a webfont
 *   service. This avoids an external network request on every page load
 *   (faster, and avoids the third-party-font privacy question entirely
 *   on GDPR-conscious sites) while still giving the UI its own scale
 *   and weight treatment.
 * - The result "tags" are shaped like a real price tag (angled left
 *   edge + a small punched hole) instead of generic rounded pills,
 *   since the product this plugin sells is literally tags.
 * - All color is expressed as CSS custom properties on .tfyt-widget so
 *   a theme can override the palette without touching selectors.
 */

.tfyt-widget {
	--tfyt-ink: #16233a;
	--tfyt-ink-soft: #5b6b82;
	--tfyt-paper: #ffffff;
	--tfyt-canvas: #f3f6f8;
	--tfyt-border: #e2e8ef;
	--tfyt-teal-deep: #0b6e6e;
	--tfyt-teal-bright: #22c1c3;
	--tfyt-coral: #ff6b4a;
	--tfyt-danger-bg: #fff1ed;
	--tfyt-danger-border: #ffcdbd;
	--tfyt-focus-ring: rgba(11, 110, 110, 0.35);
	--tfyt-shadow-card: 0 1px 2px rgba(22, 35, 58, 0.04), 0 24px 48px -28px rgba(22, 35, 58, 0.28);
	--tfyt-radius-card: 20px;
	--tfyt-radius-control: 12px;
	--tfyt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--tfyt-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	font-family: var(--tfyt-font);
	color: var(--tfyt-ink);
	display: block;
	max-width: 640px;
	margin: 2rem auto;
	box-sizing: border-box;
}

.tfyt-widget,
.tfyt-widget *,
.tfyt-widget *::before,
.tfyt-widget *::after {
	box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
	.tfyt-widget {
		--tfyt-ink: #eef2f6;
		--tfyt-ink-soft: #9aa9bd;
		--tfyt-paper: #141a22;
		--tfyt-canvas: #1b222c;
		--tfyt-border: #2a3341;
		--tfyt-danger-bg: #2a1b18;
		--tfyt-danger-border: #4a2c24;
		--tfyt-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 24px 48px -28px rgba(0, 0, 0, 0.6);
	}
}

.tfyt-card {
	background: var(--tfyt-paper);
	border: 1px solid var(--tfyt-border);
	border-radius: var(--tfyt-radius-card);
	box-shadow: var(--tfyt-shadow-card);
	padding: 36px;
}

@media (max-width: 480px) {
	.tfyt-card {
		padding: 24px 18px;
		border-radius: 16px;
	}
	.tfyt-widget {
		margin: 1.25rem auto;
	}
}

/* ---------- Header ---------- */

.tfyt-eyebrow {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tfyt-teal-deep);
	margin-bottom: 10px;
}

@media (prefers-color-scheme: dark) {
	.tfyt-eyebrow {
		color: var(--tfyt-teal-bright);
	}
}

.tfyt-title {
	font-size: 26px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
	color: var(--tfyt-ink);
}

.tfyt-subtitle {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--tfyt-ink-soft);
	margin: 0 0 28px;
	max-width: 48ch;
}

/* ---------- Form fields ---------- */

.tfyt-field {
	margin-bottom: 18px;
}

.tfyt-label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tfyt-ink-soft);
	margin-bottom: 7px;
}

.tfyt-required {
	color: var(--tfyt-coral);
}

.tfyt-optional {
	text-transform: none;
	font-weight: 400;
	letter-spacing: normal;
	color: var(--tfyt-ink-soft);
	opacity: 0.8;
}

.tfyt-input,
.tfyt-textarea,
.tfyt-select {
	width: 100%;
	font-family: inherit;
	font-size: 14.5px;
	color: var(--tfyt-ink);
	background: var(--tfyt-canvas);
	border: 1px solid var(--tfyt-border);
	border-radius: var(--tfyt-radius-control);
	padding: 12px 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.tfyt-textarea {
	resize: vertical;
	min-height: 88px;
	line-height: 1.5;
}

.tfyt-select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235b6b82' stroke-width='1.6' fill='none' fill-rule='evenodd' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}

.tfyt-input:focus,
.tfyt-textarea:focus,
.tfyt-select:focus {
	outline: none;
	border-color: var(--tfyt-teal-deep);
	background: var(--tfyt-paper);
	box-shadow: 0 0 0 4px var(--tfyt-focus-ring);
}

.tfyt-input::placeholder,
.tfyt-textarea::placeholder {
	color: var(--tfyt-ink-soft);
	opacity: 0.65;
}

/* ---------- Buttons ---------- */

.tfyt-actions {
	display: flex;
	gap: 12px;
	margin-top: 6px;
	flex-wrap: wrap;
}

.tfyt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: 0.01em;
	border-radius: 999px;
	padding: 13px 26px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.15s ease, background-color 0.15s ease;
	flex: 1 1 auto;
}

.tfyt-btn:focus-visible {
	outline: 2px solid var(--tfyt-teal-deep);
	outline-offset: 2px;
}

.tfyt-btn-primary {
	color: #ffffff;
	background: linear-gradient(135deg, var(--tfyt-teal-deep), var(--tfyt-teal-bright));
	box-shadow: 0 10px 24px -10px rgba(11, 110, 110, 0.55);
}

.tfyt-btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 28px -10px rgba(11, 110, 110, 0.6);
}

.tfyt-btn-primary:active {
	transform: translateY(0);
}

.tfyt-btn-outline {
	color: var(--tfyt-ink);
	background: var(--tfyt-canvas);
	border-color: var(--tfyt-border);
}

.tfyt-btn-outline:hover {
	background: var(--tfyt-paper);
	border-color: var(--tfyt-teal-deep);
}

.tfyt-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.tfyt-btn.is-copied {
	color: #1a7a4c;
	background: #e9f9f0;
	border-color: #bfe9d1;
}

.tfyt-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Spinner shown inside the primary button while generating. */
.tfyt-spinner {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #ffffff;
	animation: tfyt-spin 0.7s linear infinite;
	flex-shrink: 0;
}

@keyframes tfyt-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tfyt-spinner {
		animation-duration: 1.4s;
	}
	.tfyt-btn-primary:hover {
		transform: none;
	}
}

/* ---------- Error banner ---------- */

.tfyt-error {
	background: var(--tfyt-danger-bg);
	border: 1px solid var(--tfyt-danger-border);
	color: #9a3412;
	font-size: 13.5px;
	line-height: 1.5;
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 16px;
}

@media (prefers-color-scheme: dark) {
	.tfyt-error {
		color: #ffb199;
	}
}

/* ---------- Results ---------- */

.tfyt-results {
	margin-top: 30px;
	padding-top: 26px;
	border-top: 1px dashed var(--tfyt-border);
}

.tfyt-results-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 14px;
}

.tfyt-results-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0;
}

.tfyt-results-count {
	font-size: 12.5px;
	color: var(--tfyt-ink-soft);
	font-family: var(--tfyt-font-mono);
}

.tfyt-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 8px;
	margin-bottom: 22px;
}

/*
 * Signature element: each tag is shaped like a physical price tag —
 * an angled left edge plus a small punched "hole" — rather than a
 * generic rounded pill.
 */
.tfyt-tag-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	font-family: var(--tfyt-font-mono);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--tfyt-teal-deep);
	background: var(--tfyt-canvas);
	border: 1px solid var(--tfyt-border);
	padding: 7px 14px 7px 22px;
	clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tfyt-tag-chip::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--tfyt-paper);
	transform: translateY(-50%);
}

@media (prefers-color-scheme: dark) {
	.tfyt-tag-chip {
		color: var(--tfyt-teal-bright);
	}
}

.tfyt-tag-list .tfyt-tag-chip:nth-child(3n + 1) {
	transform: rotate(-0.6deg);
}

.tfyt-tag-list .tfyt-tag-chip:nth-child(3n + 2) {
	transform: rotate(0.8deg);
}

.tfyt-tag-chip:hover {
	transform: translateY(-2px) rotate(0deg);
	box-shadow: 0 8px 16px -8px rgba(22, 35, 58, 0.25);
}

@media (prefers-reduced-motion: reduce) {
	.tfyt-tag-chip,
	.tfyt-tag-list .tfyt-tag-chip:nth-child(3n + 1),
	.tfyt-tag-list .tfyt-tag-chip:nth-child(3n + 2) {
		transform: none;
	}
}

.tfyt-actions-results {
	margin-top: 4px;
}

/* Small screens: stack the results actions and let each button take full width. */
@media (max-width: 420px) {
	.tfyt-actions .tfyt-btn {
		flex-basis: 100%;
	}
}