/*----------------------------------------------------------
	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{
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wiz-text-muted);
	margin-bottom: 1rem;
}

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

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


/*----------------------------------------------------------
	003 — FORMAT GRID
----------------------------------------------------------*/

.wiz-format-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: .6rem;
}

.wiz-format-card{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: .55rem;
	min-height: 78px;
	padding: .75rem .85rem;
	text-align: left;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface);
	transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.wiz-format-card:hover{
	border-color: color-mix(in srgb, var(--wiz-primary) 45%, transparent);
	transform: translateY(-1px);
}

.wiz-format-name{
	font-size: .84rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wiz-text);
}

.wiz-format-cat{
	font-size: .7rem;
	color: var(--wiz-text-muted);
}

.wiz-format-tick{
	position: absolute;
	top: .6rem;
	right: .7rem;
	font-size: .85rem;
	color: #fff;
	opacity: 0;
	transition: opacity .16s ease;
}

.wiz-format-card.is-active{
	background: var(--wiz-primary);
	border-color: var(--wiz-primary);
	box-shadow: 0 6px 16px -6px rgba(124, 58, 237, .55);
}

.wiz-format-card.is-active .wiz-format-name{
	color: #fff;
}

.wiz-format-card.is-active .wiz-format-cat{
	color: rgba(255, 255, 255, .75);
}

.wiz-format-card.is-active .wiz-format-tick{
	opacity: 1;
}

.wiz-format-desc{
	font-size: .82rem;
	line-height: 1.6;
	color: var(--wiz-text-muted);
	margin: 0;
}


/*----------------------------------------------------------
	004 — VALUE INPUT
----------------------------------------------------------*/

.wiz-value-input{
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: .03em;
	padding: .85rem 1rem;
}

.wiz-charcount{
	flex-shrink: 0;
	font-size: .75rem;
	font-weight: 600;
	color: var(--wiz-text-muted);
	white-space: nowrap;
}


/*----------------------------------------------------------
	005 — SLIDERS / SWITCHES / SEGMENT
----------------------------------------------------------*/

.wiz-slider-head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .3rem;
}

.wiz-slider-head label{
	font-size: .8rem;
	font-weight: 600;
	color: var(--wiz-text);
	margin: 0;
}

.wiz-slider-head span{
	font-size: .8rem;
	font-weight: 700;
	color: var(--wiz-primary);
}

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

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

.form-check-input:focus{
	border-color: var(--wiz-primary);
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}

.form-check-label{
	font-size: .82rem;
	font-weight: 600;
	color: var(--wiz-text);
}

/*
	Caption band ho to font size slider ka koi matlab nahi rehta.
	Chhupane ke bajaye halka kar ke band karte hain — layout nahi
	uchhalta aur user ko dikhta hai ke wo mojood hai.
*/
.is-disabled{
	opacity: .4;
	pointer-events: none;
}

.wiz-segment{
	display: inline-flex;
	padding: .2rem;
	border-radius: var(--wiz-radius-btn);
	background: var(--wiz-surface);
	border: 1px solid var(--wiz-border);
}

.wiz-segment-btn{
	border: 0;
	background: transparent;
	padding: .3rem .85rem;
	border-radius: calc(var(--wiz-radius-btn) - 1px);
	font-size: .78rem;
	font-weight: 600;
	color: var(--wiz-text-muted);
	transition: background .15s ease, color .15s ease;
}

.wiz-segment-btn:hover{
	color: var(--wiz-primary);
}

.wiz-segment-btn.is-active{
	background: var(--wiz-primary);
	color: #fff;
}


/*----------------------------------------------------------
	006 — COLOURS & PRESETS
----------------------------------------------------------*/

.wiz-color-row{
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .6rem .8rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-btn);
	background: var(--wiz-surface);
}

.wiz-color-label{
	flex: 1;
	font-size: .8rem;
	font-weight: 600;
	color: var(--wiz-text);
	white-space: nowrap;
}

.wiz-color-swatch{
	flex-shrink: 0;
	width: 30px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--wiz-border);
	border-radius: 4px;
	background: none;
	cursor: pointer;
}

.wiz-color-swatch::-webkit-color-swatch-wrapper{ padding: 2px; }
.wiz-color-swatch::-webkit-color-swatch{ border: 0; border-radius: 2px; }
.wiz-color-swatch::-moz-color-swatch{ border: 0; border-radius: 2px; }

.wiz-color-hex{
	flex-shrink: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .74rem;
	color: var(--wiz-text-muted);
	min-width: 62px;
}

.wiz-preset-label{
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--wiz-text-muted);
}

.wiz-preset{
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .3rem .7rem;
	border: 1px solid var(--wiz-border);
	border-radius: 999px;
	font-size: .74rem;
	font-weight: 600;
	transition: transform .15s ease, box-shadow .15s ease;
}

.wiz-preset:hover{
	transform: translateY(-1px);
	box-shadow: var(--wiz-shadow-sm);
}

.wiz-preset-dot{
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
}


/*----------------------------------------------------------
	007 — STATUS LINE
----------------------------------------------------------*/

.wiz-status{
	display: none;
	align-items: flex-start;
	gap: .55rem;
	font-size: .8rem;
	line-height: 1.55;
	padding: .6rem .75rem;
	border-radius: var(--wiz-radius-btn);
	border: 1px solid transparent;
}

.wiz-status.is-ok,
.wiz-status.is-warn,
.wiz-status.is-error{
	display: flex;
}

.wiz-status > i{
	flex-shrink: 0;
	margin-top: .1rem;
	font-size: .95rem;
}

.wiz-status.is-ok{
	color: #15803d;
	background: rgba(34, 197, 94, .10);
	border-color: rgba(34, 197, 94, .28);
}

.wiz-status.is-warn{
	color: #b45309;
	background: rgba(245, 158, 11, .10);
	border-color: rgba(245, 158, 11, .28);
}

.wiz-status.is-error{
	color: #b91c1c;
	background: rgba(239, 68, 68, .10);
	border-color: rgba(239, 68, 68, .28);
}

/*
	Dark mode me ye teenon rang bohot gehre ho jate hain — background
	par parhe hi nahi jate. Is liye halka shade.
*/
[data-bs-theme="dark"] .wiz-status.is-ok{	color: #4ade80; }
[data-bs-theme="dark"] .wiz-status.is-warn{	color: #fbbf24; }
[data-bs-theme="dark"] .wiz-status.is-error{color: #f87171; }

.wiz-fix-btn{
	flex-shrink: 0;
	margin-left: auto;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	border-radius: var(--wiz-radius-btn);
	padding: .12rem .55rem;
	font-size: .72rem;
	font-weight: 700;
	white-space: nowrap;
}

.wiz-fix-btn:hover{
	background: currentColor;
}

.wiz-fix-btn:hover span{
	color: var(--wiz-surface);
}


/*----------------------------------------------------------
	008 — PREVIEW PANEL
----------------------------------------------------------*/

.wiz-preview-card{
	position: sticky;
	top: 84px;
}

.wiz-preview-head{
	padding-bottom: .75rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--wiz-border);
}

.wiz-live{
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .72rem;
	font-weight: 700;
	color: #10b981;
}

.wiz-live-dot{
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #10b981;
	animation: wizPulse 1.6s ease-in-out infinite;
}

@keyframes wizPulse{
	0%, 100%{ opacity: 1; }
	50%{ opacity: .35; }
}

.wiz-preview{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 210px;
	padding: 1.5rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: #ffffff;
	overflow: auto;
}

.wiz-preview svg{
	max-width: 100%;
	height: auto;
}

/*
	Transparent chuna gaya ho to dotted grid — warna preview me safed
	nazar aata hai aur user ko lagta hai transparency lagi hi nahi.
*/
.wiz-preview.is-transparent{
	background-color: var(--wiz-surface);
	background-image: radial-gradient(var(--wiz-border) 1px, transparent 1px);
	background-size: 16px 16px;
}

.wiz-preview-expand{
	position: absolute;
	top: .55rem;
	right: .55rem;
	z-index: 2;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--wiz-radius-btn);
	background: rgba(15, 23, 42, .08);
	color: #334155;
	font-size: .85rem;
	transition: background .15s ease;
}

.wiz-preview-expand:hover{
	background: rgba(15, 23, 42, .18);
}

/* ---- invalid state ---- */

.wiz-preview-error{
	display: none;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	text-align: center;
	padding: 1rem;
}

.wiz-preview.is-invalid svg,
.wiz-preview.is-invalid .wiz-preview-expand{
	display: none;
}

.wiz-preview.is-invalid{
	background: var(--wiz-surface-2);
}

.wiz-preview.is-invalid .wiz-preview-error{
	display: flex;
}

.wiz-preview-error > i{
	font-size: 2rem;
	color: #f59e0b;
}

.wiz-preview-error-title{
	font-size: .88rem;
	font-weight: 700;
	color: var(--wiz-text);
}

.wiz-preview-error-text{
	font-size: .78rem;
	line-height: 1.55;
	color: var(--wiz-text-muted);
	max-width: 20rem;
}


/*----------------------------------------------------------
	009 — ACTION BUTTONS
----------------------------------------------------------*/

.wiz-btn-main{
	padding: .8rem 1rem;
	font-size: .88rem;
	font-weight: 700;
}

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

.wiz-action-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .5rem;
}

.wiz-btn-ghost{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	padding: .55rem .4rem;
	font-size: .76rem;
	font-weight: 600;
	color: var(--wiz-text);
	background: var(--wiz-surface);
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-btn);
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.wiz-btn-ghost:hover{
	color: var(--wiz-primary);
	border-color: color-mix(in srgb, var(--wiz-primary) 45%, transparent);
	background: color-mix(in srgb, var(--wiz-primary) 7%, transparent);
}

.wiz-btn-ghost i{
	font-size: .85rem;
}

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

/* loading state — PDF banate waqt */
.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 var(--wiz-primary);
	border-top-color: transparent;
	border-radius: 50%;
	animation: wizSpin .6s linear infinite;
}

.btn-primary.is-busy::after{
	border-color: #fff;
	border-top-color: transparent;
}

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


/*----------------------------------------------------------
	010 — META ROWS
----------------------------------------------------------*/

.wiz-meta-list{
	border-top: 1px solid var(--wiz-border);
	padding-top: .9rem;
}

.wiz-meta-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: .78rem;
	padding: .18rem 0;
	color: var(--wiz-text-muted);
}

.wiz-meta-row b{
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 700;
	color: var(--wiz-text);
}

.wiz-meta-ok{
	color: #10b981 !important;
	font-family: var(--wiz-font-sans) !important;
}


/*----------------------------------------------------------
	013 — FULLSCREEN MODAL
----------------------------------------------------------*/

.wiz-fs-stage{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	padding: 2.5rem 1.5rem;
	border-radius: var(--wiz-radius-card);
	background: #ffffff;
	border: 1px solid var(--wiz-border);
	overflow: auto;
}

.wiz-fs-stage svg{
	max-width: 100%;
	height: auto;
}


/*----------------------------------------------------------
	014 — TOAST
----------------------------------------------------------*/

.wiz-toast{
	position: fixed;
	left: 50%;
	bottom: 26px;
	z-index: 1080;
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .65rem 1.1rem;
	border-radius: var(--wiz-radius-btn);
	background: var(--wiz-text);
	color: var(--wiz-body-bg);
	font-size: .82rem;
	font-weight: 600;
	box-shadow: var(--wiz-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 12px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.wiz-toast i{
	color: #4ade80;
}


/*----------------------------------------------------------
	015 — RESPONSIVE & PRINT
----------------------------------------------------------*/

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

	.wiz-preview-card{
		position: static;
	}
}

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

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

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

	.wiz-format-grid{
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	}

	.wiz-preview{
		min-height: 170px;
		padding: 1rem;
	}

	.wiz-action-grid{
		grid-template-columns: repeat(2, 1fr);
	}

	.wiz-color-row{
		flex-wrap: wrap;
	}

	.wiz-color-label{
		flex: 1 1 100%;
	}
}

/*
	Koi browser se seedha print kare to sirf barcode jaye — navbar,
	controls, ads aur footer nahi.
*/
@media print{

	.wiz-navbar,
	.wiz-footer,
	.btn-back2top,
	.wiz-tool-hero,
	.wiz-coffee,
	.wiz-coffee-card,
	.wiz-ad,
	.wiz-panel,
	.wiz-format-grid,
	.wiz-action-grid,
	.wiz-btn-main,
	.wiz-meta-list,
	.wiz-preview-head,
	.wiz-preview-expand,
	.wiz-status,
	.breadcrumb,
	.accordion,
	section{
		display: none !important;
	}

	.wiz-preview{
		border: 0;
		background: #fff;
		min-height: auto;
	}
}