.mapblockmoblie {
  display: none;
  position: fixed;
  bottom: 20px;
  text-align: center;
  width: 100%;
}
#PcMapBlock {
  z-index: 1;
  background-image: url(/images/mapbg.jpg);
  height: 48px;
  position: absolute;
  bottom: 5%;
  right: 0px;
  border: solid 1px #838383ab;
  border-radius: 5px;
  cursor: pointer;
  max-width: 115px;
  min-width: 85px;
}
.dropdown-menu-right {
  left: auto;
  right: 0;
}
.open > a {
  outline: 0;
}
.btn .caret {
  margin-left: 0;
}
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid \9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.table-results {
  display: table;
  height: auto;
  box-shadow: 1px 0px 10px 0px #ccc;
  background: #fff;
  min-height: 289px;
}
.descriptionSearch {
  height: auto;
  font-size: 12px;
  line-height: 18px;
  padding: 20px 0 20px 20px;
  min-height: 289px;
}
.small-similar {
  font-size: 50%;
  line-height: 0.8;
  font-weight: normal;
}
.descriptionSearch2 {
  height: auto;
  font-size: 12px;
  line-height: 18px;
}
.specialPriceMessage {
  width: auto;
  border-radius: 5px;
}
.cell-results {
  vertical-align: top;
  display: table-cell;
  min-height: 289px;
  float: inherit;
  height: auto;
}
.searchPriceOffers {
  font-size: 14px;
  text-decoration: line-through;
  color: #ccc;
}
.specialPriceList .searchPriceValue {
  color: #aa1c58;
}
.imgMoto {
  height: 289px;
}
.imgMoto img {
  max-height: 250px;
  max-width: 100%;
  display: block;
  margin: 25px auto 0;
  object-fit: contain;
}
.imgMoto-1 img {
  max-height: 220px;
  object-fit: contain;
}
.imgMoto-2 img {
  max-height: 200px;
}
.searchProductPrice {
  padding: 15px 30px 30px 0;
}
.ratingSearch {
  padding: 5px;
  border-radius: 10px 0 10px 0;
  background-color: var(--Green);
  color: #fff;
  text-align: center;
  width: 50px;
  top: 20px;
  position: absolute;
  right: 20px;
  font-size: 16px;
  z-index: 999;
}
.ratingSearchText {
  float: right;
  margin-right: 50px;
  text-align: right;
  color: #807b7b;
  font-style: italic;
  z-index: 999;
}
.cell-results .submit-results {
  position: absolute;
  bottom: 20px;
  width: 93%;
  height: 100%;
  right: 20px;
  vertical-align: bottom;
}
.searchProductPrice-Final {
  text-transform: uppercase;
  height: auto;
  position: absolute;
  bottom: 120px;
  right: 10px;
}
.searchPriceNoOffers {
  height: 30px;
}
.searchProductPrice-Msg {
  height: auto;
  line-height: 16px;
  position: absolute;
  bottom: 97px;
  right: 10px;
}
.searchProductPrice-Msg2 {
  height: auto;
  line-height: 16px;
  position: absolute;
  bottom: 38px;
  right: 10px;
}
.searchProductPrice-Final-Without-Prepayment {
  text-transform: uppercase;
  height: auto;
  position: absolute;
  bottom: 80px;
  right: 10px;
}
.searchProductPrice-Msg-Without-Prepayment {
  height: auto;
  line-height: 16px;
  position: absolute;
  bottom: 50px;
  right: 10px;
}
#loading-ajax {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 999;
  opacity: 0.8;
  left: -10px;
  top: -10px;
}
#loading-ajax-message {
  position: absolute;
  width: 100px;
  height: 75px;
  background-color: #fff;
  z-index: 999;
  border: 1px solid #ccc;
  margin: 0 auto;
  left: 0;
  right: 0;
  margin: 50px auto;
  text-align: center;
  padding: 10px 0 0;
  border-radius: 10px;
  box-shadow: 1px 1px 2px #eee;
}
.logo-photo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
.mapButtonBlock1 {
  height: 58%;
  font-size: 2.6em;
}
.mapButtonBlock2 {
  height: 40%;
  background-color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
  color: #337ab7;
  line-height: 19px;
}
.btn-medium-search {
  width: 100%;
  margin-top: 22px;
  background-color: var(--Green, #419e67);
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  height: 40px;
  line-height: 40px;
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 70px;
}
.btn-medium-search:hover,
.btn-medium-search:active,
.btn-medium-search:visited,
.btn-medium-search:focus {
  color: #fff;
}
.mobile-button-filters {
  display: flex;
  justify-content: center;
  position: fixed;
  z-index: 50;
  opacity: 1;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s;
  user-select: none;
}
.mobile-button-filters div.first {
  border-top-left-radius: 2rem;
  border-bottom-left-radius: 2rem;
  border-right: 1px solid #ccc;
}
.mobile-button-filters div:last-child {
  border-top-right-radius: 2rem;
  border-bottom-right-radius: 2rem;
}
.mobile-button-filters div,
.mobile-button-filters div a {
  display: flex;
  font-size: 12px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 1rem 1.5rem;
  background-color: #333;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
}
#bannerSearch {
  background: #327ab7;
  border: 1px solid #cccccc75;
  color: #fff;
}
.rentToTour {
  color: #327ab7 !important;
  text-decoration: none;
  z-index: 5;
  background-color: #fff;
  border-radius: 5px;
  padding: 10px;
}
.close-modal {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2000;
  opacity: 1;
}
.mapaNew .map_box2 {
  height: 100%;
}
.bs-example-modal-lg {
  overflow: hidden;
}
.color-alert-success {
  color: #3c763d;
}
.mapaNew {
  width: 94%;
  margin: 3% !important;
  height: 94%;
}
#mapaNew .modal-content {
  height: 100%;
  width: 100%;
}
#loadingMapBg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: white;
  opacity: 0.7;
}
#loadingMap {
  position: absolute;
  top: 45%;
  right: 45%;
  font-size: 20px;
  font-weight: bold;
  color: #419e67;
}
#maplist {
  height: 100%;
  background-color: #fff;
  float: left;
  width: 550px;
}
#mapfiltro {
  height: 100%;
  overflow: scroll;
  overflow-x: hidden;
}
#loading-ajax-filters {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 999;
  opacity: 0.8;
  left: -10px;
  top: -10px;
}
#baseMotosInfo {
  height: 100%;
  overflow: scroll;
  overflow-x: hidden;
}
#baseMotosInfo .motoinfoblock {
  box-shadow: 1px 0px 10px 0px #ccc;
  height: 205px;
}
#baseMotosInfo .mototitleblock {
  height: 48px;
}
#baseMotosInfo .mototitle {
  font-weight: bold;
  font-size: 13px;
}
#baseMotosInfo .mototitle small {
  z-index: 1;
}
#baseMotosInfo .motoblockholder {
  height: 108px;
}
#baseMotosInfo .motoimage {
  margin-top: -10px;
}
#baseMotosInfo .motoblockholder {
  height: 108px;
}
#baseMotosInfo .mapprice {
  font-weight: bold;
  font-size: 21px;
  padding-top: 5px;
}
#baseMotosInfo .btnmap {
  background-color: var(--Green, #419e67);
  height: auto;
  text-transform: none;
}
/* ── Left sidebar blocks ──────────────────────────────────────────────── */
#col-left .search-widget {
  background-color: #fff;
  border: 0.75px solid rgba(24, 13, 45, 0.5);
  border-radius: 12px;
  padding: 20px 16px !important;
  margin-bottom: 16px;
  box-sizing: border-box;
  overflow: hidden;
}

/* Remove sidefil white bg bleed on desktop — drawer bg only needed on mobile */
@media (min-width: 992px) {
  #col-left #mySidefil {
    background-color: transparent !important;
  }
}

/* ── Mobile/tablet filters: overlay oculto por defecto (se abre con "Filters", como "Map") ──
   Antes #mySidefil quedaba en el flujo al fondo de la página en móvil y, al
   colapsar el width, dejaba visible un resto (la "x"). Lo convertimos en un
   drawer fijo, oculto por defecto (width:0). openFil()/openFilTablet() lo abren
   (width 100%/50%) y la "x" (closeFil) lo cierra. Reutiliza el JS existente. */
@media (max-width: 991px) {
  #mySidefil {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 10000;
    background-color: #fff;
    transition: width 0.3s ease;
    -webkit-overflow-scrolling: touch;
  }
  #mySidefil .filters-card {
    border: 0;
    border-radius: 0;
    margin: 0;
    min-height: 100%;
  }
}


#col-left .filters-card {
  background-color: #fff;
  border: 0.75px solid rgba(24, 13, 45, 0.5);
  border-radius: 12px;
  padding: 20px 16px;
  margin-top: 16px;
  margin-bottom: 24px;
  box-sizing: border-box;
  overflow: hidden;
}

/* ── Filters block title ──────────────────────────────────────────────── */
.sidefil-filters-title {
  font-family: Graphik, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--Navy, #180D2D);
  letter-spacing: 0.05em;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(24, 13, 45, 0.12);
}

/* individual filter blocks: no separate card, just spacing */
.sidefil #filters [id$="Filter"],
.sidefil #filters [id$="filter"] {
  margin-bottom: 8px;
}

/* ── Filter checkboxes ────────────────────────────────────────────────── */
.sidefil .form-check-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--Navy, #180D2D);
  margin-bottom: 8px;
  line-height: 1;
}

.sidefil .form-check-input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 2px solid var(--Navy, #180D2D);
  border-radius: 2px;
  background-color: #fff;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
  vertical-align: middle;
}

.sidefil .form-check-input[type="checkbox"]:checked {
  background-color: rgba(50, 225, 160, 0.30);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23180D2D' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3.5 3.5L13 4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px;
}

.sidefil .closebtn {
  display: none;
}
#mapboxDrive,
#mapboxDriveview {
  height: 400px;
  width: 100%;
}
.back-search {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #333;
  color: #fff;
  top: 0;
  left: 0;
  z-index: 9;
  overflow: hidden;
}
.extrainfosearch {
  overflow: auto;
  height: 70%;
  width: 100%;
}
.height100percent {
  height: 100%;
}
.modal-review {
  height: 400px;
  background-color: #fff;
}
.content-review {
  height: 400px;
  overflow: auto;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}
.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}
.pagination > li {
  display: inline;
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  line-height: 1.42857143;
  text-decoration: none;
  color: #337ab7;
  background-color: #fff;
  border: 1px solid #ddd;
  margin-left: -1px;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  z-index: 2;
  color: #23527c;
  background-color: #eee;
  border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 3;
  color: #fff;
  background-color: #337ab7;
  border-color: #337ab7;
  cursor: default;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #777;
  background-color: #fff;
  border-color: #ddd;
  cursor: not-allowed;
}
.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
}
.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
}
.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
}
.pagination-sm > li > a,
.pagination-sm > li > span {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
}
.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}
.pager {
  padding-left: 0;
  margin: 20px 0;
  list-style: none;
  text-align: center;
}
.pager li {
  display: inline;
}
.pager li > a,
.pager li > span {
  display: inline-block;
  padding: 5px 14px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 15px;
}
.pager li > a:hover,
.pager li > a:focus {
  text-decoration: none;
  background-color: #eee;
}
.pager .next > a,
.pager .next > span {
  float: right;
}
.pager .previous > a,
.pager .previous > span {
  float: left;
}
.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
  color: #777;
  background-color: #fff;
  cursor: not-allowed;
}

@media only screen and (max-width: 991px) {
  .sidefil .closebtn {
    position: absolute;
    display: block;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    color: #818181;
    text-decoration: none;
    z-index: 101;
  }
  .sidefil {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    background-color: #333;
    overflow-x: hidden;
    transition: 0.5s;
  }
  #mapaNew {
    height: 100%;
    margin: 0px !important;
    padding: 0px !important;
    width: 100%;
  }
  #maplist {
    position: absolute;
    bottom: 35px;
    height: 135px;
    width: 98%;
    margin-right: 1%;
    margin-left: 1%;
  }
  #mapfiltro {
    display: none;
  }
  #baseMotosInfo {
    display: block;
    bottom: 0;
    white-space: nowrap;
    height: 135px;
    overflow-y: hidden;
    overflow-x: scroll;
    z-index: 1;
  }
  .infomapresult {
    width: 100%;
    background-color: #fff;
    white-space: normal;
    padding: 10px;
  }
  #baseMotosInfo .motoinfoblock {
    background-color: #fff;
    margin: 5px 0 5px 5px;
    width: 275px;
    height: 125px;
    display: inline-block;
    float: none;
    border-radius: 5px;
    box-shadow: none;
  }
  .motoinfoblock form {
    margin: 0px;
    height: 100%;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.24),
      0 8px 16px rgba(0, 0, 0, 0.24);
  }
  #baseMotosInfo .mototitleblock {
    white-space: normal;
    padding-left: 5px;
    padding-right: 10px;
    line-height: 18px;
  }
  #baseMotosInfo .mototitle {
    font-size: 13px;
    line-height: 120%;
  }
  #baseMotosInfo .motoblockholder {
    display: none;
  }
  #baseMotosInfo .motoimage {
    height: 130px;
    margin-top: 20px;
    padding-left: 5px;
  }
  #baseMotosInfo .motoimage img {
    width: 100%;
  }
  #baseMotosInfo .motoblockholder {
    display: none;
  }
  .motoinfoblock .text-center {
    text-align: right;
  }
  #baseMotosInfo .mapprice {
    margin-top: 5px;
    padding: 0px;
    font-size: 18px;
  }
  .motoinfoblock .text-center {
    text-align: right;
  }
  #baseMotosInfo .btnmap {
    margin: 3px 0px 0px;
    padding: 1px 7px 1px;
    font-size: 12px;
    line-height: 100%;
    float: unset !important;
    border-radius: 3px;
    height: 24px;
  }
  #loadingMap {
    top: 40%;
    right: 35%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .searchFilter,
  .searchButton {
    height: 55px;
  }
}
@media (max-width: 767px) {
  .logo-photo {
    bottom: 20px;
    top: inherit;
  }
  .modal-review {
    height: 100%;
  }
  .descriptionSearch {
    padding: 20px 20px 0;
  }
  .cell-results {
    float: left;
    height: 100%;
    min-height: auto;
  }
  .searchProductPrice-Final {
    position: relative;
    bottom: -5px;
    right: 0;
  }
  .searchProductPrice {
    padding: 0px 10px 10px 10px;
  }
  .cell-results .submit-results {
    position: relative;
    top: inherit;
    width: 100%;
    height: auto;
    bottom: 0;
    right: 0;
  }
  .imgMoto {
    overflow: hidden;
    height: 190px;
    max-width: 100%;
  }
  .imgMoto img {
    height: auto;
    max-width: 100%;
    min-height: 129px;
    max-height: 170px;
    width: auto;
    margin: 10px auto 0;
  }
  .ratingSearch {
    top: -30px;
    right: 10px;
    margin-right: 0;
    z-index: 9;
  }
  .ratingSearchText {
    padding-top: 4px;
    margin-right: 0px;
    z-index: 9;
  }
  .btn-medium-search {
    width: 50%;
  }
  .btn-flip {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 999;
  }
  .btn-flip-close {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 999;
    color: #fff;
  }
  .searchProductPrice-Final-Without-Prepayment {
    position: relative;
    bottom: -8px;
    right: 0;
  }
  .searchFilter,
  .searchButton {
    height: 55px;
  }
}

/* =====================================================================
   Restyling Tataki — Card listado de motos
   Scope: aplica únicamente a las cards dentro de .motorcycleContainer
   ===================================================================== */

/* 1. Contorno y caja del card (matches #col-left sidebar) ---------- */
.motorcycleContainer.table-results {
  box-shadow: none;
  border: 0.75px solid rgba(24, 13, 45, 0.5);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

/* 2. Tipografía y color del título ---------------------------------- */
.motorcycleContainer .descriptionSearch {
  color: var(--Navy);
  font-size: 14px;
  line-height: 18px;
}
.motorcycleContainer .descriptionSearch h2#search-results-title,
.motorcycleContainer .descriptionSearch h2#search-results-title a,
.motorcycleContainer .descriptionSearch h2#search-results-title a.color-333 {
  color: var(--Navy);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
}
.motorcycleContainer .descriptionSearch .small-similar {
  color: rgba(24, 13, 45, 0.5);
  font-weight: 400;
}

/* 3. Localización (.mapSearch) -------------------------------------- */
.motorcycleContainer .mapSearch .icon-location.color-red {
  color: var(--Green);
}
.motorcycleContainer .mapSearch u {
  text-decoration: none;
  color: var(--Navy);
  font-weight: 500;
}

/* 4. Bloque "Incluye" / extras -------------------------------------- */
.motorcycleContainer .descriptionSearch strong {
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(24, 13, 45, 0.5);
  letter-spacing: 0.04em;
  font-weight: 600;
}
.motorcycleContainer .icoIncluded {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(24, 13, 45, 0.1);
  padding: 4px;
  object-fit: contain;
  background: #fff;
  margin-right: 4px;
}

/* 5. Imagen --------------------------------------------------------- */
.motorcycleContainer .imgMoto img {
  border-radius: 8px;
  max-height: 210px;
  margin: 15px auto 0;
  object-fit: contain;
}

/* 6. Badges sobre imagen y banners ---------------------------------- */
.motorcycleContainer .specialPriceMessage {
  border-radius: 70px;
  padding: 4px 12px;
  font-size: 12px;
  display: inline-block;
  width: auto;
}
.motorcycleContainer .logo-best-offer {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
}
.motorcycleContainer .logo-best-offer img {
  max-height: 40px;
  width: auto;
}
.motorcycleContainer .additional_info {
  background-color: var(--Navy);
  color: #fff;
  padding: 4px 10px;
  border-radius: 70px;
  font-size: 12px;
  display: inline-block;
}

/* 7. Rating pill (.ratingSearch + .ratingSearchText) ---------------- */
.motorcycleContainer .ratingSearch {
  width: auto;
  min-width: 50px;
  height: 28px;
  padding: 4px 10px 4px 26px;
  line-height: 20px;
  border-radius: 70px;
  background: #fff;
  color: var(--Navy);
  border: 1px solid rgba(24, 13, 45, 0.1);
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  top: 16px;
  right: 16px;
}
.motorcycleContainer .ratingSearch.bRClass,
.motorcycleContainer .ratingSearch.nRClass,
.motorcycleContainer .ratingSearch.gRClass,
.motorcycleContainer .ratingSearch.eRClass {
  background: #fff;
  color: var(--Navy);
}
.motorcycleContainer .ratingSearch::before {
  content: "\2605";
  color: var(--Green);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 1;
}
.motorcycleContainer .ratingSearchText {
  font-style: normal;
  color: rgba(24, 13, 45, 0.7);
  font-size: 12px;
  line-height: 16px;
  margin-right: 16px;
  margin-top: 24px;
}

/* 8. Sección de precio ---------------------------------------------- */
.motorcycleContainer .searchProductPrice {
  padding: 20px 20px 20px 0;
}
.motorcycleContainer .searchPriceOffers {
  color: rgba(24, 13, 45, 0.5);
  font-size: 14px;
  font-weight: 400;
  text-decoration: line-through;
}
.motorcycleContainer .searchPriceValue {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}
.motorcycleContainer .searchPriceOffers + .searchPriceValue,
.motorcycleContainer .searchPriceOffers ~ .searchPriceValue,
.motorcycleContainer.specialPriceList .searchPriceValue {
  color: #e92660;
}
.motorcycleContainer .searchPriceDiaValue {
  font-size: 12px;
  color: rgba(24, 13, 45, 0.7);
  font-weight: 600;
}

/* 9. Botón "+ INFO" ------------------------------------------------- */
.motorcycleContainer .btn-medium-search {
  font-family: Graphik, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: uppercase;
  height: 45px;
  line-height: 45px;
  border-radius: 70px;
  background-color: var(--Green);
  color: #fff;
  transition: background-color 0.3s ease;
}
.motorcycleContainer .btn-medium-search:hover,
.motorcycleContainer .btn-medium-search:focus,
.motorcycleContainer .btn-medium-search:active {
  background-color: var(--Navy);
  color: #fff;
}

/* 10. Texto de prepago ("Pay X now and the rest in destination") --- */
.motorcycleContainer .imgMoto .text-center {
  font-size: 12px;
  color: rgba(24, 13, 45, 0.7);
  font-weight: 400;
  margin-top: 8px;
  padding: 0 12px 8px;
  line-height: 1.3;
}
.motorcycleContainer .imgMoto .text-center strong {
  font-weight: 500;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(24, 13, 45, 0.7);
}
.motorcycleContainer .imgMoto .text-center .fa-lightbulb-o {
  color: var(--Green);
  margin-right: 4px;
}

/* 12. Back-search (card "info" en mobile al pulsar (i)) ------------- */
.motorcycleContainer .back-search {
  background: var(--Navy);
  border-radius: 12px;
}
.motorcycleContainer .back-search .search-results-title {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.2;
  color: #fff;
}
.motorcycleContainer .back-search .search-results-title small {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
}
.motorcycleContainer .back-search .alert.alert-success {
  border-radius: 8px;
  background-color: rgba(65, 158, 103, 0.15);
  border-color: rgba(65, 158, 103, 0.35);
  color: var(--Green);
  margin-top: 0;
}
.motorcycleContainer .back-search .list-group,
.motorcycleContainer .back-search .list-mobile {
  background: transparent;
  border: none;
  padding-left: 0;
  margin-bottom: 0;
}
.motorcycleContainer .back-search .list-group li {
  color: #fff;
  background: transparent;
  border: none;
  padding: 8px 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.4;
}
.motorcycleContainer .back-search .extrainfosearch-price .searchPriceOffers {
  color: rgba(255, 255, 255, 0.5);
}
.motorcycleContainer .back-search .extrainfosearch-price .searchPriceValue {
  color: #e92660;
}
.motorcycleContainer .back-search .btn-flip-close .icon-cancel-circled {
  color: #fff;
  opacity: 0.85;
}

/* 11. Responsive (max-width: 767px) --------------------------------- */
@media (max-width: 767px) {
  .motorcycleContainer.table-results {
    border-radius: 12px;
    border: 1px solid rgba(24, 13, 45, 0.1);
  }
  .motorcycleContainer .ratingSearch {
    top: 12px;
    right: 12px;
  }
  .motorcycleContainer .btn-medium-search {
    width: 50%;
  }

  /* Back-search: permitir scroll interno si el contenido excede el alto
     del card frontal, y alinear precio + botón en la misma fila inferior. */
  .motorcycleContainer .back-search {
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 12px;
  }
  .motorcycleContainer .back-search .extrainfosearch {
    height: auto;
    overflow: visible;
  }
  .motorcycleContainer .back-search .extrainfosearch-price {
    position: relative;
    padding-bottom: 8px;
    min-height: 60px;
  }
  .motorcycleContainer .back-search .extrainfosearch-price .searchPriceOffers,
  .motorcycleContainer .back-search .extrainfosearch-price .searchPriceValue,
  .motorcycleContainer .back-search .extrainfosearch-price .priceMoto {
    width: 50%;
    float: left;
    clear: left;
  }
  .motorcycleContainer .back-search .extrainfosearch-price .submit-results {
    position: absolute;
    right: 0;
    bottom: 8px;
    width: 50%;
    padding: 0;
    margin: 0;
    overflow: visible;
  }
  .motorcycleContainer .back-search .extrainfosearch-price .submit-results .btn-medium-search {
    display: block;
    position: relative;
    bottom: auto;
    right: auto;
    width: 100%;
    float: none;
    margin: 0;
    height: 45px;
    line-height: 45px;
  }
}

/* =====================================================================
   Restyling Tataki — Filter row "Filter by" + Banners informativos
   ===================================================================== */

/* 13. Fila top "Filter by" (#brandsTop) ----------------------------- */
#brandsTop {
  font-family: Graphik, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--Navy);
  align-items: center;
}
#brandsTop > .bold {
  color: var(--Navy);
  font-weight: 600;
  font-size: 14px;
}

/* Botones reemplazan su aspecto de .btn-link por una "fila checkbox" */
#brandsTop .brands {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: var(--Navy);
  font-family: Graphik, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
}
#brandsTop .brands:hover,
#brandsTop .brands:focus,
#brandsTop .brands:active {
  color: var(--Green);
  text-decoration: none;
  background: transparent;
  outline: none;
}

/* Forzar visibilidad del icono (que es el "cuadrado" del checkbox)
   aunque venga marcado con .hidden-xs/.hidden-sm. El propio #brandsTop
   sigue siendo .hidden-xs (sólo se ve en sm+). */
#brandsTop .brands i.hidden-xs,
#brandsTop .brands i.hidden-sm,
#brandsTop .brands i {
  display: inline-block !important;
}

/* Cuadrado del checkbox — replica del estilo global de forms.css */
#brandsTop .brands i.icon-check-empty,
#brandsTop .brands i.icon-check {
  position: relative;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 2px solid var(--Navy);
  border-radius: 2px;
  box-sizing: border-box;
  background-color: transparent;
  vertical-align: middle;
  font-size: 0;
  line-height: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Anular el glyph del icon-font (sin perder el elemento) */
#brandsTop .brands i.icon-check-empty::before,
#brandsTop .brands i.icon-check::before {
  content: '';
}

/* Estado marcado: fondo verde translúcido + checkmark SVG Navy
   (mismo data-URI exacto que forms.css para paridad con el sidebar) */
#brandsTop .brands i.icon-check {
  background-color: rgba(50, 225, 160, 0.30);
  border-color: var(--Navy);
}
#brandsTop .brands i.icon-check::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23180D2D' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center center;
}

/* Dropdown "Other brands" — sólo color de caret, no profundizar */
#brandsTop ul.btn .caret {
  color: var(--Navy);
}
#brandsTop ul.btn .dropdown-menu .brands {
  color: var(--Navy);
}

/* 14. Banners informativos (Special offer / No registration / Cars) - */

/* Override Bootstrap .alert.alert-success scoped a esta vista. El fichero
   homesearch-7.css sólo se carga en /home/search, así que el override no
   se fuga a otras páginas. */
.alert.alert-success {
  background-color: rgba(65, 158, 103, 0.12);
  border: 1px solid rgba(65, 158, 103, 0.3);
  color: var(--Green);
  border-radius: 8px;
  padding: 14px 16px;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: 10px;
  margin-bottom: 0;
}

.alert.alert-success .color-alert-success {
  color: var(--Green);
}

.alert.alert-success h5 {
  font-family: Graphik, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--Green);
  margin: 0;
}

.alert.alert-success h5 small {
  font-size: 14px;
  font-weight: 400;
}

.alert.alert-success h5 small.bold {
  font-weight: 600;
}

.alert.alert-success h5 small.small-similar {
  font-size: 12px;
  opacity: 0.85;
  font-weight: 400;
}

/* Último contenedor de la fila de banners: quitar el padding-right
   residual de Bootstrap para que el banner derecho quede flush con el
   borde de la zona de contenido, igual que el primero queda flush por
   la izquierda gracias a pl-0. */
div.col-xs-12.nopadding > div.hidden-xs.pl-0:last-child {
  padding-right: 0;
}

/* 16. Título de página "Motorcycle rentals in ..." ------------------ */
h1.alquiler_title_pas2 {
  font-family: Graphik, Helvetica, Arial, sans-serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
}

/* 17. Icono "info" (.btn-flip) en la card del listado --------------- */
/* Replica del botón "info" verde de rental-motor-bikes-front (Tataki):
   círculo verde sólido con la "i" como hueco transparente (el glyph del
   icon-font es una sola tinta — al pintarlo en var(--Green), el cutout
   de la "i" muestra el fondo blanco del card). */
.motorcycleContainer .btn-flip,
.motorcycleContainer i.icon-info-circled.btn-flip {
  color: var(--Green);
  padding: 6px;
  line-height: 1;
}

/* 18. Banner "We have the best motorcycle tours" (#bannerSearch) ---- */
/* Promo intercalada entre cards de moto. Pasa de azul legacy (#327ab7)
   a Navy con CTA verde — mismo lenguaje que el bottom-bar mobile y la
   back-search de las cards. Border-radius 12px para casar con las
   cards. Tipografía Graphik. */
#bannerSearch {
  background: var(--Navy);
  border: none;
  color: #fff;
  border-radius: 12px;
  padding: 20px 24px;
  font-family: Graphik, Helvetica, Arial, sans-serif;
}
#bannerSearch b {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
}

/* CTA "view tours" — pill verde, hover Navy invertido */
#bannerSearch .rentToTour,
.rentToTour {
  display: inline-block;
  background-color: var(--Green);
  color: #fff !important;
  font-family: Graphik, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0;
  text-decoration: none;
  padding: 10px 24px;
  border-radius: 70px;
  border: 2px solid var(--Green);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
#bannerSearch .rentToTour:hover,
#bannerSearch .rentToTour:focus,
.rentToTour:hover,
.rentToTour:focus {
  background-color: #fff;
  color: var(--Green) !important;
  border-color: #fff;
  text-decoration: none;
}

/* 19. Cards de moto del mapa (#baseMotosInfo .motoinfoblock) -------- */
/* Cards usadas en la vista de mapa — columna lateral en desktop y
   scroll horizontal en mobile. Alineamos con el lenguaje de las cards
   del listado: radius 12px, borde sutil rgba navy 0.1 (sin sombra
   pesada), tipografía Graphik, precio en verde brand, botón pill
   verde con hover Navy. */

/* Desktop (≥ 992px) */
#baseMotosInfo .motoinfoblock {
  box-shadow: none;
  border: 1px solid rgba(24, 13, 45, 0.1);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  height: auto;
  min-height: 160px;
  padding: 12px;
}
#baseMotosInfo .mototitleblock {
  height: auto;
  margin-top: 0;
}
#baseMotosInfo .mototitle {
  font-family: Graphik, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--Navy);
  display: inline-block;
}
#baseMotosInfo .mototitle small {
  font-size: 11px;
  font-weight: 400;
  color: rgba(24, 13, 45, 0.5);
  display: block;
  margin-top: 2px;
}
#baseMotosInfo .motoblockholder {
  display: none;
}
#baseMotosInfo .motoimage {
  margin-top: 0;
}
#baseMotosInfo .motoimage img {
  border-radius: 8px;
}
#baseMotosInfo .mapprice {
  font-family: Graphik, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  padding-top: 0;
  color: var(--Green);
}
#baseMotosInfo .btnmap,
#baseMotosInfo input.btnmap {
  background-color: var(--Green);
  color: #fff;
  font-family: Graphik, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  border: none;
  border-radius: 70px;
  padding: 8px 18px;
  height: auto;
  line-height: 1.2;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
#baseMotosInfo .btnmap:hover,
#baseMotosInfo .btnmap:focus,
#baseMotosInfo input.btnmap:hover,
#baseMotosInfo input.btnmap:focus {
  background-color: var(--Navy);
  color: #fff;
}

/* Mobile (≤ 991px) — scroller horizontal. Reescribimos el layout como
   grid 2-col: imagen izquierda (todo el alto), título arriba derecha,
   precio + botón apilados debajo derecha. Reseteamos floats Bootstrap. */
@media only screen and (max-width: 991px) {
  #baseMotosInfo {
    height: auto;
    max-height: 160px;
  }
  #baseMotosInfo .motoinfoblock {
    background-color: #fff;
    border: 1px solid rgba(24, 13, 45, 0.1);
    border-radius: 12px;
    box-shadow: none;
    padding: 10px;
    width: 280px;
    height: auto;
    min-height: 110px;
  }
  #baseMotosInfo .motoinfoblock form {
    display: grid;
    grid-template-columns: 90px 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "image title"
      "image price"
      "image button";
    column-gap: 12px;
    row-gap: 0;
    align-items: center;
    align-content: space-between;
    box-shadow: none;
    border-radius: 12px;
    height: 100%;
  }
  /* Reset floats/widths heredados de Bootstrap en todos los hijos del form */
  #baseMotosInfo .motoinfoblock form > * {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #baseMotosInfo .motoblockholder {
    display: none;
  }
  /* Imagen — ocupa toda la altura del card a la izquierda */
  #baseMotosInfo .motoimage {
    grid-area: image;
    height: auto !important;
    align-self: center;
  }
  #baseMotosInfo .motoimage img {
    width: 100% !important;
    max-height: 90px;
    height: auto;
    object-fit: contain;
    margin: 0 !important;
    display: block;
  }
  /* Título arriba derecha */
  #baseMotosInfo .mototitleblock {
    grid-area: title;
    margin-top: 0 !important;
    text-align: left !important;
  }
  #baseMotosInfo .mototitle {
    font-size: 13px;
    line-height: 1.25;
  }
  #baseMotosInfo .mototitle small {
    font-size: 10px;
    display: block;
  }
  /* Bloque precio + botón → último hijo. Lo extendemos en filas 2-3 col 2
     y lo convertimos en flex column para que precio y botón apilen limpio. */
  #baseMotosInfo .motoinfoblock form > div:last-child {
    grid-row: 2 / 4;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  /* Wrappers internos del precio y del botón — reset y align */
  #baseMotosInfo .motoinfoblock form > div:last-child > * {
    width: auto !important;
    padding: 0 !important;
    text-align: left !important;
  }
  #baseMotosInfo .motoinfoblock form > div:last-child .color-rmb {
    width: auto !important;
    padding: 0 !important;
  }
  #baseMotosInfo .mapprice {
    font-size: 18px;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }
  #baseMotosInfo .btnmap,
  #baseMotosInfo input.btnmap {
    font-size: 11px;
    padding: 6px 14px;
    height: auto;
    border-radius: 70px;
    margin: 0;
    line-height: 1.2;
    float: none !important;
  }
}