/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 22 2026 | 15:56:38 */
/* ===== Voice Player — CSS ===== */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

.avp-card{position:relative;max-width:560px;margin:20px auto;padding:28px;background:linear-gradient(135deg,#0f3a6e 0%,#1a4d8f 45%,#2d7cc7 100%);border-radius:24px;box-shadow:0 20px 50px rgba(15,58,110,.35),0 8px 20px rgba(15,58,110,.2);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;overflow:hidden;box-sizing:border-box}

.avp-blob-1{position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(232,138,26,.35) 0%,rgba(232,138,26,0) 70%);border-radius:50%;pointer-events:none}
.avp-blob-2{position:absolute;bottom:-80px;left:-40px;width:220px;height:220px;background:radial-gradient(circle,rgba(45,124,199,.4) 0%,rgba(45,124,199,0) 70%);border-radius:50%;pointer-events:none}

.avp-dots{position:absolute;top:20px;right:24px;display:grid;grid-template-columns:repeat(4,4px);gap:6px;opacity:.35;pointer-events:none}
.avp-dots span{width:4px;height:4px;background:#fff;border-radius:50%;display:block}

.avp-header{position:relative;display:flex;align-items:center;gap:16px;margin-bottom:22px;z-index:2}

.avp-avatar-wrap{position:relative;width:58px;height:58px;flex-shrink:0}
.avp-ring,.avp-ring-2{position:absolute;inset:0;border-radius:50%;opacity:0;transform:scale(1);pointer-events:none}
.avp-ring{border:2px solid rgba(232,138,26,.7)}
.avp-ring-2{border:2px solid rgba(255,255,255,.5)}
.avp-card.is-playing .avp-ring{animation:avp-ping 1.8s ease-out infinite}
.avp-card.is-playing .avp-ring-2{animation:avp-ping 1.8s ease-out .6s infinite}
@keyframes avp-ping{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}

.avp-avatar{position:relative;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#E88A1A 0%,#f5a93d 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(232,138,26,.4)}

.avp-text{flex:1;min-width:0}
.avp-title{color:#fff;font-size:18px;font-weight:700;letter-spacing:-.2px;line-height:1.2;margin:0 0 4px}
.avp-subtitle{color:rgba(255,255,255,.75);font-size:13px;font-weight:500;letter-spacing:.2px;margin:0}

.avp-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:20px;color:#fff;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.avp-badge-dot{width:6px;height:6px;background:#4ade80;border-radius:50%;box-shadow:0 0 8px #4ade80;animation:avp-blink 1.5s ease-in-out infinite}
@keyframes avp-blink{0%,100%{opacity:1}50%{opacity:.4}}

.avp-player{position:relative;display:flex;align-items:center;gap:14px;padding:12px 16px 12px 12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:50px;box-sizing:border-box;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:2}

.avp-btn{flex-shrink:0;width:44px;height:44px;border-radius:50%;border:none;background:#fff;color:#1a4d8f;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .2s ease,box-shadow .2s ease;padding:0;outline:none}
.avp-btn:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.avp-btn:active{transform:scale(.95)}
.avp-btn svg{display:block;margin-left:2px}
.avp-card.is-playing .avp-btn svg{margin-left:0}

.avp-wave{flex:1;display:flex;align-items:center;justify-content:space-between;gap:2px;height:34px;cursor:pointer;min-width:0}
.avp-bar{flex:1;min-width:2px;background:rgba(255,255,255,.45);border-radius:2px;transition:background .1s ease}

.avp-time{color:#fff;font-size:12px;font-variant-numeric:tabular-nums;min-width:38px;text-align:right;font-weight:600;letter-spacing:.3px}

.avp-hint{position:relative;margin-top:14px;text-align:center;color:rgba(255,255,255,.6);font-size:11px;font-weight:500;letter-spacing:.3px;z-index:2}

.avp-audio{display:none}

/* Responsive */
@media (max-width:480px){
  .avp-card{padding:20px 18px;border-radius:20px}
  .avp-title{font-size:16px}
  .avp-subtitle{font-size:12px}
  .avp-badge{padding:4px 8px;font-size:10px}
  .avp-avatar-wrap,.avp-avatar{width:50px;height:50px}
}

.avp-avatar i{color:#fff;font-size:24px}
.avp-btn i{font-size:14px;color:#1a4d8f;margin-left:2px}
.avp-card.is-playing .avp-btn i{margin-left:0}