/****************************************************************
Fugleside
****************************************************************/
#birdmedia {
    overflow: hidden; 
	background-color: #fff;
	max-width: 780px;
	margin-bottom: 13px;
	margin-right: 13px;
	float: left;
}
.mediaoption {
	font-size: 13px;
    float: left;
}
 #waveform {
    cursor: pointer;
    margin-top: 6px;
    width: 69%;
    float: left;
    position: relative;
    /* Samme højde som WaveSurfer (height: 32) allerede FØR lyden er hentet -
       ellers er #waveform 0px høj (alt indhold er absolut placeret), og
       #time/#duration (bottom: 11px) havner over afspilleren, hvor
       .mp3player's overflow:hidden skjuler dem. */
    min-height: 32px;
    }
#playbutton {
        width: 37px;
    height: 37px;
    background-repeat: no-repeat;
       background-position-x: 13px;
    background-position-y: 11px;
    background-color: #cd2436;
    background-image: url(../images/mp3play14px.png);
    float: left;
    border-radius: 50%;
    margin: 6px 35px 5px 9px;
}
.mp3player {
padding-left: 0px;
    margin-top: 7px;
    float: left;
    overflow: hidden;
    width: 100%;
}
.mp3time {
	    position: absolute;
    color: #000;
    font-size: 11px;
    z-index: 3;
    height: 12px;
	background-color: #fff;
}
#time {
       left: -26px;
    bottom: 11px;
}

#duration {
       right: -26px;
    bottom: 11px;
}
.mp3player {
	position: relative;
}
	/* Pladsholder indtil WaveSurfer har tegnet den rigtige waveform (skjules
	   af hideLoadingUI() i app/tasks/fugle.php). Samme højde (32px) og farve
	   som WaveSurfer; SVG'en strækkes i bredden, midterlinjen forbliver 1px. */
	#fakewave {
		width: 100%;
    height: 32px;
    background: url(../images/fakewave.svg) center / 100% 100% no-repeat;
    position: absolute;
    top: 0;
	}
	/* Lydens rigtige waveform (birds_fugl_medieblok() i app/tasks/fugle.php) -
	   dækker den generelle fakewave.svg, når den findes. */
	#fakewave .lydwave {
		display: none;
		position: absolute;
		inset: 0;
		background-color: #fff;
	}
	#fakewave .lydwave.active {
		display: block;
	}
	#fakewave .lydwave svg {
		display: block;
		width: 100%;
		height: 32px;
	}
	#fakewavestart {
		    background-color: #333;
    width: 1px;
    height: 22px;
    position: absolute;
    top: 5px;
	}
	#fakewavezero {
	  position: absolute;
    color: #000;
    font-size: 11px;
    z-index: 2;
    height: 12px;
    left: -26px;
    width: 20px;
    top: 9px;
	}
#loading-container {
    display: none;
    margin-bottom: 10px;
    position: absolute;
    height: 40px;
    text-align: center;
    background-color: #fff;
    padding: 10px;
    border-radius: 12%;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    left: 102px;
    z-index: 3;
    border: 1px solid #000;
}
.spinner {
        width: 20px;
    height: 20px;
    border: 3px solid #ebe7e7;
    border-top: 3px solid #000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.allsounds {
margin-bottom: 11px;
    margin-left: 77px;
    margin-top: 8px;
    /* Flex i stedet for floats: med floats kunne del-ikonet ende under hjertet i højre
       side (float-trappe), når rækken brød om. Nu starter en ny række altid til venstre. */
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.mp3type {
        padding: 6px;
    float: left;
    font-size: 13px;
	font-family: monospace;
    background-color: #dbe3d7;
    cursor: pointer;
    display: block;
    margin-right: 6px;
    margin-bottom: 6px;
    border-bottom: 2px solid #fff;
    border-top: 2px solid #fff;
	border-radius: 4px;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}
.mp3active {
	    border-top: 2px solid #cd2436;
    border-bottom: 2px solid #cd2436;
}
.mp3podcast {
    background-color: #f1ebb5;
    background-image: url(../images/headset.png);
    background-repeat: no-repeat;
    background-position-x: 5px;
    background-position-y: 5px;
    padding-left: 26px;
}
/* Lyd-resumé: højtalerikon (inline svg) */
.mp3resume {
    padding-left: 23px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='20' viewBox='0 0 14 20'%3E%3Cpath d='M1 7.5h2.5L7.5 4v12l-4-3.5H1z' fill='%23333' stroke='%23333' stroke-width='1' stroke-linejoin='round'/%3E%3Cpath d='M9.5 7.5a3.5 3.5 0 0 1 0 5M11 5a7.5 7.5 0 0 1 0 10' fill='none' stroke='%23333' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 5px 3px #dbe3d7;
}
.mp3shop {
    position: relative;
	text-transform: capitalize;
}
/* Julelook på "Varer"-knappen 1/11-15/12 - klassen .jul sættes på <html> af et
   inline-script i templates/partials/topnav.html (siderne er statisk cachet, så datoen
   skal afgøres i browseren). */
.jul .mp3shop {
    background: url(../images/tree3.png) no-repeat #c92b2b 3px 1px;
    color: #fff;
    padding-left: 27px;
}
.mp3shopcount {
     position: absolute;
    color: #fff;
    border-radius: 2px;
    font-size: 11px;
    top: 5px;
    right: -10px;
    text-align: center;
    width: 9px;
    height: 13px;
    background-color: #5e7a1d;
    padding: 2px;
    font-style: normal;
}
.jul .mp3shopcount {
    position: static;
    background: none;
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
    color: inherit;
}
.jul .mp3shopcount::before { content: " ("; }
.jul .mp3shopcount::after { content: ")"; }
.croppedimage {
	width: 100%;
    height: 190px;
    overflow: hidden;
    position: relative;
	cursor: pointer;
}
.croppedimage img {
    width: 100%;
	height: auto;
}
#imageoptions {
	position: absolute;
    height: 100%;
    width: 40px;
    z-index: 2;
    opacity: .7;
	left: 0px;
}
#imagezoom {
background: url(../images/slideshow3.png) -2px 2px no-repeat #fff;
    left: 2px;
    top: 2px;
    z-index: 2;
    position: absolute;
    width: 55px;
    height: 45px;
    opacity: .8;
}
#imagecount {
    position: absolute;
    color: #000;
    font-size: 17px;
    top: 14px;
    left: 17px;
    text-align: center;
    width: 26px;
    height: 15px;
    z-index: 2;
    text-shadow: 1px 1px #c9bebe;
}
		
#otherbirds {
	float: none !important;
    margin-bottom: 16px;
    overflow: hidden;
    width: 100% !important;
	margin-top: 12px;
}
.otherbirds-headline {
	margin-bottom: 20px;
	overflow: hidden;
}	
.otherbirds span {
	float: left;
}


/*******************************
SHOP - slide in
*******************************/

.shopslider {
    position: fixed;
    height: 100%;
	width: 440px;
    color: #000;
    background: #fff;
    display: none;
    overflow-y: auto;
    top: 0px;
    z-index: 4;
    padding-left: 0px;
    box-shadow: 4px 11px 12px 0px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 4px 11px 12px 0px rgba(0, 0, 0, 0.5);
	transition: left 0.5s ease-in-out; /* Glideeffekt */
}
.shopslideIn {
    left: 0 !important;
}

.shopslideOut {
    left: -440px !important;
}
.shopsliderheader {
	background-color: #2e3e0a;
    color: #fff;
    font-size: 23px;
    padding: 9px 0px 9px 9px;
}
.shopsliderintro {
    padding: 9px 0px 10px 8px;
    color: #777;
}
	#closeshop {	
	width: 20px;
    height: 20px;
    display: block;
    float: right;
    margin-right: 12px;
    background: url(../images/close-white-20px.png) no-repeat;
    margin-top: 3px;
    cursor: pointer;
	}

.heartspan {
	float: left;
	display: block;
	margin-bottom: 3px;
	border-bottom: 1px solid #fff;
	border-top: 1px solid #fff;
	padding: 6px 0px 0px 6px;
}
.heartbirdpage {
	width: 18px;
	height: 24px;
	position: static;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position-x: 2px;
	background-position-y: 2px;
	background-color: #fff;
}

/* Ikonrækken 👍 👎 ♡ del - én samlet flex-enhed i .allsounds, så den brydes om samlet. */
.ikongruppe {
	display: inline-flex;
	align-items: flex-start;
	flex-wrap: nowrap;
}
.reaktion {
	display: inline-flex;
	gap: 4px;
	margin-left: 6px;
}
.reaktion-knap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-top: 3px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: #8a8a8a;
	cursor: pointer;
}
.reaktion-knap svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.reaktion-ned svg {
	transform: scale(-1, -1); /* samme tommel, vendt på hovedet */
}
.reaktion-knap:hover {
	background: #eef2ea;
	color: #444;
}
.reaktion-knap:focus-visible {
	outline: 2px solid #355e0a;
	outline-offset: 1px;
}
.reaktion-op.valgt {
	color: #3f7504;
}
.reaktion-op.valgt svg {
	fill: #cfe5b4;
}
.reaktion-ned.valgt {
	color: #b3202f;
}
.reaktion-ned.valgt svg {
	fill: #f6d2d6;
}

/* Boksen under ikonerne: "Tak" ved 👍, spørgsmål + kommentar ved 👎. */
#reaktionsboks {
	margin: 0 0 14px 77px;
	padding: 10px 12px;
	background: #f6f9f2;
	border: 1px solid #d6e6c3;
	border-radius: 6px;
	font-size: 14px;
}
#reaktionsboks[hidden], #reaktionsboks [hidden] {
	display: none;
}
.reaktion-tak {
	margin: 0;
	color: #355e0a;
	font-weight: bold;
}
.reaktion-spoergsmaal {
	display: block;
	margin-bottom: 8px;
}
.reaktion-valg {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}
.reaktion-valg label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 9px;
	background: #fff;
	border: 1px solid #c9d9b7;
	border-radius: 14px;
	cursor: pointer;
	font-size: 13px;
}
.reaktion-valg label:has(input:checked) {
	background: #e3f0d4;
	border-color: #72a836;
}
.reaktion-valg input {
	margin: 0;
}
#reaktionsboks textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 8px;
	padding: 6px 8px;
	border: 1px solid #c9d9b7;
	border-radius: 4px;
	font: inherit;
	resize: vertical;
}
.reaktion-krukke {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.reaktion-send {
	padding: 6px 16px;
	background: #72a836;
	color: #fff;
	border: 0;
	border-radius: 4px;
	font-size: 14px;
	cursor: pointer;
}
.reaktion-send:hover {
	background: #3f7504;
}
.reaktion-send:disabled {
	opacity: .6;
	cursor: wait;
}

@media(max-width: 1250px) {
	
	#birdmedia {
		width: 650px;
	}
}

@media (max-width: 1025px) {
	#birdmedia {
		width: 600px;
	}
}
@media(max-width: 950px) {
	#birdmedia {
		width: 100%;
		max-width: none;
	}
}


@media (max-width: 760px) {
	.shopslider {
		width: 330px;
	}
	.shopslideOut {
		left: -330px !important;
	}
	.shopslider .prod-outer {
		width: 46% !important;
	}
	.shopslider .prod-outer .prodpic {
        height: 138px  !important;
    }
	.croppedimage {
		height: 150px;
	}
}

@media(max-width: 550px) {
	.croppedimage {
		height: 110px;
	}
	.allsounds {
		margin-left: 4px;
	}
	.mp3type {
		margin-right: 3px;
	}
	#reaktionsboks {
		margin-left: 4px;
	}
}

@media(max-width: 440px) { 
	.shopslider {
		width: 300px;
	}
	.shopslideOut {
		left: -300px !important;
	}
	.shopslider .prod-outer .prodpic {
        height: 121px  !important;
    }
}