/*==================================================================================

	PASSPORT & VISA PHOTO RESIZER — SIRF IS MODULE KA HISSA

	KAATNE WALA DABBA AB DO JAGAH HAI — image-cropper me aur yahan.

	CLAUDE.md ka qaida saaf hai: jis din doosre module ko bhi wahi
	cheez chahiye ho, us din wo global me jati hai (jaise .wiz-spots
	gayi thi). Wo din aaj hai, aur ye naql JAAN BOOJH KAR chhori gayi
	hai, chhupai nahi: global me le jane ka matlab image-cropper ki
	apni .ix-* har class ka naam badalna hai — us ki custom.css,
	custom.js aur index.php teenon me. Wo ek mukammal aur jaancha hua
	module hai, aur usay is kaam ke sath chherna alag faisla hai.

	Yani: yahan koi bug theek ho to image-cropper me bhi wahi
	tabdeeli karni hogi, jab tak ye dono ek jagah na aa jayen.

	Baqi sab kuch global se aata hai: .pdf-drop aur .wiz-status
	(section 125), .wiz-panel / .wiz-seg / .wiz-note / .wiz-table
	(104 se 122).

==================================================================================*/


/*----------------------------------------------------------
	TASVEER KA MAIDAN

	Checkerboard is liye hai ke shaffaf PNG par aadmi ko pata chale
	ke kahan tasveer hai aur kahan nahi. Bina is ke shaffaf logo
	safed background par "kaat diya gaya" lagta hai.
----------------------------------------------------------*/

.pp-stage{
	display: flex;
	justify-content: center;

	padding: 1rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);

	/* bohat lambi tasveer poora safha na kha jaye */
	max-height: 70vh;
	overflow: auto;
}

.pp-wrap{
	position: relative;
	display: inline-block;
	line-height: 0;

	background-color: var(--wiz-surface);
	background-image:
		linear-gradient(45deg, var(--wiz-border) 25%, transparent 25%),
		linear-gradient(-45deg, var(--wiz-border) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, var(--wiz-border) 75%),
		linear-gradient(-45deg, transparent 75%, var(--wiz-border) 75%);
	background-size: 16px 16px;
	background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.pp-preview{
	display: block;
	max-width: 100%;
	height: auto;

	/*
		Ungli se box kheenchte waqt browser safha na khiskaye. Sirf
		`touch-action: none` box par lagana kaafi nahi tha — kheenchna
		aksar tasveer se shuru hota hai.
	*/
	touch-action: none;
	user-select: none;
	-webkit-user-drag: none;
}


/*----------------------------------------------------------
	KAATNE WALA DABBA

	Bahar wala andhera `box-shadow` se banta hai, kisi alag overlay
	element se nahi. Wajah: overlay ke sath do cheezon ko hamesha ek
	sath khiskana parta hai aur wo ek din alag ho jati hain. Yahan
	sirf EK element hai, is liye wo mumkin hi nahi.
----------------------------------------------------------*/

.pp-box{
	position: absolute;
	box-sizing: border-box;

	border: 1px solid #fff;
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5);

	cursor: move;
	touch-action: none;
}

.pp-box:focus-visible{
	outline: 2px solid var(--wiz-primary);
	outline-offset: 2px;
}


/*
	TIHAAI KI LAKEEREIN — sirf dekhne ke liye.

	Ye sajawat hai, matn nahi, is liye `::before`/`::after` me hai:
	screen reader ke liye ye kuch bhi nahi, aur hona bhi nahi chahiye.
*/
.pp-box.has-grid::before,
.pp-box.has-grid::after{
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.pp-box.has-grid::before{
	border-left: 1px solid rgba(255, 255, 255, .45);
	border-right: 1px solid rgba(255, 255, 255, .45);

	/* baayan se ek tihai, dayan se ek tihai */
	left: 33.333%;
	right: 33.333%;
	width: auto;
}

.pp-box.has-grid::after{
	border-top: 1px solid rgba(255, 255, 255, .45);
	border-bottom: 1px solid rgba(255, 255, 255, .45);

	top: 33.333%;
	bottom: 33.333%;
	height: auto;
}


/*----------------------------------------------------------
	HANDLES

	Nazar aane wala nishan chhota hai, magar CHHOONE ka ilaqa bara —
	`::after` se. Ungli ka nishana taqreeban 44px hota hai aur 8px ka
	murabba us ke liye bemani hai.
----------------------------------------------------------*/

.pp-handle{
	position: absolute;
	width: 10px;
	height: 10px;

	background: #fff;
	border: 1px solid var(--wiz-primary);
	border-radius: 2px;
}

.pp-handle::after{
	content: "";
	position: absolute;

	/* nazar aane wale 10px ke gird 44px ka chhoone ka ilaqa */
	inset: -17px;
}

.pp-nw{ top: -5px;  left: -5px;  cursor: nwse-resize; }
.pp-n { top: -5px;  left: 50%; margin-left: -5px; cursor: ns-resize; }
.pp-ne{ top: -5px;  right: -5px; cursor: nesw-resize; }
.pp-w { top: 50%; margin-top: -5px; left: -5px;  cursor: ew-resize; }
.pp-e { top: 50%; margin-top: -5px; right: -5px; cursor: ew-resize; }
.pp-sw{ bottom: -5px; left: -5px;  cursor: nesw-resize; }
.pp-s { bottom: -5px; left: 50%; margin-left: -5px; cursor: ns-resize; }
.pp-se{ bottom: -5px; right: -5px; cursor: nwse-resize; }


/*----------------------------------------------------------
	APNI SHAKL LIKHNE KA KHANA
----------------------------------------------------------*/

.pp-ratio{
	max-width: 10rem;
	font-family: var(--wiz-font-mono);
}


/*----------------------------------------------------------
	DI GAYI TASVEER KA CARD — YAHAN WO EK BUTTON BHI HAI

	Baqi image modules me card sirf pehchan ke liye hai. Yahan wo
	NATEEJA dikhata hai (sirf kata hua hissa) aur click karne par usi
	tasveer ka editor kholta hai, is liye us ka clickable hona nazar
	bhi aana chahiye.

	`focus-visible` isi liye hai ke card `tabindex="0"` rakhta hai —
	keyboard se chalne wale ko pata chalna chahiye ke wo kahan hai.
----------------------------------------------------------*/

.pp-tile{
	cursor: pointer;
}

.pp-tile:hover{
	border-color: var(--wiz-primary);
}

.pp-tile:focus-visible{
	outline: 2px solid var(--wiz-primary);
	outline-offset: 2px;
}


/*----------------------------------------------------------
	CARD PAR NISHAN

	Laga hua nishan kehta hai "ye tasveer bahar wali settings ke sath
	chalti hai". Hatte hi wo apni marzi ki maalik ho jati hai.

	Nishan ka dabba `<label>` hai aur us ka nishana bara rakha gaya
	hai: chhota murabba ungli ke liye bemani hai, aur ye wo cheez hai
	jise aadmi baar baar dabata hai.

	`data-drop` ka button dayen kone me pehle se hai, is liye nishan
	BAAYEN kone me hai — do buttons ek hi jagah rakhna ghalat dabne ki
	dawat hoti.
----------------------------------------------------------*/

.pp-pick{
	position: absolute;
	top: .25rem;
	left: .25rem;
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 1.9rem;
	height: 1.9rem;
	margin: 0;

	border-radius: var(--wiz-radius-sm);
	background: rgba(255, 255, 255, .92);
	box-shadow: var(--wiz-shadow-sm);
	cursor: pointer;
}

.pp-pick input{
	width: 1rem;
	height: 1rem;
	margin: 0;
	cursor: pointer;
	accent-color: var(--wiz-primary);
}


/*----------------------------------------------------------
	MODAL KA MAIDAN

	Modal me jagah mehdood hai, is liye stage ki oonchai bandhi hui
	hai. Bina is ke ek lambi tasveer poora modal ghair leti hai aur
	neeche ke buttons scroll kiye bagair milte hi nahi.
----------------------------------------------------------*/

/*
	MAIDAN ME SCROLL NAHI.

	Pehle yahan `max-height` aur `overflow: auto` tha. Nateeja ye ke
	lambi tasveer par maidan khud scroll karne lagta tha aur box ka
	neeche wala kinara nazar hi nahi aata tha — us par haath rakhne ke
	liye pehle scroll karna parta tha, aur scroll karte hi ooper wala
	kinara gum ho jata tha.

	Ab tasveer DONO rukh se maidan ke andar aati hai (hisaab
	paintStage me hai), is liye scroll ki zarurat hi nahi rehti.
*/
#ixModal .pp-stage{
	max-height: 62vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

#ixModal .modal-body{
	background: var(--wiz-surface-2);
}


/*----------------------------------------------------------
	DOCUMENT KA KHANA

	Naap, rang aur us document ke apne qawaid. Ye poore project me
	sirf yahan hai, kyunke sirf yehi tool kisi bahar ki maang ke
	mutabiq kaam karta hai.
----------------------------------------------------------*/

.pp-spec{
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .35rem .75rem;
	align-items: baseline;
	margin-top: .5rem;
}

.pp-spec dt{
	font-size: .8rem;
	color: var(--wiz-text-muted);
	font-weight: 500;
}

.pp-spec dd{
	margin: 0;
	font-weight: 600;
	font-family: var(--wiz-font-mono);
	font-size: .85rem;
}

/*
	Rang ka nishan. Safed background par safed dabba ghayab ho jata
	hai, is liye us ka apna kinara hai — warna "White" likha to hota
	hai magar us ke sath kuch nazar nahi aata.
*/
.pp-dot{
	display: inline-block;
	width: .85rem;
	height: .85rem;
	border-radius: 50%;
	border: 1px solid var(--wiz-border-strong);
	vertical-align: -1px;
	margin-right: .35rem;
}

/*
	Sarkari qawaid ki fehrist. Ye matn dataset se aata hai aur jaisa
	hai waisa dikhta hai — is liye is par koi sajawat nahi, sirf
	parhne layak naap.
*/
.pp-req{
	margin: .5rem 0 0;
	padding-left: 1.1rem;
	font-size: .85rem;
	color: var(--wiz-text-muted);
}

.pp-req li{ margin-bottom: .2rem; }

/* card par chhota nishan: is tasveer me itne pixel hain hi nahi */
.pp-thin{
	color: var(--wiz-warning);
	font-weight: 600;
}