#myForm .first-form-personnummer .flags-wrapper {
	width: auto !important;
	flex: 0 0 auto;
}

#myForm .flags-wrapper .radio-flag-wrapper {
	width: auto;
}

#myForm .first-form-personnummer .person-number-wrapper {
	width: auto !important;
	flex: 1 1 0;
	min-width: 0;
}

.cb-other-wrapper {
	display: flex;
	align-items: center;
	gap: 7px;
}

/* Globe icon for "Annat land", sized like the SE / DK flags */
#myForm .cb-other-wrapper label.cb-other-globe {
	cursor: pointer;
	margin: 0;
	width: auto;
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

#myForm .cb-other-globe svg {
	display: block;
	width: 25px;
	height: 25px;
}

/* "Annat land" text next to the globe */
#myForm .cb-other-globe {
	gap: 6px;
}

#myForm .cb-other-text {
	font-size: 14px;
	line-height: 1;
	color: #0f2b40;
	white-space: nowrap;
}

@media (max-width: 400px) {
	#myForm .cb-other-globe svg {
		width: 17px;
		height: 17px;
	}

	#myForm .cb-other-text {
		font-size: 13px;
	}
}

/* Date of birth + gender side by side */
#myForm .cb-other-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	width: 100%;
	position: relative;
	margin-top: 8px; /* same offset as the personnummer input, so nothing jumps */
}

/* Empty state uses the same grey as the personnummer placeholder */
#myForm #cb-other-dob.cb-empty,
#myForm #cb-other-gender.cb-empty {
	color: rgb(117, 117, 117);
}

#myForm #cb-other-gender option {
	color: #000;
}

#myForm .cb-other-fields[style*="none"] {
	display: none !important;
}

#myForm .cb-other-fields input,
#myForm .cb-other-fields select {
	width: 100%;
	min-width: 0;
	margin: 0;
}

/* Same chevron as the phone country code dropdown */
#myForm #cb-other-gender {
	-webkit-appearance: none;
	appearance: none;
	padding: 0 30px 0 12px;
	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 1.5l5 5 5-5' fill='none' stroke='%23333' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
}

/* Error message as a small tooltip under the fields (doesn't push the layout) */
#myForm .cb-other-error {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 20;
	max-width: 280px;
	margin: 0;
	padding: 8px 12px;
	background: #0f2b40;
	color: #fff;
	font-size: 13px;
	line-height: 1.35;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(15, 43, 64, 0.18);
	pointer-events: none;
}

/* Little arrow pointing up at the field */
#myForm .cb-other-error::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 18px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #0f2b40;
}

#myForm .cb-other-error:empty {
	display: none;
}

/* Mobile: field under the radios, date and gender stacked */
@media (max-width: 600px) {
	#myForm .first-form-personnummer {
		flex-wrap: wrap;
		height: auto !important;
		row-gap: 10px;
	}

	#myForm .first-form-personnummer .flags-wrapper {
		margin-bottom: 0;
	}

	#myForm .first-form-personnummer .person-number-wrapper {
		flex: 1 1 100%;
	}

	#myForm .cb-other-fields {
		grid-template-columns: 1fr;
	}
}