/* ════════════════════════════════════════════════════════════════════════
   zSwiper_demo.css — a ONE-OFF boarding-pass deck (opt in: zBrush [page, leaf, demo.zSwiper_demo]).
   Proof for the Swipers leaf's "_zClass — your own look" lesson: hand a zSwiper a
   class YOU wrote and the stock deck steps aside. Deliberately travel-y —
   gradient ticket card, glowing dots, pill chevrons — so it reads as clearly
   NOT a default swiper.
   ════════════════════════════════════════════════════════════════════════ */
/* _zClass lands on a wrapper <div>; the widget inside it is
   .zCarousel-wrapper > .zCarousel-label + .zCarousel > .zCarousel-inner >
   .zCarousel-item > .zCarousel-slide, with .zCarousel-control-prev/next
   chevrons and .zCarousel-indicators dots — so every rule scopes under
   .demo-deck, never bare. */

.demo-deck .zCarousel-label {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size:      0.8rem;
    color:          #a5b4fc;
}
.demo-deck .zCarousel-slide {
    border:        1px solid rgba(129, 140, 248, 0.45);
    border-radius: 14px;
    background:    linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(14, 165, 233, 0.10));
    box-shadow:    0 8px 28px rgba(99, 102, 241, 0.18);
    font-weight:   600;
    min-height:    7rem;
}
.demo-deck .zCarousel-control-prev,
.demo-deck .zCarousel-control-next {
    border:        1px solid rgba(129, 140, 248, 0.5);
    border-radius: 999px;
    background:    rgba(30, 27, 75, 0.65);
}
.demo-deck .zCarousel-indicators button {
    width:         0.6rem;
    height:        0.6rem;
    border-radius: 50%;
    background:    rgba(129, 140, 248, 0.35);
}
.demo-deck .zCarousel-indicators button.zActive {
    background: #818cf8;
    box-shadow: 0 0 10px rgba(129, 140, 248, 0.9);
}