/* Hilma Style — the site's own controls (public/js/ui.js): drop-down lists,
   dialogs, colour picker, plus checkboxes / radios / sliders / number fields
   drawn by the site. Uses the admin colours inside the panel and the store
   colours elsewhere (light and dark). */
:root, [data-theme] {
  --ui-card: var(--a-card, var(--card, #fff));
  --ui-field: var(--a-field, var(--field, #fff));
  --ui-ink: var(--a-ink, var(--ink, #221a33));
  --ui-ink-2: var(--a-ink-2, var(--ink-2, #4a4260));
  --ui-muted: var(--a-muted, var(--muted, #7a7390));
  --ui-line: var(--a-line, var(--line, #eee7f1));
  --ui-soft: var(--a-soft, var(--soft, #f5f0f7));
  --ui-accent: var(--a-accent, var(--primary, #e0457b));
  --ui-danger: var(--a-danger, var(--danger, #e5484d));
}

/* the original field stays in the form but is not shown */
.ui-hidden-field { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; clip: rect(0 0 0 0) !important; }

/* ---------- drop-down list ---------- */
.ui-sel { position: relative; display: block; width: 100%; min-width: 0; }
.ui-sel-btn { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--ui-line); border-radius: 14px; background: var(--ui-field); color: var(--ui-ink); font: inherit; font-size: 15px; text-align: right; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.ui-sel-btn[dir=ltr] { text-align: left; }
.ui-sel-btn svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ui-muted); transition: transform .2s; }
.ui-sel-btn[aria-expanded=true] svg { transform: rotate(180deg); color: var(--ui-accent); }
.ui-sel-btn:hover, .ui-sel-btn[aria-expanded=true], .ui-sel-btn:focus-visible { border-color: var(--ui-accent); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-accent) 12%, transparent); }
.ui-sel-btn:disabled { opacity: .55; cursor: not-allowed; }
.ui-sel-btn.is-invalid, .is-invalid .ui-sel-btn { border-color: var(--ui-danger); }
.ui-sel-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- floating layer ---------- */
.ui-back { position: fixed; inset: 0; z-index: 300; background: rgba(15, 12, 30, .35); opacity: 0; pointer-events: none; transition: opacity .2s; }
.ui-back.open { opacity: 1; pointer-events: auto; }
@media (min-width: 600px) { .ui-back { background: transparent; } }
.ui-pop { position: absolute; z-index: 301; display: none; padding: 6px; border-radius: 16px; background: var(--ui-card); color: var(--ui-ink); border: 1px solid var(--ui-line); box-shadow: 0 20px 50px rgba(20, 22, 39, .2); direction: rtl; }
.ui-pop.open { display: block; animation: ui-pop .2s ease-out; }
.ui-pop.sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto !important; width: auto !important; max-height: 75vh; overflow: auto; padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; animation: ui-sheet .25s ease-out; }
.ui-pop.sheet::before { content: ''; display: block; width: 44px; height: 5px; margin: 4px auto 8px; border-radius: 99px; background: var(--ui-line); }
.ui-pop-title { padding: 2px 8px 10px; font-weight: 700; font-size: 15px; }
@keyframes ui-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes ui-sheet { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
.ui-list-wrap { display: grid; gap: 6px; }
.ui-list { display: grid; gap: 2px; max-height: 300px; overflow: auto; overscroll-behavior: contain; }
.ui-pop.sheet .ui-list { max-height: none; }
.ui-list-search { width: 100%; padding: 9px 12px; border: 1.5px solid var(--ui-line); border-radius: 12px; background: var(--ui-field); color: var(--ui-ink); font: inherit; font-size: 14px; outline: none; }
.ui-list-search:focus { border-color: var(--ui-accent); }
.ui-opt { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: var(--ui-ink); font: inherit; font-size: 15px; text-align: right; cursor: pointer; }
.ui-opt[dir=ltr] { text-align: left; }
.ui-opt span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-opt svg { width: 18px; height: 18px; color: var(--ui-accent); visibility: hidden; flex-shrink: 0; }
.ui-opt.is-sel { color: var(--ui-accent); font-weight: 700; background: color-mix(in srgb, var(--ui-accent) 9%, transparent); }
.ui-opt.is-sel svg { visibility: visible; }
.ui-opt:hover, .ui-opt:focus-visible { background: var(--ui-soft); outline: none; }
.ui-opt:disabled { opacity: .45; cursor: not-allowed; }
.ui-opt.in-group { padding-right: 24px; }
.ui-group { padding: 8px 12px 2px; font-size: 12px; font-weight: 700; color: var(--ui-muted); }

/* ---------- dialogs ---------- */
.ui-modal-back { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: rgba(15, 12, 30, .45); animation: ui-fade .2s; }
@keyframes ui-fade { from { opacity: 0; } to { opacity: 1; } }
.ui-modal { width: min(400px, 100%); padding: 22px 20px 18px; border-radius: 20px; background: var(--ui-card); color: var(--ui-ink); box-shadow: 0 30px 70px rgba(15, 12, 30, .3); direction: rtl; animation: ui-pop .22s ease-out; }
.ui-modal-title { margin: 0 0 8px; font-size: 17px; }
.ui-modal-text { margin: 0 0 16px; font-size: 15px; line-height: 1.9; color: var(--ui-ink-2); overflow-wrap: anywhere; }
.ui-modal-input { width: 100%; margin: -6px 0 16px; padding: 10px 12px; border: 1.5px solid var(--ui-line); border-radius: 12px; background: var(--ui-field); color: var(--ui-ink); font: inherit; font-size: 14px; }
.ui-modal-actions, .ui-cp-actions { display: flex; gap: 8px; }
.ui-btn { flex: 1; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; background: var(--ui-soft); color: var(--ui-ink-2); }
.ui-btn.primary { background: var(--ui-accent); color: #fff; }
.ui-btn.danger { background: var(--ui-danger); color: #fff; }
.ui-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--ui-accent) 45%, transparent); outline-offset: 2px; }
@media (max-width: 599px) { .ui-modal-back { place-items: end center; padding: 0; } .ui-modal { width: 100%; border-radius: 22px 22px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); } }

/* ---------- colour field + picker ---------- */
.ui-color { display: block; width: 100%; min-width: 0; }
.ui-color-btn { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border: 1.5px solid var(--ui-line); border-radius: 12px; background: var(--ui-field); color: var(--ui-ink); font: inherit; font-size: 14px; cursor: pointer; }
.ui-color-btn:hover, .ui-color-btn:focus-visible { border-color: var(--ui-accent); outline: none; }
.ui-swatch { display: inline-block; width: 28px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); flex-shrink: 0; }
.ui-swatch.big { width: 40px; height: 40px; border-radius: 10px; }
.ui-color-hex { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--ui-ink-2); }
.ui-color-pop { padding: 12px; }
.ui-cp { display: grid; gap: 12px; }
.ui-cp-sv { position: relative; height: 170px; border-radius: 12px; cursor: crosshair; touch-action: none; }
.ui-cp-dot, .ui-cp-hdot { position: absolute; width: 18px; height: 18px; margin: -9px -9px 0 0; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .3); pointer-events: none; }
.ui-cp-hue { position: relative; height: 16px; border-radius: 99px; cursor: pointer; touch-action: none; background: linear-gradient(to left, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }
.ui-cp-hdot { top: 50%; margin-top: -9px; }
.ui-cp-row { display: flex; align-items: center; gap: 10px; }
.ui-cp-hex { flex: 1; min-width: 0; padding: 9px 12px; border: 1.5px solid var(--ui-line); border-radius: 12px; background: var(--ui-field); color: var(--ui-ink); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; outline: none; }
.ui-cp-hex:focus { border-color: var(--ui-accent); }
.ui-cp-presets { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.ui-cp-preset { aspect-ratio: 1; border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); cursor: pointer; padding: 0; }
.ui-cp-preset:hover, .ui-cp-preset:focus-visible { transform: scale(1.12); outline: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 0 0 2px var(--ui-accent); }

/* ---------- checkboxes, radios, sliders, number fields drawn by the site ---------- */
:where(input[type=checkbox]:not(.ui-hidden-field)), :where(input[type=radio]:not(.ui-hidden-field)) {
  -webkit-appearance: none; appearance: none; display: inline-grid; place-content: center; flex-shrink: 0;
  width: 20px; height: 20px; margin: 0; border: 2px solid var(--ui-line); background: var(--ui-field); cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s; vertical-align: middle;
}
:where(input[type=checkbox]:not(.ui-hidden-field)) { border-radius: 6px; }
:where(input[type=radio]:not(.ui-hidden-field)) { border-radius: 50%; }
:where(input[type=checkbox]:not(.ui-hidden-field))::after { content: ''; width: 10px; height: 6px; margin-top: -3px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) scale(0); transition: transform .15s; }
:where(input[type=radio]:not(.ui-hidden-field))::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .15s; }
:where(input[type=checkbox]:not(.ui-hidden-field)):checked, :where(input[type=radio]:not(.ui-hidden-field)):checked { background: var(--ui-accent); border-color: var(--ui-accent); }
:where(input[type=checkbox]:not(.ui-hidden-field)):checked::after { transform: rotate(-45deg) scale(1); }
:where(input[type=radio]:not(.ui-hidden-field)):checked::after { transform: scale(1); }
:where(input[type=checkbox]:not(.ui-hidden-field)):focus-visible, :where(input[type=radio]:not(.ui-hidden-field)):focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-accent) 20%, transparent); }
:where(input[type=checkbox]:not(.ui-hidden-field)):disabled, :where(input[type=radio]:not(.ui-hidden-field)):disabled { opacity: .5; cursor: not-allowed; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: var(--ui-line); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 99px; background: var(--ui-line); }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--ui-accent); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; border: 3px solid #fff; background: var(--ui-accent); box-shadow: 0 2px 8px rgba(20, 22, 39, .3); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; background: var(--ui-accent); box-shadow: 0 2px 8px rgba(20, 22, 39, .3); }
input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ui-accent) 25%, transparent); }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* site suggestion list under a text field (product tags) */
.ui-suggest { position: absolute; z-index: 50; top: calc(100% + 4px); right: 0; left: 0; display: grid; gap: 2px; max-height: 240px; overflow: auto; padding: 6px; border-radius: 14px; background: var(--ui-card); border: 1px solid var(--ui-line); box-shadow: 0 16px 40px rgba(20, 22, 39, .18); }
.ui-suggest[hidden] { display: none; }

/* ---------- new password: strength bar and checklist (ui.js) ---------- */
:root, [data-theme] {
  --ui-ok: var(--a-ok, var(--ok, #11a36a));
  --pw-1: #e5484d; --pw-2: #f08c00; --pw-3: #2f9e44; --pw-4: #0ca678;
}
.pw-meter { display: none; margin-top: 8px; font-size: 12.5px; font-weight: 400; color: var(--ui-muted); line-height: 1.7; }
.pw-meter.is-on { display: block; }
.pw-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; direction: rtl; }
.pw-bar i { height: 5px; border-radius: 99px; background: var(--ui-line); transition: background .25s; }
.pw-meter[data-level="1"] .pw-bar i:nth-child(-n+1) { background: var(--pw-1); }
.pw-meter[data-level="2"] .pw-bar i:nth-child(-n+2) { background: var(--pw-2); }
.pw-meter[data-level="3"] .pw-bar i:nth-child(-n+3) { background: var(--pw-3); }
.pw-meter[data-level="4"] .pw-bar i { background: var(--pw-4); }
.pw-label { margin-top: 4px; min-height: 1.7em; }
.pw-meter[data-level="1"] .pw-label b { color: var(--pw-1); }
.pw-meter[data-level="2"] .pw-label b { color: var(--pw-2); }
.pw-meter[data-level="3"] .pw-label b { color: var(--pw-3); }
.pw-meter[data-level="4"] .pw-label b { color: var(--pw-4); }
.pw-rules { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 12px; }
.pw-rules li { position: relative; padding-right: 20px; transition: color .2s; }
.pw-rules li::before { content: ''; position: absolute; right: 2px; top: .55em; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .6; box-sizing: border-box; }
.pw-rules li.ok { color: var(--ui-ok); }
.pw-rules li.ok::before { top: .45em; width: 12px; height: 7px; border-radius: 0; border: 0; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(-45deg); opacity: 1; }
.pw-note:not(:empty) { margin-top: 4px; color: var(--ui-danger); }
.pw-match { font-size: 12.5px; font-weight: 400; margin-top: 6px; }
.pw-match:empty { display: none; }
.pw-match.ok { color: var(--ui-ok); }
.pw-match.bad { color: var(--ui-danger); }