.vadelma-vieraskirja {
	max-width: 640px;
	margin: 3rem auto 0;
	color: inherit;
	box-sizing: border-box;
}

.vadelma-vieraskirja *,
.vadelma-vieraskirja *::before,
.vadelma-vieraskirja *::after {
	box-sizing: border-box;
}

.vadelma-vieraskirja__title {
	margin-bottom: 1rem;
}

.vadelma-vieraskirja__form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 1.8rem;
}

/* Teeman oma input[type="text"]-sääntö on spesifisyydeltään luokkaamme
 * suurempi (pakottaa mm. valkoisen taustan) - siksi !important joka
 * kohtaan, jotta nimikenttä näyttää samalta kuin viesti-tekstialue. */
.vadelma-vieraskirja__name,
.vadelma-vieraskirja__content {
	font: inherit !important;
	font-size: 14px !important;
	padding: 8px 10px !important;
	border-radius: 8px !important;
	border: 1px solid rgba(255, 255, 255, .25) !important;
	background: rgba(255, 255, 255, .08) !important;
	color: inherit !important;
	box-shadow: none !important;
	max-width: 100%;
	width: 100%;
	display: block;
}

.vadelma-vieraskirja__name {
	max-width: 260px;
}

.vadelma-vieraskirja__content {
	min-height: 90px;
	resize: vertical;
}

.vadelma-vieraskirja__form button[type="submit"] {
	align-self: flex-start;
	border: 0;
	border-radius: 999px;
	padding: 8px 20px;
	font-weight: 600;
	cursor: pointer;
	background: var(--vg-accent, #fa4273);
	color: #fff;
}

.vadelma-vieraskirja__form button[type="submit"]:disabled {
	opacity: .6;
	cursor: default;
}

.vadelma-vieraskirja__status {
	margin: 0;
	font-size: 12px;
	opacity: .8;
}

.vadelma-vieraskirja__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vadelma-vieraskirja__entry {
	background: rgba(255, 255, 255, .08);
	border-radius: 8px;
	padding: 10px 14px;
}

.vadelma-vieraskirja__entry-author {
	font-weight: 600;
	font-size: 13px;
}

.vadelma-vieraskirja__entry-date {
	font-size: 11px;
	opacity: .5;
	margin-left: 8px;
}

.vadelma-vieraskirja__entry-content {
	margin: 4px 0 0;
	font-size: 14px;
	white-space: pre-wrap;
}

.vadelma-vieraskirja__empty,
.vadelma-vieraskirja__loading {
	font-size: 13px;
	opacity: .6;
}