
/* keep any previous base styles minimal for demo + our arc styles */
.clr-reviews-container{ background:linear-gradient(135deg,#e0f7fa 0%,#f1f8e9 100%); padding:60px 20px; text-align:center; direction:rtl; }

/* ====== Arc styling ====== */
.clr-flags-arc{ position: relative; width: 860px; height: 220px; margin: 0 auto 28px; }
.clr-arc-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.clr-flag{
  position:absolute; z-index:1;
  width:72px; height:72px; border-radius:999px;
  background:#fff; border:4px solid #1ba4b6;
  box-shadow:0 10px 20px rgba(2,6,23,.12), inset 0 0 0 4px #fff;
  display:grid; place-items:center; cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  overflow:hidden;
  transform: translate(-50%,-50%);
}
.clr-flag img{ width:100%; height:100%; object-fit:cover; border-radius:999px; }
.clr-flag-emoji{ font-size:32px; }
.clr-flag.active{ transform: translate(-50%,-50%) scale(1.1); box-shadow:0 12px 26px rgba(27,164,182,.35); }
.clr-flag:not(.active){ opacity:.8; }

/* Slider basics */
.clr-slider{ position: relative; max-width: 1100px; margin:0 auto; }
.clr-slide{ display:none; }
.clr-slide.active{ display:block; }
.clr-nav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:999px; border:0; background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.14); font-size:24px; cursor:pointer; }
.clr-prev{ left:-22px; } .clr-next{ right:-22px; }

/* Responsive */
@media(max-width: 1024px){ .clr-flags-arc{ width:680px; } }
@media(max-width: 768px){
  .clr-flags-arc{ width:340px; height:180px; }
  .clr-flag{ width:56px; height:56px; border-width:3px; }
}


/* Images row fix */
.clr-images-row{
  display:flex; gap:18px; justify-content:center; align-items:flex-start;
  flex-wrap:nowrap; margin-top:16px;
}
.clr-image-item{ position:relative; width:320px; max-width:32vw; }
.clr-image-item img{ width:100%; height:auto; border-radius:16px; box-shadow:0 8px 24px rgba(15,23,42,.18); display:block; }
.clr-label-btn{
  position:absolute; bottom:-12px; left:50%; transform:translateX(-50%);
  background:#fff; border:0; border-radius:14px; padding:8px 14px; box-shadow:0 6px 14px rgba(0,0,0,.12);
}
@media(max-width: 900px){
  .clr-images-row{ flex-wrap:wrap; }
  .clr-image-item{ width:min(280px,46vw); }
}



/* --- Adjust footer sentence position --- */
.clr-footer-text{
  margin-top: 22px;
  font-weight: 600;
  color: #0f172a;
}

/* --- Flags active/dim look --- */
.clr-flag{ opacity: .45; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.clr-flag.active{ opacity: 1; transform: translate(-50%,-50%) scale(1.1); box-shadow:0 12px 26px rgba(27,164,182,.35); }

/* --- Images row: keep in one line even on mobile --- */
.clr-images-row{ display:flex; gap:14px; justify-content:center; align-items:flex-start; flex-wrap:nowrap; overflow:hidden; }
.clr-image-item{ position:relative; width: clamp(100px, 33.333% - 10px, 340px); }
.clr-image-item img{ width:100%; height:auto; border-radius:16px; box-shadow:0 8px 24px rgba(15,23,42,.18); display:block; }
.clr-label-btn{ position:absolute; bottom:-12px; left:50%; transform:translateX(-50%); background:#fff; border:0; border-radius:14px; padding:8px 14px; box-shadow:0 6px 14px rgba(0,0,0,.12); }

@media(max-width: 480px){
  .clr-image-item{ width: calc((100% - 28px) / 3); } /* 3 items in same row with 14px gaps */
}
