/* ====== Chmura Tagów Webinaru — style ====== */

/* ---------- Formularz ---------- */
.cw-form-card {
	max-width: 440px;
	margin: 0 auto;
	padding: 28px 26px;
	border-radius: 18px;
	background: #0b1220;
	color: #e6edf6;
	box-shadow: 0 18px 50px rgba(8, 16, 32, .35);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.cw-form-title { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.cw-form-desc { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: #9fb0c5; }
.cw-field { margin-bottom: 14px; }
.cw-field label {
	display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .06em; color: #7d8ea6;
}
.cw-field input {
	width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 16px;
	color: #e6edf6; background: #131c2e; border: 1px solid #24314a; border-radius: 12px;
	transition: border-color .15s, box-shadow .15s;
}
.cw-field input::placeholder { color: #5b6b84; }
.cw-field input:focus {
	outline: none; border-color: #c084fc; box-shadow: 0 0 0 3px rgba(192, 132, 252, .25);
}
.cw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.cw-submit {
	width: 100%; margin-top: 6px; padding: 13px 16px; font-size: 16px; font-weight: 600;
	color: #1a0830; background: linear-gradient(180deg, #d8b4fe, #a855f7);
	border: none; border-radius: 12px; cursor: pointer; transition: transform .08s, filter .15s;
}
.cw-submit:hover { filter: brightness(1.05); }
.cw-submit:active { transform: translateY(1px); }
.cw-submit:disabled { opacity: .6; cursor: default; }

.cw-message { min-height: 20px; margin: 12px 0 0; font-size: 14px; }
.cw-message--error   { color: #fb7185; }
.cw-message--info    { color: #9fb0c5; }
.cw-message--success { color: #4ade80; }

/* ---------- Chmura ---------- */
.cw-cloud-wrap { position: relative; }

.cw-cloud {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: center;
	gap: 4px 22px;
	padding: 32px 28px;
	box-sizing: border-box;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Na zwykłej stronie — ciemny panel, żeby kolorowe hasła były czytelne */
.cw-cloud-wrap:not(.cw-obs) .cw-cloud {
	background: #0b1220;
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(8, 16, 32, .18);
}

/* Nakładka OBS — przezroczyste tło */
.cw-obs .cw-cloud { background: transparent; }
.cw-obs-body { background: transparent; }

/* Pojedyncze hasło */
.cw-tag {
	display: inline-block;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.01em;
	white-space: nowrap;
	transition: font-size .6s cubic-bezier(.22, 1, .36, 1), transform .3s ease;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 18px rgba(0, 0, 0, .35);
	transform-origin: center;
}

/* Nowe hasło — wskakuje */
.cw-tag--new { animation: cw-pop .65s cubic-bezier(.22, 1.3, .36, 1) both; }

/* Hasło zyskało głos — szybki „puls" powiększenia */
.cw-tag--grow { animation: cw-grow .55s ease; }

@keyframes cw-pop {
	0%   { opacity: 0; transform: scale(.3); }
	60%  { opacity: 1; transform: scale(1.12); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes cw-grow {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.18); }
	100% { transform: scale(1); }
}

/* Licznik */
.cw-counter {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 5;
	padding: 7px 14px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #f3e8ff;
	background: rgba(24, 10, 40, .72);
	border: 1px solid rgba(192, 132, 252, .45);
	border-radius: 999px;
	backdrop-filter: blur(6px);
}
.cw-counter-num { color: #d8b4fe; font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
	.cw-tag--new, .cw-tag--grow { animation: none; }
}