/* Hallmark · component scope · existing Clofit palette and icon set.
   User-requested glass overlay; no layout/theme replacement. */
:root {
  --control-glass-top: oklch(100% 0 0 / .94);
  --control-glass-bottom: oklch(97% .005 330 / .68);
  --control-glass-edge: oklch(100% 0 0 / .9);
  --control-glass-ink: oklch(25% .014 325);
  --control-glass-shadow: oklch(20% .014 325 / .22);
  --control-glass-solid: oklch(98% .005 330);
  --control-glass-selected: oklch(48% .025 325);
  --control-glass-ease: cubic-bezier(.16, 1, .3, 1);
}

html:root[data-theme="dark"] {
  --control-glass-top: oklch(43% .012 325 / .84);
  --control-glass-bottom: oklch(26% .012 325 / .66);
  --control-glass-edge: oklch(88% .004 325 / .48);
  --control-glass-ink: oklch(97% .004 325);
  --control-glass-shadow: oklch(5% 0 0 / .4);
  --control-glass-solid: oklch(31% .012 325);
  --control-glass-selected: oklch(94% .004 325);
}

/* Keep positioning, visibility, labels and navigation owned by the rail. */
html:root body.ui-consistent.ui-consistent.ui-consistent :is(.rail-nav,.merchant-rail,.shopper-rail)[data-edge-kind] :is(a,button) {
  background: linear-gradient(145deg, var(--control-glass-top), var(--control-glass-bottom)) !important;
  color: var(--control-glass-ink) !important;
  border: 1px solid var(--control-glass-edge) !important;
  border-radius: 50% !important;
  box-shadow: inset 0 1px 1px var(--control-glass-edge), 0 5px 14px var(--control-glass-shadow) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.15) !important;
  backdrop-filter: blur(16px) saturate(1.15) !important;
  transition: transform 140ms var(--control-glass-ease), opacity 140ms var(--control-glass-ease) !important;
}
html:root body.ui-consistent.ui-consistent.ui-consistent :is(.rail-nav,.merchant-rail,.shopper-rail)[data-edge-kind] :is(a,button):is(.active,[aria-current="page"],[aria-pressed="true"]) {
  border-color: var(--control-glass-selected) !important;
  box-shadow: inset 0 0 0 2px var(--control-glass-selected), 0 5px 14px var(--control-glass-shadow) !important;
}
html:root body.ui-consistent.ui-consistent.ui-consistent :is(.rail-nav,.merchant-rail,.shopper-rail)[data-edge-kind] :is(a,button):focus-visible {
  outline: 3px solid var(--control-glass-ink) !important;
  outline-offset: 3px;
}
@media (hover:hover) and (pointer:fine) {
  html:root body.ui-consistent.ui-consistent.ui-consistent :is(.rail-nav,.merchant-rail,.shopper-rail)[data-edge-kind] :is(a,button):hover:not(:disabled) { transform: translateY(-2px) !important; }
}
html:root body.ui-consistent.ui-consistent.ui-consistent :is(.rail-nav,.merchant-rail,.shopper-rail)[data-edge-kind] :is(a,button):active:not(:disabled) { transform: scale(.94) !important; }
html:root body.ui-consistent.ui-consistent.ui-consistent :is(.rail-nav,.merchant-rail,.shopper-rail)[data-edge-kind] :is(a,button):disabled { opacity:.45 !important; }
html:root body.ui-consistent.ui-consistent.ui-consistent :is(.rail-nav,.merchant-rail,.shopper-rail)[data-edge-kind] :is(a,button)[aria-busy="true"] { opacity:.68 !important; cursor:progress; }
html:root body.ui-consistent.ui-consistent.ui-consistent :is(.rail-nav,.merchant-rail,.shopper-rail)[data-edge-kind] :is(a,button)[data-state="error"] { border-color:var(--ui-error) !important; }
html:root body.ui-consistent.ui-consistent.ui-consistent :is(.rail-nav,.merchant-rail,.shopper-rail)[data-edge-kind] :is(a,button)[data-state="success"] { border-color:var(--control-glass-ink) !important; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  html:root body.ui-consistent.ui-consistent.ui-consistent :is(.rail-nav,.merchant-rail,.shopper-rail)[data-edge-kind] :is(a,button) { background:var(--control-glass-solid) !important; }
}
@media (prefers-reduced-transparency:reduce) {
  html:root body.ui-consistent.ui-consistent.ui-consistent :is(.rail-nav,.merchant-rail,.shopper-rail)[data-edge-kind] :is(a,button) { background:var(--control-glass-solid) !important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
}
@media (prefers-reduced-motion:reduce) {
  html:root body.ui-consistent.ui-consistent.ui-consistent :is(.rail-nav,.merchant-rail,.shopper-rail)[data-edge-kind] :is(a,button) { transition:none !important; }
  html:root body.ui-consistent.ui-consistent.ui-consistent :is(.rail-nav,.merchant-rail,.shopper-rail)[data-edge-kind] :is(a,button):is(:hover,:active) { transform:none !important; }
}

/* Anchor the close control to the dialog, not its inset heading row. */
html:root body.ui-consistent #market-filter-dialog .dialog-heading { position:static !important; }
html:root body.ui-consistent #market-filter-dialog .dialog-heading > button[aria-label="إغلاق"] {
  position:absolute !important;
  inset:auto !important;
  top:12px !important;
  right:12px !important;
  width:44px !important;
  height:44px !important;
  margin:0 !important;
  transform:none !important;
}