/**
 * CyliumElementorExtras — "Pricing cards" styles.
 *
 * Dedicated named asset ("cyliumee-prices"), only loaded on pages that
 * render the widget. BEM: .cyliumee-prices__*.
 *
 * Pack cards: image, "most chosen" full-width banner badge, title, subtitle,
 * check list, price + old price + discount pill, full-width button. Featured
 * card gets an accent border. Dark rounded cards by default.
 *
 * Colors / sizes come from inline CSS vars set by the widget render()
 * (every var is optional; fallbacks below = reference design defaults):
 *   --cee-pr-cols (+ -tablet / -mobile),
 *   --cee-pr-card-bg, --cee-pr-card-radius, --cee-pr-card-padding,
 *   --cee-pr-card-border, --cee-pr-card-border-color, --cee-pr-feat-border,
 *   --cee-pr-badge-bg, --cee-pr-badge-text,
 *   --cee-pr-title-color, --cee-pr-subtitle-color,
 *   --cee-pr-check-color, --cee-pr-check-icon, --cee-pr-check-size,
 *   --cee-pr-price-color, --cee-pr-price-size,
 *   --cee-pr-old-color, --cee-pr-old-size,
 *   --cee-pr-pill-bg, --cee-pr-pill-text,
 *   --cee-pr-btn-bg, --cee-pr-btn-text, --cee-pr-btn-radius,
 *   --cee-pr-btn-bg-hover, --cee-pr-btn-text-hover.
 */

/* ------------------------------------------------------------------ Grid */

.cyliumee-prices {
    display: grid;
    grid-template-columns: repeat(var(--cee-pr-cols, 3), minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 1023.98px) {
    .cyliumee-prices {
        grid-template-columns: repeat(var(--cee-pr-cols-tablet, var(--cee-pr-cols, 2)), minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .cyliumee-prices {
        grid-template-columns: repeat(var(--cee-pr-cols-mobile, 1), minmax(0, 1fr));
    }
}

/* --------------------------------------------------- Mobile/tablet slider */

/* CSS-only scroll-snap track. One modifier per breakpoint, so the tablet can
   keep the grid while the mobile slides. Placed after the grid media queries
   so the flex display wins the cascade at equal specificity.

   Widths are percentages of the track and never a px cap: capping the card at
   320px on a 750px tablet left a 215px void on each side of the swiper type. */

@media (max-width: 1023.98px) {
    .cyliumee-prices--snap-tablet,
    .cyliumee-prices--snap-mobile.cyliumee-prices--snap-tablet {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .cyliumee-prices--snap-tablet > .cyliumee-prices__card {
        flex: 0 0 var(--cee-pr-snap-w, 100%);
        scroll-snap-align: var(--cee-pr-snap-align, start);
    }

    .cyliumee-prices--snap-tablet::-webkit-scrollbar {
        height: 6px;
    }

    /* One card at a time, edge to edge. */
    .cyliumee-prices--snap-tablet.cyliumee-prices--snap-standard {
        --cee-pr-snap-w: 100%;
    }

    /* The next card shows enough to say "swipe me". */
    .cyliumee-prices--snap-tablet.cyliumee-prices--snap-peek {
        --cee-pr-snap-w: 62%;
    }

    /* Centered: the side padding is what lets the first and last cards reach
       the middle of the track. */
    .cyliumee-prices--snap-tablet.cyliumee-prices--snap-swiper {
        --cee-pr-snap-w: 58%;
        --cee-pr-snap-align: center;
        padding-inline: calc((100% - var(--cee-pr-snap-w)) / 2);
    }
}

@media (max-width: 767.98px) {
    .cyliumee-prices--snap-mobile {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .cyliumee-prices--snap-mobile > .cyliumee-prices__card {
        flex: 0 0 var(--cee-pr-snap-w, 100%);
        scroll-snap-align: var(--cee-pr-snap-align, start);
    }

    .cyliumee-prices--snap-mobile::-webkit-scrollbar {
        height: 6px;
    }

    .cyliumee-prices--snap-mobile.cyliumee-prices--snap-standard {
        --cee-pr-snap-w: 100%;
    }

    .cyliumee-prices--snap-mobile.cyliumee-prices--snap-peek {
        --cee-pr-snap-w: 84%;
    }

    .cyliumee-prices--snap-mobile.cyliumee-prices--snap-swiper {
        --cee-pr-snap-w: 82%;
        --cee-pr-snap-align: center;
        padding-inline: calc((100% - var(--cee-pr-snap-w)) / 2);
    }
}

/* Swiper type: the card sitting in the middle is highlighted, the neighbours
   step back. The active card is tagged by views/js/prices.js — a scroll-driven
   animation was tried first and dropped, view() timelines are not applied
   reliably inside a snap container. Without the script every card simply stays
   at full size, which is still a correct centered slider. */
@media (max-width: 1023.98px) {
    .cyliumee-prices--snap-tablet.cyliumee-prices--snap-swiper > .cyliumee-prices__card {
        transform: scale(0.92);
        opacity: 0.65;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .cyliumee-prices--snap-tablet.cyliumee-prices--snap-swiper > .cyliumee-prices__card--active {
        transform: scale(1);
        opacity: 1;
    }
}

/* Scoped per breakpoint, and not once for both: with the tablet slider off the
   track is still a grid at tablet width, and dimming its cards there would be
   wrong. */
@media (max-width: 767.98px) {
    .cyliumee-prices--snap-mobile.cyliumee-prices--snap-swiper > .cyliumee-prices__card {
        transform: scale(0.92);
        opacity: 0.65;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .cyliumee-prices--snap-mobile.cyliumee-prices--snap-swiper > .cyliumee-prices__card--active {
        transform: scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cyliumee-prices--snap-swiper > .cyliumee-prices__card {
        transition: none;
    }
}

/* ------------------------------------------------------------------ Card */

.cyliumee-prices__card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--cee-pr-card-bg, #1f1f1f);
    border: var(--cee-pr-card-border, 1px) solid var(--cee-pr-card-border-color, transparent);
    border-radius: var(--cee-pr-card-radius, 18px);
    padding: var(--cee-pr-card-padding, 0);
}

.cyliumee-prices__card--featured {
    border-color: var(--cee-pr-feat-border, #2fb5d2);
}

/* Full-width banner badge overlaid on top of the card (over the media), so a
   featured card keeps exactly the same height as the others. The card is
   position:relative + overflow:hidden, which anchors and clips the overlay. */
.cyliumee-prices__badge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 6px;
    background: var(--cee-pr-badge-bg, #2fb5d2);
    color: var(--cee-pr-badge-text, #fff);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 12px;
}

/* ----------------------------------------------------------------- Media */

.cyliumee-prices__media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ------------------------------------------------------------------ Body */

.cyliumee-prices__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 20px 22px;
}

.cyliumee-prices__title {
    margin: 0 0 0.35em;
    color: var(--cee-pr-title-color, #fff);
}

.cyliumee-prices__subtitle {
    color: var(--cee-pr-subtitle-color, #c9c9cf);
    margin-bottom: 0.9em;
}

/* ---------------------------------------------------------------- Checks */

.cyliumee-prices__checks {
    list-style: none;
    padding: 0;
    margin: 0 0 1em;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cyliumee-prices__check {
    position: relative;
    padding-left: 1.5em;
    color: var(--cee-pr-check-color, #e4e4e7);
}

.cyliumee-prices__check::before {
    content: "\2713";
    position: absolute;
    left: 0;
    font-weight: 700;
    font-size: var(--cee-pr-check-size, 16px);
    color: var(--cee-pr-check-icon, #2eba15);
}

/* Custom icon (ICONS control): the rendered <i>/<svg> replaces the default
   "✓" ::before. Color and size follow the same vars as the default mark. */
.cyliumee-prices__checks--custom-icon .cyliumee-prices__check::before {
    content: none;
}

.cyliumee-prices__checks--custom-icon .cyliumee-prices__check {
    padding-left: calc(var(--cee-pr-check-size, 16px) + 8px);
}

.cyliumee-prices__check-icon {
    position: absolute;
    left: 0;
    color: var(--cee-pr-check-icon, #2eba15);
    font-size: var(--cee-pr-check-size, 16px);
    line-height: inherit;
}

.cyliumee-prices__check-icon svg {
    width: var(--cee-pr-check-size, 16px);
    height: var(--cee-pr-check-size, 16px);
    fill: currentColor;
    vertical-align: middle;
}

/* ----------------------------------------------------------------- Price */

/* margin-top: auto pushes the price + button block to the card bottom, so
   all cards in a row keep their CTAs aligned whatever the content height. */
.cyliumee-prices__price-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: auto;
}

.cyliumee-prices__price {
    color: var(--cee-pr-price-color, #fff);
    font-size: var(--cee-pr-price-size, 28px);
    font-weight: 800;
}

.cyliumee-prices__price-old {
    color: var(--cee-pr-old-color, #8b8b92);
    font-size: var(--cee-pr-old-size, 15px);
    text-decoration: line-through;
}

.cyliumee-prices__pill {
    background: var(--cee-pr-pill-bg, #2fb5d2);
    color: var(--cee-pr-pill-text, #fff);
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}

/* ---------------------------------------------------------------- Footer */

.cyliumee-prices__footer {
    margin-top: 14px;
}

.cyliumee-prices__footer form {
    margin: 0;
}

/* Works for both <button> and <a> CTAs. */
/* Layout only: the card button spans the footer whatever its type. */
.cyliumee-prices__button {
    display: block;
    width: 100%;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* THE WIDGET'S OWN LOOK — only when NO button type is chosen (Content > Button
   type). A type puts `.elementor-button` (CE kit) or `.btn` (shop theme) on the
   button and that global style then owns the paint AND the box; keeping our
   padding, border, radius and weight outside this guard would crush the theme's
   geometry in every case — the bug the image slider had. */
.cyliumee-prices__button:not(.elementor-button):not(.btn) {
    padding: 14px 18px;
    background: var(--cee-pr-btn-bg, #2fb5d2);
    color: var(--cee-pr-btn-text, #fff);
    border: 0;
    border-radius: var(--cee-pr-btn-radius, 10px);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cyliumee-prices__button:not(.elementor-button):not(.btn):hover,
.cyliumee-prices__button:not(.elementor-button):not(.btn):focus {
    background: var(--cee-pr-btn-bg-hover, #2695ad);
    color: var(--cee-pr-btn-text-hover, #fff);
}

.cyliumee-prices__button:not(.elementor-button):not(.btn):focus-visible {
    outline: 2px solid var(--cee-pr-btn-bg, #2fb5d2);
    outline-offset: 2px;
}

/* ------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .cyliumee-prices__button {
        transition: none;
    }
}