/* =====================================================================
   HRKLIX - menu style chooser (New / Classic) and the user-menu entry.
   Tokens come from hrklix-theme.css (--hx-*).
   ===================================================================== */

/* ---- entry in the header user menu ---- */
.user-menu .dropdown-menu > li.hx-menustyle-item { border-top: 1px solid var(--hx-line); background: var(--hx-surface); }
.hx-menustyle-link {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; color: var(--hx-ink-2) !important; font: 500 13px/1.2 var(--hx-font-ui);
  text-decoration: none !important;
}
.hx-menustyle-link:hover { background: var(--hx-surface-soft) !important; color: var(--hx-navy) !important; }
.hx-menustyle-link .icon { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hx-menustyle-link span { flex: 1 1 auto; }
.hx-menustyle-value {
  font: 600 11px/1 var(--hx-font-ui); color: var(--hx-navy); background: var(--hx-line-soft);
  border-radius: 999px; padding: 4px 9px;
}

/* ---- chooser dialog ---- */
.hx-ms-overlay {
  position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
  background: rgba(13, 32, 80, .45); padding: 16px; overflow: hidden;
  font-family: var(--hx-font-ui);
}
.hx-ms-dialog {
  background: var(--hx-surface); color: var(--hx-ink); width: 100%; max-width: 720px; max-height: calc(100vh - 32px);
  border-radius: var(--hx-radius-lg); box-shadow: var(--hx-shadow-pop);
  display: flex; flex-direction: column; overflow: hidden;
}
.hx-ms-head { display: flex; align-items: center; gap: 14px; padding: 20px 24px 8px; }
.hx-ms-head-icon {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--hx-line-soft); color: var(--hx-navy);
}
.hx-ms-head-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hx-ms-title { margin: 0; font: 700 18px/1.25 var(--hx-font-display); color: var(--hx-ink); }
.hx-ms-lede { margin: 2px 0 0; font-size: 13px; color: var(--hx-muted); line-height: 1.45; }
.hx-ms-body {
  padding: 14px 24px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  overflow-y: auto; scrollbar-width: none;
}
.hx-ms-body::-webkit-scrollbar { display: none; }
.hx-ms-card {
  position: relative; text-align: start; cursor: pointer; background: var(--hx-surface);
  border: 1.5px solid var(--hx-line); border-radius: var(--hx-radius-md); padding: 14px;
  display: flex; flex-direction: column; gap: 10px; font: inherit; color: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.hx-ms-card:hover { border-color: var(--hx-sky); }
.hx-ms-card:focus-visible { outline: none; box-shadow: var(--hx-focus); }
.hx-ms-card[aria-checked="true"] { border-color: var(--hx-navy); background: var(--hx-surface-soft); box-shadow: 0 0 0 3px rgba(20, 47, 104, .10); }
.hx-ms-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hx-ms-card-name { font: 700 14px/1.2 var(--hx-font-display); color: var(--hx-ink); }
.hx-ms-badge { font: 600 10.5px/1 var(--hx-font-ui); color: var(--hx-green-deep); background: var(--hx-green-bg); border-radius: 999px; padding: 4px 8px; }
.hx-ms-radio {
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--hx-line); flex: none; background: var(--hx-surface);
  display: inline-flex; align-items: center; justify-content: center;
}
.hx-ms-card[aria-checked="true"] .hx-ms-radio { border-color: var(--hx-navy); }
.hx-ms-card[aria-checked="true"] .hx-ms-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hx-navy); }
.hx-ms-desc { font-size: 12.5px; line-height: 1.5; color: var(--hx-ink-2); margin: 0; }

/* small preview of each menu */
.hx-ms-prev {
  height: 118px; border-radius: var(--hx-radius-sm); border: 1px solid var(--hx-line); background: var(--hx-bg);
  display: flex; overflow: hidden;
}
.hx-ms-rail { width: 22px; background: var(--hx-navy); display: flex; flex-direction: column; align-items: center; gap: 7px; padding-top: 10px; flex: none; }
.hx-ms-rail i { display: block; width: 10px; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, .45); }
.hx-ms-rail i.on { background: var(--hx-sky); }
.hx-ms-panel { width: 62px; background: var(--hx-navy-2); padding: 9px 6px; display: flex; flex-direction: column; gap: 5px; flex: none; }
.hx-ms-panel b { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .28); }
.hx-ms-panel b.h { background: rgba(255, 255, 255, .6); width: 70%; }
.hx-ms-panel b.on { background: var(--hx-sky); }
.hx-ms-panel b.sub { margin-inline-start: 7px; background: rgba(255, 255, 255, .18); }
.hx-ms-main { flex: 1 1 auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.hx-ms-main span { display: block; height: 8px; border-radius: 3px; background: var(--hx-line); }
.hx-ms-main span.w { width: 60%; }
.hx-ms-main span.card { height: 34px; background: var(--hx-surface); border: 1px solid var(--hx-line); }

.hx-ms-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 24px 20px; flex-wrap: wrap; }
.hx-ms-msg { margin-inline-end: auto; font-size: 12.5px; color: var(--hx-red); }
.hx-ms-btn {
  height: 40px; padding: 0 20px; border-radius: var(--hx-radius-sm); font: 600 13px/1 var(--hx-font-ui);
  cursor: pointer; border: 1px solid var(--hx-line); background: var(--hx-surface); color: var(--hx-ink-2);
}
.hx-ms-btn:hover { background: var(--hx-surface-soft); }
.hx-ms-btn:focus-visible { outline: none; box-shadow: var(--hx-focus); }
.hx-ms-btn.primary { background: var(--hx-navy); border-color: var(--hx-navy); color: #fff; }
.hx-ms-btn.primary:hover { background: var(--hx-navy-3); }
.hx-ms-btn[disabled] { opacity: .55; cursor: default; }

body.rtl .hx-ms-dialog, .hx-ms-overlay[dir="rtl"] .hx-ms-dialog { direction: rtl; }

@media (max-width: 600px) {
  .hx-ms-head { padding: 16px 16px 6px; }
  .hx-ms-body { grid-template-columns: 1fr; padding: 12px 16px 6px; gap: 10px; }
  .hx-ms-prev { height: 84px; }
  .hx-ms-foot { padding: 12px 16px 16px; }
  .hx-ms-foot .hx-ms-btn { flex: 1 1 auto; }
}

/* the switch sits in the user menu like its neighbours: same padding, icon column, separator below */
.hx-menustyle-item > a, .hx-menustyle-item a#HxMenuStyleLink { display: flex !important; align-items: center; gap: 12px; padding: 12px 20px !important; font-weight: 600; }
.hx-menustyle-item a#HxMenuStyleLink > i, .hx-menustyle-item a#HxMenuStyleLink > svg { width: 17px; flex: 0 0 17px; }