/* PDF to Excel Converter — self-contained; designed to sit inside any theme. */

.p2x-wrap {
	--p2x-ink: #17232b;
	--p2x-mut: #5c6b74;
	--p2x-green: #1d6f42;      /* spreadsheet green */
	--p2x-green-d: #14532f;
	--p2x-red: #c4362a;        /* pdf red */
	--p2x-line: #dfe6e2;
	--p2x-bg: #ffffff;
	--p2x-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	max-width: 560px;
	margin: 2rem auto;
	padding: 2rem 1.75rem 1.75rem;
	background: var(--p2x-bg);
	color: var(--p2x-ink);
	border: 1px solid var(--p2x-line);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(23, 35, 43, .04), 0 12px 32px rgba(23, 35, 43, .07);
	font-size: 16px;
	line-height: 1.5;
}

.p2x-hidden { display: none !important; }

/* Header */
.p2x-head { text-align: center; margin-bottom: 1.5rem; }
.p2x-chips { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .75rem; font-family: var(--p2x-mono); font-size: .72rem; letter-spacing: .06em; }
.p2x-chip { padding: .2rem .55rem; border-radius: 5px; font-weight: 700; color: #fff; }
.p2x-chip-pdf { background: var(--p2x-red); }
.p2x-chip-xls { background: var(--p2x-green); }
.p2x-arrow { color: var(--p2x-mut); font-size: 1rem; }
.p2x-title { margin: 0 0 .4rem; font-size: 1.65rem; line-height: 1.2; font-weight: 750; letter-spacing: -.01em; color: var(--p2x-ink); }
.p2x-sub { margin: 0 auto; max-width: 42ch; color: var(--p2x-mut); font-size: .95rem; }
.p2x-price-inline { color: var(--p2x-green-d); }

/* Dropzone: drawn as a selected spreadsheet range */
.p2x-drop {
	position: relative;
	border: 2px solid var(--p2x-green);
	border-radius: 8px;
	padding: 2.4rem 1rem;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	background: #fbfdfc;
	transition: box-shadow .15s ease, background .15s ease;
}
.p2x-drop::after { /* the "fill handle" corner square */
	content: "";
	position: absolute;
	right: -5px;
	bottom: -5px;
	width: 10px;
	height: 10px;
	background: var(--p2x-green);
	border: 2px solid #fff;
	border-radius: 2px;
}
.p2x-drop-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, var(--p2x-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--p2x-line) 1px, transparent 1px);
	background-size: 64px 28px;
	opacity: .55;
	pointer-events: none;
}
.p2x-drop:hover, .p2x-drop:focus-visible, .p2x-drop.p2x-over {
	background: #f2f9f4;
	box-shadow: 0 0 0 4px rgba(29, 111, 66, .12);
	outline: none;
}
.p2x-drop-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.p2x-drop-title { font-weight: 700; font-size: 1.05rem; }
.p2x-drop-or { color: var(--p2x-mut); font-size: .85rem; }
.p2x-drop-note { color: var(--p2x-mut); font-size: .8rem; margin-top: .35rem; }

/* Buttons */
.p2x-btn {
	display: inline-block;
	border: 0;
	border-radius: 8px;
	padding: .7rem 1.25rem;
	font-size: .95rem;
	font-weight: 650;
	cursor: pointer;
	text-align: center;
	text-decoration: none !important;
	transition: filter .12s ease, transform .05s ease;
	line-height: 1.2;
}
.p2x-btn:hover { filter: brightness(1.06); }
.p2x-btn:active { transform: translateY(1px); }
.p2x-btn-main { background: var(--p2x-green); color: #fff !important; width: 100%; }
.p2x-btn-stripe { background: var(--p2x-ink); color: #fff !important; flex: 1; }
.p2x-btn-paypal { background: #ffc439; color: #17232b !important; flex: 1; }
.p2x-btn-ghost { background: transparent; color: var(--p2x-green-d) !important; border: 1.5px solid var(--p2x-green); padding: .45rem .9rem; }
.p2x-btn[disabled] { opacity: .55; cursor: wait; }

/* Pay step */
.p2x-fileline { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.p2x-filename { font-family: var(--p2x-mono); font-size: .85rem; word-break: break-all; }
.p2x-link { background: none; border: 0; padding: 0; color: var(--p2x-mut); text-decoration: underline; cursor: pointer; font-size: .82rem; white-space: nowrap; }
.p2x-total { display: flex; justify-content: space-between; align-items: baseline; padding: .8rem 0; border-top: 1px solid var(--p2x-line); border-bottom: 1px solid var(--p2x-line); margin-bottom: 1rem; font-weight: 650; }
.p2x-amount { font-family: var(--p2x-mono); font-size: 1.35rem; color: var(--p2x-green-d); }
.p2x-code { display: flex; gap: .5rem; }
.p2x-code input {
	flex: 1;
	border: 1px solid var(--p2x-line);
	border-radius: 8px;
	padding: .55rem .75rem;
	font-family: var(--p2x-mono);
	font-size: .9rem;
	text-transform: uppercase;
	color: var(--p2x-ink);
	background: #fff;
}
.p2x-code input:focus { outline: 2px solid rgba(29, 111, 66, .35); border-color: var(--p2x-green); }
.p2x-code-msg { min-height: 1.2em; font-size: .82rem; margin: .35rem 0 .9rem; color: var(--p2x-mut); }
.p2x-code-msg.ok { color: var(--p2x-green-d); }
.p2x-code-msg.err { color: var(--p2x-red); }
.p2x-paybtns { display: flex; gap: .6rem; flex-wrap: wrap; }
.p2x-note { color: var(--p2x-mut); font-size: .8rem; text-align: center; margin: .9rem 0 0; }

/* Done step */
#p2x-step-done { text-align: center; }
.p2x-spinner {
	width: 34px; height: 34px;
	margin: .5rem auto 1rem;
	border: 3px solid var(--p2x-line);
	border-top-color: var(--p2x-green);
	border-radius: 50%;
	animation: p2x-spin .8s linear infinite;
}
@keyframes p2x-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .p2x-spinner { animation-duration: 2.4s; } }
.p2x-wait-msg, .p2x-done-msg { color: var(--p2x-mut); }
.p2x-done-msg { color: var(--p2x-ink); font-weight: 650; margin-bottom: 1rem; }

/* Errors */
.p2x-error {
	margin: 1rem 0 0;
	padding: .65rem .9rem;
	border-radius: 8px;
	background: #fdf1f0;
	border: 1px solid #f2c9c5;
	color: var(--p2x-red);
	font-size: .88rem;
}

@media (max-width: 480px) {
	.p2x-wrap { margin: 1rem .5rem; padding: 1.5rem 1.1rem 1.25rem; }
	.p2x-paybtns { flex-direction: column; }
	.p2x-btn-stripe, .p2x-btn-paypal { width: 100%; }
}
