/* =====================================================
   KUUKUNEN – LÖÖPPIGENERAATTORI
   ===================================================== */

.kuukunen-looppigeneraattori {
	display: grid;
	grid-template-columns: minmax(260px, 340px) minmax(320px, 520px);
	gap: 40px;

	align-items: start;

	max-width: 940px;
	margin: 40px auto;
}


/* EDITORI */

.kuukunen-looppi-editori {
	padding: 24px;

	background: #fff;

	border: 1px solid #e5e7eb;
	border-radius: 14px;
}

.kuukunen-looppi-editori h2 {
	margin-top: 0;
}

.kuukunen-looppi-editori label {
	display: block;

	margin: 20px 0 6px;

	font-weight: 700;
}

.kuukunen-looppi-editori textarea,
.kuukunen-looppi-editori select {
	box-sizing: border-box;

	width: 100%;

	padding: 10px 12px;

	border: 1px solid #d5d9df;
	border-radius: 8px;

	background: #fff;

	font: inherit;
}

.kuukunen-looppi-ohje {
	color: #6b7280;
}


/* ESikatselu */

.kuukunen-looppi-esikatselu {
	display: flex;
	justify-content: center;
}


/* VARSINAINEN LÖÖPPI */

.kuukunen-looppi {
	box-sizing: border-box;

	width: 100%;
	max-width: 500px;

	overflow: hidden;

	background: #ffd900;

	border: 8px solid #111;

	box-shadow: 0 8px 25px rgba(0, 0, 0, .16);

	text-align: center;
}


/* LOGO */

.kuukunen-looppi-logo {
	padding: 10px 16px;

	background: #111;
	color: #fff;

	font-size: 30px;
	font-weight: 900;
	letter-spacing: 3px;
}


/* PÄÄOTSIKKO */

.kuukunen-looppi-paaotsikko {
	padding: 22px 18px;

	font-size: clamp(34px, 5vw, 58px);
	font-weight: 950;
	line-height: .95;

	text-transform: uppercase;

	overflow-wrap: anywhere;
}


/* KUVA */

.kuukunen-looppi-kuva {
	margin: 0 18px;

	background: #eee;

	border: 5px solid #111;
}

.kuukunen-looppi-kuvapaikka {
	display: flex;
	align-items: center;
	justify-content: center;

	aspect-ratio: 4 / 3;

	color: #777;

	font-weight: 700;
}


/* ALAOTSIKKO */

.kuukunen-looppi-alaotsikko {
	padding: 20px 24px;

	font-size: 24px;
	font-weight: 800;
	line-height: 1.1;
}


/* FOOTER */

.kuukunen-looppi-footer {
	padding: 8px;

	background: #111;
	color: #fff;

	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
}


/* =====================================================
   VAIHTOEHTOISET TYYLIT
   ===================================================== */

.kuukunen-looppi.tyyli-punainen {
	background: #e51b23;
	color: #fff;
}

.kuukunen-looppi.tyyli-punainen
.kuukunen-looppi-logo {
	background: #fff;
	color: #e51b23;
}


.kuukunen-looppi.tyyli-tumma {
	background: #20242b;
	color: #fff;
}

.kuukunen-looppi.tyyli-tumma
.kuukunen-looppi-logo {
	background: #050505;
}

/* =====================================================
   KUVAN VALINTA
   ===================================================== */

.kuukunen-looppi-kuvavalinta {
	margin-top: 20px;
}

.kuukunen-looppi-kuvavalinta label {
	margin-top: 0;
}

.kuukunen-looppi-kuvapainike,
.kuukunen-looppi-poista-kuva {
	padding: 9px 14px;

	border: 1px solid #d5d9df;
	border-radius: 8px;

	background: #fff;

	font: inherit;
	font-weight: 700;

	cursor: pointer;
}

.kuukunen-looppi-kuvapainike:hover {
	background: #f3f4f6;
}

.kuukunen-looppi-poista-kuva {
	margin-left: 6px;

	color: #b42318;
}


/* Lööppiin valittu kuva */

.kuukunen-looppi-kuvapaikka {
	position: relative;

	overflow: hidden;
}

.kuukunen-looppi-kuvapaikka img {
	display: block;

	width: 100%;
	height: 100%;

	aspect-ratio: 4 / 3;

	object-fit: cover;
}

.kuukunen-looppi-kuvapaikka img[hidden] {
	display: none;
}


/* =====================================================
   MOBIILI
   ===================================================== */

@media (max-width: 760px) {

	.kuukunen-looppigeneraattori {
		grid-template-columns: 1fr;

		gap: 24px;

		margin: 20px auto;
	}

}

/* =====================================================
   GENERAATTORIN PAINIKKEET
   ===================================================== */

.kuukunen-looppi-kuvavalinta {
	margin-top: 20px;
}

.kuukunen-looppi-kuvavalinta label {
	display: block;
	margin: 0 0 7px;

	font-weight: 700;
}

.kuukunen-looppi-kuvanapit {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kuukunen-looppi-kuvapainike,
.kuukunen-looppi-poista-kuva {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 40px;

	padding: 9px 14px;

	border: 1px solid #d7dce2;
	border-radius: 8px;

	background: #fff;
	color: #273142;

	font: inherit;
	font-weight: 700;

	cursor: pointer;
}

.kuukunen-looppi-kuvapainike:hover,
.kuukunen-looppi-poista-kuva:hover {
	background: #f4f6f8;
}

.kuukunen-looppi-poista-kuva {
	color: #b42318;
}


/* =====================================================
   LÖÖPIN LUONTIPAINIKE
   ===================================================== */

.kuukunen-looppi-toiminnot {
	margin-top: 26px;
	padding-top: 20px;

	border-top: 1px solid #e5e7eb;
}

.kuukunen-looppi-luo {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: 46px;

	padding: 11px 18px;

	border: 0;
	border-radius: 9px;

	background: #2563eb;
	color: #fff;

	font: inherit;
	font-weight: 800;

	cursor: pointer;
}

.kuukunen-looppi-luo:hover {
	background: #1d4ed8;
}


/* =====================================================
   LÖÖPIN KUVA
   ===================================================== */

.kuukunen-looppi-kuvapaikka {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	aspect-ratio: 4 / 3;

	overflow: hidden;

	background: #eee;
}

.kuukunen-looppi-kuvapaikka img {
	position: absolute;
	inset: 0;

	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

.kuukunen-looppi-kuvapaikka img[hidden] {
	display: none;
}

/* =====================================================
   TALLENNUKSEN STATUS
   ===================================================== */

.kuukunen-looppi-status {
	min-height: 22px;

	margin-top: 12px;

	color: #5f6875;

	font-size: 13px;
	line-height: 1.45;
}

.kuukunen-looppi-status a {
	font-weight: 700;
	text-decoration: none;
}

.kuukunen-looppi-luo:disabled {
	opacity: .6;
	cursor: wait;
}

/* =====================================================
   TALLENNETTU LÖÖPPI
   ===================================================== */

.kuukunen-tallennettu-looppi {
	max-width: 520px;
	margin: 30px auto 50px;
}

.kuukunen-tallennettu-looppi .kuukunen-looppi {
	margin: 0 auto;
}

.kuukunen-looppi-tiedot {
	margin-top: 14px;

	color: #6b7280;

	font-size: 14px;
	text-align: center;
}

.kuukunen-looppi-tallennettu-kuva {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

/* =====================================================
   YKSITTÄINEN LÖÖPPI – SIVUN SIISTIMINEN
   ===================================================== */

/*
 * Yksittäinen Lööppi on oma julkinen näkymänsä kuten Lööppiseinä.
 * Poistetaan Kadencen normaali WordPress-header ja footer myös tältä sivulta.
 */
body.kuukunen-single-looppi #masthead,
body.kuukunen-single-looppi #colophon,
body.kuukunen-single-looppi .site-footer {
	display: none !important;
}

/* Kadencen normaali julkaisun otsikko pois */
body.kuukunen-single-looppi
.entry-header {
	display: none;
}


/* Turhaa pystytyhjää pois */
body.kuukunen-single-looppi
.entry-content-wrap {
	padding-top: 28px;
	padding-bottom: 32px;
}


/* Sisältö keskelle */
body.kuukunen-single-looppi
.entry-content {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}


/* Lööppi itsessään */
body.kuukunen-single-looppi
.kuukunen-tallennettu-looppi {
	max-width: 520px;
	margin: 0 auto;
}


/* Tekijätieto */
body.kuukunen-single-looppi
.kuukunen-looppi-tiedot {
	margin-top: 14px;
}


/* Mobiili */
@media (max-width: 600px) {

	body.kuukunen-single-looppi
	.entry-content-wrap {
		padding: 18px 12px 26px;
	}

}

/* =====================================================
   LÖÖPPISEINÄ – ILMOITUSTAULUTILA
   ===================================================== */

/*
 * Vain sivu, jolla [kuukunen_loopit] on käytössä.
 * Poistetaan teeman normaali navigaatio ja footer, jotta lööpit
 * muodostavat oman rauhallisen ilmoitustaulunäkymän.
 */
body.kuukunen-loopit-wall-page #masthead,
body.kuukunen-loopit-wall-page #colophon,
body.kuukunen-loopit-wall-page .site-footer {
	display: none !important;
}

body.kuukunen-loopit-wall-page {
	background: #f4f6f8;
}

body.kuukunen-loopit-wall-page #inner-wrap,
body.kuukunen-loopit-wall-page #primary,
body.kuukunen-loopit-wall-page .content-area,
body.kuukunen-loopit-wall-page .content-container,
body.kuukunen-loopit-wall-page .content-wrap,
body.kuukunen-loopit-wall-page .entry-content-wrap,
body.kuukunen-loopit-wall-page .entry-content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

body.kuukunen-loopit-wall-page .content-container,
body.kuukunen-loopit-wall-page .content-area,
body.kuukunen-loopit-wall-page #primary {
	max-width: none !important;
	width: 100% !important;
}

.kuukunen-loopit-wallbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin: 0 0 34px;
	padding: 18px 0 14px;
	border-bottom: 1px solid #d8dee6;
}

.kuukunen-loopit-wallbar-title {
	font-size: 18px;
	line-height: 1;
	letter-spacing: .12em;
	color: #1f2937;
}

.kuukunen-loopit-wallbar-home {
	color: #335f8f;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.kuukunen-loopit-wallbar-home:hover {
	text-decoration: underline;
}

/* =====================================================
   KUUKUNEN – LÖÖPPISEINÄ
   ===================================================== */

.kuukunen-loopit-seina {
	max-width: 1180px;
	margin: 0 auto 60px;
	padding: 0 22px;
}

.kuukunen-loopit-seina-header {
	margin-bottom: 28px;
}

.kuukunen-loopit-seina-header h2 {
	margin: 0 0 6px;

	font-size: 32px;
}

.kuukunen-loopit-seina-header p {
	margin: 0;

	color: #6b7280;
}


/* Ruudukko */

.kuukunen-loopit-grid {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 28px;
}


/* Kortti */

.kuukunen-loopit-kortti {
	min-width: 0;
}

.kuukunen-loopit-kortti-linkki {
	display: block;

	color: inherit;
	text-decoration: none;
}

.kuukunen-loopit-kortti-linkki:hover {
	text-decoration: none;
}


/* =====================================================
   PIENENNETTY LÖÖPPI
   ===================================================== */

.kuukunen-looppi-mini {
	width: 100%;
	max-width: none;

	border-width: 5px;

	transition:
		transform .18s ease,
		box-shadow .18s ease;
}

.kuukunen-loopit-kortti-linkki:hover
.kuukunen-looppi-mini {
	transform: translateY(-3px);

	box-shadow:
		0 10px 25px rgba(0, 0, 0, .16);
}


/* Logo pienemmäksi */

.kuukunen-looppi-mini
.kuukunen-looppi-logo {
	padding: 7px 10px;

	font-size: 19px;
	letter-spacing: 2px;
}


/* Otsikko */

.kuukunen-looppi-mini
.kuukunen-looppi-paaotsikko {
	padding: 14px 12px;

	font-size: clamp(24px, 2.5vw, 38px);
	line-height: .95;
}


/* Kuva */

.kuukunen-looppi-mini
.kuukunen-looppi-kuva {
	margin: 0 12px;

	border-width: 3px;
}


/* Alaotsikko */

.kuukunen-looppi-mini
.kuukunen-looppi-alaotsikko {
	padding: 12px 14px;

	font-size: 17px;
	line-height: 1.05;
}


/* Footer */

.kuukunen-looppi-mini
.kuukunen-looppi-footer {
	padding: 6px;

	font-size: 10px;
}


/* =====================================================
   TEKIJÄTIEDOT
   ===================================================== */

.kuukunen-loopit-kortti-meta {
	display: flex;
	align-items: center;

	gap: 8px;

	margin-top: 10px;

	color: #66707d;

	font-size: 13px;
}

.kuukunen-loopit-kortti-avatar {
	display: flex;
}

.kuukunen-loopit-kortti-avatar img {
	width: 32px;
	height: 32px;

	border-radius: 50%;
}

.kuukunen-loopit-kortti-tekija {
	font-weight: 700;

	color: #303846;
}

.kuukunen-loopit-kortti-aika {
	margin-left: auto;
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 900px) {

	.kuukunen-loopit-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 600px) {

	.kuukunen-loopit-seina {
		margin-top: 20px;
	}

	.kuukunen-loopit-grid {
		grid-template-columns: 1fr;

		gap: 24px;
	}

	.kuukunen-looppi-mini {
		max-width: 420px;

		margin-left: auto;
		margin-right: auto;
	}

}

/* =====================================================
   LÖÖPPISEINÄ – NÄYTÄ LISÄÄ
   ===================================================== */

.kuukunen-loopit-lisaa-wrap {
	display: flex;
	justify-content: center;

	margin-top: 36px;
}

.kuukunen-loopit-lisaa {
	min-width: 150px;
	min-height: 44px;

	padding: 10px 18px;

	border: 1px solid #d6dbe1;
	border-radius: 9px;

	background: #ffffff;
	color: #303846;

	font: inherit;
	font-weight: 700;

	cursor: pointer;
}

.kuukunen-loopit-lisaa:hover {
	background: #f3f5f7;
}

.kuukunen-loopit-lisaa:disabled {
	opacity: .6;
	cursor: wait;
}

@keyframes kuukunen-looppi-ilmestyy {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.kuukunen-loopit-kortti {
	animation: kuukunen-looppi-ilmestyy 0.3s ease-out;
}

/* =====================================================
   LÖÖPIN TYKKÄYS
   ===================================================== */

.kuukunen-looppi-reaktiot {
	display: flex;
	justify-content: center;

	margin-top: 16px;
}

.kuukunen-looppi-tykkaa,
.kuukunen-looppi-tykkaykset {
	display: inline-flex;
	align-items: center;
	gap: 7px;

	min-height: 38px;

	padding: 7px 12px;

	border: 1px solid #d8dde3;
	border-radius: 20px;

	background: #ffffff;
	color: #5f6875;

	font-size: 14px;
	font-weight: 700;
}

.kuukunen-looppi-tykkaa {
	cursor: pointer;
}

.kuukunen-looppi-tykkaa:hover {
	background: #f4f6f8;
}

.kuukunen-looppi-sydan {
	font-size: 18px;
	line-height: 1;
}

.kuukunen-looppi-tykkaa.is-liked {
	color: #dc2626;

	border-color: #fecaca;

	background: #fff5f5;
}

.kuukunen-looppi-tykkaa:disabled {
	opacity: .6;
	cursor: wait;
}


.kuukunen-loopit-kortti-likes {
	display: inline-flex;
	align-items: center;
	gap: 4px;

	margin-left: auto;

	font-weight: 700;
	color: #69717d;
}

.kuukunen-loopit-kortti-likes span {
	color: #dc2626;
}

/* =====================================================
   LÖÖPPISEINÄ – UUSIMMAT / SUOSITUIMMAT
   ===================================================== */

.kuukunen-loopit-suodatus {
	display: inline-flex;
	gap: 4px;

	margin-top: 18px;
	padding: 4px;

	border-radius: 10px;

	background: #f1f3f5;
}

.kuukunen-loopit-suodatin {
	min-height: 36px;

	padding: 7px 13px;

	border: 0;
	border-radius: 7px;

	background: transparent;
	color: #66707d;

	font: inherit;
	font-size: 13px;
	font-weight: 700;

	cursor: pointer;
}

.kuukunen-loopit-suodatin:hover {
	color: #20252d;
}

.kuukunen-loopit-suodatin.is-active {
	background: #ffffff;
	color: #20252d;

	box-shadow: 0 1px 3px rgba(0,0,0,.08);
}


/* Kevyt palaute AJAX-latauksesta */

.kuukunen-loopit-grid.is-loading {
	opacity: .65;

	transition: opacity .15s ease;
}

.kuukunen-loopit-kortti-kayttaja {
	display: inline-flex;
	align-items: center;
	gap: 7px;

	color: inherit;
	text-decoration: none;
}

.kuukunen-loopit-kortti-kayttaja:hover {
	text-decoration: none;
}

.kuukunen-loopit-kortti-kayttaja:hover
.kuukunen-loopit-kortti-tekija {
	text-decoration: underline;
}

.kuukunen-loopit-kortti-kayttaja
.kuukunen-loopit-kortti-avatar img {
	display: block;
}

/* =====================================================
   YKSITTÄINEN LÖÖPPI – TEKIJÄTIEDOT
   ===================================================== */

.kuukunen-looppi-tiedot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 14px;
}

.kuukunen-looppi-tekija-linkki {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}

.kuukunen-looppi-tekija-linkki:hover {
	text-decoration: none;
}

.kuukunen-looppi-tekija-linkki:hover
.kuukunen-looppi-tekija-nimi {
	text-decoration: underline;
}

.kuukunen-looppi-tekija-avatar {
	display: inline-flex;
	align-items: center;
}

.kuukunen-looppi-tekija-avatar img {
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}

.kuukunen-looppi-julkaissut {
	opacity: 0.7;
}

/* =====================================================
   YKSITTÄINEN LÖÖPPI – JAKAMINEN
   ===================================================== */

.kuukunen-looppi-jako {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 14px;
}

.kuukunen-looppi-jaa {
	cursor: pointer;
}

.kuukunen-looppi-jaa-status {
	font-size: 0.9em;
	opacity: 0.75;
}


/* =====================================================
   BUDDYPRESS-PROFIILI – LÖÖPIT
   ===================================================== */

.kuukunen-profile-loopit {
	margin-top: 18px;
}

.kuukunen-profile-loopit-title {
	margin: 0 0 20px;
}

.kuukunen-profile-loopit-grid {
	grid-template-columns:
		repeat(3, minmax(0, 1fr));
}

.kuukunen-profile-loopit .kuukunen-loopit-kortti-aika {
	margin-left: 0;
}

@media (max-width: 900px) {

	.kuukunen-profile-loopit-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 600px) {

	.kuukunen-profile-loopit-grid {
		grid-template-columns: 1fr;
	}

}

/* =====================================================
   BUDDYPRESS-PROFIILI – LÖÖPIT
   ===================================================== */

.kuukunen-profile-loopit {
	margin-top: 18px;
}

.kuukunen-profile-loopit-title {
	margin: 0 0 20px;
}

.kuukunen-profile-loopit-grid {
	grid-template-columns:
		repeat(3, minmax(0, 1fr));
}

.kuukunen-profile-loopit .kuukunen-loopit-kortti-aika {
	margin-left: 0;
}

@media (max-width: 900px) {

	.kuukunen-profile-loopit-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 600px) {

	.kuukunen-profile-loopit-grid {
		grid-template-columns: 1fr;
	}

}


/* =====================================================
   BUDDYPRESS-PROFIILI – LÖÖPIN LUONTI
   ===================================================== */

.kuukunen-profile-loopit-create {
	margin-bottom: 26px;
}

.kuukunen-profile-loopit-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 42px;

	padding: 9px 15px;

	border: 1px solid #d7dce2;
	border-radius: 8px;

	background: #ffffff;
	color: #273142;

	font: inherit;
	font-weight: 700;

	cursor: pointer;
}

.kuukunen-profile-loopit-toggle:hover {
	background: #f4f6f8;
}

.kuukunen-profile-loopit-generator {
	margin-top: 18px;
}

.kuukunen-profile-loopit-generator[hidden] {
	display: none;
}






/* Julkaisuraja */
.kuukunen-looppi-raja {
	margin-top: 6px;
	color: #6b7280;
	font-size: 12px;
	line-height: 1.4;
}

.kuukunen-looppi-luo:disabled {
	cursor: not-allowed;
}


/* =====================================================
   LINKITETTY KUUKUNEN
   ===================================================== */

.kuukunen-looppi-kuukunen-valinta {
	margin-top: 20px;
}

.kuukunen-looppi-kuukunen-valinta label {
	margin: 0 0 7px;
}

.kuukunen-looppi-kuukunen-valinta label span {
	font-weight: 500;
	color: #667085;
}

.kuukunen-looppi-kuukunen-valinta select {
	width: 100%;
}

.kuukunen-looppi-link-fields {
	margin-top: 12px;
}

.kuukunen-looppi-link-fields input[type="url"],
.kuukunen-looppi-link-fields select {
	box-sizing: border-box;
	width: 100%;
}

.kuukunen-looppi-kenttaohje {
	margin: 7px 0 0;
	color: #667085;
	font-size: 13px;
	line-height: 1.45;
}

.kuukunen-looppi-kuukunen-cta {
	box-sizing: border-box;
	width: 100%;
	max-width: 500px;
	margin: 14px auto 4px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #d7dce3;
	border-radius: 12px;
	text-align: center;
}

.kuukunen-looppi-kuukunen-cta > a,
.kuukunen-loopit-kortti-kuukunen-linkki {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-weight: 800;
	text-decoration: none;
	color: #002f6c;
}

.kuukunen-looppi-kuukunen-cta > a:hover,
.kuukunen-loopit-kortti-kuukunen-linkki:hover {
	text-decoration: underline;
}

.kuukunen-looppi-kuukunen-huomio {
	display: block;
	margin-top: 5px;
	color: #667085;
	font-size: 12px;
}

.kuukunen-loopit-kortti-kuukunen-linkki {
	box-sizing: border-box;
	width: 100%;
	margin-top: 8px;
	padding: 9px 12px;
	background: #eaf0f7;
	border-radius: 9px;
}

/* =====================================================
   LÖÖPIN OMISTAJAN TOIMINNOT
   ===================================================== */
.kuukunen-tallennettu-looppi {
	position: relative;
}

.kuukunen-looppi-owner-menu {
	position: relative;
	z-index: 20;
	display: flex;
	justify-content: flex-end;
	width: 100%;
	max-width: 500px;
	margin: 0 auto 8px;
}

.kuukunen-looppi-owner-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 36px;
	padding: 0;
	border: 1px solid #d7dce3;
	border-radius: 9px;
	background: #fff;
	color: #273142;
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
}

.kuukunen-looppi-owner-menu-toggle:hover,
.kuukunen-looppi-owner-menu-toggle:focus-visible {
	background: #f4f6f8;
}

.kuukunen-looppi-owner-menu-panel {
	position: absolute;
	top: 42px;
	right: 0;
	min-width: 150px;
	padding: 6px;
	border: 1px solid #d7dce3;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
}

.kuukunen-looppi-owner-menu-panel[hidden] {
	display: none;
}

.kuukunen-looppi-owner-menu-panel a,
.kuukunen-looppi-owner-menu-panel button {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 9px 11px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: #273142;
	font: inherit;
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.kuukunen-looppi-owner-menu-panel a:hover,
.kuukunen-looppi-owner-menu-panel button:hover {
	background: #f4f6f8;
	text-decoration: none;
}

.kuukunen-looppi-owner-menu-panel .kuukunen-looppi-poista {
	color: #b42318;
}

.kuukunen-looppi-peruuta-muokkaus {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	margin-left: 10px;
	padding: 9px 12px;
	font-weight: 700;
	text-decoration: none;
}

@media (max-width: 600px) {

	.kuukunen-loopit-wallbar {
		margin-bottom: 24px;
		padding-top: 14px;
	}

	.kuukunen-loopit-seina {
		padding-left: 16px;
		padding-right: 16px;
	}
}