/* Colour pickers and drop-down lists (see pickers.js). Every colour is a token with a fallback, so the same file
   serves the dashboard, the platform page, the sign-up pages and the customer menu. Logical properties keep it
   right in Arabic. */

/* The real <select> / <input type=color> stay in the page, out of sight and out of the layout. */
.pk-native {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip-path: inset(50%);
}
.pk-select[hidden], .pk-color[hidden] { display: none !important; }

/* ---------- the field that shows the choice ---------- */
.pk-select, .pk-color {
  --pk-field: var(--field, var(--surface, var(--card, #fff)));
  --pk-line: var(--line, rgba(0, 0, 0, .14));
  --pk-ring: var(--brand, #1F6F6B);
}
.pk-select {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; height: var(--ctl, 40px); min-height: var(--ctl, 40px); box-sizing: border-box;
  padding: 0 12px; font: inherit; color: var(--text, inherit); text-align: start; cursor: pointer;
  background: var(--pk-field); border: 1px solid var(--pk-line); border-radius: var(--r-sm, 10px);
  transition: border-color .15s, box-shadow .15s;
}
.pk-select::after {
  content: ''; flex: none; width: 7px; height: 7px; margin-inline-start: auto; margin-block-end: 3px;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: .55; transition: transform .15s;
}
.pk-select[aria-expanded=true]::after { transform: rotate(-135deg); margin-block-end: -2px; }
.pk-select .pk-val { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-select.empty .pk-val { opacity: .6; }
.pk-select:hover { border-color: color-mix(in srgb, var(--pk-ring) 45%, var(--pk-line)); }
.pk-select:focus-visible, .pk-select[aria-expanded=true] { outline: none; border-color: var(--pk-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pk-ring) 18%, transparent); }
.pk-select:disabled { opacity: .55; cursor: not-allowed; }

.pk-color {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 5px 6px; padding-inline-end: 10px;
  background: var(--pk-field); border: 1px solid var(--pk-line); border-radius: var(--r-sm, 10px);
  transition: border-color .15s, box-shadow .15s;
}
.pk-color:focus-within { border-color: var(--pk-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pk-ring) 18%, transparent); }
.pk-sw {
  flex: none; width: 32px; height: 32px; padding: 0; cursor: pointer; border-radius: 9px; border: 1px solid rgba(0, 0, 0, .18);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
}
.pk-sw:focus-visible { outline: 2px solid var(--pk-ring); outline-offset: 2px; }
.pk-color .pk-hex {
  flex: 1 1 auto; min-width: 0; width: auto; height: auto; padding: 4px 2px; border: 0; background: transparent; box-shadow: none;
  color: var(--text, inherit); font: 600 .95rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; text-transform: uppercase;
}
.pk-color .pk-hex:focus { outline: none; box-shadow: none; }
.pk-color:has(:disabled) { opacity: .55; }
/* In a row of small controls (a tag's colour) and in the QR colour row the field stays compact. */
.list-row .pk-color, .qr-colors .pk-color { width: auto; flex: none; }
.list-row .pk-hex, .qr-colors .pk-hex { width: 7.4ch; flex: none; }
.color-pick .pk-color { width: auto; }

/* ---------- the popup ---------- */
.pk-pop {
  position: fixed; inset: auto; margin: 0; padding: 0; overflow: hidden auto; max-height: min(360px, calc(100dvh - 16px)); box-sizing: border-box;
  color: var(--text, #222); background: var(--surface, var(--card, #fff)); border: 1px solid var(--line, rgba(0, 0, 0, .12));
  border-radius: 14px; box-shadow: var(--shadow-lift, 0 16px 40px rgba(0, 0, 0, .18)); animation: pk-in .14s ease-out;
  overscroll-behavior: contain; -webkit-user-select: none; user-select: none;
}
.pk-pop .pk-search, .pk-pop .pk-hex2 { -webkit-user-select: text; user-select: text; }
.pk-pop.pk-sheet {
  inset: auto 0 0 0; width: auto; max-height: 78dvh; border-radius: 20px 20px 0 0; border-width: 1px 0 0;
  padding-bottom: env(safe-area-inset-bottom); animation: pk-up .2s cubic-bezier(.2, .8, .2, 1);
}
.pk-pop.pk-sheet::before { content: ''; display: block; width: 38px; height: 4px; margin: 8px auto 0; border-radius: 4px; background: var(--line, rgba(0, 0, 0, .18)); }
.pk-pop::backdrop { background: rgba(10, 14, 22, .38); }
.pk-pop:not(.pk-sheet)::backdrop { background: transparent; }
@keyframes pk-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes pk-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .pk-pop, .pk-pop.pk-sheet { animation: none; } }

.pk-body { padding: 8px; }
.pk-pop.pk-sheet .pk-body { padding: 10px 14px 14px; }

/* list */
.pk-search {
  width: 100%; margin-bottom: 6px; padding: 9px 12px; font: inherit; color: inherit; box-sizing: border-box;
  background: var(--field, var(--surface-2, #f5f5f5)); border: 1px solid var(--line, rgba(0, 0, 0, .12)); border-radius: 10px;
}
.pk-search:focus { outline: none; border-color: var(--brand, #1F6F6B); }
.pk-list { display: flex; flex-direction: column; gap: 1px; }
.pk-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 12px; font: inherit; text-align: start;
  color: inherit; background: transparent; border: 0; border-radius: 10px; cursor: pointer;
}
.pk-opt[hidden] { display: none; }
.pk-opt svg { flex: none; opacity: 0; color: var(--brand, #1F6F6B); }
.pk-opt[aria-selected=true] { font-weight: 700; background: var(--brand-soft, rgba(139, 94, 60, .12)); }
.pk-opt[aria-selected=true] svg { opacity: 1; }
.pk-opt:hover:not(:disabled), .pk-opt:focus-visible { outline: none; background: color-mix(in srgb, var(--brand, #1F6F6B) 10%, transparent); }
.pk-opt:disabled { opacity: .45; cursor: not-allowed; }
.pk-opt.in-group { padding-inline-start: 22px; }
.pk-group { padding: 8px 12px 2px; font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #777); }
.pk-none { margin: 10px; text-align: center; color: var(--muted, #777); }
.pk-pop.pk-sheet .pk-opt { padding: 13px 14px; font-size: 1.02rem; }

/* colour */
.pk-c { display: flex; flex-direction: column; gap: 10px; }
.pk-area, .pk-hue { position: relative; border-radius: 10px; cursor: crosshair; touch-action: none; }
.pk-area { height: 150px; }
.pk-pop.pk-sheet .pk-area { height: 180px; }
.pk-hue { height: 14px; border-radius: 99px; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.pk-thumb {
  position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; pointer-events: none;
  border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .3);
}
.pk-hue .pk-thumb { top: 50%; }
.pk-row { display: flex; align-items: center; gap: 8px; }
.pk-prev { flex: none; width: 34px; height: 34px; border-radius: 9px; border: 1px solid rgba(0, 0, 0, .18); }
.pk-hex2 {
  flex: 1 1 auto; min-width: 0; padding: 8px 10px; box-sizing: border-box; color: inherit; text-transform: uppercase;
  font: 600 1rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--field, var(--surface-2, #f5f5f5));
  border: 1px solid var(--line, rgba(0, 0, 0, .12)); border-radius: 10px;
}
.pk-hex2:focus { outline: none; border-color: var(--brand, #1F6F6B); }
.pk-eye { flex: none; display: grid; place-items: center; width: 38px; height: 38px; color: inherit; cursor: pointer; background: transparent; border: 1px solid var(--line, rgba(0, 0, 0, .12)); border-radius: 10px; }
.pk-grid { display: flex; flex-direction: column; gap: 4px; }
.pk-cap { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #777); }
.pk-sws { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.pk-s { width: 28px; height: 28px; padding: 0; cursor: pointer; border-radius: 50%; border: 2px solid var(--surface, #fff); box-shadow: 0 0 0 1px var(--line, rgba(0, 0, 0, .2)); }
.pk-pop.pk-sheet .pk-s { width: 34px; height: 34px; }
.pk-s:hover, .pk-s:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand, #1F6F6B); }
.pk-done { padding: 12px; font: inherit; font-weight: 800; cursor: pointer; color: var(--on-brand, #fff); background: var(--brand, #1F6F6B); border: 0; border-radius: 12px; }