/* ==========================================================================
   PFP Ideas — Free PFP Maker
   Scoped under .pfp-maker-app to avoid leaking into the WordPress theme.

   Dark theme note: color tokens below are set to match PFP Ideas' own
   Global Colors (Primary / Secondary / Accent / Background / surface / card
   / Muted text / border), so the tool reuses the site's existing purple
   rather than introducing a new one. Hover/active states LIGHTEN rather
   than darken (using Accent as the "hover" shade of Primary) — darkening an
   already-saturated color further reduces its visibility on a near-black
   background, so lightening reads better in dark UI.
   ========================================================================== */

.pfp-maker-app {
	--pfp-primary: #A855F7;        /* site Primary */
	--pfp-primary-hover: #C084FC;  /* site Accent — used as Primary's hover/emphasis shade */
	--pfp-primary-soft: rgba(168, 85, 247, 0.16); /* low-opacity Primary, for active-state fills on dark surfaces */
	--pfp-secondary: #EC4899;      /* site Secondary — reserved, not heavily used yet */
	--pfp-green: #16a34a;
	--pfp-green-hover: #22c55e;    /* brighter on hover, same lighten-not-darken logic */
	--pfp-text: #F8F7FC;           /* site Text */
	--pfp-text-muted: #A1A1AA;     /* site Muted text */
	--pfp-border: #27202F;         /* site border */
	--pfp-bg: #0B0B10;             /* site Background — page-level backdrop */
	--pfp-surface: #111118;        /* site surface — the app shell's base */
	--pfp-card: #171720;           /* site card — elevated panels/toolbars/inputs sit on this */
	--pfp-danger: #fb7185;         /* brightened rose-red, readable on near-black */
	--pfp-danger-bg: rgba(225, 29, 72, 0.14);
	--pfp-radius: 14px;
	--pfp-radius-sm: 8px;
	--pfp-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	--pfp-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--pfp-text);
	background: var(--pfp-surface);
	border-radius: var(--pfp-radius);
	max-width: 1200px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}

.pfp-maker-app *,
.pfp-maker-app *::before,
.pfp-maker-app *::after {
	box-sizing: border-box;
}

.pfp-maker-app button {
	font-family: inherit;
	cursor: pointer;
}

/* Dark, themed scrollbars for the toolbar and controls panel. */
.pfp-maker-app * {
	scrollbar-color: var(--pfp-border) transparent;
}
.pfp-maker-app *::-webkit-scrollbar { width: 8px; height: 8px; }
.pfp-maker-app *::-webkit-scrollbar-track { background: transparent; }
.pfp-maker-app *::-webkit-scrollbar-thumb { background: var(--pfp-border); border-radius: 999px; }

/* ---------- Buttons ---------- */
.pfp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 999px;
	border: none;
	font-size: 15px;
	font-weight: 600;
	min-height: 44px;
	transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.pfp-btn:active { transform: scale(0.97); }
.pfp-btn--primary { background: var(--pfp-primary); color: #fff; box-shadow: var(--pfp-shadow); }
.pfp-btn--primary:hover { background: var(--pfp-primary-hover); }
.pfp-btn--secondary { background: var(--pfp-primary-soft); color: var(--pfp-primary-hover); width: 100%; margin: 8px 0; }
.pfp-btn--ghost { background: transparent; color: var(--pfp-text); border: 1px solid var(--pfp-border); }
.pfp-btn--ghost:hover { background: var(--pfp-card); }
.pfp-btn--danger { background: var(--pfp-danger-bg); color: var(--pfp-danger); width: 100%; margin-top: 10px; }
.pfp-btn--download { background: var(--pfp-green); color: #fff; }
.pfp-btn--download:hover { background: var(--pfp-green-hover); }
.pfp-btn--block { width: 100%; }
.pfp-btn:disabled { opacity: .4; cursor: not-allowed; }

.pfp-chip {
	border: 1px solid var(--pfp-border);
	background: var(--pfp-card);
	border-radius: 999px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pfp-text);
	min-height: 40px;
}
.pfp-chip:hover { border-color: var(--pfp-primary); }
.pfp-chip[data-active="true"] { background: var(--pfp-primary); border-color: var(--pfp-primary); color: #fff; }

.pfp-btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

/* ---------- Landing screen ---------- */
.pfp-landing { padding: 32px 24px 64px; text-align: center; background: linear-gradient(180deg, var(--pfp-surface), var(--pfp-bg)); }
.pfp-landing__inner { max-width: 560px; margin: 0 auto; }
/* .pfp-landing__title and .pfp-landing__desc intentionally removed — the
   heading/subtitle now live on the WordPress page itself, not the shortcode. */
.pfp-landing__upload {
	background: var(--pfp-card);
	border: 2px dashed var(--pfp-border);
	border-radius: var(--pfp-radius);
	padding: 40px 20px;
	box-shadow: var(--pfp-shadow);
}
.pfp-landing__upload.pfp-dragover { border-color: var(--pfp-primary); background: var(--pfp-primary-soft); }
.pfp-landing__upload-btn { font-size: 16px; padding: 14px 28px; }
.pfp-landing__hint { margin: 14px 0 0; font-size: 13px; color: var(--pfp-text-muted); }
.pfp-landing__error {
	margin-top: 16px; padding: 10px 14px; border-radius: var(--pfp-radius-sm);
	background: var(--pfp-danger-bg); color: var(--pfp-danger); font-size: 14px; font-weight: 600;
}
.pfp-landing__examples { margin-top: 36px; }
.pfp-landing__examples-label { font-weight: 700; margin-bottom: 12px; }
.pfp-examples-grid { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.pfp-example-thumb {
	width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
	border: 3px solid var(--pfp-card); box-shadow: var(--pfp-shadow);
	padding: 0; background: var(--pfp-primary-soft);
}
.pfp-example-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pfp-example-thumb:hover { border-color: var(--pfp-primary); }
.pfp-example-thumb:focus-visible, .pfp-btn:focus-visible, .pfp-chip:focus-visible, .pfp-tool:focus-visible {
	outline: 3px solid var(--pfp-primary); outline-offset: 2px;
}

/* ---------- Toolbar ---------- */
.pfp-toolbar {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 10px 16px; background: var(--pfp-card); border-bottom: 1px solid var(--pfp-border);
	position: sticky; top: 0; z-index: 5;
}
.pfp-toolbar__scroll { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.pfp-toolbar__divider { width: 1px; align-self: stretch; background: var(--pfp-border); margin: 0 4px; }
.pfp-tool {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	background: transparent; border: none; border-radius: var(--pfp-radius-sm);
	padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--pfp-text-muted);
	white-space: nowrap; min-width: 60px; min-height: 44px; flex-shrink: 0;
}
.pfp-tool__icon { font-size: 18px; }
.pfp-tool:hover:not(:disabled) { background: var(--pfp-surface); color: var(--pfp-text); }
.pfp-tool[aria-pressed="true"] { background: var(--pfp-primary-soft); color: var(--pfp-primary-hover); }
.pfp-tool:disabled { opacity: .35; }

/* ---------- Editor body ---------- */
.pfp-editor__body { display: flex; gap: 20px; padding: 20px; align-items: flex-start; background: var(--pfp-surface); }
.pfp-canvas-area { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.pfp-canvas-wrap {
	position: relative; width: 100%; max-width: 480px; aspect-ratio: 1 / 1;
	background:
		linear-gradient(45deg, #1c1c24 25%, transparent 25%), linear-gradient(-45deg, #1c1c24 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #1c1c24 75%), linear-gradient(-45deg, transparent 75%, #1c1c24 75%);
	background-color: #232330;
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
	border: 1px solid var(--pfp-border);
	border-radius: var(--pfp-radius); box-shadow: var(--pfp-shadow-lg); overflow: hidden;
}
.pfp-canvas-wrap canvas { width: 100% !important; height: 100% !important; display: block; }
/* Fabric.js wraps the <canvas> in its own .canvas-container div and sets
   that wrapper's width/height as fixed inline pixel styles (matching the
   logical canvas size, e.g. 512px). Force it to fill its responsive parent
   too, or the wrapper (not just the canvas) overflows narrow screens. */
.pfp-canvas-wrap .canvas-container { width: 100% !important; height: 100% !important; }
.pfp-canvas-actions { display: flex; gap: 10px; }

.pfp-canvas-overlay {
	position: absolute; inset: 0; background: rgba(11, 11, 16, 0.88);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; z-index: 3;
}
.pfp-canvas-overlay[hidden] { display: none; }
.pfp-spinner {
	width: 32px; height: 32px; border-radius: 50%;
	border: 3px solid var(--pfp-primary-soft); border-top-color: var(--pfp-primary);
	animation: pfp-spin 0.8s linear infinite;
}
@keyframes pfp-spin { to { transform: rotate(360deg); } }
.pfp-canvas-overlay__text { font-weight: 600; color: var(--pfp-text); margin: 0; }

/* ---------- Controls panel ---------- */
.pfp-controls {
	flex: 0 0 320px; background: var(--pfp-card); border: 1px solid var(--pfp-border); border-radius: var(--pfp-radius);
	box-shadow: var(--pfp-shadow); padding: 20px; max-height: 640px; overflow-y: auto;
}
.pfp-panel__title { font-size: 15px; font-weight: 800; margin: 18px 0 10px; color: var(--pfp-text); }
.pfp-panel__title:first-child { margin-top: 0; }
.pfp-panel__subtitle { font-size: 13px; font-weight: 700; color: var(--pfp-text-muted); margin: 18px 0 8px; text-transform: uppercase; letter-spacing: .03em; }
.pfp-field { margin-bottom: 14px; }
.pfp-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--pfp-text-muted); }

/* Fully custom range slider rendering. We deliberately do NOT rely on
   accent-color + a themed ::-webkit-slider-runnable-track together — some
   browsers (notably mobile Safari) only partially honor a custom track
   background while still drawing their own native accent-color fill on top,
   producing two overlapping bars. Instead: appearance:none strips all native
   rendering, the track pseudo-elements are just a flat unfilled bar, and the
   actual purple "filled" portion is painted via an inline gradient that
   pfp-maker.js updates on every value change (see updateRangeFill()). */
.pfp-field input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background: var(--pfp-border); /* fallback before JS paints the gradient fill */
	cursor: pointer;
}
.pfp-field input[type="range"]::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	height: 8px;
	border-radius: 999px;
	background: transparent; /* the real fill lives on the input's own background, set by JS */
}
.pfp-field input[type="range"]::-moz-range-track {
	height: 8px;
	border-radius: 999px;
	background: transparent;
	border: none;
}
.pfp-field input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--pfp-primary);
	border: 3px solid var(--pfp-card);
	box-shadow: 0 0 0 1px var(--pfp-border);
	margin-top: -5px; /* centers an 18px thumb over an 8px track */
	cursor: pointer;
}
.pfp-field input[type="range"]::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--pfp-primary);
	border: 3px solid var(--pfp-card);
	box-shadow: 0 0 0 1px var(--pfp-border);
	cursor: pointer;
}
.pfp-field input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--pfp-primary-hover); outline-offset: 2px; }
.pfp-field input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid var(--pfp-primary-hover); outline-offset: 2px; }

.pfp-field input[type="text"], .pfp-field input[type="number"], .pfp-field select {
	width: 100%; padding: 10px 12px; border: 1px solid var(--pfp-border); border-radius: var(--pfp-radius-sm); font-size: 14px; min-height: 44px;
	background: var(--pfp-surface); color: var(--pfp-text);
}
.pfp-field input[type="text"]:focus, .pfp-field input[type="number"]:focus, .pfp-field select:focus {
	outline: none; border-color: var(--pfp-primary);
}
.pfp-field select { accent-color: var(--pfp-primary); }
.pfp-field select option { background: var(--pfp-surface); color: var(--pfp-text); }

.pfp-field--row { display: flex; align-items: center; gap: 10px; }
.pfp-field--row input[type="color"] {
	width: 44px; height: 44px; border: 1px solid var(--pfp-border); border-radius: var(--pfp-radius-sm);
	padding: 2px; flex-shrink: 0; background: var(--pfp-surface);
}
.pfp-field--row input[type="text"] { flex: 1; }
.pfp-field__inline-label { margin: 0; white-space: nowrap; font-size: 12px; color: var(--pfp-text-muted); }
.pfp-field__note { font-size: 12px; color: var(--pfp-text-muted); margin: 4px 0 0; }
.pfp-toggle { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; margin: 8px 0 14px; color: var(--pfp-text); }
.pfp-toggle input { width: 18px; height: 18px; accent-color: var(--pfp-primary); }

.pfp-panel[hidden] { display: none; }

/* Swatches */
.pfp-swatch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.pfp-swatch {
	width: 100%; aspect-ratio: 1/1; border-radius: 50%; border: 2px solid var(--pfp-border);
	padding: 0; min-height: 0;
}
.pfp-swatch[data-active="true"] { border-color: var(--pfp-primary); box-shadow: 0 0 0 2px var(--pfp-primary-soft); }

/* Shapes */
.pfp-shape-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.pfp-shape-btn {
	border: 1px solid var(--pfp-border); background: var(--pfp-surface); color: var(--pfp-text); border-radius: var(--pfp-radius-sm);
	padding: 14px 6px; font-size: 12px; font-weight: 700; min-height: 60px;
}
.pfp-shape-btn[data-active="true"] { background: var(--pfp-primary-soft); border-color: var(--pfp-primary); color: var(--pfp-primary-hover); }

/* Filters */
.pfp-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pfp-filter-btn {
	border: 1px solid var(--pfp-border); background: var(--pfp-surface); color: var(--pfp-text); border-radius: var(--pfp-radius-sm);
	padding: 10px; font-size: 13px; font-weight: 600; text-align: center; min-height: 44px;
}
.pfp-filter-btn[data-active="true"] { background: var(--pfp-primary-soft); border-color: var(--pfp-primary); color: var(--pfp-primary-hover); }

/* ---------- Modal ---------- */
.pfp-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.pfp-modal[hidden] { display: none; }
.pfp-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.pfp-modal__panel {
	position: relative; background: var(--pfp-card); border: 1px solid var(--pfp-border); border-radius: var(--pfp-radius);
	padding: 24px; width: min(420px, 92vw); box-shadow: var(--pfp-shadow-lg); color: var(--pfp-text);
}
.pfp-modal__panel h2 { margin-top: 0; font-size: 18px; color: var(--pfp-text); }

/* ---------- Toast ---------- */
.pfp-toast {
	position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
	background: var(--pfp-card); border: 1px solid var(--pfp-border); color: var(--pfp-text);
	padding: 12px 20px; border-radius: 999px;
	font-size: 14px; font-weight: 600; z-index: 200; box-shadow: var(--pfp-shadow-lg);
}

/* ---------- Mobile ---------- */
.pfp-mobile-download-bar { display: none; }

@media (max-width: 860px) {
	.pfp-editor__body { flex-direction: column; padding: 12px; align-items: stretch; }
	.pfp-controls { flex: 1 1 auto; width: 100%; max-height: none; padding-bottom: 90px; }
	.pfp-canvas-area { align-self: stretch; }
	.pfp-canvas-wrap { max-width: 100%; }
	.pfp-mobile-download-bar {
		display: block; position: sticky; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		background: var(--pfp-card); border-top: 1px solid var(--pfp-border); z-index: 10;
	}
	.pfp-toolbar .pfp-btn--download { display: none; }
	.pfp-tool { min-width: 52px; }
}

@media (min-width: 861px) {
	.pfp-mobile-download-bar { display: none !important; }
}