/*
Theme Name: Live Call Theme
Theme URI: https://zivira.online/
Description: Ultra-Fast High Performance Video Call Landing Page
Version: 2.1.0
Author: Web Team
Text Domain: live-call-theme
*/

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;padding:0;background-color:#111b21}
body{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;font-family:'Cairo','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;overflow:hidden;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;direction:rtl}

/* Full-Screen Edge-to-Edge on All Mobile Phones (Zero Margins, Zero Black Bars) */
.call-card,
.mobile-device-frame{position:relative;width:100%;width:100vw;min-height:100vh;min-height:100dvh;height:100dvh;background:#111b21;border-radius:0;border:none;box-shadow:none;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;z-index:10}

.top-status-bar{width:100%;height:5px;background:#075e54;flex-shrink:0}
.card-content{width:100%;height:calc(100% - 5px);padding:30px 20px calc(env(safe-area-inset-bottom,0px) + 30px);display:flex;flex-direction:column;align-items:center;justify-content:space-between}

.avatar-section{position:relative;width:190px;height:190px;display:flex;align-items:center;justify-content:center;margin-top:10px}
.concentric-ring{position:absolute;border-radius:50%;pointer-events:none}
.ring-outer{width:184px;height:184px;border:1.5px solid rgba(37,211,102,.28);animation:ringPulseOuter 2.6s ease-in-out infinite}
.ring-inner{width:156px;height:156px;border:2px solid rgba(37,211,102,.5);animation:ringPulseInner 2.6s ease-in-out infinite}
@keyframes ringPulseOuter{0%,100%{transform:scale(1);border-color:rgba(37,211,102,.22)}50%{transform:scale(1.05);border-color:rgba(37,211,102,.42)}}
@keyframes ringPulseInner{0%,100%{transform:scale(1);border-color:rgba(37,211,102,.45)}50%{transform:scale(1.03);border-color:rgba(37,211,102,.7)}}

.avatar-wrapper{position:relative;width:130px;height:130px;border-radius:50%;z-index:5;display:block}
.avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 25%;border:3.5px solid rgba(255,255,255,.9);box-shadow:0 4px 20px rgba(0,0,0,.4);display:block}
.video-badge{position:absolute;bottom:0;right:0;width:34px;height:34px;background:#25d366;border:2.5px solid #111b21;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.35);z-index:6}
.video-badge svg{width:17px;height:17px;fill:#fff}

.caller-details{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:4px}
.caller-name{color:#e9edef;font-size:28px;font-weight:800;letter-spacing:.1px;line-height:1.25}
.call-prompt{color:#d1d7db;font-size:17px;font-weight:600;margin-top:8px}
.call-action-text{color:#8696a0;font-size:15px;font-weight:500;margin-top:3px}

.actions-container{width:100%;max-width:340px;display:flex;direction:ltr;justify-content:space-between;align-items:flex-end;margin-bottom:20px;padding:0 15px}
.action-group{display:flex;flex-direction:column;align-items:center;gap:8px}
.action-label{font-size:13px;font-weight:600;color:#8696a0}

.btn{border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s ease,box-shadow .15s ease;position:relative;outline:none;border-radius:50%;text-decoration:none}
.btn:active{transform:scale(.9)!important}
.btn-decline{width:64px;height:64px;background:#ea0038;box-shadow:0 4px 16px rgba(234,0,56,.4)}
.btn-decline:hover{transform:scale(1.07);box-shadow:0 6px 20px rgba(234,0,56,.55)}
.btn-decline svg{width:28px;height:28px;fill:#fff}

.btn-message{width:52px;height:52px;background:#202c33;border:1px solid #2a3942;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.btn-message:hover{background:#2a3942;transform:scale(1.07)}
.btn-message svg{width:24px;height:24px;fill:#8696a0}

.btn-accept{width:70px;height:70px;background:#00a884;box-shadow:0 4px 22px rgba(0,168,132,.55)}
.btn-accept:hover{transform:scale(1.07);box-shadow:0 6px 26px rgba(0,168,132,.7)}
.btn-accept svg{width:30px;height:30px;fill:#fff;animation:phoneRing 1.4s ease-in-out infinite}

@keyframes phoneRing{0%{transform:rotate(0deg)}10%{transform:rotate(14deg)}20%{transform:rotate(-10deg)}30%{transform:rotate(10deg)}40%{transform:rotate(-6deg)}50%{transform:rotate(4deg)}60%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}
.btn-accept::before,.btn-accept::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2.5px solid rgba(37,211,102,.55);animation:btnPulseRing 2.2s ease-out infinite;pointer-events:none}
.btn-accept::after{animation-delay:1.1s}
@keyframes btnPulseRing{0%{transform:scale(1);opacity:.9;box-shadow:0 0 12px rgba(37,211,102,.4)}100%{transform:scale(1.65);opacity:0;box-shadow:0 0 20px rgba(37,211,102,0)}}

/* Desktop View (Laptops & Monitors > 768px) */
@media(min-width:769px){
  body{background:#080d11}
  body::before{content:'';position:fixed;inset:0;background:radial-gradient(circle at 50% 25%,rgba(7,94,84,.18) 0%,transparent 60%),radial-gradient(circle at 50% 80%,rgba(37,211,102,.08) 0%,transparent 55%);pointer-events:none}
  .call-card,
  .mobile-device-frame{max-width:390px;height:670px;min-height:auto;border-radius:28px;box-shadow:0 24px 60px rgba(0,0,0,.6),0 2px 10px rgba(0,0,0,.3);animation:slideUpFade .4s cubic-bezier(.16,1,.3,1) both}
  .card-content{padding:36px 24px 40px}
}
@keyframes slideUpFade{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}