/* حقل الهاتف + اختيار الدولة — منقول من مكوّن مسار التسجيل (site/signup/webapp.css) */
.phone-field{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line,#E7E3DF);border-radius:14px;padding:0 14px;height:56px;background:#fff;transition:border-color .15s,box-shadow .15s}
.phone-field:focus-within{border-color:#A51C30;box-shadow:0 0 0 3px rgba(165,28,48,.08)}
.pf-sep{width:1px;height:24px;background:var(--line,#E7E3DF);flex:0 0 auto}
.pf-input{flex:1;border:none;outline:none;font:inherit;font-size:17px;letter-spacing:1px;color:var(--ink,#1E1E1E);background:none;min-width:0}
.ccwrap{position:relative}
.pf-cc{display:flex;align-items:center;gap:7px;border:0;background:none;padding:0;font:inherit;font-weight:700;color:#A51C30;font-size:16px;flex:0 0 auto;cursor:pointer;direction:ltr}
.pf-cc img{width:24px;height:18px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px #0001}
.pf-cc i{font-style:normal;font-size:11px;color:var(--muted,#6E6259)}
.ccpop{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:#fff;border:1px solid var(--line,#E7E3DF);border-radius:14px;box-shadow:0 18px 40px -12px rgba(30,10,14,.3);overflow:hidden}
.ccpop[hidden]{display:none}
.ccs{position:relative;padding:10px 10px 8px;background:#fff;border-bottom:1px solid var(--line,#E7E3DF)}
.ccs input{width:100%;height:44px;padding:0 40px 0 12px;border:0;border-radius:12px;outline:none;font:inherit;background:#F4F1EE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a7d80' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat right 12px center/18px;font-size:15px}
.ccs input:focus{background-color:#fff;box-shadow:0 0 0 2px #A51C30}
.ccpop ul{list-style:none;margin:0;max-height:300px;overflow:auto;overscroll-behavior:contain;padding:2px 6px 8px;scrollbar-width:thin;scrollbar-color:#D9CFD1 transparent;-webkit-overflow-scrolling:touch;scroll-padding:8px}
.ccpop ul::-webkit-scrollbar{width:5px} .ccpop ul::-webkit-scrollbar-thumb{background:#D9CFD1;border-radius:9px} .ccpop ul::-webkit-scrollbar-track{background:transparent}
.ccpop li{display:flex;align-items:center;min-height:48px;padding:0 12px;gap:12px;border-radius:10px;cursor:pointer;font-size:15px;font-weight:500;transition:background .15s}
.ccpop li:hover,.ccpop li.act{background:var(--surface,#F3F3F1)}
.ccpop li:active{background:#F1ECEA}
.ccpop li img{width:28px;height:20px;border-radius:4px;object-fit:cover;box-shadow:0 0 0 1px #0001;flex:none}
.ccpop li span{flex:1}
.ccpop li em{font-style:normal;direction:ltr;font-size:13.5px;color:var(--muted,#6E6259);font-weight:600}
.ccpop li.sep{min-height:0;height:1px;padding:0;margin:4px 6px;background:var(--line,#E7E3DF);cursor:default}
.ccpop li.on{background:#FBEFF1;color:#A51C30;font-weight:700}
.ccpop li.on em{color:#A51C30}
.ccpop li.on::after{content:"";width:18px;height:18px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A51C30' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:640px){
  .ccpop{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:1200;border:0;border-radius:22px 22px 0 0;display:flex;flex-direction:column;max-height:72vh;
    padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 0 0 100vmax rgba(20,8,10,.42),0 -10px 30px -10px rgba(0,0,0,.25);animation:ccUp .28s cubic-bezier(.2,.9,.3,1) both}
  .ccpop[hidden]{display:none}
  .ccs{padding:22px 14px 10px}
  .ccs::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:9px;background:#DDD4D6}
  .ccpop ul{flex:1;min-height:0;max-height:none;padding:4px 8px 12px;scrollbar-width:none}
  .ccpop ul::-webkit-scrollbar{display:none}
  .ccpop li{min-height:54px;font-size:16px}
}
@keyframes ccUp{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){ .ccpop{animation:none!important} }