/* ==========================================================================
   Secure Bridge Store — live stand designer ([sb_designer])
   Lives inside a light zone: uses the light tokens.
   ========================================================================== */
.sb-designer {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	font-family: inherit;
	color: var(--e-global-color-text, #1A1030);
}
.sb-designer__notices { margin-bottom: 16px; }
@media (max-width: 1024px) { .sb-designer { grid-template-columns: 1fr; gap: 22px; } }

/* --- Stage --------------------------------------------------------------- */
.sb-designer__stage {
	position: sticky;
	top: 110px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 36px 20px 26px;
	border-radius: 28px;
	background:
		radial-gradient(ellipse 60% 55% at 50% 42%, #FFFFFF, #EFE8F8 80%),
		#F4EFFA;
	box-shadow: 0 30px 70px rgba(76, 40, 130, .14);
	overflow: hidden;
}
@media (max-width: 1024px) { .sb-designer__stage { position: relative; top: 0; padding: 26px 12px 18px; } }
.sb-designer__note { margin: 0; font-size: 12.5px; line-height: 1.6; color: #6B6180; text-align: center; }

.sb-stand {
	--face: #0E0B14;
	--ink: #FFFFFF;
	--ink-soft: rgba(255, 255, 255, .72);
	--edge: rgba(255, 255, 255, .14);
	position: relative;
	width: min(330px, 78vw);
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform .4s ease;
}
.sb-stand__face {
	position: relative;
	width: 100%;
	aspect-ratio: 5 / 7;
	box-sizing: border-box;
	padding: 9% 9% 7%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 3%;
	border-radius: 18px;
	background: var(--face);
	color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--edge), 0 34px 60px rgba(40, 20, 80, .28), 0 6px 14px rgba(40, 20, 80, .16);
	overflow: hidden;
	transition: background .45s ease, color .45s ease, box-shadow .45s ease;
	text-align: center;
}
/* gloss */
.sb-stand__face::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(125deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 38%);
	pointer-events: none;
}
.sb-stand__base {
	width: 112%;
	height: 22px;
	margin-top: -6px;
	border-radius: 6px 6px 12px 12px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(214, 205, 230, .9));
	box-shadow: 0 16px 26px rgba(60, 30, 110, .22), inset 0 1px 0 #fff;
}

.sb-stand__logo {
	width: 58%;
	height: 17%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	border: 1.5px dashed var(--ink-soft);
}
.sb-stand__logo.has-logo { border-color: transparent; }
.sb-stand__logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.sb-stand__logo-ph { font-size: 12px; font-weight: 600; color: var(--ink-soft); padding: 0 6px; }
.sb-stand__name { font-size: 17px; font-weight: 700; line-height: 1.35; min-height: 1.35em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-stand__name.is-placeholder { opacity: .45; }
.sb-stand__line { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--ink); opacity: .92; }
.sb-stand__qr { width: 50%; padding: 5px; border-radius: 10px; background: #fff; line-height: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.sb-stand__qr .sb-qr { width: 100%; height: auto; color: #0E0B14; }
.sb-stand__stars { color: #F5B83D; letter-spacing: 3px; font-size: 15px; line-height: 1; }
.sb-stand__hint { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; line-height: 1.4; color: var(--ink-soft); }

/* Materials */
.sb-stand[data-material="white"] { --face: #FBFAFD; --ink: #16101F; --ink-soft: rgba(22, 16, 31, .55); --edge: rgba(22, 16, 31, .08); }
.sb-stand[data-material="clear"] {
	--face: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(225, 236, 248, .32));
	--ink: #16101F; --ink-soft: rgba(22, 16, 31, .55); --edge: rgba(120, 150, 190, .45);
}
.sb-stand[data-material="clear"] .sb-stand__face { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sb-stand[data-material="wood"] {
	--face:
		repeating-linear-gradient(92deg, rgba(90, 52, 20, .10) 0 2px, transparent 2px 9px),
		repeating-linear-gradient(88deg, rgba(255, 230, 190, .08) 0 1px, transparent 1px 14px),
		linear-gradient(180deg, #C8955F, #B07B45 55%, #A06D3A);
	--ink: #2B1709; --ink-soft: rgba(43, 23, 9, .6); --edge: rgba(80, 45, 15, .25);
}
.sb-stand[data-material="gold"] {
	--face: linear-gradient(135deg, #F7E3A1 0%, #D9AE4F 35%, #F3D78A 55%, #B8872C 100%);
	--ink: #2A1D04; --ink-soft: rgba(42, 29, 4, .6); --edge: rgba(120, 85, 20, .35);
}
.sb-stand[data-material="clear"] .sb-stand__qr,
.sb-stand[data-material="white"] .sb-stand__qr { box-shadow: 0 0 0 1px rgba(22, 16, 31, .12); }

/* --- Panel --------------------------------------------------------------- */
.sb-designer__panel { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.sb-step {
	margin: 0;
	padding: 20px 20px 18px;
	border: 1px solid #EDE6F7;
	border-radius: 22px;
	background: #FFFFFF;
	box-shadow: 0 14px 34px rgba(76, 40, 130, .07);
	min-width: 0;
}
.sb-step legend {
	float: inline-start;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: #16101F;
}
.sb-step legend + * { clear: both; }
.sb-step__n {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: linear-gradient(135deg, #B87CF8, #FB7FC7);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	flex: 0 0 auto;
}
.sb-designer .sb-free { display: inline-block; padding: 0 10px; border-radius: 999px; background: linear-gradient(90deg, #B87CF8, #FB7FC7); color: #fff; font-size: 12px; line-height: 22px; }

/* material chips */
.sb-swatches-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sb-mat { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid #EDE6F7; background: #FBF9FE; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.sb-mat input { position: absolute; opacity: 0; pointer-events: none; }
.sb-mat:hover { border-color: rgba(184, 124, 248, .6); }
.sb-mat:has(input:checked) { border-color: #B87CF8; background: #fff; box-shadow: 0 0 0 3px rgba(184, 124, 248, .18); }
.sb-mat:has(input:focus-visible) { outline: 2px solid #B87CF8; outline-offset: 2px; }
.sb-mat__chip { flex: 0 0 30px; height: 30px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.sb-mat__chip[data-material="black"] { background: linear-gradient(135deg, #2A2233, #0E0B14); }
.sb-mat__chip[data-material="white"] { background: #fff; }
.sb-mat__chip[data-material="clear"] { background: linear-gradient(135deg, #EAF4FF, #FFFFFF 60%, #D8E6F5); }
.sb-mat__chip[data-material="wood"] { background: repeating-linear-gradient(95deg, rgba(90, 52, 20, .18) 0 2px, transparent 2px 6px), #B98552; }
.sb-mat__chip[data-material="gold"] { background: linear-gradient(135deg, #F7E3A1, #C9972F); }
.sb-mat__txt { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.sb-mat__txt b { font-size: 14px; color: #16101F; }
.sb-mat__txt small { font-size: 12.5px; font-weight: 700; color: #E0529F; }

/* drop zone */
.sb-drop { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 16px; border: 1.5px dashed rgba(184, 124, 248, .6); background: rgba(184, 124, 248, .06); cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.sb-drop:hover, .sb-drop.is-over { background: rgba(184, 124, 248, .12); border-color: #B87CF8; }
.sb-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.sb-drop__icon { flex: 0 0 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, #B87CF8, #FB7FC7); color: #fff; }
.sb-drop__text { display: flex; flex-direction: column; gap: 2px; line-height: 1.5; }
.sb-drop__text b { font-size: 14.5px; color: #16101F; }
.sb-drop__text small { font-size: 12.5px; color: #6B6180; }
.sb-drop__file { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: #F6F2FB; font-size: 13.5px; font-weight: 600; color: #16101F; }
.sb-drop__file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-drop__file[hidden], .sb-drop__error[hidden] { display: none; }
.sb-drop__clear { appearance: none; border: 0 !important; background: none !important; color: #E0529F !important; font: inherit; font-size: 13px; font-weight: 700; padding: 0 !important; cursor: pointer; box-shadow: none !important; }
.sb-drop__error { margin: 10px 0 0; font-size: 13px; color: #D93A63; }

/* fields */
.sb-designer .sb-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.sb-designer .sb-field:last-child { margin-bottom: 0; }
.sb-designer .sb-field > span { font-size: 14px; font-weight: 600; line-height: 1.6; color: #16101F; }
.sb-designer .sb-field small { font-weight: 400; opacity: .75; }
.sb-designer .sb-field .required { color: #E0529F; text-decoration: none; border: 0; }
.sb-designer .sb-field input,
.sb-designer .sb-field select,
.sb-designer .sb-field textarea { width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 16px; border-radius: 12px !important; border: 1px solid #E4DAF1 !important; background: #FBF9FE !important; color: #16101F !important; font: inherit; font-size: 15px; line-height: 1.6; box-shadow: none !important; }
.sb-designer .sb-field textarea { resize: vertical; }
.sb-designer .sb-field input:focus, .sb-designer .sb-field select:focus, .sb-designer .sb-field textarea:focus { outline: none; border-color: #B87CF8 !important; box-shadow: 0 0 0 4px rgba(184, 124, 248, .18) !important; background: #fff !important; }

/* buy bar */
.sb-designer__buy { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; padding-inline-start: 20px; border-radius: 20px; background: rgba(20, 12, 36, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 44px rgba(20, 12, 36, .28); }
.sb-designer__total { display: flex; flex-direction: column; line-height: 1.3; color: #fff; }
.sb-designer__total small { font-size: 12px; opacity: .7; }
.sb-designer__total b { font-size: 24px; font-weight: 700; }
.sb-designer__submit { appearance: none; height: 52px; padding: 0 30px !important; border: 0 !important; border-radius: 999px !important; background: linear-gradient(90deg, #B87CF8, #FB7FC7) !important; color: #fff !important; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 12px 28px rgba(184, 124, 248, .4); transition: filter .2s ease, transform .2s ease; }
.sb-designer__submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.sb-designer__submit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.sb-stand, .sb-stand__face, .sb-mat, .sb-designer__submit { transition: none; }
}
/* On phones the price + button stay in reach while filling the steps. */
@media (max-width: 1024px) { .sb-designer__buy { position: sticky; bottom: 10px; } }
@media (max-width: 767px) { .sb-stand { width: 62vw; } .sb-stand__name { font-size: 15px; } .sb-stand__line { font-size: 12.5px; } }