/* Ogólne style */
/* Ciemny motyw */
body {
    font-family: Arial, sans-serif;
    background-color: #2c2c2c;
    color: #f0f0f0;
    margin: 0;
    padding: 0;
}

body::before {
  content: "";
  position: fixed;        /* lub absolute */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("icons/tlo.png") no-repeat center center;
  background-size: cover; /* rozmiaru okna */
  opacity: 0.2;           
  z-index: -1;            
}

header {
    background-color: #3a3a3a;
    padding: 20px;
    text-align: center;
    border-bottom: 2px solid #444;
}
header h1 {
    margin: 0;
    font-size: 2.2em;
	letter-spacing:1px;
}

	@media (max-width: 1050px) {
		header h1 {
		margin: 0;
		font-size: 1.7em;
		}
	}

header a {
    margin: 0;
	text-decoration:none;
	font-size: 1em;
	color:#e2a200;
}

header a:hover {    
	text-decoration:none;
}

header p {
    margin: 0;
    color: #fff;
    font-size: 1.5em;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Dodanie odstępu między elementami */
	line-height:1.3em;
}
@media (max-width: 1050px) {
		header p {
		margin: 0;
		font-size: 1.3em;
		}	
	}
header p span.uber {
    color: #000;
    background-color: #fff;
    padding: 3px 5px;
    border-radius: 5px;
	font-size:0.8em;
}

header p span.bolt {
    color: #fff;
    background-color: #34d186;
    padding: 3px 5px;
    border-radius: 5px;
	font-size:0.8em;
}

header p span.freenow {
    color: #fff;
    background-color: #e61a37;
    padding: 3px 5px;
    border-radius: 5px;
	font-size:0.8em;
}

/* Styl flagi */
.flag-icon {
    width: 34px; /* Zmniejszona flaga, by lepiej pasowała do tekstu */
    height: auto;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 3px; /* Zaokrąglone krawędzie dla lepszego wyglądu */
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); /* Lekki cień, aby flaga wyglądała estetyczniej */
}

section {
    background-color: #383838;
    padding: 5px;
    border-radius: 0px;
    box-shadow: none;
}
/* Jasny motyw */
body.light {
    background-color: #2c2c2c;
    color: #f0f0f0;
}

header.light {
    background-color: #3a3a3a;
}

header.light h1 {
    margin: 0;
    font-size: 2.2em;
	letter-spacing:1px;
}

@media (max-width: 1050px) {
		header.light h1 {
		margin: 0;
		font-size: 1.7em;
		}
	}

header.light a {
    margin: 0;
	text-decoration:none;
	font-size: 1em;
}

header.light a:hover {    
	text-decoration:none;
}

section.light {
    background-color: #eaeaea;
    color: #333333;
}
header.light p {
    margin: 0;
    color: #fff;
    font-size: 1.5em;
	justify-content: center;
    align-items: center;
    gap: 8px; /* Dodanie odstępu między elementami */
	line-height:1.3em;
}
@media (max-width: 1050px) {
		header.light p {
		margin: 0;
		font-size: 1.3em;
		}	
	}
/* koniec jasny motyw */

header p span.uber {
    color: #000;
    background-color: #fff;
    padding: 3px 5px;
    border-radius: 5px;
	font-size:0.8em;
}

header p span.bolt {
    color: #fff;
    background-color: #34d186;
    padding: 3px 5px;
    border-radius: 5px;
	font-size:0.8em;
}

header p span.freenow {
    color: #fff;
    background-color: #e61a37;
    padding: 3px 5px;
    border-radius: 5px;
	font-size:0.8em;
}

main {
    padding: 0px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    color: #f0f0f0;
    font-size: 1.5em;
    margin-bottom: 20px;
}
section.light h2 {
    color: #000;
    font-size: 1.5em;
    margin-bottom: 20px;
}

label {
    color: #cccccc;
    font-size: 1.2em;
}
section.light label {
    color: #000;
    font-size: 1.2em;
}

/* Poprawka: inputy uwzględniają padding i margines w szerokości */
input[type="text"],
button {
    width: 100%;
    box-sizing: border-box;
    font-size: 1.2em;
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    border: none;
    background-color: #555;
    color: #fff; /*    color: #f0f0f0; */
	
}

section.light input[type="text"] {
    background-color: #fff;
    color: #000;
	border:1px solid #c3c3c3;
}

input[type="text"]:focus {
    outline: none;
    background-color: #666;
}

section.light input[type="text"]:focus {
    outline: none;
    background-color: #f2f2f2;
}

input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    font-size: 1.2em;
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    border: none;
    background-color: #555;
    color: #fff; /* color: #f0f0f0; */
}
section.light input[type="password"] {
    background-color: #fff;
    color: #000;
	border:1px solid #c3c3c3;
}

input[type="password"]:focus {
    outline: none;
    background-color: #666;
}

section.light input[type="password"]:focus {
    outline: none;
    background-color: #f2f2f2;
}

section.light input[type="tel"] {
    background-color: #fff;
    color: #000;
	border:1px solid #c3c3c3;
}

section.light input[type="tel"]:focus {
    background-color: #f2f2f2;
}

input[type="tel"] {
    width: 100%;
    box-sizing: border-box;
    font-size: 1.2em;
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    border: none;
    background-color: #555;
    color: #fff; /*     color: #f0f0f0; */
}

input[type="tel"]:focus {
    outline: none;
    background-color: #666;
}


section.light input[type="time"] {
    background-color: #fff;
    color: #a8a8a8;
	border:1px solid #c3c3c3;
}

section.light input[type="time"]:focus {
    background-color: #f2f2f2;
}

input[type="time"] {
    width: 100%;
    box-sizing: border-box;
    font-size: 1.4em;
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    border: none;
    background-color: #555;
    color: #fff;  /* #a8a8a8 */
}

input[type="time"]:focus {
    outline: none;
    background-color: #666;
}
section.light input[type="datetime-local"] {
    background-color: #fff;
    color: #000;
	border:1px solid #c3c3c3;
}

section.light input[type="datetime-local"]:focus {
    background-color: #f2f2f2;
}

input[type="datetime-local"] {
    width: 100%;
    box-sizing: border-box;
    font-size: 1.4em;
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    border: none;
    background-color: #555;
    color: #f0f0f0;
}

input[type="datetime-local"]:focus {
    outline: none;
    background-color: #666;
}

section.light input[type="email"] {
    background-color: #fff;
    color: #000;
	border:1px solid #c3c3c3;
}

section.light input[type="email"]:focus {
    background-color: #f2f2f2;
}

input[type="email"] {
    width: 100%;
    box-sizing: border-box;
    font-size: 1.2em;
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    border: none;
    background-color: #555;
    color: #f0f0f0;
}

input[type="email"]:focus {
    outline: none;
    background-color: #666;
}

input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    font-size: 1.2em;
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    border: none;
    background-color: #555;
    color: #f0f0f0;
}

section.light input[type="number"] {
    background-color: #fff;
    color: #000;
	border:1px solid #c3c3c3;
}

input[type="number"]:focus {
    outline: none;
    background-color: #666;
}

section.light input[type="number"]:focus {
    background-color: #f2f2f2;
}

section select {
    width: 100%;
    box-sizing: border-box;
    font-size: 1.2em;  /* Rozmiar czcionki */
    padding: 15px;  /* Wewnętrzne marginesy */
    margin: 10px 0;  /* Zewnętrzne marginesy */
    border-radius: 8px;  /* Zaokrąglone rogi */
    border: 0;
    background-color: #555;  /* Kolor tła */
    color: #f0f0f0;  /* Kolor tekstu */
}

section select:focus {
    outline: none;  /* Usunięcie obramowania focus */
    background-color: #666;  /* ok Kolor tła przy focus */
    border-color: #888;  /* Kolor ramki przy focus */
}

/* Styl dla opcji w select */
section select option {
    background-color: #fff;  /* Kolor tła opcji */
    color: #000;  /* Kolor tekstu opcji */
}
  
  section.light select {
    width: 100%;
    box-sizing: border-box;
    font-size: 1.2em;  /* Rozmiar czcionki */
    padding: 15px;  /* Wewnętrzne marginesy */
    margin: 10px 0;  /* Zewnętrzne marginesy */
    border-radius: 8px;  /* Zaokrąglone rogi */
    border: 1px solid #c3c3c3;  /* Kolor ramki */
    background-color: #fff;  /* Kolor tła */
    color: #000;  /* Kolor tekstu */
}

section.light select:focus {
    outline: none;  /* Usunięcie obramowania focus */
    background-color: #f2f2f2;  /* Kolor tła przy focus */
    border-color: #888;  /* Kolor ramki przy focus */
}

/* Styl dla opcji w select */
section.light select option {
    background-color: #fff;  /* Kolor tła opcji */
    color: #000;  /* Kolor tekstu opcji */
}

button.gps {
    background-color: #00bcd4;
	border: 2px solid #0097a7;
    font-size: 1.2em;
    cursor: pointer;
    padding: 14px;
    transition: background-color 0.3s ease, border 0.3s ease;
}

button.gps:hover {
    background-color: #00bcd4;
	border: 2px solid #0097a7;
}

section.light button.gps {
	background-color: #00bcd4;
	border: 2px solid #0097a7;
    font-size: 1.2em;
    cursor: pointer;
    padding: 14px;
    transition: background-color 0.3s ease, border 0.3s ease;
}

section.light button.gps:hover {
    background-color: #00bcd4;
	border: 2px solid #0097a7;
}

/* GPS button */
	@media (max-width: 768px) {
		button.gps, section.light button.gps {
			padding: 1.2rem 0 ;
		}
	}

button#accept-regulations {
	display: inline-block;
    max-width: 540px;
    background-color: #f44336;
    font-size: 1.2em;
    cursor: pointer;
    border: 0;
    padding: 13px;
    transition: background-color 0.3s ease, border 0.3s ease;
	margin:25px auto 0px auto;
}

button#accept-regulations:hover {
    opacity: 0.9;
}

button#accept-regulations.accepted {
    background-color: #4caf50;
	opacity: 1;
}
button#accept-regulations.accepted:hover {
    background-color: #4caf50;
	opacity: 0.9;
}

button {
    background-color: #fff;
    font-size: 1.2em;
    cursor: pointer;
    border: 2px solid #666;
    padding: 15px;
    transition: background-color 0.3s ease, border 0.3s ease;
}

button:hover {
    background-color: #555;
    border-color: #888;
}

/* Styl dla przycisku submit (Oblicz cenę i zamów TAXI) */
button[type="submit"] {
    background-color: #e2a200; /* Pomarańczowy kolor */
    color: #fff; /* Biały tekst */
    border: 0;
    padding: 30px;
    font-size: 1.5em;
    transition: background-color 0.3s ease;
	margin:0 0 15px 0;
}

button[type="submit"]:hover {
    background-color: #c6910a;
    color: #fff;
}

#map {
    height: 300px;
    width: 100%;
    margin: 0 0 20px 0;
    border: 0;
    border-radius: 0;
    padding: 0;
}
section.light #map {
    height: 300px;
    width: 100%;
    margin: 0 0 20px 0;
    border: 1px solid #c3c3c3;
    border-radius: 0;
    padding: 0;
}

/* Kontener dla ceny i dystansu */
.summary-container {
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 10px; /* Odstęp między okienkami */
    margin-top: 0px;
}

@media (max-width: 1050px) {
	.summary-container {
		margin-top: 0;
	}
    .summary-container .form-row {
        display: flex;
        flex-direction: column-reverse; /* Zamienia kolejność elementów w kolumnie */
    }
	.summary-container .form-row #popraw {
    margin-top: 0;
	}
	.summary-container .form-row #zaplac {
    margin-bottom: 0;
	}
}

/* Styl dla linku zapłać BLIKIEM */
#popraw {
    display: block;
    padding: 30px;
    border-radius: 10px;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    background-color: #888; /* Jaśniejszy niebieski */
    color: #fff;
    text-decoration: none;
    margin-top: 0;
    margin-bottom: 15px;
    transition: background-color 0.3s ease;
}

#popraw:hover {
    background-color: #777; /* Ciemniejszy niebieski przy najechaniu */
}

#zaplac {
    display: block;
    padding: 30px;
    border-radius: 10px;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    background-color: #4a90e2; /* Jaśniejszy niebieski */
    color: #ffffff;
    text-decoration: none;
    margin-top: 8px;
    margin-bottom: 15px;
    transition: background-color 0.3s ease;
}

#zaplac:hover {
    background-color: #3a7ab7; /* Ciemniejszy niebieski przy najechaniu */
}

#powrot, #wyloguj, #rozwinuser, #rozwinstat, #loadMore{
    display: block;
    padding: 12px;
    border-radius: 10px;
    font-size: 1.3em;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
    margin-top: 15px;
    margin-bottom: 5px;
    transition: background-color 0.3s ease;
}
#rozwinstat{    
    border-radius: 10px 10px 0 0;
}
#wyloguj2 {
    /* float: right; */
    padding: 7px 10px;
    border-radius: 5px;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
#rezerwujkurs {
    /* float: right; */
    padding: 7px 10px;
    border-radius: 5px;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    color: #222;
	margin-left:5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

#powrot, #wyszukaj {
	background-color: #4a90e2; /* Jaśniejszy niebieski */
}
#wyloguj, #wyloguj2 {
	background-color: #f44336; /* czerwony */
}
#rezerwujkurs {
	background-color: #FFF; /* czerwony */
}

#rozwinuser, #loadMore {
	background-color: #4a90e2; /* niebieski */
	border:0;
}
#rozwinstat {
	background-color: #4caf50; /* zielony */
	border:0;
}
#powrot:hover,  #wyloguj:hover, #wyloguj2:hover, #rozwinuser:hover, #rozwinstat:hover, #loadMore:hover, #wyszukaj:hover {
    opacity: 0.9; /* Ciemniejszy przy najechaniu */
}

#wyszukaj {
    display: block;
    padding: 12px;
    border-radius: 10px;
    font-size: 1.3em;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
    margin-top: 0px;
    margin-bottom: 5px;
    transition: background-color 0.3s ease;
}


@media (max-width: 1050px) {
    label.ukryj-mobilne {
        display: none;
    }
    h2#rezerwacja {
        display: none;
    }
}


section.light input::placeholder {
    color: #000; /* Twój wybrany kolor */
    opacity: 1;  /* Upewnia się, że placeholder nie będzie półprzezroczysty */
}

section.light input#godzina::placeholder {
    color: #000; /* Twój wybrany kolor */
    opacity: 1;  /* Upewnia się, że placeholder nie będzie półprzezroczysty */
}

input::placeholder {
    color: #fff; /* Twój wybrany kolor */
    opacity: 1;  /* Upewnia się, że placeholder nie będzie półprzezroczysty */
}

input#godzina::placeholder {
    color: #888; /* Twój wybrany kolor */
    opacity: 1;  /* Upewnia się, że placeholder nie będzie półprzezroczysty */
}



/* Styl dla ceny, dystansu i czasu (okienka) */
#price,
#distance,
#czas,
#toggle-details {
    font-size: 1.5em;
    margin: 0px 0 5px 0;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
	text-decoration:none;
}
#toggle-price_distance_czas {
    font-size: 1.5em;
    margin: 0px 0 5px 0;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
	text-decoration:none;
}
#punkty_za_kurs {
    font-size: 1.2em;
    margin: 0px 0 5px 0;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
	text-decoration:none;
	line-height:1.4em;
}
#punkty_za_kurs span {
    background-color:#fff;
	color:#333;
	padding:5px;
	border-radius:5px;
	font-weight:bold;
}
a.konto_klienta {
		font-size: 0.8em;
		background-color:#f44336;
		color:#fff; /* color:#FFD966; */
		padding:6px;
		border-radius:5px;
		font-weight:bold;
}
#czas_oczekiwania {
    font-size: 1em;
    margin: 0 auto;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
	text-decoration:none;
}

.br-mobile {
    display: none;
}

@media (max-width: 500px) {
    .br-mobile {
        display: inline;
    }
}



#czas {
    font-size: 1.1em;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
}
/* Media Query do stylizacji powyżej 1050px */
@media (min-width: 1050px) {
    #map, section.light #map {
        height: 500px;
        width: 100%;
        margin: 0 0 20px 0;
        border: 0;
        border-radius: 5px;
        padding: 0;
    }
    main {
        padding: 20px;
        padding-bottom: 0px;
        max-width: 1200px;
        margin: 0 auto;
    }
    section {
        background-color: #383838;
        padding: 20px 20px 0 20px;
        border-radius: 10px;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    }
    /* Przyciski w rzędzie obok siebie */
    #price,
    #distance,
    #czas {
        display: inline-block; /* Umożliwia wyświetlenie obok siebie */
        min-width: 180px;
        margin: 0px 3px; /* Odstęp między nimi */
        font-size: 1.1em;
    }
	
	#toggle-details, #toggle-price_distance_czas {
        display: block; /* Umożliwia wyświetlenie obok siebie */
		max-width:510px;
        min-width: 180px;
        margin: 10px auto; /* Odstęp między nimi */
        font-size: 1.1em;
    }
	
	#czas_oczekiwania {
        display: block; /* Umożliwia wyświetlenie obok siebie */
        max-width: 100%;
		margin: 0 auto;
        font-size: 1.1em;
    }
	
	#punkty_za_kurs {
        display: block; /* Umożliwia wyświetlenie obok siebie */
        max-width: 618px;
        min-width: 618px;
		margin: 5px auto;
        font-size: 1.2em;
    }
	
    /* Styl dla linku płatności */
    #zaplac, #popraw {
        max-width: 480px;
        margin: 10px auto;
    }
	#powrot, #wyloguj {
        margin-top: 25px; /* Odstęp od góry */
        max-width: 200px;
    }
	#rozwinuser, #loadMore, #rozwinstat {
        margin-bottom: 25px; /* Odstęp od góry */
        max-width: 500px;
    }
	#wyszukaj {
        margin-top: 12px; /* Odstęp od góry */
        max-width: 200px;
    }
	/* Styl dla przycisku submit (Oblicz cenę i zamów TAXI) */
	button[type="submit"] {
    background-color: #e2a200; /* Pomarańczowy kolor */
    color: #fff; /* Biały tekst */
    border: 0;
    padding: 30px;
    font-size: 1.5em;
    transition: background-color 0.3s ease;
	margin:10px 0 15px 0;
	}
	p.copy {
	text-align:center;
	font-size:16px;
	margin:0px 10px 20px 10px;
    color: #e2a200; /* Jaśniejszy tekst dla pozycji w liście */
	}
}

#rozwinuser {
        margin-top: 0px;
        margin-bottom: 25px;
    }
#rozwinstat {
        margin-top: 20px;
        margin-bottom: 0px;
    }
#loadMore {
        margin-top: 10px;
        
    }

#toggle-details {
    background-color: #5bc0de; /* Kolor przycisku */
	color: #ffffff;
}
#toggle-price_distance_czas {
    background-color: #5bc0de; /* Kolor przycisku */
	color: #ffffff;
}
#punkty_za_kurs {
    background-color: #555; /* Kolor przycisku */
	color: #ffffff;
}

/* Cena w jaśniejszym zielonym */
#price {
    background-color: #4caf50; /* Jaśniejszy zielony */
    color: #ffffff;
}

/* Dystans w jaśniejszym czerwonym */
#distance {
    background-color: #f44336; /* Jaśniejszy czerwony */
    color: #ffffff;
}

#czas_oczekiwania {
    background-color: #f44336; 
    color: #ffffff;
}

/* Czas przejazdu w jaśniejszym niebieskim */
#czas {
    background-color: #2196F3; /* Jaśniejszy niebieski */
    color: #ffffff;
}

#toggle-details:hover {
    background-color: #31b0d5; /* Ciemniejszy kolor przycisku przy najechaniu */
	color: #ffffff;
}
#toggle-price_distance_czas:hover {
    background-color: #31b0d5; /* Ciemniejszy kolor przycisku przy najechaniu */
	color: #ffffff;
}

/* Styl dla linków */
a {
	margin: 0;
    color: #e2a200;
	text-decoration:none;
	font-size: 1em;
	text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* Linki do map */
#mapsLink_pickup,
#mapsLink_destination,
#mapsLink_cala_trasa,
#mapsLink_cala_trasa_klienta {
    display: block;
    margin-top: 10px;
    padding: 20px;
    font-size: 1.3em;
    background-color: #444;
    color: #ffffff;
    border-radius: 5px;
    text-align: center;
    transition: background-color 0.3s ease;
}

#mapsLink_pickup:hover,
#mapsLink_destination:hover,
#mapsLink_cala_trasa:hover,
#mapsLink_cala_trasa_klienta:hover {
    background-color: #555;
}

/*CENNIK*/
.cennik {
    margin: 0 0 0px 10px;
	text-align:left;
}

.cennik h3 {
	color: #fff; /* Pomarańczowy nagłówek podobny do cennika */
	font-size: 2.1em; /* Spójny rozmiar z resztą nagłówków */
	margin-bottom: 15px;
}

section.light h3, section.light h2 {
	color: #333333; 
}

.cennik p {
    color: #f0f0f0; /* Tekst w jasnym kolorze */
    font-size: 1.5em; /* Spójny z resztą strony */
    margin-bottom: 10px; /* Odstęp między akapitami a listą */
}

section.light .cennik p {
    color: #333333; /* Tekst w jasnym kolorze */
}

.cennik ul.responsive-indent {
	margin-left: 2rem;	
}
.cennik ul.responsive-indent li {
	line-height: 1.9rem;
}
@media (max-width: 768px) {
	.cennik ul.responsive-indent {
		margin-left: 1rem;
	}
	.cennik ul.responsive-indent li {
		line-height: 1.3rem;
	}
}

.cennik ul {
    list-style-type: none; /* Usunięcie domyślnych kropek */
    padding-left: 0px; /* Dodanie odstępu z lewej strony */
	margin-right:10px;
}

.cennik ul li {
    font-size: 1.5em; /* Odpowiedni rozmiar dla list */
    margin-bottom: 8px; /* Odstęp między liniami */
    color: #cccccc; /* Jaśniejszy tekst dla pozycji w liście */
}

section.light .cennik ul li {
    color: #333333; /* Jaśniejszy tekst dla pozycji w liście */
}

.cennik ul li span {
    color: #e2a200; /* Jaśniejszy tekst dla pozycji w liście */
}
section.light .cennik ul li span {
    color: red; /* Jaśniejszy tekst dla pozycji w liście */
}

.cennik ul li::before {
    content: "• "; /* Dodanie kropki przed każdą pozycją */
    color: #e2a200; /* Kolor kropki */
    font-size: 1.2em; /* Większa kropka dla wyróżnienia */
}

section.light .cennik ul li::before {
    color: red; /* Kolor kropki */
}

p.copy {
	text-align:center;
	font-size:16px;
	margin:10px 10px 20px 10px;
    color: #e2a200; /* Jaśniejszy tekst dla pozycji w liście */
	}

@media (max-width: 500px) {
    .cennik ul li {
        font-size: 1em; /* Odpowiedni rozmiar dla list */
        margin-bottom: 8px; /* Odstęp między liniami */
        color: #cccccc; /* Jaśniejszy tekst dla pozycji w liście */
        line-height: 20px;
    }
	.cennik h3 {
            color: #fff; 
            font-size: 1.5em; /* Spójny rozmiar z resztą nagłówków */
            margin-bottom: 15px;
		}
}

/* Dodatkowe style z index.php */
.form-row {
    display: flex;
    flex-wrap: wrap; /* Umożliwia zawijanie wierszy */
}

.form-group {
    margin-right: 10px; /* Przerwa między kolumnami */
}

/* Ustalamy proporcje dla lokalizacji początkowej i końcowej */
.form-row:nth-of-type(2) .form-group:nth-child(1) {
    flex: 2; /* 2 części dla przycisku GPS */
}

.form-row:nth-of-type(2) .form-group:nth-child(2) {
    flex: 5; /* 5 części dla lokalizacji początkowej */
}

.form-row:nth-of-type(2) .form-group:nth-child(3) {
    flex: 5; /* 5 części dla lokalizacji końcowej */
}

/* Ustalamy proporcje dla imienia i numeru telefonu */
.form-row:nth-of-type(1) .form-group {
    flex: 5; /* Możesz zmienić to na 6 lub inną wartość w zależności od wymagań */
}

.form-row:nth-of-type(1) .form-group:last-child {
    flex: 5; /* Również 5 części dla numeru telefonu */
}

/* Usunięcie przerwy dla ostatniego elementu w wierszu */
.form-group:last-child {
    margin-right: 0;
}

/* Dostosowanie stylów dla ekranów poniżej 1050px */
@media (max-width: 1050px) {
    .form-row {
        flex-direction: column; /* Zmienia kierunek na kolumnę */
    }

    .form-group {
        margin-right: 0; /* Usuwa przerwy między kolumnami */
        margin-bottom: 10px; /* Dodaje przerwy między polami w kolumnach */
    }
}
/*Przyciski zapisujace do ekranu głównego*/

#addToHomeScreen {
		max-width:650px;
        display: none; /* Domyślnie ukryty */
        position: fixed; /* Ustawienie jako fixed */
        bottom: 0px; /* Odstęp od dolnej krawędzi */
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.8); /* Lekko przezroczyste tło */
        color: white; /* Kolor tekstu */
        padding: 15px; /* Padding wewnętrzny */
        z-index: 1000; /* Ustawienie z-index, aby był nad innymi elementami */
        text-align: center; /* Wyśrodkowanie tekstu */
    }

    /* Styl dla zdania */
    #message {
        width: 100%; /* Zajmuje 100% szerokości */
        margin-bottom: 10px; /* Odstęp od przycisków */
    }

    /* Kontener dla przycisków */
    .button-container {
        display: flex; /* Umożliwienie wyświetlania przycisków w wierszu */
        justify-content: center; /* Wyśrodkowanie przycisków */
        gap: 10px; /* Ustawienie odstępu pomiędzy przyciskami */
    }

    /* Styl dla przycisków ogólnych */
    #addToHomeScreen button {
        color: white; /* Kolor tekstu przycisku */
        padding: 15px 0; /* Padding wewnętrzny przycisku */
        border: none; /* Bez obramowania */
        cursor: pointer; /* Zmiana kursora na wskaźnik */
        width: 50%; /* Każdy przycisk zajmuje 50% szerokości */
    }

    /* Styl dla przycisku "Dodaj do ekranu głównego" */
    #addBtn {
        background: #2196F3; /* Kolor przycisku */
    }

    /* Styl dla przycisku "Zamknij" */
    #closeBtn {
        background: #444; /* Kolor przycisku zamknięcia */
    }

/* Dolne Menu - dla mniejszych ekranów (do 1050px) */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 0px;
}

.bottom-menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.menu-home {
    flex: 0.5; /* połowę szerokości pozostałych */
	max-width:100px;
}
.menu-motyw {
    flex: 0.5; /* połowę szerokości pozostałych */
	max-width:100px;
}
.menu-user {
    flex: 0.5; /* połowę szerokości pozostałych */
	max-width:100px;
}
.menu-zadzwon {
    flex: 0.5; /* zajmuje połowę szerokości pozostałych */
	max-width:100px;
}.menu-top-taxi {
    flex: 0.5; /* zajmuje połowę szerokości pozostałych */
	max-width:100px;
}
.bottom-menu ul li:not(.menu-home) {
    flex: 1; /* Pozostałe elementy zajmują równą szerokość */
}
.bottom-menu ul li:not(.menu-motyw) {
    flex: 1; /* Pozostałe elementy zajmują równą szerokość */
}
.bottom-menu ul li:not(.menu-user) {
    flex: 1; /* Pozostałe elementy zajmują równą szerokość */
}
.bottom-menu ul li:not(.menu-zadzwon) {
    flex: 1; /* Pozostałe elementy zajmują równą szerokość */
}
.bottom-menu ul li:not(.menu-top-taxi) {
    flex: 1; /* Pozostałe elementy zajmują równą szerokość */
}
.bottom-menu ul li a {
    display: block;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    padding: 15px 10px;
    transition: opacity 0.3s ease;
}

/* Kolory tła i tekstu dla każdego elementu menu w odcieniach szarości */
.menu-home a {
    background-color: #FFF; /* Ciemny odcień szarości dla Home */
    color: #222; /* Biały tekst dla Home */
	font-size:35px !important;
	padding:5px 0 7px 0 !important;
}
.menu-zadzwon a {
	font-size:35px !important;
	padding:5px 0 7px 0 !important;
}
.menu-top-taxi a {
	font-size:35px !important;
	padding:5px 0 7px 0 !important;
}
.menu-motyw a {
	font-size:35px !important;
	padding:5px 0 7px 0 !important;
}
.menu-user a {
	font-size:35px !important;
	padding:5px 0 7px 0 !important;
}
@media (max-width: 1050px) {
    .menu-home a {
	font-size:35px !important;
	padding:4px 0 2px 0 !important;
	}
	.menu-zadzwon a {
	font-size:35px !important;
	padding:4px 0 2px 0 !important;
	}
	.menu-top-taxi a {
	font-size:35px !important;
	padding:4px 0 2px 0 !important;
	}
	.menu-motyw a {
	font-size:35px !important;
	padding:4px 0 2px 0 !important;
	}
	.menu-user a {
	font-size:35px !important;
	padding:4px 0 2px 0 !important;
	}
}
/* Kolory tła i tekstu dla każdego elementu menu w odcieniach szarości */
.menu-motyw a {
    background-color: #777777;
    color: #fff; 
}
.menu-user a {
    background-color: #555555;
    color: #fff; /*#e2a200;*/
}

.menu-regulamin a {
    background-color: #555555;
    color: #fff; 
}

.menu-cennik a {
    background-color: #777777;
    color: #fff; 
}

.menu-zadzwon a {
    background-color: #555555;
    color: #fff; 
}

.menu-top-taxi a {
    background-color: #777777;
    color: #fff; 
}

.bottom-menu ul li a:hover {
    background-color:#999;
}

/* Wariant dla większych ekranów (powyżej 1050px) */
@media (min-width: 1051px) {
    footer {
        position: static;
		max-width: 1200px;
        margin: 0 auto;
        padding: 5px 0;
        border-radius: 0 0 10px 10px;
    }

    .bottom-menu ul li a {
        font-size: 20px; /* Większy rozmiar czcionki dla dużych ekranów */
    }
	.bottom-menu ul li a:hover {
    background-color:#999;
	}
}


/* REGULAMIN STYLES */
        .regulamin {
            margin: 0 10px;
            text-align: left;
        }

        .regulamin h3 {
            color: #fff; /* Pomarańczowy nagłówek podobny do cennika */
            font-size: 2.1em; /* Spójny rozmiar z resztą nagłówków */
            margin-bottom: 15px;
        }

        .regulamin p {
            color: #f0f0f0; /* Jasny kolor tekstu */
            font-size: 1.5em; /* Nieco mniejszy rozmiar dla tekstu regulaminu */
            line-height: normal; /* Zwiększona interlinia dla lepszej czytelności */
            margin-bottom: 10px; /* Odstęp między paragrafami */
        }
		
		section.light .regulamin p {
			color: #333333; /* Tekst w jasnym kolorze */
		}

        .regulamin ul {
            list-style-type: none; /* Usunięcie domyślnych kropek */
            padding-left: 0; /* Bez wcięcia z lewej */
        }

        .regulamin ul li {
            font-size: 1.5em; /* Mniejszy rozmiar dla list */
            margin-bottom: 8px; /* Odstęp między liniami */
            color: #cccccc; /* Jaśniejszy tekst dla pozycji w liście */
        }
		
		section.light .regulamin ul li {
			color: #333333; /* Jaśniejszy tekst dla pozycji w liście */
		}

        .regulamin ul li span {
            color: #e2a200; /* Wyróżnienie tekstu */
        }
		
		section.light .regulamin ul li span {
			color: #222; /* Jaśniejszy tekst dla pozycji w liście */
			font-weight:bold;
		}
		
		.regulamin ul li .red {
            color: #f44336; /* Wyróżnienie tekstu */
        }
		
		section.light .regulamin ul li .red {
			color: #f44336; /* Jaśniejszy tekst dla pozycji w liście */
		}

        .regulamin ul li::before {
            content: "• "; /* Dodanie kropki przed każdą pozycją */
            color: #e2a200; /* Kolor kropki */
            font-size: 1.2em; /* Większa kropka dla wyróżnienia */
        }
		
		section.light .regulamin ul li::before {
			color: red; /* Kolor kropki */
		}

        .regulamin strong {
            color: #e2a200; /* Wyróżnienie ważnych punktów */
        }
		
		section.light .regulamin strong {
            color: #222; /* Wyróżnienie ważnych punktów */
        }

        .regulamin a {
            color: #e2a200; /* Linki w pomarańczowym kolorze */
            text-decoration: none; /* Bez podkreślenia */
        }

        .regulamin a:hover {
            text-decoration: underline; /* Podkreślenie przy najechaniu myszką */
        }
		
		section.light .regulamin a {
            color: red; /* Linki w pomarańczowym kolorze */
        }
		
		@media (max-width: 500px) {
		.regulamin ul li {
			font-size: 1em; /* Odpowiedni rozmiar dla list */
			margin-bottom: 8px; /* Odstęp między liniami */
			color: #cccccc; /* Jaśniejszy tekst dla pozycji w liście */
			line-height: 20px;
			}
			.regulamin p {
            color: #f0f0f0; /* Jasny kolor tekstu */
            font-size: 1em; /* Nieco mniejszy rozmiar dla tekstu regulaminu */
            line-height: normal; /* Zwiększona interlinia dla lepszej czytelności */
            margin-bottom: 10px; /* Odstęp między paragrafami */
			}
			.regulamin h3 {
            color: #fff; 
            font-size: 1.5em; /* Spójny rozmiar z resztą nagłówków */
            margin-bottom: 15px;
			}
		}