/* =========================================================================
   rp-awards — Awards / Badges band. Scope: .rp-kawards.
   Figma 17709:105726. Navy band bg comes from the Kadence Row Layout ATTRIBUTE.
   Layout: eyebrow + gold/white heading + rating pills + a full-bleed badge strip
   with an enlarged centre Leader badge. Markup lives in synced patterns 7270 (EN) /
   7271 (AR); EN uses the provided rating-pill images, AR keeps built Arabic pills.
   ========================================================================= */

.rp-kawards { overflow: hidden; }
.rp-kawards .kt-inside-inner-col { padding: 0 !important; }

.rp-kawards .fb-awards {
  position: relative;
  text-align: center;
  padding: 48px 24px 36px;
}

/* eyebrow pill (periwinkle outline) */
.rp-kawards .fb-awards-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #91ADFB;
  border-radius: 8px;
  padding: 4px 12px;
  color: #91ADFB;
  font-family: Mulish, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  margin: 0 0 16px;
}
.rp-kawards .fb-awards-eyebrow img { width: 16px; height: 16px; display: block; }
.rp-kawards .fb-awards-eyebrow svg path { fill: #91ADFB; }

/* heading: gold line + white line */
.rp-kawards .fb-awards-h-gold,
.rp-kawards .fb-awards-h-white {
  font-family: Mulish, sans-serif;
  font-size: 32px;
  line-height: 44px;
  font-weight: 700;
  margin: 0;
}
.rp-kawards .fb-awards-h-gold { color: #FFDE6F; }
.rp-kawards .fb-awards-h-white { color: #ffffff; margin: 0 0 24px; }

/* rating pills — EN uses image pills, AR uses built pills (styled to match) */
.rp-kawards .fb-awards-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding-bottom: 64px;
  position: relative;
  z-index: 2; /* keep pills above the leader-badge glow */
}
.rp-kawards .fb-awards-pill-img { height: 50px; width: auto; display: block; }
.rp-kawards .fb-awards-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fafbff;
  border-radius: 11px;
  padding: 11px 16px;
  font-family: Mulish, sans-serif;
  font-size: 16px;
  line-height: 1;
}
.rp-kawards .fb-awards-pill img { width: 22px; height: 22px; }
.rp-kawards .fb-awards-pill-g2 span { color: #ff492c; font-weight: 700; }
.rp-kawards .fb-awards-pill-capterra span { color: #044d80; font-weight: 700; }

/* badge area: endless left->right marquee (two strip copies = seamless loop) with
   edge-fade gradients and a radial glow behind the fixed centre Leader badge. */
.rp-kawards .fb-awards-badges {
  position: relative;
  width: 100%;
  height: 120px;
  margin-top: 40px;
  direction: ltr; /* badge strip is language-agnostic; keep the marquee LTR in AR too */
}
.rp-kawards .fb-awards-marquee {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.rp-kawards .fb-awards-track {
  display: flex;
  width: max-content;
  align-items: flex-end;
  animation: fb-awards-scroll 50s linear infinite;
}
.rp-kawards .fb-awards-strip { height: 120px; width: auto; max-width: none; display: block; }
@keyframes fb-awards-scroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
/* left/right edge fades (replicate the provided #0F1035 → transparent gradients) */
.rp-kawards .fb-awards-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 240px;
  z-index: 3;
  pointer-events: none;
}
.rp-kawards .fb-awards-fade-left { left: 0; background: linear-gradient(90deg, #0F1035 0%, rgba(15,16,53,0) 100%); }
.rp-kawards .fb-awards-fade-right { right: 0; background: linear-gradient(270deg, #0F1035 0%, rgba(15,16,53,0) 100%); }
/* radial glow behind the Leader badge (Leader badge background.svg) */
/* radial glow centred behind the Leader badge, contained so it never reaches the
   pills (which sit above it via z-index). */
.rp-kawards .fb-awards-leader-bg {
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  width: 220px;
  height: 220px;
  z-index: 1;
  pointer-events: none;
}
.rp-kawards .fb-awards-leader {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 188px;
  width: auto;
  z-index: 5;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .45));
}

@media (prefers-reduced-motion: reduce) {
  .rp-kawards .fb-awards-track { animation: none; }
}
@media (max-width: 991px) {
  .rp-kawards .fb-awards-h-gold,
  .rp-kawards .fb-awards-h-white { font-size: 24px; line-height: 34px; }
  .rp-kawards .fb-awards-badges { height: 88px; }
  .rp-kawards .fb-awards-strip { height: 88px; }
  .rp-kawards .fb-awards-leader { height: 140px; }
  .rp-kawards .fb-awards-leader-bg { width: 170px; height: 170px; bottom: -26px; }
  .rp-kawards .fb-awards-fade { width: 120px; }
}

/* ── WHITE variant (registry: Awards band — white) — Figma 15315:21304 (/eor) ──
   Reuses the full .rp-kawards .fb-awards structure + real G2/Capterra/badge assets;
   only the band bg + heading colours + edge-fades change. Add `.rp-kawards--white`
   to the band wrapper. Heading = navy "Trusted by Customers," + blue "Recognized by Experts". */
.rp-kawards.rp-kawards--white,
.rp-kawards--white .fb-awards { background: #ffffff; }
.rp-kawards--white .fb-awards-h-gold { color: #021143; }
.rp-kawards--white .fb-awards-h-white { color: #114EF7; }
.rp-kawards--white .fb-awards-eyebrow { color: #7E7E7E; }
.rp-kawards--white .fb-awards-eyebrow svg path { fill: #114EF7; }
.rp-kawards--white .fb-awards-sub { font-family: Mulish, sans-serif; font-size: 15px; color: #7E7E7E; margin: 0 0 24px; text-align: center; }
.rp-kawards--white .fb-awards-fade-left { background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0) 100%); }
.rp-kawards--white .fb-awards-fade-right { background: linear-gradient(270deg, #ffffff 0%, rgba(255,255,255,0) 100%); }
/* The Leader-badge radial glow (leader_badge_bg.svg) is a dark navy halo tuned for
   the navy homepage band; on white it reads as a harsh dark oval. Hide it — the
   leader_badge.webp itself stays. */
.rp-kawards--white .fb-awards-leader-bg { display: none; }