/* ---------- Layout & track ---------- */
.tpr-slider-container {
  max-width:1200px;
  margin: 0 auto;
  position: relative;
  padding: 26px 60px;
  box-sizing: border-box;
}

.tpr-slider {
  overflow: hidden;
  width: 100%;
}

.tpr-track {
  display:flex;
  gap:18px;
  transition: transform 0.45s cubic-bezier(.22,.9,.2,1);
  will-change: transform;
  align-items: stretch;
}

/* ---------- Updated Card Logic ---------- */
.tpr-card {
  /* Subtract the two 18px gaps from the total width, then divide by 3 */
  flex: 0 0 calc((100% - (2 * 18px)) / 3); 
  box-sizing: border-box;
  padding: 18px 22px;
  background: transparent;
  text-align: left;
  min-width: 0;
  font-family: Roboto;
}



/* top row: stars (left) + verified (right) */
.tpr-card-top {
  display:flex;
  align-items:center;
  justify-content:space-between; /* stars left, verified right */
  gap:12px;
  margin-bottom:12px;
}

/* Verified badge (right) */
.tpr-verified {
  display:flex;
  align-items:center;
  gap:8px;
  color:#6f6f85;
  font-weight:600;
  font-size:13px;
}

/* Headline and body (left aligned) */
.tpr-title {
  margin: 0 0 10px;
  font-size:16px;
  font-weight:700;
  line-height:1.2;
  color:#222 !important;
  text-align: left;
}

.tpr-content {
  margin: 0 0 12px;
  color:#222;
  font-size:15px;
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-align:left;
}

.tpr-meta {
  color:#7c7c93;
  font-size:13px;
  text-align:left;
}
.tpr-author{
    font-weight: bold;
}

/* === Review meta: left (name+time) + right (cta) === */
.tpr-meta {
  display: flex ;
  justify-content: space-between;
  align-items: center;
  gap: 12px ;
  width: 100% ;
  margin-top: 4px ;
  box-sizing: border-box ;
}

/* left group (name + time) */
.tpr-meta-left {
  display: inline-flex ;
  align-items: center ;
  color: #6f6f85 ;
  font-weight: 600 ;
  text-align: left ;
  white-space: nowrap ;
}

/* small separator (comma) uses muted color */
.tpr-meta-left .tpr-sep {
  color: rgba(111,111,133,0.9) ;
  margin: 0 4px ;
}

/* right group (cta) */
.tpr-meta-right {
  display: flex ;
  align-items: center ;
  justify-content: flex-end ;
}

/* CTA link: styled as bold compact button-like text */
.tpr-link {
  display: inline-block ;
  padding: 6px 10px ;
  border-radius: 4px ;
  background: transparent ;
  color: #191919 ;
  font-weight: 800 ;
  text-decoration: none ;
  border: none ;
  white-space: nowrap ;
}
.tpr-time{
    font-size: 12px;
    font-weight: normal;
}
.tpr-link{
    color: #00b67a !important;
}

/* CTA hover */
.tpr-link:hover {
  text-decoration: underline ;
/*   color: #b0001a ; */
}

/* Responsive: when narrow, stack meta with gap and center CTA */
@media (max-width: 599px) {
  .tpr-meta {
    flex-direction: column ;
    align-items: flex-start ;
    gap: 8px ;
  }
  .tpr-meta-right { justify-content: flex-start !important; }
	.tpr-link{padding-left:0px;}
}


/* ---------- Boxed star styling adjustments ---------- */
/* wrapper already provided by SVG output; add consistent spacing/visual */
.tpr-card-stars { display:flex; gap:6px; align-items:center; }

/* make each SVG visually match screenshot: square green box + white star, slightly larger */
.tpr-card-stars svg { width:22px; height:22px; display:block; }

/* ===== Slider Arrows (Force Styled – Override Elementor_attach) ===== */

.tpr-prev,
.tpr-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 42px !important;
  height: 42px !important;

  min-width: 42px !important;
  min-height: 42px !important;

  border-radius: 50% !important;     /* Perfect circle */
  border: 2px solid #e60023 !important;  /* Red border */

  background: #ffffff !important;    /* White background */
  color: #e60023 !important;         /* Red arrow icon */

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  box-sizing: border-box !important;

  cursor: pointer !important;
  z-index: 999 !important;

  box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
}

/* Left & Right positioning */
.tpr-prev { left: 10px !important; }
.tpr-next { right: 10px !important; }

/* SVG arrow style */
.tpr-prev svg,
.tpr-next svg {
  stroke: #e60023 !important;   /* Force red arrow */
  width: 18px !important;
  height: 18px !important;
}

/* Hover effect */
.tpr-prev:hover,
.tpr-next:hover {
  background: #e60023 !important;
  color: #ffffff !important;
}

.tpr-prev:hover svg,
.tpr-next:hover svg {
  stroke: #ffffff !important;
}

/* ---------- Responsive rules: 3 / 2 / 1 ---------- */
/* ---------- Updated Responsive Rules ---------- */
@media (max-width: 1023px) {
  .tpr-card { 
    /* For 2 cards, subtract 1 gap of 18px, then divide by 2 */
    flex: 0 0 calc((100% - 18px) / 2); 
  }
}

@media (max-width: 599px) {
  .tpr-slider-container { padding: 18px 40px; }
  .tpr-card { 
    /* For 1 card, no gaps need to be subtracted */
    flex: 0 0 100%; 
  }
  .tpr-prev, .tpr-next { width:36px; height:36px; }
}

/* ---------- Small polish ---------- */
.tpr-card:hover { transform: translateY(-3px); transition: transform .18s ease; }