/* Print Test Page — frontend button styles.
   Everything is scoped under .ptp-app-q7m3k so it never leaks into
   the rest of the site's layout, and is safe to repeat multiple
   times on the same page. */

.ptp-app-q7m3k {
	margin: 16px 0;
	text-align: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.ptp-app-q7m3k .ptp-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 14px;
}

.ptp-app-q7m3k .ptp-brand-name {
	font-weight: 700;
	font-size: 15px;
	color: #1e2733;
}

.ptp-app-q7m3k .ptp-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

.ptp-app-q7m3k .ptp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	color: #ffffff;
	background: #0f9d9a;
	padding: 14px 26px;
	border-radius: 12px;
	box-shadow: 0 4px 0 rgba(30, 40, 70, 0.55), 0 6px 14px rgba(0, 0, 0, 0.12);
	transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
	border: none;
	cursor: pointer;
	line-height: 1.2;
}

.ptp-app-q7m3k .ptp-btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.05);
	box-shadow: 0 6px 0 rgba(30, 40, 70, 0.55), 0 10px 18px rgba(0, 0, 0, 0.16);
	color: #ffffff;
}

.ptp-app-q7m3k .ptp-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 0 rgba(30, 40, 70, 0.55), 0 3px 8px rgba(0, 0, 0, 0.12);
}

/* Individual solid-color buttons: colored background is set inline
   per-button (via style="background-color:..."), this just supplies
   the shared shape/shadow and readable text color. */
.ptp-app-q7m3k .ptp-buttons-grid {
	gap: 12px;
}

.ptp-app-q7m3k .ptp-btn-solid {
	min-width: 150px;
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
	box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 6px 14px rgba(0, 0, 0, 0.15);
}

.ptp-app-q7m3k .ptp-btn-solid:hover {
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35), 0 10px 18px rgba(0, 0, 0, 0.2);
}

/* Ink Test Page buttons: same colour as the solid-page button, with an
   inner ring so the two are easy to tell apart side by side. */
.ptp-app-q7m3k .ptp-btn-ink {
	outline: 2px solid rgba(255, 255, 255, 0.75);
	outline-offset: -7px;
}

@media (max-width: 480px) {
	.ptp-app-q7m3k .ptp-buttons {
		flex-direction: column;
	}
	.ptp-app-q7m3k .ptp-btn {
		width: 100%;
	}
}

/* ---- [upload_print_page] ---- */
.ptp-app-q7m3k .ptp-upload { max-width: 640px; margin: 0 auto; }
.ptp-app-q7m3k .ptp-drop {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	padding: 34px 18px; border: 2px dashed #0f9d9a; border-radius: 14px;
	background: #f1fbfb; cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.ptp-app-q7m3k .ptp-drop:hover,
.ptp-app-q7m3k .ptp-drop.ptp-over { background: #e0f6f5; border-color: #0b7b79; }
.ptp-app-q7m3k .ptp-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ptp-app-q7m3k .ptp-drop-icon { font-size: 30px; color: #0f9d9a; line-height: 1; }
.ptp-app-q7m3k .ptp-drop-title { font-weight: 700; font-size: 16px; color: #1e2733; }
.ptp-app-q7m3k .ptp-drop-sub { font-size: 13px; color: #5b6470; }
.ptp-app-q7m3k .ptp-upload-msg { margin: 12px 0 0; color: #b42318; font-size: 14px; font-weight: 600; }
.ptp-app-q7m3k .ptp-upload-preview {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0 0;
}
.ptp-app-q7m3k .ptp-thumb {
	width: 110px; height: 110px; border: 1px solid #d6dbe1; border-radius: 8px; background: #fff;
	display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;
}
.ptp-app-q7m3k .ptp-thumb img { max-width: 100%; max-height: 100%; display: block; }
.ptp-app-q7m3k .ptp-thumb span { font-size: 12px; font-weight: 700; color: #5b6470; padding: 6px; word-break: break-all; text-align: center; }
.ptp-app-q7m3k .ptp-upload-opts {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 16px 0 4px;
}
.ptp-app-q7m3k .ptp-upload-opts label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: #5b6470; text-align: left; }
.ptp-app-q7m3k .ptp-upload-opts select {
	font-size: 14px; padding: 8px 10px; border: 1px solid #c4cad2; border-radius: 8px; background: #fff; color: #1e2733;
}
.ptp-app-q7m3k .ptp-upload .ptp-buttons { margin-top: 16px; }
.ptp-app-q7m3k .ptp-upload-print[disabled] { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.ptp-app-q7m3k .ptp-upload-clear { background: #5b6470; }
.ptp-app-q7m3k .ptp-upload-status { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: #0b7b79; }
.ptp-app-q7m3k .ptp-upload-note { margin: 12px 0 0; font-size: 12px; color: #7a828c; }
.ptp-app-q7m3k [hidden] { display: none !important; }

.ptp-app-q7m3k .ptp-upload-opts.ptp-opts-off { display: none !important; }