/*
 * Web Radio
 * Developed by Igor Mino <igor@platon.sk>
 * Copyright (c) 2023 Platon Technologies Ltd, http://platon.sk
 * All rights reserved.
 *
 * 01 - General
 * 02 - Footer
 * 03 - Player
 * 04 - Page, Canvas
 * 05 - Forms
 * 06 - Landscape
 * 07 - Portrait
 *
 */

/* -------------------------------------------
 * 01 - General
 */
@font-face {
	font-family: SimpleSans;
	src: url(../fonts/SimplySans/SimplySans-Book.ttf);
}
html,
body {
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	font-family: SimpleSans, 'Arial', sans-serif;
}

body {
	background-color: black;
	background-repeat: no-repeat;
	width: 100vw;
	height: 100vh;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

a, a:visited {
	text-decoration: none;
	color: white;
}
a:hover {
	text-decoration: underline;
}

.hide {
	display: none !important;
}

.left {
	float: left;
}

.right {
	float: right;
}

#mainframe {
	display: flex;
}

.primarybox,
.secondarybox {

}

.player,
.info,
.options,
.footer,
.page,
.container {
	background-color: rgba(100,100,100, 0.5);
	/* border: 1px red solid; */
	color: white;
}

.radio-logo {
	background-image: url(../images/radios/radio-sirava.jpg);
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: relative;
	width: 90%;
	height: 90%;
	top: 5%;
	left: 5%;
	opacity: 0.75;
}

/* -------------------------------------------
 * 02 - Footer
 */
.footer {
	color: white;
}

.webradio,
.platon {
	height: auto;
	/* max-width: 50%; */
}

.webradio {
	max-width: 60%;
}
.platon,
.mediaplus {
	max-width: 25%;
}

.webradio img,
.platon img,
.mediaplus img {
	/* max-width: 40vw; */
	/* max-height: 5vh; */
	max-width: 100%;
}

.upper {
	font-size: 12px;
	margin-bottom: 5px;
}

.flip {
	transform: rotate(180deg);
}

/* -------------------------------------------
 * 03 - Player
 */
.button-play,
.button-pause {
	position: relative;
	width: 34%;
	height: 34%;
	top: -33%;
	left: 33%;
	background-color: rgba(255,255,255,0.5);
	border-radius: calc(50%);
}
.button-play img,
.button-pause img {
	width: 80%;
	height: 80%;
	top: 10%;
	left: 10%;
	position: relative;
}

.button-reload {
	position: relative;
	width: 20%;
	height: 20%;
	top: -60%;
	left: 70%;
	background-color: rgba(255,255,255,0.5);
	border-radius: calc(50%);
}
.button-reload img {
	width: 80%;
	height: 80%;
	top: 10%;
	left: 10%;
	position: relative;
	-moz-transition: transform 1s;
	-webkit-transition: transform 1s;
	transition: transform 1s;
}

/* -------------------------------------------
 * 04 - Page, Container
 */
.options .settings img {
	cursor: pointer;
}

.page,
.container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	/* justify-content: space-between; */
	width: calc(90vw - 40px);
	height: calc(90vh - 40px);
	left: 5vw;
	top: 5vh;
	padding: 20px;
	position: absolute;
	overflow: scroll;
}

.container {
	flex-direction: column;
	justify-content: start;
	flex-wrap: nowrap;
}

#radios_list .radios-item img,
#themes_list .themes-item img {
	width: 100%;
	cursor: pointer;
}

#radios_list .radios-item .radios-label,
#themes_list .themes-item .themes-label {
	color: white;
	display: block;
	margin-bottom: 20px;
	text-align: center;
}

.page .button-back {
	background-color: white;
	border-radius: 50%;
	/* margin: 2vw; */
}
.page .button-back img {
	width: 80%;
	height: 80%;
	top: 10%;
	left: 10%;
	position: relative;
	cursor: pointer;
}

.container .button-back {
	background-color: white;
	border-radius: 50%;
	margin: 2vw;
	width: 30px;
	height: 30px;
}
.container .button-back img {
	width: 80%;
	height: 80%;
	top: 10%;
	left: 10%;
	position: relative;
	cursor: pointer;
}

.container-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
}

.container .image {
	width: 100%;
	text-align: center;
}

.image img {
	max-width: 100%;
}

.radio-switch {
	cursor: pointer;
}

/* -------------------------------------------
 * 05 - Forms
 */
form {
	margin-top: 30px;
}
input[type=text],
textarea {
	background-color: rgba(0,0,0, 0.7);
	color: white;
	border: none;
	font-size: 14px;
	display: block;
	width: calc(100% - 20px);
	padding: 15px 10px;
	outline: none;
	border: 1px black solid;
	border-radius: 5px;
	transition: background-color 200ms ease-in,
		border-color 200ms ease-in,
		color 200ms ease-in;
}
textarea {
	height: 100px;
}

input[type=text]:hover,
input[type=text]:focus,
textarea:hover,
textarea:focus {
	border: 1px white solid;
}

label {
	font-size: 14px;
	position: relative;
	top: -35px;
	left: 10px;
	cursor: text;
	transition: top 200ms ease-in,
		left 200ms ease-in,
		font-size 200ms ease-in;
}

textarea ~ label {
	top: -130px;
}

input[type=text]:focus ~ label,
input[type=text]:not(:placeholder-shown) ~ label {
	top: -70px;
	left: 0px;
	font-size: 10px;
}
textarea:focus ~ label,
textarea:not(:placeholder-shown) ~ label {
	top: -155px;
	left: 0px;
	font-size: 10px;
}

input[type=button],
input[type=submit] {
	outline: none;
	font-size: 14px;
	padding: 10px 20px;
	background-color: rgba(0,0,0, 0.8);
	color: #ccc;
	border: 1px rgba(255, 255, 255, 0.5) solid;
	cursor: pointer;
	border-radius: 5px;
	transition: background-color 200ms ease-in,
		border-color 200ms ease-in,
		color 200ms ease-in;
}

input[type=button]:hover,
input[type=submit]:hover {
	background-color: rgba(0,0,0, 0.5);
	border-color: rgba(255, 255, 255, 1);
	color: white;
}

/* -------------------------------------------
 * 06 - Landscape
 */
@media all and (orientation:landscape) {
	body {
		color: yellow; /* debug */
	}
	#mainframe {
		flex-direction: row;
	}
	.primarybox {
		padding: 4vh;
	}
	.secondarybox {
		padding: 4vh 0px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.player {
		width: 90vh;
		height: 90vh;
	}
	.actions {
		display: flex;
		flex-direction: column;
	}
	.info,
	.options,
	.footer {
		width: calc(100vw - 105vh - 10%);
		height: 27vh;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0px 5%;
	}
	.info {
		margin-bottom: 4vh;
	}
	.info .radio-switch {
		/* width: 25%; */
		width: auto;
		max-width: 25%;
	}
	.info .radio-switch img {
		max-height: 15vh;
		max-width: 100%;
	}
	.options {
		justify-content: space-between;
	}
	.options .settings {
		max-height: 20vh;
		max-width: 25%;
		justify-content: center;
	}
	.options .settings img {
		/* width: auto; */
		max-height: 20vh;
		max-width: 100%;
		/* filter: invert(1); */
	}
	#radios_list .radios-item {
		width: 15vw;
	}
	.page .button-back {
		width: 15vw;
		height: 15vw;
	}
	#themes_list .themes-item {
		width: 15vw;
	}
	#themes_list .themes-item img {
		width: 15vw;
		height: 15vw;
	}
}

/* -------------------------------------------
 * 07 - Portrait
 */
@media all and (orientation:portrait) {
	body {
		color: red; /* debug */
	}
	#mainframe {
		flex-direction: column;
	}
	.primarybox {
		padding: 4vw;
	}
	.secondarybox {
		width: 90vw;
		margin-left: 4vw;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.actions {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.player {
		width: 90vw;
		height: 90vw;
		max-height: 50vh;
	}
	.info,
	.options {
		width: 42vw;
		height: 24vh;
		margin-bottom: 4vw;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.footer {
		width: calc(90vw - 10%);
		height: 12vh;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 4vw;
		padding: 0px 5%;
	}
	.options {
		justify-content: space-around;
	}
	.info .radio-switch {
		height: 40%;
		width: 40%;
		max-height: 12vh;
		max-width: 40%;
	}
	.info .radio-switch img {
		height: 100%;
		width: 100%;
	}
	.options .settings {
		height: 40%;
		width: 40%;
		max-height: 12vh;
		max-width: 40%;
	}
	.options .settings img {
		height: 100%;
		width: 100%;
		/* filter: invert(1); */
	}
	#radios_list .radios-item {
		width: 25vw;
	}
	.page .button-back {
		width: 25vw;
		height: 25vw;
	}
	#themes_list .themes-item {
		width: 21vw;
	}
	#themes_list .themes-item img {
		width: 21vw;
		height: 21vw;
	}
}