/**
 * Estilos Frontend para BWO Easy Icon Lists
 * @package BWO_Easy_Icon_Lists
 */

:root {
    --bwo-eil-icon-gap: 10px;
    --bwo-eil-icon-rotate: 0deg;
    --bwo-eil-icon-translate-y: 0px;
}

/* Reset y Contenedor Principal de la Lista */
.bwo-eil-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    row-gap: 12px;
    column-gap: 20px;
    align-items: start;
    box-sizing: border-box;
}

/* Elemento de Lista */
.bwo-eil-item {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    min-width: 0;
    box-sizing: border-box;
    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

/* Enlace o Contenedor Interno */
.bwo-eil-item__link,
/* Contenedor Interno */
.bwo-eil-item__content {
    display: flex;
    width: 100%;
    color: inherit;
    text-decoration: none;
    box-sizing: border-box;
    outline: none;
}

.bwo-eil-item__link {
    cursor: pointer;
}

.bwo-eil-item__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 2px;
}

/* Ícono */
.bwo-eil-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
    margin-inline-end: var(--bwo-eil-icon-gap, 10px);
    transform: translateY(var(--bwo-eil-icon-translate-y, 0px))
        rotate(var(--bwo-eil-icon-rotate, 0deg));
    transition:
        transform 0.25s ease,
        color 0.25s ease,
        fill 0.25s ease;
}

.bwo-eil-item__icon i {
    display: inline-block;
    line-height: 1;
}

.bwo-eil-item__icon svg {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    line-height: 1;
    box-sizing: border-box;
}

/* Texto */
.bwo-eil-item__text {
    display: inline-block;
    word-break: break-word;
    line-height: 1.4;
    transition: color 0.2s ease;
}

/* =======================================================
   MODOS DE DISPOSICIÓN: INDENTADO VS INLINE
   ======================================================= */

/* Modo Indentado (Viñeta Fija): el texto multilinea respeta el margen del ícono */
.elementor-widget-bwo-easy-icon-list.bwo-eil-layout--indented
    .bwo-eil-item__link,
.elementor-widget-bwo-easy-icon-list.bwo-eil-layout--indented
    .bwo-eil-item__content {
    align-items: flex-start;
}

.elementor-widget-bwo-easy-icon-list.bwo-eil-layout--indented
    .bwo-eil-item__text {
    flex: 1;
    min-width: 0;
}

.elementor-widget-bwo-easy-icon-list.bwo-eil-layout--indented
    .bwo-eil-item__icon {
    margin-top: 0.2em; /* Alineación óptica con la primera línea de texto */
}

/* Modo En Línea: Ícono y texto fluyen en línea horizontal continua */
.elementor-widget-bwo-easy-icon-list.bwo-eil-layout--inline .bwo-eil-item__link,
.elementor-widget-bwo-easy-icon-list.bwo-eil-layout--inline
    .bwo-eil-item__content {
    display: inline-flex;
    align-items: baseline;
    width: auto;
}

.elementor-widget-bwo-easy-icon-list.bwo-eil-layout--inline .bwo-eil-item {
    display: flex;
}

/* =======================================================
   ALINEACIONES
   ======================================================= */
.elementor-widget-bwo-easy-icon-list
    .bwo-eil-list[style*="text-align: center"]
    .bwo-eil-item,
.elementor-widget-bwo-easy-icon-list
    .bwo-eil-list[style*="text-align: center"]
    .bwo-eil-item__link,
.elementor-widget-bwo-easy-icon-list
    .bwo-eil-list[style*="text-align: center"]
    .bwo-eil-item__content {
    justify-content: center;
}

.elementor-widget-bwo-easy-icon-list
    .bwo-eil-list[style*="text-align: right"]
    .bwo-eil-item,
.elementor-widget-bwo-easy-icon-list
    .bwo-eil-list[style*="text-align: right"]
    .bwo-eil-item__link,
.elementor-widget-bwo-easy-icon-list
    .bwo-eil-list[style*="text-align: right"]
    .bwo-eil-item__content {
    justify-content: flex-end;
}