.rainbow-slider {
    width: 100%;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transition: opacity .1s ease; /* Faster base transition, animation handles the rest */
    min-height: 50px;
}

.rainbow-slider.rainbow-loaded { opacity: 1; }

/* --- First Slide Animations --- */
.rainbow-slider.rainbow-loaded.rs-first-anim-fade-in { animation: rsFadeIn 1s ease forwards; }
.rainbow-slider.rainbow-loaded.rs-first-anim-zoom-in { animation: rsZoomIn 1s ease forwards; }
.rainbow-slider.rainbow-loaded.rs-first-anim-zoom-out { animation: rsZoomOut 1s ease forwards; }
.rainbow-slider.rainbow-loaded.rs-first-anim-slide-up { animation: rsSlideUp 1s ease forwards; }
.rainbow-slider.rainbow-loaded.rs-first-anim-slide-down { animation: rsSlideDown 1s ease forwards; }
.rainbow-slider.rainbow-loaded.rs-first-anim-slide-left { animation: rsSlideLeft 1s ease forwards; }
.rainbow-slider.rainbow-loaded.rs-first-anim-slide-right { animation: rsSlideRight 1s ease forwards; }
.rainbow-slider.rainbow-loaded.rs-first-anim-flip-x { animation: rsFlipX 1s ease forwards; }
.rainbow-slider.rainbow-loaded.rs-first-anim-flip-y { animation: rsFlipY 1s ease forwards; }

/* Keyframes */
@keyframes rsFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rsZoomIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
@keyframes rsZoomOut { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: scale(1); } }
@keyframes rsSlideUp { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rsSlideDown { from { opacity: 0; transform: translateY(-100px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rsSlideLeft { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }
@keyframes rsSlideRight { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); } }
@keyframes rsFlipX { from { opacity: 0; transform: perspective(400px) rotateX(90deg); } to { opacity: 1; transform: perspective(400px) rotateX(0); } }
@keyframes rsFlipY { from { opacity: 0; transform: perspective(400px) rotateY(90deg); } to { opacity: 1; transform: perspective(400px) rotateY(0); } }

/* Normal Styles */
.rainbow-slider .swiper-wrapper { display: flex; z-index: 1; }
.rainbow-slider .swiper-slide { height: auto; width: 100%; flex-shrink: 0; position: relative; display: block; }
.rainbow-slider .swiper-slide > * { width: 100% !important; height: 100%; }

/* Navigation Arrows */
.rainbow-slider .swiper-button-prev::after, .rainbow-slider .swiper-button-next::after { display: none !important; }

.rainbow-slider .swiper-button-prev, .rainbow-slider .swiper-button-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: auto !important; height: auto !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    min-width: 40px; min-height: 40px;
    color: #000; z-index: 99999 !important; 
    cursor: pointer !important; margin-top: 0 !important;
    transition: all 0.3s ease;
    pointer-events: auto !important; border: none; padding: 0; background: transparent;
}
.rainbow-slider .swiper-button-prev { left: 10px; right: auto; }
.rainbow-slider .swiper-button-next { right: 10px; left: auto; }

/* Disable pointer events on children so parent receives click */
.rainbow-slider .swiper-button-prev *, .rainbow-slider .swiper-button-next * { pointer-events: none !important; }

.rainbow-slider .swiper-button-prev svg, .rainbow-slider .swiper-button-next svg,
.rainbow-slider .swiper-button-prev i, .rainbow-slider .swiper-button-next i {
    width: 20px; height: 20px; font-size: 20px; fill: currentColor; 
    transition: transform 0.3s ease; display: block; flex-shrink: 0;
}
.rainbow-slider .swiper-button-prev img, .rainbow-slider .swiper-button-next img {
    width: 60%; height: 60%; object-fit: contain; display: block; transition: transform 0.3s ease; flex-shrink: 0;
}

/* Navigation Styles */
.rainbow-nav-view-stacked .swiper-button-prev, .rainbow-nav-view-stacked .swiper-button-next { background-color: rgba(0,0,0,0.5); color: #fff; }
.rainbow-nav-view-framed .swiper-button-prev, .rainbow-nav-view-framed .swiper-button-next { background-color: transparent; border: 2px solid #000; color: #000; }
.rainbow-nav-shape-circle .swiper-button-prev, .rainbow-nav-shape-circle .swiper-button-next { border-radius: 50%; }
.rainbow-nav-shape-square .swiper-button-prev, .rainbow-nav-shape-square .swiper-button-next { border-radius: 0; }
.rainbow-nav-shape-round .swiper-button-prev, .rainbow-nav-shape-round .swiper-button-next { border-radius: 5px; }

/* Pagination Styles */
.rainbow-slider .swiper-pagination {
    position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; z-index: 99999 !important;
}
.rainbow-slider .swiper-pagination-bullet {
    width: auto; height: auto; background: transparent; opacity: 1; border-radius: 0;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 5px; transition: all 0.3s ease;
    cursor: pointer !important; pointer-events: auto !important;
}
.rainbow-slider .swiper-pagination-bullet * { pointer-events: none !important; }

.rainbow-slider .swiper-pagination-bullet svg, .rainbow-slider .swiper-pagination-bullet i {
    width: 12px; height: 12px; font-size: 12px; fill: currentColor; opacity: 0.5; transition: transform 0.3s ease;
}
.rainbow-slider .swiper-pagination-bullet-active svg, .rainbow-slider .swiper-pagination-bullet-active i { opacity: 1; }

.rainbow-slider .swiper-pagination-bullet img {
    width: 20px; height: 20px; object-fit: contain; opacity: 0.5; transition: transform 0.3s ease;
}
.rainbow-slider .swiper-pagination-bullet-active img { opacity: 1; }

/* Pagination Variants */
.rainbow-pag-view-stacked .swiper-pagination-bullet { background: rgba(0,0,0,0.2); padding: 5px; }
.rainbow-pag-view-stacked .swiper-pagination-bullet-active { background: rgba(0,0,0,0.6); }
.rainbow-pag-view-framed .swiper-pagination-bullet { border: 1px solid #ccc; padding: 4px; }
.rainbow-pag-view-framed .swiper-pagination-bullet-active { border-color: #000; }
.rainbow-pag-shape-circle .swiper-pagination-bullet { border-radius: 50%; }
.rainbow-pag-shape-square .swiper-pagination-bullet { border-radius: 0; }
.rainbow-pag-shape-round .swiper-pagination-bullet { border-radius: 4px; }