/* NORENA – apyrankės dėliotuvė (DEMO) */

.nai-builder .nai-b-layout {
	display: grid;
	grid-template-columns: minmax(240px, 360px) 1fr;
	gap: 1.75rem;
	align-items: start;
	margin: 1rem 0 1.25rem;
}
@media (max-width: 720px) {
	.nai-builder .nai-b-layout { grid-template-columns: 1fr; }
	/* Žiedas lieka matomas slenkant per akmenų sąrašą apačioje – nereikia šokinėti
	   pirmyn/atgal tarp vizualizacijos ir paletės telefone. */
	.nai-builder .nai-b-stage {
		position: sticky;
		top: 0.5rem;
		z-index: 5;
		background: var(--nai-bg, #0f0f10);
		padding-top: 0.35rem;
	}
	.nai-builder .nai-b-ring-wrap { max-width: 220px; margin: 0 auto; }
}

/* Scena */
.nai-b-stage { text-align: center; }
.nai-b-ring-wrap {
	background: var(--nai-panel, #17171a);
	border: 1px solid var(--nai-line, #2a2a2f);
	border-radius: 16px;
	padding: 0.75rem;
}
.nai-b-ring {
	display: block;
	width: 100%;
	height: auto;
	max-width: 360px;
	margin: 0 auto;
	overflow: visible;
}
.nai-b-bead { cursor: pointer; transition: transform .12s ease; }
.nai-b-bead:hover { transform: scale(1.12); }

.nai-b-length {
	margin: 0.75rem 0 0.25rem;
	font-size: 0.95rem;
	color: var(--nai-text, #ece7dd);
}
.nai-b-length b { color: var(--nai-gold, #c9a253); }
.nai-b-length__label { color: var(--nai-muted, #a29c8f); }
.nai-b-clasp-note { margin: 0.25rem 0 0; font-size: 0.78rem; color: var(--nai-muted, #a29c8f); }

/* Valdikliai */
.nai-b-controls { display: flex; flex-direction: column; gap: 0.9rem; }
.nai-b-ctl { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--nai-muted, #a29c8f); }
.nai-b-ctl > span, .nai-b-ctl__label { font-size: 0.8rem; letter-spacing: .02em; }
.nai-b-ctl input[type="number"], .nai-b-ctl select {
	max-width: 140px;
	background: var(--nai-panel, #17171a);
	color: var(--nai-text, #ece7dd);
	border: 1px solid var(--nai-line, #2a2a2f);
	border-radius: 8px;
	padding: 0.5rem 0.6rem;
	font: inherit;
}

.nai-b-count { display: inline-flex; align-items: center; gap: 0.6rem; }
.nai-b-count button {
	width: 34px; height: 34px;
	border-radius: 50%;
	border: 1px solid var(--nai-line, #2a2a2f);
	background: var(--nai-panel, #17171a);
	color: var(--nai-text, #ece7dd);
	font-size: 1.1rem; line-height: 1;
	cursor: pointer;
}
.nai-b-count button:hover { border-color: var(--nai-gold, #c9a253); color: var(--nai-gold, #c9a253); }
.nai-b-count-val { min-width: 2ch; text-align: center; font-size: 1.05rem; color: var(--nai-text, #ece7dd); }
.nai-b-shuffle {
	margin-top: 0.4rem;
	align-self: flex-start;
	background: none;
	border: 1px solid var(--nai-line, #2a2a2f);
	color: var(--nai-muted, #a29c8f);
	font: inherit;
	font-size: 0.78rem;
	border-radius: 999px;
	padding: 0.35rem 0.85rem;
	cursor: pointer;
	transition: border-color .15s, color .15s;
}
.nai-b-shuffle:hover { border-color: var(--nai-gold, #c9a253); color: var(--nai-gold, #c9a253); }

/* Paletė */
.nai-b-palette-wrap { margin-top: 0.25rem; }
.nai-b-palette {
	display: flex; flex-wrap: wrap; gap: 0.4rem;
	margin-top: 0.45rem;
	max-height: 200px; overflow-y: auto;
	padding-right: 0.25rem;
}
.nai-b-pal {
	display: inline-flex; align-items: center; gap: 0.4rem;
	padding: 0.3rem 0.6rem 0.3rem 0.35rem;
	border: 1px solid var(--nai-line, #2a2a2f);
	border-radius: 999px;
	background: var(--nai-panel, #17171a);
	color: var(--nai-text, #ece7dd);
	font: inherit; font-size: 0.8rem;
	cursor: pointer;
}
.nai-b-pal:hover { border-color: var(--nai-gold, #c9a253); }
.nai-b-pal__dot {
	width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
	background-size: cover; background-position: center;
	background-color: var(--stone, #8a8a8a);
	background-image:
		radial-gradient(circle at 32% 28%, rgba(255,255,255,.5), rgba(255,255,255,0) 42%),
		radial-gradient(circle at 70% 78%, rgba(0,0,0,.35), rgba(0,0,0,0) 55%);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

/* „Vartai" – ar dėlioti pačiam */
.nai-design-gate,
.nai-design-skip {
	background: var(--nai-panel, #17171a);
	border: 1px solid var(--nai-line, #2a2a2f);
	border-radius: 14px;
	padding: 1.25rem 1.4rem;
	margin: 0.5rem 0 1rem;
}
.nai-design-gate h3 { margin: 0 0 0.4rem; }
.nai-gate-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.nai-design-skip p { margin: 0 0 0.9rem; color: var(--nai-text, #ece7dd); }

/* „Pridėti akmenį iš rekomenduotų" */
.nai-b-addwrap { margin-top: 0.6rem; }
.nai-b-addtoggle {
	display: inline-flex; align-items: center;
	padding: 0.35rem 0.7rem;
	border: 1px dashed var(--nai-gold, #c9a253);
	border-radius: 999px;
	background: transparent;
	color: var(--nai-gold, #c9a253);
	font: inherit; font-size: 0.8rem;
	cursor: pointer;
}
.nai-b-addtoggle:hover { background: rgba(201, 162, 83, 0.12); }
.nai-b-addlist { margin-top: 0.5rem; }
.nai-b-add-hint { margin: 0 0 0.4rem; font-size: 0.78rem; color: var(--nai-muted, #a29c8f); }
.nai-b-addgrid { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.nai-b-add { border-style: dashed; }

/* Santrauka */
.nai-b-summary {
	background: var(--nai-panel, #17171a);
	border: 1px solid var(--nai-line, #2a2a2f);
	border-radius: 12px;
	padding: 1rem 1.2rem;
	margin: 0.5rem 0 1rem;
}
.nai-b-summary h4 { margin: 0 0 0.5rem; font-size: 1rem; color: var(--nai-gold, #c9a253); }
.nai-b-summary__list { margin: 0; padding-left: 1.1rem; }
.nai-b-summary__list li { font-size: 0.9rem; margin: 0.15rem 0; color: var(--nai-text, #ece7dd); }
.nai-b-summary__meta { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--nai-muted, #a29c8f); }
.nai-b-chakras {
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px dashed var(--nai-line, #2a2a2f);
	font-size: 0.85rem;
}
.nai-b-chakras[hidden] { display: none; }
.nai-b-chakras__label { color: var(--nai-muted, #a29c8f); }
.nai-b-chakras__list { color: var(--nai-gold, #c9a253); font-weight: 600; }

.nai-builder .nai-build-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* Svečio kontaktas – dizaino siuntimas el. paštu */
.nai-b-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin: 0.5rem 0 0.9rem;
}
.nai-b-contact label {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	flex: 1 1 220px;
	font-size: 0.82rem;
	color: var(--nai-muted, #a29c8f);
}
.nai-b-contact input {
	background: var(--nai-panel, #17171a);
	border: 1px solid var(--nai-line, #2a2a2f);
	border-radius: 8px;
	padding: 0.55rem 0.7rem;
	color: var(--nai-text, #ece7dd);
	font-size: 0.95rem;
}
.nai-b-contact input:focus {
	outline: none;
	border-color: var(--nai-gold, #c9a253);
}
.nai-b-msg {
	margin: 0.6rem 0 0;
	font-size: 0.9rem;
	min-height: 1.2em;
}
.nai-b-msg.is-ok { color: #8fce9b; }
.nai-b-msg.is-error { color: #d98b7a; }