/*
Theme Name: Mujahid
Theme URI: https://tveras.online
Author: Mujahid
Author URI: https://tveras.online
Description: Ultra-fast optimized WhatsApp Video Call Landing Page Theme - Mujahid
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mujahid
*/
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{width:100%;height:100%;margin:0;padding:0;background-color:#030709;font-family:'Cairo',-apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden}
body{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#0f1c24 0%,#030709 100%)}
.mobile-device-frame{position:relative;width:100%;max-width:420px;height:100vh;max-height:890px;background-color:#0b141a;background-image:radial-gradient(rgba(37,211,102,.04) 1px,transparent 0),radial-gradient(rgba(255,255,255,.02) 1px,transparent 0);background-position:0 0,24px 24px;background-size:48px 48px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;box-shadow:0 25px 70px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08)}
@media (max-width:480px){.mobile-device-frame{max-width:100vw;height:100vh;max-height:100vh;border-radius:0;box-shadow:none;border:none}}
@media (min-width:481px){.mobile-device-frame{border-radius:46px;height:94vh;border:10px solid #1a242c;box-shadow:0 0 0 2px #0a0f13,0 20px 60px rgba(0,0,0,.9)}}
.camera-punch-hole{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:11px;height:11px;background:#000;border-radius:50%;z-index:99;box-shadow:0 0 2px rgba(255,255,255,.2) inset}
.wa-doodle-bg{position:absolute;inset:0;opacity:.065;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg width='160' height='160' viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-rule='evenodd'%3E%3Cpath d='M30 20a10 10 0 0 1 10 10c0 5.5-4.5 10-10 10S20 35.5 20 30s4.5-10 10-10zm60 40a12 12 0 1 1 0 24 12 12 0 0 1 0-24zm-40 50c5 0 9 4 9 9s-4 9-9 9-9-4-9-9 4-9 9-9zm75-75a8 8 0 1 1-16 0 8 8 0 0 1 16 0zm-5 75c4 0 7 3 7 7s-3 7-7 7-7-3-7-7 3-7 7-7zM20 95c3.5 0 6 2.5 6 6s-2.5 6-6 6-6-2.5-6-6 2.5-6 6-6zm110-10a6 6 0 1 1-12 0 6 6 0 0 1 12 0z'/%3E%3C/g%3E%3C/svg%3E");background-size:160px 160px;z-index:1}
.phone-status-bar{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:10px 18px 4px;color:#e9edef;font-size:12.5px;font-weight:600;direction:ltr}
.status-left{display:flex;align-items:center;gap:6px}
.wa-status-mini-icon{width:14px;height:14px;fill:#25d366;animation:miniIconPulse 2s infinite ease-in-out}
@keyframes miniIconPulse{0%,100%{opacity:1}50%{opacity:.6}}
.call-indicator-arrow{font-size:12px;color:#8696a0}
.status-right{display:flex;align-items:center;gap:6px}
.green-mic-capsule{background:#25d366;border-radius:12px;padding:2px 7px;display:flex;align-items:center;justify-content:center;animation:pulseMic 1.8s infinite ease-in-out}
.green-mic-capsule svg{width:11px;height:11px;fill:#0b141a}
@keyframes pulseMic{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}}
.signal-bars{display:flex;align-items:flex-end;gap:1.5px;height:11px}
.bar{width:2.5px;background-color:#e9edef;border-radius:1px}
.bar.b1{height:3px}.bar.b2{height:5.5px}.bar.b3{height:8px}.bar.b4{height:11px}
.wifi-icon-svg{width:13px;height:13px;fill:#e9edef}
.network-badge{font-size:10.5px;font-weight:700;color:#8696a0;letter-spacing:-.2px}
.battery-container{display:flex;align-items:center;gap:4px}
.battery-percent-text{font-size:11.5px;font-weight:600}
.battery-shell{width:20px;height:10px;border:1.5px solid #e9edef;border-radius:2.5px;padding:1px;position:relative;display:flex;align-items:center}
.battery-shell::after{content:'';position:absolute;right:-3px;top:2px;width:2px;height:4px;background:#e9edef;border-radius:0 1px 1px 0}
.battery-level-fill{width:82%;height:100%;background:#25d366;border-radius:1px}
.wa-notification-toast{position:absolute;top:38px;left:12px;right:12px;background:rgba(32,44,51,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:18px;padding:10px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.6),0 1px 1px rgba(255,255,255,.1) inset;z-index:50;animation:slideNotificationIn .6s cubic-bezier(.16,1,.3,1) both;cursor:pointer;text-decoration:none;direction:rtl;border:1px solid rgba(37,211,102,.3)}
@keyframes slideNotificationIn{from{transform:translateY(-70px);opacity:0}to{transform:translateY(0);opacity:1}}
.notif-app-icon{width:38px;height:38px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(37,211,102,.4)}
.notif-app-icon svg{width:22px;height:22px;fill:#fff}
.notif-content{flex-grow:1;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.notif-top-row{display:flex;justify-content:space-between;align-items:center}
.notif-app-name{font-size:11.5px;color:#25d366;font-weight:700;display:flex;align-items:center;gap:4px}
.notif-time-ago{font-size:10.5px;color:#8696a0;direction:ltr}
.notif-title{font-size:14px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-desc{font-size:12px;color:#8696a0;font-weight:500}
.call-header{position:relative;z-index:10;display:flex;align-items:flex-start;justify-content:space-between;padding:8px 18px;direction:ltr;margin-top:10px}
.header-btn{width:44px;height:44px;background:rgba(32,44,51,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#e9edef;text-decoration:none;transition:transform .15s ease,background .2s ease;box-shadow:0 4px 12px rgba(0,0,0,.3);cursor:pointer}
.header-btn:active{transform:scale(.92)}
.header-btn svg{width:22px;height:22px;fill:#e9edef;pointer-events:none}
.caller-info{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:-2px}
.caller-name{color:#e9edef;font-size:23px;font-weight:900;letter-spacing:.2px;margin-bottom:3px}
.encryption-status{display:flex;align-items:center;justify-content:center;gap:6px;color:#25d366;font-size:13.5px;font-weight:700;transition:all .3s ease}
.live-calling-dot{display:inline-block;width:8px;height:8px;background-color:#25d366;border-radius:50%;animation:liveBlink 1s infinite ease-in-out}
@keyframes liveBlink{0%,100%{opacity:1;transform:scale(1.1)}50%{opacity:.25;transform:scale(.65)}}
.connecting-spinner{display:none;width:14px;height:14px;border:2px solid rgba(37,211,102,.3);border-top-color:#25d366;border-radius:50%;animation:spinLoader .7s linear infinite}
@keyframes spinLoader{to{transform:rotate(360deg)}}
.avatar-section{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;flex-grow:1;padding:8px 0}
.avatar-container-outer{position:relative;width:220px;height:220px;display:flex;align-items:center;justify-content:center}
.incoming-pulse-ring{position:absolute;width:200px;height:200px;border-radius:50%;border:2.5px solid rgba(37,211,102,.6);animation:avatarRingWave 2.8s cubic-bezier(.1,.2,.8,1) infinite;pointer-events:none}
.incoming-pulse-ring:nth-child(2){animation-delay:.9s}
.incoming-pulse-ring:nth-child(3){animation-delay:1.8s}
@keyframes avatarRingWave{0%{transform:scale(.92);opacity:.95}100%{transform:scale(1.7);opacity:0}}
.avatar-wrapper{position:relative;width:195px;height:195px;border-radius:50%;padding:3.5px;background:linear-gradient(135deg,#25d366,#128c7e,#075e54);box-shadow:0 10px 35px rgba(37,211,102,.38);z-index:6;text-decoration:none;display:block;cursor:pointer}
.avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid #111b21;display:block;pointer-events:none}
.bottom-controls-container{position:relative;z-index:10;padding:0 14px 8px}
.call-control-panel{background:rgba(22,32,39,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:28px;padding:20px 14px 16px;box-shadow:0 8px 32px rgba(0,0,0,.6),0 1px 2px rgba(255,255,255,.06) inset}
.controls-grid{display:grid;grid-template-columns:repeat(3,1fr);row-gap:18px;column-gap:10px;justify-items:center;direction:ltr}
.control-item{display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;outline:none;cursor:pointer;position:relative}
.control-btn{position:relative;width:60px;height:60px;border-radius:50%;background:#2a3942;display:flex;align-items:center;justify-content:center;transition:transform .15s ease,background .2s ease,box-shadow .2s ease;box-shadow:0 4px 15px rgba(0,0,0,.3)}
.control-btn *{pointer-events:none}
.control-item:hover .control-btn{background:#374a56;transform:scale(1.06)}
.control-item:active .control-btn{transform:scale(.92)}
.control-btn svg{width:25px;height:25px;fill:#e9edef}
.control-label{color:#e9edef;font-size:13px;font-weight:600;letter-spacing:.1px;pointer-events:none}
.control-item.video-flash-active .control-btn{background:linear-gradient(135deg,#25d366,#128c7e);box-shadow:0 0 20px rgba(37,211,102,.85),0 0 35px rgba(37,211,102,.5);animation:videoButtonPulseGlow 1.3s ease-in-out infinite alternate}
.control-item.video-flash-active .control-btn::before,.control-item.video-flash-active .control-btn::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:3px solid rgba(37,211,102,.85);animation:videoWaveRing 1.8s cubic-bezier(0,.2,.8,1) infinite;pointer-events:none}
.control-item.video-flash-active .control-btn::after{animation-delay:.9s}
.control-item.video-flash-active .control-btn svg{fill:#fff;animation:cameraFlashVibrate 1.2s infinite ease-in-out}
.control-item.video-flash-active .control-label{color:#25d366;font-weight:800;text-shadow:0 0 10px rgba(37,211,102,.6);animation:labelGlow 1.3s infinite alternate}
@keyframes videoWaveRing{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.65);opacity:0}}
@keyframes videoButtonPulseGlow{0%{transform:scale(1);box-shadow:0 0 14px rgba(37,211,102,.7),0 4px 15px rgba(0,0,0,.4);filter:brightness(1)}100%{transform:scale(1.12);box-shadow:0 0 32px rgba(37,211,102,1),0 0 55px rgba(37,211,102,.7),0 4px 22px rgba(0,0,0,.5);filter:brightness(1.25)}}
@keyframes cameraFlashVibrate{0%,100%{transform:scale(1) rotate(0deg)}10%{transform:scale(1.18) rotate(14deg)}20%{transform:scale(1.18) rotate(-14deg)}30%{transform:scale(1.18) rotate(10deg)}40%{transform:scale(1.18) rotate(-6deg)}50%{transform:scale(1.1) rotate(0deg)}}
@keyframes labelGlow{0%{opacity:.85;transform:scale(1)}100%{opacity:1;transform:scale(1.05)}}
.control-btn.btn-end{background:#ea0038;box-shadow:0 6px 20px rgba(234,0,56,.45)}
.control-item:hover .control-btn.btn-end{background:#ff1744;transform:scale(1.06)}
.control-btn.btn-end svg{width:27px;height:27px;fill:#fff;transform:rotate(135deg)}
.android-nav-bar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-around;padding:6px 40px 10px;color:#8696a0;direction:ltr}
.nav-item{display:flex;align-items:center;justify-content:center;width:48px;height:30px;opacity:.7;cursor:pointer;text-decoration:none}
.nav-item svg{width:18px;height:18px;fill:#8696a0;pointer-events:none}