/* Page-specific styles for home.
   Keep page overrides here. The original exported design is loaded first from assets/css/global.css.
*/

/* Hero badge fix: keep the original text flow, only make the yellow background continuous. */
.rmx_home_hero_badge {
    display: inline-block !important;
    width: auto !important;
    max-width: calc(100vw - 32px);
    position: relative;
    background: var(--color-primary-yellow, #ffeb52);
    border-radius: var(--border-radius-full, 999px);
    padding: 0.25rem 1rem;
    line-height: 1.2;
}

.rmx_home_hero_badge .highlight_highlight__line__tcwGH {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.rmx_home_hero_badge .highlight_highlight__line__tcwGH:not(:last-child)::after {
    content: " ";
}

.rmx_home_hero_badge .highlight_has-emoji__OSZmy {
    position: relative;
    padding-right: 2.55em !important;
}

.rmx_home_hero_badge .highlight_highlight__emoji__HFjZ_ {
    position: absolute;
    right: 0.15rem;
    top: -0.28em;
    font-size: 2em;
    line-height: 1;
}

@media (max-width: 520px) {
    .rmx_home_hero_badge {
        padding: 0.35rem 0.95rem;
        line-height: 1.25;
    }
}

/* Full-width, smooth, responsive testimonial carousel. */
.rmx_testimonial_carousel {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: clamp(16px, 5vw, 72px);
    padding-right: clamp(16px, 5vw, 72px);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    overflow: visible !important;
}

.rmx_testimonial_carousel.rmx_is_dragging {
    cursor: grabbing;
}

.rmx_testimonial_carousel .swiper-wrapper {
    display: flex;
    gap: clamp(8px, 1vw, 14px);
    width: 100%;
    max-width: none;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    transform: none !important;
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;
    padding-block: 8px 16px;
}

.rmx_testimonial_carousel.rmx_is_dragging .swiper-wrapper {
    scroll-snap-type: none;
    scroll-behavior: auto;
    cursor: grabbing;
}

.rmx_testimonial_carousel .swiper-wrapper::-webkit-scrollbar {
    display: none;
}

.rmx_testimonial_carousel .swiper-slide {
    flex: 0 0 min(86vw, 360px) !important;
    width: min(86vw, 360px) !important;
    max-width: 360px;
    scroll-snap-align: start;
    transform: translateZ(0);
}

@media (min-width: 768px) {
    .rmx_testimonial_carousel .swiper-slide {
        flex-basis: 340px !important;
        width: 340px !important;
    }
}

@media (min-width: 1200px) {
    .rmx_testimonial_carousel .swiper-slide {
        flex-basis: 372px !important;
        width: 372px !important;
        max-width: 372px;
    }
}

.rmx_testimonial_carousel .swiper-button-prev,
.rmx_testimonial_carousel .swiper-button-next {
    display: flex;
    z-index: 12;
}

.rmx_testimonial_carousel .swiper-button-disabled {
    opacity: .55;
    pointer-events: auto;
}

/* Testimonial depth styling: only front/active cards stay white. */
.rmx_testimonial_carousel .swiper-wrapper {
    gap: clamp(4px, 0.55vw, 8px) !important;
}

.rmx_testimonial_carousel .swiper-slide {
    margin-right: 0 !important;
}

.rmx_testimonial_carousel .review_review__box__kzwVW {
    background: transparent !important;
    transition: background-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.rmx_testimonial_carousel .swiper-slide.rmx_testimonial_front .review_review__box__kzwVW,
.rmx_testimonial_carousel .swiper-slide.swiper-slide-active .review_review__box__kzwVW,
.rmx_testimonial_carousel .swiper-slide.swiper-slide-next .review_review__box__kzwVW {
    background: #ffffff !important;
}

.rmx_testimonial_carousel .swiper-slide:not(.rmx_testimonial_front) .review_review__box__kzwVW::before {
    background: transparent !important;
}

@media (min-width: 1024px) {
    .rmx_testimonial_carousel .swiper-slide {
        flex-basis: 350px !important;
        width: 350px !important;
    }
}