/* ═══════════════════════════════════════
   LIPAS Testimonials — ltst.css v1.0
═══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;}

.ltst-wrap{width:100%;padding:40px 0 48px;font-family:inherit;}

/* ── HEADER ── */
.ltst-header{text-align:center;padding:0 20px 32px;}
.ltst-tag{display:inline-block;font-size:11px;font-weight:700;color:#234435;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;}
.ltst-title{font-size:32px;font-weight:600;color:#1a1a1a;margin:0 0 10px;line-height:1.25;}
.ltst-sub{font-size:15px;color:#666;line-height:1.65;max-width:560px;margin:0 auto;}

/* ── SLIDER AREA ── */
.ltst-slider-area{position:relative;display:flex;align-items:center;width:100%;overflow:hidden;padding:0;}

/* ── SIDE PEEK CARDS ── */
.ltst-side{flex-shrink:0;width:80px;cursor:pointer;z-index:2;align-self:stretch;display:flex;align-items:center;}
.ltst-side-prev{padding-left:0;}
.ltst-side-next{padding-right:0;}
.ltst-side-inner{position:relative;width:80px;height:240px;border-radius:10px;overflow:hidden;display:flex;align-items:flex-end;}
.ltst-side-thumb{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;}
.ltst-side-fallback-1{background:#1a2820;}
.ltst-side-fallback-2{background:#201a18;}
.ltst-side-fallback-3{background:#1a1f28;}
.ltst-side-fallback-4{background:#201e14;}
.ltst-side-fallback-5{background:#1a1820;}
.ltst-side-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.52);}
.ltst-side-name{position:relative;z-index:2;writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);color:#fff;font-size:12px;font-weight:500;padding:10px 0 10px 10px;letter-spacing:0.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:180px;}
.ltst-side-arrow{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:3;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;}
.ltst-side:hover .ltst-side-inner{opacity:0.85;}

/* ── MAIN TRACK ── */
.ltst-track-outer{flex:1;overflow:hidden;min-width:0;}
.ltst-track{display:flex;transition:transform .42s cubic-bezier(.4,0,.2,1);will-change:transform;}

.ltst-slide{flex-shrink:0;width:100%;padding:0 12px;}

/* ── MAIN CARD ── */
.ltst-main-card{position:relative;width:100%;border-radius:16px;overflow:hidden;background:#1a1a1a;background-size:cover;background-position:center;background-repeat:no-repeat;aspect-ratio:16/9;display:flex;align-items:flex-end;}

.ltst-card-fallback{position:absolute;inset:0;}
.ltst-card-fallback-1{background:#1a2820;}
.ltst-card-fallback-2{background:#20181a;}
.ltst-card-fallback-3{background:#18202a;}
.ltst-card-fallback-4{background:#201e14;}
.ltst-card-fallback-5{background:#1a1820;}

.ltst-card-dim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.78) 0%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.05) 100%);}

/* ── PLAY BUTTON ── */
.ltst-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);z-index:3;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,0.95);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s, background .15s;}
.ltst-play-btn:hover{transform:translate(-50%,-60%) scale(1.08);background:#fff;}

/* ── CARD INFO OVERLAY ── */
.ltst-card-info{position:relative;z-index:2;padding:20px 24px 24px;width:100%;}
.ltst-card-name{font-size:18px;font-weight:600;color:#fff;margin-bottom:4px;}
.ltst-card-meta{font-size:13px;color:rgba(255,255,255,0.7);margin-bottom:12px;}
.ltst-card-quote{display:flex;gap:8px;align-items:flex-start;margin-bottom:10px;}
.ltst-q-mark{font-size:26px;font-weight:700;color:#cabda1;line-height:1;flex-shrink:0;margin-top:-4px;}
.ltst-q-text{font-size:14px;color:rgba(255,255,255,0.9);line-height:1.55;font-style:italic;}
.ltst-stars{display:flex;gap:3px;}
.ltst-star.on{color:#cabda1;font-size:14px;}
.ltst-star.off{color:rgba(255,255,255,0.25);font-size:14px;}

/* ── DOTS ── */
.ltst-dots{display:flex;justify-content:center;gap:8px;margin-top:22px;}
.ltst-dot{width:8px;height:8px;border-radius:50%;background:rgba(35,68,53,0.2);cursor:pointer;transition:all .25s;}
.ltst-dot.active{background:#234435;width:24px;border-radius:4px;}

/* ── VIDEO LIGHTBOX ── */
.ltst-lb{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;}
.ltst-lb-backdrop{position:absolute;inset:0;background:rgba(4,4,4,0.92);cursor:pointer;}
.ltst-lb-box{position:relative;z-index:2;width:100%;max-width:900px;}
.ltst-lb-close{position:absolute;top:-44px;right:0;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;}
.ltst-lb-close:hover{background:rgba(255,255,255,0.22);}
.ltst-lb-iframe-wrap{position:relative;width:100%;padding-bottom:56.25%;background:#000;border-radius:12px;overflow:hidden;}
.ltst-lb-iframe-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}

/* ── RESPONSIVE — TABLET ── */
@media(max-width:900px){
    .ltst-title{font-size:26px;}
    .ltst-side-inner{height:200px;}
    .ltst-play-btn{width:50px;height:50px;}
    .ltst-card-name{font-size:16px;}
    .ltst-q-text{font-size:13px;}
}

/* ── RESPONSIVE — MOBILE ── */
@media(max-width:640px){
    .ltst-wrap{padding:28px 0 36px;}
    .ltst-header{padding:0 16px 24px;}
    .ltst-title{font-size:22px;}
    .ltst-sub{font-size:13px;}
    .ltst-side{width:52px;}
    .ltst-side-inner{height:160px;width:52px;}
    .ltst-side-name{font-size:11px;padding:8px 0 8px 8px;}
    .ltst-side-arrow{width:24px;height:24px;}
    .ltst-play-btn{width:44px;height:44px;}
    .ltst-play-btn svg{width:16px;height:16px;}
    .ltst-card-info{padding:14px 16px 18px;}
    .ltst-card-name{font-size:15px;}
    .ltst-card-meta{font-size:11px;}
    .ltst-q-text{font-size:12px;}
    .ltst-slide{padding:0 6px;}
    .ltst-lb{padding:12px;}
    .ltst-lb-close{top:-38px;}
}

@media(max-width:400px){
    .ltst-side{width:40px;}
    .ltst-side-inner{width:40px;height:140px;}
    .ltst-side-name{font-size:10px;}
    .ltst-title{font-size:19px;}
}
