/*
  dahuuk-calling.css
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  সব ক্লাসের আগে dhk- prefix — ভবিষ্যতের কোনো পেজ redesign/library
  (Bootstrap, ইত্যাদি) এর সাথে নাম-সংঘর্ষ এড়াতে ইচ্ছাকৃতভাবে।
  ব্র্যান্ড কালার ছাড়া কোনো নতুন রঙ নেই, gradient নেই।
*/

.dhk-overlay {
    position: fixed; inset: 0; z-index: 999999;
    background: rgba(20, 18, 16, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hind Siliguri", sans-serif;
}

.dhk-incoming-card {
    background: #fff; border-radius: 16px; padding: 28px 24px;
    width: 100%; max-width: 320px; text-align: center;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
}

.dhk-avatar {
    width: 72px; height: 72px; border-radius: 50%;
    background: #fff0eb; color: #c94525;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 700; margin: 0 auto 16px;
}

.dhk-caller-label { font-size: 17px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.dhk-order-ref { font-size: 13px; color: #777; margin-bottom: 24px; }

.dhk-action-row { display: flex; justify-content: center; gap: 28px; }

.dhk-btn-circle {
    width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
    font-size: 22px; display: flex; align-items: center; justify-content: center;
    transition: transform .1s ease; color: #fff;
}
.dhk-btn-circle:active { transform: scale(.93); }
.dhk-btn-decline { background: #d32f2f; }
.dhk-btn-accept  { background: #2e7d32; }
.dhk-btn-label { display: block; margin-top: 8px; font-size: 12px; color: #666; }

/* ── ইন-কল UI (popup window বা mobile full-page — দুইখানেই একই markup) ── */
.dhk-call-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hind Siliguri", sans-serif;
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: #fff; color: #1a1a1a; padding: 32px 20px;
    box-sizing: border-box;
}

.dhk-call-order { font-size: 13px; color: #777; margin-bottom: 4px; }
.dhk-call-orderid { font-size: 14px; font-weight: 600; margin-bottom: 28px; }

.dhk-call-avatar {
    width: 88px; height: 88px; border-radius: 50%;
    background: #f5f3f0; color: #999;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; margin-bottom: 16px;
}
.dhk-call-avatar.dhk-ringing { background: #e6f4ea; color: #188038; }

.dhk-call-role { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.dhk-call-status { font-size: 14px; color: #777; margin-bottom: 32px; min-height: 20px; }
.dhk-call-timer {
    font-size: 26px; font-weight: 700; letter-spacing: 1px;
    margin-bottom: 32px; font-variant-numeric: tabular-nums;
}

.dhk-call-actions { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }

.dhk-btn-mute { background: #f0eee9; color: #333; }
.dhk-btn-mute.dhk-active { background: #1a1a1a; color: #fff; }
.dhk-btn-end { background: #d32f2f; }

.dhk-call-message {
    font-size: 13px; padding: 10px 14px; border-radius: 8px; margin-bottom: 20px;
    background: #fce8e6; color: #c5221f; display: none; max-width: 320px;
}
.dhk-call-message.dhk-visible { display: block; }

@media (min-width: 480px) {
    .dhk-incoming-card { max-width: 340px; }
}

/* Popup window content is fixed at 360px; keep everything fluid inside it regardless */
.dhk-call-page * { box-sizing: border-box; }