@charset "utf-8";

/* loader */
#loader-overlay {
	display:    none;
	position:   fixed;
	z-index:    10005;
	top:        0;
	left:       0;
	height:     100%;
	width:      100%;
	background: var(--loader-overlay);
}
body.loading { overflow: hidden; }
body.loading #loader-overlay { display: block; }

.loader-animate {
	border: 8px solid var(--loader-circle-white); 
	border-top: 8px solid var(--button-color);
	border-radius: 50%;
	width: 70px;
	height: 70px;
	animation: spin 1.5s linear infinite;
	position: absolute;
	left: calc(50% - 10px);
	left:-webkit-calc(50% - 10px);
	left:-moz-calc(50% - 10px);
	top: calc(50% - 10px);	
	top:-webkit-calc(50% - 10px);
	top:-moz-calc(50% - 10px);
}

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

/* Napis DEVMODE */
#devmode-warn {
	position: fixed;
	color: rgb(255, 255, 255);
	background-color: red;
	text-align: center;	
	width: 100%;	
	z-index: 5000;
	top: 0;
	left: 0;
}

#devmode-warn + #page-header {
	padding-top: 1rem;
}

/* header */
#page-header {
	display: -webkit-flex;
	display: flex;	
	-webkit-align-items: center;
	align-items: center;	
	align-content: stretch;	
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;			
	padding: 0 0.5em; 
	width: 100%; 
	min-height: 2.2rem;	
}

#page-header > #logo {
	margin-right: auto; /* ~float left */
}

#page-header > #logo > img {
	max-height: 5rem;
	max-width: 15rem;
}

/* search form */
label:not([for]) {
	font-size: .75rem;
	display: block;
}

/* język i waluta */
.country-select {	
	display: inline-block;
	background-color: var(--country-sel-bg);
}

label:first-letter {
	text-transform: uppercase;
}

#rollback-choose-offer {
	display: block;
	margin: 1rem auto 2rem;
}

#search-flex {
	margin: 1em auto;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-items: stretch;
	align-items: stretch;
	-webkit-justify-content: center;
	justify-content: center;
	text-align: left;
	margin-right: -1rem;	
}

#search-flex > div {
	width: 10.5rem;
	min-width: 10.5rem; /* orientacyjne żeby mieścił się "x" przy słownej dacie */
	flex-grow: 1;
	margin: 0 1rem 0.5rem 0;
	position: relative; /* na potrzeby "x" do czyszczenia  */
}

#search-flex > div > input,
#search-flex > div > select,
#search-flex > div > textarea,   
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
	width: 100%;
	padding: 0.56rem 0.5rem;
	border: 1px solid var(--accent-color);
	font-size: 1rem;
	cursor: pointer;
	background-color: var(--inputs-bg);
	border-radius: 3px;	
}

#currency-box {
	text-align: right;
}

#currency-box select {
	width: auto;
	font-size: initial;
	padding: 0.16rem 0.1rem;
}

textarea {
  resize: none;
}

#search-flex > div > select,   
#reservation-details select {
	/* select different size FIX */
	padding: 0.5rem 0.3rem;	
	/* IPhone fix */		
	color: var(--body-color);	
	height: 2.7rem;
}

/* tab by się rozciągał we flexie */
#search-flex .button {
	display: block;
	width: 100%;
}

/* menu klienta */
body:not(.is-mobile) #main-menu {		
	display: flex !important;
	align-items: center;
}

#main-menu > * {
	margin-left: .75rem;
}

#main-menu > a {
	text-decoration: none;
	display: block;
	padding: 0.75rem 0.65rem;
	font-size: 1em;
	color: var(--menu-url);
}

body:not(.is-mobile) .mobile-show {
	display: none !important;
}

#main-menu > a:hover {
	background-color: var(--main-menu-hover);
}

#main-menu > a.active {
	background-color: var(--accent-color);
}

.toggle-menu-mobile {
	font-size: 2rem;
	padding: 0.5rem;
	cursor: pointer;
}

body:not(.is-mobile) #main-menu {	
	width: auto;
	margin-left: auto;
}

body:not(.is-mobile) #main-menu > a {
	display: inline-block;
}

/* koniec menu */

#module-body h3 {
	text-align: center;
}

/* dotąd - szukajka i zakup, odtąd chyba wszystko razem */
#offers {
	width: 80%;	
	margin: 0 auto;
	font-size: .9rem;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-items: stretch;
	align-items: stretch;	
	-webkit-justify-content: center;
	justify-content: center;	
}

#offers > div {
	width: 50%;
}

#offer-map {
	height: 400px;	
}

#offer-list {
	padding-left: .5rem;
	text-align: center;
}

#offer-list table {
	border-bottom: 1px solid var(--accent-color);
	margin-bottom: 1rem;
	text-align: left;
	width: 100%;
}

#offer-list table th {
	text-align: justify;
}

#offer-list tbody tr {
	cursor: pointer;
}

#offer-list table tr td:nth-child(2) {
	text-align: right;
}

#price-summary-cont {
	font-weight: bold;
	text-align: right;
}

#reservation-form {
	margin: 1rem auto;
	width: 100%;
	max-width: 450px;	
}

#reservation-details > h3 {
	margin: .75rem 0 .5rem;
}

#reservation-details > div {
	margin-bottom: .5rem;
	padding: 2px; /* żeby walidacja nie zlała się z kontenerem */
}

#reservation-details .row-flex {
	display: -webkit-flex;
	display: flex;	
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;	
}

#reservation-details .row-user-question {
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;	
  align-items: center;
  justify-content: center;	
}

#reservation-details .row-user-question > div:nth-child(2) {
	margin-left: .8rem;
}

#reservation-details .row-user-question a,
#reservation-details .row-user-question label {
	text-decoration: none;
	cursor: pointer;
	font-size: .85rem;
}

#reservation-details .row-user-question label + label {
	margin-top: .5rem;
}

#reservation-details .row-flex > div:nth-child(1) {
	width: 20%;
}

#reservation-details .row-flex > div:nth-child(2) {	
	width: 70%; 
	/* do 80% - odstęp zostanie rozciągnięte kolejną definicją */
}

#reservation-details .row-flex > div + div {
	margin-left: .4rem;
	flex-grow: 1;
}

#reservation-details > .row-check {
	position: relative;
	padding-top: .35rem;
}

#reservation-details > .row-check label {
	cursor: pointer;
	font-size: .9rem;
	width: calc(100% - 2rem);
}

/* powiększenie checkboxa, ew. radio */
#reservation-details .row-check input {
	width: 1.15rem;
	height: 1.15rem;
	min-width: 1.15rem;
	margin: -0.1rem 0.7rem 0 0;
	line-height: .5rem;
} 

#reservation-details .row-pay-operator-logo {
	text-align: center;
}

#reservation-details .rowButton {
	text-align: center;
	padding-top: 1rem;
}

/****************** MEDIA QUERY *********************/
@media only screen 
	and (max-width: 1024px) 	
{
	#offers {
		width: 100%;
	}
}

@media only screen 
	and (max-width: 840px) 	
{	
	.mobile-show {
		display: block;
	}

	.mobile-hide {
		display: none;
	}	
	
	body.mobile-menu-shown {
		overflow: hidden;
	}

	body.mobile-menu-shown #loader-overlay {
		display: block;
	}

	body.mobile-menu-shown .loader-animate {
		display: none;
	}

	body.is-mobile #currency-select,
	body.is-mobile #country-select {
		top: 1rem;
	}	

	#main-menu {
		display: none;
		position: fixed;
		z-index: 10006; /* musi być wyższe niż overlay */
		top: 0 !important;
		right: 0;
		background: var(--body-bg);
		padding: 0;
		height: 100%;
		margin-top: 0;
	}

	#main-menu > * {
    margin: 0;
	}	

	#main-menu > a {
		padding: 0.75rem 0.75rem;
		font-size: 1.1rem;
	}	

	/* wiersz z x zamykającym */
	#main-menu > div:first-child {
		text-align: right;
	}
	
	#hide-menu {
		padding: 0.5rem 1rem;
		cursor: pointer;
		font-size: 1.5rem;
		display: inline-block;
	}

	#menu-mobile-bars {
		padding-left: 2rem;
		margin-left: auto;
	}	
	
	#search-flex > div, 
	#search-flex button {
		width: 100%;
	}

	/* Jquery automlete list item */
	.ui-autocomplete > .ui-menu-item > div {
		padding: 1rem .5rem;
	}

	/* żeby nie wychodziło poza padding */
	.ui-menu.ui-widget.ui-widget-content {
		/* UWAGA: 2rem to aktualne szerokości paddingów mobile */
		max-width: calc(100% - 2rem); 
	}

	#offers > div {
		width: 100%;
	}

	#offer-list {
		margin-top: 1rem;
	}
}

@media only screen 
	and (max-width: 600px) 
	and (orientation: portrait) 
{
	/* TODO: lepsze srajfony */
}

@media only screen 
	and (max-width: 440px) 
	and (orientation: portrait) 
{
	/* TODO: gorsze srajfony */
}