/* TPS photo identification form ([tps_photo_id]). Pixel units on purpose: the theme sets html font-size to 62.5%. */
.tps-pid {
	--pid-green: #1B3B24; --pid-deep: #14301F; --pid-gold: #FFD54F; --pid-gold-d: #E8B92E; --pid-light: #F4F7F2;
	--pid-line: #E4E7E1; --pid-muted: #5B6770; --pid-body: #33413A; --pid-red: #B32D2E;
	width: 100%; max-width: 760px; margin: 0 auto; text-align: left;
	font-size: 16px; line-height: 1.5; color: var(--pid-body);
}
.tps-pid *, .tps-pid *::before, .tps-pid *::after { box-sizing: border-box; }
.tps-pid__form, .tps-pid__done {
	background: #fff; border: 1px solid var(--pid-line); border-radius: 18px; padding: 28px;
	box-shadow: 0 12px 34px rgba(20, 48, 31, .08);
}
.tps-pid__form[hidden], .tps-pid__done[hidden] { display: none; }

/* photo picker: "Take a photo" (camera) and "Upload a photo" (gallery or files) */
.tps-pid__drop { margin: 0 0 22px; }
.tps-pid__picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tps-pid__pickwrap { position: relative; }
.tps-pid__file { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.tps-pid__pick {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	min-height: 132px; padding: 20px 14px; border: 2px dashed #B9CBBF; border-radius: 14px;
	background: var(--pid-light); color: var(--pid-green); text-align: center; cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.tps-pid__pick:hover, .tps-pid__file:focus-visible + .tps-pid__pick { border-color: var(--pid-green); background: #EEF3EC; }
.tps-pid__file:focus-visible + .tps-pid__pick { outline: 3px solid rgba(27, 59, 36, .3); outline-offset: 2px; }
.tps-pid__file:disabled + .tps-pid__pick { cursor: default; opacity: .55; }
.tps-pid.has-photos .tps-pid__pick { min-height: 72px; flex-direction: row; gap: 10px; padding: 14px; }
.tps-pid__icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--pid-gold); color: var(--pid-green); flex: 0 0 auto; }
.tps-pid.has-photos .tps-pid__icon { width: 38px; height: 38px; }
.tps-pid__pick-t { font-family: Lexend, sans-serif; font-weight: 700; font-size: 17px; }
.tps-pid__hint { margin: 10px 0 0; font-size: 14.5px; color: var(--pid-muted); text-align: center; }
/* Mouse-and-keyboard devices have no camera shortcut worth showing: keep only "Upload a photo". */
@media (hover: hover) and (pointer: fine) {
	.tps-pid__pickwrap--cam { display: none; }
	.tps-pid__picks { grid-template-columns: 1fr; }
}
.tps-pid__thumbs { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 12px 0 0; padding: 0; }
.tps-pid__thumbs:empty { display: none; }
.tps-pid__thumb { position: relative; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; border: 1px solid var(--pid-line); background: var(--pid-light); }
.tps-pid__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tps-pid__thumb-ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 13px; color: var(--pid-muted); }
.tps-pid__thumb-x {
	position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: 0; border-radius: 50%;
	background: rgba(20, 48, 31, .8); color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
.tps-pid__thumb-x:hover { background: var(--pid-red); }
.tps-pid__thumb-x:focus-visible { background: var(--pid-red); outline: 2px solid #fff; outline-offset: -4px; }

/* fields */
.tps-pid__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.tps-pid__field { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tps-pid__field--full { grid-column: 1 / -1; }
.tps-pid__field label { font-weight: 600; font-size: 14.5px; color: var(--pid-green); }
.tps-pid__opt { font-weight: 400; color: var(--pid-muted); }
.tps-pid__field input, .tps-pid__field select, .tps-pid__field textarea {
	width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #D5DAD2; border-radius: 10px;
	background: #fff; color: var(--pid-deep); font: inherit; font-size: 16px;
}
.tps-pid__field textarea { min-height: 96px; resize: vertical; }
.tps-pid__field input:focus, .tps-pid__field select:focus, .tps-pid__field textarea:focus {
	border-color: var(--pid-green); outline: 3px solid rgba(27, 59, 36, .18); outline-offset: 0;
}
.tps-pid__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* submit + messages */
.tps-pid__submit {
	display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin-top: 22px;
	border: 0; border-radius: 12px; background: var(--pid-gold); color: var(--pid-green);
	font-family: Lexend, sans-serif; font-weight: 700; font-size: 17px; cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.tps-pid__submit:hover { background: var(--pid-gold-d); }
.tps-pid__submit:focus-visible { outline: 3px solid rgba(27, 59, 36, .35); outline-offset: 2px; }
.tps-pid__submit:disabled { opacity: .7; cursor: not-allowed; }
.tps-pid__status { margin: 12px 0 0; min-height: 1em; font-size: 15px; color: var(--pid-muted); }
.tps-pid__status:empty { margin: 0; min-height: 0; }
.tps-pid__status.is-error { color: var(--pid-red); font-weight: 600; }
.tps-pid__status.is-warn { color: #8A5A00; }
.tps-pid__fine { margin: 14px 0 0; font-size: 14px; color: var(--pid-muted); text-align: center; }
.tps-pid__fine a { color: var(--pid-green); font-weight: 700; }

/* success */
.tps-pid__done { text-align: center; padding: 36px 28px; outline: none; }
.tps-pid__done-icon { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--pid-gold); color: var(--pid-green); }
.tps-pid__done-t { margin: 14px 0 6px; font-family: Lexend, sans-serif; font-weight: 800; font-size: 24px; color: var(--pid-green); }
.tps-pid__done-d { margin: 0 auto; max-width: 520px; font-size: 16.5px; color: var(--pid-body); }
.tps-pid__done-call { display: inline-block; margin-top: 18px; font-weight: 700; color: var(--pid-green); border-bottom: 2px solid var(--pid-gold); text-decoration: none; }

@media (max-width: 767px) {
	.tps-pid__form, .tps-pid__done { padding: 20px 16px; border-radius: 16px; }
	.tps-pid__grid { grid-template-columns: 1fr; gap: 14px; }
	.tps-pid__pick { min-height: 118px; }
	.tps-pid__thumb { width: 84px; height: 84px; }
}
@media (prefers-reduced-motion: reduce) {
	.tps-pid * { transition: none !important; }
}
