/* KitLab Artwork Configurator — modern card layout */
.kitlab-configurator{
	--kl-border:#e3e6ea;
	--kl-border-strong:#c9ced6;
	--kl-bg:#fff;
	--kl-muted:#6b7280;
	--kl-accent:#2563eb;
	--kl-accent-soft:#eef3ff;
	--kl-tab-bg:#f1f3f6;
	--kl-tab-active-bg:#fff;
	--kl-tab-active-color:var(--kl-accent);
	--kl-radius:12px;
	margin:22px 0;
	color:#1f2530;
	font-size:15px;
	line-height:1.45;
}

/* The [hidden] attribute must win over the component's display rules below
   (e.g. .kitlab-spinner / .kitlab-drop__preview set display:flex), otherwise
   the UA's low-specificity [hidden]{display:none} loses and JS-toggled
   elements like the "Uploading…" spinner stay permanently visible. */
.kitlab-configurator [hidden]{display:none !important;}

/* Stacked: preview on top, options below (compact, centered). */
.kitlab-stack{display:flex;flex-direction:column;gap:14px;max-width:400px;}

/* ---------- View tabs (segmented control) ---------- */
.kitlab-tabs{
	display:inline-flex;align-self:center;gap:4px;
	padding:4px;border-radius:10px;
	background:var(--kl-tab-bg);border:1px solid var(--kl-border);
	width: 100%;
}
.kitlab-tab{
	appearance:none;
	border:none!important;
	background:none!important;
	cursor:pointer;
	border-radius:0!important;
	font-size:14px!important;
	font-weight:600!important;
	color:var(--kl-muted)!important;
	transition:color .15s,background .15s,box-shadow .15s;
	padding: 6px 24px!important;
    flex: 1;
}
.kitlab-tab:hover{
	color:#1f2530!important;
}
.kitlab-tab.is-active{
	color:var(--kl-tab-active-color)!important;
	background:var(--kl-tab-active-bg)!important;
	box-shadow:0 1px 2px rgba(16,24,40,.08)!important;
}
.kitlab-tab:focus-visible{
	outline:2px solid var(--kl-accent);
	outline-offset:2px;
}
/* ---------- Options below the preview ---------- */
.kitlab-options{display:flex;flex-direction:column;gap:16px;}
.kitlab-option-group{display:flex;flex-direction:column;gap:16px;}

/* ---------- Preview ---------- */
.kitlab-preview{
	position:relative;
	border:1px solid var(--kl-border);
	border-radius:var(--kl-radius);
	background:
		linear-gradient(45deg,#f6f7f9 25%,transparent 25%) -8px 0/16px 16px,
		linear-gradient(-45deg,#f6f7f9 25%,transparent 25%) -8px 0/16px 16px,
		linear-gradient(45deg,transparent 75%,#f6f7f9 75%) 0 0/16px 16px,
		linear-gradient(-45deg,transparent 75%,#f6f7f9 75%) 0 0/16px 16px,
		#fff;
	padding:8px;
	overflow:hidden;
	text-align:center;
}
.kitlab-preview .canvas-container{margin:0 auto !important;}
.kitlab-preview canvas{max-width:100%;height:auto !important;display:block;margin:0 auto;border-radius:6px;}
.kitlab-hint{margin:8px 2px 0;font-size:12px;color:var(--kl-muted);}

/* ---------- Zoom controls (overlay, bottom-right of preview) ---------- */
.kitlab-zoom{position:absolute;right:10px;bottom:10px;z-index:2;display:flex;gap:6px;}
.kitlab-zoom__btn{
	width:34px!important;
	height:34px!important;
	flex:0 0 auto;
	border:1px solid var(--kl-border-strong)!important;
	border-radius:8px!important;
	background:rgba(255,255,255,.92)!important;
	backdrop-filter:blur(2px)!important;
	color:#1f2530!important;
	font-size:20px!important;
	line-height:1!important;
	font-weight:600!important;
	cursor:pointer;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 1px 2px rgba(16,24,40,.08)!important;
	padding: 5px 5px 9px 7px !important;
	transition:background .15s,border-color .15s,color .15s,transform .05s,opacity .15s;
}
.kitlab-zoom__btn:hover{background:#fff;border-color:var(--kl-accent);color:var(--kl-accent);}
.kitlab-zoom__btn:active{transform:translateY(1px);}
.kitlab-zoom__btn:focus-visible{outline:2px solid var(--kl-accent);outline-offset:2px;}
.kitlab-zoom__btn:disabled{opacity:.4;cursor:not-allowed;}
.kitlab-zoom__btn:disabled:hover{background:rgba(255,255,255,.92);border-color:var(--kl-border-strong);color:#1f2530;}

.kitlab-spinner{
	position:absolute;inset:10px;
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
	background:rgba(255,255,255,.78);backdrop-filter:blur(2px);
	border-radius:6px;font-size:14px;color:#374151;font-weight:600;
}
.kitlab-spinner__ring{
	width:28px;height:28px;border-radius:50%;
	border:3px solid var(--kl-accent-soft);border-top-color:var(--kl-accent);
	animation:kitlab-spin .7s linear infinite;
}
@keyframes kitlab-spin{to{transform:rotate(360deg);}}

/* ---------- Controls / cards ---------- */
.kitlab-controls{display:flex;flex-direction:column;gap:16px;}
.kitlab-card{
	border:1px solid var(--kl-border);
	border-radius:var(--kl-radius);
	background:var(--kl-bg);
	overflow:hidden;
	box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.kitlab-card__head{
	display:flex;align-items:center;gap:12px;
	padding:12px 14px;border-bottom:1px solid var(--kl-border);
	background:#fbfcfd;cursor:pointer;user-select:none;
}
.kitlab-card__head:focus-visible{outline:2px solid var(--kl-accent);outline-offset:-2px;}
/* Accordion chevron + collapse */
.kitlab-card__chev{
	margin-left:auto;flex:0 0 auto;width:9px;height:9px;
	border-right:2px solid #9aa1ab;border-bottom:2px solid #9aa1ab;
	transform:rotate(45deg);transition:transform .2s;
}
.kitlab-card.is-collapsed .kitlab-card__chev{transform:rotate(-135deg);}
.kitlab-card.is-collapsed .kitlab-card__head{border-bottom-color:transparent;}
.kitlab-card.is-collapsed .kitlab-card__body{display:none;}
.kitlab-card__icon{
	flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
	width:36px;height:36px;border-radius:9px;
	background:var(--kl-accent-soft);color:var(--kl-accent);
}
.kitlab-card__title h4{margin:0;font-size:15px;line-height:1.2;}
.kitlab-card__title p{margin:2px 0 0;font-size:13px;color:var(--kl-muted);}
.kitlab-card__body{padding:16px;display:flex;flex-direction:column;gap:14px;}

/* ---------- Drop zone ---------- */
.kitlab-drop{
	position:relative;display:block;cursor:pointer;
	border:1.5px dashed var(--kl-border-strong);
	border-radius:10px;background:#fafbfc;
	padding:18px;text-align:center;
	transition:border-color .15s,background .15s;
}
.kitlab-drop:hover,.kitlab-drop.is-dragover{border-color:var(--kl-accent);background:var(--kl-accent-soft);}
.kitlab-drop.has-file{border-style:solid;background:#fff;text-align:left;padding:12px;}
.kitlab-drop__input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
/* Once a file is chosen the transparent overlay input is removed so the preview
   and its Remove (×) button receive clicks instead of re-opening the picker. */
.kitlab-drop.has-file .kitlab-drop__input{display:none;}
.kitlab-drop__input::-webkit-file-upload-button{cursor:pointer;}

.kitlab-drop__placeholder{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--kl-muted);pointer-events:none;}
.kitlab-drop__placeholder svg{color:var(--kl-accent);}
.kitlab-drop__text{font-size:14px;}
.kitlab-drop__text strong{color:var(--kl-accent);}
.kitlab-drop__placeholder small{font-size:12px;}

.kitlab-drop__preview{display:flex;align-items:center;gap:12px;}
.kitlab-drop__thumb{
	width:46px;height:46px;flex:0 0 auto;object-fit:contain;
	border:1px solid var(--kl-border);border-radius:8px;background:#fff;padding:3px;
}
.kitlab-drop__name{flex:1 1 auto;font-size:13px;font-weight:600;word-break:break-all;}
.kitlab-drop__remove{
	flex:0 0 auto;
	width:26px!important;
	height:26px!important;
	border:none!important;
	border-radius:50%!important;
	background:#f1f3f5!important;
	color:#6b7280!important;
	font-size:18px!important;
	line-height:1;
	cursor:pointer;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding: 0 !important;
	transition:background .15s,color .15s;
}
.kitlab-drop__remove:hover{
	background:#fde8e8!important;
	color:#b32d2e!important;
}
/* ---------- Fields ---------- */
.kitlab-field-row{display:flex;flex-direction:row;gap:12px;flex-wrap:wrap;align-items:flex-end;}
.kitlab-field{display:flex;flex-direction:column;gap:5px;flex:1 1 140px;}
.kitlab-field--narrow{flex:0 0 96px;}
.kitlab-field>span{font-size:13px;font-weight:600;color:#374151;}
.kitlab-configurator input[type=text],
.kitlab-configurator select{
	width:100%;box-sizing:border-box;
	padding:9px 11px;font-size:14px;
	border:1px solid var(--kl-border-strong);border-radius:8px;
	background:#fff;color:inherit;line-height:1.3;height:auto;
}
.kitlab-configurator input[type=text]:focus,
.kitlab-configurator select:focus{
	outline:none;border-color:var(--kl-accent);
	box-shadow:0 0 0 3px var(--kl-accent-soft);
}

.kitlab-error{color:#b32d2e;font-size:13px;margin:4px 0 0;}