/* ===== خانة رقم الهاتف الموحدة (js/phone-field.js): علم ومفتاح الدولة جوه الخانة على الشمال =====
   الخانة الظاهرة (.mbk-phone-num) بتاخد كلاسات الخانة الأصلية فشكلها زي باقي خانات الصفحة في الوضعين
   --mbk-cc-w = عرض زرار الدولة (بيتقاس) — --mbk-r = انحناء الخانة */
.mbk-phone { position: relative; display: block; width: 100%; direction: ltr; }
.mbk-phone > .mbk-phone-num { width: 100%; padding-left: calc(var(--mbk-cc-w, 96px) + 12px) !important; direction: ltr; text-align: left; letter-spacing: .5px; unicode-bidi: plaintext; }
.mbk-phone-cc {
    position: absolute;
    left: 1.5px;
    top: 1.5px;
    bottom: 1.5px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0 10px 0 12px;
    border: 0;
    border-right: 1px solid rgba(148, 163, 184, .25);
    border-radius: var(--mbk-r, 14px) 0 0 var(--mbk-r, 14px);
    background: rgba(148, 163, 184, .08);
    color: var(--text-primary, #e2e8f0);
    font-family: inherit;
    font-size: .92rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.mbk-phone-cc.is-fixed { cursor: default; }
button.mbk-phone-cc:hover, .mbk-phone.open .mbk-phone-cc { background: rgba(0, 212, 255, .1); }
button.mbk-phone-cc:focus-visible { outline: 2px solid #00d4ff; outline-offset: -2px; }
.mbk-phone-cc .fi, .mbk-phone-opt .fi { width: 22px; height: 16px; line-height: 16px; border-radius: 3px; background-size: cover; box-shadow: 0 0 0 1px rgba(148, 163, 184, .3); flex-shrink: 0; }
.mbk-phone-code { direction: ltr; letter-spacing: .3px; }
.mbk-phone-chev { width: 15px; height: 15px; fill: currentColor; opacity: .6; transition: transform .2s ease; }
.mbk-phone.open .mbk-phone-chev { transform: rotate(180deg); }
.mbk-phone.is-valid > .mbk-phone-num { border-color: rgba(16, 185, 129, .6) !important; }
.mbk-phone.is-invalid > .mbk-phone-num { border-color: rgba(245, 158, 11, .75) !important; }

.mbk-phone-status { display: none; align-items: center; gap: 6px; margin-top: 6px; font-size: .78rem; font-weight: 700; line-height: 1.6; direction: rtl; text-align: right; }
.mbk-phone-status.ok { display: flex; color: #10b981; }
.mbk-phone-status.warn { display: flex; flex-wrap: wrap; color: #f59e0b; }
.mbk-phone-status b { font-weight: 800; }

/* قائمة الدول — fixed على الـ body (ماتتقصّش جوه نافذة الشات أو الكروت) */
.mbk-phone-menu { box-sizing: border-box; position: fixed; z-index: 100001; padding: 8px; direction: rtl; border-radius: 14px; background: #0f1526; border: 1px solid rgba(148, 163, 184, .2); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); font-family: inherit; animation: mbkPhIn .16s ease; }
.mbk-phone-menu[hidden] { display: none; }
@keyframes mbkPhIn { from { opacity: 0; transform: translateY(-4px); } }
.mbk-phone-search { box-sizing: border-box; width: 100%; margin: 0 0 6px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(148, 163, 184, .2); background: rgba(255, 255, 255, .04); color: #e2e8f0; font-family: inherit; font-size: 16px; outline: none; }
.mbk-phone-search:focus { border-color: rgba(0, 212, 255, .5); }
.mbk-phone-list { list-style: none; margin: 0; padding: 0; max-height: 236px; overflow-y: auto; overscroll-behavior: contain; }
.mbk-phone-opt { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: #e2e8f0; font-family: inherit; font-size: .9rem; font-weight: 600; text-align: right; cursor: pointer; }
.mbk-phone-opt:hover, .mbk-phone-opt:focus-visible { background: rgba(0, 212, 255, .08); outline: none; }
.mbk-phone-opt.is-on { background: rgba(0, 212, 255, .14); font-weight: 800; }
.mbk-phone-nm { flex: 1; }
.mbk-phone-opt b { direction: ltr; font-size: .84rem; font-weight: 700; color: #94a3b8; }
.mbk-phone-empty { padding: 12px; text-align: center; font-size: .82rem; color: #94a3b8; }

/* الوضع الفاتح */
html[data-theme="light"] .mbk-phone-cc { color: #0f172a; background: #eef2f7; border-right-color: #cbd5e1; }
html[data-theme="light"] button.mbk-phone-cc:hover, html[data-theme="light"] .mbk-phone.open .mbk-phone-cc { background: #e0f2fe; }
html[data-theme="light"] .mbk-phone.is-valid > .mbk-phone-num { border-color: #059669 !important; }
html[data-theme="light"] .mbk-phone.is-invalid > .mbk-phone-num { border-color: #d97706 !important; }
html[data-theme="light"] .mbk-phone-status.ok { color: #047857; }
html[data-theme="light"] .mbk-phone-status.warn { color: #b45309; }
html[data-theme="light"] .mbk-phone-menu { background: #fff; border-color: rgba(15, 23, 42, .1); box-shadow: 0 18px 40px rgba(15, 23, 42, .16); }
html[data-theme="light"] .mbk-phone-search { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }
html[data-theme="light"] .mbk-phone-search:focus { border-color: #0891b2; }
html[data-theme="light"] .mbk-phone-opt { color: #0f172a; }
html[data-theme="light"] .mbk-phone-opt:hover, html[data-theme="light"] .mbk-phone-opt:focus-visible { background: #f1f5f9; }
html[data-theme="light"] .mbk-phone-opt.is-on { background: rgba(8, 145, 178, .1); }
html[data-theme="light"] .mbk-phone-opt b, html[data-theme="light"] .mbk-phone-empty { color: #64748b; }
@media (prefers-reduced-motion: reduce) { .mbk-phone-menu { animation: none; } }