/* Two separate, independently-built review widgets share this page:

   1. .review-slider-container > .review-cards > .rld-testimonial-card
      - hardcoded testimonials, auto-scrolled by the plain CSS @keyframes
        "slide" below.
   2. .review-slider-container > #reviewSlider > .review-card
      - the actual buyer/seller reviews pulled from the database
        (home.php), auto-scrolled by JS (requestAnimationFrame).

   These used to both render as ".review-card" with two conflicting
   definitions later in this same file (different width, padding,
   border, text-align) - whichever rule happened to come last in the
   cascade silently won on every shared property, so the "losing" widget
   never rendered as designed. The testimonial cards are now
   .rld-testimonial-card instead so each widget has exactly one,
   unambiguous set of rules (home.php already updated to match - see
   its first review section). No visual behavior intentionally changed
   beyond that fix, brand-color corrections below, and mobile sizing. */

.review-slider-container {
    overflow: hidden;
    position: relative;
    width: 100%;
}
.review-slider {
    display: flex;
    gap: 15px;
    flex-wrap: nowrap;
}
.review-card {
    min-width: 320px;
    max-width: 320px;
    background:#fff;
    border-radius:12px;
    padding:18px;
    box-shadow:0 6px 20px rgba(0,0,0,.05);
    flex-shrink: 0;
    word-wrap: break-word;
}
.review-header {
    display:flex;
    gap:12px;
    align-items:flex-start;
}
.review-header img {
    width:48px;
    height:48px;
    border-radius:50%;
    object-fit:cover;
}
.review-meta {
    font-size:.9rem;
    line-height:1.4;
    word-break: break-word;
}
.review-date {
    font-size:.8rem;
    color:#9ca3af;
    margin-top:3px;
}
.review-text {
    margin-top:10px;
    color:#111827;
    font-size:.95rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.review-type-badge {
    display:inline-block;
    padding:2px 8px;
    border-radius:8px;
    font-size:.75rem;
    font-weight:bold;
    margin-right:6px;
    color:#fff;
    text-transform:uppercase;
}
/* Roladel Green is the only brand accent site-wide - these were a
   Bootstrap-ish green (buyer) and blue (seller) left over from
   whatever template this was adapted from. Differentiated by a
   filled/outline treatment instead of two competing hues. */
.review-type-badge.buyer {
    background-color: var(--brand-green);
}
.review-type-badge.seller {
    background-color: var(--brand-black);
}
.review-user { text-decoration:none; color:#333; }
.review-user:hover { text-decoration:underline; }


/* Wrapper to make the testimonial ticker infinitely scrolling */
.review-cards {
    display: flex;
    width: max-content; /* Allows infinite width */
    animation: slide 30s linear infinite; /* Continuous sliding */
}

/* Hardcoded testimonial cards (see comment at top of file) */
.rld-testimonial-card {
    flex-shrink: 0;
    width: 280px;
    margin: 0 10px;
    padding: 18px;
    border: 1px solid #ccc;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

html.dark .rld-testimonial-card {
    background-color: var(--dark-surface);
    border-color: var(--dark-border);
}

/* Infinite scrolling effect */
@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%); /* Moves halfway, loops seamlessly */
    }
}

/* Reviews Section (testimonial ticker internals) */
.reviews {
    margin-bottom: 15px;
}

.review-star {
    font-size: 18px;
    color: var(--brand-green);
}

html.dark .review-star {
    color: var(--brand-green-bright);
}

.rld-testimonial-text {
    font-size: 14px;
    color: #555;
    margin-top: 10px;
    line-height: 1.5;
}

html.dark .rld-testimonial-text {
    color: var(--dark-text-muted);
}

/* Profile Section */
.profile {
    display: flex;
    align-items: center;
}

.profile-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
}

.name-occupation {
    text-align: right;
}

/* These were 9px/7px in the original template - well below any
   readable minimum. Bumped to a legible size while keeping them
   visually secondary (small, muted) next to the review text. */
.name {
    font-size: 13px;
    font-weight: bold;
    color: #333;
}

html.dark .name {
    color: var(--dark-text);
}

.occupation {
    font-size: 11px;
    color: #777;
}

html.dark .occupation {
    color: var(--dark-text-muted);
}

@media (max-width: 767px) {
    .review-card {
        min-width: 260px;
        max-width: 260px;
        padding: 14px;
    }
    .rld-testimonial-card {
        width: 240px;
        padding: 14px;
        margin: 0 8px;
    }
    .review-text,
    .rld-testimonial-text {
        font-size: 13px;
    }
    .review-header img {
        width: 40px;
        height: 40px;
    }
}