:root{
    --brand-secundary:#ffffff;
    --brand-primary:#0158c3
  }

  .booking-wrap {background: linear-gradient(180deg, #dceaff, #dfebff);min-height:100vh;}


  .brand-title{ font-weight:800; letter-spacing:1px; font-size:22px; line-height:1; }
  .brand-subtitle{ font-size:11px; opacity:.8; letter-spacing:.6px; margin-top:2px; }
  .book-now{ font-weight:700; font-size:24px; }

  .pax-input{ width:90px; }

  .vehicle-row{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
  }

  .vehicle-pill{
    background: #ddeaff;
    border: 2px solid var(--brand-primary);
    border-radius:999px;
    padding:10px 14px;
    min-width:240px;
    text-align:left;
    transition:transform .08s ease, box-shadow .12s ease, background .12s ease;
  }
  .vehicle-pill:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.08); }

  .vehicle-pill.is-active{
    background: var(--brand-primary);
    border-color: var(--brand-primary);
  }

  .vehicle-pill-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }

  .vehicle-name{font-weight:800;font-size:13px;letter-spacing:.2px;padding-left: 20px;}
  .vehicle-pax{font-size:12px;opacity:.8;margin-top:2px;padding-left: 20px;}

  .vehicle-img{
    width: 50px;
    height:34px;
    object-fit:contain;
    padding: 4px;
    border-radius: 8px;
  }
.vehicle-pill.is-active img {
    background: #e7e7e7;
}
  .vehicle-img-placeholder{
    display:flex; align-items:center; justify-content:center;
    border:1px dashed rgba(0,0,0,.2);
    border-radius:10px;
  }

  .vehicle-pill.is-active .vehicle-pax,
  .vehicle-pill.is-active .vehicle-name{color: #ffffff;}

/* AÑADE ESTO a tu <style> */
.dd-pill{
  position:relative;
  border: 2px solid var(--brand-primary);
  border-radius:999px;
  background:#fff;
}
.dd-btn{
  width:100%;
  border:0;
  background: #ddebff;
  padding:12px 16px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:700;
  text-align:left;
}
.dd-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dd-caret{ flex:0 0 auto; color:#222; }

.dd-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
  z-index:30;
  overflow:hidden;
}
.dd-item{
  width:100%;
  border:0;
  background:#fff;
  padding:12px 16px;
  text-align:left;
}
.dd-item:hover{ background:#f6f7f9; }
.dd-divider{ height:1px; background:rgba(0,0,0,.08); }


/* AÑADE ESTO al <style> */
.rt-pill{
  min-width:220px;
  border: 2px solid var(--brand-primary);
  border-radius:999px;
  padding:12px 18px;
  font-weight:800;
  background:#fff6db;
}
.rt-pill.is-active{
  background: var(--brand-primary);
}

.dt-pill{
  position:relative;
  border: 2px solid var(--brand-primary);
  border-radius:999px;
  background: #deebff;
  padding: 0px 44px 0px 14px;
}
.dt-input{
  width:100%;
  border:0;
  outline:0;
  background: #deebff;
  padding:10px 0;
  font-weight:700;
}
.capa-returne {
    background: #ffffff00;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 2;
}
.dt-icon{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
}
.dt-pill.is-disabled{
  opacity:.55;
}

/* AÑADE ESTO al <style> */
.pill-input{
  border: 2px solid var(--brand-primary);
  border-radius:999px;
  background: #dfebff;
  padding:10px 16px;
}
.pill-control{
  width:100%;
  border:0;
  outline:0;
  background: #dfebff;
  font-weight:700;
  padding: 0px 0;
}

.btn-confirm{
  width:100%;
  border:0;
  border-radius:999px;
  padding:16px 18px;
  font-weight:900;
  letter-spacing:.5px;
  background: var(--brand-primary);
  color: #fff;
}
.btn-confirm:disabled{
  opacity:.55;
  cursor:not-allowed;
}


/* Estilos para el flujo de pasos */
.btn-confirm:disabled {background: #797777;cursor: not-allowed;}
.steps-indicator span { font-size: 0.9rem; transition: all 0.3s; }
.card { border-radius: 16px; }
.rt-pill {border: 2px solid var(--brand-primary);background: #ddeaff;padding: 10px;border-radius: 10px;transition: 0.3s;border-radius: 24px;}
.rt-pill.is-active {background: var(--brand-primary);color: #ffffff;}

.bt-outline-confirm {
    background: var(--brand-primary);
    border: 2px solid var(--brand-primary);
    max-width: 280px;
}

.custom-suggest-list {
    position: absolute;
    z-index: 1000;
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0 0 12px 12px;
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
}
.custom-suggest-list li {
    padding: 10px 15px;
    cursor: pointer;
    color: #666; /* Color gris */
    border-bottom: 1px solid #f1f1f1;
    font-size: 0.9rem;
}
.custom-suggest-list li:hover {
    background-color: #f8f9fa;
    color: #333;
}
.pill-input { position: relative; } /* Asegura el posicionamiento de la lista */

#square-card-wrapper {
    position: relative;
    min-height: 120px; /* Evita que el contenedor colapse mientras carga */
    background: #fff;
    border-radius: 12px;
    border: 1px solid #ddd;
    padding: 15px;
    background: #deebff;
}

.square-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #666;
}

.spinner-border-sm {
    margin-right: 8px;
}
img.logsq.my-3 {
    width: 200px;
    margin: 10px auto 30px auto !important;
    display: block;
}

h3.label-data {
    font-weight: 800;
    font-size: 16pt;
}
.logo-sq {
    width: 190px !important;
    margin: 0px auto 20px auto  !important;
    display: block;
}
.logo{
      width: 190px !important;

}
.dt-pill.inactive {
    opacity: 0.15;
    cursor: no-drop;
}
@media (max-width: 991.98px) {
  .logo-sq,.logo {
    width: 150px !important;
}
}