/*
 * El tema aplica `align-items: center` y centra el texto dentro de `.quantity-button` (pensado
 * originalmente solo para el stepper de cantidad + botón "Añadir al carrito"), y ese contenedor
 * también fuerza una sola fila sin wrap -- por eso el selector completo del MIX necesita anular
 * esas 3 cosas explícitamente (texto a la izquierda, alto real de cada fila, wrap para que el
 * selector no quede aplastado junto al botón). Validado en vivo antes de escribir esto.
 */
.quantity-button:has(.bkc-mix-selector) {
    flex-wrap: wrap;
    row-gap: 14px;
}

/*
 * PARTE 2 (24-sep-2026), a pedido explícito del cliente tras revisar en vivo, directo en el
 * navegador, todo el rediseño de la ficha de producto (repo bukets_ec_styles): el selector del MIX
 * reusa las clases reales ".bkl-card"/".bkl-card-tamano" que esa otra ficha (producto con
 * variaciones) ya usa para la tarjeta "Tamaño de Arreglo" -- ambas viven en el mismo tema activo
 * (Florial Child, bukets_ec_styles), así que el fondo lavanda/radio/padding se heredan solos, sin
 * repetir esas reglas acá. Lo que SÍ hace falta definir en este archivo son las piezas nuevas que
 * no existían en ningún lado todavía (insignia "Paso N", badges de "Primer/Segundo arreglo",
 * tarjeta de aviso con ícono) -- igual que bukets_ec_laar_courier ya duplica ".bkl-notif-card" por
 * su cuenta (repos independientes por diseño del proyecto, sin CSS compartido entre ellos).
 */
.bkc-mix-selector {
    flex: 1 1 100%;
    width: 100%;
    order: -1;
    text-align: left;
}

/*
 * Título corto + insignia "Paso 1" en la misma línea -- mismo patrón que "Ciudad de destino"/"Fecha
 * de entrega" (bukets_ec_laar_courier, PARTE 54 de bukets_ec_styles) en vez del párrafo largo suelto
 * de la primera vuelta ("no tiene buen título descriptivo", pedido del cliente en vivo).
 */
.bkc-mix-label-paso {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 600;
    color: #000;
}

/*
 * Color hardcodeado (#582e6a, el default real de "bukets_accent_color" en el Personalizador): este
 * archivo es un CSS estático (wp_enqueue_style), no soporta valores de PHP como los <style> inline
 * del theme -- si el cliente cambia ese color, esta insignia puntual no lo va a reflejar
 * automáticamente (misma limitación ya documentada en bukets_ec_laar_courier).
 */
.bkl-paso-badge {
    display: inline-block;
    flex-shrink: 0;
    padding: 3px 12px;
    border-radius: 999px;
    background-color: #582e6a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/*
 * La explicación larga ("24 Tallos armados con 12 Tallos...") pasa a la misma tarjeta con ícono "ⓘ"
 * (".bkl-notif-card") que ya usa el aviso "ya tenés un destino elegido" y el texto de ayuda de Fecha
 * de entrega (bukets_ec_laar_courier) y el aviso "Mix Combinado" en la ficha del producto normal
 * (bukets_ec_styles) -- un solo lenguaje visual para avisos/información en toda la compra, aunque
 * viva repetido en 3 repos independientes.
 */
.bkl-notif-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1.5px solid #eee2f5;
    border-radius: 5px;
    padding: 16px 18px;
    box-shadow: 0 4px 14px rgba(88, 46, 106, .08);
    margin-bottom: 20px;
}

.bkl-notif-card .bkl-notif-icono {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    margin-top: 2px;
    border-radius: 50%;
    background: #f0ecf7;
    color: #582e6a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
}

.bkl-notif-card .bkl-notif-texto {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.5;
}

.bkl-notif-card .bkl-notif-titulo {
    font-weight: 700;
    font-size: 14px;
    color: #2b2530;
}

/*
 * Cada componente ("Primer arreglo"/"Segundo arreglo") pasa a su propia sub-tarjeta blanca, con
 * separación clara entre sí -- antes los 2 quedaban muy pegados uno al otro dentro de la misma
 * tarjeta lavanda ("no están organizados ni están distribuidos correctamente", pedido del cliente
 * en vivo).
 */
.bkc-mix-component {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    background: #fff;
    border-radius: 5px;
    padding: 16px;
    margin-bottom: 16px;
    box-sizing: border-box;
    text-align: left;
}

.bkc-mix-component:last-of-type {
    margin-bottom: 0;
}

/*
 * "Primer arreglo"/"Segundo arreglo" como badge (fondo blanco + borde morado) en vez de texto en
 * mayúsculas -- coherente con el resto de etiquetas del sitio (SKU/Categoría, migas de pan,
 * bukets_ec_styles). Fondo BLANCO a propósito, no lavanda: la sub-tarjeta ya es blanca, y el mismo
 * lavanda de ".bkl-card-tamano" quedaba invisible contra su propio fondo (bug real encontrado en
 * vivo antes de esta vuelta).
 */
.bkl-etiqueta-mix {
    display: inline-block;
    align-self: flex-start;
    background: #fff;
    color: #582e6a;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: inset 0 0 0 1.5px #582e6a;
    margin-bottom: 2px;
}

/*
 * Flecha de desplegable propia (el <select> nativo del navegador no dejaba claro que era un campo
 * elegible, pedido del cliente en vivo: "no se nota que son dropdowns") + resto del estilo
 * coherente con el resto de campos del sitio (radio 5px, borde lavanda, foco morado).
 */
.bkc-mix-component select {
    width: 100%;
    padding: 12px 40px 12px 14px;
    border: 1.5px solid #e2d9ec;
    border-radius: 5px;
    font-size: 14px;
    color: #2b2530;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23582e6a' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    box-sizing: border-box;
    appearance: none;
    cursor: pointer;
}

.bkc-mix-component select:hover,
.bkc-mix-component select:focus {
    border-color: #582e6a;
    outline: none;
}

.bkc-mix-thumbstrip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
}

.bkc-mix-thumbstrip-track {
    display: flex;
    gap: 6px;
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.bkc-mix-thumbstrip-track a {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1 / 1;
    border-radius: 5px;
    overflow: hidden;
    border: 1.5px solid #e2d9ec;
    display: block;
}

.bkc-mix-thumbstrip-track img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bkc-mix-thumbstrip-nav {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #eee;
    color: #444;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bkc-mix-thumbstrip-nav:disabled {
    opacity: 0.3;
    cursor: default;
}

/*
 * Descripción corta del arreglo elegido (a pedido del cliente en vivo: "¿se puede al seleccionar
 * poner la descripción corta de cada producto?") -- viene de WC_Product::get_short_description()
 * del componente real, ver ProductoRepository::listarElegiblesParaMix().
 */
.bkc-mix-descripcion-corta {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #6b6470;
}

.bkc-mix-sin-componentes {
    margin: 0;
}

/*
 * Insignia de stock del MIX ("STOCK 47 DISPONIBLES"): usa a propósito las mismas clases que la ficha con
 * variaciones (".woocommerce-variation-availability > .stock.in-stock") para heredar el diseño que ya
 * define el tema (bukets_ec_styles). Lo único propio de este archivo: el tema le pone display:flex y eso
 * pisa el atributo [hidden], así que se vuelve a imponer; y, como el contenedor es un <div> más del
 * selector, el segundo arreglo deja de ser ":last-of-type" y se le quita el margen inferior mientras la
 * insignia está oculta para que la tarjeta no gane espacio vacío.
 */
.bkc-mix-stock[hidden] {
    display: none !important;
}

.bkc-mix-stock {
    margin: 0;
}

.bkc-mix-component:has(+ .bkc-mix-stock[hidden]) {
    margin-bottom: 0;
}

.bkc-mix-precio-info {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #eef7ef;
    border-radius: 5px;
    padding: 10px 14px;
    margin: 16px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: #234d27;
    text-align: left;
}

.single_add_to_cart_button.bkc-mix-incompleto {
    opacity: 0.5;
    cursor: not-allowed;
}

/*
 * `form.cart` (envuelve tanto `.quantity-button` como el corazón de favoritos) usa
 * `align-items: stretch` por defecto -- como `.quantity-button` crece bastante alto con el
 * selector adentro, el corazón quedaba centrado a media altura en vez de junto al botón "Añadir
 * al carrito", que es la última fila. Se lo baja a su lugar de siempre.
 */
form.cart:has(.bkc-mix-selector) {
    align-items: flex-end;
}

@media (max-width: 600px) {
    .bkc-mix-thumbstrip-nav {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
}