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

	ADD PAGE NUMBERS TO PDF — MODULE CSS


	Yahan SIRF wo cheez hai jo global-custom-web.css me nahi mili.

	Dropzone, haalat ki patti, panel ke unwan, progress bar, result card
	aur bara button sab global ke section 125 me hain — ye module unhen
	bina kuch likhe istemal kar raha hai.

	Bache paanch hisse: nuskhon ke button, file ki patti, kitab wala
	bahar ka kinara, rang ke gol khane, aur preview ka grid.

	Jagah chunne wala safha (.wiz-spots) yahan se nikal kar global ke
	section 126 me chala gaya hai, kyunke Watermark module ko bhi wahi
	chahiye tha.

	Rang, radius aur shadow sirf --wiz-* se.

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


/*----------------------------------------------------------------------------------
	001 — NUSKHON KE BUTTON

	Shakl reorder module ke .ro-preset jaisi hai. Dono ko global me le
	jane ki koshish JAAN BOOJH KAR nahi ki gayi: wahan wo tarteeb badalte
	hain aur unki koi chuni hui haalat nahi hoti, yahan ye paanch khane
	bharte hain aur chuna hua nuskha nishan-zada rehta hai. Ek jaisi shakl
	do alag bartao ke saath ek class me daalna baad me dukh deta hai.
----------------------------------------------------------------------------------*/

.ap-presets{
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: .35rem;
}

.ap-preset{
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .45rem .85rem;
	cursor: pointer;
	border: 1px solid var(--wiz-border);
	border-radius: 999px;
	background: var(--wiz-surface);
	color: var(--wiz-text-muted);
	font-size: .8rem;
	font-weight: 600;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.ap-preset:hover{
	border-color: var(--wiz-primary);
	color: var(--wiz-primary-ink);
}

.ap-preset:focus-visible{
	outline: none;
	border-color: var(--wiz-primary);
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}

/* jo nuskha abhi chal raha hai */
.ap-preset.is-on{
	border-color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 12%, transparent);
	color: var(--wiz-primary-ink);
}


/*----------------------------------------------------------------------------------
	002 — KAUNSI FILE KHULI HAI

	min-width: 0 flex ke andar text-truncate ke liye lazmi hai — us ke
	bagair lamba naam patti ko chaura kar deta hai bajaye kat-ne ke.
----------------------------------------------------------------------------------*/

.ap-file{
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .75rem .9rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
}

.ap-file-icon{
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--wiz-radius-btn);
	font-size: 1.1rem;
	color: var(--wiz-primary-ink);
	background: color-mix(in srgb, var(--wiz-primary) 12%, transparent);
}

.ap-file-meta{
	flex: 1 1 auto;
	min-width: 0;
	font-size: .86rem;
	color: var(--wiz-text);
}


/*----------------------------------------------------------------------------------
	003 — KITAB WALA BAHAR KA KINARA

	Ye do button global ke .wiz-spots (section 126) ke NEECHE lagte hain,
	us ke andar nahi — kyunke "bahar wala kinara" safhe par koi ek jagah
	hai hi nahi, wo tak aur juft safhe par side badalta hai.

	Global me na jane ki wajah bhi yehi hai: sirf safhon par number lagate
	waqt ye maana rakhta hai. Watermark ko is ki zarurat nahi.
----------------------------------------------------------------------------------*/

/* kitab wale do button safhe ke NEECHE hain, andar nahi — un ki jagah tak hoti hai */
.ap-outside{
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: .6rem;
}

.ap-out-btn.is-on{
	border-color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 12%, transparent);
	color: var(--wiz-primary-ink);
}


/*----------------------------------------------------------------------------------
	004 — RANG KE KHANE

	--ap-swatch har button ke apne style attribute se aata hai, is liye
	naya rang add karne par yahan kuch nahi likhna parta.
----------------------------------------------------------------------------------*/

.ap-colors{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .35rem;
}

.ap-color{
	width: 2rem;
	height: 2rem;
	padding: 0;
	cursor: pointer;
	border: 2px solid var(--wiz-border);
	border-radius: 999px;
	background: var(--ap-swatch, var(--wiz-text));
	transition: border-color .15s ease, transform .15s ease;
}

.ap-color:hover{			transform: scale(1.1); }

.ap-color:focus-visible{
	outline: none;
	border-color: var(--wiz-primary);
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .2);
}

/*
	Chuna hua rang MOTI SAFED lakeer aur bahar ek gehri chhalla se
	nishan-zada hota hai, sirf border ka rang badal kar nahi. Wajah:
	is fehrist me khud purple bhi hai, aur purple border purple khane
	par bilkul nazar nahi aata tha.
*/
.ap-color.is-on{
	border-color: #fff;
	box-shadow: 0 0 0 2px var(--wiz-text);
}


/*----------------------------------------------------------------------------------
	005 — "AUR" WALA PANEL

	Font, naap aur rang band shuru hote hain. Button poori chaurai ka hai
	taake ungli se dabana asaan ho.
----------------------------------------------------------------------------------*/

.ap-more-btn{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	width: 100%;
	padding: 0;
	cursor: pointer;
	border: 0;
	background: transparent;
	color: var(--wiz-text);
	font-size: .9rem;
	font-weight: 700;
}

.ap-more-btn:hover{			color: var(--wiz-primary-ink); }

.ap-more-btn:focus-visible{
	outline: 2px solid var(--wiz-primary);
	outline-offset: 3px;
	border-radius: var(--wiz-radius-sm);
}

.ap-more-btn i:last-child{
	transition: transform .2s ease;
}

.ap-more-btn[aria-expanded="true"] i:last-child{
	transform: rotate(180deg);
}


/*----------------------------------------------------------------------------------
	006 — NATEEJE KA KHULASA
----------------------------------------------------------------------------------*/

.ap-summary{
	font-size: .84rem;
	line-height: 1.6;
	color: var(--wiz-text-muted);
}

.ap-summary b{
	color: var(--wiz-text);
}

.ap-summary.is-bad,
.ap-summary.is-bad b{
	color: var(--wiz-danger);
}


/*----------------------------------------------------------------------------------
	007 — PREVIEW KA GRID

	Khane reorder se BARE hain (10rem, wahan 8rem). Wajah saaf hai: wahan
	safha pehchanna kaafi tha, yahan us par chhapa 11pt ka number parhna
	hai. Chhote khane par wo number ek dhabba ban jata hai aur preview ka
	poora maqsad khatam ho jata hai.
----------------------------------------------------------------------------------*/

.ap-grid-bar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
}

.ap-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: .6rem;
	max-height: 34rem;
	overflow-y: auto;
	padding: .6rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);

	/* grid apni scrollbar khud dikhaye — warna "aur bhi safhe hain" ka koi ishara nahi */
	scrollbar-width: thin;
	scrollbar-color: var(--wiz-border-strong) var(--wiz-surface-2);
}

.ap-grid::-webkit-scrollbar{			width: 10px; }
.ap-grid::-webkit-scrollbar-track{		background: var(--wiz-surface-2); }
.ap-grid::-webkit-scrollbar-thumb{
	background: var(--wiz-border-strong);
	border: 3px solid var(--wiz-surface-2);
	border-radius: 999px;
}

.ap-page{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
	padding: .4rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-sm);
	background: var(--wiz-surface);
}

/* jis safhe par number lagega */
.ap-page.is-numbered{
	border-color: color-mix(in srgb, var(--wiz-primary) 45%, transparent);
}

.ap-page canvas{
	display: block;
	max-width: 100%;
	height: auto;
	max-height: 9rem;
	border-radius: 2px;
	background: #fff;
	box-shadow: var(--wiz-shadow-sm);
}

/* render hone se pehle ki khali jagah — warna grid har safhe par uchhalta hai */
.ap-page-wait{
	width: 100%;
	height: 8rem;
	border-radius: 2px;
	background: var(--wiz-surface-2);
}

.ap-page-label{
	display: flex;
	align-items: baseline;
	gap: .3rem;
	font-family: var(--wiz-font-mono);
	font-size: .72rem;
	font-weight: 700;
	color: var(--wiz-text-muted);
}

/* wo qeemat jo safhe par waqai chhapegi */
.ap-page-gets{
	color: var(--wiz-primary-ink);
}

/* jis safhe par kuch nahi lagega */
.ap-page.is-skipped .ap-page-gets{
	color: var(--wiz-text-muted);
	font-weight: 600;
}

/* jis safhe me ghumne ka hukm likha hai — preview ka asal imtihan yehi hai */
.ap-page-turn{
	font-size: .6rem;
	font-weight: 600;
	color: var(--wiz-warning);
}