/**
 * 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%;
    /* Room the arrows need on each side. Derived from the arrow size rather than
       hard-coded, so the merchant's "Arrow size" setting carries the gutter with
       it and the two can never disagree. 12px = the 4px inset of the arrow plus
       8px of clearance before the text. */
    --cee-icob-nav-gutter: calc(var(--cee-icob-arrow-size, 36px) + 12px);
}

.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;
}

/* Theme 'swiper' keeps the slider — and therefore its arrows — at every width,
   which is the whole point of that preset; 'classic' only shows them once the
   block is narrow enough to have collapsed (.cyliumee-icob--mobile). */
.cyliumee-icob.cyliumee-icob--mobile .cyliumee-icob__nav,
.cyliumee-icob.cyliumee-icob--swiper .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;
    /* Falls back to the normal arrow colour, so leaving the hover colour empty
       behaves exactly as before this field was wired up. */
    color: var(--cee-icob-arrow-hover, var(--cee-icob-arrow, #ffffff)) !important;
    outline: 0 !important;
}

/* 🔴 THE ARROWS SAT ON TOP OF THE TEXT. Seen on a live category page: the right
   arrow landed exactly over "entrepôt" in a centred description, so the line read
   as truncated — "…dans notre ent" then "en France" on the next line.
   They cannot simply be pushed outwards: they are absolutely positioned inside
   .cyliumee-icob__swiper, and its `overflow: hidden` clips at the PADDING box, so
   anything beyond it disappears. The track gets a gutter instead. An absolutely
   positioned child is offset from the padding box, so `left: 4px` still puts each
   arrow at the outer edge — now INSIDE the gutter — while the slides start after
   it. Nothing overlaps and neither rule had to learn about the other.
   Swiper subtracts the container's padding when it sizes the slides. Verified
   rather than assumed: a 400px container with 48px on each side produced slides
   of exactly 304px. So the widths stay coherent and no translation drifts.
   `:has()` gates it: the arrows are only emitted when the merchant asks for them
   AND there is more than one item, so a widget without them must not lose a
   single pixel. Already an idiom in this codebase. Both selectors mirror the two
   conditions of the rule that shows the arrows, above — if one changes, the other
   has to, and they are deliberately kept next to each other. */
.cyliumee-icob--mobile .cyliumee-icob__swiper:has(> .cyliumee-icob__nav),
.cyliumee-icob--swiper .cyliumee-icob__swiper:has(> .cyliumee-icob__nav) {
    padding-inline: var(--cee-icob-nav-gutter);
}

.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,
.cyliumee-icob.cyliumee-icob--swiper .cyliumee-icob__pagination {
    display: flex;
}

/* Free-mode dragging needs the finger gesture to belong to the slider: without
   this the browser claims the horizontal pan for page scrolling on touch, and
   the bar barely moves. `pan-y` keeps VERTICAL page scrolling working, so the
   shopper can still scroll past the bar with a finger on it. */
.cyliumee-icob.cyliumee-icob--swiper .cyliumee-icob__swiper {
    touch-action: pan-y;
}

/* Swiper computes the slide widths itself in this mode; a grid preset's column
   rules would fight it. Nothing to reset for 'classic' — it is not a grid. */
.cyliumee-icob.cyliumee-icob--swiper .swiper-slide {
    height: auto;
}

.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);
}

/* ─────────────────────────────────────────────────────────────────────────
 * 🔴 NEUTRALISING A GLOBAL CREATIVE ELEMENTS RULE THAT IS NOT MEANT FOR US
 *
 *   .elementor-widget .swiper-slide > :not(.swiper-lazy-preloader)
 *       { min-width: 100%; padding: 0 !important }
 *   — creativeelements/views/css/widget-image-carousel.min.css, CE 2.14.0
 *
 * It is written for the IMAGE CAROUSEL, where a slide holds one image that must
 * fill it. But it matches ANY `.swiper-slide` inside ANY `.elementor-widget`, so
 * it hits ours too — and here the slide IS the icon box
 * (`.swiper-slide.cyliumee-icob__item`), so its children are the icon span and
 * the text block. Forcing `min-width: 100%` on the icon span makes it as wide as
 * the whole slide, which pushes the text out of the box and clips it.
 *
 * 🔴 THIS IS ALSO WHY THE EDITOR LOOKED NOTHING LIKE THE FRONT. That stylesheet
 * is per-widget: the front only loads it on a page that really contains an image
 * carousel, while the editor preview preloads every widget stylesheet. Same
 * markup, different CSS set — which is exactly the shape of a bug that "only
 * happens in the editor".
 *
 * The class is REPEATED to raise specificity to 0,4,0 against CE's 0,3,0 —
 * deliberately, instead of `!important`: source order between two third-party
 * stylesheets is not something we control, and `min-width` is not the declaration
 * CE marked important. Scoped to `.cyliumee-icob`, so the image carousel and
 * every other widget that relies on that rule are untouched.
 * ───────────────────────────────────────────────────────────────────────── */

.cyliumee-icob.cyliumee-icob .swiper-slide > :not(.swiper-lazy-preloader) {
    min-width: 0;
}