/* =============================================
   Mobile Call Button Pro v1.2 — Front-end
   ============================================= */

/* ── Wrap ── */
#mcb-wrap {
    position: fixed;
    z-index: 99999;
    bottom: var(--mcb-bottom, 20px);
    transition: opacity .35s, transform .35s;
}
#mcb-wrap.mcb-pos-bottom-right  { right: var(--mcb-side, 20px); }
#mcb-wrap.mcb-pos-bottom-center { left: 50%; transform: translateX(-50%); }
#mcb-wrap.mcb-pos-bottom-left   { left: var(--mcb-side, 20px); }
#mcb-wrap.mcb-hidden { opacity: 0; pointer-events: none; }

@media (min-width: 769px) {
    #mcb-wrap:not(.mcb-show-desktop) { display: none !important; }
}

/* ── Main button ── */
.mcb-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--mcb-primary, #25D366);
    color: var(--mcb-text, #fff);
    border: none; cursor: pointer;
    text-decoration: none;
    font-family: Tahoma, 'Vazirmatn', sans-serif;
    font-size: var(--mcb-fs, 15px);
    font-weight: 700;
    white-space: nowrap;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    position: relative;
    transition: transform .15s, opacity .15s;
}
.mcb-btn:active { transform: scale(.96); opacity: .9; }

/* Sizes */
#mcb-wrap.mcb-size-small  .mcb-btn { padding: 10px 16px; }
#mcb-wrap.mcb-size-medium .mcb-btn { padding: 13px 22px; }
#mcb-wrap.mcb-size-large  .mcb-btn { padding: 16px 30px; }

/* Shapes */
#mcb-wrap.mcb-style-pill    .mcb-btn { border-radius: 50px; }
#mcb-wrap.mcb-style-rounded .mcb-btn { border-radius: 14px; }
#mcb-wrap.mcb-style-square  .mcb-btn { border-radius: 6px; }
#mcb-wrap.mcb-style-circle  .mcb-btn {
    border-radius: 50%;
    padding: 0 !important;
    width: 58px; height: 58px;
    justify-content: center;
}
#mcb-wrap.mcb-style-circle .mcb-label { display: none; }

/* Shadow */
#mcb-wrap.mcb-shadow .mcb-btn {
    box-shadow: 0 6px 20px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.15);
}

/* Icon */
.mcb-icon { display: flex; align-items: center; }
.mcb-icon svg { width: 20px; height: 20px; display: block; flex-shrink: 0; }
#mcb-wrap.mcb-size-small .mcb-icon svg { width: 17px; height: 17px; }
#mcb-wrap.mcb-size-large .mcb-icon svg { width: 24px; height: 24px; }
.mcb-icon-close { display: none; }

/* ── Animations ──────────────────────────────────── */

/* PULSE — stronger ring, clearly visible */
@keyframes mcb-pulse-ring {
    0%   { box-shadow: 0 0 0 0   var(--mcb-primary, #25D366); }
    60%  { box-shadow: 0 0 0 14px rgba(0,0,0,0); }
    100% { box-shadow: 0 0 0 0   rgba(0,0,0,0); }
}
.mcb-anim-pulse {
    animation: mcb-pulse-ring 1.8s ease-out infinite;
}
/* Keep shadow on top of pulse when both enabled */
#mcb-wrap.mcb-shadow .mcb-anim-pulse {
    animation: mcb-pulse-ring 1.8s ease-out infinite;
    box-shadow: 0 6px 20px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.15);
}

/* BOUNCE */
@keyframes mcb-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30%           { transform: translateY(-9px); }
}
.mcb-anim-bounce { animation: mcb-bounce 2.4s ease-in-out infinite; }
/* center position uses translateX so we override bounce with a scale-based one */
#mcb-wrap.mcb-pos-bottom-center .mcb-anim-bounce { animation: none; }

/* SHAKE */
@keyframes mcb-shake {
    0%, 80%, 100% { transform: rotate(0); }
    84% { transform: rotate(-14deg); }
    88% { transform: rotate(14deg); }
    92% { transform: rotate(-8deg); }
    96% { transform: rotate(8deg); }
}
.mcb-anim-shake .mcb-icon { display: inline-flex; animation: mcb-shake 3s ease-in-out infinite; }

/* Open state: swap icons */
#mcb-wrap.mcb-open .mcb-icon-default { display: none; }
#mcb-wrap.mcb-open .mcb-icon-close   { display: flex; }

/* ── Drawer ───────────────────────────────────────── */
#mcb-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 99998;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
#mcb-overlay.open { display: block; animation: mcb-fadein .25s; }
@keyframes mcb-fadein { from { opacity:0; } to { opacity:1; } }

#mcb-drawer {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 99999;
    background: #fff;
    border-radius: 22px 22px 0 0;
    padding: 8px 0 max(28px, env(safe-area-inset-bottom, 28px));
    box-shadow: 0 -8px 40px rgba(0,0,0,.18);
    transform: translateY(100%);
    transition: transform .36s cubic-bezier(.32,1,.36,1);
    will-change: transform;
    box-sizing: border-box;
    width: 100%;
}
#mcb-drawer.open { display: block; transform: translateY(0); }

.mcb-drawer-pill {
    width: 40px; height: 5px;
    background: #e2e8f0; border-radius: 5px;
    margin: 10px auto 14px;
}

.mcb-drawer-title {
    font-family: Tahoma, 'Vazirmatn', sans-serif;
    font-size: 15px; font-weight: 700; color: #1e293b;
    text-align: center; margin: 0 0 14px;
    direction: rtl; padding: 0 16px;
}

.mcb-list {
    list-style: none; margin: 0; padding: 0 14px;
    /* FIX: ensure full width rendering */
    width: 100%; box-sizing: border-box;
}
.mcb-list li + li { margin-top: 10px; }

.mcb-contact-item {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    text-decoration: none;
    direction: rtl;
    /* FIX: ensure item fills full row width */
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    transition: background .18s, border-color .18s, transform .12s;
    -webkit-tap-highlight-color: transparent;
}
.mcb-contact-item:active { transform: scale(.98); background: #f0fdf4; border-color: #10b981; }

.mcb-contact-icon {
    font-size: 28px; line-height: 1; flex-shrink: 0;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.09);
}

.mcb-contact-info {
    flex: 1; display: flex; flex-direction: column; gap: 3px;
    min-width: 0; /* allow text truncation if needed */
    overflow: hidden;
}
.mcb-contact-info strong {
    font-family: Tahoma, 'Vazirmatn', sans-serif;
    font-size: 14px; font-weight: 700; color: #1e293b;
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mcb-contact-num {
    font-size: 13px; color: #64748b;
    font-family: 'Courier New', monospace;
    direction: ltr; display: block; text-align: right;
    white-space: nowrap;
}

.mcb-arrow { flex-shrink: 0; }
.mcb-arrow svg { width: 18px; height: 18px; stroke: #94a3b8; display: block; }

/* ── INLINE MODE ─────────────────────────────────── */
#mcb-wrap.mcb-mode-inline {
    /* override: inline row, left = auto based on position */
    left: var(--mcb-side, 20px);
    right: var(--mcb-side, 20px);
    transform: none !important;
}
#mcb-wrap.mcb-mode-inline.mcb-pos-bottom-right { left: auto; right: var(--mcb-side, 20px); }
#mcb-wrap.mcb-mode-inline.mcb-pos-bottom-left  { right: auto; left: var(--mcb-side, 20px); }
#mcb-wrap.mcb-mode-inline.mcb-pos-bottom-center {
    left: 50%; right: auto;
    transform: translateX(-50%) !important;
    width: max-content;
    max-width: calc(100vw - 32px);
}

.mcb-inline-group {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
}

#mcb-wrap.mcb-mode-inline.mcb-pos-bottom-center .mcb-inline-group { justify-content: center; }
#mcb-wrap.mcb-mode-inline.mcb-pos-bottom-right  .mcb-inline-group { justify-content: flex-end; }
#mcb-wrap.mcb-mode-inline.mcb-pos-bottom-left   .mcb-inline-group { justify-content: flex-start; }

.mcb-inline-btn {
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 12px 16px !important;
    border-radius: 16px !important;
    min-width: 80px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
    font-size: 13px !important;
    background: var(--mcb-primary);
}
.mcb-inline-emoji { font-size: 24px; line-height: 1; }
.mcb-inline-info  { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mcb-inline-title { font-size: 12px; font-weight: 700; white-space: nowrap; }
.mcb-inline-num   { font-size: 11px; opacity: .85; font-family: monospace; white-space: nowrap; }