@charset "utf-8";

 
    .container {
      background: #eee;
      padding: 20px;
      border-radius: 8px;
      color: #333;
      width: 80%;
      margin: auto;
      display: flex;
      flex-direction: column;
      gap: 0px;
    }
    h2 { margin-bottom: 15px; }
    .options { margin-bottom: 15px; }
    .options label { margin-right: 15px; font-weight: bold; }
    .form-row { 
      display: flex;
      gap: 10px;
		margin: 13px 3px;
    }
    .form-row input,
    .form-row select {
      padding: 10px;
      border-radius: 4px; 
      flex: 1;
      font-size: 14px;
      box-sizing: border-box;
      border: 1px solid #999;
    }
    .form-row select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background: #fff url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 10px center;
      background-size: 16px;
      color: #333;
      cursor: pointer;
    }
	  
.form-row input[type="date"],.form-row input[type="time"] {
background-color: white;
	color: black;
}
    .toggle { margin: 10px 0; }
    .passengers-box { position: relative; flex: 1; }
    .passengers-popup {
      display: none;
      position: absolute;
      top: 45px;
      right: 0;
      background: #fff;
      color: #000;
      border-radius: 6px;
      padding: 15px;
      width: 250px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
      z-index: 1000;
    }
    .passengers-popup h4 { margin: 0 0 10px; }
    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    .row button {
      background: #008080;
      color: #fff;
      width: 30px;
      height: 30px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }
    .apply-btn {
      background: #008080;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 8px 12px;
      margin-top: 10px;
      cursor: pointer;
      float: right;
    }
    #return-fields { display: none; }
    /* Nueva fila para pasajeros + botón */
    .bottom-actions {
      display: flex;
      gap: 10px;
      margin-top: auto;
    }
	  
  /* Caja de pasajeros */
  .passengers-box {
    position: relative;
    flex: 1;
  }
  /* Input de pasajeros con estilo */
  #passengers {
    padding: 10px;
    border-radius: 4px; 
    font-size: 14px;
    box-sizing: border-box;
    border: 1px solid #999;
    width: 50%;
    background: #fff;
    cursor: pointer;
  }
  /* Popup alineado al input */
  .passengers-popup {
    display: none;
    position: absolute;
    top: 45px;  /* justo debajo del input */
    left: 0;    /* alineado al inicio del input */
    background: #fff;
    color: #000;
    border-radius: 6px;
    padding: 15px;
    width: 50%; /* mismo ancho que el input */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 1000;
  }
	  
    /* ESTILO GENERAL PARA BOTONES GRANDES (como Buscar) */
    .main-btn {
      background: #008080;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 12px 24px;
      cursor: pointer;
      font-weight: bold;
      font-size: 15px;
      transition: background 0.3s ease;
    }
    .main-btn:hover {
      background: #006666;
    }
	  
/* Mobile V 0.0.1  */
	  @media (max-width: 767px){	
    .container { 
     		padding: 20px;
    		border-radius: 8px;
    		color: #333;
    		width: 100%;
    		margin: 0;
    		display: flex;
    		flex-direction: column;
    		gap: 0px;
    }	  
    .form-row {
      display: grid;
      gap: 0px;
    }	  
    .form-row input,
    .form-row select {
      padding: 10px;
		margin: 13px;
      border-radius: 4px; 
      flex: 1;
		width: 80%;
      font-size: 14px;
      box-sizing: border-box;
      border: 1px solid #999;
    }
	/*option for from and where*/
     .options{
			  display: grid;
		  }
	 .options label{
			  margin-top: 13px;
		  }	  
     .bottom-actions {
      display: grid;
      gap: 0px;
      margin-top: auto;
		padding: 13px; 
    }
	 /* Caja de pasajeros */
  	  .passengers-box {
    position: relative;
    flex: 1;
			  width: 80%;
  }
  	 /* Input de pasajeros con estilo */
  	  #passengers {
    padding: 10px;
    border-radius: 4px; 
    font-size: 14px;
    box-sizing: border-box;
    border: 1px solid #999;
    width: 100%;
    background: #fff;
    cursor: pointer;
  }
  	/* Popup alineado al input */
  	 .passengers-popup {
    display: none;
    position: absolute;
    top: 45px;  /* justo debajo del input */
    left: 0;    /* alineado al inicio del input */
    background: #fff;
    color: #000;
    border-radius: 6px;
    padding: 15px;
    width: 100%; /* mismo ancho que el input */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 1000;
  } 
    /* ESTILO GENERAL PARA BOTONES GRANDES (como Buscar) */
    .main-btn {
      background: #008080;
      color: #fff;
      border: none;
      border-radius: 4px;
      padding: 12px auto;
      cursor: pointer;
      font-weight: bold;
      font-size: 15px;
      transition: background 0.3s ease;
		width: 80%;
		margin-top: 21px;
    }
    .main-btn:hover {
      background: #006666;
    }
}


    
    .data {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      padding-top: 21px;
    }
    #select {
      padding: 10px;
      margin: auto 13px;
      background: #008080;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      text-align: center; 
    }
    #select::placeholder {
      color: #fff;
      opacity: 1;
      text-align: center;
    }
    #map { 
      height: 333px;
      width: 333px;
      border-radius: 13px;
    }
    #nombre {
      padding: 10px;
      border-radius: 4px; 
      flex: 1;
      font-size: 14px;
      border: 1px solid #999;
      height: 10vh;
      width: 40%;
    }
    #point {
      position: fixed;
      z-index: 99;
      top: 0;
      left: 0;
      background-color: #ddd;
      width: 100%;
      height: 100vh;
      display: none;
    }
    .bt {
      display: grid;
      justify-content: center;
      align-items: center;
      gap: 10px;
      padding-top: 21px;
		width: 100vw; 
    }
    #search {
      padding: 10px;
      border-radius: 4px;  
      font-size: 14px;
      border: 1px solid #999; 
		width: 50vw;
    }
    #buscar {
      padding: 10px;
      background: #008080;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }
	  #sugerencias {
		width: 50vw;
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  max-height: 150px;
  overflow-y: auto; 
  display: none;
  z-index: 9999;
}
#sugerencias div {
  padding: 8px;
  cursor: pointer;
}
#sugerencias div:hover {
  background: #008080;
  color: #fff;
}
  

.intro-loader{ position:fixed; inset:0; z-index:99999; background:#fff; overflow:hidden; display:flex; align-items:center; justify-content:center; animation: introLift 1.15s cubic-bezier(.76,0,.24,1) forwards 2.8s; }
.intro-inner{ display:flex; flex-direction:column; align-items:center; gap:clamp(24px,5vh,44px); }
.intro-spinner{ position:relative; width:132px; height:132px; display:flex; align-items:center; justify-content:center; }
.intro-spinner::before{ content:""; position:absolute; inset:0; border-radius:50%; border:3px solid #e3f0f0; border-top-color:#008080; border-right-color:#00c0c0; animation: introSpin 1s linear infinite; }
.intro-logo{ width:76px; height:76px; object-fit:contain; }
.intro-words{ display:flex; align-items:baseline; gap:clamp(14px,4vw,42px); overflow:hidden; padding:3px 0; }
.intro-word{ display:inline-block; font-family:"Rubik"; font-weight:500; text-transform:uppercase; letter-spacing:3px; font-size:clamp(15px,2.6vw,26px); line-height:1; opacity:0; transform:translateY(120%); clip-path:inset(100% 0 0 0); animation: introTextIn .85s cubic-bezier(.16,1,.3,1) forwards; }
.intro-word:nth-child(1){ color:#002F2F; animation-delay:.45s; }
.intro-word:nth-child(2){ color:#008080; animation-delay:.95s; }
.intro-word:nth-child(3){ color:#00c0c0; animation-delay:1.45s; }
@keyframes introSpin{ to{ transform:rotate(360deg); } }
@keyframes introTextIn{ 0%{ transform:translateY(120%); opacity:0; clip-path:inset(100% 0 0 0); } 60%{ opacity:1; } 100%{ transform:translateY(0); opacity:1; clip-path:inset(0 0 0 0); } }
@keyframes introLift{ 0%{ transform:translateY(0); clip-path:polygon(0 0,100% 0,100% 100%,0 100%); } 55%{ clip-path:polygon(0 0,100% 0,100% 78%,0 100%); } 100%{ transform:translateY(-100%); clip-path:polygon(0 0,100% 0,100% 0,0 0); visibility:hidden; } }
:root{ --side-pad:5%; }
@media (max-width:1024px){ :root{ --side-pad:2%; } }
.titleSlider{ padding-left:var(--side-pad) !important; padding-right:var(--side-pad) !important; }
.carousel-track{ max-width:none !important; margin-left:var(--side-pad) !important; margin-right:var(--side-pad) !important; }
.itemsInside{ width:auto !important; margin-left:var(--side-pad) !important; margin-right:var(--side-pad) !important; box-sizing:border-box; }
.productsInside{ width:auto !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; padding-left:var(--side-pad) !important; padding-right:var(--side-pad) !important; box-sizing:border-box; }
.footer{ width:auto !important; margin-left:var(--side-pad) !important; margin-right:var(--side-pad) !important; }
.footer .box_footer_father{ padding-left:0 !important; padding-right:0 !important; }
.footer .bottom{ width:auto !important; margin-left:0 !important; margin-right:0 !important; }

/* header/top al mismo padding lateral (5% / 2%) */
#header{ padding-left:var(--side-pad) !important; padding-right:var(--side-pad) !important; box-sizing:border-box; }
.topHeader{ margin:0 !important; width:100% !important; padding-left:var(--side-pad) !important; padding-right:var(--side-pad) !important; box-sizing:border-box; }
header{ padding-left:var(--side-pad) !important; padding-right:var(--side-pad) !important; box-sizing:border-box; }