/* Reviews component styles: fixed-width cards (300px) with 5px gap,
   no shadow, no border. Uses background helper classes duplicated
   from theme.css but scoped to .cards-reviews. */

.reviews-icons { overflow: hidden; display: block; margin: 0 auto; }
.reviews-track { display: flex; gap: 5px; align-items: flex-start; transition: transform 600ms ease; }

.cards-reviews { 
    box-shadow: none !important; 
    border: none !important; 
    width: 280px; 
    min-width: 280px; 
    height: 250px; 
    min-height: 250px; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    background-color: var(--background-eggshell);
    position: relative;
}

/* Duplicate small set of background helper variants for cards */
.cards-reviews.background-eggshell { background-color: var(--background-eggshell); }
.cards-reviews.background-white { background-color: var(--background-white); }
.cards-reviews.background-margins { margin: 0; }
.cards-reviews.background-spacing { padding: 1rem; }
.cards-reviews.background-corners { border-radius: 8px; }

.cards-reviews .review-stars { display:flex; justify-content:center; align-items:center; }
.cards-reviews .reviews-text { color: var(--text-muted); text-align: center; flex: 1 1 auto; overflow: auto; font-size: .90rem;}
.cards-reviews .reviews-muted { color: var(--text-black); margin-left: 20px; margin-top: 0.5rem; font-size: .90rem; font-weight: 800;}

/* remove default article margins inside the cards */
.cards-reviews h4, .cards-reviews p { margin: 0; }

/* Pause on hover is handled by JS, but provide a visual pointer */
.reviews-icons:hover { cursor: default; }

/* small badge image placed bottom-right inside each card */
.cards-reviews .review-badge { position: absolute; right: 8px; bottom: 8px; width: 100px; height: auto; display: block; opacity: 0.5; }

/* carousel controls (prev/next) positioned either side of the visible window */
.reviews-icons { overflow: hidden; display: block; margin: 0 auto; position: relative; }
.reviews-control { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 6px; background: rgba(0,0,0,0.45); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.reviews-control svg { width: 18px; height: 18px; }
.reviews-control.prev { left: -46px; }
.reviews-control.next { right: -46px; }

@media (max-width: 900px) {
    .reviews-control.prev { left: -36px; }
    .reviews-control.next { right: -36px; }
}

@media (max-width: 900px) {
    .cards-reviews { width: 260px; min-width: 260px; height: 200px; min-height:200px; }
}