/* ===== Alkhaleejy Reviews — Modern / Premium / Minimalist ===== */
.arv-section {
  --blue: #0E62AB;
  --blue-dark: #094a82;
  --red: #E32136;
  --ink: #1c2b3a;
  --muted: #6b7a8d;
  --bg-from: #ffffff;
  --bg-to: #eef5fb;
  position: relative;
  overflow: hidden;
  direction: rtl;
  font-family: 'Cairo', -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
  color: var(--ink);
  width: 100%;
  padding: 64px 20px;
  background: linear-gradient(180deg, var(--bg-from) 0%, var(--bg-to) 100%);
}
.arv-section * { box-sizing: border-box; }

/* very light decorative medical-style blobs, purely CSS — no image requests */
.arv-decor { position: absolute; border-radius: 50%; pointer-events: none; opacity: .5; filter: blur(2px); }
.arv-decor-1 { width: 360px; height: 360px; top: -140px; left: -120px; background: radial-gradient(circle, rgba(14,98,171,.07), transparent 70%); }
.arv-decor-2 { width: 300px; height: 300px; bottom: -120px; right: -100px; background: radial-gradient(circle, rgba(227,33,54,.05), transparent 70%); }

.arv-inner { position: relative; max-width: 1240px; margin: 0 auto; }

.arv-heading { text-align: center; margin-bottom: 40px; }
.arv-heading h2 { font-size: 32px; font-weight: 800; color: var(--blue); margin: 0 0 10px; letter-spacing: -.3px; }
.arv-heading p { font-size: 15.5px; color: var(--muted); margin: 0; }

/* ===== carousel shell =====
   .arv-carousel is the row: [prev arrow] [viewport] [next arrow].
   .arv-viewport is the ONLY element that clips (overflow:hidden) and is the
   single source of truth for "how wide is one page" — its width is set
   explicitly (not just via flex:1) so there is no ambiguity for anything
   sized as a percentage of it. */
.arv-carousel { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; }

.arv-viewport {
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

/* .arv-track holds every card in a single non-wrapping row. Its width is
   pinned to exactly the viewport's width — cards overflow this box (by
   design, so 17+ cards sit in a row wider than the visible area), but the
   box itself never grows to "fit" them, and percentage widths on .arv-card
   below resolve against THIS fixed, known width — never against the
   track's own (potentially huge) content width. */
.arv-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  will-change: transform;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}

.arv-card {
  flex: 0 0 auto;
  background: #ffffff;
  border: 1px solid rgba(14,98,171,.08);
  border-radius: 20px;
  padding: 22px 22px 20px;
  box-shadow: 0 6px 20px rgba(15,23,42,.05);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.arv-card:hover {
  box-shadow: 0 10px 28px rgba(14,98,171,.12);
  border-color: rgba(14,98,171,.22);
  transform: translateY(-2px);
}
.arv-quote { position: absolute; top: 16px; left: 18px; color: var(--blue); opacity: .12; }

.arv-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.arv-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
}
.arv-card-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.arv-name { font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arv-date { font-size: 11.5px; color: var(--muted); }

.arv-stars { color: #f5a623; font-size: 14px; letter-spacing: 2px; margin-bottom: 8px; }
.arv-text { font-size: 13.5px; line-height: 1.75; color: #475569; margin: 0; }
.arv-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.arv-more-btn { color: var(--blue); background: none; border: none; padding: 6px 0 0; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; align-self: flex-start; }
.arv-more-btn:hover { text-decoration: underline; }

/* arrows — hardened with !important because this site's theme applies its
   own global padding/sizing to every <button> on the page, which otherwise
   overrides these and turns the arrow into a stretched oval. */
.arv-arrow {
  flex-shrink: 0 !important; width: 40px !important; height: 40px !important;
  padding: 0 !important; margin: 0 !important; box-sizing: border-box !important;
  border-radius: 50% !important; font-size: 0 !important; line-height: 1 !important;
  background: #fff !important; border: 1.5px solid rgba(14,98,171,.35) !important; color: var(--blue) !important;
  display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer;
  box-shadow: 0 4px 14px rgba(14,98,171,.16); transition: background .2s, color .2s;
}
.arv-arrow svg { display: block !important; flex-shrink: 0; }
.arv-arrow:hover { background: var(--blue) !important; color: #fff !important; border-color: var(--blue) !important; }
.arv-arrow:disabled { opacity: .3; cursor: default; }
.arv-arrow:disabled:hover { background: #fff !important; color: var(--blue) !important; }

/* dots */
.arv-dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.arv-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(14,98,171,.22); border: none; cursor: pointer; padding: 0; transition: .2s; }
.arv-dot.is-active { width: 22px; border-radius: 5px; background: var(--blue); }

/* ===== responsive card widths =====
   Each width is a percentage of .arv-viewport's own fixed width (via
   .arv-track above, pinned to 100% of it) — never of the track's overflowed
   content width. Desktop: 4 cards + 3 gaps of 20px. Tablet: 2 cards + 1 gap.
   Mobile: 1 card, full width. */
.arv-card { width: calc((100% - 60px) / 4); }

@media (max-width: 1024px) {
  .arv-card { width: calc((100% - 20px) / 2); }
}
@media (max-width: 640px) {
  .arv-heading h2 { font-size: 24px; }
  .arv-carousel { gap: 6px; }
  .arv-arrow { width: 32px !important; height: 32px !important; }
  .arv-card { width: 100%; }
}