@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap');

* {
	-webkit-box-sizing: border-box; /* iOS <= 4 i Android <= 2.3 */
	-moz-box-sizing: border-box; /* Firefox */
	box-sizing: border-box; /* Chrome, Opera, Safari 5+ i IE 8+ */	
	font-family: 'Open Sans', sans-serif, Verdana, Helvetica, Arial, tahoma;	
}

:root {
	/* common */
	--accent-color: #b5b5b5;
	--main-menu-hover: #ebe8e8;
	--button-color: #ca1f26;
	--button-green-color: #ca1f26;/*tymczasowo dla pierwszego klienta*/
	--button-txt-color: #ffffff;
	--button-shadow-color: rgba(81, 81, 86, 1);
	--inputs-bg: #ffffff;
	--placeholder-color: #bababa;
	--body-color: rgb(0, 0, 0);
	--body-bg: rgb(242, 242, 242);
	--err-txt-color: red;
	--invalid-bg: #ffffff;
	--invalid-border: #CF2147;
	--loader-circle-white: #ffffff;
	--loader-overlay: rgba(0, 0, 0, .70);
	--icon-orange: #fcb00d;
	/* final.php - payment confirmation */
	--final-body-bg: #444;
	--final-mainbox-bg: #FFFFFF;	
	--final-main: #222;
	--final-positive-icon: #18be25;
	--final-pending-icon: #2d79c0bd;
	--final-negative-icon: #f23615;
	/* .country-select (lang & currency) select */
	--country-sel-bg: none;
	--country-sel-chevron-inactive: #222;	
	--country-sel-hover-bg: #000;
	--country-sel-hover-txt: #FFF;
	--country-sel-open-bg: #222222;
	--country-sel-open-txt: #C5C0B0;
	--country-sel-open-shadow: rgba(0,0,0,.5);
	--country-sel-option-hover-bg: rgba(255,255,255,.2);
	--country-sel-option-hover-txt: #fff;	
	/* swal2 */
	--swal-btn-confirm: rgb(48, 133, 214);
	--swal-btn-cancel: rgb(221, 51, 51);	
}

body, html {
	padding: 0;
	margin: 0;	
}

html {
	/* wyjściowy rozmiar z której skorzysta jednostka rem */
	font-size: 16px;
}

body {  
	padding: 1rem;
	font-size: 1rem; 
	background: var(--body-bg);
}

/* JQuery UI, dodatkowe */
.ui-autocomplete-loading { 
	background: url('/_img/ajax-loader.gif') no-repeat right center 
}

.errText {
	color: var(--err-txt-color);
	font-size: .75rem;
}

/* nie nakładać bezpośrednio na button, ponieważ wpływa na mapkę google */
.button {
	font-size: 1rem;
	color: var(--button-txt-color);
	padding: 0.65rem 2rem !important;
	cursor: pointer;
	background-color: var(--button-color) !important;
	border: 0;
	-moz-transition: all 0.40s ease-in-out;
	-webkit-transition: all 0.40s ease-in-out;
	-o-transition: all 0.40s ease-in-out;
	-ms-transition: all 0.40s ease-in-out;
	transition: all 0.40s ease-in-out;
	border-radius: 3px;
	-webkit-box-shadow: 1px 1px 5px -1px var(--button-shadow-color);
	-moz-box-shadow: 1px 1px 5px -1px var(--button-shadow-color);
	box-shadow: 1px 1px 5px -1px var(--button-shadow-color);
	white-space: nowrap;	
	text-decoration: none;
}

.button.green {
	background-color: var(--button-green-color) !important;
}

/* "x" na inputach do czyszczenia, input wymaga klasy allow-clear, div zewnętrzny position: relative */
input + .clear {
	display: none;
}

input.allow-clear {
	padding-right: 1.5rem !important;
}

input.allow-clear + .clear {
	cursor: pointer;
	display: block !important;
	position: absolute;
	right: 5px;
	top: 1.15rem;
	font-size: 1.8rem;
}
/* koniec "x" */

input[type="checkbox"], input[type="radio"], label[for] {
	cursor: pointer;
}

input[disabled], 
input[disabled] + label[for] {
	cursor: not-allowed;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: var(--placeholder-color);
	opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: var(--placeholder-color);
}

::-ms-input-placeholder { /* Microsoft Edge */
	color: var(--placeholder-color);
}

.invalid {
	background-color: var(--invalid-bg) !important;
	border: 1px solid var(--invalid-border) !important;
}

.hide {
	display: none !important;
}

.msg {
	border: 1px solid var(--accent-color);
	padding: 1rem;
	margin-bottom: 1rem;
	border-radius: 4px;
	text-align: center;
}

.msg.error {
	color: var(--err-txt-color);
	border-color: var(--invalid-border);
	background-color: var(--invalid-bg) !important;
}

.info-with-icon {
	display: flex;
	justify-content: center;
	align-items: center;	
	margin-bottom: 1rem;
}

.info-with-icon i {
	padding-right: .5rem;
	color: var(--icon-orange);
	font-size: 3rem;
}

/************ nadpisanie styli wtyczek *****************/
.swal2-styled.swal2-confirm {
	background-color: var(--swal-btn-confirm);
}

.swal2-styled.swal2-cancel {
	background-color: var(--swal-btn-cancel);
}

.swal2-popup .swal2-styled:focus {
	box-shadow: 1px 1px 5px -1px var(--button-shadow-color);
}