/* ==========================================================================
   Theme wrapper safety — keeps the tool responsive and contained even if
   the active theme applies its own width/flex rules to #primary/.site-main.
   ========================================================================== */
.utr-content-area,
.utr-site-main {
	max-width: 100% !important;
	overflow-x: hidden;
	box-sizing: border-box;
}

#utr-app .utr-ad-slot {
	margin: 18px 0 !important;
	text-align: center;
	overflow-x: auto;
}

/* ==========================================================================
   Unlimited Text Repeater — Premium Theme
   Scoped under #utr-app with !important on text-critical rules so the
   host theme's global typography (capitalize, link colors, button resets)
   cannot bleed into the tool.
   ========================================================================== */

#utr-app, #utr-app * {
	box-sizing: border-box;
}

#utr-app {
	--utr-primary: #f5821f;
	--utr-primary-dark: #c85f0f;
	--utr-accent: #2b2b2b;
	--utr-bg: #fff8f2;
	--utr-card-bg: #ffffff;
	--utr-border: #f0ddc9;
	--utr-text: #241d15;
	--utr-text-soft: #6b5f52;

	max-width: 100%;
	width: 100%;
	overflow-x: hidden;
	margin: 0 auto;
	padding: 18px 16px 40px;
	background: var(--utr-bg);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--utr-text) !important;
	text-transform: none !important;
	line-height: 1.55;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

#utr-app .utr-tool,
#utr-app .utr-seo-content {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

#utr-app h1, #utr-app h2, #utr-app h3, #utr-app p, #utr-app li, #utr-app span, #utr-app div, #utr-app button, #utr-app label {
	text-transform: none !important;
	letter-spacing: normal !important;
}

#utr-app .utr-h1 {
	font-size: 1.4rem !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
	margin: 0 0 12px !important;
	color: var(--utr-primary-dark) !important;
	padding-bottom: 12px;
	border-bottom: 3px solid var(--utr-primary);
	display: block !important;
	width: 100% !important;
	max-width: 100%;
	word-break: break-word;
	overflow-wrap: break-word;
}

#utr-app .utr-intro {
	color: var(--utr-text-soft) !important;
	font-size: 0.98rem !important;
	margin: 14px 0 20px !important;
}

/* ---- Tool card wrapper ---- */
#utr-app .utr-tool {
	background: var(--utr-card-bg);
	border: 1px solid var(--utr-border);
	border-radius: 16px;
	padding: 18px;
	box-shadow: 0 2px 14px rgba(245, 130, 31, 0.08);
	margin-bottom: 22px;
}

#utr-app .utr-input {
	width: 100% !important;
	min-height: 90px !important;
	padding: 14px !important;
	font-size: 1rem !important;
	color: var(--utr-text) !important;
	background: #fbfdfc !important;
	border: 1.5px solid var(--utr-border) !important;
	border-radius: 12px !important;
	resize: vertical;
	font-family: inherit !important;
}

#utr-app .utr-input:focus {
	outline: none !important;
	border-color: var(--utr-primary) !important;
	box-shadow: 0 0 0 3px rgba(245, 130, 31, 0.15) !important;
}

#utr-app .utr-field-label {
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	color: var(--utr-primary-dark) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	margin: 16px 0 8px !important;
}

@media (max-width: 480px) {
	#utr-app .utr-field-label {
		font-size: 0.68rem !important;
		margin: 12px 0 6px !important;
	}
}

#utr-app .utr-controls {
	margin: 16px 0 4px !important;
}

#utr-app .utr-count-label {
	display: flex !important;
	flex-direction: column !important;
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	color: var(--utr-primary-dark) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	gap: 6px !important;
}

#utr-app .utr-count-input {
	padding: 12px !important;
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	color: var(--utr-text) !important;
	background: #fbfdfc !important;
	border: 1.5px solid var(--utr-border) !important;
	border-radius: 12px !important;
	max-width: 220px !important;
}

#utr-app .utr-count-input:focus {
	outline: none !important;
	border-color: var(--utr-primary) !important;
}

/* ---- Chips ---- */
#utr-app .utr-chip-row {
	display: flex !important;
	gap: 8px !important;
	overflow-x: auto !important;
	padding: 4px 2px 10px !important;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
#utr-app .utr-chip-row::-webkit-scrollbar { display: none; }

#utr-app .utr-chip {
	flex: 0 0 auto !important;
	padding: 9px 16px !important;
	border-radius: 999px !important;
	border: 1.5px solid var(--utr-border) !important;
	background: #fbfdfc !important;
	color: var(--utr-text) !important;
	font-size: 0.92rem !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
	cursor: pointer;
	transition: all 0.15s ease;
}

@media (max-width: 480px) {
	#utr-app .utr-chip {
		padding: 6px 12px !important;
		font-size: 0.8rem !important;
	}
}

#utr-app .utr-chip:active {
	transform: scale(0.96);
}

#utr-app .utr-chip.is-active {
	background: var(--utr-primary) !important;
	color: #fff !important;
	border-color: var(--utr-primary) !important;
	box-shadow: 0 2px 8px rgba(245, 130, 31, 0.3);
}

/* ---- Generate button ---- */
#utr-app .utr-generate-btn {
	display: block !important;
	width: 100% !important;
	padding: 15px !important;
	margin: 20px 0 10px !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	border: none !important;
	border-radius: 12px !important;
	background: linear-gradient(135deg, var(--utr-primary), var(--utr-primary-dark)) !important;
	color: #ffffff !important;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(245, 130, 31, 0.35);
}

@media (max-width: 480px) {
	#utr-app .utr-generate-btn {
		padding: 11px !important;
		font-size: 0.9rem !important;
		margin: 14px 0 8px !important;
	}
}

#utr-app .utr-generate-btn:active {
	transform: translateY(1px);
	box-shadow: 0 2px 8px rgba(245, 130, 31, 0.3);
}

#utr-app .utr-stats {
	font-size: 0.8rem !important;
	color: var(--utr-text-soft) !important;
	text-align: center !important;
	margin-bottom: 6px !important;
}

/* ---- Output cards ---- */
#utr-app .utr-card {
	border: 1px solid var(--utr-border) !important;
	border-radius: 14px !important;
	padding: 14px !important;
	margin-top: 16px !important;
	background: #fbfdfc !important;
}

#utr-app .utr-card h2 {
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	color: var(--utr-primary-dark) !important;
	margin: 0 0 10px !important;
}

#utr-app .utr-output {
	display: block !important;
	width: 100% !important;
	height: 150px !important;
	max-height: 150px !important;
	overflow-y: auto !important;
	white-space: pre-wrap !important;
	word-break: break-word !important;
	font-family: "SFMono-Regular", Consolas, monospace !important;
	font-size: 0.88rem !important;
	color: var(--utr-text) !important;
	background: #ffffff !important;
	border: 1px solid var(--utr-border) !important;
	border-radius: 10px !important;
	padding: 12px !important;
	resize: none !important;
	-webkit-appearance: none !important;
}

#utr-app .utr-output.is-expanded {
	height: 60vh !important;
	max-height: 60vh !important;
}

#utr-app .utr-output.is-generating {
	color: var(--utr-text-soft) !important;
	font-style: italic;
}

#utr-app .utr-card-actions {
	display: flex !important;
	gap: 8px !important;
	margin-top: 12px !important;
	flex-wrap: wrap !important;
}

#utr-app .utr-action-btn {
	flex: 1 1 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 11px 8px !important;
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	border: 1.5px solid var(--utr-primary) !important;
	border-radius: 10px !important;
	background: #ffffff !important;
	color: var(--utr-primary-dark) !important;
	cursor: pointer;
	min-width: 0;
}

#utr-app .utr-action-btn .utr-icon {
	font-size: 0.95rem !important;
}

#utr-app .utr-action-btn:active {
	background: var(--utr-primary) !important;
	color: #fff !important;
}

/* ---- SEO content section ---- */
#utr-app .utr-seo-content {
	margin-top: 28px !important;
	background: var(--utr-card-bg);
	border: 1px solid var(--utr-border);
	border-radius: 16px;
	padding: 20px !important;
}

#utr-app .utr-seo-content h2 {
	font-size: 1.05rem !important;
	font-weight: 800 !important;
	color: var(--utr-primary-dark) !important;
	margin: 22px 0 8px !important;
	padding-top: 14px;
	border-top: 1px solid var(--utr-border);
}

#utr-app .utr-seo-content h2:first-child {
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: none !important;
}

#utr-app .utr-seo-content h3 {
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	color: var(--utr-text) !important;
	margin: 14px 0 4px !important;
}

#utr-app .utr-seo-content p,
#utr-app .utr-seo-content li {
	color: var(--utr-text-soft) !important;
	font-size: 0.92rem !important;
}

#utr-app .utr-seo-content ul {
	margin: 6px 0 !important;
	padding-left: 20px !important;
}

#utr-app .utr-seo-content a {
	color: var(--utr-primary) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

#utr-app .utr-seo-content a:active {
	text-decoration: underline !important;
}