/*----------------------------------------------------------
	002 — PANELS & LABELS
----------------------------------------------------------*/

/*----------------------------------------------------------
	YAHAN SIRF IS MODULE KA APNA HISSA HAI

	Template ka design aur theme — hero, badges, pills, steps,
	features, ads, cards, tables, toast aur poora app shell —
	assets/global-custom-web.css me hai (sections 001-013 aur
	101-122). Wo global pehle load hoti hai.

	Pehle har module un rules ki apni naql rakhta tha. Wo naqlein
	yahan se nikal di gayi hain: har wo rule jo global wale se
	hu-ba-hu ek tha, hata diya gaya, aur jo alag tha wo waisa hi
	chhora gaya — kyunke module ki CSS global ke BAAD load hoti
	hai aur us ka apna faisla jeetta hai.

	Naya rule likhne se pehle global me dekh len. Agar wahan
	pehle se hai, to yahan dobara na likhen.
----------------------------------------------------------*/
.wiz-panel-title{
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wiz-text);
}

.wiz-panel-title i{
	color: var(--wiz-primary);
	font-size: .95rem;
}

.wiz-panel{
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
	padding: 1.15rem;
}

.wiz-panel-head i{
	color: var(--wiz-primary);
	font-size: .95rem;
}

.wiz-label{
	display: block;
	font-size: .78rem;
	font-weight: 600;
	color: var(--wiz-text);
	margin-bottom: .35rem;
}

.wiz-hint{
	font-size: .76rem;
	line-height: 1.6;
	color: var(--wiz-text-muted);
}

.wiz-hint i{
	color: var(--wiz-primary);
}

.pdf-drop-btn{
	margin-top: .65rem;
	font-size: .85rem;
	font-weight: 700;
	padding: .55rem 1.3rem;
	pointer-events: none;		/* poora dropzone hi clickable hai */
}

/*----------------------------------------------------------
	004 — FILE BAR
----------------------------------------------------------*/

.p2i-filebar{
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .85rem 1rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
}

.p2i-filebar-icon{
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--wiz-radius-btn);
	font-size: 1.05rem;
	color: #fff;
	background: linear-gradient(135deg, var(--wiz-primary) 0%, #4f46e5 100%);
}

.p2i-filebar-name{
	font-size: .88rem;
	font-weight: 700;
	color: var(--wiz-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*----------------------------------------------------------
	004a — DOCUMENT PREVIEW

	Yahan wo HTML dikhta hai jo mammoth ne DOCX se nikala. Maqsad
	khoobsurti nahi — user ko convert dabane se PEHLE pata chal jaye
	ke kya parha gaya aur kya chhoot gaya.

	Saari styles yahin scoped hain, warna document ke heading tags
	poore page ki typography se takra jate.
----------------------------------------------------------*/

.w2p-preview{
	max-height: 340px;
	overflow-y: auto;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface);
	font-size: .86rem;
	line-height: 1.7;
	color: var(--wiz-text);
}

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

.w2p-preview > :first-child{
	margin-top: 0;
}

.w2p-preview h1{ font-size: 1.4rem; }
.w2p-preview h2{ font-size: 1.2rem; }
.w2p-preview h3{ font-size: 1.05rem; }
.w2p-preview h4,
.w2p-preview h5,
.w2p-preview h6{ font-size: .95rem; }

.w2p-preview h1,
.w2p-preview h2,
.w2p-preview h3,
.w2p-preview h4,
.w2p-preview h5,
.w2p-preview h6{
	margin: 1.1rem 0 .4rem;
}

.w2p-preview p{
	margin-bottom: .6rem;
	color: var(--wiz-text);
}

.w2p-preview ul,
.w2p-preview ol{
	margin-bottom: .6rem;
	padding-left: 1.4rem;
}

.w2p-preview a{
	color: var(--wiz-primary);
	text-decoration: underline;
}

.w2p-preview img{
	max-width: 100%;
	height: auto;
	border-radius: var(--wiz-radius-btn);
	margin: .4rem 0;
}

.w2p-preview table{
	width: 100%;
	margin-bottom: .7rem;
	border-collapse: collapse;
	font-size: .8rem;
}

.w2p-preview th,
.w2p-preview td{
	border: 1px solid var(--wiz-border);
	padding: .3rem .45rem;
	text-align: left;
	vertical-align: top;
}

.w2p-preview th{
	background: var(--wiz-surface-2);
	font-weight: 700;
}

/* khali document — kuch parha hi nahi gaya */
.w2p-empty{
	display: block;
	padding: 1rem 0;
	text-align: center;
	font-size: .85rem;
	color: var(--wiz-text-muted);
}


/*----------------------------------------------------------
	004b — NOTES  (warning + honesty)

	Do alag rang jaan boojh kar: amber wo baat hai jo user ka nuqsan kar
	sakti hai (bhoola hua password), aur neutral wo jo samajhne ki hai
	(pabandiyan taala nahi hain).
----------------------------------------------------------*/

.pdf-warn,
.pdf-note{
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	padding: .8rem .9rem;
	border-radius: var(--wiz-radius-card);
	font-size: .8rem;
	line-height: 1.65;
	border: 1px solid transparent;
}

.pdf-warn > i,
.pdf-note > i{
	flex-shrink: 0;
	margin-top: .15rem;
	font-size: .95rem;
}

.pdf-warn{
	color: #92400e;
	background: rgba(245, 158, 11, .10);
	border-color: rgba(245, 158, 11, .30);
}

[data-bs-theme="dark"] .pdf-warn{
	color: #fcd34d;
}

.pdf-note{
	color: var(--wiz-text-muted);
	background: var(--wiz-surface);
	border-color: var(--wiz-border);
}

.pdf-note b{
	color: var(--wiz-text);
}


/*----------------------------------------------------------
	004c — OPTION TOGGLES
----------------------------------------------------------*/

.pdf-toggle{
	height: 100%;
	padding: .75rem .85rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface);
}

.pdf-toggle .form-check-input{
	margin-top: .18rem;
	cursor: pointer;
}

.pdf-toggle .form-check-input:checked{
	background-color: var(--wiz-primary);
	border-color: var(--wiz-primary);
}

.pdf-toggle .form-check-label{
	font-size: .84rem;
	font-weight: 600;
	color: var(--wiz-text);
	cursor: pointer;
}


/*----------------------------------------------------------
	004d — YES / NO  (support table)
----------------------------------------------------------*/

.pdf-yes,
.pdf-no{
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	font-weight: 600;
	white-space: nowrap;
}

.pdf-yes{	color: #15803d; }
.pdf-no{	color: #b91c1c; }

[data-bs-theme="dark"] .pdf-yes{	color: #4ade80; }
[data-bs-theme="dark"] .pdf-no{		color: #f87171; }


/*----------------------------------------------------------
	004e — TABLE
----------------------------------------------------------*/

.wiz-table{
	font-size: .86rem;
	vertical-align: middle;
}

.wiz-table th{
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wiz-text-muted);
	border-bottom-color: var(--wiz-border);
}

.wiz-table td{
	border-bottom-color: var(--wiz-border);
	color: var(--wiz-text);
}


/*----------------------------------------------------------
	005 — TOTALS & OUTPUT
----------------------------------------------------------*/

.pdf-totals{
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	margin-top: .85rem;
	padding-top: .85rem;
	border-top: 1px solid var(--wiz-border);
	font-size: .78rem;
	color: var(--wiz-text-muted);
}

.pdf-totals b{
	color: var(--wiz-text);
	font-weight: 700;
}


.wiz-btn-main i{
	margin-right: .4rem;
}

.btn:disabled{
	opacity: .45;
	pointer-events: none;
}

.btn.is-busy{
	position: relative;
	color: transparent !important;
}

.btn.is-busy::after{
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 15px;
	height: 15px;
	border: 2px solid #fff;
	border-top-color: transparent;
	border-radius: 50%;
	animation: wizSpin .6s linear infinite;
}

@keyframes wizSpin{
	to{ transform: rotate(360deg); }
}


/*----------------------------------------------------------
	004f — CHOICE BUTTONS + RANGE

	Radio ki jagah dabane wale chhote buttons: sab options ek nazar me,
	aur mobile par bhi asaani se dabte hain. Asli <input type="radio">
	peeche mojood hai, is liye keyboard aur screen reader theek chalte
	hain.
----------------------------------------------------------*/

.img-choice{
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

.img-choice-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .42rem .85rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-btn);
	background: var(--wiz-surface);
	font-size: .8rem;
	font-weight: 600;
	color: var(--wiz-text-muted);
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.img-choice-btn:hover{
	color: var(--wiz-primary);
	border-color: var(--wiz-primary);
}

.btn-check:checked + .img-choice-btn{
	color: #fff;
	border-color: transparent;
	background: linear-gradient(135deg, var(--wiz-primary) 0%, #4f46e5 100%);
}

.btn-check:focus-visible + .img-choice-btn{
	outline: 2px solid var(--wiz-primary);
	outline-offset: 2px;
}

.form-range{
	accent-color: var(--wiz-primary);
}


/*----------------------------------------------------------
	012 — RESPONSIVE & PRINT
----------------------------------------------------------*/

@media screen and (max-width: 768px){

	.wiz-tool-hero{
		padding: 1.5rem 1.15rem;
	}

	.wiz-tool-title{
		font-size: 1.6rem;
	}

	.pdf-drop{
		min-height: 170px;
		padding: 1.6rem 1rem;
	}

	/*
		Chhoti screen par toggle ke khane thore tang — teen ke bajaye
		ek column me aate hain, is liye jagah bachani zaroori hai.
	*/
	.pdf-toggle{
		padding: .65rem .7rem;
	}

	.w2p-preview{
		max-height: 260px;
		padding: .85rem .9rem;
	}

	.pdf-result{
		flex-wrap: wrap;
	}

	.pdf-result .btn{
		width: 100%;
	}
}

@media print{

	.wiz-navbar,
	.wiz-footer,
	.btn-back2top,
	.wiz-ad,
	.wiz-coffee,
	.wiz-coffee-card,
	.pdf-drop,
	.wiz-toast{
		display: none !important;
	}
}