/* Colores personalizados — tema oscuro #0E1026 */
:root {
    --primary-color: #0E1026;
    --secondary-color: #fff;
    --surface-color: #161833;
    --surface-light: #1E2040;
    --lighten-1: #161833;
    --lighten-2: #1E2040;
    --lighten-3: #262849;
    --lighten-4: #2E3052;
    --lighten-5: #36385B;
    --darken-1: #0E1026;
    --darken-2: #0A0C1E;
    --darken-3: #060714;
    --darken-4: #03040A;
    --text-color: #ffffff;
    --text-secondary-color: #A5ABB7;
    --icon-color: #A5ABB7;
    --text-color-vehicle: #ffffff;
    --border-color: rgba(255, 255, 255, 0.2);
    --header-bg: #141833;
    --header-accent: #1A1D3A;
    --ibizamobility-nav-bg: #141833;
    /* Recorte lateral de fotos de coche (vehiculos.php y extras.php; por lado; 0 = sin recorte) */
    --vehicle-image-crop-sides: 10.5%;
    /* Mini carrusel de extras (imágenes scrapeadas) */
    --carousel-mini-stage-bg: #0E1025;
}

/* Fondo global */
html,
body,
.bodycontainer,
.section,
.container {
    background-color: var(--darken-1) !important;
    color: var(--text-color);
}

/* Header — tono ligeramente más claro que el contenido */
.navbar-fixed nav.ibizamobility.darken-1 {
    background-color: var(--header-bg) !important;
    color: var(--secondary-color);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.navbar-fixed nav.ibizamobility.darken-1 .nav-wrapper {
    background-color: transparent !important;
}

.ibizamobility {
    background-color: var(--darken-1) !important;
}

.dtp-header,
.dtp-actual-month,
.dtp-actual-num {
    color: var(--text-color) !important;
}

.navbar-fixed nav.ibizamobility.darken-1,
.nav-wrapper ul li a {
    color: var(--secondary-color) !important;
}

.input-field .material-icons.prefix.ibizamobility-text {
    color: var(--text-color) !important;
}

.ibizamobility.lighten-1,
.ibizamobility-text.text-lighten-1 {
    background-color: var(--lighten-1) !important;
    color: var(--text-color) !important;
}

.ibizamobility.lighten-2,
.ibizamobility-text.text-lighten-2 {
    background-color: var(--lighten-2) !important;
    color: var(--text-color) !important;
}

.ibizamobility.lighten-3,
.ibizamobility-text.text-lighten-3 {
    background-color: var(--lighten-3) !important;
    color: var(--text-color) !important;
}

.ibizamobility.lighten-4,
.ibizamobility-text.text-lighten-4 {
    background-color: var(--lighten-4) !important;
    color: var(--text-color) !important;
}

.ibizamobility.footer-copyright > .container {
    color: var(--text-color) !important;
}

.ibizamobility.lighten-5,
.ibizamobility-text.text-lighten-5 {
    background-color: var(--lighten-5) !important;
    color: var(--text-color) !important;
}

.ibizamobility.darken-1,
.ibizamobility-text.text-darken-1 {
    background-color: var(--darken-1) !important;
    color: var(--text-color) !important;
}

.ibizamobility.darken-2,
.ibizamobility-text.text-darken-2 {
    background-color: var(--darken-2) !important;
    color: var(--text-color) !important;
}

.ibizamobility.darken-3,
.ibizamobility-text.text-darken-3 {
    background-color: var(--darken-3) !important;
    color: var(--text-color) !important;
}

.ibizamobility.darken-4,
.ibizamobility-text.text-darken-4 {
    background-color: var(--darken-1) !important;
    color: var(--text-color) !important;
}

.button-collapse i {
    color: var(--icon-color) !important;
}

/* Pasos del wizard — misma paleta que booking-summary (resumen de búsqueda) */
:root {
    --step-line-progress: var(--surface-light);
    --step-line-future: #e8eaed;
    --step-bubble-pending: #ffffff;
    --step-bubble-pending-border: #e8eaed;
    --step-bubble-pending-text: #9e9e9e;
    --step-bubble-done-bg: var(--surface-light);
    --step-bubble-active-bg: var(--darken-1);
    --step-bubble-active-border: rgba(255, 255, 255, 0.55);
    --step-bubble-done-text: #ffffff;
}

body.page-vehiculos .bodycontainer .mispasos,
body.page-extras .bodycontainer .mispasos {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.mispasos .name {
    color: #ffffff !important;
    opacity: 1 !important;
}

.mispasos .done .name,
.mispasos .active .name {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 600;
}

/* Ocultar conectores originales en .step (se solapaban con burbujas vecinas) */
.mispasos .step:before,
.mispasos .step:after {
    display: none !important;
}

/* Líneas en el li, detrás de todas las burbujas */
.mispasos li {
    position: relative;
    z-index: 0;
}

.mispasos li:not(:first-child)::before,
.mispasos li:not(:last-child)::after {
    content: "";
    display: block;
    position: absolute;
    bottom: calc(1.3em - 0.3em);
    width: 50%;
    height: 3px;
    z-index: 0;
    pointer-events: none;
    background-color: var(--step-line-future);
}

.mispasos li:not(:first-child)::before {
    left: 0;
}

.mispasos li:not(:last-child)::after {
    right: 0;
}

/* Tramo ya recorrido */
.mispasos li.done:not(:first-child)::before,
.mispasos li.done:not(:last-child)::after,
.mispasos li.active:not(:first-child)::before {
    background-color: var(--step-line-progress) !important;
}

/* Burbujas siempre por encima de las líneas */
.mispasos .step {
    position: relative;
    z-index: 2 !important;
    background-color: var(--step-bubble-pending) !important;
    border: 1px solid var(--step-bubble-pending-border) !important;
    color: var(--step-bubble-pending-text) !important;
    opacity: 1 !important;
}

.mispasos .step span {
    position: relative;
    z-index: 1;
    color: inherit !important;
    opacity: 1 !important;
}

.mispasos .done .step {
    background-color: var(--step-bubble-done-bg) !important;
    border-color: var(--step-bubble-done-bg) !important;
    color: var(--step-bubble-done-text) !important;
}

.mispasos .active .step {
    background-color: var(--step-bubble-active-bg) !important;
    border: 2px solid var(--step-bubble-active-border) !important;
    color: var(--step-bubble-done-text) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.25);
}

.mispasos .done .step span,
.mispasos .active .step span,
body .bodycontainer .mispasos li.done .step span,
body .bodycontainer .mispasos li.active .step span {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Resumen de búsqueda (booking-summary) */
body.page-vehiculos .booking-summary__bar,
body.page-extras .booking-summary__bar {
    background-color: var(--surface-color) !important;
    border-color: var(--border-color) !important;
}

/* Bloque buscador: tarjeta para diferenciar del fondo */
.page-index > .index-main > .bodycontainer {
    background-color: var(--surface-color) !important;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
}

.page-index > .index-main > .bodycontainer .divider {
    background-color: rgba(255, 255, 255, 0.10) !important;
}

body.page-extras .contenedor_extras {
    padding: 14px 14px 10px !important;
}

body.page-extras .extras-sidebar__summary {
    background-color: transparent !important;
    background: transparent !important;
}

body.page-extras .contenedor_extras > .divider,
body.page-extras #listado_extras .divider,
body.page-extras .miresumen .divider {
    background-color: rgba(255, 255, 255, 0.10) !important;
}

#btnLogin {
    color: var(--text-color) !important;
}

/* Botones principales — estilo ghost */
.btn.ibizamobility.darken-1,
#btnBuscar.ibizamobility {
    background: transparent !important;
    border: 1px solid var(--text-color) !important;
    color: var(--text-color) !important;
    border-radius: 50px;
}

.btnfinalizar.ibizamobility {
    background-color: var(--surface-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: var(--text-color) !important;
    border-radius: 50px;
}

.btn.ibizamobility.darken-1:hover,
#btnBuscar.ibizamobility:hover,
.btnfinalizar.ibizamobility:hover {
    background-color: var(--lighten-3) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

#btnBuscar {
    font-size: 12px;
}

#btnBuscar i {
    font-size: 14px;
    margin-left: 0;
}

/* Formularios e inputs */
.input-field label,
.input-field .helper-text,
label {
    color: var(--text-secondary-color) !important;
}

.input-field input,
.input-field textarea,
.select-wrapper input.select-dropdown,
input:not([type]),
input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=time],
input[type=date],
input[type=datetime-local],
input[type=tel],
input[type=number],
input[type=search] {
    color: var(--text-color) !important;
    border-bottom-color: var(--border-color) !important;
}

.input-field input:focus,
.select-wrapper input.select-dropdown:focus {
    border-bottom-color: var(--text-color) !important;
    box-shadow: 0 1px 0 0 var(--text-color) !important;
}

.input-field .prefix.active {
    color: var(--text-color) !important;
}

/* Selectores de localización, fechas y horas */
.input-field .prefix.material-icons,
.input-field i.prefix {
    color: var(--text-color) !important;
}

.input-field .select-wrapper input.select-dropdown,
.select-wrapper input.select-dropdown,
.select-wrapper:has(#oev) input.select-dropdown,
.select-wrapper:has(#orv) input.select-dropdown,
.select-wrapper:has(#h1) input.select-dropdown,
.select-wrapper:has(#h2) input.select-dropdown,
.select-wrapper:has(#edad) input.select-dropdown,
.select-wrapper:has(#tipoVehiculoBuscar) input.select-dropdown,
input#f1,
input#f2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Bloque Recogida / Devolución */
.input-field.col.s12.m6.l4 .input-field .select-wrapper input.select-dropdown,
.input-field.col.s12.m6.l4 .select-wrapper input.select-dropdown {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.input-field.col.s12.m6.l4 .select-wrapper span.caret,
.input-field .select-wrapper span.caret {
    color: #ffffff !important;
}

.input-field .select-wrapper input.select-dropdown:focus {
    border-bottom-color: #ffffff !important;
    box-shadow: 0 1px 0 0 #ffffff !important;
}

/* Opciones desplegables de los selects */
ul.select-dropdown li > span,
ul.select-dropdown li > a,
.dropdown-content.select-dropdown li > span,
.dropdown-content.select-dropdown li > a,
.dropdown-content.select-dropdown li:not(.disabled) > span {
    color: #ffffff !important;
}

ul.select-dropdown li.disabled > span,
.select-dropdown li.disabled > span {
    color: #5a5f72 !important;
}

/* Datepicker jQuery UI (calendario doble, si aplica) */
.ui-datepicker,
.ui-datepicker .ui-datepicker-title,
.ui-datepicker th,
.ui-datepicker td a,
.ui-datepicker td span {
    color: #ffffff !important;
}

.ui-datepicker {
    background-color: var(--surface-color) !important;
    border-color: var(--border-color) !important;
}

.ui-datepicker .ui-state-default {
    background-color: var(--surface-light) !important;
    color: #ffffff !important;
    border-color: var(--border-color) !important;
}

.ui-datepicker .ui-state-disabled .ui-state-default {
    color: #5a5f72 !important;
    opacity: 0.55;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-radius: 4px;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    background-color: rgba(255, 255, 255, 0.24) !important;
    border: none !important;
}

.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

.ui-datepicker .ui-datepicker-prev-hover .ui-icon,
.ui-datepicker .ui-datepicker-next-hover .ui-icon {
    opacity: 1;
}

/* Resumen de búsqueda (vehiculos/extras): Materialize fuerza .grey-text y .black-text */
.bodycontainer input.grey-text,
.bodycontainer input.grey-text:disabled,
.input-field input.grey-text[disabled] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    border-bottom-color: var(--border-color) !important;
}

.bodycontainer label.grey-text,
.bodycontainer label.grey-text.active {
    color: var(--text-secondary-color) !important;
}

.bodycontainer .input-field input.black-text,
.bodycontainer .input-field input.black-text:disabled,
.rango_de_precios .black-text,
.rango_de_precios strong,
.rango_de_precios .pricerangelabel,
#price1,
#price2 {
    color: #ffffff !important;
}

.input-field input:disabled:not([type=checkbox]):not([type=radio]),
.select-wrapper input.select-dropdown:disabled {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    border-bottom-color: var(--border-color) !important;
}

/* Tarjetas de vehículos — mismo fondo que la página (#0E1025) */
#cont_vehiculos .ficha {
    background-color: #0E1025 !important;
    overflow: hidden;
}

#cont_vehiculos .ficha.hoverable {
    transition: background-color 0.25s ease, box-shadow 0.25s ease !important;
}

#cont_vehiculos .ficha.hoverable:hover {
    background-color: #0E1025 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

/* Imágenes de coche — recorte lateral y espaciado (vehiculos + resumen extras) */
#cont_vehiculos .ficha .foto_container.input-field {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    overflow: hidden;
}

#cont_vehiculos .ficha .foto_container .foto,
#cont_vehiculos .ficha img.responsive-img.foto,
.miresumen img.responsive-img.foto,
.grupo_superior_container img.responsive-img.foto,
.extras-sidebar__summary img.responsive-img.foto {
    display: block;
    /* width: 100% !important; */
    max-width: 100% !important;
    height: auto;
    clip-path: inset(0 var(--vehicle-image-crop-sides) 0 var(--vehicle-image-crop-sides));
}

.miresumen center,
.grupo_superior_container center,
.extras-sidebar__summary .extras-sidebar__photo {
    overflow: hidden;
    display: block;
}

/* Tarjetas y contenedores (estilo original) */
.grupo,
.grupo.ibizamobility,
.card,
.card-panel,
.resumen_disabled,
.iconos {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
}

.grupo_container > .ibizamobility-text,
.destino_precio_dia > .ibizamobility-text,
.nombregrupo.ibizamobility-text,
.moreinfo {
    color: var(--text-color-vehicle) !important;
}

/* Paso extras — cajas legibles (Materialize grey lighten-3 + texto del tema) */
#listado_extras .extra_item,
.contenedor_extras .extra_item {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color);
    text-shadow: none;
}

#listado_extras .extra_item.grey.lighten-3,
.contenedor_extras .extra_item.grey.lighten-3 {
    background-color: var(--surface-color) !important;
}

#listado_extras .extra_item.hoverable:hover,
.contenedor_extras .extra_item.hoverable:hover {
    background-color: var(--surface-light) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

#listado_extras .extra_item strong,
#listado_extras .extra_item .extraPrice,
.contenedor_extras .extra_item strong,
.contenedor_extras .extra_item .extraPrice {
    color: var(--text-color) !important;
    text-shadow: none;
}

#listado_extras .extra_item .extraPrice.ibizamobility-text {
    color: var(--text-secondary-color) !important;
}

#listado_extras .extra_item .light-blue-text,
#listado_extras .extra_item .light-blue-text i {
    color: #7eb8ff !important;
}

#listado_extras .extra_item .card .card-title,
#listado_extras .extra_item .tabla_opciones td,
#listado_extras .extra_item .tabla_opciones th {
    color: var(--text-color) !important;
}

#listado_extras .extra_item .striped tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.04);
}

.bodycontainer .titulo_desglose,
.bodycontainer .contenedor_desglose .desglose_desc,
.bodycontainer .contenedor_desglose .desglose_precio {
    color: var(--text-color) !important;
}

.bodycontainer .contenedor_desglose .desglose_item {
    border-bottom-color: var(--border-color) !important;
}

/* Precios en ficha: tamaños originales, solo color legible */
#cont_vehiculos .ficha .destino_precio_dia {
    font-size: 32px;
}

#cont_vehiculos .ficha .contenedor_precio_dia,
#cont_vehiculos .ficha .contenedor_precio_dia_b {
    margin-top: -15px;
    padding: 0 !important;
    background: none !important;
    border: none !important;
}

#cont_vehiculos .ficha .precio_dia_black {
    color: var(--text-secondary-color) !important;
    font-size: 15px;
}

/* Botones reservar / pagar en ficha de vehículo */
#cont_vehiculos .ficha .reservar.ibizamobility.darken-1,
#cont_vehiculos .ficha .reservar.ibizamobility.darken-3,
#cont_vehiculos .ficha .reservar.ibizamobility.darken-4 {
    background-color: var(--surface-light) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

#cont_vehiculos .ficha .reservar.ibizamobility:hover {
    background-color: var(--lighten-3) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}

#cont_vehiculos .ficha .reservar .material-icons,
#cont_vehiculos .ficha .reservar_titulo,
#cont_vehiculos .ficha .reservar_precio,
#cont_vehiculos .ficha .reservar_coletilla,
#cont_vehiculos .ficha .reservar_siguiente_paso {
    color: #ffffff !important;
}

/* Botón confirmar reserva (extras) — contraste como pagar en vehículos */
.btnAceptarReserva.ibizamobility.darken-1,
.btnAceptarReserva.ibizamobility.darken-2,
.btnAceptarReserva.ibizamobility.darken-3,
.btnAceptarReserva.ibizamobility.darken-4 {
    background-color: var(--surface-light) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.btnAceptarReserva.ibizamobility.hoverable:hover,
.btnAceptarReserva.ibizamobility:hover {
    background-color: var(--lighten-3) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.btnAceptarReserva .aceptar_reserva_text1,
.btnAceptarReserva .aceptar_reserva_text2,
.btnAceptarReserva .aceptar_reserva_text3,
.btnAceptarReserva .aceptar_reserva_text3 span,
.btnAceptarReserva .aceptar_reserva_text4,
.btnAceptarReserva .aceptar_reserva_text4 .material-icons {
    color: #ffffff !important;
}

/* Paso datos — formularios (fondo #F9F9F9 + etiquetas grises de style.css) */
.datos_personales_container,
.row.datos_personales_container {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color);
}

.datos_personales_container .input-field label,
.datos_personales_container label.grey-text,
.datos_personales_container label.s9,
.datos_personales_container .grey-text.center-align {
    color: var(--text-secondary-color) !important;
}

.datos_personales_container .input-field label.active,
.datos_personales_container .input-field input:focus + label,
.datos_personales_container .input-field textarea:focus + label {
    color: var(--text-color) !important;
}

.datos_personales_container input[type="text"],
.datos_personales_container input[type="email"],
.datos_personales_container input[type="tel"],
.datos_personales_container input[type="password"],
.datos_personales_container textarea.materialize-textarea,
.datos_personales_container .input-field input,
.datos_personales_container .input-field textarea {
    color: var(--text-color) !important;
    -webkit-text-fill-color: var(--text-color) !important;
    border-bottom-color: var(--border-color) !important;
}

.datos_personales_container .input-field input:focus,
.datos_personales_container .input-field textarea:focus {
    border-bottom: 1px solid var(--text-color) !important;
    box-shadow: 0 1px 0 0 var(--text-color) !important;
}

.datos_personales_container select.browser-default {
    background-color: var(--surface-light) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 4px;
    height: 2.5rem;
}

.datos_personales_container select.browser-default:focus {
    border-color: rgba(255, 255, 255, 0.5) !important;
    outline: none;
}

.datos_personales_container select.browser-default option {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
}

.datos_personales_container .select-wrapper input.select-dropdown {
    color: var(--text-color) !important;
    -webkit-text-fill-color: var(--text-color) !important;
    border-bottom-color: var(--border-color) !important;
}

.datos_personales_container .select-wrapper span.caret {
    color: var(--text-color) !important;
}

.datos_personales_container .character-counter {
    color: var(--text-secondary-color) !important;
}

.datos_personales_container h5,
.datos_personales_container h6,
.datos_personales_container strong {
    color: var(--text-color) !important;
}

.datos_personales_container select.invalido {
    background-color: rgba(232, 84, 69, 0.15) !important;
}

.bodycontainer .titulo_desglose_datos_personales,
.contenedor_datos_personales .titulo_desglose_datos_personales {
    color: var(--text-color) !important;
}

.bodycontainer a.blue-text,
.bodycontainer a.blue-text.modal-trigger {
    color: #7eb8ff !important;
}

.bodycontainer a.blue-text:hover {
    color: #a8d0ff !important;
}

/* Modales */
.modal,
.modal .modal-content,
.modal .modal-footer,
#msgbox,
#msgboxaviso,
#cookiesbox,
#blokcookiebox,
#correctoBox {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

#msgboxaviso.modal,
#msgbox.modal {
    max-height: 90vh;
    overflow: hidden;
}

#msgboxaviso .modal-content,
#msgbox .modal-content {
    color: var(--text-color) !important;
}

#msgboxaviso .modal-content h4,
#msgboxaviso .modal-content h4 span,
#msgboxaviso .modal-content p,
#msgboxaviso .modal-content b,
#msgbox .modal-content p {
    color: var(--text-color) !important;
}

#msgboxaviso .modal-footer,
#msgbox .modal-footer {
    background-color: var(--surface-color) !important;
}

#msgboxaviso .modal-footer .btn,
#msgboxaviso .modal-footer button.modal-close,
#msgbox .modal-footer .btn-flat,
#msgbox .modal-footer a.modal-close {
    background-color: var(--surface-light) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 4px;
}

#msgboxaviso .modal-footer .btn:hover,
#msgbox .modal-footer a.modal-close:hover {
    background-color: var(--lighten-3) !important;
}

.modal .modal-footer .btn-flat,
.modal-action.modal-close {
    color: var(--text-color) !important;
}

/* resumen.php — confirmación, errores TPV y bloques con estilos inline */
.bodycontainer .divider {
    background-color: var(--border-color) !important;
}

.bodycontainer #btnVolverBuscar.btn {
    background-color: var(--surface-light) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.bodycontainer #btnVolverBuscar.btn:hover {
    background-color: var(--lighten-3) !important;
}

.bodycontainer #btnVolverBuscar .material-icons {
    color: #ffffff !important;
}

/* Plantillas de confirmación / preconfirmación insertadas en la página */
.bodycontainer div[style*="color:#333"],
.bodycontainer div[style*="color: #333"],
.bodycontainer div[style*="color:#333333"],
.bodycontainer div[style*="color: #333333"] {
    color: var(--text-color) !important;
}

.bodycontainer div[style*="background-color:#DDDBC8"],
.bodycontainer div[style*="background-color: #DDDBC8"] {
    background-color: var(--surface-light) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

.bodycontainer div[style*="background-color:lightcoral"],
.bodycontainer div[style*="background-color: lightcoral"] {
    background-color: var(--lighten-3) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
    text-shadow: none !important;
}

.bodycontainer b,
.bodycontainer strong {
    color: var(--text-color) !important;
}

/* Dropdowns */
.dropdown-content {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
}

.dropdown-content li > a,
.dropdown-content li > span,
#dropdown_idiomas li a {
    color: var(--text-color) !important;
}

.dropdown-content li:hover,
.dropdown-content li.active {
    background-color: var(--surface-light) !important;
}

/* Select (Materialize): opción activa/seleccionada en gris muy clarito */
.dropdown-content.select-dropdown li.active,
.dropdown-content.select-dropdown li.selected,
.dropdown-content.select-dropdown li:hover {
    background-color: rgba(255, 255, 255, 0.10) !important;
}

/* …y el texto de la opción activa/seleccionada NO negro */
.dropdown-content.select-dropdown li.active > span,
.dropdown-content.select-dropdown li.selected > span,
.dropdown-content.select-dropdown li.active > a,
.dropdown-content.select-dropdown li.selected > a {
    color: var(--text-color) !important;
}

/* Ultra-específico: Materialize a veces aplica el color al `span` interno */
body .bodycontainer .dropdown-content.select-dropdown li.selected span,
body .bodycontainer .dropdown-content.select-dropdown li.active span,
body .bodycontainer .dropdown-content.select-dropdown li.selected a,
body .bodycontainer .dropdown-content.select-dropdown li.active a {
    color: var(--text-color) !important;
}

/* Input visible del select (valor seleccionado) */
body .select-wrapper input.select-dropdown {
    color: var(--text-color) !important;
    -webkit-text-fill-color: var(--text-color) !important;
}

/* Menú móvil (side-nav / #nav-mobile) */
.side-nav,
.side-nav.fixed,
#nav-mobile.side-nav {
    background-color: var(--surface-color) !important;
}

.side-nav li,
.side-nav .collapsible,
.side-nav .collapsible li {
    background-color: transparent !important;
}

.side-nav .collapsible-header,
.side-nav .collapsible-header:hover,
.side-nav.fixed .collapsible-header,
.side-nav.fixed .collapsible-header:hover {
    background-color: transparent !important;
}

.side-nav a,
.side-nav .collapsible-header a,
.side-nav li > a,
#nav-mobile a,
#nav-mobile .collapsible-header a {
    color: var(--text-color) !important;
}

.side-nav a:hover,
.side-nav .collapsible-header a:hover {
    background-color: var(--surface-light) !important;
}

.side-nav .material-icons,
.side-nav .collapsible-header .material-icons,
.side-nav a .material-icons,
.side-nav .ibizamobility-text,
#nav-mobile .material-icons,
#nav-mobile .material-icons.left {
    color: var(--text-color) !important;
}

.side-nav .collapsible-body,
.side-nav.fixed .collapsible-body {
    background-color: var(--darken-1) !important;
}

.side-nav .collapsible-body li a,
.side-nav.fixed .collapsible-body li a {
    color: var(--text-color) !important;
}

.side-nav li.active {
    background-color: var(--surface-light) !important;
}

/* Footer */
.page-footer,
footer.page-footer .footer-copyright,
footer.page-footer .footer-copyright a {
    background-color: var(--darken-1) !important;
    color: var(--text-color) !important;
}

/* Datepicker */
.dtp > .dtp-content {
    background-color: var(--surface-color) !important;
}

.dtp > .dtp-content > .dtp-date-view > header.dtp-header {
    background-color: var(--darken-2) !important;
}

.dtp .p10 > a.dtp-select-month-before,
.dtp .p10 > a.dtp-select-month-after,
.dtp .p10 > a.dtp-select-year-before,
.dtp .p10 > a.dtp-select-year-after {
    color: rgba(255, 255, 255, 0.92) !important;
}

.dtp .p10 > a.dtp-select-month-before:hover,
.dtp .p10 > a.dtp-select-month-after:hover,
.dtp .p10 > a.dtp-select-year-before:hover,
.dtp .p10 > a.dtp-select-year-after:hover {
    color: #ffffff !important;
}

.dtp .p10 > a.dtp-select-month-before .material-icons,
.dtp .p10 > a.dtp-select-month-after .material-icons,
.dtp .p10 > a.dtp-select-year-before .material-icons,
.dtp .p10 > a.dtp-select-year-after .material-icons {
    color: inherit !important;
}

.dtp div.dtp-picker-month {
    color: var(--text-color) !important;
}

.dtp table.dtp-picker-days tr > th {
    color: var(--text-secondary-color) !important;
}

/* Días pasados / no seleccionables */
.dtp table.dtp-picker-days tr > td > span.dtp-select-day {
    color: #5a5f72 !important;
    opacity: 0.55;
    cursor: default;
}

/* Días seleccionables (hoy y futuros) */
.dtp table.dtp-picker-days tr > td > a.dtp-select-day {
    color: #ffffff !important;
}

.dtp table.dtp-picker-days tr > td > a.dtp-select-day:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

.dtp table.dtp-picker-days tr > td > a.dtp-select-day.selected {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

.dtp .dtp-picker-time > a.dtp-select-hour,
.dtp .dtp-picker-time > a.dtp-select-minute,
.dtp .dtp-picker-datetime > a {
    color: var(--text-color) !important;
}

.dtp-buttons .btn {
    color: var(--text-color) !important;
}

/* Franja bajo el header — transición suave hacia el fondo del contenido */
.barrasombra.ibizamobility.darken-2 {
    display: block !important;
    height: 4px !important;
    margin: 0 !important;
    background: linear-gradient(
        to bottom,
        var(--header-accent) 0%,
        var(--darken-1) 100%
    ) !important;
    box-shadow: none !important;
}

.section {
    padding-bottom: 8rem !important;
    padding-top: 2rem !important;
}

.ibizamobility #logo-container img {
    margin-top: 1rem !important;
}

h1, h2, h3, h4, h5, h6,
p, li, td, th {
    color: inherit;
}

.input-field span.caret {
    color: #ffffff !important;
}

.collapsible-header,
.collapsible-body {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Filtros de vehículos — vista oscura (vehiculos.php) */
body.page-vehiculos .vehicle-filters {
    margin-bottom: 1.5rem;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.page-vehiculos .vehicle-filters__price {
    margin-bottom: 0;
}

body.page-vehiculos .vehicle-filters__price-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}

body.page-vehiculos .vehicle-filters__price-bound {
    font-size: 0.8125rem;
    color: #ffffff !important;
    flex: 1;
    min-width: 110px;
}

body.page-vehiculos .vehicle-filters__price-bound strong,
body.page-vehiculos .vehicle-filters #price1,
body.page-vehiculos .vehicle-filters #price2 {
    color: #ffffff !important;
    font-weight: 600;
}

body.page-vehiculos .vehicle-filters__price-bound--end {
    text-align: right;
}

body.page-vehiculos .vehicle-filters .pricerangelabel {
    font-size: 0.875rem;
    font-weight: 700;
    color: #ffffff !important;
    flex: 0 0 auto;
    margin: 0;
    text-align: center;
}

body.page-vehiculos .vehicle-filters__selects {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    padding-top: 0.875rem;
    margin-top: 0.875rem;
    border-top: 0px solid var(--border-color) !important;
}

@media only screen and (max-width: 900px) {
    body.page-vehiculos .vehicle-filters__selects {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 600px) {
    body.page-vehiculos .vehicle-filters__price-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    body.page-vehiculos .vehicle-filters__price-bound,
    body.page-vehiculos .vehicle-filters__price-bound--end {
        text-align: center;
        min-width: 0;
    }

    body.page-vehiculos .vehicle-filters__selects {
        grid-template-columns: 1fr;
    }
}

/* Rango de precios (noUiSlider en vehiculos.php) */
.rango_de_precios .divider {
    background-color: var(--border-color) !important;
}

body.page-vehiculos .vehicle-filters #pricerange.noUi-target,
body.page-vehiculos .vehicle-filters .rango_de_precios .noUi-target {
    margin: 0.35rem 0.35rem 0 !important;
    height: 4px !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

#pricerange.noUi-target,
.rango_de_precios .noUi-target {
    background-color: var(--surface-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

#pricerange .noUi-base,
.rango_de_precios .noUi-base,
body.page-vehiculos .vehicle-filters #pricerange .noUi-base {
    border-left: 3px solid rgba(255, 255, 255, 0.28) !important;
    border-right: 3px solid rgba(255, 255, 255, 0.28) !important;
}

#pricerange .noUi-background,
.rango_de_precios .noUi-background,
body.page-vehiculos .vehicle-filters #pricerange .noUi-background {
    background: transparent !important;
    box-shadow: none !important;
}

/* Barra activa entre los dos extremos */
#pricerange .noUi-connect,
#pricerange .noUi-origin.noUi-connect.ibizamobility.darken-1,
#pricerange .noUi-origin.ibizamobility.darken-1,
.rango_de_precios .noUi-connect,
.rango_de_precios .ibizamobility.darken-1.noUi-origin,
body.page-vehiculos .vehicle-filters #pricerange .noUi-connect,
body.page-vehiculos .vehicle-filters #pricerange .noUi-origin.ibizamobility.darken-1 {
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
}

/* Asas del slider */
#pricerange .noUi-handle,
#pricerange .noUi-handle.ibizamobility.darken-3,
.rango_de_precios .noUi-horizontal .noUi-handle,
.rango_de_precios .ibizamobility.darken-3.noUi-handle,
body.page-vehiculos .vehicle-filters #pricerange .noUi-handle {
    width: 14px !important;
    height: 14px !important;
    top: -5px !important;
    right: -7px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
    cursor: grab !important;
}

#pricerange .noUi-handle:before,
#pricerange .noUi-handle:after,
.rango_de_precios .noUi-handle:before,
.rango_de_precios .noUi-handle:after,
body.page-vehiculos .vehicle-filters #pricerange .noUi-handle:before,
body.page-vehiculos .vehicle-filters #pricerange .noUi-handle:after {
    display: none !important;
    background: transparent !important;
}

#pricerange .noUi-handle:hover,
#pricerange .noUi-active,
.rango_de_precios .noUi-handle:hover,
.rango_de_precios .noUi-active,
body.page-vehiculos .vehicle-filters #pricerange .noUi-handle:hover,
body.page-vehiculos .vehicle-filters #pricerange .noUi-active {
    background: #ffffff !important;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2) !important;
}

.noUi-target {
    background-color: var(--surface-light) !important;
}

.noUi-connect {
    background-color: var(--text-color) !important;
}

/* Filtros de vehículos (select.browser-default) */
body.page-vehiculos .vehicle-filters__selects select.browser-default,
.opciones_filtrar select.browser-default,
#filtro_tipovehiculo,
#filtro_puertas,
#filtro_plazas,
#filtro_cambio {
    display: block !important;
    width: 100% !important;
    height: 2.5rem !important;
    padding: 0 2rem 0 0.75rem !important;
    background-color: var(--darken-1) !important;
    color: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A5ABB7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.65rem center !important;
    background-size: 14px !important;
    cursor: pointer;
}

.opciones_filtrar select.browser-default:hover,
#filtro_tipovehiculo:hover,
#filtro_puertas:hover,
#filtro_plazas:hover,
#filtro_cambio:hover {
    border-color: rgba(255, 255, 255, 0.35) !important;
    background-color: var(--darken-1) !important;
}

.opciones_filtrar select.browser-default:focus,
#filtro_tipovehiculo:focus,
#filtro_puertas:focus,
#filtro_plazas:focus,
#filtro_cambio:focus {
    outline: none !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

.opciones_filtrar select.browser-default option,
#filtro_tipovehiculo option,
#filtro_puertas option,
#filtro_plazas option,
#filtro_cambio option {
    background-color: var(--surface-color) !important;
    color: #ffffff !important;
}

.bodycontainer .opciones_filtrar + .divider,
.bodycontainer .divider.input-field {
    background-color: var(--border-color) !important;
}

.icon-whatsapp {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    display: inline-block;
}

.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    width: 56px;
    height: 56px;
    background-color: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.whatsapp-float .icon-whatsapp {
    width: 32px;
    height: 32px;
    color: #fff;
}