/* =========================================================
   C O C O O N   T E S T I M O N I A L S  –  ENHANCEMENTS
   ========================================================= */

/* Brand colours + bar sizing (tweak if needed) */
:root{
  --cocoon-orange: #F28B4A;
  --cocoon-blue:   #6EC1E4;
  --cr-bar-width:  40%;
  --cr-bar-height: 4px;    /* bump to 5–6px if you want it bolder */
  --cr-bar-offset: 12px;

  /* Arrow sizing */
  --cr-arrow-size: 48px;   /* 56px if you want larger */
  --cr-gap: 28px;          /* match grid gap for nice spacing */
}

/* Make the wrapper a row so arrows sit before/after the grid */
.cr-testimonials{
  display: flex;
  align-items: center;
  gap: var(--cr-gap);
}

/* Base track: let it fill between arrows, keep smooth fade/height anim */
.cr-testimonials .cr-track{
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  gap: var(--cr-gap);
  transition: opacity .35s ease, height .35s ease;
  will-change: opacity, height;
}

/* Center the content inside each card */
.cr-testimonials .cr-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;      /* center children horizontally */
  text-align: center;       /* center text */
  padding-top: calc(18px + var(--cr-bar-height) + 6px);
}

/* Keep long quotes readable while centered */
.cr-testimonials .cr-quote{
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/* Center the meta row (initials • country • year) */
.cr-testimonials .cr-meta{
  justify-content: center;
}

/* Center the “Show more / Show less” button */
.cr-testimonials .cr-toggle{
  align-self: center;
}

/* Centered gradient bar (fully opaque) */
.cr-testimonials .cr-card::before{
  content: "";
  position: absolute;
  top: var(--cr-bar-offset);
  left: 50%;
  transform: translateX(-50%);
  width: var(--cr-bar-width) !important;
  height: var(--cr-bar-height) !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--cocoon-blue) 0%, var(--cocoon-orange) 100%) !important;
  opacity: 1 !important;
  pointer-events: none;
}

/* ---------- Arrows: inline, text-only chevrons ---------- */
.cr-testimonials .cr-arrow{
  /* wipe any theme/button styles */
  all: unset;
  display: inline-block;
  color: var(--cocoon-orange);
  font-size: var(--cr-arrow-size);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  padding: 0 .25rem;
  transition: transform .15s ease, opacity .15s ease;
}
.cr-testimonials .cr-arrow:hover{ opacity:.9; transform: translateY(-1px); }
.cr-testimonials .cr-arrow[aria-disabled="true"]{ opacity:.35; pointer-events:none; }

@media (max-width:767.98px){
  .cr-testimonials{ gap: 20px; }
  .cr-testimonials .cr-track{ gap: 20px; }
  .cr-testimonials .cr-arrow{ font-size: 36px; }
}

/* Elementor editor: keep preview calm (grid is handled by your plugin CSS) */
/* No arrow change needed here; JS skips rotation in editor */