/**
 * 2025-2026 CyliumDev
 * @license   Proprietary - Non-commercial use only
 *
 * Icon boxes widget (cyliumee-iconboxes handle).
 * Split out of front.css so a page only pays for the widgets it renders;
 * depends on 'cyliumee-front' (shared commons) for cascade order.
 */

.cyliumee-icob {
    position: relative;
    width: 100%;
}

.cyliumee-icob__swiper {
    position: relative;
    overflow: hidden;
}

.cyliumee-icob__item {
    height: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.cyliumee-icob--layout-inline .cyliumee-icob__item {
    flex-direction: row;
    gap: 16px;
    text-align: left;
}

.cyliumee-icob__link {
    display: flex;
    flex-direction: inherit;
    align-items: center;
    justify-content: center;
    gap: inherit;
    color: inherit;
    text-decoration: none;
    width: 100%;
}

.cyliumee-icob__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* CE inlines an uploaded SVG rather than serving it as an image, so it has to be
   sized in em to follow the "Icon size" setting and take currentColor to follow
   the "Icon color" one — neither of which an <img> could ever do. */
.cyliumee-icob__icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.cyliumee-icob__body {
    min-width: 0;
}

.cyliumee-icob__title {
    margin: 0 0 4px;
    line-height: 1.2;
}

.cyliumee-icob__desc {
    margin: 0;
    line-height: 1.4;
}

.cyliumee-icob .cyliumee-icob__nav,
.cyliumee-icob button.cyliumee-icob__nav {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: absolute !important;
    top: 50% !important;
    z-index: 10;
    display: none !important; /* shown only when .cyliumee-icob--mobile */
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    width: var(--cee-icob-arrow-size, 36px) !important;
    height: var(--cee-icob-arrow-size, 36px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: calc(var(--cee-icob-arrow-size, 36px) / -2) 0 0 0 !important;
    padding: 0 !important;
    color: var(--cee-icob-arrow, #fff) !important;
    background: var(--cee-icob-arrow-bg, rgba(0,0,0,0.35)) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-size: 0 !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.cyliumee-icob.cyliumee-icob--mobile .cyliumee-icob__nav {
    display: inline-flex !important;
}

.cyliumee-icob .cyliumee-icob__nav:hover,
.cyliumee-icob .cyliumee-icob__nav:focus {
    background: var(--cee-icob-arrow-bg-hover, rgba(0,0,0,0.6)) !important;
    outline: 0 !important;
}

.cyliumee-icob .cyliumee-icob__nav--prev { left: 4px !important; right: auto !important; }

.cyliumee-icob .cyliumee-icob__nav--next { right: 4px !important; left: auto !important; }

.cyliumee-icob .cyliumee-icob__nav--disabled { opacity: 0; pointer-events: none; }

.cyliumee-icob .cyliumee-icob__nav svg { display: block; width: 40%; height: 40%; }

.cyliumee-icob__pagination {
    position: relative;
    margin-top: 12px;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
}

.cyliumee-icob.cyliumee-icob--mobile .cyliumee-icob__pagination {
    display: flex;
}

.cyliumee-icob__pagination--clickable .cyliumee-icob__bullet { pointer-events: auto; }

.cyliumee-icob__bullet {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: var(--cee-icob-dot, rgba(0,0,0,0.25));
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.cyliumee-icob__bullet--active {
    background: var(--cee-icob-dot-active, #1a1a1a);
    transform: scale(1.25);
}