/* ===================================================================
   Nahal Testimonials — frontend styles.
   Every --tw-* variable below is overridden per shortcode instance via
   an inline style attribute built from the admin settings; the values
   here are just a sane fallback if the widget is ever previewed without it.
=================================================================== */
.tw-widget{
  --tw-bg:#FBF6EC;
  --tw-card-bg:#FFFFFF;
  --tw-card-bg-active:#FFFBF3;
  --tw-border:#EBDFC4;
  --tw-border-active:#CE962C;
  --tw-accent:#CE962C;
  --tw-accent-soft:#F3E4C4;
  --tw-accent-ink:#3A2A12;
  --tw-olive:#8C9A5C;
  --tw-text:#31281C;
  --tw-text-dim:#8A7A63;
  --tw-text-faint:#B9AA8E;
  --tw-radius:20px;
  --tw-font:'Vazirmatn','IRANSansX',Tahoma,sans-serif;
  --tw-quote-size:14.5px;
  --tw-name-size:13.5px;
  --tw-card-w:420px;
  --tw-viewport-h:480px;
  --tw-track-w:1100px;
  --tw-duration:500ms;
  --tw-gap:18px;
  --tw-inactive-opacity:.9;
  --tw-inactive-scale:.94;
  --tw-inactive-saturate:.94;
  --tw-active-scale:1;
  --tw-active-scale-mobile:1.06;
  --tw-quote-size-mobile:13.5px;
  --tw-name-size-mobile:12.5px;
  --tw-radius-mobile:16px;
  --tw-gap-mobile:14px;
  --tw-viewport-h-mobile:420px;
  --tw-ease:cubic-bezier(.16,.84,.32,1);
  --tw-shadow:0 14px 30px -22px rgba(206,150,44,.12);
  --tw-shadow-active:0 18px 38px -20px rgba(206,150,44,.17);

  max-width:var(--tw-card-w);
  margin:0 auto;
  font-family:var(--tw-font);
  color:var(--tw-text);
  direction:rtl;
}
.tw-widget *{ box-sizing:border-box; }

.tw-vwrap{ position:relative; background:var(--tw-bg); border-radius:calc(var(--tw-radius) + 8px); }
.tw-vwrap::before,.tw-vwrap::after{
  content:"";position:absolute;right:0;left:0;height:16px;z-index:2;pointer-events:none;
}
.tw-vwrap::before{ top:0; background:linear-gradient(180deg,var(--tw-bg),transparent); border-radius:calc(var(--tw-radius) + 8px) calc(var(--tw-radius) + 8px) 0 0; }
.tw-vwrap::after{ bottom:0; background:linear-gradient(0deg,var(--tw-bg),transparent); border-radius:0 0 calc(var(--tw-radius) + 8px) calc(var(--tw-radius) + 8px); }

.tw-vscroll{
  position:relative;
  height:var(--tw-viewport-h);
  overflow:hidden;
  touch-action:pan-x;
}
.tw-track{
  display:flex;flex-direction:column;align-items:stretch;gap:var(--tw-gap);
  will-change:transform;
  transition:transform var(--tw-duration) var(--tw-ease);
}
/* used for the one-frame "silent" jump back to the real card at a loop boundary —
   disables the track's own slide AND every card's active/inactive transition, so the
   swap is truly invisible instead of playing a little "pop" animation on arrival */
.tw-instant, .tw-instant .tw-card{ transition:none !important; }

.tw-card{
  flex:0 0 auto;
  background:var(--tw-card-bg);border:1px solid var(--tw-border);
  border-radius:var(--tw-radius);padding:22px 24px;position:relative;
  opacity:var(--tw-inactive-opacity);filter:saturate(var(--tw-inactive-saturate));
  transform:scale(var(--tw-inactive-scale));
  box-shadow:var(--tw-shadow);
  transition:transform var(--tw-duration) var(--tw-ease),opacity var(--tw-duration) var(--tw-ease),
             filter var(--tw-duration) var(--tw-ease),background var(--tw-duration) var(--tw-ease),
             border-color var(--tw-duration) var(--tw-ease),box-shadow var(--tw-duration) var(--tw-ease);
}
.tw-card.active{
  background:var(--tw-card-bg-active);
  border-color:var(--tw-border-active);
  opacity:1;filter:none;
  transform:scale(var(--tw-active-scale));
  box-shadow:var(--tw-shadow-active);
}

.tw-quote{
  font-size:var(--tw-quote-size);line-height:1.8;color:var(--tw-text-dim);
  margin:0 0 18px;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.tw-card.active .tw-quote{ color:var(--tw-text); }

.tw-person{ display:flex;align-items:center;justify-content:space-between;gap:10px; }
.tw-id{ display:flex;align-items:center;gap:10px;min-width:0; }
.tw-avatar{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  background:var(--tw-accent-soft);border:1px solid var(--tw-border);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--tw-accent-ink);
}
.tw-avatar img{ width:100%;height:100%;object-fit:cover; }
.tw-name{ font-size:var(--tw-name-size);font-weight:600;line-height:1.4; }

/* the rating now lives directly under the name, in place of a location line */
.tw-rating{ font-size:11.5px;letter-spacing:1.5px;color:var(--tw-accent);margin-top:2px; }
.tw-rating-off{ color:var(--tw-border); }

.tw-id:has(~ .tw-voice.open){ opacity:0;pointer-events:none;position:absolute; }

/* ================= VOICE PLAYER ================= */
.tw-voice{ position:relative;flex:0 0 auto;display:flex;align-items:center; }
.tw-voice.open{ flex:1;min-width:0; }

.tw-v-toggle{
  position:relative;width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  background:var(--tw-accent);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px -2px rgba(148,113,34,.35),0 0 0 4px rgba(206,150,44,.12);
  animation:tw-pulse 2.6s ease-in-out infinite;
  transition:transform .3s var(--tw-ease);
}
.tw-v-toggle:hover{ transform:scale(1.08); }
@keyframes tw-pulse{
  0%,100%{ box-shadow:0 3px 10px -2px rgba(148,113,34,.35),0 0 0 4px rgba(206,150,44,.12); }
  50%{ box-shadow:0 3px 14px -2px rgba(148,113,34,.4),0 0 0 8px rgba(206,150,44,.04); }
}
.tw-v-toggle svg{ width:12px;height:12px; }
.tw-voice.open .tw-v-toggle{ display:none; }

.tw-v-panel{ display:none;align-items:center;gap:7px;width:100%; }
.tw-voice.open .tw-v-panel{ display:flex; }

.tw-v-play{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;border:none;cursor:pointer;
  background:var(--tw-accent);display:flex;align-items:center;justify-content:center;
}
.tw-v-play svg{ width:11px;height:11px; }

.tw-v-wave{ flex:1;min-width:0;height:22px;display:flex;align-items:center;gap:2px;cursor:pointer; }
.tw-v-wave span{
  flex:1;min-width:2px;height:20%;border-radius:2px;
  background:var(--tw-border);transition:background .25s;
}
.tw-v-wave span.played{ background:var(--tw-accent); }

.tw-v-time{
  font-size:10px;color:var(--tw-text-faint);min-width:28px;text-align:left;
  font-variant-numeric:tabular-nums;flex:0 0 auto;
}
.tw-v-speed{
  flex:0 0 auto;font-size:10px;color:var(--tw-text-dim);background:var(--tw-bg);
  border:1px solid var(--tw-border);border-radius:100px;padding:3px 8px;cursor:pointer;
}
.tw-v-close{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:none;cursor:pointer;
  background:var(--tw-bg);color:var(--tw-text-dim);
  display:flex;align-items:center;justify-content:center;
}
.tw-v-close svg{ width:10px;height:10px; }

/* ================= NAV: up/down arrows + dots ================= */
.tw-nav{ display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px; }
.tw-arrow{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;cursor:pointer;
  background:var(--tw-card-bg);border:1px solid var(--tw-border);color:var(--tw-text-dim);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,border-color .3s,color .3s,transform .3s var(--tw-ease);
}
.tw-arrow:hover{ background:var(--tw-accent);border-color:var(--tw-accent);color:#fff;transform:translateY(-2px); }
.tw-arrow:disabled{ opacity:.3;pointer-events:none;transform:none; }
.tw-arrow svg{ width:14px;height:14px; }
.tw-dots{ display:flex;align-items:center;gap:6px;max-width:140px;overflow:hidden; }
.tw-dot{ width:6px;height:6px;border-radius:50%;background:var(--tw-border);border:none;cursor:pointer;padding:0;flex:0 0 auto;transition:all .3s var(--tw-ease); }
.tw-dot.active{ height:18px;border-radius:100px;background:var(--tw-accent); }

/* ===================================================================
   HORIZONTAL MODE — toggled by JS (adds/removes .tw-orient-horizontal
   or .tw-orient-vertical on .tw-widget) based on the per-device setting
   chosen in the admin panel and the current viewport width.
=================================================================== */
.tw-orient-horizontal .tw-vwrap{ border-radius:calc(var(--tw-radius) + 8px); }
.tw-orient-horizontal .tw-vwrap::before,
.tw-orient-horizontal .tw-vwrap::after{
  content:none;
}

.tw-orient-horizontal .tw-vscroll{ height:auto;touch-action:pan-y; }
.tw-orient-horizontal .tw-track{
  flex-direction:row;
  align-items:center;
  padding-block:22px;
}
.tw-orient-horizontal .tw-card{
  width:clamp(200px, 62vw, var(--tw-card-w));
  flex:0 0 auto;
}
.tw-orient-horizontal .tw-arrow svg{ transform:rotate(90deg); }

/* ================= RESPONSIVE ================= */
.tw-orient-horizontal.tw-widget{ max-width:min(100%, var(--tw-track-w)); }

@media (max-width:767px){
  .tw-widget:not(.tw-orient-horizontal) .tw-track{ padding-inline:5%; }
  .tw-card.active{ transform:scale(var(--tw-active-scale-mobile)); }
  .tw-widget{
    --tw-quote-size:var(--tw-quote-size-mobile);
    --tw-name-size:var(--tw-name-size-mobile);
    --tw-radius:var(--tw-radius-mobile);
    --tw-gap:var(--tw-gap-mobile);
    --tw-viewport-h:var(--tw-viewport-h-mobile);
  }
  .tw-widget:not(.tw-orient-horizontal){ max-width:100%; }
  .tw-card{ padding:18px 18px; }
}
@media (max-width:360px){
  .tw-avatar{ width:32px;height:32px;font-size:11px; }
}
@media (prefers-reduced-motion:reduce){
  .tw-card,.tw-track,.tw-arrow,.tw-dot,.tw-v-toggle{ transition:none;animation:none; }
}