/* 123证照 - site styles on top of Bootstrap 5 */

:root {
	--zz-primary: #1f6fc5;
	--zz-primary-dark: #17589e;
	--zz-primary-soft: #e8f1fb;
	--zz-accent: #ff8a00;
	--zz-accent-dark: #e67600;
	--zz-ink: #1d2733;
	--zz-muted: #5f6b7a;
	--zz-border: #dbe3ec;
	--zz-bg: #f5f8fb;

	--bs-primary: var(--zz-primary);
	--bs-primary-rgb: 31, 111, 197;
	--bs-link-color: var(--zz-primary);
	--bs-link-color-rgb: 31, 111, 197;
	--bs-link-hover-color: var(--zz-primary-dark);
	--bs-link-hover-color-rgb: 23, 88, 158;
	--bs-body-color: var(--zz-ink);
	--bs-body-bg: #fff; /* inputs, modals, cards; the page itself uses --zz-bg via body */
	--bs-border-color: var(--zz-border);
	--bs-body-font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
}

body {
	background: var(--zz-bg);
	-webkit-text-size-adjust: 100%;
}

h1, .h1 { font-size: calc(1.3rem + .6vw); font-weight: 700; }
h2, .h2 { font-size: calc(1.15rem + .3vw); font-weight: 600; }
h3, .h3 { font-size: 1.1rem; font-weight: 600; }
@media (min-width: 1200px) {
	h1, .h1 { font-size: 1.9rem; }
	h2, .h2 { font-size: 1.45rem; }
}

/* Buttons */
.btn-primary {
	--bs-btn-bg: var(--zz-primary);
	--bs-btn-border-color: var(--zz-primary);
	--bs-btn-hover-bg: var(--zz-primary-dark);
	--bs-btn-hover-border-color: var(--zz-primary-dark);
	--bs-btn-active-bg: var(--zz-primary-dark);
	--bs-btn-active-border-color: var(--zz-primary-dark);
	--bs-btn-disabled-bg: var(--zz-primary);
	--bs-btn-disabled-border-color: var(--zz-primary);
}
.btn-outline-primary {
	--bs-btn-color: var(--zz-primary);
	--bs-btn-border-color: var(--zz-primary);
	--bs-btn-hover-bg: var(--zz-primary);
	--bs-btn-hover-border-color: var(--zz-primary);
	--bs-btn-active-bg: var(--zz-primary-dark);
	--bs-btn-active-border-color: var(--zz-primary-dark);
}
.btn-accent {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--zz-accent);
	--bs-btn-border-color: var(--zz-accent);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--zz-accent-dark);
	--bs-btn-hover-border-color: var(--zz-accent-dark);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--zz-accent-dark);
	--bs-btn-active-border-color: var(--zz-accent-dark);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--zz-accent);
	--bs-btn-disabled-border-color: var(--zz-accent);
	--bs-btn-focus-shadow-rgb: 255, 138, 0;
}

/* Header */
.zz-header {
	background: #fff;
	border-bottom: 1px solid var(--zz-border);
}
.zz-header .navbar { padding-top: .5rem; padding-bottom: .5rem; }
.zz-brand-cn {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--zz-primary);
	letter-spacing: .02em;
}
.zz-brand-en {
	font-size: .75rem;
	color: var(--zz-muted);
	margin-top: .15rem;
}
.zz-slogan {
	color: var(--zz-muted);
	font-size: .95rem;
	padding-left: 1rem;
	margin-left: .25rem;
	border-left: 1px solid var(--zz-border);
}
.zz-header .nav-link {
	color: var(--zz-ink);
	font-weight: 500;
	border-radius: .5rem;
	padding: .5rem .75rem;
}
.zz-header .nav-link:hover,
.zz-header .nav-link:focus-visible { color: var(--zz-primary); background: var(--zz-primary-soft); }
.zz-header .nav-link.active { color: var(--zz-primary); }
.zz-header .zz-nav-shop { color: var(--zz-accent-dark); }
@media (max-width: 991.98px) {
	.zz-header .navbar-collapse { padding: .5rem 0 .25rem; }
}

/* Step progress bar */
.zz-steps {
	background: var(--zz-primary);
	color: #fff;
}
.zz-steps-list {
	list-style: none;
	display: flex;
	margin: 0;
	padding: .6rem 0;
	gap: .25rem;
	counter-reset: none;
}
.zz-step {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
}
.zz-step > a,
.zz-step > span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .35rem .25rem;
	border-radius: .5rem;
	color: rgba(255, 255, 255, .9);
	text-decoration: none;
	min-height: 44px;
}
.zz-step > a:hover,
.zz-step > a:focus-visible { background: rgba(255, 255, 255, .12); color: #fff; }
.zz-step > .is-disabled { color: rgba(255, 255, 255, .5); }
.zz-step-num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	border: 2px solid currentColor;
	font-weight: 700;
	font-size: .9rem;
	line-height: 1;
}
.zz-step.is-done .zz-step-num { background: rgba(255, 255, 255, .2); border-color: transparent; }
.zz-step.is-current > span { color: #fff; background: rgba(255, 255, 255, .16); }
.zz-step.is-current .zz-step-num { background: #fff; color: var(--zz-primary); border-color: #fff; }
.zz-step-label {
	font-size: .95rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.zz-step.is-current .zz-step-label { font-weight: 700; }
@media (max-width: 767.98px) {
	.zz-steps-list { padding: .4rem 0; gap: 0; }
	.zz-step > a,
	.zz-step > span {
		flex-direction: column;
		gap: .2rem;
		padding: .3rem .1rem;
	}
	.zz-step-num { width: 1.6rem; height: 1.6rem; font-size: .8rem; }
	.zz-step-label {
		font-size: .7rem;
		white-space: normal;
		text-align: center;
		line-height: 1.15;
	}
}

/* Cards / panels */
.zz-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--zz-border);
	border-radius: 1rem;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.zz-card-body { padding: 1.25rem; }
@media (min-width: 768px) {
	.zz-card-body { padding: 1.75rem; }
}

.zz-tip {
	background: #fff8e6;
	border: 1px solid #ffd58a;
	border-radius: .75rem;
	padding: .75rem 1rem;
}

/* Bottom action bar used in the photo flow; sticks to the bottom on phones */
.zz-actions {
	display: flex;
	gap: .75rem;
	justify-content: space-between;
	align-items: center;
}
.zz-actions .btn { min-width: 8rem; }
@media (max-width: 575.98px) {
	.zz-actions.zz-actions-sticky {
		position: sticky;
		bottom: 0;
		z-index: 1020;
		margin: 0 -12px;
		padding: .75rem 12px calc(.75rem + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .96);
		border-top: 1px solid var(--zz-border);
		backdrop-filter: blur(6px);
	}
	.zz-actions .btn { flex: 1 1 0; min-width: 0; }
}

/* Home page */
.zz-hero {
	background: linear-gradient(135deg, #ffffff 0%, var(--zz-primary-soft) 100%);
	border: 1px solid var(--zz-border);
	border-radius: 1.25rem;
	overflow: hidden;
}
.zz-hero-img {
	max-height: 360px;
	width: auto;
	max-width: 100%;
}
.zz-type-picker .form-select { font-size: 1rem; }
.zz-type-options label { cursor: pointer; }
.zz-type-options .form-check {
	padding: .6rem .75rem .6rem 2.25rem;
	border: 1px solid var(--zz-border);
	border-radius: .6rem;
	background: #fff;
	margin-bottom: .5rem;
}
.zz-type-options .form-check:has(input:checked) {
	border-color: var(--zz-primary);
	background: var(--zz-primary-soft);
}
.zz-type-options .form-check-input { margin-left: -1.5rem; }
.zz-type-options a { white-space: nowrap; }
.zz-feature-list li { margin-bottom: .35rem; }

/* Upload page */
.zz-dropzone {
	position: relative;
	display: block;
	border: 2px dashed #a9c4e4;
	border-radius: 1rem;
	background: #fbfdff;
	padding: 1.5rem 1rem;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}
.zz-dropzone:hover,
.zz-dropzone.is-dragover { border-color: var(--zz-primary); background: var(--zz-primary-soft); }
.zz-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}
.zz-file-input:focus-visible ~ .zz-dropzone { outline: 2px solid var(--zz-primary); outline-offset: 2px; }
.zz-dropzone-icon { font-size: 2.5rem; color: var(--zz-primary); line-height: 1; }
.zz-upload-preview {
	max-height: 260px;
	max-width: 100%;
	border-radius: .5rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

/* Crop page */
.zz-crop-stage {
	position: relative;
	width: 100%;
	height: 560px;
	background: #2b2f36;
	border-radius: .75rem;
	overflow: hidden;
}
@media (max-width: 991.98px) {
	.zz-crop-stage { height: min(68vh, 560px); }
}
@media (max-width: 575.98px) {
	/* leave room on a phone screen for the toolbar and the sticky prev/next bar */
	.zz-crop-stage {
		height: min(56vh, 500px);
		border-radius: .5rem;
	}
	.zz-crop-toolbar { margin-top: .5rem !important; }
	.zz-crop-preview-wrap .zz-crop-preview { width: var(--zz-pw-sm); height: var(--zz-ph-sm); }
}
.zz-crop-stage > img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	margin: 0 auto;
}
.zz-crop-loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	z-index: 5;
}

/* Head-position guide lines drawn inside the crop box */
.zz-guides {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}
.zz-guide {
	position: absolute;
	background: rgba(255, 30, 30, .85);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}
.zz-guide-h { height: 2px; left: 10%; right: 10%; }
.zz-guide-v { width: 2px; }
.zz-guide-eye { background: rgba(0, 110, 255, .9); left: 20%; right: 20%; height: 2px; }

.zz-crop-preview-wrap {
	display: flex;
	align-items: center;
	gap: .75rem;
}
.zz-crop-preview {
	width: var(--zz-pw);
	height: var(--zz-ph);
	overflow: hidden;
	background: #eee;
	border: 1px solid var(--zz-border);
	border-radius: .25rem;
	flex: 0 0 auto;
}
.zz-crop-toolbar .btn { min-width: 44px; min-height: 44px; }

/* Make cropper.js handles finger-sized on touch screens */
.zz-crop-stage .cropper-view-box {
	outline: 2px solid #fff;
	outline-color: rgba(255, 255, 255, .9);
}
.zz-crop-stage .cropper-point {
	background-color: #fff;
	opacity: 1;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
.zz-crop-stage .cropper-line { background-color: transparent; }
@media (pointer: coarse) {
	.zz-crop-stage .cropper-point {
		width: 22px;
		height: 22px;
		border-radius: 50%;
		opacity: .95;
	}
	.zz-crop-stage .cropper-point.point-n,
	.zz-crop-stage .cropper-point.point-s,
	.zz-crop-stage .cropper-point.point-e,
	.zz-crop-stage .cropper-point.point-w { display: none; }
	.zz-crop-stage .cropper-point.point-ne { right: -11px; top: -11px; }
	.zz-crop-stage .cropper-point.point-nw { left: -11px; top: -11px; }
	.zz-crop-stage .cropper-point.point-sw { bottom: -11px; left: -11px; }
	.zz-crop-stage .cropper-point.point-se {
		right: -11px;
		bottom: -11px;
		width: 22px;
		height: 22px;
		opacity: .95;
	}
	.zz-crop-stage .cropper-point.point-se::before { display: none; }
	.zz-crop-stage .cropper-line.line-n { top: -10px; height: 20px; }
	.zz-crop-stage .cropper-line.line-s { bottom: -10px; height: 20px; }
	.zz-crop-stage .cropper-line.line-e { right: -10px; width: 20px; }
	.zz-crop-stage .cropper-line.line-w { left: -10px; width: 20px; }
}

/* Background adjustment page */
.zz-enh-option {
	display: block;
	cursor: pointer;
	border: 2px solid var(--zz-border);
	border-radius: .75rem;
	background: #fff;
	padding: .5rem;
	text-align: center;
	transition: border-color .15s, box-shadow .15s;
	height: 100%;
}
.zz-enh-option img {
	max-width: 100%;
	height: auto;
	border-radius: .35rem;
}
.zz-enh-option .form-check-input { float: none; margin: 0 .35rem 0 0; vertical-align: -.15em; }
.zz-enh-option:has(input:checked) {
	border-color: var(--zz-primary);
	box-shadow: 0 0 0 .2rem rgba(31, 111, 197, .2);
}

/* Final page */
.zz-preview-4r {
	width: 100%;
	max-width: 600px;
	height: auto;
	border: 1px solid #bbb;
	border-radius: .25rem;
	background: #fff;
}
.zz-download-btn { text-align: left; }
.zz-download-btn small { display: block; font-weight: normal; opacity: .9; }

/* Content pages */
.zz-prose { font-size: 1.02rem; line-height: 1.8; }
.zz-prose img { max-width: 100%; height: auto; }
.zz-prose h2 { margin-top: 1.75rem; }
.zz-prose .zz-figure {
	display: block;
	margin: 1rem auto;
	padding: 3px;
	background: #fff;
	box-shadow: 0 0 6px rgba(0, 0, 0, .18);
	border-radius: .25rem;
}

/* Footer */
.zz-footer {
	background: #1c2632;
	color: rgba(255, 255, 255, .75);
	padding: 1.5rem 0 calc(1.5rem + env(safe-area-inset-bottom));
	text-align: center;
	font-size: .9rem;
}
.zz-footer a { color: rgba(255, 255, 255, .9); text-decoration: none; }
.zz-footer a:hover { color: #fff; text-decoration: underline; }
.zz-footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .25rem 1.25rem;
}
.zz-footer-note { color: #ffd58a; }

/* Legacy content: some database-provided HTML (extra_info) uses fixed widths */
.zz-legacy-html { overflow-x: auto; }
.zz-legacy-html img { max-width: 100%; height: auto; }
.zz-legacy-html table { max-width: 100%; }

/* Show touch or mouse instructions depending on the device */
.zz-hint-touch { display: none; }
@media (pointer: coarse) {
	.zz-hint-touch { display: inline; }
	.zz-hint-mouse { display: none; }
}

.btn-outline-accent {
	--bs-btn-color: var(--zz-accent-dark);
	--bs-btn-border-color: var(--zz-accent);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--zz-accent);
	--bs-btn-hover-border-color: var(--zz-accent);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--zz-accent-dark);
	--bs-btn-active-border-color: var(--zz-accent-dark);
	--bs-btn-focus-shadow-rgb: 255, 138, 0;
}

/* Flow pages: compact title on phones */
@media (max-width: 575.98px) {
	.zz-flow-title { font-size: 1.25rem; margin-bottom: .5rem !important; }
	.zz-flow-title small { display: inline !important; font-size: .8rem !important; margin-left: .25rem; }
	main.py-3 { padding-top: .75rem !important; }
}

/* Final page save dialog: the share-sheet button spans the full width on its own row */
.zz-photo-modal-footer #photoModalShare { flex: 1 0 100%; margin: 0 0 .25rem; }