/* CPT popup — the pager, on popups that carry more than one page.
 *
 * Split out of frontend-card.css, which reached the 450-line ceiling. The band is its own
 * responsibility: the two buttons, the counter between them, and the room they sit in. Everything
 * is scoped under #popup.cil-popup-modal, the marker class frontend-trigger.js adds only when the
 * CPT popup opens, so the site's other sliders keep the arrows they already have. */

/* ---- the pager, on popups that have more than one page ----------------------------------- */

/* The slider draws its counter and arrows after the track, where the legacy stylesheet parks them
   at `top: calc(100% - 7px)` — under the old dialog, which did not clip. The card does clip, so
   left alone they fall past its rounded edge and vanish. They get a band of their own instead.
   A single-page popup has no pager to show, and `:has` is what asks whether a second page exists. */
#popup.cil-popup-modal .autoPopupSlider:has(.slick-slide + .slick-slide) {
    position: relative;
    padding-bottom: 52px;
}

/* The counter sits in the middle of the band, between the two buttons.
   Centred physically — `left: 50%` with a translate back — because a logical inset resolves to the
   opposite edge in Hebrew and then the translate pulls it further off rather than centring it. */
#popup.cil-popup-modal .slick-counter {
    position: absolute;
    bottom: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 52px;
    color: var(--cil-black-regular-7);
    font-size: 14px;
    line-height: 1.2;
}

/* One button in each bottom corner: back at the reading start, forward at the end. The theme's own
   arrow glyphs point the right way for that already — prev carries the right-facing arrow, which is
   backwards in Hebrew. */
#popup.cil-popup-modal .slick-prev,
#popup.cil-popup-modal .slick-next {
    position: absolute;
    top: auto;
    bottom: 12px;
    left: auto;
    right: auto;
    width: 28px;
    height: 28px;
    /* The theme scales every slick arrow on the site by 1.4. That is sized for the bare 20px glyphs
       it was written for, and it inflates these circles to 39px and blurs their background image. */
    scale: 1;
    /* slick's own rule carries `transform: translate(0, -50%)`, for arrows it pins at `top: 50%`.
       These are pinned to the bottom instead, so that translate only lifts them half their height
       above where they are placed — and any :active transform that replaces it drops them back
       down by that much, which is the jump. Cleared here so the button sits where it is put. */
    transform: none;
    /* Stated explicitly, and matched by the disabled rule below. The theme leaves an enabled arrow
       computing `display: flex` while the override for a disabled one said `block`, so the two
       states were different boxes and the glyph shifted as slick swapped the class mid-page-turn. */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--cil-black-light-2);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 12px;
    /* opacity included, or a button that becomes unusable simply pops from full to faint the
       instant slick retags it — the flicker seen when turning a page. */
    transition: background-color 0.22s ease, background-image 0.22s ease, opacity 0.28s ease;
}

/* The chevrons, and the black-circle hover the landing carousels use: a black glyph on a light disc
   that inverts to a white glyph on a black disc. Drawn inline rather than from the theme's arrow
   files because only a stroke colour changes between the two states, and an <img> cannot repaint.
   %23323333 is --cil-black; the site's own arrow assets are fixed-colour and could not invert. */
#popup.cil-popup-modal .slick-prev {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath d='M14 8l12 16-12 16' fill='none' stroke='%23323333' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#popup.cil-popup-modal .slick-next {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath d='M26 8L14 24l12 16' fill='none' stroke='%23323333' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#popup.cil-popup-modal .slick-prev:hover,
#popup.cil-popup-modal .slick-prev:focus-visible {
    background-color: var(--cil-black);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath d='M14 8l12 16-12 16' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#popup.cil-popup-modal .slick-next:hover,
#popup.cil-popup-modal .slick-next:focus-visible {
    background-color: var(--cil-black);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath d='M26 8L14 24l12 16' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#popup.cil-popup-modal .slick-prev:active,
#popup.cil-popup-modal .slick-next:active { transform: scale(0.94); }
#popup.cil-popup-modal .slick-prev { inset-inline-start: var(--cil-card-pad); }
#popup.cil-popup-modal .slick-next { inset-inline-end: var(--cil-card-pad); }

/* The legacy stylesheet removes an arrow the moment it has nowhere to go, which empties one corner
   of the band and leaves the counter looking off-centre against a single button. Both corners keep
   their button; the one that cannot be used is dimmed and takes no clicks. `!important` only to
   answer the `display: none !important` it is overriding. */
#popup.cil-popup-modal .slick-prev.slick-disabled,
#popup.cil-popup-modal .slick-next.slick-disabled {
    display: flex !important;
    opacity: 0.3;
    pointer-events: none;
}
#popup.cil-popup-modal .slick-prev:focus-visible,
#popup.cil-popup-modal .slick-next:focus-visible {
    outline: 3px solid var(--cil-blue-dark-1);
    outline-offset: 2px;
}
/* A single page keeps no pager at all: no band, no counter. */
#popup.cil-popup-modal .autoPopupSlider:not(:has(.slick-slide + .slick-slide)) .slick-counter {
    display: none;
}

/* ---- inside a split card ------------------------------------------------------------------
   The band belongs to the text panel, not to the whole card: its buttons must not stray over the
   picture, and the picture must not give up its bottom edge to make room for them. So the slider
   stops reserving the band across the full width, the text panel reserves it inside its own
   padding instead, and the three parts are placed within that half.

   The counter is centred on a percentage of the card, which has no reading direction of its own —
   hence the is-rtl branch, set from the element's computed direction when the popup opens. */

@media (min-width: 900px) {
    /* The picture can now run the full height of the card. */
    #popup.cil-popup-modal.is-split .autoPopupSlider:has(.slick-slide + .slick-slide) {
        padding-bottom: 0;
    }
    #popup.cil-popup-modal.is-split .cil-popup-card__content {
        padding-bottom: calc(var(--cil-card-pad) + 52px);
    }

    /* Back stays at the panel's outer corner; forward moves in to the card's midline. */
    #popup.cil-popup-modal.is-split .slick-next {
        inset-inline-end: calc(50% + var(--cil-card-pad));
    }

    /* The middle of the text half: three quarters across when the text is on the right. */
    #popup.cil-popup-modal.is-split.is-rtl .slick-counter { left: 75%; }
    #popup.cil-popup-modal.is-split:not(.is-rtl) .slick-counter { left: 25%; }
}