/* inter-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/inter/inter-v20-latin-regular.woff2') format('woff2');
}
/* inter-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/fonts/inter/inter-v20-latin-500.woff2') format('woff2');
}
/* inter-600 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/inter/inter-v20-latin-600.woff2') format('woff2'); 
}
/* inter-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/inter/inter-v20-latin-700.woff2') format('woff2');
}

/* poppins-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/poppins/poppins-v24-latin-regular.woff2') format('woff2');
}
/* poppins-500 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/fonts/poppins/poppins-v24-latin-500.woff2') format('woff2');
}
/* poppins-600 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/poppins/poppins-v24-latin-600.woff2') format('woff2'); 
}
@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
html{overflow-y: scroll; box-sizing:border-box}
body{font-size: 14px;font-family: 'Inter', sans-serif;margin: 0;padding: 0}
label{display: block; margin: 6px 0; font-family: 'Poppins', sans-serif; font-size: 14px;}
a{text-decoration: none; color: inherit; cursor: pointer;}
p{margin: 4px 0;}
button{cursor: pointer;}
table {width: 100%;margin: 0 auto;border-collapse: collapse;}
td, th {padding: 16px 0; border-bottom: 1px solid #e6e6e6;}
tr:last-child td {border-bottom: none;}
th {text-align: left;}
svg{ width: 1em; height: 1em; fill: currentColor; vertical-align: -2px}
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
textarea:focus, input:focus, select:focus{outline: none;}
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #f4f4f4 inset !important; /* Schimbă fundalul */
    background-color: #f4f4f4 !important; /* Asigură culoarea fundalului */
    color: #333 !important; /* Asigură culoarea textului */
    transition: background-color 5000s ease-in-out 0s; /* Evită schimbările rapide */
}
::placeholder {color: #333333;opacity: 1}
::-ms-input-placeholder {color: #333333}

.cs-m0{margin: 0;}
.cs-mt0{margin-top: 0;}
.cs-mt6{margin-top: 6px;}
.cs-mt12{margin-top: 12px;}
.cs-mt24{margin-top: 24px;}
.cs-mb4{margin-bottom: 4px;}
.cs-mb8{margin-bottom: 8px;}
.cs-mb16{margin-bottom: 16px;}
.cs-mb16{margin-bottom: 16px;} .cs-mt16{margin-top: 16px;} .cs-mtb16{margin: 16px 0;}
.cs-mb24{margin-bottom: 24px;} .cs-mtb24{margin: 24px 0;}
.cs-mb64{margin-bottom: 64px;}
.cs-flex{display: flex;} .cs-inline-flex{display: inline-flex;} .cs-flex-space-b{justify-content: space-between;} .cs-justify-center{justify-content: center;} .cs-flex-end{justify-content: flex-end;} .cs-flex-wrap{flex-wrap: wrap;} .cs-flex-align-c{align-items:center;}
.cs-gap2{gap:2px} .cs-gap4{gap:4px} .cs-gap6{gap:6px} .cs-gap12{gap:12px} .cs-gap24{gap:24px}
.cs-block{display: block;}
.cs-bold{font-weight: bold;}
.cs-weight-500{font-weight: 500;}
.cs-weight-600{font-weight: 600;}
.cs-font-12{font-size: 12px;}
.cs-font-14{font-size: 14px;}
.cs-font-15{font-size: 15px;}
.cs-font-16{font-size: 16px;}
.cs-font-18{font-size: 18px;}
.cs-font-20{font-size: 20px;}
.cs-font-22{font-size: 22px;}
.cs-font-24{font-size: 24px;}
.cs-font-26{font-size: 26px;}
.cs-p8-0{padding: 8px 0;}
.cs-p16{padding: 0 16px;}
.cs-p16-24{padding: 16px 24px;}
.cs-weight-600{font-weight: 600;}
.cs-w29{width: 29%}
.cs-w33{width: 33%}
.cs-w49{width: 49%}
.cs-w69{width: 69%}
.cs-w100{width: 100%}
.cs-right{text-align: right}
.cs-center{text-align: center}
.cs-text-right{text-align: right}
.cs-round-8{border-radius: 8px;}
.cs-round-16{border-radius: 16px;}
.cs-text-color-light-gray{color: #4d4d4d;}
.cs-text-color-gray{color: #333333;}

@media only screen and (max-width: 600px) {
	.cs-w100-m{width: 100%}
	.cs-w49-m{width: 49%}
}

#loading-spinner{
	display: flex;
    justify-content: center;
    height: 101%;
    align-items: center;
	position: absolute;
	width: 101%;
	left: -1px;
	z-index: 3;
	background: white;
}

.spinner {
    border: 5px solid rgba(0, 0, 0, 0.1);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border-left-color: #007bff;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/*-------------------------------Login page---------------------------------*/
.login-form{
	width: 520px;  
	border-radius: 8px; 
	padding: 32px 48px; 
	margin: 60px 0;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.login-form label{margin: 6px 0;}
.login-form .password-container{position: relative; overflow: hidden}
.login-form .password-container .show-password{
	position: absolute;
	bottom: 0;
    right: 2px;
	cursor: pointer;
	background-color: transparent;
	padding: 10px;
	font-size: 20px;
}
.cs-button{
	width: 100%;
	border: none;
	background-color: #1a1a1a;
	color: white;
	font-weight: 500;
	padding: 16px;
	margin-top: 20px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 16px;
	margin-bottom: 16px;
}

.cs-button-outline{
	width: 100%;
	border: 1px solid #e6e6e6;
	background-color: #FFFFFF;
	color: #000000;
	font-weight: 500;
	padding: 16px;
	margin-top: 20px;
	border-radius: 8px;
	cursor: pointer;
	font-size: 16px;
	margin-bottom: 16px;
}

.cs-input{
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  box-sizing: border-box;
  resize: vertical;
  background: white;
  font-size: 16px;
  font-family: Poppins;
  border: 1px solid #d9d9d9;
  height: 48px;
}
/* Disabled unitar pe toate platformele. iOS/Safari pune opacity + text-fill-color proprii pe
   input:disabled (text aproape alb) și ignoră culorile pe select cu aspect nativ (pare activ)
   → opacity:1 + -webkit-text-fill-color explicit + appearance:none pe select.
   !important: bate style="color:#000000" inline de pe select-uri. */
.cs-input:disabled{
  background-color: #f2f2f2;
  border-color: #d9d9d9;
  color: #595959 !important;
  -webkit-text-fill-color: #595959 !important;
  opacity: 1;
  cursor: not-allowed;
}
select.cs-input:disabled{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.login-message{font-size: 13px; margin-top: 4px;}
.error-message{font-size: 13px;color: #c0123c;}

@media only screen and (max-width: 600px) {
	.login-form{
		width: 100%; 
		border-radius: 0; 
		padding: 32px 32px; 
		box-shadow: none
	}
}

/*-------------------------------TOP MENU-------------------------------------*/
.nav{background-color: #ffffff;box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.17);font-weight: 400;letter-spacing: 1px;}
.nav .container {
  height: 70px;
  max-width: 1020px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: visible;
  margin: auto;
}

.nav .container .logo {max-width: 250px;padding: 0 10px;overflow: hidden;}

.nav .container .logo a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 60px;
  text-align: center;
}

.nav .container .navbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0 10px;
  justify-content: flex-end;
}

.nav .container .lang {
 display: flex;
 align-items: center;
 padding-left: 15px; 
}
.nav .container .lang a{
  text-decoration: none;
  padding: 6px;
  color: #333333;
}

.lang-btn {
	background: transparent;
	color: #333333;
    cursor: pointer;
	font-weight: normal;
	font-size: 14px;
	padding: 6px;
}

.lang-btn:hover {
	background: transparent;
}

.lang-menu {
    position: absolute;
    top: 100%;
    left:6px;
    background: white;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #ccc;
    width: 100%;
	border-radius: 8px;
	overflow: hidden;
	z-index: 6;
}
.lang-menu li {
    padding: 8px 14px;
    cursor: pointer;
}
.lang-menu li:hover {
    background: #eee;
}

.lang-menu img{
	width: 16px;
	margin-right: 4px;
}	

.nav .container .navbar .icon-bar {
  padding: 14px 8px;
  width: 45px;
  height: 49px;
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  cursor: pointer;
}

.nav .container .navbar .icon-bar i {background-color: #666666;height: 3px;}

@media only screen and (max-width: 600px) {
    .nav{
		position: fixed;
		width: 100%;
		z-index: 4;
    }
  .nav .container {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
	border-bottom: 1px solid #fafafa;
	width: 100%;
  }
  .nav .container .navbar .icon-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .nav .container .navbar .lang {
		display: flex;
		align-items: center;
		padding-right: 10px; 
    }
}

.container{max-width: 1020px;margin: auto;font-family: Inter, Arial, sans-serif;}

.inner-container{
	width: 760px;
	border: 1px solid #e6e6e6;
	border-radius: 16px;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 10px 24px;
	overflow: hidden;
	min-height: 364px;
}

.sidemenu{
	width: 240px;
	margin-top: 20px;
	transition: 0.2s;
	background: white;
	z-index: 3;
}

.sidemenu .items{
	border: 1px solid #e6e6e6;
	border-radius: 16px;
	padding: 16px;
}

.sidemenu .items .contact a{
	font-size: 14px;
	padding: 6px;
}

.sidemenu .items .contact svg{
	font-size: 16px;
}

.sidemenu.active {
	left: 0;
}
.sidemenu .items a {
	padding: 10px 6px;
	margin: 6px 0;
	text-decoration: none;
	font-size: 15px;
	color: #333333;
	display: flex;
	align-items: center;
	gap: 10px;
}

.sidemenu .items a.active {
	font-weight: 600;
}

.sidemenu .items a.active {
	color: #000;
}

.sidemenu svg {
	font-size: 20px;
	padding-right: 2px;
	vertical-align: middle;

}

.sidemenu a:hover {
	color: #000000;
}

@media only screen and (max-width: 600px) {
	.sidemenu {
		position: fixed; 
		left: -246px; 
		top: 50px; 
		height: 93%; 
		box-shadow: 4px 3px 8px 0px #00000012;
	}
	.sidemenu .items{
		border-radius: 0; 
		border: none; 
	}
	
	.inner-container{
		width: 100%;
		border: none;
		border-radius: 0;
		margin-top: 64px;
		padding: 8px 12px;
	}
}


#form-container {
position: relative;
}

.input-label{
	margin-bottom:8px;
	color: #262626;
}
.input-label i{
	margin-right: 4px;
	font-size: 16px;
    vertical-align: text-bottom;
}

#form-steps{overflow: hidden;}

#step-2, #step-3, #step-4{
	animation: topBottom 0.3s ease
}


h2 {
  font-size: 24px;
  margin-top: 16px;
  margin-bottom: 16px;
  font-weight: 600;
  font-family: Inter, Arial, sans-serif;
}

label {
  display: block;
  margin-top: 10px;
}

.form-step input, .form-step select {
	width: 100%;
	padding: 23px 36px 7px 38px;
	margin-top: 5px;
	margin-bottom: 15px;
	border: 1px solid #f2f2f2;
	border-radius: 32px;
	background: #f4f4f4;
	color: black;
	font-size: 16px;
	height: 55px;
	font-family: 'Poppins', sans-serif;
}

.form-step textarea {
  width: 100%;
  padding: 23px 16px 9px 38px;
  margin-top: 5px;
  margin-bottom: 15px;
  border: 1px solid #f2f2f2;
  background: #f4f4f4;
  border-radius: 24px;
  resize: none;
  color: black;
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
}

.radio-input input {
  display: none;
}

.radio-input {
  display: flex;
  align-items: center;
  background-color: #fff;
  color: #000000;
  overflow: hidden;
  margin-bottom: 16px;
}

.radio-input label {
  width: 140px; 
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  font-size: 15px;
  margin: 0 6px;
  border: 1px solid #333333;
  color: #000000;
  border-radius: 9999px;
  gap: 6px;
}

.radio-input label svg {
  flex-shrink: 0;
  font-size: 16px;
}
.selection-ib {
  display: none;
  position: absolute;
  height: 100%;
  z-index: 0;
  left: 0;
  top: 0;
  transition: .15s ease;
}

.radio-input label:has(input:checked) {
  color: #FFFFFF;
  background-color: #000000;
  font-weight: 500;
}

.profile-card{width: 48.5%; display: flex; align-items: center; gap: 6px; margin-bottom: 16px; border: 1px solid #e6e6e6; border-radius: 16px; padding: 16px}
.profile-card .icon{font-size: 16px; color: #333333;}

.input-icon{position: absolute; left: 11px; top: 22px; width: 19px;}

.rounded-container{border-radius: 16px; padding: 16px; position: relative; margin-bottom: 16px; border: 1px solid #e6e6e6}
.rounded-container.passenger{display: flex; align-items: center; flex-direction: column; flex-wrap: wrap; justify-content: center;}
.rounded-container.vehicle{display: flex; justify-content: space-between; align-items: center;}
.rounded-container.vehicle .details{text-align: right;}
.rounded-container.price .details{display: flex ; justify-content: space-between; align-items: center; flex-direction: column;}
.booking-flex{display: flex; align-items: center; justify-content: space-between;}
.booking-status{font-size: 16px; color: #1a1a1a; margin-right: 16px; display: flex; align-items: center; gap: 6px; border-radius: 16px;background: #f2f2f2;padding: 5px 12px; flex-shrink: 0;}
.booking-status svg{ width: 1em; height: 1em; fill: currentColor; }
.booking-status:last-child{margin-right: 0;}


.list-item{padding: 14px 0;color: black; border-bottom: 1px solid #e6e6e6; margin: 0;}
.list-item:last-child{border-bottom: none;}
.list-item .icon{font-size: 18px; display: flex; align-items: center; justify-content: center; width:44px; height:44px; opacity: 0.8; margin-right: 14px; border-radius: 12px; background: #e6e6e6;}
.list-item .top{display: flex; flex-direction: row; align-items: center;}
.list-item .top-left{font-size: 16px; font-weight: 600; font-family: "Inter", sans-serif; line-height: 1.3;  margin-bottom: 2px;}
.list-item .bottom-left{ line-height: 1.3;}
.list-item .top-right{text-align: right; font-family: "Inter", sans-serif; font-weight: 500; color: #000000; font-size: 16px; margin-bottom: 2px; line-height: 1.3;}
.list-item .bottom-right{text-align: right; font-family: "Inter", sans-serif; font-weight: 400; font-size: 14px; line-height: 1.3;}


@media only screen and (max-width: 600px) {
	.rounded-container.vehicle{display: flex; justify-content: space-between; flex-direction: column; text-align: center; align-items: center;}
	.rounded-container.vehicle .details{text-align: center;}
	.rounded-container.price .details{flex-direction: row;}
	.profile-card{width: 100%;}
}

.pac-container {
    border-radius: 16px!important;
}   

.pac-item {
    text-overflow: initial!important;
	white-space: normal!important;
	line-height: 1.5;
	padding: 8px 4px 8px 16px;
	border-top: 1px solid #f2f2f2;
	font-size: 13px;
}  

.pac-icon{
    display: none!important;
}  
.ui-timepicker-standard {
  border: 1px solid #ddd!important;
  border-radius: 4px;
  z-index:2!important;
}

.input-container {position: relative;}
.clear-button {
    position: absolute;
    right: 8px;
    top: 43%;
    transform: translateY(-50%);
    cursor: pointer;
	background-image:url("/images/icons/cross-icon.svg");
	background-repeat: no-repeat;
	background-position: center;
	padding: 15px;
	width: 20px;
	height: 20px;
	font-weight: bold;
	color: #ccc;
	display: none;
}

.custom-label{
	position: absolute;
    top: 20px;
    left: 39px;
    font-size: 15px;
    color: #333333;
    margin-top: 0;
    transition: 0.1s;
	z-index: 1;
	font-weight: 500;
	cursor: text;
}

.input-container .custom-label.active {
    font-size: 12px;
    top: 10px;
}

input[type="radio"] {
  width: auto;
  height: auto;
}

.buttons-container{
  width: 100%;
  margin: auto;
  margin: 8px 0;
  display: flex;
}
button {
  padding: 13px 15px;
  font-size: 15px;
  border: none;
  border-radius: 4px;
  background-color: #000000;
  color: white;
  cursor: pointer;
  font-family: 'Inter',sans-serif;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

button:hover {
  background-color: #4d4d4d;
}

button:disabled {
  background-color: #ccc;
}
.next{width: 50%;}
.cancel{width: 50%; color: #ff0000; background: white; border: 1px solid #ff6666; opacity: 0.8; display: flex; align-items: center; gap: 6px;}
.cancel:hover{background-color: #ffcccc;}

.input-error {border: 1px solid red!important; background-color: #ffe6e6!important;}
.vehicle-error {animation: growAndShrink 0.5s ease-in-out; border: 1px solid red!important;}

#map{ height: 280px; border-radius: 16px;}
.map-container{position: relative;}
.map-distance{
	position: absolute;
    right: 10px;
    bottom: 20px;
    background: white;
    border-radius: 8px;
    z-index: 2;
    padding: 4px 10px;
    opacity: 0.9;
	font-weight: 500;
	font-size: 12px;
}
#vehicles{overflow: hidden;}
#vehicles label{margin: 0;}

.option{ 
margin-bottom: 16px; 
width: 100%; 
height: 90px;
border-radius: 16px; 
border: 1px solid #737373;
font-size: 16px;
overflow: hidden;
padding: 2px;
box-sizing: border-box;
transform: scale(1);
}
/* .option:hover{border: 3px solid #000000;padding: 0;}  */
.option.selected{border: 3px solid #000000;padding: 0;}
.option .vehicle-img {width: 140px; padding: 10px;}
.option input {display: none;width: 0; height: 0;}

 @keyframes growAndShrink {
    0%  {
		transform: scale(1); 
    }
    50% {
        transform: scale(0.8); 
    }
	100% {
        transform: scale(1);
    }
 }
 @keyframes rightLeft {
    0%  {
		transform: translateX(100%);
    }
	100% {
        transform: translateX(0);
    }
 }
 @keyframes topBottom {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}
@media only screen and (max-width: 600px) {
	.next{width: 80%;}
	.cancel{width: 100%;}
	#map{width: 100%;}
	.vehicles-container{width: 100%}
	.step-2{flex-direction: row;}
}


.pagination{
margin-top: 16px;
display: flex;
font-weight: 500;
}

.pagination a{
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
border-left: 1px solid #e6e6e6;
padding: 4px 8px;  
display: flex;
align-items: center;
width: 32px;
justify-content: center;
}

.pagination a:first-child{
border-radius: 4px 0 0 4px;
}

.pagination a:last-child{
border-radius: 0 4px 4px 0;
border-right: 1px solid #e6e6e6;
}

.pagination a.active{
background-color: rgba(175, 201, 244, 0.97);   
}

.pagination a:hover{   
background-color: #ccc;   
}   

.pagination .dots {
    font-weight: bold;
}

.pagination .dots:hover {
    background-color: transparent;
}

.bl-route{display:flex;gap:20px}
.bl-rail{display:flex;flex-direction:column;align-items:center;padding:6px 0}
.bl-dot{width:8px;height:8px;}
.bl-dot--from{background:#0d6efd; border-radius:50%}
.bl-dot--to{background:#111827}
.bl-bar{width:2px;flex:1;min-height:16px;background:#d7dbe2;margin:3px 0}
.bl-places{display:flex;flex-direction:column;justify-content:space-between;gap:14px;font-size:14px;line-height:1.35}

/* ---- Autocomplete pasager (formular booking) — prefix psg- ca să NU se ciocnească cu Google Places (.pac-*) ---- */
.psg-host { position: relative; }
.psg-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 60;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	max-height: 280px;
	overflow-y: auto;
	display: none;
}
.psg-dropdown.is-open { display: block; }
.psg-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 16px;
	cursor: pointer;
}
.psg-item:hover { background: #f5f5f5; }
.psg-text { display: flex; flex-direction: column; min-width: 0; }
.psg-name { font-weight: 600; font-size: 14px; color: #1a1a1a; }
.psg-phone { font-size: 13px; color: #808080; }
.psg-badge {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 10px;
	border-radius: 999px;
	background: #f2f2f2;
	color: #595959;
}