/* =============================================================
   Revox CRM — منتقي القوائم الموحّد (v3.100)
   نفس تجربة منتقي الدول في صفحة الدخول:
   - الهاتف: Bottom Sheet ببحث وبطاقات وعلامة صح وسحب للإغلاق
   - الكمبيوتر: قائمة منسدلة ملتصقة بالحقل (Popover)
   يدعم RTL/LTR تلقائياً حسب اتجاه الصفحة.
   ============================================================= */
.cpick{position:fixed;inset:0;z-index:1200;display:none}
.cpick.show{display:block}
.cpick .cp-back{position:absolute;inset:0;background:rgba(8,15,30,.55);backdrop-filter:blur(3px)}
.cpick .cp-box{position:relative;background:#fff;width:min(720px,calc(100% - 2rem));max-height:min(80vh,620px);margin:6vh auto 0;border-radius:24px;box-shadow:0 40px 100px rgba(8,15,30,.4);display:flex;flex-direction:column;overflow:hidden;animation:cpIn .18s ease}
@keyframes cpIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.cpick .cp-head{padding:1.1rem 1.2rem .8rem;border-bottom:1px solid #eef2f7}
.cpick .cp-head h5{margin:0 0 .7rem;font-weight:800;font-size:1.05rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;color:#0f172a}
.cpick .cp-close{border:0;background:#f1f5f9;color:#64748b;width:34px;height:34px;border-radius:11px;cursor:pointer;transition:.15s;font-family:inherit}
.cpick .cp-close:hover{background:#e2e8f0;color:#0f172a}
.cpick .cp-search{position:relative}
.cpick .cp-search i{position:absolute;top:50%;transform:translateY(-50%);inset-inline-start:14px;color:#94a3b8}
.cpick .cp-search input{width:100%;border:1.5px solid #e2e8f0;background:#f8fafc;border-radius:14px;padding:.8rem 1rem;padding-inline-start:42px;font-size:16px;font-family:inherit;font-weight:600;color:#0f172a}
.cpick .cp-search input:focus{outline:none;border-color:var(--primary,#4E68E3);background:#fff;box-shadow:0 0 0 4px color-mix(in oklab,var(--primary,#4E68E3) 12%,transparent)}
.cpick .cp-body{overflow-x:hidden;overflow-y:auto;padding:.9rem 1.1rem 1.2rem;display:grid;gap:.55rem;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.cpick .cp-item{display:flex;min-width:0;max-width:100%;overflow:hidden;align-items:center;gap:.7rem;border:1.5px solid #eef2f7;background:#fff;border-radius:14px;padding:.72rem .8rem;cursor:pointer;text-align:start;font-family:inherit;transition:.14s;width:100%;min-height:48px}
.cpick .cp-item:hover,.cpick .cp-item.act{border-color:color-mix(in oklab,var(--primary,#4E68E3) 45%,transparent);background:color-mix(in oklab,var(--primary,#4E68E3) 6%,#fff)}
.cpick .cp-item.on{border-color:var(--primary,#4E68E3);background:color-mix(in oklab,var(--primary,#4E68E3) 9%,#fff)}
.cpick .cp-item .flag{width:32px;height:24px;border-radius:5px;overflow:hidden;flex-shrink:0;line-height:0;background:#f1f5f9;box-shadow:0 1px 3px rgba(15,23,42,.14)}
.cpick .cp-item .flag img{width:100%;height:100%;object-fit:cover;display:block}
.cpick .cp-item .cp-icon,.cpick-trigger .cp-icon{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;flex:none;color:var(--primary,#4E68E3);background:color-mix(in oklab,var(--primary,#4E68E3) 10%,#fff)}
.cpick .cp-item .nm{flex:1;min-width:0;font-weight:700;font-size:.92rem;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.45}
.cpick .cp-item .dl{font-weight:800;font-size:.8rem;color:#64748b;direction:ltr}
.cpick .cp-item .tick{color:var(--primary,#4E68E3);font-size:1rem;display:none}
.cpick .cp-item.on .tick{display:block}
.cpick .cp-empty{grid-column:1/-1;text-align:center;color:#94a3b8;padding:2rem 1rem;font-weight:700;font-size:.9rem}
.cpick .cp-grab{display:none}

/* زر مولّد داخل الحقل (عندما لا يوجد مُشغّل خارجي) */
.cpick-trigger{display:flex;align-items:center;gap:.5rem;width:100%;border:0;background:transparent;padding:.7rem .75rem;font-weight:700;flex:1;font-size:.9rem;font-family:inherit;cursor:pointer;text-align:start;color:#0f172a;min-width:0}
.cpick-trigger .cp-t-flag{width:26px;height:19px;border-radius:4px;overflow:hidden;flex-shrink:0;line-height:0;background:#f1f5f9}
.cpick-trigger .cp-t-flag img{width:100%;height:100%;object-fit:cover;display:block}
.cpick-trigger .cp-t-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpick-trigger .cp-t-note{font-weight:800;font-size:.8rem;color:#64748b;direction:ltr}
.cpick-trigger .cp-t-caret{font-size:.72rem;opacity:.55}

@media(max-width:575.98px){
  .cpick .cp-box{position:absolute;inset-inline:0;bottom:0;top:auto;margin:0;width:100%;max-height:88vh;max-height:88dvh;border-radius:24px 24px 0 0;animation:cpUp .2s ease}
  .cpick .cp-body{grid-template-columns:minmax(0,1fr);overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:.75rem .7rem 1rem}
  .cpick .cp-item{align-items:center;gap:.65rem;padding:.78rem .75rem;min-height:52px}
  .cpick .cp-item .txt{overflow:hidden}
  .cpick .cp-item .dl{flex:none;margin-inline-start:auto}
  .cpick .cp-item .tick{flex:none;margin-top:.2rem}
  .cpick .cp-head{padding-top:.5rem}
  .cpick .cp-grab{display:block;width:44px;height:5px;border-radius:99px;background:#e2e8f0;margin:.2rem auto .8rem}
  .cpick.cp-drag:not(.cp-closing) .cp-box{animation:none;transition:none!important;will-change:transform}
  .cpick.cp-closing .cp-box{animation:none;will-change:transform}
}
@keyframes cpUp{from{transform:translateY(100%)}to{transform:none}}

@media(min-width:576px){
  .cpick.cp-anchored{position:fixed;inset:0;pointer-events:none;z-index:1300}
  .cpick.cp-anchored .cp-back{display:none}
  .cpick.cp-anchored .cp-box{position:fixed;pointer-events:auto;width:auto;max-width:none;margin:0;max-height:min(68vh,520px);border-radius:18px;box-shadow:0 24px 60px rgba(8,15,30,.22);border:1px solid #e6edf5;animation:cpDrop .14s ease}
  .cpick.cp-anchored .cp-head{padding:.6rem .65rem .55rem;position:sticky;top:0;background:#fff;z-index:2}
  .cpick.cp-anchored .cp-head h5{display:none}
  .cpick.cp-anchored .cp-search input{padding:.6rem .9rem;padding-inline-start:38px;border-radius:12px;font-size:.9rem}
  .cpick.cp-anchored .cp-search i{inset-inline-start:12px;font-size:.9rem}
  .cpick.cp-anchored .cp-body{grid-template-columns:minmax(0,1fr);gap:.22rem;padding:.45rem .55rem .65rem;overscroll-behavior:contain}
  .cpick.cp-anchored .cp-item{border:0;border-radius:11px;padding:.65rem .7rem;background:transparent;min-height:46px}
  .cpick.cp-anchored.cp-wide .cp-item{padding-inline:.85rem}
  .cpick.cp-anchored.cp-timezone .cp-item .txt{gap:.18rem}
  .cpick.cp-anchored .cp-item.on{background:color-mix(in oklab,var(--primary,#4E68E3) 9%,#fff)}
  .cpick.cp-anchored .cp-empty{padding:1.1rem 1rem}
}
@keyframes cpDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* رؤوس المجموعات (المناطق الزمنية حسب القارات) */
.cpick .cp-group{grid-column:1/-1;position:sticky;top:-.1rem;z-index:1;background:linear-gradient(#fff 70%,rgba(255,255,255,.85));
  font-size:.72rem;font-weight:800;color:#94a3b8;letter-spacing:.02em;padding:.5rem .25rem .3rem;
  border-bottom:1px solid #eef2f7;margin-top:.35rem}
.cpick .cp-body.cp-grouped .cp-group:first-child{margin-top:0}
.cpick.cp-anchored .cp-group{padding:.4rem .55rem .28rem;font-size:.68rem}

/* سطر ثانوي داخل العنصر (المناطق الزمنية) */
.cpick .cp-item .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.12rem}
.cpick .cp-item .txt .nm{flex:none}
.cpick .cp-item .sub{font-size:.72rem;font-weight:700;color:#94a3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:start}
.cpick .cp-item .dl{background:#f1f5f9;border-radius:8px;padding:.15rem .4rem;font-size:.72rem;white-space:nowrap}
.cpick .cp-item.on .dl{background:color-mix(in oklab,var(--primary,#4E68E3) 14%,#fff);color:var(--primary,#4E68E3)}

@media(max-width:575.98px){
  .cpick .cp-item .txt .nm,.cpick .cp-item .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
  .cpick.cp-timezone .cp-body{gap:.65rem;padding-top:.6rem}
  .cpick.cp-timezone .cp-item.cp-timezone-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:.25rem .65rem;min-height:76px;padding:.7rem .75rem;overflow:hidden}
  .cpick.cp-timezone .cp-timezone-item .flag,.cpick.cp-timezone .cp-timezone-item .cp-icon{grid-column:1;grid-row:1/3;align-self:center}
  .cpick.cp-timezone .cp-timezone-item .txt{grid-column:2;grid-row:1/3;align-self:center;width:100%;gap:.22rem;overflow:hidden}
  .cpick.cp-timezone .cp-timezone-item .txt .nm{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;font-size:.9rem;line-height:1.35}
  .cpick.cp-timezone .cp-timezone-item .sub{display:block;width:100%;direction:ltr;text-align:start;font-size:.69rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cpick.cp-timezone .cp-timezone-item .dl{grid-column:3;grid-row:1/3;align-self:center;margin:0;min-width:66px;text-align:center;font-size:.7rem;padding:.28rem .42rem}
  .cpick.cp-timezone .cp-timezone-item .tick{grid-column:4;grid-row:1/3;align-self:center;margin:0}
  .cpick.cp-timezone .cp-group{top:0;margin-top:.2rem;padding:.55rem .35rem .35rem;background:#fff;box-shadow:0 1px 0 #eef2f7}
}

@media(prefers-reduced-motion:reduce){
  .cpick .cp-box{animation:none!important;transition:none!important}
}