/*
 * Toolsgest PDF to JPG Converter — stylesheet.
 *
 * Everything is scoped under .tgpdfjpg-wrapper so the tool can be dropped
 * into any theme without its styles leaking into the surrounding page.
 *
 * Design language:
 *   - Modern, trust-forward, minimal.
 *   - Indigo primary with a soft purple->pink accent gradient.
 *   - Rounded cards, gentle shadows, smooth motion.
 *   - All tokens live in CSS custom properties up top so you can rebrand
 *     the whole tool by editing the :root block.
 */

/* -------------------- TOKENS -------------------- */
.tgpdfjpg-wrapper {
	/* Brand colors */
	--tgp-primary:        #4F46E5;
	--tgp-primary-dark:   #4338CA;
	--tgp-primary-600:    #4338CA;
	--tgp-accent:         #EC4899;
	--tgp-accent-2:       #8B5CF6;

	/* Neutrals */
	--tgp-bg:             #F8FAFC;
	--tgp-surface:        #FFFFFF;
	--tgp-surface-soft:   #F1F5F9;
	--tgp-border:         #E2E8F0;
	--tgp-border-strong:  #CBD5E1;
	--tgp-text:           #0F172A;
	--tgp-text-soft:      #475569;
	--tgp-text-muted:     #64748B;

	/* Status */
	--tgp-success:        #10B981;
	--tgp-warn:           #F59E0B;
	--tgp-error:          #EF4444;

	/* Elevation */
	--tgp-shadow-sm:      0 1px 2px rgba(15, 23, 42, .06);
	--tgp-shadow:         0 4px 14px rgba(15, 23, 42, .08);
	--tgp-shadow-lg:      0 20px 60px rgba(15, 23, 42, .12);

	/* Radius */
	--tgp-r-sm: 8px;
	--tgp-r:    14px;
	--tgp-r-lg: 20px;
	--tgp-r-xl: 28px;

	/* Motion */
	--tgp-ease:           cubic-bezier(.2, .8, .2, 1);

	/* Typography */
	--tgp-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Inter", sans-serif;

	font-family: var(--tgp-font);
	color: var(--tgp-text);
	line-height: 1.55;
	text-align: left;
	box-sizing: border-box;
}

/* Ensure our own children inherit border-box. */
.tgpdfjpg-wrapper,
.tgpdfjpg-wrapper *,
.tgpdfjpg-wrapper *::before,
.tgpdfjpg-wrapper *::after {
	box-sizing: border-box;
}

.tgpdfjpg-wrapper img { max-width: 100%; height: auto; }

/* -------------------- HIDE-CHROME MODE --------------------
 * When the shortcode is used with hide_chrome="1", hide the theme's
 * header, footer, sidebars, and page title so the tool becomes a
 * true landing experience.
 * These selectors cover 95% of themes (WordPress, Elementor, Astra, etc.).
 */
body:has(.tgpdfjpg-hide-chrome) > header,
body:has(.tgpdfjpg-hide-chrome) > footer,
body:has(.tgpdfjpg-hide-chrome) #masthead,
body:has(.tgpdfjpg-hide-chrome) #colophon,
body:has(.tgpdfjpg-hide-chrome) .site-header,
body:has(.tgpdfjpg-hide-chrome) .site-footer,
body:has(.tgpdfjpg-hide-chrome) .elementor-location-header,
body:has(.tgpdfjpg-hide-chrome) .elementor-location-footer,
body:has(.tgpdfjpg-hide-chrome) .entry-title,
body:has(.tgpdfjpg-hide-chrome) .page-title,
body:has(.tgpdfjpg-hide-chrome) .breadcrumb,
body:has(.tgpdfjpg-hide-chrome) .entry-header {
	display: none !important;
}

/* Fallback for browsers without :has() — class the plugin suggests in docs. */
body.tgpdfjpg-fullscreen > header,
body.tgpdfjpg-fullscreen > footer,
body.tgpdfjpg-fullscreen #masthead,
body.tgpdfjpg-fullscreen #colophon,
body.tgpdfjpg-fullscreen .site-header,
body.tgpdfjpg-fullscreen .site-footer,
body.tgpdfjpg-fullscreen .entry-title,
body.tgpdfjpg-fullscreen .page-title,
body.tgpdfjpg-fullscreen .entry-header {
	display: none !important;
}

/* -------------------- HERO -------------------- */
.tgpdfjpg-hero {
	position: relative;
	padding: clamp(40px, 8vw, 96px) 20px 64px;
	background:
		radial-gradient(1200px 600px at 50% -10%, rgba(139, 92, 246, .18), transparent 60%),
		radial-gradient(800px 400px at 10% 110%, rgba(236, 72, 153, .12), transparent 60%),
		linear-gradient(180deg, #FFFFFF 0%, var(--tgp-bg) 100%);
	overflow: hidden;
}

.tgpdfjpg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(15, 23, 42, .035) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(15, 23, 42, .035) 1px, transparent 1px);
	background-size: 40px 40px;
	mask-image: radial-gradient(circle at 50% 0%, black, transparent 70%);
	-webkit-mask-image: radial-gradient(circle at 50% 0%, black, transparent 70%);
	pointer-events: none;
}

.tgpdfjpg-hero__inner {
	position: relative;
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}

.tgpdfjpg-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	background: var(--tgp-surface);
	border: 1px solid var(--tgp-border);
	border-radius: 999px;
	box-shadow: var(--tgp-shadow-sm);
	margin-bottom: 28px;
	color: var(--tgp-primary);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: -.01em;
}
.tgpdfjpg-brand__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.tgpdfjpg-brand__name {
	color: var(--tgp-text);
	letter-spacing: -.02em;
}

.tgpdfjpg-hero__title {
	font-size: clamp(32px, 5.5vw, 52px);
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin: 0 0 16px;
	font-weight: 800;
	background: linear-gradient(180deg, #0F172A 0%, #334155 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.tgpdfjpg-hero__subtitle {
	font-size: clamp(16px, 2vw, 18px);
	color: var(--tgp-text-soft);
	margin: 0 auto 36px;
	max-width: 620px;
}

/* -------------------- CARD -------------------- */
.tgpdfjpg-card {
	position: relative;
	background: var(--tgp-surface);
	border: 1px solid var(--tgp-border);
	border-radius: var(--tgp-r-xl);
	padding: clamp(20px, 3vw, 36px);
	box-shadow: var(--tgp-shadow-lg);
	text-align: left;
	transition: transform .3s var(--tgp-ease);
}
.tgpdfjpg-card::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(139, 92, 246, .5), rgba(236, 72, 153, .35) 40%, transparent 70%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	opacity: .6;
}

.tgpdfjpg-stage { animation: tgp-fade .35s var(--tgp-ease); }
.tgpdfjpg-stage[hidden] { display: none !important; }

@keyframes tgp-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* -------------------- DROP ZONE -------------------- */
.tgpdfjpg-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: clamp(32px, 6vw, 56px) 20px;
	border: 2px dashed var(--tgp-border-strong);
	border-radius: var(--tgp-r-lg);
	background: var(--tgp-surface-soft);
	cursor: pointer;
	transition: all .25s var(--tgp-ease);
	text-align: center;
}
.tgpdfjpg-drop:hover,
.tgpdfjpg-drop:focus-within {
	border-color: var(--tgp-primary);
	background: rgba(79, 70, 229, .04);
	transform: translateY(-1px);
}
.tgpdfjpg-drop.is-dragover {
	border-color: var(--tgp-primary);
	background: rgba(79, 70, 229, .08);
	transform: scale(1.01);
}
.tgpdfjpg-drop__icon {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--tgp-primary), var(--tgp-accent-2));
	color: #fff;
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(79, 70, 229, .35);
	margin-bottom: 4px;
}
.tgpdfjpg-drop__title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--tgp-text);
}
.tgpdfjpg-drop__sub {
	font-size: 15px;
	color: var(--tgp-text-soft);
}
.tgpdfjpg-drop__hint {
	margin-top: 8px;
	font-size: 13px;
	color: var(--tgp-text-muted);
	padding: 6px 12px;
	background: var(--tgp-surface);
	border-radius: 999px;
	border: 1px solid var(--tgp-border);
}

/* -------------------- PRIVACY LINE -------------------- */
.tgpdfjpg-privacy {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 18px;
	padding: 12px 16px;
	background: rgba(16, 185, 129, .06);
	border: 1px solid rgba(16, 185, 129, .2);
	color: #065F46;
	border-radius: var(--tgp-r);
	font-size: 13.5px;
	line-height: 1.5;
}
.tgpdfjpg-privacy svg { flex-shrink: 0; margin-top: 2px; color: var(--tgp-success); }

/* -------------------- ALERTS -------------------- */
.tgpdfjpg-alert {
	padding: 14px 16px;
	border-radius: var(--tgp-r);
	margin-bottom: 24px;
	font-size: 14.5px;
	line-height: 1.5;
	border: 1px solid;
}
.tgpdfjpg-alert--warn {
	background: #FEF3C7;
	border-color: #FCD34D;
	color: #78350F;
}
.tgpdfjpg-alert--error {
	background: #FEE2E2;
	border-color: #FCA5A5;
	color: #7F1D1D;
	margin-bottom: 16px;
}
.tgpdfjpg-alert strong { display: inline-block; margin-right: 6px; }

/* -------------------- BUTTONS -------------------- */
.tgpdfjpg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 600;
	border-radius: var(--tgp-r);
	border: 1px solid transparent;
	cursor: pointer;
	transition: all .2s var(--tgp-ease);
	font-family: inherit;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}
.tgpdfjpg-btn:focus-visible {
	outline: 3px solid rgba(79, 70, 229, .35);
	outline-offset: 2px;
}
.tgpdfjpg-btn--primary {
	background: linear-gradient(180deg, var(--tgp-primary), var(--tgp-primary-dark));
	color: #fff;
	box-shadow: 0 6px 20px rgba(79, 70, 229, .35);
}
.tgpdfjpg-btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 28px rgba(79, 70, 229, .45);
}
.tgpdfjpg-btn--ghost {
	background: var(--tgp-surface);
	color: var(--tgp-text);
	border-color: var(--tgp-border);
}
.tgpdfjpg-btn--ghost:hover {
	background: var(--tgp-surface-soft);
	border-color: var(--tgp-border-strong);
}
.tgpdfjpg-btn--sm {
	padding: 8px 14px;
	font-size: 13.5px;
	border-radius: 10px;
}

/* -------------------- PROGRESS -------------------- */
.tgpdfjpg-progress { text-align: center; }
.tgpdfjpg-progress__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}
.tgpdfjpg-progress__title {
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--tgp-text);
	text-align: left;
}
.tgpdfjpg-progress__percent {
	font-size: 22px;
	font-weight: 700;
	color: var(--tgp-primary);
	font-variant-numeric: tabular-nums;
}
.tgpdfjpg-progress__track {
	height: 10px;
	background: var(--tgp-surface-soft);
	border-radius: 999px;
	overflow: hidden;
	position: relative;
}
.tgpdfjpg-progress__bar {
	height: 100%;
	background: linear-gradient(90deg, var(--tgp-primary), var(--tgp-accent));
	border-radius: 999px;
	transition: width .4s var(--tgp-ease);
	position: relative;
}
.tgpdfjpg-progress__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
	background-size: 200% 100%;
	animation: tgp-shine 1.4s linear infinite;
}
@keyframes tgp-shine {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
.tgpdfjpg-progress__meta {
	text-align: left;
	margin-top: 14px;
	font-size: 13.5px;
	color: var(--tgp-text-muted);
	font-variant-numeric: tabular-nums;
}
.tgpdfjpg-progress [data-action="cancel"] {
	margin-top: 18px;
}

/* -------------------- RESULT -------------------- */
.tgpdfjpg-result__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}
.tgpdfjpg-result__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--tgp-success);
	margin: 0 0 4px;
}
.tgpdfjpg-result__sub {
	margin: 0;
	font-size: 14.5px;
	color: var(--tgp-text-muted);
}
.tgpdfjpg-result__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.tgpdfjpg-result__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 14px;
}

.tgpdfjpg-tile {
	background: var(--tgp-surface);
	border: 1px solid var(--tgp-border);
	border-radius: var(--tgp-r);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .2s var(--tgp-ease), box-shadow .2s var(--tgp-ease);
}
.tgpdfjpg-tile:hover {
	transform: translateY(-2px);
	box-shadow: var(--tgp-shadow);
	border-color: var(--tgp-border-strong);
}
.tgpdfjpg-tile__preview {
	aspect-ratio: 3/4;
	background: var(--tgp-surface-soft);
	overflow: hidden;
	position: relative;
}
.tgpdfjpg-tile__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tgpdfjpg-tile__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: rgba(15, 23, 42, .78);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 999px;
	letter-spacing: .02em;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.tgpdfjpg-tile__body {
	padding: 10px 12px 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.tgpdfjpg-tile__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 12.5px;
	color: var(--tgp-text-muted);
	line-height: 1.3;
	min-width: 0;
}
.tgpdfjpg-tile__meta strong {
	color: var(--tgp-text);
	font-weight: 600;
	font-size: 13.5px;
}

/* -------------------- TRUST ROW -------------------- */
.tgpdfjpg-trust {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px 28px;
}
.tgpdfjpg-trust li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--tgp-text-soft);
}
.tgpdfjpg-trust svg { color: var(--tgp-primary); }

/* -------------------- EXPLAINER / HOW-TO -------------------- */
.tgpdfjpg-explainer,
.tgpdfjpg-how,
.tgpdfjpg-faq,
.tgpdfjpg-outro {
	padding: clamp(40px, 7vw, 80px) 20px;
}
.tgpdfjpg-explainer { background: #fff; }
.tgpdfjpg-how       { background: var(--tgp-bg); }
.tgpdfjpg-faq       { background: #fff; }
.tgpdfjpg-outro     {
	background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
	color: #E2E8F0;
	text-align: center;
}
.tgpdfjpg-outro h3 { color: #fff; margin: 0 0 12px; font-size: 22px; letter-spacing: -.02em; }
.tgpdfjpg-outro p  { max-width: 620px; margin: 0 auto; color: #CBD5E1; font-size: 15px; }
.tgpdfjpg-outro__inner { max-width: 820px; margin: 0 auto; }

.tgpdfjpg-explainer__inner,
.tgpdfjpg-how__inner,
.tgpdfjpg-faq__inner { max-width: 820px; margin: 0 auto; }

.tgpdfjpg-explainer h2,
.tgpdfjpg-how h2,
.tgpdfjpg-faq__title {
	font-size: clamp(24px, 3.5vw, 34px);
	letter-spacing: -.025em;
	font-weight: 800;
	color: var(--tgp-text);
	margin: 0 0 14px;
	line-height: 1.2;
}
.tgpdfjpg-explainer p {
	font-size: 16px;
	color: var(--tgp-text-soft);
	margin: 0 0 14px;
}

/* Steps */
.tgpdfjpg-how__lede {
	color: var(--tgp-text-muted);
	font-size: 16px;
	margin: 0 0 28px;
}
.tgpdfjpg-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	counter-reset: step;
}
.tgpdfjpg-step {
	background: var(--tgp-surface);
	border: 1px solid var(--tgp-border);
	border-radius: var(--tgp-r-lg);
	padding: 24px;
	position: relative;
	transition: transform .2s var(--tgp-ease), box-shadow .2s var(--tgp-ease);
}
.tgpdfjpg-step:hover { transform: translateY(-2px); box-shadow: var(--tgp-shadow); }
.tgpdfjpg-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: linear-gradient(135deg, var(--tgp-primary), var(--tgp-accent-2));
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	border-radius: 10px;
	margin-bottom: 14px;
	box-shadow: 0 6px 16px rgba(79, 70, 229, .3);
}
.tgpdfjpg-step h3 {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--tgp-text);
}
.tgpdfjpg-step p {
	margin: 0;
	color: var(--tgp-text-soft);
	font-size: 14.5px;
	line-height: 1.55;
}

/* -------------------- FAQ -------------------- */
.tgpdfjpg-faq__lede {
	color: var(--tgp-text-muted);
	font-size: 16px;
	margin: 0 0 24px;
}
.tgpdfjpg-faq__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.tgpdfjpg-faq__item {
	background: var(--tgp-surface);
	border: 1px solid var(--tgp-border);
	border-radius: var(--tgp-r);
	overflow: hidden;
	transition: border-color .2s var(--tgp-ease);
}
.tgpdfjpg-faq__item[open] {
	border-color: var(--tgp-border-strong);
	box-shadow: var(--tgp-shadow-sm);
}
.tgpdfjpg-faq__q {
	cursor: pointer;
	padding: 18px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 16px;
	font-weight: 600;
	color: var(--tgp-text);
	list-style: none;
}
.tgpdfjpg-faq__q::-webkit-details-marker { display: none; }
.tgpdfjpg-faq__chev {
	flex-shrink: 0;
	transition: transform .25s var(--tgp-ease);
	color: var(--tgp-text-muted);
}
.tgpdfjpg-faq__item[open] .tgpdfjpg-faq__chev { transform: rotate(180deg); }
.tgpdfjpg-faq__a {
	padding: 0 20px 18px;
	color: var(--tgp-text-soft);
	font-size: 15px;
	line-height: 1.6;
}
.tgpdfjpg-faq__a p { margin: 0; }

/* -------------------- RESPONSIVE -------------------- */
@media (max-width: 640px) {
	.tgpdfjpg-result__header { flex-direction: column; }
	.tgpdfjpg-result__actions { width: 100%; }
	.tgpdfjpg-result__actions .tgpdfjpg-btn { flex: 1 1 auto; }
	.tgpdfjpg-progress__header { flex-direction: column; align-items: flex-start; gap: 4px; }
	.tgpdfjpg-progress__percent { font-size: 18px; }
}

/* -------------------- DARK THEME -------------------- */
.tgpdfjpg-theme-dark {
	--tgp-bg:            #0F172A;
	--tgp-surface:       #1E293B;
	--tgp-surface-soft:  #0B1220;
	--tgp-border:        #334155;
	--tgp-border-strong: #475569;
	--tgp-text:          #F8FAFC;
	--tgp-text-soft:     #CBD5E1;
	--tgp-text-muted:    #94A3B8;
	color: var(--tgp-text);
}
.tgpdfjpg-theme-dark .tgpdfjpg-hero {
	background:
		radial-gradient(1200px 600px at 50% -10%, rgba(139, 92, 246, .25), transparent 60%),
		linear-gradient(180deg, #0B1220 0%, var(--tgp-bg) 100%);
}
.tgpdfjpg-theme-dark .tgpdfjpg-hero__title {
	background: linear-gradient(180deg, #F8FAFC 0%, #CBD5E1 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.tgpdfjpg-theme-dark .tgpdfjpg-explainer { background: #0B1220; }
.tgpdfjpg-theme-dark .tgpdfjpg-how       { background: #0F172A; }
.tgpdfjpg-theme-dark .tgpdfjpg-faq       { background: #0B1220; }

/* -------------------- REDUCED MOTION -------------------- */
@media (prefers-reduced-motion: reduce) {
	.tgpdfjpg-wrapper *,
	.tgpdfjpg-wrapper *::before,
	.tgpdfjpg-wrapper *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}