/* rp-testimonials — component styles (photo-card carousel).
   Scope: .rp-ktestimonials. The §M photo-card styling (.rp-photo-reviews / .rp-pt-*)
   currently lives in qa-fixes-home.css (body.home) and still applies on the homepage.
   Band bg is provided by the Kadence Row Layout attribute. */
/* FIX 4 (QA round 1): testimonials band = yellow gradient over white
   (Figma: linear-gradient(180deg, rgba(255,231,151,0) 0%, #FFE797 50%), #FFF) */
.rp-ktestimonials .rp-photo-reviews {
  background-color: #ffffff !important;
  background-image: linear-gradient(-180deg, rgba(255,231,151,0) 0%, #FFE797 50%) !important;
  padding-top: 80px;
  padding-bottom: 64px;
}
.rp-ktestimonials .rp-photo-reviews::before { display: none !important; } /* kill old star bg */
.rp-ktestimonials .rp-pt-head {
  display: flex;
  direction: rtl;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 36px;
}
.rp-ktestimonials .rp-pt-title {
  color: #021143;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0;
  text-align: right;
  text-transform: none;
}
.rp-ktestimonials .rp-pt-rating { text-align: left; }
.rp-ktestimonials .rp-pt-stars { color: #FFB400; font-size: 20px; letter-spacing: 2px; }
.rp-ktestimonials .rp-pt-rating-txt { color: #2A2A2A; font-size: 14px; margin-top: 4px; }
.rp-ktestimonials .rp-pt-rating-txt strong { color: #021143; }
.rp-ktestimonials .rp-pt-g2 {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: #114EF7;
  background: #EAF0FF;
  border-radius: 999px;
  padding: 4px 12px;
}

/* Header two-column split + G2 badge row (CC structure for Gap 1 + Gap 2;
   Cowork refines spacing/badge sizing). Left = heading + star line (max 565),
   right = 3 transparent G2 badges above the "G2 Leaders…" label. */
.rp-ktestimonials .rp-pt-head-left { display: flex; flex-direction: column; max-width: 565px; }
.rp-ktestimonials .rp-pt-head-left .rp-pt-stars { margin-top: 16px; }
.rp-ktestimonials .rp-pt-rating { display: flex; flex-direction: column; align-items: flex-end; }
.rp-ktestimonials .rp-pt-badges { display: flex; gap: 5px; align-items: center; margin-bottom: 8px; }
.rp-ktestimonials .rp-pt-badge { height: 88px; width: auto; display: block; }
/* ===== Coverflow cards (Figma "Testimonials" — 24-card expanded slider) =====
   All cards render at one size: 1100×624 desktop / 364×624 mobile (radius 24).
   centeredSlides + slidesPerView:'auto' center the active card; neighbours peek
   past the section's overflow:hidden edges. Two types: --std and --stat
   (stat adds a metric block + arrow button); --navy = #04196C logo tile. */
.rp-ktestimonials .rp-pt-coverflow { overflow: visible; }
.rp-ktestimonials .rp-pt-coverflow .swiper-wrapper { align-items: center; }
.rp-ktestimonials .rp-pt-card {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  color: #ffffff;
  display: block;
  box-sizing: border-box;
  width: 1100px;
  max-width: 94vw;
  height: 624px;
  border-radius: 24px;
}
/* full-bleed responsive background (<picture> = desktop + mobile crop) */
.rp-ktestimonials .rp-pt-bg { position: absolute; inset: 0; z-index: 0; display: block; }
.rp-ktestimonials .rp-pt-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-ktestimonials .rp-pt-grad { position: absolute; inset: 0; z-index: 1; background: linear-gradient(-180deg, rgba(0,0,0,0) 46.16%, rgba(0,0,0,0.9) 100%); }
.rp-ktestimonials .rp-pt-inner {
  direction: rtl;
  text-align: right;
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between;
  height: 100%; width: 100%; box-sizing: border-box;
  padding: 48px 40px;
}
/* 2026-07-22: RTL text-align overrides for static AR pages (html.dir="").
   direction:rtl doesn't automatically override an explicit text-align:left from
   the base stylesheet; these rules force correct right-alignment for Arabic text. */
.rp-ktestimonials .rp-pt-head-left { align-items: flex-start; }
/* flex-start in a direction:rtl flex-column = physical RIGHT — aligns stars/rating block to right edge */
.rp-ktestimonials .rp-pt-stars,
.rp-ktestimonials .rp-pt-rating-txt,
.rp-ktestimonials .rp-pt-g2 { text-align: right; }

/* company logo tile — rounded square top-left (white tile / navy #04196C) */
.rp-ktestimonials .rp-pt-icon { width: 104px; height: 104px; border-radius: 16px; overflow: hidden; flex: 0 0 auto; background: #fff; }
.rp-ktestimonials .rp-pt-icon img { width: 100%; height: 100%; object-fit: cover; display: block; padding: 0; box-sizing: border-box; }
.rp-ktestimonials .rp-pt-card--navy .rp-pt-icon { background: #04196C; }
/* RTL: mirror the prev/next chevrons so they point the correct way for Arabic. */
.rp-ktestimonials .rp-pt-navbtn svg { transform: scaleX(-1); }
/* Drop the unnecessary 160px bottom padding on the twin-CTA row. */
.kb-row-layout-idtc_o > .kt-row-column-wrap { padding-bottom: 0 !important; }
/* text legibility on photos */
.rp-ktestimonials .rp-pt-card .rp-pt-quote,
.rp-ktestimonials .rp-pt-card .rp-pt-author strong,
.rp-ktestimonials .rp-pt-card .rp-pt-author span,
.rp-ktestimonials .rp-pt-card .rp-pt-stat { text-shadow: 0 4px 4px rgba(0,0,0,0.25); }
.rp-ktestimonials .rp-pt-card .rp-pt-body { max-width: none; }
/* quote: base weight 400, emphasised clause (<b>) 700 — 24/32 desktop */
.rp-ktestimonials .rp-pt-card .rp-pt-quote { color:#fff; font-family: Mulish,sans-serif; font-weight: 400; margin: 16px 0; font-size: 24px; line-height: 32px; }
.rp-ktestimonials .rp-pt-card .rp-pt-quote b { font-weight: 700; }
/* stat block (--stat cards): value 40/700, label 24/400 */
.rp-ktestimonials .rp-pt-stat { display: flex; flex-direction: column; }
.rp-ktestimonials .rp-pt-stat-num { font-family: Mulish,sans-serif; font-size: 40px; font-weight: 700; line-height: 1.1; color:#fff; direction: ltr; unicode-bidi: isolate; }
.rp-ktestimonials .rp-pt-stat-label { font-family: Mulish,sans-serif; font-size: 24px; font-weight: 400; color:#fff; }
/* author: name 24/600, role 20/400 @0.7 */
.rp-ktestimonials .rp-pt-card .rp-pt-author strong { display:block; color:#fff; font-family: Mulish,sans-serif; font-size:24px; font-weight:600; }
.rp-ktestimonials .rp-pt-card .rp-pt-author span { color:#fff; opacity:0.7; font-family: Mulish,sans-serif; font-size:20px; font-weight:400; }
/* stat-card arrow button bottom-right */
.rp-ktestimonials .rp-pt-cardarrow {
  position: absolute; z-index: 3; left: 40px; bottom: 40px;
  width: 56px; height: 56px; border-radius: 56px; background: #FAFBFF;
  display: flex; align-items: center; justify-content: center; text-decoration: none;
}
/* mobile-only centered-header eyebrow — hidden on desktop */
.rp-ktestimonials .rp-pt-eyebrow { display: none; }
/* nav arrows: two 56px white circles, gap 24, centered below */
.rp-ktestimonials .rp-pt-nav { display:flex; justify-content:center; gap:24px; margin-top:40px; direction: rtl; }
/* direction:rtl reverses the flex-row so next(<) appears on LEFT and prev(>) on RIGHT,
   matching Arabic reading direction. On home AR, html[dir=rtl] already does this;
   on static pricing (html.dir="") we need it explicit. Redundant but harmless on home. */
.rp-ktestimonials .rp-pt-navbtn {
  width:56px; height:56px; border-radius:50%; background:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.rp-ktestimonials .rp-pt-navbtn:hover { background:#F4F6FF; }
@media (max-width: 991px) {
  .rp-ktestimonials .rp-pt-card { width: 88vw; height: auto; min-height: 560px; }
}

/* ===== QA vs Builder export "Testimonials" — header typography ===== */
/* Heading: Figma #2A2A2A + line-height 48 (was navy #021143 / 46) */
body.home .rp-ktestimonials .rp-pt-title { color: #2A2A2A !important; line-height: 48px !important; }
/* Star rating line: 16px #18181B (was 14px #021143); <strong> keeps 700, "from 2.8k reviews" 400 */
body.home .rp-ktestimonials .rp-pt-rating-txt,
body.home .rp-ktestimonials .rp-pt-rating-txt strong {
  font-size: 16px !important;
  line-height: 24px !important;
  color: #18181B !important;
}
/* G2 label: Mulish 16/700 #000 (was 12/400 #114EF7) */
body.home .rp-ktestimonials .rp-pt-g2 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #000000 !important;
}

/* ===== QA: decorative blue shapes from Figma "Testimonials" (were missing) ===== */
.rp-ktestimonials { position: relative; overflow: hidden; }
.rp-ktestimonials::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 758px; height: 758px; right: -300px; bottom: -360px;
  background: url(../../images/ts-shape-bl.svg) no-repeat center / contain;
}
.rp-ktestimonials::after { content: none; display: none; }
.rp-ktestimonials .rp-pt-head,
.rp-ktestimonials .rp-container,
.rp-ktestimonials .reviews,
.rp-ktestimonials .rp-pt-nav { position: relative; z-index: 1; }

/* ===== Mobile (Figma "Testimonials" Mobile variant) — placed last so it wins
   over the body.home header-typography overrides above. ===== */
@media (max-width: 767px) {
  /* centered header with "PEOPLE ARE TALKING" eyebrow above the heading */
  .rp-ktestimonials .rp-pt-head { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .rp-ktestimonials .rp-pt-head-left { align-items: center; max-width: none; }
  .rp-ktestimonials .rp-pt-eyebrow {
    display: block; font-family: Mulish,sans-serif; font-size: 16px; line-height: 20px;
    font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: rgba(0,0,0,0.6);
    margin-bottom: 8px;
  }
  body.home .rp-ktestimonials .rp-pt-title,
  .rp-ktestimonials .rp-pt-title { font-size: 20px !important; line-height: 24px !important; font-weight: 700; text-align: center; }
  .rp-ktestimonials .rp-pt-rating { align-items: center; text-align: center; }
  /* single G2 badge on mobile (hide the 2nd + 3rd) */
  .rp-ktestimonials .rp-pt-badge:nth-child(n+2) { display: none; }
  /* mobile card: 364×624 r24, padding 24 */
  .rp-ktestimonials .rp-pt-card { width: 364px; max-width: 86vw; height: 624px; min-height: 0; border-radius: 24px; }
  .rp-ktestimonials .rp-pt-inner { padding: 24px; }
  .rp-ktestimonials .rp-pt-icon { width: 80px; height: 80px; border-radius: 12.308px; }
  .rp-ktestimonials .rp-pt-card .rp-pt-quote { font-size: 16px; line-height: 22px; }
  .rp-ktestimonials .rp-pt-stat-num { font-size: 32px; }
  .rp-ktestimonials .rp-pt-stat-label { font-size: 20px; }
  .rp-ktestimonials .rp-pt-card .rp-pt-author strong { font-size: 16px; line-height: 24px; font-weight: 700; }
  .rp-ktestimonials .rp-pt-card .rp-pt-author span { font-size: 16px; line-height: 24px; font-weight: 400; }
  .rp-ktestimonials .rp-pt-cardarrow { left: 24px; bottom: 24px; width: 40px; height: 40px; border-radius: 40px; }
  .rp-ktestimonials .rp-pt-cardarrow svg { width: 20px; height: 20px; }
}
