/* ============================================================
   KOLIKT — Seller Onboarding (web)
   Tokens lifted from the KOLIKT brand · Maqal type · Nocturne/Ivory
   ============================================================ */
:root{
  --font-display: "Playfair Display", serif;
  --font-body:    "Markazi Text", serif;
  --font-arabic:  "Markazi Text", serif;
  --font-mono:    "Spline Sans Mono", ui-monospace, monospace;
  --display-weight: 600;
}
:root, [data-theme="nocturne"]{
  --bg:        oklch(0.158 0.013 285);
  --bg-deep:   oklch(0.125 0.012 285);
  --surface:   oklch(0.205 0.015 285);
  --surface-2: oklch(0.255 0.017 285);
  --border:    oklch(0.34 0.016 285);
  --border-soft: oklch(0.28 0.015 285);
  --text:      oklch(0.955 0.006 85);
  --text-dim:  oklch(0.76 0.012 280);
  --text-mute: oklch(0.60 0.013 282);
  --primary:   oklch(0.815 0.115 83);
  --primary-strong: oklch(0.86 0.12 85);
  --primary-ink: oklch(0.17 0.03 80);
  --accent:    oklch(0.70 0.105 168);
  --accent-2:  oklch(0.64 0.14 18);
  --accent-3:  oklch(0.68 0.115 258);
  --ph-base:   oklch(0.22 0.015 285);
  --ph-line:   oklch(0.30 0.018 285);
  --scrim:     oklch(0.125 0.012 285 / 0.82);
  --glass:     oklch(0.158 0.013 285 / 0.72);
  --shadow: 0 1px 2px oklch(0 0 0 / 0.4), 0 24px 60px -28px oklch(0 0 0 / 0.7);
  --danger:    oklch(0.64 0.16 18);
  color-scheme: dark;
}
[data-theme="ivory"]{
  --bg:        oklch(0.962 0.012 78);
  --bg-deep:   oklch(0.93 0.015 76);
  --surface:   oklch(0.993 0.006 80);
  --surface-2: oklch(0.945 0.013 76);
  --border:    oklch(0.86 0.018 70);
  --border-soft: oklch(0.90 0.015 72);
  --text:      oklch(0.255 0.02 52);
  --text-dim:  oklch(0.44 0.022 55);
  --text-mute: oklch(0.575 0.022 60);
  --primary:   oklch(0.565 0.105 68);
  --primary-strong: oklch(0.50 0.11 65);
  --primary-ink: oklch(0.985 0.01 80);
  --accent:    oklch(0.46 0.11 38);
  --accent-2:  oklch(0.52 0.14 22);
  --accent-3:  oklch(0.47 0.105 320);
  --ph-base:   oklch(0.93 0.013 76);
  --ph-line:   oklch(0.86 0.018 70);
  --scrim:     oklch(0.99 0.006 80 / 0.78);
  --glass:     oklch(0.962 0.012 78 / 0.74);
  --shadow: 0 1px 2px oklch(0.4 0.03 60 / 0.10), 0 24px 50px -30px oklch(0.4 0.04 60 / 0.30);
  --danger:    oklch(0.52 0.16 25);
  color-scheme: light;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 18px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
[dir="rtl"]{ --font-body: "Markazi Text", serif; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: var(--display-weight); margin: 0; line-height: 1.05; }
.mono{ font-family: var(--font-mono); }
::selection{ background: var(--primary); color: var(--primary-ink); }
a{ color: var(--primary); text-decoration: none; }
a:hover{ color: var(--primary-strong); }

/* ---- top bar ---- */
.bar{
  position: sticky; top: 0; z-index: 40;
  background: var(--glass); backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--border-soft);
}
.bar-inner{ max-width: 1180px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.brand{ display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.navlinks{ display: flex; gap: 22px; align-items: center; margin-inline: auto; }
.navlinks a{ font-family: var(--font-body); font-size: 17px; color: var(--text-dim); text-decoration: none; white-space: nowrap; }
.navlinks a:hover{ color: var(--text); }
@media(max-width: 1120px){ .navlinks{ display: none; } .brand{ margin-inline-end: auto; } }
@media(max-width: 760px){ #taglineTxt{ display: none; } }
#taglineTxt{ white-space: nowrap; }
.brand .bn{ font-family: var(--font-display); font-weight: var(--display-weight); font-size: 24px; letter-spacing: 0.12em; }
[dir="rtl"] .brand .bn{ letter-spacing: 0; }
.brand .dot{ color: var(--primary); }

.medallion{
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; position: relative;
  border: 1px solid var(--primary); color: var(--primary);
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: 18px; line-height: 1; flex: none;
  background: radial-gradient(circle at 50% 34%, color-mix(in oklab, var(--primary) 14%, transparent), transparent 70%);
}
.medallion::before{ content:""; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--primary) 38%, transparent); }
.medallion .star{ position: absolute; width: 5px; height: 5px; background: var(--primary); transform: rotate(45deg); top: -2.5px; left: 50%; margin-left: -2.5px; }

.toggle{ display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.toggle button{
  appearance: none; border: none; cursor: pointer; background: transparent; color: var(--text-dim);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; padding: 6px 13px; border-radius: 999px;
  transition: all .18s ease; white-space: nowrap; line-height: 1;
}
[dir="rtl"] .toggle button{ font-family: var(--font-body); font-size: 15px; letter-spacing: 0; }
.toggle button:hover{ color: var(--text); }
.toggle button[aria-pressed="true"]{ background: var(--primary); color: var(--primary-ink); }

/* ---- layout ---- */
.shell{ max-width: 1180px; margin: 0 auto; padding: 46px 32px 90px; display: grid; grid-template-columns: 280px 1fr; gap: 54px; align-items: start; }

.aside{ position: sticky; top: 96px; }
.eyebrow{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--primary); display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
[dir="rtl"] .eyebrow{ letter-spacing: 0; }
.eyebrow::before{ content:""; width: 24px; height: 1px; background: var(--primary); }
.aside h1{ font-size: 34px; letter-spacing: 0.005em; }
.aside .lede{ color: var(--text-dim); font-size: 17px; margin-top: 12px; max-width: 34ch; }

/* vertical stepper */
.stepper{ list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-direction: column; }
.stepper li{ display: flex; gap: 14px; align-items: flex-start; padding-bottom: 6px; }
.stepper .rail{ display: flex; flex-direction: column; align-items: center; flex: none; }
.stepper .dot{
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); flex: none;
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; color: var(--text-mute);
  background: var(--surface); transition: all .25s ease;
}
.stepper .line{ width: 1px; flex: 1; min-height: 22px; background: var(--border-soft); margin: 4px 0; transition: background .25s ease; }
.stepper li:last-child .line{ display: none; }
.stepper .sl{ padding-top: 4px; }
.stepper .st-t{ font-family: var(--font-display); font-weight: var(--display-weight); font-size: 18px; color: var(--text-dim); transition: color .2s ease; line-height: 1.2; }
.stepper .st-s{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); margin-top: 3px; }
[dir="rtl"] .stepper .st-s{ letter-spacing: 0; font-family: var(--font-body); font-size: 13px; }
.stepper li[data-state="active"] .dot{ border-color: var(--primary); color: var(--primary-ink); background: var(--primary); }
.stepper li[data-state="active"] .st-t{ color: var(--text); }
.stepper li[data-state="done"] .dot{ border-color: var(--primary); color: var(--primary); background: color-mix(in oklab, var(--primary) 16%, transparent); }
.stepper li[data-state="done"] .line{ background: color-mix(in oklab, var(--primary) 45%, var(--border-soft)); }
.stepper li[data-state="done"] .st-t{ color: var(--text-dim); }

/* ---- form panel ---- */
.panel{ min-width: 0; }
.progress{ height: 3px; background: var(--border-soft); border-radius: 999px; overflow: hidden; margin-bottom: 34px; }
.progress .fill{ height: 100%; background: var(--primary); border-radius: 999px; width: 0; transition: width .4s cubic-bezier(.22,1,.36,1); }

.step-head{ margin-bottom: 30px; }
.step-head .n{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-mute); }
[dir="rtl"] .step-head .n{ letter-spacing: 0; }
.step-head h2{ font-size: clamp(28px, 4vw, 40px); margin-top: 8px; }
.step-head p{ color: var(--text-dim); margin-top: 10px; max-width: 56ch; font-size: 17px; }

.step{ animation: stepIn .38s cubic-bezier(.22,1,.36,1); }
@keyframes stepIn{ from{ opacity: 0; transform: translateY(10px);} to{ opacity: 1; transform: none;} }

/* field grid */
.grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 22px; }
.field{ display: flex; flex-direction: column; gap: 8px; }
.field.wide{ grid-column: 1 / -1; }
.field > label{ font-size: 16px; color: var(--text); display: flex; align-items: baseline; gap: 8px; }
.field > label .ar-h{ color: var(--text-mute); font-size: 15px; }
.field .req{ color: var(--primary); font-family: var(--font-mono); font-size: 12px; }
.field .hint{ font-size: 14px; color: var(--text-mute); margin-top: -2px; }

.control{
  width: 100%; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 15px; color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.4;
  transition: border-color .18s ease, box-shadow .18s ease;
}
textarea.control{ resize: vertical; min-height: 104px; }
.control::placeholder{ color: var(--text-mute); }
.control:focus{ outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent); }
select.control{ cursor: pointer; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-mute) 50%), linear-gradient(135deg, var(--text-mute) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-inline-end: 40px; }
[dir="rtl"] select.control{ background-position: 20px 21px, 14px 21px; }
.field.invalid .control{ border-color: var(--danger); }
.field .err{ font-family: var(--font-mono); font-size: 12.5px; color: var(--danger); display: none; }
[dir="rtl"] .field .err{ font-family: var(--font-body); font-size: 15px; }
.field.invalid .err{ display: block; }

.input-prefix{ display: flex; align-items: stretch; }
.input-prefix .pfx{ display: grid; place-items: center; padding: 0 14px; background: var(--surface-2); border: 1px solid var(--border); border-inline-end: none; border-radius: 12px 0 0 12px; color: var(--text-mute); font-family: var(--font-mono); font-size: 14px; }
[dir="rtl"] .input-prefix .pfx{ border-radius: 0 12px 12px 0; }
.input-prefix .control{ border-radius: 0 12px 12px 0; }
[dir="rtl"] .input-prefix .control{ border-radius: 12px 0 0 12px; }

/* radio cards (seller type) */
.cards{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.rcard{ position: relative; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 20px 20px 18px; cursor: pointer; transition: all .2s ease; }
.rcard:hover{ border-color: var(--primary); transform: translateY(-2px); }
.rcard input{ position: absolute; opacity: 0; pointer-events: none; }
.rcard .rc-ic{ width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--primary); margin-bottom: 14px; background: color-mix(in oklab, var(--primary) 8%, transparent); }
.rcard .rc-ic svg{ width: 21px; height: 21px; }
.rcard .rc-t{ font-family: var(--font-display); font-weight: var(--display-weight); font-size: 20px; line-height: 1.15; }
.rcard .rc-d{ color: var(--text-mute); font-size: 15px; margin-top: 5px; line-height: 1.35; }
.rcard .rc-check{ position: absolute; top: 16px; inset-inline-end: 16px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; transition: all .2s ease; }
.rcard .rc-check svg{ width: 12px; height: 12px; color: var(--primary-ink); opacity: 0; }
.rcard input:checked ~ .rc-check{ background: var(--primary); border-color: var(--primary); }
.rcard input:checked ~ .rc-check svg{ opacity: 1; }
.rcard:has(input:checked){ border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

/* category chips (multi) */
.chipset{ display: flex; flex-wrap: wrap; gap: 10px; }
.chipset label{ cursor: pointer; }
.chipset input{ position: absolute; opacity: 0; pointer-events: none; }
.chipset .chp{ display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px; font-size: 16px; color: var(--text-dim); transition: all .18s ease; }
.chipset .chp:hover{ border-color: var(--primary); color: var(--text); }
.chipset input:checked + .chp{ background: color-mix(in oklab, var(--primary) 16%, transparent); border-color: var(--primary); color: var(--primary); }

/* file / image uploaders */
.drop{ border: 1.5px dashed var(--border); border-radius: 16px; background: var(--surface); padding: 26px; text-align: center; cursor: pointer; transition: all .2s ease; }
.drop:hover, .drop.over{ border-color: var(--primary); background: color-mix(in oklab, var(--primary) 6%, var(--surface)); }
.drop .di{ width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); display: grid; place-items: center; margin: 0 auto 12px; color: var(--primary); }
.drop .di svg{ width: 22px; height: 22px; }
.drop .dt{ font-size: 17px; color: var(--text); }
.drop .ds{ font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); margin-top: 6px; letter-spacing: 0.04em; }
[dir="rtl"] .drop .ds{ font-family: var(--font-body); font-size: 15px; letter-spacing: 0; }

.filelist{ display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.fileitem{ display: flex; align-items: center; gap: 12px; background: var(--bg-deep); border: 1px solid var(--border-soft); border-radius: 11px; padding: 10px 12px; }
.fileitem .fi-ic{ width: 34px; height: 34px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; color: var(--primary); flex: none; }
.fileitem .fi-ic svg{ width: 16px; height: 16px; }
.fileitem .fi-nm{ flex: 1; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fileitem .fi-sz{ font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); flex: none; }
.fileitem .rm{ appearance: none; border: none; background: none; cursor: pointer; color: var(--text-mute); width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; transition: all .15s ease; flex: none; }
.fileitem .rm:hover{ color: var(--danger); background: color-mix(in oklab, var(--danger) 14%, transparent); }
.fileitem .rm svg{ width: 14px; height: 14px; }

.thumbs{ display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 12px; margin-top: 14px; }
.thumb{ position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-soft); background: var(--ph-base); }
.thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb .rm{ position: absolute; top: 6px; inset-inline-end: 6px; width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer; background: var(--scrim); color: var(--text); display: grid; place-items: center; backdrop-filter: blur(6px); }
.thumb .rm svg{ width: 13px; height: 13px; }

/* review */
.review{ display: flex; flex-direction: column; gap: 2px; }
.rev-group{ border: 1px solid var(--border-soft); border-radius: 16px; background: var(--surface); padding: 22px 24px; margin-bottom: 14px; }
.rev-group .rg-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.rev-group .rg-t{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary); }
[dir="rtl"] .rev-group .rg-t{ letter-spacing: 0; font-family: var(--font-body); font-size: 15px; }
.rev-group .edit{ appearance: none; border: none; background: none; cursor: pointer; color: var(--text-dim); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; }
[dir="rtl"] .rev-group .edit{ font-family: var(--font-body); font-size: 15px; letter-spacing: 0; }
.rev-group .edit:hover{ color: var(--primary); }
.rev-rows{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.rev-rows .rr{ display: flex; flex-direction: column; gap: 3px; }
.rev-rows .rr.wide{ grid-column: 1 / -1; }
.rev-rows .rk{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
[dir="rtl"] .rev-rows .rk{ letter-spacing: 0; font-family: var(--font-body); font-size: 14px; }
.rev-rows .rv{ font-size: 17px; color: var(--text); }
.rev-rows .rv.empty{ color: var(--text-mute); font-style: italic; }

.agree{ display: flex; gap: 13px; align-items: flex-start; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 18px 20px; cursor: pointer; margin-top: 4px; }
.agree.invalid{ border-color: var(--danger); }
.agree input{ position: absolute; opacity: 0; }
.agree .box{ width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--border); flex: none; display: grid; place-items: center; margin-top: 1px; transition: all .18s ease; }
.agree .box svg{ width: 14px; height: 14px; color: var(--primary-ink); opacity: 0; }
.agree input:checked + .box{ background: var(--primary); border-color: var(--primary); }
.agree input:checked + .box svg{ opacity: 1; }
.agree .at{ font-size: 16px; color: var(--text-dim); line-height: 1.45; }
.agree .at b{ color: var(--text); font-weight: 600; }

/* nav */
.nav{ display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--border-soft); }
.btn{ font-family: var(--font-body); font-size: 17px; font-weight: 600; cursor: pointer; border-radius: 12px; padding: 13px 26px; border: 1px solid transparent; transition: all .18s ease; display: inline-flex; align-items: center; gap: 10px; line-height: 1; }
.btn:active{ transform: scale(0.98); }
.btn svg{ width: 17px; height: 17px; }
.btn-primary{ background: var(--primary); color: var(--primary-ink); }
.btn-primary:hover{ background: var(--primary-strong); }
.btn-secondary{ background: transparent; color: var(--text); border-color: var(--border); }
.btn-secondary:hover{ border-color: var(--primary); color: var(--primary); }
.btn-ghost{ background: transparent; color: var(--text-dim); }
.btn-ghost:hover{ color: var(--primary); }
.btn.hidden{ visibility: hidden; }
[dir="rtl"] .btn .arr{ transform: scaleX(-1); }

/* success */
.done{ text-align: center; max-width: 560px; margin: 30px auto; animation: stepIn .5s cubic-bezier(.22,1,.36,1); }
.done .seal{ width: 96px; height: 96px; margin: 0 auto 28px; border-radius: 50%; border: 1px solid var(--primary); display: grid; place-items: center; color: var(--primary); position: relative; background: radial-gradient(circle at 50% 34%, color-mix(in oklab, var(--primary) 16%, transparent), transparent 70%); animation: sealPop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes sealPop{ from{ transform: scale(.6); opacity: 0;} to{ transform: none; opacity: 1;} }
.done .seal::before{ content:""; position: absolute; inset: 7px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--primary) 38%, transparent); }
.done .seal svg{ width: 40px; height: 40px; }
.done h2{ font-size: clamp(32px, 5vw, 46px); }
.done .ref{ font-family: var(--font-mono); font-size: 14px; color: var(--primary); margin-top: 14px; letter-spacing: 0.1em; }
[dir="rtl"] .done .ref{ letter-spacing: 0; }
.done p{ color: var(--text-dim); font-size: 18px; margin-top: 16px; }
.done .steps-next{ text-align: start; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--surface); padding: 22px 24px; margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }
.done .steps-next .sn{ display: flex; gap: 14px; align-items: flex-start; }
.done .steps-next .sn .num{ width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--primary); color: var(--primary); font-family: var(--font-mono); font-size: 12px; display: grid; place-items: center; flex: none; }
.done .steps-next .sn .snt{ font-size: 16px; color: var(--text-dim); }
.done .steps-next .sn .snt b{ color: var(--text); font-weight: 600; }

.foot{ text-align: center; padding: 40px 32px 60px; color: var(--text-mute); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.08em; }
[dir="rtl"] .foot{ font-family: var(--font-body); font-size: 15px; letter-spacing: 0; }

@media (max-width: 900px){
  .shell{ grid-template-columns: 1fr; gap: 30px; padding: 30px 22px 70px; }
  .aside{ position: static; }
  .aside .lede{ max-width: none; }
  .stepper{ flex-direction: row; overflow-x: auto; margin-top: 22px; padding-bottom: 8px; }
  .stepper li{ flex-direction: column; align-items: center; text-align: center; flex: 1; min-width: 88px; padding-bottom: 0; }
  .stepper .rail{ flex-direction: row; width: 100%; }
  .stepper .line{ height: 1px; width: 100%; min-height: 0; margin: 0 0; align-self: center; }
  .stepper .sl{ padding-top: 8px; }
  .stepper .st-s{ display: none; }
  .grid, .cards, .rev-rows{ grid-template-columns: 1fr; }
  .bar-inner{ padding: 12px 20px; }
}

/* ---- embedded in a prototype shell (?embed=1) ---- */
html[data-embed] .bar, html[data-embed] .foot{ display:none; }
html[data-embed] body{ background:transparent; }
html[data-embed] .shell{ padding:30px 30px 60px; gap:40px; grid-template-columns:240px 1fr; }
html[data-embed] .aside{ top:20px; }
html[data-embed] .aside h1{ font-size:32px; }