/* Operines — Universal phone country-code widget styles.
   Designed to slot in next to any existing tel input without breaking the
   form's existing CSS — uses flex to share width with the input. */
.opc-wrap{position:relative;display:flex;align-items:stretch;gap:8px;width:100%}
.opc-wrap > .opc-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;background:#F6F4FB;border:1.5px solid #e7e0f0;border-radius:11px;padding:0 12px;font:inherit;font-weight:700;color:#1E0B33;cursor:pointer;white-space:nowrap;line-height:1;transition:.15s;min-height:42px}
.opc-wrap > .opc-btn:hover{border-color:#5B2A86;color:#5B2A86}
.opc-wrap > .opc-btn .opc-fl{font-size:18px;line-height:1}
.opc-wrap > .opc-btn .opc-dl{font-size:14px}
.opc-wrap > .opc-btn .opc-ar{color:#9a8caf;font-size:11px;margin-inline-start:2px}
.opc-wrap > input[type="tel"]{flex:1;min-width:0;width:auto!important;letter-spacing:.3px}

.opc-menu{position:absolute;top:calc(100% + 6px);inset-inline-start:0;width:300px;max-width:calc(100vw - 32px);max-height:280px;overflow-y:auto;background:#fff;border:1px solid #e7e0f0;border-radius:12px;box-shadow:0 18px 44px rgba(30,11,51,.18);z-index:1000;display:none;padding:6px}
.opc-menu.open{display:block}
.opc-search{width:100%;border:none;border-bottom:1px solid #e7e0f0;padding:9px 10px;font:inherit;font-size:13.5px;color:#1E0B33;outline:none;background:transparent;margin-bottom:4px}
.opc-search::placeholder{color:#9a8caf}
.opc-list{display:flex;flex-direction:column}
.opc-i{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;color:#1E0B33;font-weight:600}
.opc-i:hover{background:#F6F4FB}
.opc-i .opc-fl{font-size:17px}
.opc-i .opc-nm{flex:1}
.opc-i .opc-dl{color:#6b5b7e;font-weight:700;font-size:12.5px}

/* RTL — flip the dropdown anchor */
[dir="rtl"] .opc-menu{inset-inline-start:auto;inset-inline-end:0}