/* ── Cursor «cerrar» sobre los velos ────────────────────────────────────
       Un clic en el velo cierra lo que esté abierto; con el ratón encima, el
       puntero se vuelve un círculo oscuro con una × para decirlo. SVG en línea
       de 32px con el punto activo en el centro, y `pointer` de reserva para el
       navegador que no pinte cursores en SVG. Va en `:root` para que lo use
       cualquier velo: `cursor: var(--rc-cursor-close)`. */
    :root {
        --rc-cursor-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23111827' fill-opacity='.88' stroke='%23fff' stroke-width='2'/%3E%3Cpath d='M11.5 11.5l9 9M20.5 11.5l-9 9' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 16 16, pointer;
    }
    /* ── En PC, la barra a todo el ancho ─────────────────────────────────────
       ⚠️ Desde 1024 esto lo pisa el bloque siguiente («la barra mide lo que
       piden sus campos», 27/09/2026): aquí sólo queda el tramo 768–1023.

       Sin ancho escrito en el panel, el envoltorio lleva `bc-hero-form-auto` y
       `search-skin` le pone `width: fit-content`: la barra medía lo que medían
       sus campos y en un héroe de 1110px se quedaba en 520, con los dos campos
       apretados a la izquierda y el botón comiéndose el resto.

       Ahora ocupa el ancho disponible y el tope lo pone el vendedor desde
       Diseño → «Ancho del buscador»: escrito un número, la clase no se añade,
       estas reglas no aplican y manda su valor. Vacío = ancho completo.

       ⚠️ Esto invierte lo que decía `search-skin` («automático = lo que midan
       los campos»), que existía para que una barra de un solo campo no se
       estirara a 1150. Es una decisión de diseño del 08/09/2026: se prefiere
       que respire, y quien quiera la barra corta escribe el número.

       Y va AQUÍ y no en `search-skin` porque las hojas de cada estilo se pintan
       en el CUERPO de la página: da igual la especificidad, gana la última, y
       la última es este parcial. */
    @media (min-width: 768px) {
        html .bc-form-search-all.bc-hero-form-auto .bc-herov2-search,
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.bc-hero-form-auto .bc-herov2-search .bc_form {
            width: 100% !important;
            max-width: none !important;
        }

        /* Y los campos se reparten ese ancho en vez de quedarse en su tamaño:
           con `0 1 auto` la zona de campos seguía midiendo lo suyo y todo el
           hueco nuevo se lo llevaba el botón. */
        html .bc-form-search-all.bc-hero-form-auto .bc_form .g-field-search,
        html .bc-form-search-all.bc-hero-form-auto .bc_form .g-field-search > .row,
        html .bc-form-search-all.bc-hero-form-auto .bc_form .g-field-search > .row > [class*="col-"] {
            flex: 1 1 auto !important;
        }
    }

    /* ── En PC, la barra mide lo que piden sus campos ───────────────────────
       Un mismo ancho no vale para uno que para cuatro campos. Con 500px en el
       panel, Ubicación y Fechas quedaban en 94px cada uno y se cortaban a
       «¿A dónd» (santamartatravel); con 950px, Fechas y Huéspedes se estiraban
       hasta dejar media barra vacía (apartamentosensanandres), y lo mismo
       pasaba con el panel vacío, que iba a todo el ancho. 27/09/2026.

       Desde 1024 la barra es proporcional: `fit-content`, cada campo con un
       suelo que crece con la pantalla (200–250px) y el botón al final. Uno,
       dos o tres campos dan barras de tres tamaños. El tope es el héroe. El
       número del panel ya no fija el ancho aquí; sigue mandando en el
       teléfono y la tableta. La clase va doblada para empatar con las reglas
       `.bc-hero-form-auto` de arriba y ganarles por orden. */
    @media (min-width: 1024px) {
        html .bc-form-search-all.bc-form-search-all .bc-herov2-search {
            width: fit-content !important;
            min-width: 0 !important;
            max-width: 100% !important;
        }
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all.bc-form-search-all .bc-herov2-search .bc_form {
            width: 100% !important;
            max-width: 100% !important;
        }
        html .bc-form-search-all.bc-form-search-all .bc_form .g-field-search {
            flex: 1 1 auto !important;
            width: auto !important;
            max-width: none !important;
            min-width: 0;
        }
        html .bc-form-search-all.bc-form-search-all .bc_form .g-field-search > .row {
            flex-wrap: nowrap !important;
        }
        /* `col-md-6` y compañía son porcentajes del ancho: con la barra midiendo
           lo que miden sus campos, un porcentaje se muerde la cola. */
        html .bc-form-search-all.bc-form-search-all .bc_form .g-field-search > .row > [class*="col-"] {
            flex: 1 1 auto !important;
            width: auto !important;
            max-width: none !important;
            min-width: 0;
        }
        html .bc-form-search-all .bc_form .g-field-search > .row > [class*="col-"] > .form-group {
            min-width: clamp(200px, 18vw, 250px);
        }
        /* El de autos mete DOS campos en una columna (Fechas y Días): cuenta
           doble, o la barra de un vendedor de autos se quedaba en 509px con
           los dos apretados (rentcarx, 27/09/2026). */
        html .bc-form-search-all .bc_form .g-field-search > .row > [class*="col-"] > .form-group:has(.bc-car-datedays) {
            min-width: calc(clamp(200px, 18vw, 250px) * 2);
        }
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group > .field-icon {
        display: block !important;
        left: 0 !important;
        width: 20px !important;
        height: 20px !important;
        margin-top: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        /* `background-color` y no el atajo: es lo que pinta la máscara. */
        background-color: var(--bc-primary, #5191fa) !important;
        color: var(--bc-primary, #5191fa) !important;
        box-shadow: none !important;
        /* El halo era del disco relleno; sobre un glifo suelto sólo ensucia. */
        filter: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 2 !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group > .form-content {
        padding-left: 28px !important;
    }

    /* Menos en el renglón de autos, que mete DOS campos dentro: si la sangría
       del icono la pone el `.form-content`, la zona de campos empieza 28px a la
       derecha y su mitad —donde cae la raya— deja de ser la mitad de la
       TARJETA. Aquí el hueco del icono lo reserva la primera columna, así que
       la rejilla ocupa el ancho entero y el centro es el centro de verdad. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group:has(.bc-car-datedays) > .form-content {
        padding-left: 0 !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content label {
        margin: 0 0 2px !important;
        color: color-mix(in srgb, var(--bc-text, #111827) 55%, transparent) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: .05em !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
    }

    /* El valor: la fecha, el destino escrito y la cifra de los días. En el
       escritorio iba a 14px con peso 400 y en gris mientras la etiqueta iba a
       14 con 600 —la jerarquía al revés, igual que estaba la ficha—. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content .render,
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content .form-control,
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content .check-in-render,
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content .check-out-render,
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .bc-car-days input[type="number"] {
        color: var(--bc-text, #111827) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
    }

    /* ── Dos mitades y la raya justo en medio ───────────────────────────────
       Los dos campos compartían un `flex` en el que la fecha crecía y los días
       ocupaban lo que pedían: la raya caía donde acabase el texto de la fecha,
       distinta en cada idioma y en cada formato. Con una rejilla de dos
       columnas iguales cae en el centro, como en la fila de «Días» y
       «Vehículos» de la ficha.

       `gap: 0` porque el aire lo dan ahora los rellenos de cada mitad, 14px a
       cada lado de la raya; con el `gap` encima la raya dejaba de estar
       centrada respecto a sus dos vecinos.

       `minmax(0, 1fr)` Y NO `1fr` A SECAS, que es lo que la descentraba: un
       elemento de rejilla no encoge por debajo de su contenido salvo que se le
       diga (`min-width: auto` es el valor de fábrica), y el contador de días
       tiene un mínimo. Con `1fr` la columna de los días se quedaba con lo que
       pedía y la raya se iba 5px en el escritorio y 9 a 320px; con el mínimo a
       cero las dos mitades son iguales SIEMPRE. Medido a 320, 360, 375, 414 y
       1280: desvío 0 en las cinco. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .bc-car-datedays {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0 !important;
        /* Arriba y no centradas: el bloque de la fecha es más alto que el de
           los días —19px de valor contra 20 de contador, más sus márgenes— y
           centrando cada mitad las dos etiquetas quedaban a distinta altura. */
        align-items: start;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .bc-car-datedays > .form-date-search {
        padding-left: 28px;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .bc-car-datedays > .bc-car-days {
        position: relative;
        padding-left: 14px;
    }

    /* La raya. Los dos campos comparten `.form-group` —y por tanto no les toca
       el `border-right` de la columna, que es lo que separa los campos en el
       resto de buscadores—, así que sin ella la fecha y los días se leían como
       un solo bloque largo. Es la misma línea al 12% que ya separa el último
       campo del botón. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .bc-car-datedays > .form-date-search {
        padding-right: 14px;
        border-right: 1px solid color-mix(in srgb, var(--bc-text, #111827) 12%, transparent);
    }

    /* La caja de la cifra iba a 56px: sitio para tres dígitos en un campo que
       casi siempre lleva uno, y esos 16px de más eran justo los que le faltaban
       a la columna para partirse por la mitad. A 15px con peso 700, dos cifras
       miden 22. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .bc-car-days input[type="number"] {
        width: 40px !important;
        flex: 0 0 40px !important;
    }

    /* Sin el icono, el contador cabe de sobra en su mitad: a 320px son 113px
       menos los 14 de sangría, 99 para un «− 1 +» que mide 92. Por eso ya no
       hace falta apretarle nada en el teléfono. */

    /* ── «Días» va sin icono ────────────────────────────────────────────────
       Tuvo un reloj —un `::after` con la silueta recortada, porque ese campo lo
       dibuja el buscador de autos y no trae `<i>`— y se quitó: al lado del
       calendario de «Fechas», a 14px, eran dos iconos de tiempo seguidos para
       lo que en la práctica es un solo campo, «cuándo y cuántos días».

       Queda la sangría de 14px, la misma que el relleno derecho de la fecha:
       así el contenido de las dos mitades se separa lo mismo de la raya.

       La etiqueta sí se queda a la izquierda: iba centrada sobre el contador y
       entonces el «−» quedaba entre la raya y la palabra «DÍAS». */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .bc-car-days > label {
        display: block !important;
        text-align: left !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .bc-car-days-ctrl {
        justify-content: flex-start !important;
    }

    /* Los pasos, del color de marca y a plena tinta, como los del motor de
       reservas de la ficha. Iban en el gris del texto y al 45%: al lado de una
       icono de color y un valor negro parecían apagados, y sobre todo hacían
       que el mismo contador se viera de dos maneras distintas según se mirara
       la portada o una ficha. Ver [[rentcli-iconos-motor-reservas]]. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .bc-car-days-btn {
        color: var(--bc-primary, #5191fa) !important;
        border-color: currentColor !important;
        opacity: 1 !important;
    }

    /* ── Todo en el mismo eje ────────────────────────────────────────────────
       El icono y la raya iban con `top: 25px` escrito a mano, y el texto con
       rellenos de 5 arriba y 4 abajo más el hueco de línea de un `inline-block`:
       medido a 1280, el centro del texto caía en 447, el del icono en 460 y el
       de la raya en 464 sobre una barra centrada en 450. Ahora el campo centra
       su contenido con flex, el icono y la raya se cuelgan del 50 %, y los tres
       —más el botón— caen en el mismo píxel. */
    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group {
        display: flex !important;
        align-items: center !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group > .form-content {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group > .field-icon {
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
    }

    body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content .render {
        display: block !important;
    }

    @media (min-width: 768px) {
        /* El rango de fechas (Espacios, Hoteles) son dos `.render` y una raya
           dentro del mismo `.check-in-wrapper`: con el `display:block` de
           arriba salían en tres líneas —«26/09», «–», «27/09»— y la fecha
           desbordaba la barra por arriba y por abajo. Van en una sola línea.
           En el móvil manda la regla de `#bc_space` de search-skin. */
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content .check-in-wrapper > .render,
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content .check-in-wrapper > span {
            display: inline !important;
            width: auto !important;
            position: static !important;
            white-space: nowrap;
        }

        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-content .check-in-wrapper {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* El campo, gemelo del botón: la misma altura (60) y el mismo margen
           de 6px contra el borde de la barra por arriba, abajo y el costado.
           Antes el botón tenía 6 arriba y 10 a la derecha, y el campo no tenía
           forma propia. La sangría pasa de 16+20 a 6+30: el icono no se mueve. */
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form {
            padding-left: 6px !important;
            padding-right: 6px !important;
        }

        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search > .row {
            align-items: stretch !important;
        }

        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search > .row > [class*="col-"] {
            display: flex !important;
            align-items: center !important;
            align-self: stretch !important;
            height: auto !important;
            min-height: 0 !important;
            margin: 6px 0 !important;
            padding-left: 30px !important;
            border-radius: 999px !important;
            cursor: pointer;
            transition: background-color .2s ease;
        }

        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search > .row > [class*="col-"] > .form-group {
            width: 100% !important;
        }

        /* Al pasar el ratón el campo se enciende con un velo de la marca: dice
           «esto se pulsa» sin tener que dibujar un borde. */
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search > .row > [class*="col-"]:hover,
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search > .row > [class*="col-"]:focus-within {
            background-color: color-mix(in srgb, var(--bc-primary, #5191fa) 9%, transparent) !important;
        }

        /* La raya entre campos, centrada; y fuera la del último, que quedaba
           suelta al lado del botón: el botón ya es la separación. */
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search > .row > [class*="col-"]::after {
            top: 50% !important;
            bottom: auto !important;
            transform: translateY(-50%) !important;
        }

        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .g-field-search > .row > [class*="col-"]:last-child::after {
            display: none !important;
        }
    }

    @media (max-width: 767px) {
        body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc_form .form-group > .field-icon {
            width: 18px !important;
            height: 18px !important;
        }
    }
    /* ── La lista de destinos: encima de todo y con traje de app ────────────
       En el héroe de historias el bloque del buscador y la tira de tarjetas
       van los dos con `z-index: 1`, y la tira va después: la lista de destinos
       (y la de viajeros) se abría DETRÁS de las tarjetas, en PC y en el
       teléfono (santamartatravel, 27/09/2026). Mientras hay una abierta, el
       bloque del buscador sube por encima de la tira. */
    .bc-form-search-all.stories .bc-stories-content:has(.bc-autocomplete.show, .select-guests-dropdown.show),
    body:has(.daterangepicker[style*="display: block"]) .bc-form-search-all.stories .bc-stories-content {
        z-index: 5 !important;
    }

    /* Y detrás, velo oscuro con desenfoque, como el de la hoja del teléfono,
       para los TRES desplegables del buscador: destino, personas y fechas. La
       barra queda encendida y el resto de la página se apaga.

       El velo es el `::before` fijo de la propia barra (`.bc-herov2-search`),
       que al abrirse se vuelve contexto de apilado (`z-index: 10`): con
       `z-index: -1` el velo pinta por debajo de sus campos y por encima de todo
       lo que el héroe pinta antes que ella —foto, título, franja de ventajas—.
       Así vale para todos los estilos de héroe sin conocer su marcado. El
       calendario cuelga del `<body>` con `z-index` 3001 y queda por encima.

       El calendario no se abre dentro de la barra: se reconoce por el
       `display: block` que daterangepicker escribe en línea, y por eso lleva
       `body:has(…)` delante. Clic en el velo = clic fuera, y los tres ya se
       cierran con eso. Sólo PC: en el teléfono cada uno es una hoja con su
       propio velo (el `::backdrop` de abajo y el `body::before` del calendario
       en rentcli-skin). */
    @media (min-width: 991px) {
        /* El héroe entero sube mientras hay algo abierto: sin esto las
           secciones de después (tarjetas posicionadas, botones) pintaban por
           encima del velo. La cabecera (999) sigue arriba. */
        .bc-form-search-all:has(.bc-autocomplete.show, .select-guests-dropdown.show),
        body:has(.daterangepicker[style*="display: block"]) .bc-form-search-all:has(.check-in-out) {
            z-index: 20;
        }
        .bc-form-search-all .bc-herov2-search:has(.bc-autocomplete.show, .select-guests-dropdown.show),
        body:has(.daterangepicker[style*="display: block"]) .bc-form-search-all .bc-herov2-search {
            position: relative;
            /* 10 y no 3: la cortina del héroe (`bc-hero-cortina`, su `::after`)
               va a 3 y, al ir después en el árbol, pintaba encima del velo una
               franja blanca (apartamentosensanandres, 27/09/2026). */
            z-index: 10;
        }
        .bc-form-search-all .bc-herov2-search:has(.bc-autocomplete.show, .select-guests-dropdown.show)::before,
        body:has(.daterangepicker[style*="display: block"]) .bc-form-search-all .bc-herov2-search::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -1;
            background: rgba(0, 0, 0, .5);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            pointer-events: auto;
            cursor: var(--rc-cursor-close);
        }
    }

    /* En el teléfono destino y personas son una hoja abajo y home.js los sube
       a la capa superior del navegador (`popover`): así no los tapa nada,
       tampoco los botones flotantes. El velo es el de `.bc-herov2-inner`. */
    .bc-form-search-all .bc-autocomplete:popover-open::backdrop,
    .bc-form-search-all .select-guests-dropdown:popover-open::backdrop {
        cursor: var(--rc-cursor-close);
        background: rgba(0, 0, 0, .5);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
    @media (max-width: 990px) {
        html body.bc-skin .bc-form-search-all .select-guests-dropdown.show:popover-open {
            position: fixed !important;
            inset: auto 12px max(12px, env(safe-area-inset-bottom)) !important;
            width: auto !important;
            min-width: 0 !important;
            max-width: none !important;
            max-height: min(70vh, 520px) !important;
            margin: 0 !important;
            padding: 8px 14px !important;
            overflow-y: auto !important;
            transform: none !important;
            border-radius: 24px !important;
        }
    }

    /* En PC, una tarjeta flotante como las de una app: más ancha que el campo
       (177px partía «Parque Tayrona»), esquinas grandes, sombra honda, filas
       altas con el alfiler en una pastilla del color de marca. Cuelga del
       campo, separada 12px de la barra. */
    @media (min-width: 991px) {
        html body.bc-skin .bc-form-search-all .bc-herov2-search .smart-search .bc-autocomplete {
            top: calc(100% + 22px) !important;
            left: -28px !important;
            width: max-content !important;
            min-width: 300px !important;
            max-width: 380px !important;
            max-height: min(420px, 60vh) !important;
            padding: 8px !important;
            overflow-y: auto !important;
            border: 1px solid color-mix(in srgb, var(--bc-text, #111827) 8%, transparent) !important;
            border-radius: 22px !important;
            background: var(--bc-background, #fff) !important;
            box-shadow: 0 24px 60px rgba(6, 12, 24, .26), 0 2px 8px rgba(6, 12, 24, .08) !important;
        }
        html body.bc-skin .bc-form-search-all .bc-herov2-search .bc-autocomplete .item {
            display: flex !important;
            align-items: center;
            gap: 12px;
            min-height: 48px;
            margin: 0 !important;
            padding: 8px 12px 8px 8px !important;
            border: 0 !important;
            border-radius: 14px !important;
            background: transparent !important;
            color: var(--bc-text, #111827) !important;
            font-size: 15px !important;
            font-weight: 600 !important;
            line-height: 1.3 !important;
            white-space: normal !important;
            cursor: pointer;
        }
        html body.bc-skin .bc-form-search-all .bc-herov2-search .bc-autocomplete .item:hover,
        html body.bc-skin .bc-form-search-all .bc-herov2-search .bc-autocomplete .item:focus {
            background: color-mix(in srgb, var(--bc-primary, #5191fa) 9%, transparent) !important;
            outline: 0;
        }
        html body.bc-skin .bc-form-search-all .bc-herov2-search .bc-autocomplete .item > i {
            display: inline-flex !important;
            flex: 0 0 36px;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            margin: 0 !important;
            border-radius: 12px;
            background: color-mix(in srgb, var(--bc-primary, #5191fa) 12%, transparent);
            color: var(--bc-primary, #5191fa) !important;
            font-size: 17px !important;
        }
    }
    /* ── Huéspedes en PC: la misma tarjeta de app que la lista de destinos ──
       Salía como el menú de Bootstrap a pelo: 140px, el «+» de Niños fuera de
       la caja y las flechitas del `<input type=number>` junto a los botones.
       Filas de 56px con la etiqueta a la izquierda y el contador a la
       derecha: botones redondos de 36px y la cifra sin flechas. */
    @media (min-width: 991px) {
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown {
            min-width: 300px !important;
            margin-top: 14px !important;
            padding: 8px !important;
            border: 1px solid color-mix(in srgb, var(--bc-text, #111827) 8%, transparent) !important;
            border-radius: 22px !important;
            background: var(--bc-background, #fff) !important;
            box-shadow: 0 24px 60px rgba(6, 12, 24, .26), 0 2px 8px rgba(6, 12, 24, .08) !important;
        }
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown .dropdown-item-row {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 16px;
            min-height: 56px;
            margin: 0 !important;
            padding: 8px 8px 8px 14px !important;
            border: 0 !important;
            border-radius: 14px !important;
            background: transparent !important;
        }
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown .dropdown-item-row + .dropdown-item-row {
            border-top: 1px solid color-mix(in srgb, var(--bc-text, #111827) 7%, transparent) !important;
            border-radius: 0 0 14px 14px !important;
        }
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown .dropdown-item-row .label {
            margin: 0 !important;
            color: var(--bc-text, #111827) !important;
            font-size: 15px !important;
            font-weight: 600 !important;
            white-space: nowrap;
        }
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown .dropdown-item-row .val {
            display: flex !important;
            align-items: center !important;
            gap: 10px;
            margin: 0 !important;
        }
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown :is(.btn-minus, .btn-add) {
            display: inline-flex !important;
            flex: 0 0 36px;
            align-items: center;
            justify-content: center;
            width: 36px !important;
            height: 36px !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 1px solid color-mix(in srgb, var(--bc-primary, #5191fa) 45%, transparent) !important;
            border-radius: 50% !important;
            background: transparent !important;
            color: var(--bc-primary, #5191fa) !important;
            font-size: 18px !important;
            line-height: 1 !important;
            cursor: pointer;
            user-select: none;
        }
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown :is(.btn-minus, .btn-add):hover {
            background: color-mix(in srgb, var(--bc-primary, #5191fa) 10%, transparent) !important;
        }
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown .count-display {
            display: inline-block !important;
            width: 28px !important;
            margin: 0 !important;
        }
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown .count-display input {
            width: 100% !important;
            height: auto !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
            color: var(--bc-text, #111827) !important;
            font-size: 16px !important;
            font-weight: 700 !important;
            text-align: center !important;
            box-shadow: none !important;
            -moz-appearance: textfield;
            appearance: textfield;
        }
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown .count-display input::-webkit-inner-spin-button,
        html body.bc-skin .bc_wrap .page-template-content .bc-form-search-all .bc-herov2-search .select-guests-dropdown .count-display input::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    }