/* 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 carousel draws its counter and arrows after the track (design-system/carousel.php). The card
   clips, so they get a band of their own under the page rather than sitting over its edge.
   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(.cil-carousel__track > * + *) {
    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 .cil-carousel__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 .cil-carousel__arrow--prev,
#popup.cil-popup-modal .cil-carousel__arrow--next {
    position: absolute;
    top: auto;
    bottom: 12px;
    left: auto;
    right: auto;
    width: 28px;
    height: 28px;
    /* The older pages' carousel arrows are scaled by 1.4 (carousel.css). 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;
    /* carousel.css carries `transform: translateY(-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 a page turned. */
    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;
    /* The design frames the caret in a 20 box, where the mark itself is 12.5
       tall. Sizing the image to that frame is what draws it at 12.5. */
    background-size: 20px 20px;
    /* opacity included, or a button that becomes unusable simply pops from full to faint the
       instant it is disabled — the flicker seen when turning a page. */
    transition: background-color 0.22s ease, background-image 0.22s ease, opacity 0.28s ease;
}

/* Phosphor CaretRight, as the design exports it — the same mark the header steps through the
   catalogue with, in place of the three-point chevron this file used to draw for itself. The one
   pointing back is that mark mirrored, rather than a second path to keep in step.

   Still drawn inline rather than from the theme's arrow files: the black-circle hover the landing
   carousels use inverts the glyph to white, and an <img> cannot repaint. %23323333 is --cil-black.
   The design draws the resting caret in #606262 (--cil-black-regular-7), lighter than this; kept
   black here because the hover inverts against it, which the design's single state does not say. */
#popup.cil-popup-modal .cil-carousel__arrow--prev {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><g transform='translate%2820%2C0%29 scale%28-1%2C1%29'><path fill='%23323333' d='M13.8901 10.4824L7.0742 17.3002C6.80787 17.5666 6.37608 17.5666 6.10975 17.3002C5.84342 17.0338 5.84342 16.6019 6.10975 16.3355L12.4443 10L6.10975 3.66453C5.84342 3.39812 5.84342 2.96621 6.10975 2.69981C6.37608 2.4334 6.80787 2.4334 7.0742 2.69981L13.8901 9.51764C14.0181 9.64556 14.09 9.81907 14.09 10C14.09 10.1809 14.0181 10.3544 13.8901 10.4824Z'/></g></svg>");
}
#popup.cil-popup-modal .cil-carousel__arrow--next {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%23323333' d='M13.8901 10.4824L7.0742 17.3002C6.80787 17.5666 6.37608 17.5666 6.10975 17.3002C5.84342 17.0338 5.84342 16.6019 6.10975 16.3355L12.4443 10L6.10975 3.66453C5.84342 3.39812 5.84342 2.96621 6.10975 2.69981C6.37608 2.4334 6.80787 2.4334 7.0742 2.69981L13.8901 9.51764C14.0181 9.64556 14.09 9.81907 14.09 10C14.09 10.1809 14.0181 10.3544 13.8901 10.4824Z'/></svg>");
}
#popup.cil-popup-modal .cil-carousel__arrow--prev:hover,
#popup.cil-popup-modal .cil-carousel__arrow--prev:focus-visible {
    background-color: var(--cil-black);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><g transform='translate%2820%2C0%29 scale%28-1%2C1%29'><path fill='%23ffffff' d='M13.8901 10.4824L7.0742 17.3002C6.80787 17.5666 6.37608 17.5666 6.10975 17.3002C5.84342 17.0338 5.84342 16.6019 6.10975 16.3355L12.4443 10L6.10975 3.66453C5.84342 3.39812 5.84342 2.96621 6.10975 2.69981C6.37608 2.4334 6.80787 2.4334 7.0742 2.69981L13.8901 9.51764C14.0181 9.64556 14.09 9.81907 14.09 10C14.09 10.1809 14.0181 10.3544 13.8901 10.4824Z'/></g></svg>");
}
#popup.cil-popup-modal .cil-carousel__arrow--next:hover,
#popup.cil-popup-modal .cil-carousel__arrow--next:focus-visible {
    background-color: var(--cil-black);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%23ffffff' d='M13.8901 10.4824L7.0742 17.3002C6.80787 17.5666 6.37608 17.5666 6.10975 17.3002C5.84342 17.0338 5.84342 16.6019 6.10975 16.3355L12.4443 10L6.10975 3.66453C5.84342 3.39812 5.84342 2.96621 6.10975 2.69981C6.37608 2.4334 6.80787 2.4334 7.0742 2.69981L13.8901 9.51764C14.0181 9.64556 14.09 9.81907 14.09 10C14.09 10.1809 14.0181 10.3544 13.8901 10.4824Z'/></svg>");
}
#popup.cil-popup-modal .cil-carousel__arrow--prev:active,
#popup.cil-popup-modal .cil-carousel__arrow--next:active { transform: scale(0.94); }
#popup.cil-popup-modal .cil-carousel__arrow--prev { inset-inline-start: var(--cil-card-pad); }
#popup.cil-popup-modal .cil-carousel__arrow--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 .cil-carousel__arrow--prev:disabled,
#popup.cil-popup-modal .cil-carousel__arrow--next:disabled {
    display: flex !important;
    opacity: 0.3;
    pointer-events: none;
}
#popup.cil-popup-modal .cil-carousel__arrow--prev:focus-visible,
#popup.cil-popup-modal .cil-carousel__arrow--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(.cil-carousel__track > * + *)) .cil-carousel__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(.cil-carousel__track > * + *) {
        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 .cil-carousel__arrow--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 .cil-carousel__counter { left: 75%; }
    #popup.cil-popup-modal.is-split:not(.is-rtl) .cil-carousel__counter { left: 25%; }
}