/* ── Platform Demo ─────────────────────────────────────────────────────────── */

.uw-pd {
	position: relative;
}

/* ── Stage ─────────────────────────────────────────────────────────────────── */

.uw-pd__stage {
	display: flex;
	position: relative;
	max-width: 457px;
	height: 0;
	width: 100%;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-left: auto;
	margin-right: auto;
	transition: height 0.35s ease-out;
}

/* ── Clouds ────────────────────────────────────────────────────────────────── */

.uw-pd__cloud {
	position: absolute;
	pointer-events: none;
	z-index: 0;
	color: #C7D9FF;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.uw-pd__cloud.is-visible {
	opacity: 1;
}

.uw-pd__cloud--bl {
	bottom: 16px;
	left: -87px;
	width: 196px;
	animation: uw-pd-drift-a 10s ease-in-out infinite;
}

.uw-pd__cloud--bl svg {
	height: 60px;
	width: 196px;
}

.uw-pd__cloud--tr {
	top: -29px;
	right: -77px;
	width: 196px;
	animation: uw-pd-drift-b 13s ease-in-out infinite;
}

.uw-pd__cloud--tr svg {
	height: 60px;
	width: 196px;
}

@keyframes uw-pd-drift-a {
	0%   { transform: translate(0px,   0px); }
	30%  { transform: translate(12px, -8px); }
	65%  { transform: translate(-7px,  6px); }
	100% { transform: translate(0px,   0px); }
}

@keyframes uw-pd-drift-b {
	0%   { transform: translate(0px,  0px); }
	35%  { transform: translate(-10px, 7px); }
	70%  { transform: translate(8px,  -5px); }
	100% { transform: translate(0px,  0px); }
}

/* ── Inner card ────────────────────────────────────────────────────────────── */

.uw-pd__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	max-width: 0px;
	height: 2px;
	width: 100%;
	z-index: 1;
	background: linear-gradient(#18202D, #18202D) padding-box, linear-gradient(150deg, #FB7F7F 14.17%, #FEE5E5 84.93%) border-box;
	border: 2px solid transparent;
	border-radius: 16px;
	opacity: 0;
	transition: max-width 0.5s ease-out, height 0.5s ease-out, opacity 0.2s ease-out;
}

.uw-pd__inner.is-open {
	max-width: 457px;
	opacity: 1;
}

/* ── Steps ─────────────────────────────────────────────────────────────────── */

/* All steps hidden by default — JS manages display + transition via inline styles */
.uw-pd__step {
	display: none;
	width: calc(100% - 64px);
	opacity: 0;
	transition: opacity 0.5s ease;
}

/* ── Form ──────────────────────────────────────────────────────────────────── */

.uw-pd__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.uw-pd__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.uw-pd__label {
	display: block;
	position: absolute;
	top: 0px;
	left: -9999px;
	height: 0px;
	width: 0px;
	font-size: 0px;
	font-weight: 400;
}

.uw-pd__required {
	color: #E53E3E;
	margin-left: 2px;
}

.uw-pd__input {
	width: 100%;
	box-sizing: border-box;
	padding: 4px 16px;
	background: none !important;
	border: 1px solid #F2F7FC;
	border-radius: 4px;
	outline: none;
	color: #94A3B8;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -0.16px;
	line-height: 1.4;
	text-align: left;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.uw-pd__input:focus {
	border-color: #0058FF;
	box-shadow: 0 0 0 3px rgba(0, 88, 255, 0.12);
}

.uw-pd__input.is-error {
	border-color: #E53E3E;
	box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.12);
}

.uw-pd__input::placeholder {
	color: #9CA3AF;
}

.uw-pd__title {
	margin-bottom: 16px;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}

.uw-pd__actions {
	display: flex;
	justify-content: flex-start;
}

/* Specific to Step 2 */
.uw-pd__step[data-step="2"] .uw-pd__actions {
	display: flex;
	justify-content: center;
	gap: 16px;
}

/* ── Step 3: inline country + phone ───────────────────────────────────────── */

.uw-pd__field--row {
	display: flex;
	flex-direction: row;
	gap: 8px;
}

.uw-pd__input--country {
	flex: 0 0 130px;
	width: 130px;
}

select.uw-pd__input {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	padding-right: 28px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239CA3AF' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
}

select.uw-pd__input option {
	background: #18202D;
	color: #94A3B8;
}

/* ── Message steps (4 / 5 / 6) ────────────────────────────────────────────── */

.uw-pd__message {
	margin: 0;
	padding: 32px 0;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	text-align: center;
}