/* ==========================================================================
   Søskende navnegenerator — bygger på samme "navneskilt"-designsprog som
   hovedsøgningen (frontend.css), som denne fil altid indlæses sammen med.
   ========================================================================== */

.bnd-siblings-app {
	--bnd-uldhvid: #FAF6EF;
	--bnd-kul: #2A2620;
	--bnd-kul-blød: #6B6559;
	--bnd-fyr: #6B8F71;
	--bnd-rosenstoev: #C97B7E;
	--bnd-havblaa: #5D89A1;
	--bnd-rav: #C98A42;
	--bnd-rav-lys: #F3E4CC;
	--bnd-linje: #E4DACB;

	--bnd-font-display: 'Fraunces', Georgia, serif;
	--bnd-font-body: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	font-family: var(--bnd-font-body);
	color: var(--bnd-kul);
	max-width: 640px;
	margin: 0 auto;
}

.bnd-siblings-app *,
.bnd-siblings-app *::before,
.bnd-siblings-app *::after {
	box-sizing: border-box;
}

/* ---------- Formular ---------- */

.bnd-siblings-form {
	background: #fff;
	border: 1px solid var(--bnd-linje);
	border-radius: 16px;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.bnd-siblings-field label,
.bnd-siblings-field > .bnd-filter-title {
	display: block;
	font-weight: 700;
	font-size: 0.9rem;
	margin-bottom: 0.4rem;
}

.bnd-siblings-input {
	width: 100%;
	font-family: var(--bnd-font-body);
	font-size: 1rem;
	padding: 0.7rem 0.9rem;
	border: 1.5px solid var(--bnd-linje);
	border-radius: 10px;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bnd-siblings-input:focus-visible {
	border-color: var(--bnd-rav);
	box-shadow: 0 0 0 3px var(--bnd-rav-lys);
}

.bnd-siblings-koen-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.4rem;
}

/* Køn-radioknapperne bruger browserens EGEN, native radioknap (kun tonet
   med accent-color) i stedet for en skjult input + selvbygget visuel
   erstatning. Det er markant mere robust på tværs af browsere: knappen kan
   aldrig blive usynlig eller ikke-klikbar, uanset CSS-understøttelse. */
.bnd-siblings-radio {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--bnd-kul-blød);
	cursor: pointer;
	user-select: none;
}

.bnd-siblings-radio input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--bnd-rav);
	cursor: pointer;
	flex-shrink: 0;
}

.bnd-siblings-radio--pige input[type="radio"] { accent-color: var(--bnd-rosenstoev); }
.bnd-siblings-radio--dreng input[type="radio"] { accent-color: var(--bnd-havblaa); }
.bnd-siblings-radio--unisex input[type="radio"] { accent-color: var(--bnd-fyr); }

.bnd-siblings-radio:has(input:checked) span,
.bnd-siblings-radio.is-checked span {
	color: var(--bnd-kul);
	font-weight: 700;
}

.bnd-siblings-error {
	color: #B3261E;
	font-size: 0.88rem;
	font-weight: 600;
	margin: 0;
}

.bnd-siblings-submit {
	align-self: flex-start;
	font-family: var(--bnd-font-body);
	font-weight: 700;
	font-size: 0.98rem;
	color: #fff;
	background: var(--bnd-rosenstoev);
	border: none;
	border-radius: 999px;
	padding: 0.85rem 2rem;
	cursor: pointer;
	transition: background 0.15s ease;
}
.bnd-siblings-submit:hover {
	background: var(--bnd-kul);
}
.bnd-siblings-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

/* ---------- Resultater ---------- */

.bnd-siblings-results {
	margin-top: 2.5rem;
}

.bnd-siblings-heading {
	font-family: var(--bnd-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
}

.bnd-siblings-fallback-note {
	font-size: 0.86rem;
	color: var(--bnd-kul-blød);
	background: var(--bnd-rav-lys);
	border-radius: 10px;
	padding: 0.6rem 0.9rem;
	margin: 0 0 1.25rem;
}

.bnd-siblings-list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 1px solid var(--bnd-linje);
	border-radius: 16px;
	overflow: hidden;
}

.bnd-siblings-item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem 1.25rem;
	border-bottom: 1px solid var(--bnd-linje);
}
.bnd-siblings-item:last-child {
	border-bottom: none;
}

.bnd-siblings-rank {
	flex-shrink: 0;
	width: 1.5rem;
	font-size: 0.85rem;
	color: var(--bnd-kul-blød);
	font-weight: 700;
}

.bnd-siblings-dot {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--bnd-fyr);
}
.bnd-siblings-dot--pige { background: var(--bnd-rosenstoev); }
.bnd-siblings-dot--dreng { background: var(--bnd-havblaa); }
.bnd-siblings-dot--unisex { background: var(--bnd-fyr); }

.bnd-siblings-name {
	flex-grow: 1;
	font-family: var(--bnd-font-display);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--bnd-rosenstoev);
}

.bnd-siblings-origin {
	flex-shrink: 0;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--bnd-rav);
	white-space: nowrap;
}

.bnd-siblings-empty {
	padding: 1.5rem;
	text-align: center;
	color: var(--bnd-kul-blød);
	font-size: 0.92rem;
}

/* Inline-variant af favorit-hjertet: en almindelig, statisk knap i rækken
   i stedet for det absolut placerede "vedhæng" på navnekortene. */
.bnd-fav-btn--inline {
	position: static;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
}

/* ---------- Handlinger ---------- */

.bnd-siblings-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.bnd-button-secondary {
	font-family: var(--bnd-font-body);
	font-weight: 700;
	font-size: 0.92rem;
	padding: 0.7rem 1.5rem;
	border-radius: 999px;
	border: 1.5px solid var(--bnd-kul);
	background: var(--bnd-kul);
	color: #fff;
	cursor: pointer;
	transition: all 0.15s ease;
}
.bnd-button-secondary:hover {
	background: var(--bnd-uldhvid);
	color: var(--bnd-kul);
}

.bnd-button-secondary--ghost {
	background: transparent;
	color: var(--bnd-kul);
}
.bnd-button-secondary--ghost:hover {
	background: var(--bnd-kul);
	color: #fff;
}

/* ---------- Responsivt ---------- */

@media (max-width: 560px) {
	.bnd-siblings-form {
		padding: 1.25rem;
	}

	.bnd-siblings-item {
		padding: 0.75rem 1rem;
		flex-wrap: wrap;
	}

	.bnd-siblings-origin {
		order: 5;
		width: 100%;
		padding-left: calc(1.5rem + 12px + 0.85rem * 2);
	}
}