/* Custom select. The panel a native stays underneath so the form still submits. */ .tu-sel { position: relative; } /* Kept in the DOM and in the form, taken out of sight and out of the tab order. Not display:none — a hidden select is still submitted, but some browsers skip validation on one that is removed from layout entirely. */ .tu-sel__native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* Matched to the form's own inputs. The button was a flex box sized by its contents, so the 24px flag made the country control taller than the phone field beside it. A fixed height ties every control in the form to one line. */ .tu-sel__btn { width: 100%; height: var(--tu-field-h, 48px); display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--border, #e2e8f0); border-radius: var(--r-control, 3px); background: #fff; color: var(--text, #0f172a); font: inherit; font-size: 15px; text-align: start; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; } .tu-sel__btn:hover { border-color: #cbd5e1; } .tu-sel.is-open .tu-sel__btn, .tu-sel__btn:focus-visible { outline: none; border-color: var(--primary, #a7001e); box-shadow: 0 0 0 3px var(--ring, rgba(167, 0, 30, .35)); } .tu-sel__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tu-sel__caret { flex: none; width: 9px; height: 9px; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8; /* Physical sides, not logical: a logical border flips with direction and the chevron ends up pointing sideways in RTL. */ transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; } .tu-sel.is-open .tu-sel__caret { transform: rotate(225deg) translateY(-2px); } /* Flags. Real images rather than emoji: emoji flags are drawn by whichever font the device ships, so they varied from machine to machine, and Windows has no flag glyphs at all. object-fit:cover crops the rectangle into the circle rather than letterboxing it. */ /* Two selectors, and both matter. `img.` rather than the class alone: the theme carries a bare `img { height: auto }`, which outranks a single class on a replaced element — the box came out 26x17 and the "circle" was a squashed oval. And not scoped under `.tu-sel`: the panel is moved to when it opens, so once it is open its flags have no .tu-sel ancestor at all — they lost the rule and went back to rectangles while the button's stayed round. */ .tu-sel img.tu-sel__flag, .tu-sel__panel img.tu-sel__flag, img.tu-sel__flag { /* مستطيلٌ بحوافّ ناعمة لا دائرة. الدائرة مع object-fit:cover كانت تقصّ طرفَي العلم، فيختفي الشريط الأحمر في علم الإمارات ويصير شبيهًا بعلم سوريا. النسبة الطبيعية تُظهر العلم كاملًا. */ flex: none; width: 26px; height: 18px; max-width: none; border-radius: 3px; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .12); /* The ring has to sit on top of the image, which inset shadows on a replaced element do not do reliably — an outline does. */ outline: 1px solid rgba(15, 23, 42, .10); outline-offset: -1px; background: #f1f5f9; } .tu-sel__panel { position: fixed; z-index: 2147483000; /* Stated here rather than inherited: the panel is moved to when it opens, and the theme's border-box reset is scoped to .hp — out here the padding and the border were being added to the width the script sets, so the panel came out 14px wider than the field it belongs to. */ box-sizing: border-box; /* Physical, not logical. inset-inline-start resolves to `right` in this RTL page, and the script sets `left` — with both applied the panel was pinned to the right edge of the screen instead of sitting under its button. */ top: 0; left: 0; right: auto; /* Never wider than the screen; the script narrows this further to match the button when there is room. */ width: min(260px, calc(100vw - 16px)); max-width: calc(100vw - 16px); background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: var(--r-surface, 12px); box-shadow: 0 12px 30px rgba(15, 23, 42, .12); overflow: hidden; padding: 6px; } /* كل ما في اللوحة يحسب حدوده داخل عرضه. اللوحة تُنقل إلى عند الفتح، وإعادة الضبط في الثيم مقصورة على ‎.hp‎ — فكانت خانة البحث عرضها ١٠٠٪ ثم يُضاف إليها ٢٤ بكسل حشوًا وبكسلان حدًّا، فتخرج عن اللوحة من الجانبين. */ .tu-sel__panel, .tu-sel__panel * { box-sizing: border-box; } .tu-sel__search { width: 100%; padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--border, #e2e8f0); border-radius: var(--r-control, 3px); font: inherit; font-size: 14px; background: #f8fafc; } .tu-sel__search:focus { outline: none; border-color: var(--primary, #a7001e); background: #fff; } /* No fixed height here: the script measures the room the panel actually has and caps this list to it, so the dropdown is as tall as the screen allows and never taller. A number in both places meant the smaller one won and the panel clipped rows that could not be scrolled to. */ .tu-sel__list { list-style: none; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; } .tu-sel__opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-control, 3px); font-size: 14.5px; line-height: 1.5; cursor: pointer; } .tu-sel__opt:hover, .tu-sel__opt.is-active { background: #f1f5f9; } .tu-sel__opt.is-on { background: rgba(167, 0, 30, .07); color: var(--primary, #a7001e); font-weight: 700; } .tu-sel__opt[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .tu-sel__btn, .tu-sel__caret { transition: none; } } /* --- الاختيار المتعدّد ------------------------------------------------------- يظهر حين يكون الـ