/* ============================================================
   MVCKO — doradca rozmiaru
   assets/size-advisor.css
   ============================================================ */

/* Modal bywa renderowany poza kontenerem .mvp, więc zmienne
   definiujemy u siebie — inaczej kolory wychodzą puste. */
#mvsaModal{
	--pink:#FF6A97;
	--bg:#161616;
	--line:rgba(255,255,255,.14);
	--txt:#F4F4F4;
	--muted:#9A9A9E;
}

.mvsa__intro{
	font-size:13px;line-height:1.6;color:var(--muted);
	margin:-8px 0 22px;
}

/* ---------- formularz ---------- */
.mvsa__row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.mvsa__f{display:flex;flex-direction:column;gap:7px}
.mvsa__f label{
	font-family:'Unbounded',sans-serif;font-weight:900;
	font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.mvsa__f input[type=number],
#mvsaModal .mvsa__f input{
	height:54px !important;padding:0 16px !important;
	border-radius:10px !important;
	border:1px solid var(--line) !important;
	background:#0E0E0F !important;
	color:var(--pink) !important;
	font-family:'Unbounded',sans-serif !important;font-weight:900 !important;
	font-size:18px !important;letter-spacing:.02em;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
	transition:border-color .2s,box-shadow .2s;
	-moz-appearance:textfield;
	-webkit-appearance:none;appearance:none;
}
.mvsa__f input::-webkit-outer-spin-button,
.mvsa__f input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mvsa__f input::placeholder{
	color:rgba(255,255,255,.22) !important;
	font-weight:400;font-family:'DM Sans',sans-serif;font-size:16px;
}
#mvsaModal .mvsa__f input:focus{
	outline:none !important;
	border-color:rgba(255,106,151,.7) !important;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 3px rgba(255,106,151,.16) !important;
}
/* autouzupełnianie przeglądarki potrafi wstawić białe tło — blokujemy */
#mvsaModal .mvsa__f input:-webkit-autofill,
#mvsaModal .mvsa__f input:-webkit-autofill:focus{
	-webkit-text-fill-color:var(--pink) !important;
	-webkit-box-shadow:0 0 0 1000px #0E0E0F inset !important;
	caret-color:var(--pink);
}

/* ---------- krój ---------- */
.mvsa__fit-label{
	display:block;
	font-family:'Unbounded',sans-serif;font-weight:900;
	font-size:10px;letter-spacing:.12em;text-transform:uppercase;
	color:var(--muted);margin-bottom:9px;
}
.mvsa__fit{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:22px}
.mvsa__fit button{
	padding:12px 6px;border-radius:10px;
	border:1px solid var(--line);
	background:rgba(255,255,255,.04);
	color:var(--txt);cursor:pointer;
	font-family:'Unbounded',sans-serif;font-weight:900;
	font-size:10px;letter-spacing:.08em;text-transform:uppercase;
	transition:.2s cubic-bezier(.2,.8,.2,1);
}
.mvsa__fit button span{
	display:block;margin-top:4px;
	font-family:'DM Sans',sans-serif;font-weight:400;
	font-size:10px;letter-spacing:0;text-transform:none;color:var(--muted);
}
.mvsa__fit button:hover{border-color:rgba(255,106,151,.4)}
.mvsa__fit button.is-active{
	border-color:rgba(255,106,151,.6);
	background:
		radial-gradient(120% 160% at 14% 0%, rgba(255,106,151,.22) 0%, rgba(255,106,151,0) 60%),
		rgba(255,106,151,.10);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.mvsa__fit button.is-active span{color:var(--txt)}

.mvsa__submit,
#mvsaModal button.mvsa__submit{
	width:100% !important;
	height:54px !important;
	display:grid !important;place-items:center !important;
	border-radius:12px !important;
	border:1.5px solid rgba(255,255,255,.28) !important;
	background:
		radial-gradient(120% 160% at 12% 0%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 55%),
		radial-gradient(120% 160% at 88% 100%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 55%),
		var(--pink) !important;
	color:#161616 !important;
	font-family:'Unbounded',sans-serif !important;font-weight:900 !important;
	font-size:11px !important;letter-spacing:.14em !important;text-transform:uppercase !important;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.55),
		inset 0 -2px 4px rgba(0,0,0,.18),
		0 12px 28px rgba(255,106,151,.30) !important;
	cursor:pointer;
	transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s !important;
}
#mvsaModal button.mvsa__submit:hover{
	transform:translateY(-2px);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 18px 38px rgba(255,106,151,.44) !important;
}

/* ---------- wynik ---------- */
.mvsa__result{
	margin-top:24px;padding:22px;
	border-radius:14px;border:1px solid rgba(255,106,151,.32);
	background:
		radial-gradient(120% 90% at 10% 0%, rgba(255,106,151,.14) 0%, rgba(255,106,151,0) 62%),
		rgba(255,255,255,.03);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
	animation:mvsaIn .35s cubic-bezier(.2,.8,.2,1) both;
}
.mvsa__result[hidden]{display:none}
@keyframes mvsaIn{
	from{opacity:0;transform:translateY(10px)}
	to{opacity:1;transform:translateY(0)}
}

.mvsa__result-label{
	display:block;
	font-family:'Unbounded',sans-serif;font-weight:900;
	font-size:10px;letter-spacing:.14em;text-transform:uppercase;
	color:var(--pink);margin-bottom:6px;
}
.mvsa__size{
	display:block;
	font-family:'Unbounded',sans-serif;font-weight:900;
	font-size:44px;line-height:1;letter-spacing:-.03em;
	text-transform:uppercase;color:var(--pink);margin-bottom:14px;
}
.mvsa__why,
.mvsa__alt,
.mvsa__warn,
.mvsa__disclaimer{margin:0 0 10px;font-size:13px;line-height:1.6}
.mvsa__why{color:#D8D8DA}
.mvsa__alt{color:var(--muted)}
.mvsa__warn{color:#FFC46A}
.mvsa__disclaimer{
	margin:16px 0 0;padding-top:14px;
	border-top:1px solid rgba(255,255,255,.08);
	font-size:12px;color:var(--muted);
}

/* ---------- przycisk „dobierz rozmiar" na karcie ---------- */
.mvp .mvp__ghost.mvsa__open,
button.mvsa__open{
	--pink:#FF6A97;
	display:inline-flex !important;align-items:center;gap:7px;
	margin-top:12px;padding:9px 16px !important;
	border:1.5px solid var(--pink) !important;border-radius:100px !important;
	background:
		radial-gradient(120% 160% at 14% 0%, rgba(255,106,151,.22) 0%, rgba(255,106,151,0) 60%),
		rgba(255,106,151,.08) !important;
	color:var(--pink) !important;
	font-family:'Unbounded',sans-serif !important;font-weight:900 !important;
	font-size:10px !important;letter-spacing:.12em !important;text-transform:uppercase !important;
	text-decoration:none !important;cursor:pointer;
	box-shadow:0 0 0 0 rgba(255,106,151,.35),inset 0 1px 0 rgba(255,255,255,.12) !important;
	animation:mvsaPulse 2.8s ease-in-out infinite;
	transition:transform .22s cubic-bezier(.2,.8,.2,1),background .22s,color .22s !important;
}
button.mvsa__open::before{
	content:'';width:13px;height:13px;flex:0 0 13px;
	background:currentColor;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M2 8h20v8H2z'/%3E%3Cpath d='M6 8v3M10 8v4M14 8v3M18 8v4'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M2 8h20v8H2z'/%3E%3Cpath d='M6 8v3M10 8v4M14 8v3M18 8v4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.mvp .mvp__ghost.mvsa__open:hover,
button.mvsa__open:hover{
	transform:translateY(-1px);
	background:var(--pink) !important;
	color:#161616 !important;
	animation:none;
}
@keyframes mvsaPulse{
	0%,100%{box-shadow:0 0 0 0 rgba(255,106,151,.35),inset 0 1px 0 rgba(255,255,255,.12)}
	50%    {box-shadow:0 0 0 6px rgba(255,106,151,0),inset 0 1px 0 rgba(255,255,255,.12)}
}
@media (prefers-reduced-motion:reduce){ button.mvsa__open{animation:none} }

/* ---------- podświetlenie pigułki na karcie ---------- */
.mvp__pill.is-suggested{
	border-color:rgba(255,106,151,.65) !important;
	box-shadow:0 0 0 1px rgba(255,106,151,.35),0 8px 22px rgba(255,106,151,.22);
}
.mvp__pill.is-suggested::after{
	content:'';position:absolute;top:-4px;right:-4px;
	width:8px;height:8px;border-radius:50%;
	background:var(--pink);
	box-shadow:0 0 0 2px var(--bg);
}
.mvp__pill{position:relative}

@media (max-width:600px){
	.mvsa__row{grid-template-columns:1fr}
	.mvsa__fit{grid-template-columns:1fr}
	.mvsa__fit button{display:flex;align-items:baseline;gap:8px;text-align:left}
	.mvsa__fit button span{margin:0}
	.mvsa__size{font-size:36px}
}