/* ── v2-testimonials.css ───────────────────────────────────────────────────
   The ratings + testimonials experience: the fixed top-right "Rate us" button,
   the rating dialog, and the landing-page wall. Rides the same tokens + the
   landing (.tl-*) design system. */

/* ── fixed top-right "Rate us" button ─────────────────────────────────────── */
#tl-rate-btn {
  position: fixed; top: 14px; right: 18px; z-index: 60;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px 8px 11px; border-radius: 999px; cursor: pointer;
  font: 700 13px/1 var(--wot-font); letter-spacing: .01em; color: #fff;
  background: rgba(20,16,20,0.72); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 6px 22px rgba(0,0,0,0.45);
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
#tl-rate-btn:hover { transform: translateY(-1px);
  border-color: rgba(255,31,143,0.6); box-shadow: 0 10px 30px rgba(255,31,143,0.28); }
#tl-rate-btn:active { transform: translateY(0); }
.tl-rate-btn-star { width: 16px; height: 16px; fill: #FFC061;
  filter: drop-shadow(0 0 6px rgba(255,192,97,0.55)); }
.tl-rate-btn-txt { white-space: nowrap; }
@media (max-width: 560px) { .tl-rate-btn-txt { display: none; } #tl-rate-btn { padding: 9px; } }

/* generic star glyph used across dialog + wall */
.tl-star { width: 18px; height: 18px; fill: rgba(255,255,255,0.18); transition: fill .12s ease, transform .12s ease; }
.tl-star.is-on { fill: #FFC061; }
.tl-stars { display: inline-flex; gap: 2px; vertical-align: middle; }

/* ── dialog overlay ───────────────────────────────────────────────────────── */
.tl-rate-ov {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: 20px; background: rgba(5,4,6,0.66); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .22s ease; overflow-y: auto;
}
.tl-rate-ov.is-in { opacity: 1; }
.tl-rate-card {
  position: relative; width: min(540px, 100%);
  background: linear-gradient(180deg, #17131a, #100c12); color: var(--wot-text-0);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 22px;
  padding: 30px 30px 26px; box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,31,143,0.08);
  transform: translateY(12px) scale(0.985); transition: transform .24s cubic-bezier(.2,.9,.3,1);
}
.tl-rate-ov.is-in .tl-rate-card { transform: none; }
.tl-rate-x {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; font-size: 14px; color: var(--wot-text-2);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); transition: .15s;
}
.tl-rate-x:hover { color: #fff; background: rgba(255,255,255,0.12); }
.tl-rate-kick { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: transparent; background: var(--wot-grad); -webkit-background-clip: text; background-clip: text; }
.tl-rate-h { margin: 8px 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.tl-rate-sub { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--wot-text-1); }

/* interactive stars */
.tl-rate-stars { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.tl-rate-star { padding: 4px; background: none; border: 0; cursor: pointer; line-height: 0; }
.tl-rate-star .tl-star { width: 34px; height: 34px; }
.tl-rate-star:hover .tl-star, .tl-rate-star:focus-visible .tl-star { transform: scale(1.14); }
.tl-rate-star .tl-star.is-on { filter: drop-shadow(0 0 8px rgba(255,192,97,0.55)); }
.tl-rate-word { margin-left: 8px; font-size: 14px; font-weight: 700; color: #FFC061; min-height: 1em; }

.tl-rate-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.tl-rate-field > label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wot-text-2); }
.tl-rate-field > label em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--wot-text-2); opacity: .7; }
.tl-rate-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .tl-rate-row { grid-template-columns: 1fr; } .tl-rate-card { padding: 24px 18px 20px; } }

.tl-rate-plats { display: flex; gap: 10px; flex-wrap: wrap; }
.tl-rate-plat {
  padding: 9px 16px; border-radius: 999px; cursor: pointer; font: 700 13px var(--wot-font); color: var(--wot-text-1);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); transition: .15s;
}
.tl-rate-plat:hover { color: #fff; border-color: rgba(255,255,255,0.25); }
.tl-rate-plat.is-on { color: #fff; border-color: transparent;
  background: var(--wot-grad); box-shadow: 0 6px 18px rgba(255,31,143,0.3); }

.tl-rate-input, .tl-rate-textarea {
  width: 100%; padding: 11px 13px; border-radius: 12px; font: 500 14px var(--wot-font); color: #fff;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); transition: .15s; resize: vertical;
}
.tl-rate-input:focus, .tl-rate-textarea:focus { outline: none; border-color: rgba(255,31,143,0.6); background: rgba(255,255,255,0.06); }
.tl-rate-input::placeholder, .tl-rate-textarea::placeholder { color: var(--wot-text-2); }
.tl-rate-count { align-self: flex-end; font-size: 11px; color: var(--wot-text-2); }

.tl-rate-actions { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.tl-rate-submit { min-width: 170px; }
.tl-rate-submit:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.3); box-shadow: none; }
.tl-rate-err { font-size: 13px; color: var(--wot-bear); }

/* gate (anonymous) + thanks states */
.tl-rate-gate, .tl-rate-thanks { text-align: center; }
.tl-rate-gate h2, .tl-rate-thanks h2 { margin: 14px 0 8px; font-size: 24px; font-weight: 800; }
.tl-rate-gate p, .tl-rate-thanks p { margin: 0 auto 20px; max-width: 360px; font-size: 14px; line-height: 1.55; color: var(--wot-text-1); }
.tl-rate-gate .tl-btn, .tl-rate-thanks .tl-btn { margin-bottom: 10px; }
.tl-rate-gate-orb, .tl-rate-thanks-orb { display: grid; place-items: center; width: 84px; height: 84px; margin: 6px auto 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255,192,97,0.22), rgba(255,31,143,0.06)); }
.tl-rate-gate-orb .tl-star { width: 40px; height: 40px; filter: drop-shadow(0 0 10px rgba(255,192,97,0.6)); }
.tl-rate-thanks-orb .tl-star { width: 22px; height: 22px; }

/* ── the wall (landing) ───────────────────────────────────────────────────── */
.tl-testi-agg { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 26px; }
.tl-testi-avg { font-size: 30px; font-weight: 800; letter-spacing: -0.02em;
  color: transparent; background: var(--wot-grad); -webkit-background-clip: text; background-clip: text; }
.tl-testi-agg .tl-star { width: 22px; height: 22px; }
.tl-testi-count { font-size: 14px; font-weight: 600; color: var(--wot-text-2); }

.tl-testi-wall { margin-bottom: 28px; }
.tl-testi-loading { text-align: center; color: var(--wot-text-2); padding: 30px 0; font-size: 14px; }
/* masonry-ish column flow so cards of different heights pack tightly */
.tl-testi-cols { column-count: 3; column-gap: 18px; }
@media (max-width: 920px) { .tl-testi-cols { column-count: 2; } }
@media (max-width: 600px) { .tl-testi-cols { column-count: 1; } }

.tl-testi-card {
  position: relative; break-inside: avoid; margin-bottom: 18px; padding: 20px 20px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.09); border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28); transition: transform .18s ease, border-color .2s ease;
}
.tl-testi-card:hover { transform: translateY(-3px); border-color: rgba(255,31,143,0.32); }
.tl-testi-stars { margin-bottom: 11px; }
.tl-testi-stars .tl-star { width: 16px; height: 16px; }
.tl-testi-body { margin: 0 0 16px; font-size: 15px; line-height: 1.58; color: var(--wot-text-0); }
.tl-testi-foot { display: flex; align-items: center; gap: 11px; }
.tl-testi-av { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: #fff; background: var(--wot-grad); box-shadow: 0 4px 12px rgba(255,31,143,0.3); }
.tl-testi-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-testi-id strong { font-size: 14px; font-weight: 700; }
.tl-testi-id span { font-size: 12px; color: var(--wot-text-2); }
.tl-testi-plats { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.tl-testi-plat { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; color: var(--wot-text-1);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); }
.tl-testi-hide { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; font-size: 12px; color: var(--wot-text-2);
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.12); opacity: 0; transition: .15s; }
.tl-testi-card:hover .tl-testi-hide { opacity: 1; }
.tl-testi-hide:hover { color: var(--wot-bear); border-color: var(--wot-bear); }

.tl-testi-empty { text-align: center; max-width: 460px; margin: 0 auto; padding: 30px 0; }
.tl-testi-empty-orb { display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto 16px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255,192,97,0.22), rgba(255,31,143,0.06)); }
.tl-testi-empty-orb .tl-star { width: 38px; height: 38px; filter: drop-shadow(0 0 10px rgba(255,192,97,0.6)); }
.tl-testi-empty strong { display: block; font-size: 18px; margin-bottom: 8px; }
.tl-testi-empty p { font-size: 14px; line-height: 1.55; color: var(--wot-text-1); margin: 0 auto 18px; }

.tl-testi-cta { text-align: center; }