/* =========================================================================
   Video to JPG Converter — styles
   Design tokens taken from the shared UI/DESIGN SPEC so this plugin matches
   the rest of the site (accent #6c5ce7, white card, dashed dropzone, etc.).
   ========================================================================= */

.vjc-card {
	/* ---- Color tokens ---- */
	--vjc-accent:        #6c5ce7;
	--vjc-accent-dark:   #5848d6;
	--vjc-blue:          #3b82f6;
	--vjc-blue-dark:     #2563eb;
	--vjc-text:          #1f2430;
	--vjc-muted:         #6b7280;
	--vjc-border:        #e3e6ee;
	--vjc-card-bg:       #ffffff;
	--vjc-success:       #16a34a;
	--vjc-success-dark:  #15803d;
	--vjc-error:         #dc2626;
	--vjc-note-bg:       #f3f1ff;
	--vjc-note-border:   #e0daff;
	--vjc-note-text:     #4b3fb3;
	--vjc-warn-bg:       #fef3f2;
	--vjc-warn-border:   #fecdca;
	--vjc-warn-text:     #b42318;
	--vjc-pill-bg:       #f7f8fc;
	--vjc-dz-border:     #cfd4e4;
	--vjc-dz-bg:         #fafbff;
	--vjc-dz-hover-bg:   #f5f4ff;

	box-sizing: border-box;
	max-width: 640px;
	margin: 1.5em auto;
	padding: 24px;
	background: var(--vjc-card-bg);
	border: 1px solid var(--vjc-border);
	border-radius: 14px;
	box-shadow: 0 8px 30px rgba(20, 20, 60, .06);
	color: var(--vjc-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
}

.vjc-card *,
.vjc-card *::before,
.vjc-card *::after {
	box-sizing: border-box;
}

/* ---- Typography ---- */
.vjc-title {
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
	margin: 0 0 6px;
	color: var(--vjc-text);
}

.vjc-desc {
	font-size: 0.92rem;
	color: var(--vjc-muted);
	text-align: center;
	margin: 0 0 16px;
}

/* ---- Info note box ---- */
.vjc-note {
	background: var(--vjc-note-bg);
	border: 1px solid var(--vjc-note-border);
	color: var(--vjc-note-text);
	font-size: 0.85rem;
	padding: 10px 14px;
	border-radius: 10px;
	margin-bottom: 18px;
}

/* ---- Blocks ---- */
.vjc-block { margin-bottom: 18px; }

.vjc-block-label {
	font-weight: 600;
	font-size: 0.95rem;
	margin-bottom: 8px;
}

/* ---- Buttons ---- */
.vjc-btn {
	display: inline-block;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: var(--vjc-accent);
	border: none;
	border-radius: 8px;
	padding: 10px 22px;
	cursor: pointer;
	transition: background .15s ease, opacity .15s ease;
	line-height: 1.2;
}
.vjc-btn:hover      { background: var(--vjc-accent-dark); }
.vjc-btn:disabled   { opacity: .6; cursor: not-allowed; }

.vjc-btn-green      { background: var(--vjc-success); }
.vjc-btn-green:hover{ background: var(--vjc-success-dark); }

/* ---- Dropzone ---- */
.vjc-dropzone {
	border: 2px dashed var(--vjc-dz-border);
	background: var(--vjc-dz-bg);
	border-radius: 12px;
	padding: 30px 20px;
	text-align: center;
	transition: border-color .15s ease, background .15s ease;
}
.vjc-dropzone.vjc-dragover {
	border-color: var(--vjc-accent);
	background: var(--vjc-dz-hover-bg);
}
.vjc-dz-icon  { color: var(--vjc-accent); display: block; margin: 0 auto 12px; }
.vjc-hint     { margin-top: 10px; font-size: 0.9rem; color: var(--vjc-muted); }
.vjc-subline  { margin-top: 6px; font-size: 0.8rem; color: var(--vjc-muted); }

/* ---- Video preview ---- */
.vjc-video {
	width: 100%;
	max-height: 380px;
	background: #000;
	border-radius: 10px;
	display: block;
}
.vjc-fileinfo {
	font-size: 0.82rem;
	color: var(--vjc-muted);
	margin: 8px 0 16px;
	word-break: break-word;
}

/* ---- Controls ---- */
.vjc-controls { display: flex; flex-direction: column; gap: 14px; }

.vjc-field {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.vjc-field-label {
	flex: 0 0 150px;
	font-weight: 600;
	font-size: 0.9rem;
}
/* Higher specificity + !important so themes (Astra etc.) that force
   input[type=number]{width:100%} cannot stretch these to full width. */
.vjc-card .vjc-input {
	background: #fff;
	border: 1px solid var(--vjc-border);
	border-radius: 8px;
	padding: 8px 10px;
	font: inherit;
	color: var(--vjc-text);
	width: 150px !important;
	max-width: 100%;
}
.vjc-card .vjc-input:focus {
	outline: none;
	border-color: var(--vjc-blue);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}
.vjc-card .vjc-input-sm { width: 72px !important; }

.vjc-fps-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 200px;
}
.vjc-range-wrap {
	position: relative;
	flex: 1;
	min-width: 160px;
	padding-top: 34px; /* room for the value bubble above the thumb */
}

/* Value bubble above the slider thumb */
.vjc-bubble {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	background: #4b5563;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
	padding: 5px 9px;
	border-radius: 6px;
	white-space: nowrap;
	pointer-events: none;
}
.vjc-bubble::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #4b5563;
}
/* FPS slider — the blue "fill" is set inline via JS (a left-to-right gradient),
   so the native track is made transparent in every engine. */
.vjc-range {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 12px;
	border-radius: 999px;
	background: #e3e8f0; /* fallback; replaced by JS gradient */
	box-shadow: none;
	outline: none;
	cursor: pointer;
}
.vjc-range::-webkit-slider-runnable-track {
	height: 12px;
	border-radius: 999px;
	background: transparent;
}
.vjc-range::-moz-range-track {
	height: 12px;
	border-radius: 999px;
	background: transparent;
}
.vjc-range::-moz-range-progress { background: transparent; height: 12px; }
.vjc-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	margin-top: -6px; /* centre thumb on the 12px track */
	border-radius: 50%;
	background: var(--vjc-blue-dark);
	border: 3px solid #fff;
	box-shadow: 0 2px 6px rgba(37, 99, 235, .30);
	cursor: pointer;
}
.vjc-range::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--vjc-blue-dark);
	border: 3px solid #fff;
	box-shadow: 0 2px 6px rgba(37, 99, 235, .30);
	cursor: pointer;
}
.vjc-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(59, 130, 246, .20); }
.vjc-range:focus::-moz-range-thumb { box-shadow: 0 0 0 6px rgba(59, 130, 246, .20); }

/* ---- Checkbox ---- */
.vjc-check label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
	cursor: pointer;
}
.vjc-check input { accent-color: var(--vjc-accent); width: 16px; height: 16px; }

.vjc-actions { margin-top: 4px; }

/* ---- Output ---- */
.vjc-out-title { font-size: 1.15rem; font-weight: 700; margin: 6px 0; }
.vjc-out-note  { font-size: 0.85rem; color: var(--vjc-muted); margin: 0 0 14px; }

/* Progress */
.vjc-progress-wrap { margin: 12px 0; }
.vjc-progress {
	height: 10px;
	background: var(--vjc-pill-bg);
	border: 1px solid var(--vjc-border);
	border-radius: 999px;
	overflow: hidden;
}
.vjc-progress-bar {
	height: 100%;
	width: 0%;
	background: var(--vjc-accent);
	transition: width .2s ease;
}
.vjc-progress-text {
	font-size: 0.8rem;
	color: var(--vjc-muted);
	margin-top: 6px;
}

/* Status message */
.vjc-status {
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 0.88rem;
	margin: 12px 0;
}
.vjc-status.vjc-ok {
	background: #ecfdf3;
	border: 1px solid #abefc6;
	color: var(--vjc-success-dark);
}
.vjc-status.vjc-err {
	background: var(--vjc-warn-bg);
	border: 1px solid var(--vjc-warn-border);
	color: var(--vjc-warn-text);
}
.vjc-status.vjc-info {
	background: var(--vjc-note-bg);
	border: 1px solid var(--vjc-note-border);
	color: var(--vjc-note-text);
}

/* Format buttons */
.vjc-format-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0;
}

/* Animated result */
.vjc-anim-result { margin: 12px 0; }
.vjc-anim-result img {
	max-width: 100%;
	border: 1px solid var(--vjc-border);
	border-radius: 10px;
	display: block;
	margin-bottom: 10px;
}

/* Frames grid */
.vjc-frames {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
	margin-top: 12px;
}
.vjc-frame {
	background: var(--vjc-pill-bg);
	border: 1px solid var(--vjc-border);
	border-radius: 10px;
	padding: 6px;
	text-align: center;
}
.vjc-frame img { width: 100%; border-radius: 6px; display: block; }
.vjc-frame a {
	display: inline-block;
	margin-top: 6px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--vjc-accent);
	text-decoration: none;
}
.vjc-frame a:hover { text-decoration: underline; }

/* Spinner */
.vjc-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid rgba(108, 92, 231, .3);
	border-top-color: var(--vjc-accent);
	border-radius: 50%;
	animation: vjc-spin .8s linear infinite;
	vertical-align: middle;
	margin-right: 6px;
}
@keyframes vjc-spin { to { transform: rotate(360deg); } }

/* =========================================================================
   Responsive — narrow screens
   ========================================================================= */
@media (max-width: 520px) {
	.vjc-card { padding: 16px; border-radius: 12px; }
	.vjc-field { flex-direction: column; align-items: stretch; }
	.vjc-field-label { flex: none; }
	.vjc-card .vjc-input { width: 100% !important; }
	.vjc-card .vjc-input-sm { width: 100% !important; }
	.vjc-fps-wrap { width: 100%; flex-direction: column; align-items: stretch; }
	.vjc-range-wrap { width: 100%; }
	.vjc-btn { width: 100%; }
	.vjc-format-buttons .vjc-btn { width: 100%; }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.vjc-spinner { animation: none; }
	.vjc-btn, .vjc-dropzone, .vjc-progress-bar, .vjc-input { transition: none; }
}