/* ==========================================
   PREMIUM TTS PLAYER
========================================== */

.tts-player{

position:fixed;

/* left:12px; */

right:0;

bottom:0;

z-index:99999;

font-family:Arial,sans-serif;

}

/* ==========================
   MINI PLAYER
========================== */
/*

.tts-mini{

height:64px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 18px;

border-radius:20px;

background:rgba(22,22,22,.88);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.08);

box-shadow:
0 10px 35px rgba(0,0,0,.45),
0 0 0 1px rgba(255,255,255,.03);

cursor:pointer;

transition:.35s;

}

.tts-mini:hover{

transform:translateY(-2px);

box-shadow:
0 18px 45px rgba(0,0,0,.55);

} */


/* ==========================
   LEFT
========================== */

.tts-mini-left{

display:flex;

justify-content: flex-end;

gap:14px;

}

.tts-icon{

width:46px;

height:46px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;
/* background:linear-gradient(0deg, #000000, #40b73c);*/
background: linear-gradient(161deg, #000000, #353333);
color:#fff;

font-size:20px;

flex-shrink:0;

}

.tts-info{

display:flex;

flex-direction:column;

}

.tts-title{

font-size:15px;

font-weight:700;

color:#fff;

}

.tts-mini-status{

font-size:12px;

color:#9aa0aa;

margin-top:2px;

}

/* ==========================
   RIGHT
========================== */
/*

.tts-mini-right{

display:flex;

align-items:center;

gap:16px;

}  */

.tts-mini-play{

width:42px;

height:42px;

border:none;

border-radius:50%;

background: rgb(0 0 0 / 0%);

color: rgb(0 0 0 / 0%);

cursor:pointer;

font-size:16px;

transition:.25s;

display:flex;

align-items:center;

justify-content:center;

}

.tts-mini-play:hover{

transform:scale(1.08);

background:#6172ff;

}

.tts-arrow{

color:#ffffff00;

font-size:18px;

transition:.35s;

}

/* ==========================
   BODY
========================== */

.tts-body{

margin-top:12px;

background:rgba(25,25,25,.93);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

border-radius:24px;

border:1px solid rgba(255,255,255,.08);

box-shadow:0 20px 60px rgba(0,0,0,.5);

overflow:hidden;

max-height:0;

opacity:0;

padding:0 22px;

transition:

max-height .45s ease,

opacity .35s,

padding .35s;

}

/* ==========================
   OPEN
========================== */

.tts-player.open .tts-body{

max-height:650px;

opacity:1;

padding:22px;

}

.tts-player.open .tts-arrow{

transform:rotate(180deg);

}

/* ==========================
   HEADER
========================== */

.tts-header{

display:flex;

justify-content:space-between;

align-items:center;


}

.tts-header h3{

margin:0;

font-size:20px;

color:#fff;

font-weight:700;

}

.tts-header p{

margin-top:4px;

font-size:13px;

color:#8d8d8d;

}

/* ==========================
   DIVIDER
========================== */

.tts-divider{

height:1px;

background:rgba(255,255,255,.06);

margin:18px 0;

}

/* ==========================
   FADE ANIMATION
========================== */

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(12px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.tts-player.open .tts-body>*{

animation:fadeUp .45s ease;

}

/* ==========================
   GLOW
========================== */

.tts-player::before{

content:"";

position:absolute;

left:50%;

bottom:-20px;

transform:translateX(-50%);

width:180px;

height:50px;

background:#4d5dff;

filter:blur(45px);

opacity:.18;

pointer-events:none;

}

/* ==========================
   SCROLL FIX
========================== */

body{

padding-bottom:95px;

}






















/* ==========================================
   GROUPS
========================================== */

.tts-group{

margin-bottom:18px;

}

.tts-group label{

display:block;

font-size:13px;

font-weight:600;

color:#bdbdbd;

margin-bottom:8px;

}

/* ==========================================
   SELECT
========================================== */

.tts-group select{

width:100%;

height:44px;

padding:0 14px;

background:#2d2d2d;

color:#fff;

border:1px solid rgba(255,255,255,.08);

border-radius:14px;

font-size:14px;

outline:none;

transition:.25s;

}

.tts-group select:hover{

border-color:#5d6eff;

}

.tts-group select:focus{

border-color:#6a7bff;

box-shadow:0 0 0 3px rgba(90,110,255,.15);

}

/* ==========================================
   STATUS
========================================== */

.tts-status{

display:inline-flex;

align-items:center;

gap:8px;

padding:10px 14px;

background:#202020;

border-radius:30px;

color:#8fffb0;

font-size:13px;

margin-bottom:20px;

}

.tts-status::before{

content:"";

width:8px;

height:8px;

background:#41ff77;

border-radius:50%;

animation:ttsPulse 1.2s infinite;

}

@keyframes ttsPulse{

0%{

transform:scale(1);

opacity:1;

}

100%{

transform:scale(2);

opacity:0;

}

}

/* ==========================================
   PROGRESS BAR
========================================== */

.tts-progress{

width:100%;

height:8px;

background:#333;

border-radius:50px;

overflow:hidden;

margin:18px 0;

}

.tts-progress span{

display:block;

width:0;

height:100%;

background:linear-gradient(90deg,#4f68ff,#7ce6ff);

border-radius:50px;

transition:width .3s linear;

}

/* ==========================================
   WAVE
========================================== */

.tts-wave{

height:40px;

display:flex;

justify-content:center;

align-items:flex-end;

gap:5px;

margin-bottom:18px;

}

.tts-wave span{

width:5px;

height:10px;

border-radius:50px;

background:#6c7cff;

animation:wave .8s infinite ease-in-out;

}

.tts-wave span:nth-child(2){

animation-delay:.1s;

}

.tts-wave span:nth-child(3){

animation-delay:.2s;

}

.tts-wave span:nth-child(4){

animation-delay:.3s;

}

.tts-wave span:nth-child(5){

animation-delay:.4s;

}

@keyframes wave{

0%,100%{

height:10px;

}

50%{

height:34px;

}

}

/* ==========================================
   CONTROLS
========================================== */

.tts-controls{

display:flex;

justify-content:center;

gap:18px;

/*
margin-top:25px; */

margin-bottom:22px;

}

.tts-btn{

width:58px;

height:58px;

border:none;

border-radius:50%;

cursor:pointer;

display:flex;

justify-content:center;

align-items:center;

font-size:20px;

transition:.25s;

color:#fff;

}

.tts-btn:hover{

transform:translateY(-3px) scale(1.05);

}

.tts-btn.play{

background:#4d63ff;

box-shadow:0 8px 25px rgba(77,99,255,.35);

}

.tts-btn.pause{

background:#ff9800;

box-shadow:0 8px 25px rgba(255,152,0,.30);

}

.tts-btn.stop{

background:#ef4444;

box-shadow:0 8px 25px rgba(239,68,68,.30);

}

.tts-btn.play:hover{

background:#6275ff;

}

.tts-btn.pause:hover{

background:#ffac33;

}

.tts-btn.stop:hover{

background:#ff5f5f;

}

/* ==========================================
   EXTRA BUTTONS
========================================== */

.tts-extra{

display:flex;

gap:12px;

margin-top:10px;

}

.tts-small-btn{

flex:1;

height:44px;

border:none;

border-radius:14px;

background:#2d2d2d;

color:#fff;

cursor:pointer;

font-size:14px;

display:flex;

align-items:center;

justify-content:center;

gap:8px;

transition:.25s;

}

.tts-small-btn:hover{

background:#3b3b3b;

transform:translateY(-2px);

}

.tts-small-btn i{

font-size:14px;

}









/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){

.tts-player{

/*
left:8px;

right:8px; */

bottom:8px;

}

.tts-mini{

height:58px;

padding:0 14px;

border-radius:18px;

}

.tts-icon{

width:40px;

height:40px;

font-size:18px;

}

.tts-title{

font-size:14px;

}

.tts-mini-status{

font-size:11px;

}

.tts-mini-play{

width:38px;

height:38px;

font-size:14px;

}

.tts-body{

padding:0;

}

.tts-player.open .tts-body{

margin-bottom: -10px;
padding:18px;

max-height:75vh;

overflow-y:auto;

}

.tts-controls{

gap:12px;

}

.tts-btn{

width:52px;

height:52px;

font-size:18px;

}

.tts-extra{

flex-direction:column;

}

.tts-small-btn{

width:100%;

}

}

/* ==========================================
   DESKTOP
========================================== */

@media(min-width:1200px){

.tts-player{

left:50%;

transform:translateX(-50%);

max-width:900px;

}

}

/* ==========================================
   SCROLLBAR
========================================== */

.tts-body::-webkit-scrollbar{

width:8px;

}

.tts-body::-webkit-scrollbar-track{

background:#222;

border-radius:10px;

}

.tts-body::-webkit-scrollbar-thumb{

background:#555;

border-radius:10px;

}

.tts-body::-webkit-scrollbar-thumb:hover{

background:#777;

}

/* ==========================================
   GLASS EFFECT
========================================== */



.tts-body::before{

content:"";

position:absolute;

left:0;

top:0;

right:0;

height:1px;

background:rgba(255,255,255,.08);

}

/* ==========================================
   ACTIVE STATES
========================================== */

.tts-btn:active{

transform:scale(.94);

}

.tts-small-btn:active{

transform:scale(.97);

}

.tts-mini-play:active{

transform:scale(.90);

}

/* ==========================================
   SHADOW
========================================== */

.tts-player{

filter:drop-shadow(0 12px 40px rgba(0,0,0,.45));

}

/* ==========================================
   OPEN ANIMATION
========================================== */

@keyframes ttsOpen{

0%{

opacity:0;

transform:translateY(30px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.tts-player.open .tts-body{

animation:ttsOpen .35s ease;

}

/* ==========================================
   WAVE PLAY MODE
========================================== */

.tts-wave span{

animation-play-state:paused;

}

.tts-player.playing .tts-wave span{

animation-play-state:running;

}

/* ==========================================
   PLAY BUTTON GLOW
========================================== */

.tts-player.playing .tts-btn.play{

box-shadow:

0 0 0 5px rgba(90,110,255,.15),

0 0 25px rgba(90,110,255,.45);

}

/* ==========================================
   MINI ICON GLOW
========================================== */

.tts-player.playing .tts-icon{

box-shadow:

0 0 18px rgba(90,110,255,.45);

}

/* ==========================================
   PROGRESS ANIMATION
========================================== */

.tts-progress span{

background-size:200% 100%;

animation:progressMove 2s linear infinite;

}

@keyframes progressMove{

0%{

background-position:0 0;

}

100%{

background-position:200% 0;

}

}

/* ==========================================
   HOVER EFFECT
========================================== */

.tts-group select:hover,

.tts-small-btn:hover,

.tts-btn:hover{

transition:.25s;

}

/* ==========================================
   SAFE AREA (iPhone)
========================================== */

@supports (padding-bottom: env(safe-area-inset-bottom)){

.tts-player{

bottom:calc(10px + env(safe-area-inset-bottom));

}

}

/* ==========================================
   END
========================================== */