/* ============================================================
   wpcr-search-form — diseño del mockup (reserva azul)
   Scoped SOLO a .wpcr-search-form (home + reserve now EN/ES)
   Fondo azul + campos blancos flotantes + placeholders dentro
   + botón SEND verde a la derecha.
   ============================================================ */

/* 1) Fondo del ROOT del shortcode: TRANSPARENTE — el form flota sobre el
      fondo del sitio (hero/imagen). Sin caja de color. */
#wpcr-rent-form-root {
    background: transparent;
    border-radius: 0;
    padding: 0;
}
.wpcr-search-form {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

/* 1b) El Card de Bootstrap (pa-2 shadow-premium) que envuelve heading + form:
      quitar fondo blanco y sombra — transparente, margin-bottom 0 */
#wpcr-rent-form-root .card.pa-2.shadow-premium,
#wpcr-rent-form-root .card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 1e) Padding 0 absoluto: el build mete .card-body { padding: 1.5rem !important } */
#wpcr-rent-form-root .card-body {
    padding: 0 !important;
}

/* 1c) Heading "Start Your Journey" en blanco (antes azul sobre blanco) */
#wpcr-rent-form-root h2,
#wpcr-rent-form-root .text-brand-blue {
    color: #ffffff !important;
}

/* 1d) Subtítulo "Select dates and location..." en blanco translúcido */
#wpcr-rent-form-root .text-muted.extra-small.fw-600 {
    color: rgba(255, 255, 255, .85) !important;
}

/* 2) Filas de campos: ESPACIO entre ellas, sin fondo, sin líneas */
.wpcr-search-form .row {
    background: transparent !important;
    margin: 0 !important;
    padding: 0;
}

/* 3) Cada campo: celda sin borde ni fondo — separación de 5px entre filas.
      !important para ganar a .row:first-child { margin-bottom:.5rem!important }
      del build (los campos son .row.g-1) */
.wpcr-search-form .g-1 {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 5px !important;
}
/* El build mete .select2-container { margin-bottom: 10px } — lo neutralizamos,
   el gap lo da el .g-1 */
.wpcr-search-form .select2-container {
    margin-bottom: 0 !important;
}

/* 4) Labels del mockup: NO se ven — los escondemos (placeholder interno) */
.wpcr-search-form .form-label-premium {
    display: none !important;
}

/* 5) Campos/selects: fondo BLANCO (primer campo y fecha/hora),
      sin bordes, sin esquinas redondeadas */
.wpcr-search-form .select2-container .select2-selection--single,
.wpcr-search-form .form-select-premium,
.wpcr-search-form select.form-select,
.wpcr-search-form select {
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #666;
    height: 36px;
    font-size: .92rem;
    font-weight: 500;
}

/* El campo "Select" (vehicle_type) con fondo gris claro como el mockup */
.wpcr-search-form .g-1:nth-child(2) .select2-container .select2-selection--single,
.wpcr-search-form .g-1:nth-child(2) select,
.wpcr-search-form .g-1:nth-child(2) .form-select-premium {
    background: #eeeeee !important;
}

/* 5b) Form de BOOKING (is-sidebar / "Modify Search"): campos con fondo
      blanco y borde gainsboro (#DCDCDC) — a diferencia del home (sin borde) */
.wpcr-search-form.is-sidebar .select2-container .select2-selection--single,
.wpcr-search-form.is-sidebar .form-select-premium,
.wpcr-search-form.is-sidebar select.form-select,
.wpcr-search-form.is-sidebar select,
.wpcr-search-form.is-sidebar .input-group-premium .form-control-premium,
.wpcr-search-form.is-sidebar .input-group-premium .form-control,
.wpcr-search-form.is-sidebar .input-group-premium input,
.wpcr-search-form.is-sidebar .input-group-premium .form-select-time {
    background: #ffffff !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 36px !important;
}
/* vehicle_type también blanco en sidebar (el gris #eee es solo del home) */
.wpcr-search-form.is-sidebar .g-1:nth-child(2) .select2-container .select2-selection--single,
.wpcr-search-form.is-sidebar .g-1:nth-child(2) select,
.wpcr-search-form.is-sidebar .g-1:nth-child(2) .form-select-premium {
    background: #ffffff !important;
}

/* Selects con la opción vacía (placeholder "Select Location"/"Select Type"):
   texto gris como el mockup (el option value="" es el que se ve al inicio) */
.wpcr-search-form select option[value=""] {
    color: #666;
}

/* Root del form: el build le da min-height:calc(100vh - 32px) que estira la
   fila de Elementor del home y las cards [single-vehicle-card] (h-100) se
   estiran con ella. En el home: min-height auto (solo home, no booking) */
body.home .wpcr-react-app,
body.page-id-9 .wpcr-react-app {
    min-height: auto !important;
}

/* Select2: texto del campo seleccionado */
.wpcr-search-form .select2-container .select2-selection__rendered {
    color: #666;
    line-height: 34px !important;
}
.wpcr-search-form .select2-container .select2-selection__arrow {
    height: 34px !important;
}
.wpcr-search-form .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #666 transparent transparent !important;
}

/* Dropdown de select2: las opciones de grupo (optgroup) sin sangría izquierda.
   Se renderiza en body (fuera del form) → sin scope .wpcr-search-form */
.select2-container .select2-results__option--group {
    padding-left: 0px !important;
    padding-top: 0px !important;
}
.select2-container .select2-results__option--group .select2-results__options {
    padding-left: 0px !important;
    padding-top: 0px !important;
}

/* 6) Fecha + hora en 2 columnas (input-group): campos blancos sin bordes.
      Los placeholders "Pick-up date"/"Drop-Off date" se inyectan por JS
      (shortcode) porque el build no los define; aquí solo el estilo.
      nowrap es crítico: react-bootstrap da al .input-group flex-wrap:wrap y
      en el sidebar angosto de rent-a-car la hora saltaba a otra línea. */
.wpcr-search-form .input-group-premium {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: stretch;
}
.wpcr-search-form .input-group-premium .form-control-premium,
.wpcr-search-form .input-group-premium .form-control,
.wpcr-search-form .input-group-premium input {
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #666;
    height: 36px;
    flex: 1 1 55%;
    min-width: 0;
    font-weight: 500;
}
.wpcr-search-form .input-group-premium .form-select-time,
.wpcr-search-form .input-group-premium select {
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #666;
    height: 36px;
    flex: 1 1 40%;
    min-width: 0;
    font-weight: 500;
}

/* En el sidebar (rent-a-car / Modify Search) el ancho es ~270px:
   menos gap y slots 58/42 para que fecha+hora quepan en una línea */
.wpcr-search-form.is-sidebar .input-group-premium {
    gap: 8px;
}
.wpcr-search-form.is-sidebar .input-group-premium .form-control-premium,
.wpcr-search-form.is-sidebar .input-group-premium .form-control,
.wpcr-search-form.is-sidebar .input-group-premium input {
    flex: 1 1 58%;
}
.wpcr-search-form.is-sidebar .input-group-premium .form-select-time {
    flex: 1 1 42%;
    padding: 0 6px !important;
}

/* 6b) Mismo alto que los selects (36px) y texto centrado verticalmente.
      El build pone line-height:1!important sin height — lo neutralizamos. */
.wpcr-search-form .input-group-premium .form-select-time {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    line-height: 34px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
}

/* Placeholder de los inputs de fecha: gris #666 como el mockup */
.wpcr-search-form input::placeholder {
    color: #666;
    opacity: 1;
    font-weight: 500;
}

/* 7) Botón SEND: verde brillante #4CAF50, esquinas ligeramente redondeadas,
      a la derecha, uppercase, bold */
.wpcr-search-form .btn-book-premium {
    background: #4caf50 !important;
    border: none !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 12px 30px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    margin-left: auto;
    float: right;
    transition: background .2s ease;
}
.wpcr-search-form .btn-book-premium:hover {
    background: #43a047 !important;
}
.wpcr-search-form .btn-book-premium .spinner-border {
    width: 1rem;
    height: 1rem;
}

/* 8) Sin fondo de tabla en ninguna fila (mockup: solo azul detrás) */
.wpcr-search-form .g-1:last-child .row,
.wpcr-search-form .g-1:last-child {
    background: transparent !important;
    border-bottom: none;
}