/* ═══════════════════════════════════════════════════════════
   Stato Card Marquee — Styles
   ═══════════════════════════════════════════════════════════ */

/* ── Color tokens (avatar backgrounds) ─────────────────────── */
:root {
  --stato-c1: #2596be;   /* purple  */
  --stato-c2: #2596be;   /* coral   */
  --stato-c3: #2596be;   /* teal    */
  --stato-c4: #f7c26a;   /* amber   */
  --stato-c5: #6aaff7;   /* sky     */
}

/* ── Outer wrapper (clips overflow + adds fade edges) ──────── */
.stato-marquee-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 20px 0;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

/* ── Scrolling track ────────────────────────────────────────── */
.stato-marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
  animation: stato-scroll-left 40s linear infinite;
}

/* Direction: right */
.stato-marquee-wrap[data-direction="right"] .stato-marquee-track {
  animation-name: stato-scroll-right;
}

/* Pause on hover so users can read */
.stato-marquee-wrap:hover .stato-marquee-track {
  animation-play-state: paused;
}

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes stato-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes stato-scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ── Card ───────────────────────────────────────────────────── */
.m-card {
  background: #4d4d4d;
  border-radius: 16px;
  padding: 20px 22px;
  width: 280px;
  min-height: 100px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  cursor: default;
}

.m-card:hover {
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
}

/* ── Card header ────────────────────────────────────────────── */
.m-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.m-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 17px;
  color: #ffffff;
  flex-shrink: 0;
}

.m-avatar.a1 { background: var(--stato-c1); }
.m-avatar.a2 { background: var(--stato-c2); }
.m-avatar.a3 { background: var(--stato-c3); color: #1a1a2e; }
.m-avatar.a4 { background: var(--stato-c4); color: #1a1a2e; }
.m-avatar.a5 { background: var(--stato-c5); }

.m-name-block {
  display: flex;
  flex-direction: column;
   justify-content:center; 
	
}

.m-name {margin:0 !important;padding:0 !important;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  line-height: 1.2;

}
.m-stars{
	line-height: 1.2 ;
	display: flex;
	gap:2px;
}
.m-stars span {margin-bottom:0 !important;padding-bottom:0 !important;
  color: #f5a623;
}

/* ── Highlight badge ─────────────────────────────────────────── */
.m-highlight {margin-bottom:0 !important;padding-bottom:0 !important;
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  color: var(--stato-c1);
  background: rgba(124, 106, 247, 0.09);
  padding: 4px 12px;
  border-radius: 20px;
  align-self: flex-start;
  white-space: nowrap;
}

/* ── Review text ─────────────────────────────────────────────── */
.m-text {
  font-size: 13px;
  line-height: 1.65;
  color: #fff;
  font-style: italic;
}