/*----------------------------------------------------------
	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;
}

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

.qr-req{
	color: #ef4444;
	font-weight: 700;
}

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

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

.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);
}


/*----------------------------------------------------------
	003 — TYPE GRID
----------------------------------------------------------*/

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

.qr-type-card{
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .7rem .8rem;
	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;
}

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

.qr-type-icon{
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--wiz-radius-btn);
	font-size: .95rem;
	color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 11%, transparent);
	transition: background .16s ease, color .16s ease;
}

.qr-type-name{
	font-size: .82rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wiz-text);
}

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

.qr-type-card.is-active .qr-type-name{
	color: #fff;
}

.qr-type-card.is-active .qr-type-icon{
	background: rgba(255, 255, 255, .2);
	color: #fff;
}

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


/*----------------------------------------------------------
	004 — FORM FIELDS
----------------------------------------------------------*/

.qr-field.is-invalid{
	border-color: rgba(239, 68, 68, .55) !important;
}

.qr-field.is-invalid:focus{
	box-shadow: 0 0 0 3px rgba(239, 68, 68, .15) !important;
}

/*
	Error ki jagah hamesha ghair-mojood rehti hai (display:none), warna
	har field ke neeche khali gap reh jata aur form uchhalta rehta.
*/
.qr-field-error{
	display: none;
	font-size: .74rem;
	line-height: 1.5;
	color: #b91c1c;
	margin-top: .25rem;
}

.qr-field-error.is-show{
	display: block;
}

/*
	Wohi span do kaam karta hai: ghalti (surkh, default) aur batane ki
	baat. Rang se saaf pata chalta hai ke ye rok rahi hai ya sirf
	bata rahi hai.
*/
.qr-field-error.is-note-ok{
	color: #15803d;
}

.qr-field-error.is-note-warn{
	color: #a16207;
}

[data-bs-theme="dark"] .qr-field-error{
	color: #f87171;
}

[data-bs-theme="dark"] .qr-field-error.is-note-ok{
	color: #4ade80;
}

[data-bs-theme="dark"] .qr-field-error.is-note-warn{
	color: #fbbf24;
}


/*----------------------------------------------------------
	005 — 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;
}


/*----------------------------------------------------------
	006 — LOGO UPLOADER
----------------------------------------------------------*/

.qr-logo-drop{
	border: 1px dashed var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface);
	transition: border-color .16s ease, background .16s ease;
}

.qr-logo-drop.is-dragging{
	border-color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 7%, transparent);
}

.qr-logo-empty{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .3rem;
	padding: 1.6rem 1rem;
	text-align: center;
	cursor: pointer;
}

.qr-logo-empty > i{
	font-size: 1.7rem;
	color: var(--wiz-primary);
	opacity: .6;
	margin-bottom: .2rem;
}

.qr-logo-title{
	font-size: .84rem;
	font-weight: 600;
	color: var(--wiz-text);
}

.qr-logo-loaded{
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .8rem;
}

.qr-logo-loaded img{
	width: 52px;
	height: 52px;
	object-fit: contain;
	border-radius: var(--wiz-radius-btn);
	border: 1px solid var(--wiz-border);
	background: #fff;
	padding: 4px;
	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);
}

[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; }


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

.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: 240px;
	padding: 1.25rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: #ffffff;
	overflow: auto;
}

.qr-preview canvas,
.qr-preview svg{
	max-width: 100%;
	height: auto;
	display: block;
}

/*
	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);
}

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

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

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

.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;
}

/* encoded data box */
.qr-payload{
	border-top: 1px solid var(--wiz-border);
	padding-top: .9rem;
}

.qr-payload code{
	display: block;
	max-height: 92px;
	overflow-y: auto;
	padding: .55rem .7rem;
	border-radius: var(--wiz-radius-btn);
	background: var(--wiz-surface-2);
	border: 1px solid var(--wiz-border);
	font-size: .72rem;
	line-height: 1.6;
	color: var(--wiz-text-muted);
	word-break: break-all;
	white-space: pre-wrap;
}


/*----------------------------------------------------------
	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;
}

.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;
}

.wiz-table{
	--bs-table-bg: transparent;
	--bs-table-color: var(--wiz-text);
	--bs-table-border-color: var(--wiz-border);
	font-size: .85rem;
	margin: 0;
}

.wiz-table thead th{
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--wiz-text-muted);
	background: var(--wiz-surface-2);
	border-bottom: 1px solid var(--wiz-border);
	padding: .8rem 1rem;
	white-space: nowrap;
}

.wiz-table tbody td{
	padding: .7rem 1rem;
	vertical-align: middle;
	border-color: var(--wiz-border);
}

.wiz-table tbody tr:last-child td{
	border-bottom: 0;
}


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

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

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


/*----------------------------------------------------------
	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;
	}

	.qr-type-grid{
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}

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

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

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

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

/*
	Browser se seedha print karen to sirf QR 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,
	.qr-type-grid,
	.qr-type-about,
	.qr-forms,
	.wiz-action-grid,
	.wiz-btn-main,
	.wiz-meta-list,
	.qr-payload,
	.wiz-preview-head,
	.wiz-preview-expand,
	.wiz-status,
	.breadcrumb,
	.accordion,
	section{
		display: none !important;
	}

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


/*----------------------------------------------------------
	009 — FRAME WALA PREVIEW

	Library ka apna canvas DOM me rehta hai (us ko hatana us ke
	update() ko tor deta hai). Frame lagte waqt hum apna canvas
	us ke sath rakh dete hain aur library wale ko CSS se chhupa
	dete hain — is tarah preview aur download bilkul ek hi
	tasveer hoti hai.
-----------------------------------------------------------*/

#qrCanvasHost.is-framed > canvas:not(.qr-framed),
#qrCanvasHost.is-framed > svg{
	display: none;
}

#qrCanvasHost > canvas.qr-framed{
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}