@import url('./icons.css');

font-face {
	font-weight: normal;
	font-tyle: normal;
}

:root {
	overscroll-behavior-y: none;
}

* {
	font-family: sans-serif;
	box-sizing: border-box;
	border-collapse: collapse;
}


body {
	margin: 0;
	background-color: #333;
}

a {
	color: inherit;
}

.invisible {
	visibility: hidden !important;
}

.hidden {
	display: none !important;
}

.flipped {
	transform-origin: center center;
	transform: rotate(180deg);
}

.flex-row {
	display: flex;
	flex-direction: row;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.center {
	margin: auto;
}

.spinner {
	margin: calc(50vh - 60px) auto;
	border: 5px solid rgba(255, 255, 255, .4);
	border-top: 5px solid white;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
}

.spinning {
	animation: spin 2s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.container {
	margin: 0 auto;
	max-width: 1000px;
}

.header-container {
	position: sticky;
	top: 0;
	z-index: 10;

	header {
		display: flex;
		flex-direction: row;
		justify-content: center;
		color: white;
		background-color: #33691E;
		border-bottom: 1px solid rgba(255, 255, 255, .3);

		.container {
			max-width: 1000px;
			width: 80vw;
			margin: 0;
		}

		h3 {
			margin-right: 1.5em;
		}

		.icon-reload {
			float: right;
		}

		.icon-back,
		.icon-reload,
		.icon-share,
		.icon-dots {
			cursor: pointer;
			width: 32px;
			height: 32px;
			margin: 12px;
			user-select: none;
		}

		.mode-changers {
			margin-top: auto;
			margin-left: auto;
			height: max-content;

			a {
				border-bottom: 3px solid transparent;
				align-items: center;
				display: flex;
				padding: 0 1em;
				cursor: pointer;
				text-decoration: none;
				width: max-content;
		
			 	span {
					font-weight: bold;
					margin: 1em .4em;
				}
			}

			a.active {
				border-bottom: 3px solid white;
			}
		}
	}

}

footer {
	color: #ddd;
	padding: 2em;
	width: max-content;

	a {
		text-decoration: none;
	}

	a:after {
		margin: 0 8px;
		content: "•";
	}

	:last-child:after {
		content: none;
	}
}

.card {
	overflow-x: auto;

	table {
		border-bottom: 1px solid rgba(0, 0, 0, 0.3);
		width: 100%;
		background-color: white;
		min-width: 390px;
		max-width: 1000px;
	}

	table a {
		padding: 5px 3px;
		text-decoration: none;
	}
	
	thead {
		.center {
			padding: 5px 3px;
		}

		tr:not(:last-child) {
			background-color: #eee;
		}
	}

	tbody {
		tr {
			cursor: pointer;
			border-top: 1px solid #ccc;
		}

		tr:hover {
			background-color: #ddd;
		}

		tr:hover td {
			background-color: transparent;
		}
	}

	td, th {
		text-align: center;
		overflow: hidden;
	}

	th {
		padding: 10px 5px;
	}

	th.station {
		width: 60%;
	}

	.train-details {
		flex-wrap: wrap;
		padding: 0 !important;
	
		div {
			margin: .4em 2em;
		}
	}

	.cancelled {
		text-decoration-line: line-through;
	}
	
	.cancelled-text {
		font-weight: bold;
		color: red !important;
	}
}

.settingsView {
	.flex-row,
	.flex-column {
		padding: 1em;
		border-bottom: 1px solid rgba(0, 0, 0, .4);
	}

	.flex-row {
		align-items: center;
	}

	.flex-row:last-child {
		padding: .5em;
		border-bottom: unset;
	    justify-content: right;
	}

	label {
		padding: .1em;
	}

	span {
		padding-bottom: .25em;
	}

	select {
		width: 65%;
	}

	select,
	.flex-row div {
		margin-left: auto;
	}
}

.searchView {
	.title {
		padding-top: 3em;

		h1 {
			color: white;
			font-weight: normal;
			margin: .7em .3em .5em .3em;
		}

		h1:hover {
			-webkit-text-fill-color: transparent;
			-webkit-background-clip: text !important;
			background: linear-gradient(90deg, #b4dcff 20%, pink 20%, pink 40%, white 40%, white 60%, pink 60%, pink 80%, #b4dcff 80%, #b4dcff 100%);
		}
	}

	.title::before {
		content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><rect rx="4" height="28" width="28" fill="green"/><path d="M14 5.5c-4 0-8 .5-8 4V19c0 1.93 1.57 3.5 3.5 3.5L8 24v.5h2.23l2-2H16l2 2h2V24l-1.5-1.5c1.93 0 3.5-1.57 3.5-3.5V9.5c0-3.5-3.58-4-8-4m-4.5 15c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5m3.5-7H8v-4h5zm2 0v-4h5v4zm3.5 7c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5" fill="white"/></svg>');
		width: 50px;
		height: 50px;
		margin: -0.7em .3em -0.5em -0.3em;
	}

	form {
		color: white;

		#time, #date, #datetime {
			flex-grow: 1;
		}

		#from, #to, #via {
			width: 100%;
		}

		.button.icon-arrow1,
		.button.icon-arrow2,
		.button.icon-swap {
			padding: .3em .5em;
		}

		.button.now {
			display: flex;
			justify-content: center;
			align-items: center;
			user-select: none;
			padding: 0 10px;
		}

		button[type="submit"],
		.button.icon-settings {
			height: 32px;
		}

		.filler {
			flex: auto;
		}

		.button.icon-settings {
			width: 32px;
			padding: 3px;
		}
		
		button[type="submit"]{
			display: flex;
			align-items: center;
			font-size: 20px;
			padding: 8px;
		}

		button[type="submit"]::after {
			width: 24px;
			height: 24px;
			margin-left: 5px;
			content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 4.5 20.29l.71.71L12 18l6.79 3 .71-.71z" fill="green"/></svg>');
		}
	}

	.suggestions {
		position: relative;
		overflow: visible;
		z-index: 100;
		height: 0;
		margin-left: 4px;
		margin-right: 3.23rem;

		p {
			font-size: 1.2em;
			background-color: white;
			color: black;
			margin: 0;
			border-top: 1px solid rgba(0, 0, 0, .2);
			padding: .3em .6em;
			cursor: pointer;
		}

		p:first-child {
			margin-top: -4px;
		}

		p:hover {
			background-color: #d3d3d3;
		}

		#fromSelected,
		#viaSelected,
		#toSelected {
			background-color: #bfbfbf !important;
		}
	}

	.history {
		padding: 0 4px;
		overflow: hidden;
		user-select: none;

		.flex-row {
			justify-content: space-between;
			cursor: pointer;
			padding: .3em .6em .3em .3em;
			margin: 0;
			background-color: white;
			color: black;
			font-size: 1.2em;
			border-bottom: 1px solid rgba(0, 0, 0, .2);
		}

		.flex-row:last-child {
			border-bottom: unset;
		}

		.via {
			font-size: smaller;	
			font-weight: 200;
		}

		.from,
		.to {
			width: 40%;
		}

		.to {
			text-align: right;
		}

		small::after {
			content: "\a";
			white-space: pre;
		}

		.icon-arrow1 {
			width: 25px;
		}
	}
}

.journeyView {
	tbody:not(:last-child) {
		border-bottom: 1px solid rgba(0, 0, 0, .2);
	}

	thead>tr:nth-child(2) {
		border-bottom: 2px solid #ccc;
	}

	p {
		color: white;
		width: 100%;
	}

	p::before {
		filter: drop-shadow( 0 0 5px rgba(0, 0, 0, .6) );
		margin-right: 4px;
		vertical-align: sub;
	}

	p.change,
	p.walk,
	p.transfer {
		text-shadow: 0 0 15px rgba(0, 0, 0, .6);
		text-align: center;
	}

	p.change::before {
		content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M9 3 5 6.99h3V14h2V6.99h3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99z" fill="white"/></svg>');
	}

	p.walk::before {
		content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2M9.8 8.9 7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 12 16.8 13 19 13v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1L6 8.3V13h2V9.6z" fill="white"/></svg>');
	}

	p.transfer::before {
		content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24"><path d="m21.71 11.29-9-9a.996.996 0 0 0-1.41 0l-9 9a.996.996 0 0 0 0 1.41l9 9c.39.39 1.02.39 1.41 0l9-9a.996.996 0 0 0 0-1.41M14 14.5V12h-4v3H8v-4c0-.55.45-1 1-1h5V7.5l3.5 3.5z" fill="white"/></svg>');
	}

	.link {
		vertical-align: bottom;
		cursor: pointer;
		max-inline-size: 26px;
		margin: 0 .3em;
	}
}

.departuresView {
	tbody td:nth-child(2) {
		text-align: unset;
	}

	tbody td {
		padding: 5px 3px;
	}
}

.remarksView {
	.flex-row {
		align-items: center;
		flex-wrap: nowrap;
		padding: .5em;
		border-bottom: 1px solid rgba(0, 0, 0, .4);
	}

	.flex-row:last-child {
		border-bottom: unset;
	}

	span[class^="icon-"] {
		align-self: start;
		padding-right: .3em;
	}
}


#overlay {
	z-index: 100;
	backdrop-filter: blur(10px);

	.modal {
		z-index: 1050;
		margin: auto;
		background-color: white;
		width: max-content;
		padding: 15px;
		-webkit-overflow-scrolling: touch;
	}

	.modal.alert button {
		float: right;
	}

	.modal.select {
		a {
			width: 100%;
			margin: 5px 0;
			text-align: center;
		}

		a:first-child {
			margin-top: unset;
		}

		a:last-child {
			margin-bottom: unset;
		}
	}

	.modal.dialog {
		padding: unset;

		.body {
			max-height: 70vh;
			overflow: scroll;
		}

		.header {
			justify-content: space-between;
			background-color: #33691E;
			color: white;
			padding: 15px;

			h4 {
				margin: 0;
	 		}

			.icon-close {
				margin: -15px;
				padding: 10px;
				border-left: 1px solid rgba(0, 0, 0, .4);
				cursor: pointer;
			}

			.icon-close:hover {
				background: rgba(0, 0, 0, .4);
			}
		}
	}
}

input,
button,
.button,
.selector {
	margin: 4px;
}

input[type="datetime-local"],
input[type="date"],
input[type="time"],
input[type="text"] {
	cursor: pointer;
	box-sizing: border-box;
	padding: .3em .5em;
	font-size: 1.5em;
	padding: 7px;
	border: none;
	outline: none;
	background-color: white;
	color: black;
	border-radius: 0;
}

input[type="checkbox"] {
	transform: scale(1.5);
}

button,
.button,
.selector label {
	background-color: white;
	color: black;
	cursor: pointer;
	user-select: none;
}

button, .button {
	width: max-content;
	padding: 8px 20px;
	transition: background-color 300ms;
	border: none;
}

button:hover, .button:hover {
	background-color: #d3d3d3;
}

button.color, .button.color {
	background-color: #43a047;
	color: white;
}

button.color:hover, .button.color:hover {
	background-color: #388e3c;
}

.arrowButton {
	cursor: pointer;
	user-select: none;
	height: 72px;
	width: 72px;
	margin: 0 auto;
	transition: transform 150ms;
	filter: invert();
}

.selector {
	display: flex;

	input {
		display: none;
	}

	input + label {
		background: #d3d3d3;
	}

	input:checked + label {
		background: white
	}

	label {
		display: flex;
		justify-content: center;
		align-items: center;
		user-select: none;
		padding: 0 10px;
	}

	label:after {
		font-size: .9rem;
		color: black;
		text-align: center;
		line-height: .9rem;
		margin-top: 2px;
	}

	div:not(:last-child),
	label:not(:last-child) {
		border-right: 1px solid #bbb;
	}

	.icon-ice,
	.icon-ic,
	.icon-icice,
	.icon-dzug,
	.icon-regional {
		font-style: italic;
	}

	.icon-tram:after,
	.con-bus:after,
	.icon-ferry:after,
	.icon-taxi:after {
		font-size: 0.6rem;
	}

	.icon-ice:after      { content: 'ICE'; }
	.icon-ic:after       { content: 'IC'; }
	.icon-icice:after    { content: 'IC ICE'; }
	.icon-dzug:after     { content: 'D'; }
	.icon-regional:after { content: 'NV'; }
	.icon-suburban:after { content: 'S'; }
	.icon-subway:after   { content: 'U'; }
	.icon-tram:after     { content: 'Tram'; }
	.icon-bus:after      { content: 'Bus'; }
	.icon-ferry:after    { content: 'Ferry'; }
	.icon-taxi:after     { content: 'Taxi'; }
}

.selector.rectangular label {
	height: 32px;
	width: 32px;
	padding: 3px;
	font-weight: bold;
	overflow: hidden;
}

@media (max-width: 650px) {
	.filler {
		flex: unset !important;
	}

	button[type="submit"]{
		flex-basis: 100%;
		justify-content: center;
	}

	header {
		padding-top: 10px;

		.mode-changers {
			margin: auto;
		}

		h3 {
			margin: 8px 0;
		}
	}

	#overlay {
		.modal.dialog {
			width: 100vw;
			height: 100vh;
		}
	}

}

@media (max-width: 799px) {
	header {
		.icon-back {
			left: 10px;
		}
	}

	.searchView {
		padding: 10px;
	}

	.flex-row {
		flex-wrap: wrap;
	}

	.flex-row.nowrap {
		flex-wrap: unset;
	}

	.journeysView {
		.arrowButton {
			margin: 15px auto;
		}
	}

	.arrowButton {
		width: 48px;
		height: 48px;
	}
}

@media (min-width: 800px) {
	.searchView {
		form,
		.history {
			width: 80vw;
			max-width: 700px;
			color: white;
		}

		#date {
			width: 50%;
		}

		#time {
			width: 30%;
		}
	}
	
	.journeysView {
		.arrowButton.flipped {
			margin-top: 45px;
		}

		table {
			margin: 15px auto;
		}
	}

	table {
		overflow: hidden;
		border: none;
		margin: 50px auto;
		width: 80vw;
	}

	#overlay {
		.modal.dialog {
			width: 600px;
		}
	}
}